mediawiki-extensions-Echo/modules/styles/mw.echo.ui.NotificationItemWidget.less

@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;
	}
}