MediaWiki:Cosmos.css - Revision history

The CodeGhost: Fix two real SocialProfile layout bugs: undefined .visualClear utility class (squished Personal information/Real name), and eye-container privacy pill overlapping field labels

2026-09-05T08:20:50Z

Fix two real SocialProfile layout bugs: undefined .visualClear utility class (squished Personal information/Real name), and eye-container privacy pill overlapping field labels

@@ Line 220: / Line 220: @@
 #cosmos-siteNotice-closeButton:hover path {
 	fill: #F19000;
+}

The CodeGhost: Restyle the site notice banner: dark card with orange accent border instead of solid brand-orange (was borderline low-contrast and camouflaged as a button)

2026-09-05T08:07:17Z

Restyle the site notice banner: dark card with orange accent border instead of solid brand-orange (was borderline low-contrast and camouflaged as a button)

@@ Line 183: / Line 183: @@
 		overflow-y: auto;
+	}
+}

The CodeGhost: Raise selector specificity on the nav dropdown fix -- Cosmos own CSS was winning the cascade with a more specific rule (and !important on mobile)

2026-09-05T04:20:32Z

Raise selector specificity on the nav dropdown fix -- Cosmos own CSS was winning the cascade with a more specific rule (and !important on mobile)

← Older revision		Revision as of 04:20, 5 September 2026
Line 135:		Line 135:
	desktop. Colors match what the rest of the site already uses.		desktop. Colors match what the rest of the site already uses.
	========================================================================== */		========================================================================== */
	.wds-dropdown__content,		/* Selectors are doubled-up (.foo.foo) purely to raise specificity -- Cosmos's
	.wds-dropdown-level-2__content {		own CSS fights back here with both a 2-class selector (.cosmos-header
	background-color: #2a0f00;		.wds-dropdown__content) on desktop AND a 2-class !important rule forcing
	border: 1px solid rgba(255, 255, 255, 0.15);		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);		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	}		}

The CodeGhost: Retheme the WDS nav mega-menu dropdown (was an unstyled white box, worst on mobile where it covers most of the screen) and cap its height

2026-09-05T04:18:58Z

Retheme the WDS nav mega-menu dropdown (was an unstyled white box, worst on mobile where it covers most of the screen) and cap its height

@@ Line 121: / Line 121: @@
 	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
 		max-width: 92vw;
+	}
+}

The CodeGhost: Use !important on the notification flyout max-height -- OOUI sets its own inline max-height that otherwise wins

2026-09-05T04:11:29Z

Use !important on the notification flyout max-height -- OOUI sets its own inline max-height that otherwise wins

← Older revision		Revision as of 04:11, 5 September 2026
Line 106:		Line 106:
	fixes that regardless of how many notifications pile up.		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 {		.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body {
	max-height: 60vh;		max-height: 60vh !important;
	overflow-y: auto;		overflow-y: auto !important;
	}		}

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

The CodeGhost: Cap the notifications flyout height on mobile/tablet (was unbounded and could cover half the screen)

2026-09-05T04:09:11Z

Cap the notifications flyout height on mobile/tablet (was unbounded and could cover half the screen)

@@ Line 95: / Line 95: @@
 #profile-toggle-button a {
 	color: #2a0f00 !important;
+}

The CodeGhost: Recolor SocialProfile UI to match the dark/orange theme (fixes green tabs and low-contrast text)

2026-09-05T03:49:11Z

Recolor SocialProfile UI to match the dark/orange theme (fixes green tabs and low-contrast text)

New page

/* ==========================================================================
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;
}