From b47304f1224a21e66ed4e22c3ec49d844e694c73 Mon Sep 17 00:00:00 2001 From: Hannes Date: Sat, 28 Dec 2019 15:52:02 +0100 Subject: [PATCH 1/3] Add extension Echo darkmode --- skinStyles/ext.echo.ui.less | 276 ++++++++++++++++++ .../mediawiki.htmlform.ooui.styles.less | 8 + skinStyles/oojs-ui-core.less | 2 +- 3 files changed, 285 insertions(+), 1 deletion(-) diff --git a/skinStyles/ext.echo.ui.less b/skinStyles/ext.echo.ui.less index 4e412280..148ddef7 100644 --- a/skinStyles/ext.echo.ui.less +++ b/skinStyles/ext.echo.ui.less @@ -43,3 +43,279 @@ } } } + +@media ( prefers-color-scheme: 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-bottom: 1px solid @dark-bg-30; + } + + > .oo-ui-popupWidget-footer { + border-top: 1px solid @dark-bg-30; + + .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons { + .oo-ui-buttonElement { + &:last-child { + border-left: 1px solid @dark-bg-30; + } + } + } + } + } + } + } + + /** + mw.echo.ui.NotificationItemWidget.less + */ + .mw-echo-ui-notificationItemWidget { + background-color: @dark-bg-20; + border: 1px solid @dark-bg-30; + + &:hover { + background-color: @dark-bg-30; + } + + &:last-child { + border-bottom: 1px solid @dark-bg-30; + } + + &-unread { + background-color: @dark-bg-0; + + &:hover { + background-color: @dark-bg-10; + } + } + + &-notify { + &-description { + color: @dark-text-80; + } + } + + &-content { + &-message { + &-header { + color: @dark-text-100; + } + + &-body { + color: @dark-text-70; + } + } + } + + &-bundled { + .mw-echo-ui-notificationItemWidget-content { + .mw-echo-ui-notificationItemWidget { + &-content-message { + &-header { + em { + color: @dark-text-70; + } + } + } + } + } + } + } + + @-webkit-keyframes unseen-fadeout-to-unread { + from { + background-color: @dark-bg-30; + } + + to { + background-color: @dark-bg-0; + } + } + + @keyframes unseen-fadeout-to-unread { + from { + background-color: @dark-bg-30; + } + + to { + background-color: @dark-bg-0; + } + } + + @-webkit-keyframes unseen-fadeout-to-read { + from { + background-color: @dark-bg-30; + } + + to { + background-color: @dark-bg-20; + } + } + + @keyframes unseen-fadeout-to-read { + from { + background-color: @dark-bg-30; + } + + to { + background-color: @dark-bg-20; + } + } + + /** + 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 { + &-circle { + &-unread { + background-color: @dark-bg-20; + border: 1px solid @dark-bg-60; + } + } + + &:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle { + &-unread { + background-color: @dark-bg-30; + } + } + } + + /** + Icons + */ + .mw-echo-ui-notificationsInboxWidget, + .mw-echo-ui-overlay { + .oo-ui-indicatorElement-indicator, + .oo-ui-iconElement-icon { + filter: invert( 1 ) hue-rotate( 180deg ); + } + } +} diff --git a/skinStyles/mediawiki.htmlform.ooui.styles.less b/skinStyles/mediawiki.htmlform.ooui.styles.less index dc462ae5..cf246546 100644 --- a/skinStyles/mediawiki.htmlform.ooui.styles.less +++ b/skinStyles/mediawiki.htmlform.ooui.styles.less @@ -16,5 +16,13 @@ background-color: @dark-bg-20; } } + + .oo-ui-fieldLayout-header { + .oo-ui-buttonElement-button { + .oo-ui-iconElement-icon { + filter: invert( 1 ) hue-rotate( 180deg ); + } + } + } } } diff --git a/skinStyles/oojs-ui-core.less b/skinStyles/oojs-ui-core.less index 25719c37..4ec35069 100644 --- a/skinStyles/oojs-ui-core.less +++ b/skinStyles/oojs-ui-core.less @@ -129,7 +129,7 @@ &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: @dark-bg-30; color: @dark-text-90; - border-color: @dark-bg-60; + border-color: @dark-bg-60 !important; } } From 89bac432e6a3879c80ecbf3d67e609841d479691 Mon Sep 17 00:00:00 2001 From: Hannes Date: Sat, 28 Dec 2019 17:47:07 +0100 Subject: [PATCH 2/3] Add missing timestamp color --- skinStyles/ext.echo.ui.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/skinStyles/ext.echo.ui.less b/skinStyles/ext.echo.ui.less index 148ddef7..116fb563 100644 --- a/skinStyles/ext.echo.ui.less +++ b/skinStyles/ext.echo.ui.less @@ -181,6 +181,12 @@ color: @dark-text-70; } } + + &-actions { + &-timestamp { + color: @dark-text-100; + } + } } &-bundled { From a233a00d79d189dc2e5578ffc7c7e6cf182b5fc2 Mon Sep 17 00:00:00 2001 From: Hannes Date: Sat, 28 Dec 2019 17:56:12 +0100 Subject: [PATCH 3/3] Lighten popup header --- skinStyles/oojs-ui-core.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/skinStyles/oojs-ui-core.less b/skinStyles/oojs-ui-core.less index 4ec35069..bb29f80f 100644 --- a/skinStyles/oojs-ui-core.less +++ b/skinStyles/oojs-ui-core.less @@ -176,7 +176,7 @@ } .oo-ui-popupWidget-popup { - background-color: @dark-bg-0; + background-color: @dark-bg-10; border-color: @dark-bg-50; } @@ -190,7 +190,7 @@ } &:after { - border-bottom-color: @dark-bg-0; + border-bottom-color: @dark-bg-10; } } }