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

/* ==========================================================================
   Top-nav mega-menu + page-actions "..." menu (legacy Wikia "WDS" markup)
   --------------------------------------------------------------------------
   Cosmos ports this component straight from old Wikia CSS with its own
   light-theme colors baked in -- it was never re-themed, so every dropdown
   off the top nav renders as a plain white box with black text. This is most
   visible on mobile, where the hamburger button just toggles this same
   element to display:block (reported by a wiki editor: the menu "takes up
   nearly half my screen" and looks broken), but it's equally wrong on
   desktop. Colors match what the rest of the site already uses.
   ========================================================================== */
/* Selectors are doubled-up (.foo.foo) purely to raise specificity -- Cosmos's
   own CSS fights back here with both a 2-class selector (.cosmos-header
   .wds-dropdown__content) on desktop AND a 2-class !important rule forcing
   background-color: transparent on mobile, so a plain single-class rule
   (even with !important) loses to both. */
.wds-dropdown__content.wds-dropdown__content,
.wds-dropdown-level-2__content.wds-dropdown-level-2__content {
	background-color: #2a0f00 !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.wds-dropdown__content li,
.wds-dropdown-level-2__content li {
	color: #D5D4D4;
	border-color: rgba(255, 255, 255, 0.1);
}

.wds-dropdown__content a,
.wds-dropdown-level-2__content a,
.wds-dropdown-level-2__toggle {
	color: #F27AEE !important;
}

.wds-dropdown__content a:hover,
.wds-dropdown-level-2__content a:hover,
.wds-dropdown-level-2__toggle:hover {
	color: #F19000 !important;
}

.wds-dropdown-level-2__toggle .wds-dropdown-chevron {
	fill: #F27AEE;
}

.wds-dropdown-level-2__toggle:hover .wds-dropdown-chevron {
	fill: #F19000;
}

/* On mobile the hamburger button toggles the whole .wds-tabs bar to
   display:block; without an explicit background it would otherwise rely on
   .wds-dropdown__content alone for color, so give the outer bar a matching
   dark backing and keep it from ever exceeding the viewport height. */
@media screen and (max-width: 1023px) {
	.wds-tabs {
		background-color: #1a0a00;
		max-height: 80vh;
		overflow-y: auto;
	}
}