@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; } &:hover { text-decoration: none; background-color: #ececec; } &:focus { text-decoration: none; box-shadow: @box-shadow-inset-medium @box-shadow-color-progressive--focus; outline: @outline-base--focus; } &-unread { background-color: @background-color-base; &:hover { background-color: #f8f9fa; } } > 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 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; } }