mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-25 12:03:19 +00:00
6f98cc6460
Remove direct usage of CSS variables in Minerva, and replace them with codex design tokens again. Document this decision in the original ADR Note: there are still a small number of CSS variables in use, including most notably the --color-link-red fix, which broke when I removed it, but this change takes care of all the ones that could be easily replaced Bug: T363743 Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
56 lines
1.3 KiB
Plaintext
56 lines
1.3 KiB
Plaintext
/* stylelint-disable selector-max-id */
|
|
@import 'mediawiki.skin.variables.less';
|
|
|
|
/**
|
|
* Mixin based on Vector mixin
|
|
* https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/skinStyles/ext.echo.styles.badge.less
|
|
* Used in desktop version of Minerva.
|
|
*/
|
|
.mixin-notification-badge() {
|
|
position: relative;
|
|
|
|
// When 99+ allow counter so spill outside icon
|
|
&.cdx-button {
|
|
overflow: visible;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
left: 55%;
|
|
top: 43%;
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem;
|
|
border: 1px solid #fff;
|
|
border-radius: @border-radius-base;
|
|
background-color: #72777d;
|
|
content: attr( data-counter-text );
|
|
color: #fff;
|
|
}
|
|
|
|
// The number of notifications shouldn't show if there are none.
|
|
&[ data-counter-num='0' ]::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.minerva-icon--bell {
|
|
.cdx-mixin-css-icon( @cdx-icon-bell, @color-subtle);
|
|
}
|
|
|
|
.minerva-icon--tray {
|
|
.cdx-mixin-css-icon( @cdx-icon-tray, @color-subtle);
|
|
}
|
|
|
|
.mw-echo-notification-badge-nojs {
|
|
.mixin-notification-badge();
|
|
}
|
|
|
|
// Special colors for unseen notifications (Applies to desktop Minerva)
|
|
#pt-notifications-alert.mw-echo-unseen-notifications::after {
|
|
background-color: @color-destructive;
|
|
}
|
|
|
|
#pt-notifications-notice.mw-echo-unseen-notifications::after {
|
|
background-color: @color-progressive;
|
|
}
|