Merge pull request #8 from octfx/feature/echo_darkmode

Add extension Echo darkmode
This commit is contained in:
alistair3149 2019-12-28 12:13:43 -05:00 committed by GitHub
commit 627505e638
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 293 additions and 3 deletions

View file

@ -43,3 +43,285 @@
}
}
}
@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;
}
}
&-actions {
&-timestamp {
color: @dark-text-100;
}
}
}
&-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 );
}
}
}

View file

@ -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 );
}
}
}
}
}

View file

@ -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;
}
}
@ -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;
}
}
}