mediawiki-extensions-Echo/modules/nojs/mw.echo.notifications.less
Volker E 7f6f792a3a styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' `@import`
with new skin-aware 'mediawiki.skin.variables.less' standard.
Also replacing and removing scattered WikimediaUI Base v0.15.0 variables
with new skin variables.

Also
- replacing several static values with new Codex design tokens featuring
  skin variables for following properties:
  - background-color
  - color
  - border-width, border-style, border-color and border shorthand
  - border-radius
  - box-shadow colors
  - outline-width, outline-style, outline-color and outline shorthand
  - opacity
- replacing equal-value Echo variables with new skin variables
- replacing `opacity: 0` with `opacity: 1px solid transparent`, which
  improves accessibility in Windows High Contrast mode

Bump required MediaWiki core version to >= v1.41.0.

Bug: T332541
Co-Authored-by: Volker E. <volker.e@wikimedia.org>
Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06
Change-Id: If3863f07d7c3a8b58808fb03401c1060a92bc2ab
2023-04-04 01:26:11 -07:00

92 lines
1.8 KiB
Plaintext

@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';
@import '../echo.variables.less';
@import '../echo.mixins.less';
// This is only valid for the Special:Notifications page in no-JS mode,
// where the formatting of the notifications include the following structure
.mw-echo-state {
display: block;
box-sizing: border-box;
width: 100%;
.mw-echo-notification-primary-link {
display: none;
}
.mw-echo-icon {
width: 30px;
height: 30px;
float: left;
margin-right: 10px;
margin-left: 10px;
}
.mw-echo-notification {
background-color: @background-color-base;
color: @grey-light;
clear: both;
display: block;
line-height: 90%;
margin: 0;
min-height: 30px;
position: relative;
padding-top: 15px;
padding-bottom: 10px;
/* Force container to expand to height of floated contents */
overflow: hidden;
/* stylelint-disable-next-line selector-class-pattern */
span.autocomment {
color: inherit;
font-style: normal;
}
}
.mw-echo-notifications {
background-color: @notification-background-read;
}
.mw-echo-content {
overflow: hidden;
display: block;
.mw-echo-title {
color: @color-emphasized;
}
.mw-echo-payload {
color: @notification-body-color;
margin-top: 4px;
.text-overflow( @visible: false );
}
.mw-echo-title,
.mw-echo-payload {
font-size: 1em;
line-height: 1.4em;
/* stylelint-disable-next-line selector-class-pattern */
.plainlinks {
max-width: 100%;
display: inline-block;
.text-overflow( @visible: false );
vertical-align: top;
}
}
.mw-echo-notification-footer {
color: @grey-light;
font-size: 11px;
margin-top: 0.2em;
.mw-echo-notification-footer-element {
display: inline-block;
max-width: 15em;
margin-right: 0.5em;
.text-overflow( @visible: false );
}
}
}
}