mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-29 01:54:33 +00:00
d67e474d46
The unseen animation should display whether the option is unread or read, because it should point out notifications that were unseen/new in this session even if they are immediately marked as read (in cases where the configuration is 'mark read when seen', like in alerts). However, the animation itself switched by default to white background which is an 'unread' state. This made cases like "mark all as read" mark the notifications as read but still have a white background as if they are unread, and yet have no 'x' button because they are actually read. (Bear with me here) This commit organizes the animation better. We now have a proper clear naming for the two animations - unseen-to-read and unseen-to-unread and we use unseen-to-read as default. unseen-to-unread is used when the -unread class is applied and the other cases should reflect the correct state of the option read/unread status. Bug: T112826 Change-Id: I7fe8ea5dcf8c3e31d16213313be34b2350d03655
95 lines
2.3 KiB
Plaintext
95 lines
2.3 KiB
Plaintext
@import '../../echo.variables';
|
|
|
|
.mw-echo-ui-notificationOptionWidget {
|
|
padding: 0.5em;
|
|
background-color: #F1F1F1;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
white-space: normal;
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
|
|
&:hover > a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:not(:hover) a,
|
|
#p-personal &:not(:hover) a.new {
|
|
color: #666666;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.oo-ui-labelElement-label {
|
|
// We have to override this with !important because OOUI's rules for
|
|
// the label element are extremely strong and cannot be overridden
|
|
white-space: normal !important;
|
|
}
|
|
|
|
&-markAsReadButton {
|
|
float: right;
|
|
font-size: 0.5em;
|
|
opacity: 0.5;
|
|
padding: 0.5em;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&-initiallyUnseen {
|
|
-webkit-animation-name: unseen-fadeout-to-read;
|
|
animation-name: unseen-fadeout-to-read;
|
|
-webkit-animation-duration: .5s;
|
|
animation-duration: .5s;
|
|
-webkit-animation-delay: 2s;
|
|
animation-delay: 2s;
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
|
|
&.mw-echo-ui-notificationOptionWidget-unread {
|
|
-webkit-animation-name: unseen-fadeout-to-unread;
|
|
animation-name: unseen-fadeout-to-unread;
|
|
}
|
|
}
|
|
&-unread {
|
|
background-color: white;
|
|
}
|
|
|
|
&.oo-ui-optionWidget-selected,
|
|
&.oo-ui-optionWidget-highlighted {
|
|
background-color: #F9F9F9;
|
|
}
|
|
|
|
&-unread.oo-ui-optionWidget-highlighted {
|
|
background-color: white;
|
|
}
|
|
|
|
// 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
|
|
}
|
|
|
|
@-webkit-keyframes unseen-fadeout-to-unread {
|
|
from { background-color: @notification-background-unseen; }
|
|
to { background-color: @notification-background-unread; }
|
|
}
|
|
|
|
@keyframes unseen-fadeout-to-unread {
|
|
from { background-color: @notification-background-unseen; }
|
|
to { background-color: @notification-background-unread; }
|
|
}
|
|
|
|
@-webkit-keyframes unseen-fadeout-to-read {
|
|
from { background-color: @notification-background-unseen; }
|
|
to { background-color: @notification-background-read; }
|
|
}
|
|
|
|
@keyframes unseen-fadeout-to-read {
|
|
from { background-color: @notification-background-unseen; }
|
|
to { background-color: @notification-background-read; }
|
|
}
|