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

/* ==========================================================================
   Site notice (the dismissible "Welcome to Super-Shiritori!" rules banner)
   --------------------------------------------------------------------------
   Cosmos reuses its BUTTON theme colors for this box (@button-background-color
   / @button-font-color) -- on this wiki that resolves to solid brand-orange
   with bold white text, which is exactly what the "EDIT SOURCE" button looks
   like, so a rules notice ends up camouflaged as UI chrome instead of reading
   as a notice, and white-on-orange is borderline low-contrast besides.
   Restyled as a proper notice card: dark body, orange accent border --
   consistent with every other box on the site.
   ========================================================================== */
#cosmos-content-siteNotice {
	background-color: #2a0f00;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-left: 4px solid #F19000;
	color: #D5D4D4;
}

#cosmos-content-siteNotice * {
	color: #D5D4D4;
}

#cosmos-content-siteNotice b,
#cosmos-content-siteNotice strong {
	color: #F19000;
}

#cosmos-siteNotice-closeButton svg,
#cosmos-siteNotice-closeButton path {
	fill: #D5D4D4;
}

#cosmos-siteNotice-closeButton:hover svg,
#cosmos-siteNotice-closeButton:hover path {
	fill: #F19000;
}

/* ==========================================================================
   Social profile layout fixes
   --------------------------------------------------------------------------
   Two separate real bugs on the user-profile / edit-profile pages.
   ========================================================================== */

/* 1. ".visualClear" is used throughout SocialProfile's markup to clear floats
   (e.g. after a floated section heading, before the section's actual
   content) -- but it's a bare Fandom/Wikia platform utility class that was
   never actually DEFINED anywhere: not in SocialProfile's own CSS, not in
   MediaWiki core, not in Cosmos. With no "clear" rule attached, the class
   does nothing, so floated headings (like "Personal information") never get
   cleared and the next line's content (the "Real name" label/value) rises up
   and squishes into the same line as the heading instead of sitting below
   it. This one rule fixes every place that pattern shows up. */
.visualClear {
	clear: both;
}

/* 2. The privacy "Public"/"Friends"/"Hidden" toggle pill on Special:UpdateProfile
   is pulled up with fragile hardcoded negative offsets (top: -25px, tuned
   per-field) meant to tuck it next to Fandom's original field-label spacing.
   Cosmos's typography doesn't match those old measurements, so the pill
   lands on top of the label text instead (e.g. "Email" + the pill overlap
   into an unreadable "Emailublic"). Letting it sit in normal document flow
   below the field, instead of being pulled back up over it, can't overlap
   regardless of exact spacing. */
div.eye-container[fieldkey] {
	position: static !important;
	top: auto !important;
	margin: 4px 0 10px 0;
}