Page MenuHomeWickedGov Phorge
Files F4091866

mw.echo.ui.NotificationItemWidget.less
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

mw.echo.ui.NotificationItemWidget.less
View Options

@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';
@import '../echo.variables.less';
@import '../echo.mixins.less';
.mw-echo-ui-notificationItemWidget {
display: block;
background-color: @notification-item-background-read;
position: relative;
white-space: normal;
padding: 0.8em 1em 0.5em 1em;
box-sizing: border-box;
&:not( :last-child ) {
border-bottom: @border-width-base @border-style-base @border-color-subtle;
}
&:not( [ href ] ) {
// Items without a primary URL are not clickable
cursor: default;
}
label {
// Reset browser default of cursor:default;
cursor: inherit;
}
&:focus {
text-decoration: none;
box-shadow: @box-shadow-inset-medium @box-shadow-color-progressive--focus;
outline: @outline-base--focus;
}
&:hover {
text-decoration: none;
// FIXME: Non-standard design token. Replace with a standard token and revise skin-theme rules.
background-color: #ececec;
.skin-theme-clientpref-night & {
@media screen {
background-color: @background-color-interactive-subtle;
}
}
.skin-theme-clientpref-os & {
@media screen and ( prefers-color-scheme: dark ) {
background-color: @background-color-interactive-subtle;
}
}
}
&-unread {
background-color: @background-color-base;
&:hover {
background-color: @background-color-interactive-subtle;
}
}
> a,
&:hover > a {
text-decoration: none;
}
// Dynamic-action messages in mw.notify
&-notify {
&-title {
font-weight: bold;
}
}
&-icon {
position: absolute;
img {
height: 30px;
width: 30px;
}
}
&-content {
display: block;
box-sizing: border-box;
// The icon is 30px
margin-left: 30px;
padding-left: 0.8em;
&-message {
line-height: 1.3em;
// Compensate for the placement of the 'mark as read'
// button, so the message is not stretched past it.
// The 'mark as read' circle is placed with a right
// margin of -1em
padding-right: 1em;
// break-word rules are inconsistent accross browsers
// these three rules should cover the main use cases
// with major browser support
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
&-header {
color: @color-emphasized;
}
&-body {
color: @notification-body-color;
margin-top: 4px;
// In the popup only, truncate the text to one-line
// with ellipses
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup & {
.text-overflow( @visible: false );
}
}
}
&-actions {
display: flex;
align-items: flex-end;
font-size: 0.9em;
margin-top: 0.8em;
& > &-buttons.oo-ui-buttonSelectWidget {
display: flex;
overflow: hidden;
> .oo-ui-buttonOptionWidget {
min-width: 7em;
overflow: hidden;
.oo-ui-labelElement-label {
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
}
}
&-button {
margin-right: 1.2em;
}
.mw-echo-ui-menuItemWidget-prioritized {
// Option widget already has some right padding
margin-right: 0.6em;
}
&-menu {
vertical-align: bottom;
padding: 0;
> .oo-ui-buttonElement-button {
.mw-echo-ui-mixin-hover-opacity();
}
}
&-timestamp {
flex-grow: 1;
text-align: right;
vertical-align: bottom;
color: @color-emphasized;
opacity: @opacity-low;
white-space: nowrap;
}
}
}
&-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;
width: 100%;
padding: 0.5em;
.mw-echo-ui-notificationItemWidget-content {
display: table-row;
padding-left: 0.5em + 1.5em;
.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;
img {
height: 20px;
width: 20px;
}
}
&-content-message {
display: table-cell;
padding-right: 0.5em;
width: 100%;
&-header {
width: 100%;
&-wrapper {
position: relative;
}
// Bundled notifications don't have bodies, only headers,
// so they use <em> to designate excerpts. Use the body color
// for these.
em {
color: @notification-body-color;
font-style: normal;
}
}
}
&-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 {
display: table-cell;
vertical-align: top;
float: none;
}
}
}
}
&-initiallyUnseen {
animation-name: unseen-fadeout-to-read;
animation-duration: 0.5s;
animation-delay: 2s;
animation-timing-function: ease-out;
animation-fill-mode: both;
&.mw-echo-ui-notificationItemWidget-unread {
animation-name: unseen-fadeout-to-unread;
}
}
// 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
}
@keyframes unseen-fadeout-to-unread {
from {
background-color: @notification-background-unseen;
}
to {
background-color: @notification-background-unread;
}
}
@keyframes unseen-fadeout-to-read {
from {
background-color: @notification-background-unseen;
}
to {
background-color: @notification-background-read;
}
}

File Metadata

Mime Type
text/x-asm
Expires
Aug 18 2026, 11:57 (5 w, 4 h ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
6b/ca/e13d211b9fd5f3e4e6bdcb9832a3
Default Alt Text
mw.echo.ui.NotificationItemWidget.less (5 KB)

Event Timeline