diff options
Diffstat (limited to 'Echo/modules/styles')
25 files changed, 99 insertions, 135 deletions
diff --git a/Echo/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less b/Echo/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less index b0bd8398..905ad86a 100644 --- a/Echo/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less +++ b/Echo/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less @@ -1,3 +1,5 @@ +@import '../echo.variables.less'; + .mw-echo-ui-confirmationPopupWidget { position: relative; bottom: 1em; @@ -5,10 +7,10 @@ text-align: center; &-popup { - background-color: #222; - color: #fff; + background-color: @background-color-popup-confirmation; + color: @color-base--inverted; display: inline-block; - border-radius: 2px; + border-radius: @border-radius-base; padding: 0.5em 1em; text-align: left; diff --git a/Echo/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less b/Echo/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less index 569aa327..b0b04fc2 100644 --- a/Echo/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less +++ b/Echo/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less @@ -1,5 +1,5 @@ -@import 'mediawiki.mixins'; -@import '../echo.variables'; +@import 'mediawiki.mixins.less'; +@import '../echo.variables.less'; .mw-echo-ui-crossWikiNotificationItemWidget, .mw-echo-ui-bundleNotificationItemWidget { @@ -20,7 +20,6 @@ &-content { // The icon is 30px margin-left: 30px; - padding-bottom: 1em; // 0.8em from ItemWidget, plus 0.8em padding-left: 1.6em; diff --git a/Echo/modules/styles/mw.echo.ui.CrossWikiUnreadFilterWidget.less b/Echo/modules/styles/mw.echo.ui.CrossWikiUnreadFilterWidget.less index 859e604a..4b131945 100644 --- a/Echo/modules/styles/mw.echo.ui.CrossWikiUnreadFilterWidget.less +++ b/Echo/modules/styles/mw.echo.ui.CrossWikiUnreadFilterWidget.less @@ -1,4 +1,4 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; .mw-echo-ui-crossWikiUnreadFilterWidget { border: 1px solid @border-color; diff --git a/Echo/modules/styles/mw.echo.ui.CrossWikiUnreadFilterWidget.monobook.less b/Echo/modules/styles/mw.echo.ui.CrossWikiUnreadFilterWidget.monobook.less deleted file mode 100644 index d9454f9c..00000000 --- a/Echo/modules/styles/mw.echo.ui.CrossWikiUnreadFilterWidget.monobook.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '../echo.variables'; - -.mw-echo-ui-crossWikiUnreadFilterWidget { - .mw-echo-ui-pageNotificationsOptionWidget-count .oo-ui-labelWidget { - padding: 0; - } -} diff --git a/Echo/modules/styles/mw.echo.ui.DatedNotificationsWidget.less b/Echo/modules/styles/mw.echo.ui.DatedNotificationsWidget.less index b740f9ab..fc2c1c27 100644 --- a/Echo/modules/styles/mw.echo.ui.DatedNotificationsWidget.less +++ b/Echo/modules/styles/mw.echo.ui.DatedNotificationsWidget.less @@ -1,4 +1,5 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; + .mw-echo-ui-datedNotificationsWidget { min-height: 5em; diff --git a/Echo/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less b/Echo/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less index ff40fb30..a403f36c 100644 --- a/Echo/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less +++ b/Echo/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less @@ -1,4 +1,5 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; + .mw-echo-ui-datedSubGroupListWidget { .mw-body-content &-title { // Since the title is <h2> we want to specifically diff --git a/Echo/modules/styles/mw.echo.ui.FooterNoticeWidget.less b/Echo/modules/styles/mw.echo.ui.FooterNoticeWidget.less index ff8cd7b5..589d55b6 100644 --- a/Echo/modules/styles/mw.echo.ui.FooterNoticeWidget.less +++ b/Echo/modules/styles/mw.echo.ui.FooterNoticeWidget.less @@ -1,5 +1,5 @@ -@import '../echo.variables'; -@import '../echo.mixins'; +@import '../echo.variables.less'; +@import '../echo.mixins.less'; .mw-echo-ui-footerNoticeWidget { padding: 0.5em; @@ -28,7 +28,6 @@ &-dismiss, &-info { .mw-echo-ui-mixin-hover-opacity(); - vertical-align: top; .oo-ui-iconElement-icon { diff --git a/Echo/modules/styles/mw.echo.ui.MenuItemWidget.less b/Echo/modules/styles/mw.echo.ui.MenuItemWidget.less index 5735dfbd..60da86f9 100644 --- a/Echo/modules/styles/mw.echo.ui.MenuItemWidget.less +++ b/Echo/modules/styles/mw.echo.ui.MenuItemWidget.less @@ -1,5 +1,5 @@ -@import '../echo.variables'; -@import '../echo.mixins'; +@import '../echo.variables.less'; +@import '../echo.mixins.less'; /* stylelint-disable no-descending-specificity */ .mw-echo-ui-menuItemWidget { @@ -11,7 +11,7 @@ // Override link colour color: @color-base; // Set max-width so buttons are truncated - max-width: 15em; + max-width: 25em; } &-prioritized { diff --git a/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.less b/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.less index 00b9a2e9..65320518 100644 --- a/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.less +++ b/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.less @@ -1,5 +1,5 @@ -@import 'mediawiki.mixins'; -@import '../echo.variables'; +@import 'mediawiki.mixins.less'; +@import '../echo.variables.less'; .mw-echo-ui-notificationBadgeButtonPopupWidget { position: relative; diff --git a/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less b/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less deleted file mode 100644 index 6dc59143..00000000 --- a/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less +++ /dev/null @@ -1,18 +0,0 @@ -body #p-personal { - overflow: visible; -} - -#p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget { - font-variant: normal; - text-transform: none; - font-weight: normal; - // Badge - > .oo-ui-buttonElement-button { - border-radius: 0; - } - // Popup buttons - .oo-ui-buttonElement-button:hover { - // In modern, the hover color is white, which is unhelpful. - color: #666; - } -} diff --git a/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less b/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less deleted file mode 100644 index 3320c953..00000000 --- a/Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less +++ /dev/null @@ -1,36 +0,0 @@ -@import '../echo.variables'; - -#p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget { - text-transform: none; - font-weight: normal; - - &-popup { - // #p-personal li has a font-size of 0.75em, but we want the - // font size here to be exactly 0.875em, so we must override - // the parent em sizing by dividing. - font-size: 0.875em / 0.75em; - - a.oo-ui-buttonElement-button { - color: #333; - } - } - - a { - background-color: initial; - } - - // Badge - > .oo-ui-buttonElement-button { - &:hover { - .oo-ui-labelElement-label { - color: #000 !important; - } - } - } - - // Footer - .oo-ui-popupWidget-footer { - // Override text-align that monobook uses for #p-personal li - text-align: left; - } -} diff --git a/Echo/modules/styles/mw.echo.ui.NotificationItemWidget.less b/Echo/modules/styles/mw.echo.ui.NotificationItemWidget.less index 23f8e5ad..b5f1838e 100644 --- a/Echo/modules/styles/mw.echo.ui.NotificationItemWidget.less +++ b/Echo/modules/styles/mw.echo.ui.NotificationItemWidget.less @@ -1,6 +1,6 @@ -@import 'mediawiki.mixins'; -@import '../echo.variables'; -@import '../echo.mixins'; +@import 'mediawiki.mixins.less'; +@import '../echo.variables.less'; +@import '../echo.mixins.less'; .mw-echo-ui-notificationItemWidget { background-color: @notification-item-background-read; @@ -8,7 +8,6 @@ white-space: normal; padding: 0.8em 1em 0.5em 1em; .box-sizing( border-box ); - border: 1px solid #c8ccd1; border-bottom: 0; @@ -79,14 +78,16 @@ &-header { color: @notification-text-color; } + &-body { + color: @notification-body-color; + margin-top: 4px; + // In the popup only, truncate the text to one-line // with ellipses .mw-echo-ui-notificationBadgeButtonPopupWidget-popup & { - .mw-echo-ui-mixin-one-line-truncated; + .text-overflow( @visible: false ); } - color: @notification-body-color; - margin-top: 4px; } } @@ -102,6 +103,7 @@ & > &-buttons.oo-ui-buttonSelectWidget { display: table-cell; + white-space: nowrap; vertical-align: bottom; } @@ -125,12 +127,11 @@ display: table-cell; vertical-align: bottom; text-align: right; - color: @color-base-emphasized; + color: @color-base--emphasized; opacity: @opacity-low; white-space: nowrap; width: 100%; } - } } @@ -176,7 +177,6 @@ height: 1.5em; width: 1.5em; } - } &-content-message { @@ -261,6 +261,7 @@ from { background-color: @notification-background-unseen; } + to { background-color: @notification-background-unread; } @@ -270,6 +271,7 @@ from { background-color: @notification-background-unseen; } + to { background-color: @notification-background-unread; } @@ -279,6 +281,7 @@ from { background-color: @notification-background-unseen; } + to { background-color: @notification-background-read; } @@ -288,6 +291,7 @@ from { background-color: @notification-background-unseen; } + to { background-color: @notification-background-read; } diff --git a/Echo/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less b/Echo/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less deleted file mode 100644 index b6edb0df..00000000 --- a/Echo/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less +++ /dev/null @@ -1,25 +0,0 @@ -/* stylelint-disable no-descending-specificity */ -#p-personal { - .mw-echo-ui-notificationItemWidget { - & a, - & a.new { - // Oh and double everything for :hover since Modern does that too. - &, - &:hover { - // In modern, the hover color is white, which is unhelpful. - color: #666; - text-decoration: none; - } - } - } - - // Override personal tools padding for links - li .mw-echo-state a { - padding: 0; - } - - .mw-echo-ui-notificationBadgeButtonPopupWidget-footer a { - color: #666; - } -} -/* stylelint-enable no-descending-specificity */ diff --git a/Echo/modules/styles/mw.echo.ui.NotificationsInboxWidget.less b/Echo/modules/styles/mw.echo.ui.NotificationsInboxWidget.less index 618804b6..19219710 100644 --- a/Echo/modules/styles/mw.echo.ui.NotificationsInboxWidget.less +++ b/Echo/modules/styles/mw.echo.ui.NotificationsInboxWidget.less @@ -1,4 +1,5 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; + .mw-echo-ui-notificationsInboxWidget { display: table; width: 100%; @@ -25,6 +26,7 @@ &-cell { display: table-cell; vertical-align: middle; + &-placeholder { display: table-cell; width: 100%; @@ -41,6 +43,7 @@ display: none; } } + &-main { vertical-align: top; @@ -50,6 +53,14 @@ width: 100%; } + &-readState { + display: inline-block; + + .mw-echo-ui-readStateButtonSelectWidget { + white-space: nowrap; + } + } + &-settings { padding-left: 1em; } @@ -70,14 +81,17 @@ text-align: center; } } + &-readState { display: inline-block; } + &-settings, &-pagination { display: inline-block; margin-top: 1em; } + &-settings { .oo-ui-popupWidget-popup { text-align: left; @@ -85,6 +99,7 @@ } } } + &-toolbarWrapper { height: 7em; } diff --git a/Echo/modules/styles/mw.echo.ui.NotificationsListWidget.less b/Echo/modules/styles/mw.echo.ui.NotificationsListWidget.less index ced6f2db..3a79558f 100644 --- a/Echo/modules/styles/mw.echo.ui.NotificationsListWidget.less +++ b/Echo/modules/styles/mw.echo.ui.NotificationsListWidget.less @@ -1,4 +1,4 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; .mw-echo-ui-notificationsListWidget { .mw-echo-ui-notificationsListWidget-bundle & { diff --git a/Echo/modules/styles/mw.echo.ui.NotificationsListWidget.monobook.less b/Echo/modules/styles/mw.echo.ui.NotificationsListWidget.monobook.less deleted file mode 100644 index df796f2b..00000000 --- a/Echo/modules/styles/mw.echo.ui.NotificationsListWidget.monobook.less +++ /dev/null @@ -1,4 +0,0 @@ -.mw-echo-ui-notificationsListWidget { - text-align: left; - text-transform: none; -} diff --git a/Echo/modules/styles/mw.echo.ui.PageFilterWidget.less b/Echo/modules/styles/mw.echo.ui.PageFilterWidget.less index ec60bc63..47eb7ac4 100644 --- a/Echo/modules/styles/mw.echo.ui.PageFilterWidget.less +++ b/Echo/modules/styles/mw.echo.ui.PageFilterWidget.less @@ -1,4 +1,5 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; + .mw-echo-ui-pageFilterWidget { margin-top: 2 * @specialpage-separation-unit; diff --git a/Echo/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less b/Echo/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less index 304c0feb..44d51b45 100644 --- a/Echo/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less +++ b/Echo/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less @@ -1,5 +1,5 @@ -@import 'mediawiki.mixins'; -@import '../echo.variables'; +@import 'mediawiki.mixins.less'; +@import '../echo.variables.less'; .mw-echo-ui-pageNotificationsOptionWidget { clear: both; @@ -11,7 +11,7 @@ &-highlighted { background-color: #eaecf0; - color: @color-base-active; + color: @color-base--active; } &-selected { @@ -55,11 +55,10 @@ &-label { display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; // Sidebar width - icon width - twice padding - counter average width max-width: calc( @specialpage-sidebar-width - 1.865em - 2 * @specialpage-separation-unit - 2em ); + // Truncate text with ellipsis. + .text-overflow( @visible: false ); } } @@ -72,7 +71,7 @@ color: @grey-medium; padding: 0.2em 0.5em; margin-left: 0.5em; - border-radius: 2px; + border-radius: @border-radius-base; white-space: nowrap; .oo-ui-optionWidget-selected & { diff --git a/Echo/modules/styles/mw.echo.ui.PaginationWidget.less b/Echo/modules/styles/mw.echo.ui.PaginationWidget.less index a88f9bb4..930064f3 100644 --- a/Echo/modules/styles/mw.echo.ui.PaginationWidget.less +++ b/Echo/modules/styles/mw.echo.ui.PaginationWidget.less @@ -12,6 +12,10 @@ vertical-align: middle; } + &-direction { + white-space: nowrap; + } + &-label { padding: 0 0.5em; white-space: nowrap; diff --git a/Echo/modules/styles/mw.echo.ui.PlaceholderItemWidget.less b/Echo/modules/styles/mw.echo.ui.PlaceholderItemWidget.less index 7ea644e4..b33b459e 100644 --- a/Echo/modules/styles/mw.echo.ui.PlaceholderItemWidget.less +++ b/Echo/modules/styles/mw.echo.ui.PlaceholderItemWidget.less @@ -1,4 +1,5 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; + .mw-echo-ui-placeholderItemWidget { padding: 2em; background-color: @notification-background-read; diff --git a/Echo/modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less b/Echo/modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less index de1fcd1b..27820f40 100644 --- a/Echo/modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less +++ b/Echo/modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less @@ -1,4 +1,4 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; .mw-echo-ui-specialHelpMenuWidget-menu { a.oo-ui-menuOptionWidget { diff --git a/Echo/modules/styles/mw.echo.ui.SubGroupListWidget.less b/Echo/modules/styles/mw.echo.ui.SubGroupListWidget.less index 083efbfa..1779e2ec 100644 --- a/Echo/modules/styles/mw.echo.ui.SubGroupListWidget.less +++ b/Echo/modules/styles/mw.echo.ui.SubGroupListWidget.less @@ -1,7 +1,6 @@ -@import '../echo.variables'; +@import '../echo.variables.less'; .mw-echo-ui-subGroupListWidget { - &:not( :first-child ) { padding-top: @bundle-group-padding; } diff --git a/Echo/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less b/Echo/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less index ecee6410..96582329 100644 --- a/Echo/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less +++ b/Echo/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less @@ -1,5 +1,5 @@ -@import 'mediawiki.mixins'; -@import '../echo.variables'; +@import 'mediawiki.mixins.less'; +@import '../echo.variables.less'; .mw-echo-ui-toggleReadCircleButtonWidget { &-circle { diff --git a/Echo/modules/styles/mw.echo.ui.mobile.less b/Echo/modules/styles/mw.echo.ui.mobile.less new file mode 100644 index 00000000..54b9562f --- /dev/null +++ b/Echo/modules/styles/mw.echo.ui.mobile.less @@ -0,0 +1,19 @@ +@import 'mediawiki.ui/variables'; + +// `!important` rules override the inline styles provides by clippable. +@media all and ( max-width: @width-breakpoint-tablet ) { + .mw-echo-ui-overlay { + .oo-ui-clippableElement-clippable { + width: 100% !important; + } + + .oo-ui-popupWidget-popup { + width: 100% !important; + } + + .mw-echo-ui-notificationBadgeButtonPopupWidget-popup { + left: 1px !important; + right: 2px; + } + } +} diff --git a/Echo/modules/styles/mw.echo.ui.overlay.minerva.less b/Echo/modules/styles/mw.echo.ui.overlay.minerva.less index 27177f7c..95d1817a 100644 --- a/Echo/modules/styles/mw.echo.ui.overlay.minerva.less +++ b/Echo/modules/styles/mw.echo.ui.overlay.minerva.less @@ -1,4 +1,15 @@ -/* In mobile, overlay is positioned at the bottom */ +@import 'mediawiki.ui/variables'; + +@media all and ( max-width: @width-breakpoint-tablet ) { + // On mobile screens position the anchor arrow correctly so it points to the + // notifications badge. + .mw-echo-ui-overlay .oo-ui-popupWidget-anchor { + // Override the inline style. + left: auto !important; + right: 68px; + } +} + .mw-echo-ui-overlay { position: fixed; bottom: 0; @@ -23,4 +34,3 @@ top: auto !important; } } - |