MediaWiki:Cosmos.css

/* ==========================================================================
   SocialProfile dark-theme fixes
   --------------------------------------------------------------------------
   SocialProfile's bundled CSS (UserProfile.css, ProfileTabs.css,
   SpecialUpdateProfile.css) was written for a white-background wiki: it sets
   dark-gray text with NO background of its own (relying on the page being
   white) and hardcodes a green/orange brand palette from Wikia's old look.
   On this wiki's dark #401901 page background that produces near-invisible
   text and off-brand green tabs/buttons. This overrides just those rules --
   layout/spacing from the original files is untouched.
   ========================================================================== */

/* --- Profile tabs (View profile / Edit profile bar) --- */
.profile-tab {
	background-color: rgba(241, 144, 0, 0.12);
	border: 1px solid #F19000;
}

.profile-tab-on {
	background-color: #F19000;
	border: 1px solid #F19000;
}

.profile-tab a {
	color: #F19000 !important;
}

.profile-tab a:hover {
	color: #ffffff !important;
}

.profile-tab-on a,
.profile-tab-on a:visited {
	color: #2a0f00 !important;
}

/* --- Save/update button on Special:UpdateProfile --- */
.profile-update-button {
	background-color: #F19000;
	border: 1px solid #F19000;
	color: #2a0f00;
	font-weight: 700;
}

/* --- Section headings that relied on a white page background --- */
#user-page-left h2,
#user-page-right h2,
.profile-update-title {
	color: #F19000;
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* --- Body text that relied on a white page background --- */
.item-small,
.item,
.vote-text,
.profile-update-unit-left,
.profile-update-unit-small,
.profile-update-row,
.profile-board-message-type,
table.avatar-success-page td.title-cell,
.user-board-message-time,
.profile-info-container b,
.profile-info-container div {
	color: #D5D4D4;
}

/* --- Cards that set their own pale/white background (looked like leftover
   white boxes on the dark page) -- keep them as cards, just re-themed --- */
.no-info-container,
.no-pictures-container,
.user-board-message-from {
	background-color: rgba(255, 255, 255, 0.06);
	color: #D5D4D4;
}

/* --- Dividers that were near-invisible pale-gray-on-dark-brown --- */
#user-page-left h2,
#user-page-right h2,
.user-section-heading,
#profile-top,
.user-board-message,
.activity-item,
.casual-game-container p,
.article-item {
	border-color: rgba(255, 255, 255, 0.15);
}

/* --- "Add points"-style badge on the toggle button: brand orange stays,
   just make sure the text stays legible --- */
#profile-toggle-button {
	background-color: #F19000;
}

#profile-toggle-button a {
	color: #2a0f00 !important;
}

/* ==========================================================================
   Mobile / tablet fixes
   --------------------------------------------------------------------------
   Reported by a wiki editor via Discord: on a tablet, the notifications
   (bell/envelope) flyout "takes up nearly half my screen". Root cause: Echo's
   popup has no max-height or scroll of its own -- it just grows one row per
   notification forever. Capping it and giving the list its own scrollbar
   fixes that regardless of how many notifications pile up.
   ========================================================================== */
/* !important is required here: OOUI's JS computes its own clipping and sets
   max-height as an INLINE style on this element, which otherwise beats any
   plain rule in an external stylesheet regardless of selector specificity. */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body {
	max-height: 60vh !important;
	overflow-y: auto !important;
}

@media screen and (max-width: 900px) {
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body {
		max-height: 45vh !important;
	}

	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
		max-width: 92vw;
	}
}