Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/250969
Change subject: Separate skin specific styles and improve Monobook appearance
......................................................................
Separate skin specific styles and improve Monobook appearance
Bug: T112290
Change-Id: I1e73c92c69cf6df7c4d08b27a392f9c9bc19446f
---
M Resources.php
M modules/echo.variables.less
A modules/echo.variables.monobook.less
A modules/echo.variables.vector.less
M modules/nojs/mw.echo.badge.less
A modules/nojs/mw.echo.badge.monobook.less
A modules/nojs/mw.echo.badge.vector.less
M modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
M modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
A modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.vector.less
10 files changed, 104 insertions(+), 29 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/69/250969/1
diff --git a/Resources.php b/Resources.php
index 0c449b3..2b19cd2 100644
--- a/Resources.php
+++ b/Resources.php
@@ -52,7 +52,10 @@
'modern' => array(
'ooui/styles/mw.echo.ui.NotificationOptionWidget.modern.less',
'ooui/styles/mw.echo.ui.NotificationBadgeWidget.modern.less'
- )
+ ),
+ 'vector' => array(
+
'ooui/styles/mw.echo.ui.NotificationBadgeWidget.vector.less'
+ ),
),
'dependencies' => array(
'ext.echo.styles.badge',
@@ -121,6 +124,14 @@
'styles' => array(
'nojs/mw.echo.badge.less',
),
+ 'skinStyles' => array(
+ 'monobook' => array(
+ 'nojs/mw.echo.badge.monobook.less',
+ ),
+ 'vector' => array(
+ 'nojs/mw.echo.badge.vector.less',
+ ),
+ ),
'targets' => array( 'desktop', 'mobile' ),
),
// Styles for individual notification entries in flyout and
Special:Notifications
diff --git a/modules/echo.variables.less b/modules/echo.variables.less
index 9393006..6d0560a 100644
--- a/modules/echo.variables.less
+++ b/modules/echo.variables.less
@@ -1,9 +1,6 @@
@badge-padding: 0.12em;
@badge-icon-size: 1.1em;
-@badge-text-color-idle: white;
@badge-distance-adjustment: -0.4em;
-@badge-background-unseen-alert: #D11813;
-@badge-background-unseen-message: #5D95FF;
@notification-background-unseen: #dce8ff;
@notification-background-unread: white;
diff --git a/modules/echo.variables.monobook.less
b/modules/echo.variables.monobook.less
new file mode 100644
index 0000000..cf043c9
--- /dev/null
+++ b/modules/echo.variables.monobook.less
@@ -0,0 +1,4 @@
+/* Would use #333 here but opacity is applied to whole badge to lighten the
icon */
+@badge-text-color-idle: #000;
+@badge-color-unseen-alert: #c00;
+@badge-color-unseen-message: #00c;
diff --git a/modules/echo.variables.vector.less
b/modules/echo.variables.vector.less
new file mode 100644
index 0000000..b7c5cc1
--- /dev/null
+++ b/modules/echo.variables.vector.less
@@ -0,0 +1,3 @@
+@badge-text-color-idle: white;
+@badge-background-unseen-alert: #D11813;
+@badge-background-unseen-message: #5D95FF;
diff --git a/modules/nojs/mw.echo.badge.less b/modules/nojs/mw.echo.badge.less
index 3aeb5b1..feafd69 100644
--- a/modules/nojs/mw.echo.badge.less
+++ b/modules/nojs/mw.echo.badge.less
@@ -4,11 +4,7 @@
.mw-echo-notifications-badge {
#pt-notifications-alert &,
#pt-notifications-message & {
- border-radius: 0.2em;
- background-color: #d2d2d2;
- font-size: 1.125em;
font-weight: bold;
- color: white;
cursor: pointer;
text-decoration: none;
margin-top: -0.2em;
@@ -32,7 +28,6 @@
&:hover,
&:active,
&:focus {
- background-color: #c2c2c2;
outline: none;
-moz-outline-style: none;
}
@@ -54,15 +49,6 @@
// which doesn't affect the positioning of the anchor
and hence
// doesn't require a correction.
left: (1em + @badge-distance-adjustment);
- }
- }
-
- &.mw-echo-unseen-notifications {
- #pt-notifications-alert & {
- background-color: @badge-background-unseen-alert;
- }
- #pt-notifications-message & {
- background-color: @badge-background-unseen-message;
}
}
}
diff --git a/modules/nojs/mw.echo.badge.monobook.less
b/modules/nojs/mw.echo.badge.monobook.less
new file mode 100644
index 0000000..d8b397a
--- /dev/null
+++ b/modules/nojs/mw.echo.badge.monobook.less
@@ -0,0 +1,30 @@
+@import '../echo.variables';
+@import '../echo.variables.monobook';
+
+/* We have to include the #pt-notifications selector due to monobook */
+.mw-echo-notifications-badge {
+ #pt-notifications-alert &,
+ #pt-notifications-message & {
+ color: @badge-text-color-idle;
+ opacity: 0.6;
+
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: transparent;
+ }
+
+ &-dimmed {
+ opacity: 0.2;
+ }
+ }
+
+ &.mw-echo-unseen-notifications {
+ #pt-notifications-alert & {
+ color: @badge-color-unseen-alert;
+ }
+ #pt-notifications-message & {
+ color: @badge-color-unseen-message;
+ }
+ }
+}
diff --git a/modules/nojs/mw.echo.badge.vector.less
b/modules/nojs/mw.echo.badge.vector.less
new file mode 100644
index 0000000..4452c0f
--- /dev/null
+++ b/modules/nojs/mw.echo.badge.vector.less
@@ -0,0 +1,28 @@
+@import '../echo.variables';
+@import '../echo.variables.vector';
+
+/* We have to include the #pt-notifications selector due to monobook */
+.mw-echo-notifications-badge {
+ #pt-notifications-alert &,
+ #pt-notifications-message & {
+ border-radius: 0.2em;
+ background-color: #d2d2d2;
+ font-size: 1.125em;
+ color: @badge-text-color-idle;
+
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: #c2c2c2;
+ }
+ }
+
+ &.mw-echo-unseen-notifications {
+ #pt-notifications-alert & {
+ background-color: @badge-background-unseen-alert;
+ }
+ #pt-notifications-message & {
+ background-color: @badge-background-unseen-message;
+ }
+ }
+}
diff --git a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
index 133c4b7..f8008fd 100644
--- a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
+++ b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less
@@ -1,15 +1,5 @@
@import '../../echo.variables';
-// These rules are outside of the LESS nesting because they don't work inside
-// the nested rule. These should be very strong so as to override the base
styles
-#pt-notifications-alert
.mw-echo-notifications-badge.oo-ui-flaggedElement-unseen {
- background-color: @badge-background-unseen-alert;
-}
-
-#pt-notifications-message
.mw-echo-notifications-badge.oo-ui-flaggedElement-unseen {
- background-color: @badge-background-unseen-message;
-}
-
.mw-echo-ui-notificationBadgeButtonPopupWidget {
position: relative;
diff --git
a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
index f122c85..5078662 100644
--- a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
+++ b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
@@ -1,8 +1,12 @@
@import '../../echo.variables';
+@import '../../echo.variables.monobook';
-.mw-echo-ui-notificationBadgeButtonPopupWidget {
+#p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget {
text-transform: none;
font-weight: normal;
+ &, a {
+ color: #333;
+ }
// Badge
> .oo-ui-buttonElement-button {
padding-right: (@badge-padding + 0.25em);
@@ -20,3 +24,13 @@
}
}
+
+// These rules are outside of the LESS nesting because they don't work inside
+// the nested rule. These should be very strong so as to override the base
styles
+#pt-notifications-alert
.mw-echo-notifications-badge.oo-ui-flaggedElement-unseen {
+ color: @badge-color-unseen-alert;
+}
+
+#pt-notifications-message
.mw-echo-notifications-badge.oo-ui-flaggedElement-unseen {
+ color: @badge-color-unseen-message;
+}
diff --git a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.vector.less
b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.vector.less
new file mode 100644
index 0000000..2c14f48
--- /dev/null
+++ b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.vector.less
@@ -0,0 +1,12 @@
+@import '../../echo.variables';
+@import '../../echo.variables.vector';
+
+// These rules are outside of the LESS nesting because they don't work inside
+// the nested rule. These should be very strong so as to override the base
styles
+#pt-notifications-alert
.mw-echo-notifications-badge.oo-ui-flaggedElement-unseen {
+ background-color: @badge-background-unseen-alert;
+}
+
+#pt-notifications-message
.mw-echo-notifications-badge.oo-ui-flaggedElement-unseen {
+ background-color: @badge-background-unseen-message;
+}
--
To view, visit https://gerrit.wikimedia.org/r/250969
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1e73c92c69cf6df7c4d08b27a392f9c9bc19446f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
