mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-28 00:01:05 +00:00
feat: update Echo skinStyles to grade A
This commit is contained in:
alistair3149
parent
79c5434071
commit
a244aa6d47
|
|
@ -42,7 +42,7 @@ Name | Grade | Version | Last updated
|
|||
[CodeMirror](https://www.mediawiki.org/wiki/Extension:CodeMirror) | D | N/A | N/A
|
||||
[CookieWarning](https://www.mediawiki.org/wiki/Extension:CookieWarning) | A | N/A | N/A
|
||||
[DismissableSiteNotice](https://www.mediawiki.org/wiki/Extension:DismissableSiteNotice) | A | N/A | N/A
|
||||
[Echo](https://www.mediawiki.org/wiki/Extension:Echo) | E | N/A | N/A
|
||||
[Echo](https://www.mediawiki.org/wiki/Extension:Echo) | A | REL1_35 `347c30e` | 2021-08-11
|
||||
[Flow (StructuredDiscussions)](https://www.mediawiki.org/wiki/Extension:StructuredDiscussions) | E | N/A | N/A
|
||||
[Graph](https://www.mediawiki.org/wiki/Extension:Graph) | D | N/A | N/A
|
||||
[Lingo](https://www.mediawiki.org/wiki/Extension:Lingo) | E | N/A | N/A
|
||||
|
|
|
|||
|
|
@ -390,8 +390,13 @@
|
|||
|
||||
"+ext.dismissableSiteNotice.styles": "skinStyles/extensions/DismissableSiteNotice/ext.dismissableSiteNotice.less",
|
||||
|
||||
"+ext.echo.styles.badge": "skinStyles/extensions/Echo/ext.echo.styles.badge.less",
|
||||
"+ext.echo.ui.desktop": "skinStyles/extensions/Echo/ext.echo.ui.desktop.less",
|
||||
"+ext.echo.ui": "skinStyles/extensions/Echo/ext.echo.ui.less",
|
||||
"+ext.echo.styles.badge": "skinStyles/extensions/Echo/ext.echo.styles.badge.less",
|
||||
"+ext.echo.styles.notifications": "skinStyles/extensions/Echo/ext.echo.styles.notifications.less",
|
||||
"+ext.echo.styles.alert": "skinStyles/extensions/Echo/ext.echo.styles.alert.less",
|
||||
"+ext.echo.special": "skinStyles/extensions/Echo/ext.echo.special.less",
|
||||
"+ext.echo.styles.special": "skinStyles/extensions/Echo/ext.echo.styles.special.less",
|
||||
|
||||
"+ext.flow": "skinStyles/extensions/Flow/ext.flow.less",
|
||||
"+ext.flow.styles.base": "skinStyles/extensions/Flow/ext.flow.styles.base.less",
|
||||
|
|
|
|||
57
skinStyles/extensions/Echo/ext.echo.special.less
Normal file
57
skinStyles/extensions/Echo/ext.echo.special.less
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for Extension:Echo
|
||||
* Module: ext.echo.special
|
||||
* Version: REL1_35 347c30e
|
||||
*
|
||||
* Date: 2021-08-11
|
||||
*/
|
||||
|
||||
/* mw.echo.ui.DatedSubGroupListWidget.less */
|
||||
.mw-echo-ui-datedSubGroupListWidget {
|
||||
.mw-body-content &-title {
|
||||
&-secondary {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.PageNotificationsOptionWidget.less */
|
||||
.mw-echo-ui-pageNotificationsOptionWidget {
|
||||
&.oo-ui-optionWidget {
|
||||
&-highlighted {
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&-selected {
|
||||
background-color: var( --background-color-primary );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
&-selected&-highlighted,
|
||||
&-pressed&-highlighted {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&-label-count {
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--subtle );
|
||||
|
||||
.oo-ui-optionWidget-selected & {
|
||||
color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.CrossWikiUnreadFilterWidget.less */
|
||||
.mw-echo-ui-crossWikiUnreadFilterWidget {
|
||||
border-color: var( --border-color-base );
|
||||
|
||||
&-subtitle {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
14
skinStyles/extensions/Echo/ext.echo.styles.alert.less
Normal file
14
skinStyles/extensions/Echo/ext.echo.styles.alert.less
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for Extension:Echo
|
||||
* Module: ext.echo.styles.alert
|
||||
* Version: REL1_35 347c30e
|
||||
*
|
||||
* Date: 2021-08-11
|
||||
*/
|
||||
|
||||
.mw-echo-alert {
|
||||
background-color: var( --color-warning );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
|
@ -1,20 +1,16 @@
|
|||
/*
|
||||
* Citizen - Echo Styles
|
||||
* https://starcitizen.tools
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for Extension:Echo
|
||||
* Module: ext.echo.styles.badge
|
||||
* Version: REL1_35 347c30e
|
||||
*
|
||||
* Date: 2021-08-11
|
||||
*/
|
||||
|
||||
@import '../../../resources/variables.less';
|
||||
|
||||
// Styles for echo badges
|
||||
#pt-notifications {
|
||||
&-alert,
|
||||
&-notice {
|
||||
position: relative;
|
||||
margin: var( --margin-header-item ) 0;
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
.mw-echo-notifications-badge {
|
||||
top: 0;
|
||||
.mw-echo-notifications-badge {
|
||||
#pt-notifications-alert &,
|
||||
#pt-notifications-notice & {
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
box-sizing: content-box;
|
||||
|
|
@ -23,63 +19,81 @@
|
|||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: var( --opacity-icon-base );
|
||||
transition: @transition-opacity-quick, @transition-transform-quick;
|
||||
|
||||
&:hover {
|
||||
opacity: var( --opacity-icon-base--hover ) !important; // override all styles
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var( --opacity-icon-base--active ) !important;
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
// Badge tweaks
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var( --color-primary );
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
|
||||
&:after {
|
||||
background-color: var( --color-destructive );
|
||||
border-radius: 100px;
|
||||
font-size: 10px;
|
||||
border-color: var( --color-primary );
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 0;
|
||||
border-color: var( --color-surface-0 );
|
||||
background-color: var( --color-base--subtle );
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&-dimmed {
|
||||
opacity: var( --opacity-icon-base--disabled );
|
||||
}
|
||||
|
||||
&.mw-echo-notifications-badge-all-read {
|
||||
opacity: var( --opacity-base--disabled );
|
||||
}
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-quiet--active ) !important;
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Rotate bell
|
||||
&-alert {
|
||||
.mw-echo-notifications-badge {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
transform: rotateZ( 20deg );
|
||||
&.oo-ui-flaggedElement-unseen,
|
||||
&.mw-echo-unseen-notifications {
|
||||
#pt-notifications-alert &:after {
|
||||
background-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
#pt-notifications-notice &:after {
|
||||
background-color: var( --color-destructive );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add quiet background hover states
|
||||
#pt-notifications-alert,
|
||||
#pt-notifications-notice {
|
||||
z-index: 1; // fix background clipping
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
&:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode icon
|
||||
.skin-citizen-dark {
|
||||
#pt-notifications {
|
||||
&-alert,
|
||||
&-notice {
|
||||
#pt-notifications-alert,
|
||||
#pt-notifications-notice {
|
||||
.mw-echo-notifications-badge {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and ( hover: hover ) {
|
||||
#pt-notifications {
|
||||
&-alert,
|
||||
&-notice {
|
||||
&:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for Extension:Echo
|
||||
* Module: ext.echo.styles.notifications
|
||||
* Version: REL1_35 347c30e
|
||||
*
|
||||
* Date: 2021-08-11
|
||||
*/
|
||||
|
||||
/* mw.echo.notifications.less */
|
||||
.mw-echo-state {
|
||||
.mw-echo-notification {
|
||||
background-color: var( --color-surface-0 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.mw-echo-notifications {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.mw-echo-content {
|
||||
.mw-echo-title {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.mw-echo-payload {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.mw-echo-notification-footer {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
48
skinStyles/extensions/Echo/ext.echo.styles.special.less
Normal file
48
skinStyles/extensions/Echo/ext.echo.styles.special.less
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for Extension:Echo
|
||||
* Module: ext.echo.styles.special
|
||||
* Version: REL1_35 347c30e
|
||||
*
|
||||
* Date: 2021-08-11
|
||||
*/
|
||||
|
||||
.mw-echo-date-section {
|
||||
border-bottom-color: var( --border-color-base );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.mw-echo-special-navbar-bottom {
|
||||
border-top-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.mw-echo-special-notifications {
|
||||
.mw-echo-notification {
|
||||
background-color: var( --color-surface-2 );
|
||||
|
||||
&:hover {
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
|
||||
&-unread {
|
||||
color: var( --color-base );
|
||||
|
||||
.mw-echo-markAsReadButton {
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
skinStyles/extensions/Echo/ext.echo.ui.desktop.less
Normal file
52
skinStyles/extensions/Echo/ext.echo.ui.desktop.less
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for Extension:Echo
|
||||
* Module: ext.echo.ui.desktop
|
||||
* Version: REL1_35 347c30e
|
||||
*
|
||||
* Date: 2021-08-11
|
||||
*/
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget {
|
||||
&-popup {
|
||||
margin-top: 0; // align with other menus
|
||||
box-shadow: 0 14px 28px rgba( 0, 0, 0, 0.0625 ), 0 10px 10px rgba( 0, 0, 0, 0.055 ); // boxshadow 3
|
||||
filter: none; // disable filter drop shadow
|
||||
|
||||
> .oo-ui-popupWidget-popup {
|
||||
> .oo-ui-popupWidget-head {
|
||||
border-bottom-color: var( --border-color-base );
|
||||
|
||||
> .oo-ui-iconWidget {
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
> .oo-ui-labelElement-label {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
}
|
||||
|
||||
> .oo-ui-popupWidget-footer {
|
||||
border-top-color: var( --border-color-base );
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
|
||||
display: flex;
|
||||
|
||||
.oo-ui-buttonElement {
|
||||
display: block;
|
||||
width: 100%; // Buttons fill up the empty space
|
||||
|
||||
&:last-child {
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .oo-ui-popupWidget-anchor {
|
||||
display: none; // the anchor overflow the viewport
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,190 +1,118 @@
|
|||
/*
|
||||
* Citizen - Echo Styles
|
||||
* https://starcitizen.tools
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for Extension:Echo
|
||||
* Module: ext.echo.ui
|
||||
* Version: REL1_35 347c30e
|
||||
*
|
||||
* Date: 2021-08-11
|
||||
*/
|
||||
|
||||
@import '../../../resources/variables.less';
|
||||
@import '../../../resources/mixins.less';
|
||||
/* mw.echo.ui.mobile.less */
|
||||
@media all and ( max-width: 720px ) {
|
||||
.mw-echo-ui-overlay {
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
right: var( --padding-page );
|
||||
left: var( --padding-page ) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.overlay.less */
|
||||
.mw-echo-ui-overlay {
|
||||
position: fixed; // Header is fixed
|
||||
z-index: 100; // Higher than header
|
||||
}
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 0 !important;
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer {
|
||||
border-color: @base-80 !important;
|
||||
}
|
||||
|
||||
/* mw.echo.ui.NotificationItemWidget.less */
|
||||
.mw-echo-ui-notificationItemWidget {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
// 500px or below will break the message box, +40px margin
|
||||
@media only screen and ( max-width: 540px ) {
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
left: 0 !important;
|
||||
|
||||
> .oo-ui-popupWidget-popup {
|
||||
width: auto !important;
|
||||
|
||||
> .oo-ui-popupWidget-body {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .oo-ui-popupWidget-anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
/**
|
||||
mw.echo.ui.CrossWikiUnreadFilterWidget.less
|
||||
*/
|
||||
.mw-echo-ui-crossWikiNotificationItemWidget,
|
||||
.mw-echo-ui-bundleNotificationItemWidget {
|
||||
&-separator {
|
||||
border-bottom: 1px solid @dark-bg-20;
|
||||
}
|
||||
|
||||
&-group {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
|
||||
.mw-echo-ui-subGroupListWidget-header {
|
||||
&-row-title {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.CrossWikiNotificationItemWidget.less
|
||||
*/
|
||||
.mw-echo-ui-crossWikiUnreadFilterWidget {
|
||||
border: 1px solid @dark-bg-30 !important;
|
||||
|
||||
&-subtitle {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.CrossWikiNotificationItemWidget.less
|
||||
*/
|
||||
.mw-echo-ui-datedSubGroupListWidget {
|
||||
.mw-body-content &-title {
|
||||
&-secondary {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.FooterNoticeWidget.less
|
||||
*/
|
||||
.mw-echo-ui-footerNoticeWidget {
|
||||
border-bottom: 1px solid @dark-bg-30;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.MenuItemWidget.less
|
||||
*/
|
||||
.mw-echo-ui-menuItemWidget {
|
||||
> .oo-ui-labelElement-label {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
&-dynamic-action {
|
||||
&:hover {
|
||||
background-color: @dark-bg-0;
|
||||
}
|
||||
|
||||
.mw-echo-ui-menuItemWidget-description {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-echo-ui-actionMenuPopupWidget-menu:hover {
|
||||
background-color: @dark-bg-20;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.NotificationBadgeWidget.less
|
||||
*/
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget {
|
||||
&-popup {
|
||||
> .oo-ui-popupWidget-popup {
|
||||
> .oo-ui-popupWidget-head {
|
||||
border-color: @dark-bg-30;
|
||||
}
|
||||
|
||||
> .oo-ui-popupWidget-footer {
|
||||
border-color: @dark-bg-30 !important;
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
|
||||
.oo-ui-buttonElement {
|
||||
&:last-child {
|
||||
border-color: @dark-bg-30 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.NotificationItemWidget.less
|
||||
*/
|
||||
.mw-echo-ui-notificationItemWidget {
|
||||
border-color: @dark-bg-30;
|
||||
background-color: @dark-bg-20;
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-3 );
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-30;
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-color: @dark-bg-30;
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&-unread {
|
||||
background-color: @dark-bg-0;
|
||||
background-color: var( --color-surface-1 );
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-10;
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&-notify {
|
||||
&-description {
|
||||
color: @dark-text-80;
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
img {
|
||||
width: 24px; // It looks nicer
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
&-message {
|
||||
&-header {
|
||||
color: @dark-text-100;
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&-body {
|
||||
color: @dark-text-70;
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
&-table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
display: flex; // Table row does not align things properly
|
||||
align-items: center;
|
||||
|
||||
& > &-buttons.oo-ui-buttonSelectWidget {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mw-echo-ui-menuItemWidget-prioritized {
|
||||
border-radius: var( --border-radius-small );
|
||||
|
||||
&:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
&-timestamp {
|
||||
color: @dark-text-100;
|
||||
display: block;
|
||||
color: var( --color-base--subtle );
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -195,8 +123,7 @@
|
|||
&-content-message {
|
||||
&-header {
|
||||
em {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -204,124 +131,151 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes unseen-fadeout-to-unread {
|
||||
&-initiallyUnseen {
|
||||
-webkit-animation-name: unseen-fadeout-to-read;
|
||||
animation-name: unseen-fadeout-to-read;
|
||||
|
||||
&.mw-echo-ui-notificationItemWidget-unread {
|
||||
-webkit-animation-name: unseen-fadeout-to-unread;
|
||||
animation-name: unseen-fadeout-to-unread;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes unseen-fadeout-to-unread {
|
||||
from {
|
||||
background-color: @dark-bg-30;
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: @dark-bg-0;
|
||||
}
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unseen-fadeout-to-unread {
|
||||
@keyframes unseen-fadeout-to-unread {
|
||||
from {
|
||||
background-color: @dark-bg-30;
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: @dark-bg-0;
|
||||
}
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes unseen-fadeout-to-read {
|
||||
@-webkit-keyframes unseen-fadeout-to-read {
|
||||
from {
|
||||
background-color: @dark-bg-30;
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: @dark-bg-20;
|
||||
}
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes unseen-fadeout-to-read {
|
||||
@keyframes unseen-fadeout-to-read {
|
||||
from {
|
||||
background-color: @dark-bg-30;
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: @dark-bg-20;
|
||||
}
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.NotificationsInboxWidget.less
|
||||
*/
|
||||
.mw-echo-ui-notificationsInboxWidget {
|
||||
&-toolbarWrapper {
|
||||
background: @dark-bg-0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.NotificationsListWidget.less
|
||||
*/
|
||||
.mw-echo-ui-notificationsListWidget {
|
||||
> a,
|
||||
&:hover > a {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
&:not( :hover ) a,
|
||||
#p-personal &:not( :hover ) a.new {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.PageNotificationsOptionWidget.less
|
||||
*/
|
||||
.mw-echo-ui-pageNotificationsOptionWidget {
|
||||
&.oo-ui-optionWidget {
|
||||
&-selected {
|
||||
background-color: @dark-bg-30 !important;
|
||||
}
|
||||
|
||||
&-highlighted {
|
||||
background-color: @dark-bg-10 !important;
|
||||
color: @dark-text-100 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-label-count {
|
||||
background-color: @dark-bg-20;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.PlaceholderItemWidget.less
|
||||
*/
|
||||
.mw-echo-ui-placeholderItemWidget {
|
||||
background-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
/**
|
||||
mw.echo.ui.ToggleReadCircleButtonWidget.less
|
||||
*/
|
||||
.mw-echo-ui-toggleReadCircleButtonWidget {
|
||||
/* mw.echo.ui.ToggleReadCircleButtonWidget.less */
|
||||
.mw-echo-ui-toggleReadCircleButtonWidget {
|
||||
&-circle {
|
||||
background-color: var( --color-primary );
|
||||
|
||||
&-unread {
|
||||
border-color: @dark-bg-60;
|
||||
background-color: @dark-bg-20;
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
|
||||
background-color: var( --color-primary--hover );
|
||||
|
||||
&-unread {
|
||||
background-color: @dark-bg-30;
|
||||
}
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Icons
|
||||
*/
|
||||
.mw-echo-ui-notificationsInboxWidget,
|
||||
.mw-echo-ui-overlay {
|
||||
.oo-ui-indicatorElement-indicator,
|
||||
.oo-ui-iconElement-icon {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
&:active .mw-echo-ui-toggleReadCircleButtonWidget-circle {
|
||||
background-color: var( --color-primary--active );
|
||||
|
||||
&-unread {
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* mw.echo.ui.CrossWikiNotificationItemWidget.less */
|
||||
.mw-echo-ui-crossWikiNotificationItemWidget,
|
||||
.mw-echo-ui-bundleNotificationItemWidget {
|
||||
&-separator {
|
||||
border-bottom-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&-group {
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.mw-echo-ui-subGroupListWidget-header {
|
||||
&-row-title {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.NotificationsListWidget.less */
|
||||
.mw-echo-ui-notificationsListWidget {
|
||||
> a,
|
||||
&:hover > a {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
&:not( :hover ) a,
|
||||
#p-personal &:not( :hover ) a.new {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.PlaceholderItemWidget.less */
|
||||
.mw-echo-ui-placeholderItemWidget {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
/* mw.echo.ui.MenuItemWidget.less */
|
||||
.mw-echo-ui-menuItemWidget {
|
||||
> .oo-ui-labelElement-label {
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
&-prioritized {
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
&-dynamic-action {
|
||||
&:hover {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.mw-echo-ui-menuItemWidget-description {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-echo-ui-actionMenuPopupWidget-menu:hover {
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue