mediawiki-skins-Citizen/skinStyles/extensions/Echo/ext.echo.ui.less

/*
 * Citizen - Echo Styles
 * https://starcitizen.tools
*/

@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';

.mw-echo-ui-overlay {
	z-index: 100; // Higher than header
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
	position: relative;
	z-index: 2;
	border: 0 !important;
	.boxshadow(2);
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer {
	border-color: @base-80 !important;
}

.mw-echo-ui-notificationItemWidget {
	max-width: 100vw;
}

// 500px or below will break the message box, +40px margin
@media only screen and ( max-width: 540px ) {
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
		left: 0 !important;

		> .oo-ui-popupWidget-popup {
			width: auto !important;

			> .oo-ui-popupWidget-body {
				width: auto !important;
			}
		}

		> .oo-ui-popupWidget-anchor {
			display: none;
		}
	}
}

@media ( prefers-color-scheme: dark ) {
	/**
  mw.echo.ui.CrossWikiUnreadFilterWidget.less
   */
	.mw-echo-ui-crossWikiNotificationItemWidget,
	.mw-echo-ui-bundleNotificationItemWidget {
		&-separator {
			border-bottom: 1px solid @dark-bg-20;
		}

		&-group {
			background-color: @dark-bg-10;
		}

		.mw-echo-ui-subGroupListWidget-header {
			&-row-title {
				color: @dark-text-80;
			}
		}
	}

	/**
  mw.echo.ui.CrossWikiNotificationItemWidget.less
   */
	.mw-echo-ui-crossWikiUnreadFilterWidget {
		border: 1px solid @dark-bg-30 !important;

		&-subtitle {
			color: @dark-text-70;
		}
	}

	/**
	mw.echo.ui.CrossWikiNotificationItemWidget.less
	 */
	.mw-echo-ui-datedSubGroupListWidget {
		.mw-body-content &-title {
			&-secondary {
				color: @dark-text-70;
			}
		}

		/**
	mw.echo.ui.FooterNoticeWidget.less
	 */
		.mw-echo-ui-footerNoticeWidget {
			border-bottom: 1px solid @dark-bg-30;
		}
	}

	/**
  mw.echo.ui.MenuItemWidget.less
   */
	.mw-echo-ui-menuItemWidget {
		> .oo-ui-labelElement-label {
			color: @dark-text-90;
		}

		&-dynamic-action {
			&:hover {
				background-color: @dark-bg-0;
			}

			.mw-echo-ui-menuItemWidget-description {
				color: @dark-text-80;
			}
		}

		.mw-echo-ui-actionMenuPopupWidget-menu:hover {
			background-color: @dark-bg-20;
		}
	}

	/**
	mw.echo.ui.NotificationBadgeWidget.less
	 */
	.mw-echo-ui-notificationBadgeButtonPopupWidget {
		&-popup {
			> .oo-ui-popupWidget-popup {
				> .oo-ui-popupWidget-head {
					border-color: @dark-bg-30;
				}

				> .oo-ui-popupWidget-footer {
					border-color: @dark-bg-30 !important;

					.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
						.oo-ui-buttonElement {
							&:last-child {
								border-color: @dark-bg-30 !important;
							}
						}
					}
				}
			}
		}
	}

	/**
	mw.echo.ui.NotificationItemWidget.less
	 */
	.mw-echo-ui-notificationItemWidget {
		background-color: @dark-bg-20;
		border-color: @dark-bg-30;

		&:hover {
			background-color: @dark-bg-30;
		}

		&:last-child {
			border-color: @dark-bg-30;
		}

		&-unread {
			background-color: @dark-bg-0;

			&:hover {
				background-color: @dark-bg-10;
			}
		}

		&-notify {
			&-description {
				color: @dark-text-80;
			}
		}

		&-content {
			&-message {
				&-header {
					color: @dark-text-100;
				}

				&-body {
					color: @dark-text-70;
				}
			}

			&-actions {
				&-timestamp {
					color: @dark-text-100;
				}
			}
		}

		&-bundled {
			.mw-echo-ui-notificationItemWidget-content {
				.mw-echo-ui-notificationItemWidget {
					&-content-message {
						&-header {
							em {
								color: @dark-text-70;
							}
						}
					}
				}
			}
		}
	}

	@-webkit-keyframes unseen-fadeout-to-unread {
		from {
			background-color: @dark-bg-30;
		}

		to {
			background-color: @dark-bg-0;
		}
	}

	@keyframes unseen-fadeout-to-unread {
		from {
			background-color: @dark-bg-30;
		}

		to {
			background-color: @dark-bg-0;
		}
	}

	@-webkit-keyframes unseen-fadeout-to-read {
		from {
			background-color: @dark-bg-30;
		}

		to {
			background-color: @dark-bg-20;
		}
	}

	@keyframes unseen-fadeout-to-read {
		from {
			background-color: @dark-bg-30;
		}

		to {
			background-color: @dark-bg-20;
		}
	}

	/**
	mw.echo.ui.NotificationsInboxWidget.less
	 */
	.mw-echo-ui-notificationsInboxWidget {
		&-toolbarWrapper {
			background: @dark-bg-0 !important;
		}
	}

	/**
	mw.echo.ui.NotificationsListWidget.less
	 */
	.mw-echo-ui-notificationsListWidget {
		> a,
		&:hover > a {
			color: @dark-text-80;
		}

		&:not( :hover ) a,
		#p-personal &:not( :hover ) a.new {
			color: @dark-text-80;
		}
	}

	/**
	mw.echo.ui.PageNotificationsOptionWidget.less
	 */
	.mw-echo-ui-pageNotificationsOptionWidget {
		&.oo-ui-optionWidget {
			&-selected {
				background-color: @dark-bg-30 !important;
			}

			&-highlighted {
				background-color: @dark-bg-10 !important;
				color: @dark-text-100 !important;
			}
		}

		&-label-count {
			background-color: @dark-bg-20;
			color: @dark-text-80;
		}
	}

	/**
	mw.echo.ui.PlaceholderItemWidget.less
	 */
	.mw-echo-ui-placeholderItemWidget {
		background-color: @dark-bg-20;
	}

	/**
	mw.echo.ui.ToggleReadCircleButtonWidget.less
	 */
	.mw-echo-ui-toggleReadCircleButtonWidget {
		&-circle {
			&-unread {
				background-color: @dark-bg-20;
				border-color: @dark-bg-60;
			}
		}

		&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
			&-unread {
				background-color: @dark-bg-30;
			}
		}
	}

	/**
	Icons
	 */
	.mw-echo-ui-notificationsInboxWidget,
	.mw-echo-ui-overlay {
		.oo-ui-indicatorElement-indicator,
		.oo-ui-iconElement-icon {
			filter: invert( 1 ) hue-rotate( 180deg );
		}
	}
}