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 per-field privacy toggle ("public / hidden / friends" pill on
   Special:UpdateProfile). SocialProfile's own JS, on hover, yanks this pill
   out of the form and re-appends it to <body> with position:absolute at
   coords computed from its old location -- which lands it off-screen in
   Cosmos's layout, so it just vanishes when you mouse over it. (The upstream
   source literally comments that the button becomes "essentially invisible
   to the user. Fun!") Two of its four options are dead here anyway since the
   friends system is off. Hidden entirely -- every profile field is public,
   which is the default and appropriate for a public wiki. */
.eye-container {
	display: none;
}

/* 3. Empty profile sections. Don't render a heading + "No X information"
   placeholder box for a section the user never filled in -- only sections
   with actual content should appear. */
.no-info-container {
	display: none;
}

.user-section-heading:has( + .visualClear + .no-info-container ) {
	display: none;
}

.visualClear:has( + .no-info-container ) {
	display: none;
}

/* If hiding those empties the whole left column, collapse its 35% float so
   the right column doesn't sit next to a blank gap. */
#user-page-left:not( :has( .profile-info-container, .user-relationship-container, .user-gift-container ) ) {
	display: none;
}

#user-page-left:not( :has( .profile-info-container, .user-relationship-container, .user-gift-container ) ) ~ #user-page-right {
	width: 100%;
	float: none;
}