mediawiki-extensions-Echo/modules/styles/mw.echo.ui.NotificationsInboxWidget.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

116 lines
1.9 KiB
Plaintext

@import 'mediawiki.skin.variables.less';
@import '../echo.variables.less';
.mw-echo-ui-notificationsInboxWidget {
display: table;
width: 100%;
max-width: @specialpage-width;
position: relative;
&-row {
display: table-row;
width: 100%;
}
&-toolbarWrapper {
height: 3.5em;
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
position: -webkit-sticky;
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
position: sticky;
padding-top: 0.5em;
margin-top: -0.5em;
top: 0;
z-index: 2;
background-color: @background-color-base;
box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.1 );
}
&-cell {
display: table-cell;
vertical-align: middle;
&-placeholder {
display: table-cell;
width: 100%;
}
}
&-sidebar {
width: @specialpage-sidebar-width;
padding-right: 1em;
vertical-align: top;
}
&-main {
vertical-align: top;
&-toolbar {
&-top {
display: table;
width: 100%;
}
&-readState {
display: inline-block;
.mw-echo-ui-readStateButtonSelectWidget {
white-space: nowrap;
}
}
&-settings {
padding-left: 1em;
}
}
}
@media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
// Override table-layout for the top toolbar so we get
// filters and pagination under one another
&-main {
&-toolbar {
&-top {
display: block;
margin-bottom: 1em;
.mw-echo-ui-notificationsInboxWidget-row {
display: block;
text-align: center;
}
}
// Nav filter is the mobile version of readState
&-readState,
&-nav-filter {
display: block;
}
&-settings,
&-pagination {
display: inline-block;
margin-top: 1em;
}
&-settings {
.oo-ui-popupWidget-popup {
text-align: left;
}
}
}
}
&-cell-placeholder {
display: block;
}
&-sidebar {
display: none;
}
&-toolbarWrapper {
height: 7em;
}
}
}