mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-12-11 07:26:29 +00:00
3937857bd8
This makes the actions more consistent, and also allows for separating the two behaviors: The one where we need a link to a destination (User page, diff, etc) and one where we have an action the code needs to take care of ("Mark as read" or, in the future, volume control, etc) Also, this allows for adding descriptions to the secondary links in the dotdotdot menu. It also fixes the bug where the links did not work. Bug: T125160 Change-Id: I0ebf3fc62425f86e2e7f1e96b67f8dc34db83efb
217 lines
4 KiB
Plaintext
217 lines
4 KiB
Plaintext
@import '../../echo.variables';
|
|
@import '../../echo.mixins';
|
|
|
|
.mw-echo-ui-notificationItemWidget {
|
|
padding: 0.8em;
|
|
background-color: #F1F1F1;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
white-space: normal;
|
|
line-height: 16px;
|
|
|
|
&:hover > a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&-icon {
|
|
img {
|
|
height: 30px;
|
|
width: 30px;
|
|
}
|
|
|
|
position: absolute;
|
|
}
|
|
|
|
&-content {
|
|
display: inline-block;
|
|
// The icon is 30px and has a 0.8em right margin
|
|
padding-left: ~"calc(30px + 0.8em)";
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
|
|
&-message {
|
|
&-header {
|
|
color: @notification-text-color;
|
|
}
|
|
&-body {
|
|
.mw-echo-ui-mixin-one-line-truncated;
|
|
color: @notification-body-color;
|
|
}
|
|
}
|
|
|
|
&-actions {
|
|
margin-top: 0.8em;
|
|
font-size: 0.9em;
|
|
|
|
.mw-echo-ui-menuItemWidget {
|
|
&:not(:last-child) {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
|
|
&-menu {
|
|
.oo-ui-popupWidget-popup {
|
|
font-size: 1 / 0.8em;
|
|
padding: 0.5em;
|
|
}
|
|
}
|
|
|
|
&-timestamp {
|
|
float: right;
|
|
color: black;
|
|
opacity: @opacity-low;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// Table layout only for the content inside bundles
|
|
&-bundle {
|
|
display: table;
|
|
width: ~"calc( 100% - " @bundle-group-padding ~");";
|
|
|
|
.mw-echo-ui-notificationItemWidget-content {
|
|
display: table-row;
|
|
|
|
.mw-echo-ui-notificationItemWidget {
|
|
// CSS table layout
|
|
&-icon,
|
|
&-content-message,
|
|
&-content-actions,
|
|
&-markAsReadButton {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
}
|
|
|
|
// Positioning fixes for bundled items
|
|
&-icon {
|
|
position: relative;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
&-content-message {
|
|
display: table-cell;
|
|
width: 100%;
|
|
}
|
|
|
|
&-content-actions {
|
|
&-row {
|
|
display: table-row;
|
|
}
|
|
|
|
&-buttons {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&-menu {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&-timestamp {
|
|
float: none;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding-right: 0.5em;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
&-markAsReadButton {
|
|
width: 1em;
|
|
float: none;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
&-markAsReadButton {
|
|
.mw-echo-ui-mixin-hover-opacity;
|
|
float: right;
|
|
font-size: 1em;
|
|
margin-top: -0.5em;
|
|
margin-right: -0.5em;
|
|
padding: 0;
|
|
|
|
.mw-echo-ui-notificationItemWidget-bundle & {
|
|
font-size: 0.8em;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
&-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-notificationItemWidget-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;
|
|
}
|
|
}
|