diff --git a/.csslintrc b/.csslintrc deleted file mode 100644 index ec188a930..000000000 --- a/.csslintrc +++ /dev/null @@ -1,13 +0,0 @@ -{ - "adjoining-classes": false, - "box-model": false, - "box-sizing": false, - "fallback-colors": false, - "ids": false, - "important": false, - "outline-none": false, - "overqualified-elements": false, - "qualified-headings": false, - "universal-selector": false, - "unqualified-attributes": false -} diff --git a/.stylelintrc b/.stylelintrc index c0e9c2f41..c0d30c62e 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -2,8 +2,6 @@ "extends": "stylelint-config-wikimedia", "rules": { "declaration-no-important": null, - "no-descending-specificity": null, - "selector-no-id": null, - "selector-no-vendor-prefix": null + "selector-no-id": null } } diff --git a/modules/nojs/mw.echo.badge.less b/modules/nojs/mw.echo.badge.less index df6c29fc2..2ad79e812 100644 --- a/modules/nojs/mw.echo.badge.less +++ b/modules/nojs/mw.echo.badge.less @@ -1,6 +1,7 @@ @import '../echo.variables'; @import 'mediawiki.mixins'; +/* stylelint-disable no-descending-specificity */ /* We have to include the #pt-notifications selector due to monobook */ .mw-echo-notifications-badge { #pt-notifications-alert &, @@ -80,3 +81,4 @@ } } } +/* stylelint-enable no-descending-specificity */ diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.less b/modules/styles/mw.echo.ui.NotificationItemWidget.less index 875d754a6..e9615d312 100644 --- a/modules/styles/mw.echo.ui.NotificationItemWidget.less +++ b/modules/styles/mw.echo.ui.NotificationItemWidget.less @@ -3,6 +3,7 @@ @import '../echo.mixins'; .mw-echo-ui-notificationItemWidget { + background-color: #f1f1f1; position: relative; white-space: normal; padding: 0.8em 1em 0.5em 1em; @@ -11,10 +12,22 @@ border: 1px solid #ddd; border-bottom: 0; + &:hover { + background-color: #ececec; + } + &:last-child { border-bottom: 1px solid #ddd; } + &-unread { + background-color: #fff; + + &:hover { + background-color: #fafafa; + } + } + > a, &:hover > a { text-decoration: none; @@ -34,12 +47,12 @@ } &-icon { + position: absolute; + img { height: 30px; width: 30px; } - - position: absolute; } &-content { @@ -117,6 +130,19 @@ } } + &-markAsReadButton { + float: right; + font-size: 1em; + // Compensate for the padding in the item widget + margin-top: -0.8em; + margin-right: -1em; + padding: 0; + + .mw-echo-ui-notificationItemWidget-bundled & { + margin-top: 0; + } + } + // Table layout only for the content inside bundles &-bundled { display: table; @@ -210,19 +236,6 @@ } } - &-markAsReadButton { - float: right; - font-size: 1em; - // Compensate for the padding in the item widget - margin-top: -0.8em; - margin-right: -1em; - padding: 0; - - .mw-echo-ui-notificationItemWidget-bundled & { - margin-top: 0; - } - } - &-initiallyUnseen { -webkit-animation-name: unseen-fadeout-to-read; animation-name: unseen-fadeout-to-read; @@ -241,19 +254,6 @@ } } - background-color: #f1f1f1; - - &:hover { - background-color: #ececec; - } - &-unread { - background-color: #fff; - - &:hover { - background-color: #fafafa; - } - } - // NOTE: The internal styling of the notifications is outside this file, because // it also affects the notifications in Special:Notifications // These styles are in modules/nojs/ext.echo.notifications.less diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less b/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less index f5c4ef943..b6edb0df9 100644 --- a/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less +++ b/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less @@ -1,21 +1,25 @@ -.mw-echo-ui-notificationItemWidget { - #p-personal & a, - #p-personal & 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; +/* 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; + } } } -} -#p-personal .mw-echo-ui-notificationBadgeButtonPopupWidget-footer a { - color: #666; -} + // Override personal tools padding for links + li .mw-echo-state a { + padding: 0; + } -// Override personal tools padding for links -#p-personal li .mw-echo-state a { - padding: 0; + .mw-echo-ui-notificationBadgeButtonPopupWidget-footer a { + color: #666; + } } +/* stylelint-enable no-descending-specificity */