Jump to content
Toggle search
Toggle menu
  • 799 articles
  • 4.8K files
  • 4 users
  • 64.6K edits
2b2t Uncensored
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css

MediaWiki interface page
More actions
Revision as of 03:53, 3 October 2026 by WaveShift (talk | contribs) (Timeline line and dots inside collapsible sections)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==== 2b2t Library: Citizen dark mode fixes ====
   Many imported templates hard-code light colours in style="" attributes (infoboxes, navboxes, notices,
   tables). In dark mode these are mapped onto Citizen's own colours so pages stay readable. */

:root.skin-theme-clientpref-night :is(.mw-parser-output, #siteNotice) :is(table, div, td, th, span, p)[style*="background"],
:root.skin-theme-clientpref-night .mw-parser-output :is(.infobox, .navbox, .toccolours, .wikitable, .wikitable > * > tr > th, .wikitable > * > tr > td) {
	background: var( --background-color-neutral-subtle, #202122 ) !important;
	color: var( --color-base, #eaecf0 ) !important;
	border-color: var( --border-color-subtle, #54595d ) !important;
}
:root.skin-theme-clientpref-night .mw-parser-output :is(.infobox, .navbox, .wikitable) th[style*="background"],
:root.skin-theme-clientpref-night .mw-parser-output .infobox > * > tr > th {
	background: var( --background-color-neutral, #2a2c30 ) !important;
}
/* inline black/dark text would vanish on a dark background */
:root.skin-theme-clientpref-night .mw-parser-output [style*="color:#000"],
:root.skin-theme-clientpref-night .mw-parser-output [style*="color: #000"],
:root.skin-theme-clientpref-night .mw-parser-output [style*="color:black"],
:root.skin-theme-clientpref-night .mw-parser-output font[color] {
	color: var( --color-base, #eaecf0 ) !important;
}
/* black-on-transparent logos (common in infoboxes) get a light plate so they stay visible */
:root.skin-theme-clientpref-night .mw-parser-output .infobox img {
	background: #f8f9fa;
	border-radius: 6px;
}

/* Same rules for "auto" theme on a dark system */
@media (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os :is(.mw-parser-output, #siteNotice) :is(table, div, td, th, span, p)[style*="background"],
	:root.skin-theme-clientpref-os .mw-parser-output :is(.infobox, .navbox, .toccolours, .wikitable, .wikitable > * > tr > th, .wikitable > * > tr > td) {
		background: var( --background-color-neutral-subtle, #202122 ) !important;
		color: var( --color-base, #eaecf0 ) !important;
		border-color: var( --border-color-subtle, #54595d ) !important;
	}
	:root.skin-theme-clientpref-os .mw-parser-output :is(.infobox, .navbox, .wikitable) th[style*="background"],
	:root.skin-theme-clientpref-os .mw-parser-output .infobox > * > tr > th {
		background: var( --background-color-neutral, #2a2c30 ) !important;
	}
	:root.skin-theme-clientpref-os .mw-parser-output [style*="color:#000"],
	:root.skin-theme-clientpref-os .mw-parser-output [style*="color: #000"],
	:root.skin-theme-clientpref-os .mw-parser-output [style*="color:black"],
	:root.skin-theme-clientpref-os .mw-parser-output font[color] {
		color: var( --color-base, #eaecf0 ) !important;
	}
	:root.skin-theme-clientpref-os .mw-parser-output .infobox img {
		background: #f8f9fa;
		border-radius: 6px;
	}
}
/* ==== 2b2t Uncensored: category pages ==== */
.ns-14 .mw-parser-output > p:first-of-type {
	padding: 18px 22px; border-radius: 14px; font-size: 1.05em;
	background: var( --background-color-neutral-subtle ); border: 1px solid var( --border-color-subtle );
}
.ns-14 #mw-subcategories .mw-category, .ns-14 #mw-pages .mw-category { columns: auto !important; column-width: auto !important; }
.ns-14 #mw-subcategories .mw-category { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-14 #mw-subcategories .mw-category-group { display: contents; }
.ns-14 #mw-subcategories .mw-category-group h3 { display: none; }
.ns-14 #mw-subcategories ul { display: contents; }
.ns-14 #mw-subcategories li {
	list-style: none; margin: 0; padding: 6px 14px; border-radius: 999px;
	background: var( --background-color-neutral-subtle ); border: 1px solid var( --border-color-subtle );
}
.ns-14 #mw-subcategories .CategoryTreeBullet, .ns-14 #mw-subcategories .CategoryTreeToggle { display: none; }
/* letter-grouped list view */
.ns-14 #mw-pages .mw-category { display: grid; grid-template-columns: repeat( auto-fill, minmax( 230px, 1fr ) ); gap: 12px; }
.ns-14 #mw-pages .mw-category-group {
	break-inside: avoid; padding: 12px 16px; border-radius: 12px;
	background: var( --background-color-neutral-subtle ); border: 1px solid var( --border-color-subtle );
}
.ns-14 #mw-pages .mw-category-group h3 { margin: 0 0 6px; padding: 0; font-size: 1.3em; color: #e5383b; border: 0; }
.ns-14 #mw-pages .mw-category-group ul { margin: 0; list-style: none; }
.ns-14 #mw-pages .mw-category-group li { margin: 0; padding: 3px 0; border-top: 1px solid var( --border-color-muted, var( --border-color-subtle ) ); }
.ns-14 #mw-pages .mw-category-group li:first-child { border-top: 0; }

/* card view (built by MediaWiki:Common.js) */
.ub-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 16px; }
.ub-bar input[type="search"] {
	flex: 1 1 260px; min-width: 0; padding: 9px 14px; border-radius: 10px; font: inherit;
	background: var( --background-color-base ); color: var( --color-base ); border: 1px solid var( --border-color-base );
}
.ub-bar select, .ub-bar button {
	padding: 8px 12px; border-radius: 10px; font: inherit; cursor: pointer;
	background: var( --background-color-neutral-subtle ); color: var( --color-base ); border: 1px solid var( --border-color-subtle );
}
.ub-bar button[aria-pressed="true"] { border-color: #3a5bff; color: #3a5bff; }
.ub-count { color: var( --color-subtle ); font-size: 0.9em; }
.ub-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); gap: 14px; }
.ub-card {
	position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
	background: var( --background-color-neutral-subtle ); border: 1px solid var( --border-color-subtle );
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.ub-card:hover { transform: translateY( -2px ); border-color: #3a5bff; }
.ub-thumb { aspect-ratio: 16 / 10; background: var( --background-color-neutral ); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ub-thumb img.ub-contain { object-fit: contain; padding: 10px; box-sizing: border-box; image-rendering: pixelated; }
.ub-letter { font-size: 2.6em; font-weight: 800; color: #3a5bff; opacity: 0.85; }
.ub-card:nth-child( 2n ) .ub-letter { color: #e5383b; }
.ub-body { padding: 10px 14px 12px; }
.ub-title { font-weight: 700; color: var( --color-emphasized ); }
.ub-title::after { content: ""; position: absolute; inset: 0; }
.ub-desc { margin-top: 4px; font-size: 0.85em; line-height: 1.4; color: var( --color-subtle );
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ub-hidden { display: none !important; }

/* ==== 2b2t Uncensored: Timeline ==== */
.page-Timeline .mw-parser-output > ul, .page-Timeline .citizen-section > ul {
	position: relative; margin: 0 0 1.2em 0.4em; padding: 0 0 0 22px; list-style: none;
	border-left: 3px solid var( --border-color-subtle );
}
.page-Timeline .mw-parser-output > ul > li, .page-Timeline .citizen-section > ul > li { position: relative; margin: 0; padding: 7px 0; }
.page-Timeline .mw-parser-output > ul > li::before, .page-Timeline .citizen-section > ul > li::before {
	content: ""; position: absolute; left: -30px; top: 14px; width: 11px; height: 11px; border-radius: 50%;
	background: #3a5bff; border: 2px solid var( --background-color-base );
}
.page-Timeline .mw-parser-output > ul > li:nth-child( 3n )::before, .page-Timeline .citizen-section > ul > li:nth-child( 3n )::before { background: #e5383b; }
.page-Timeline .mw-parser-output > ul > li > b:first-child, .page-Timeline .citizen-section > ul > li > b:first-child { color: #e5383b; }
.page-Timeline .mw-parser-output .mw-heading2 {
	margin-top: 1.6em; padding: 8px 16px; border-radius: 12px; border: 1px solid var( --border-color-subtle );
	background: var( --background-color-neutral-subtle );
}
.page-Timeline .mw-parser-output .mw-heading2 h2 { font-size: 1.5em; border: 0; color: #3a5bff; }
.page-Timeline .mw-parser-output .mw-heading3 h3 { color: var( --color-subtle ); font-size: 1.05em; text-transform: uppercase; letter-spacing: 0.06em; }
.ub-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.ub-years a {
	padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 0.9em; text-decoration: none;
	background: var( --background-color-neutral-subtle ); border: 1px solid var( --border-color-subtle );
}
.ub-years a:hover { border-color: #3a5bff; }
Retrieved from "https://2b2tuncensored.com/index.php?title=MediaWiki:Citizen.css&oldid=64610"