mediawiki-extensions-Echo/modules/ooui/styles/mw.echo.ui.NotificationOptionWidget.less
Moriel Schottlender bfd27ae712 Wrap notifications with a link for native click behavior
Remove the behavior of the SelectWidget 'choose' and instead wrap
the notifications with their primary url links. That way, the click
handler returns to browser native response, and we gain automatic
behavior for ctrl+click, middle click, and regular click.

CSS had to be adjusted as well.

Bug: T112004
Change-Id: If10a4d3be71a8cf3ce966f15b922da0b9a2ddcc7
2015-09-11 09:48:00 -07:00

95 lines
2.2 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;
animation-name: unseen-fadeout;
-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-markReadWhenSeen {
-webkit-animation-name: unseen-fadeout-to-read;
animation-name: unseen-fadeout-to-read;
}
}
&-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 {
from { background-color: @notification-background-unseen; }
to { background-color: @notification-background-unread; }
}
@keyframes unseen-fadeout {
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; }
}