MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1,209: | Line 1,209: | ||
/* Blue vertical gradient simulated with base color */ | /* Blue vertical gradient simulated with base color */ | ||
color: #2f8fe5; | color: #2f8fe5; | ||
background: linear-gradient( | |||
to bottom, | |||
#5ec0ff 0%, | |||
#2f8fe5 50%, | |||
#0d4ea6 100% | |||
); | |||
-webkit-background-clip: text; | |||
-webkit-text-fill-color: transparent; | |||
color: transparent; | |||
/* First layer = white stroke */ | /* First layer = white stroke */ | ||
text-shadow: | text-shadow: | ||
| Line 1,224: | Line 1,232: | ||
0 4px 6px rgba(0,0,0,0.4); | 0 4px 6px rgba(0,0,0,0.4); | ||
} | } | ||
Revision as of 23:32, 21 February 2026
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Archivo+Black&family=Oswald&family=Playfair+Display:wght@700&family=Libre+Baskerville:wght@700&family=Bitter:wght@700&family=Cinzel:wght@700&family=IBM+Plex+Mono:wght@600&family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap');
/* =========================
Hiders
========================= */
#skin-client-prefs-skin-theme,
#skin-client-prefs-citizen-feature-pure-black {
display: none !important;
}
/* Hide namespace prefix in page title */
html.lt-theme-default .mw-page-title-namespace,
html.lt-theme-default .mw-page-title-separator,
html.lt-theme-red .mw-page-title-namespace,
html.lt-theme-red .mw-page-title-separator,
html.lt-theme-blue .mw-page-title-namespace,
html.lt-theme-blue .mw-page-title-separator {
display: none;
}
/* =========================
Base Infobox Structure
========================= */
.lt-infobox {
max-width: 320px;
float: right;
margin: 0 0 1rem 1.5rem;
padding: 0;
}
.lt-infobox-title {
text-align: center;
letter-spacing: 2px;
}
.lt-infobox-image img {
width: 100%;
display: block;
}
.lt-infobox-section {
padding: 4px 12px;
}
.lt-infobox-row {
display: flex;
justify-content: space-between;
}
.lt-infobox-label,
.lt-infobox-value {
font-size: 17px;
}
/* ======================================== BEGIN VELVET THEME ==================================================== */
/* Velvet Floating Grid */
html.lt-theme-default body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-image:
linear-gradient(rgba(139,155,180,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(139,155,180,0.05) 1px, transparent 1px);
background-size: 40px 40px;
animation: lt-grid-drift 5s linear infinite;
}
@keyframes lt-grid-drift {
from {
background-position: 0 0, 0 0;
}
to {
background-position: 40px 40px, 40px 40px;
}
}
html.lt-theme-default {
/* Body Text */
color: #d6e2ff;
}
html.lt-theme-default body {
background-image:
linear-gradient(rgba(139,155,180,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(139,155,180,0.05) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Velvet Headers */
html.lt-theme-default h1,
html.lt-theme-default h2,
html.lt-theme-default h3,
html.lt-theme-default .mw-page-title-main {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #d6e2ff; /* same pale icy blue as wordmark */
letter-spacing: 2px;
animation: velvetWordmarkGlow 4s ease-in-out infinite alternate;
}
html.lt-theme-default .mw-page-title-main {
font-size: 50px;
}
html.lt-theme-default h2 {
border-bottom: 2px solid #8fb4ff;
padding-bottom: 6px;
text-shadow: 0 0 6px rgba(143,180,255,0.4);
}
/* Velvet Wordmark – Icy + Breathing */
html.lt-theme-default .mw-logo-wordmark {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #d6e2ff;
letter-spacing: 2px;
animation: velvetWordmarkGlow 4s ease-in-out infinite alternate;
}
@keyframes velvetWordmarkGlow {
from {
text-shadow:
0 0 4px rgba(143,180,255,0.3),
0 0 8px rgba(143,180,255,0.2);
}
to {
text-shadow:
0 0 8px rgba(143,180,255,0.6),
0 0 16px rgba(143,180,255,0.4);
}
}
/* Individual Floating + Rotating Letters */
html.lt-theme-default .velvet-letter {
display: inline-block;
animation: velvetFloatRotate 8s ease-in-out infinite alternate;
}
@keyframes velvetFloatRotate {
0% {
transform: translateY(0px) rotate(-3.0deg);
}
50% {
transform: translateY(-8px) rotate(3.0deg);
}
100% {
transform: translateY(0px) rotate(0.0deg);
}
}
/* Velvet Footer Body */
html.lt-theme-default .mw-footer.citizen-footer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
ellipse at top center,
rgba(143,180,255,0.12) 0%,
transparent 70%
);
opacity: 0.5;
}
html.lt-theme-default .mw-footer.citizen-footer {
position: relative;
background:
linear-gradient(
to bottom,
rgba(8,12,28,0.9) 0%,
rgba(3,6,15,1) 100%
);
border-top: 1px solid rgba(143,180,255,0.25);
box-shadow:
inset 0 20px 40px rgba(0,0,0,0.5);
}
html.lt-theme-default .citizen-footer__desc,
html.lt-theme-default #footer-tagline {
color: rgba(214,226,255,0.75);
}
html.lt-theme-default #footer-places a {
color: #8fb4ff;
transition: color 0.2s ease;
}
html.lt-theme-default #footer-places a:hover {
color: #d6e2ff;
}
/* Velvet Header Shell */
html.lt-theme-default .citizen-header {
background: #050814;
border-right: 1px solid rgba(143,180,255,0.25);
box-shadow: inset -1px 0 0 rgba(143,180,255,0.15);
}
/* Velvet Navigation Links */
html.lt-theme-default .citizen-menu__content-list a {
color: #d6e2ff;
}
html.lt-theme-default .citizen-menu__content-list a:hover {
color: #8fb4ff;
text-shadow: 0 0 6px rgba(143,180,255,0.4);
}
/* Velvet Drawer Panel */
html.lt-theme-default .citizen-drawer__card {
background: #050814;
border-left: 1px solid rgba(143,180,255,0.25);
box-shadow: -4px 0 20px rgba(0,0,0,0.6);
}
html.lt-theme-default .citizen-header::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(
to bottom,
transparent,
rgba(143,180,255,0.4),
transparent
);
}
/* Velvet Sticky Header */
html.lt-theme-default .citizen-sticky-header {
background: rgba(5, 8, 20, 0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(143,180,255,0.25);
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
html.lt-theme-default .citizen-sticky-header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(143,180,255,0.6),
transparent
);
animation: stickyGlow 6s ease-in-out infinite alternate;
}
@keyframes stickyGlow {
from { opacity: 0.3; }
to { opacity: 0.8; }
}
html.lt-theme-default .citizen-sticky-header-background {
background-image:
linear-gradient(rgba(139,155,180,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(139,155,180,0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
/* ======== Velvet Infobox ======== */
/* Velvet Breathing Glow */
@keyframes lt-velvet-breathe {
0% {
box-shadow: 0 0 10px rgba(143,180,255,0.10);
}
50% {
box-shadow: 0 0 22px rgba(143,180,255,0.22);
}
100% {
box-shadow: 0 0 10px rgba(143,180,255,0.10);
}
}
html.lt-theme-default .lt-infobox {
background: #050814;
border: 1px solid #8fb4ff;
outline: 1px solid #8fb4ff;
outline-offset: -6px;
box-shadow: 0 0 14px rgba(143,180,255,0.15);
animation: lt-velvet-breathe 6s ease-in-out infinite;
}
html.lt-theme-default .lt-infobox-title {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #d6e2ff;
text-transform: uppercase;
letter-spacing: 4px;
padding: 14px 10px 10px 10px;
border-bottom: 1px solid rgba(143,180,255,0.4);
font-size: 25px;
text-shadow: 0 0 6px rgba(143,180,255,0.4);
animation: velvetWordmarkGlow 4s ease-in-out infinite alternate;
}
html.lt-theme-default .lt-infobox-image {
padding: 6px;
border-bottom: 1px solid rgba(143,180,255,0.3);
}
html.lt-theme-default .lt-infobox-row {
padding: 8px 12px;
border-bottom: 1px solid rgba(143,180,255,0.25);
}
html.lt-theme-default .lt-infobox-row:last-child {
border-bottom: none;
}
html.lt-theme-default .lt-infobox-label {
color: #8fb4ff;
font-family: "Courier New", monospace;
letter-spacing: 1px;
}
html.lt-theme-default .lt-infobox-value {
font-family: "Courier New", monospace;
color: #d6e2ff;
}
/* Scoped Velvet Links */
html.lt-theme-default a {
color: #8fb4ff;
}
/* ======================================== END VELVET THEME ==================================================== */
/* ======================================== BEGIN MEMENTOS THEME ================================================ */
/* =========================
Mementos Scrapbook Stylers
========================= */
/* Scrapbook Base */
html.lt-theme-red .scrapbook-letter {
display: inline-block;
position: relative;
padding: 0 2px;
}
/* Black Box Letters */
html.lt-theme-red .scrapbook-letter.box-black {
background: #000;
color: #fff !important;
padding: 2px 4px;
}
/* White Box Letters (Rare Accent) */
html.lt-theme-red .scrapbook-letter.box-white {
background: #fff;
color: #000 !important;
padding: 2px 4px;
}
/* Slight rough edge feeling */
html.lt-theme-red .scrapbook-letter.box-black,
html.lt-theme-red .scrapbook-letter.box-white {
transform-origin: center;
}
.scrap-layer {
display: none;
}
.scrap-original {
display: inline;
}
/* Mementos Infobox Styling */
/* Main black body */
html.lt-theme-red .lt-infobox {
background: #000; /* main meat is black */
border: 4px solid #ff0000; /* bright Persona red */
box-shadow: none; /* remove any inherited shadows */
filter: drop-shadow(10px 10px 0 #a00000);
}
/* Tilt the infobox */
html.lt-theme-red .lt-infobox {
transform: rotate(2.5deg);
z-index: 0;
}
/*html.lt-theme-red .lt-infobox > * {*/
/* transform: rotate(-1deg);*/
/*}*/
/* Header Strip */
html.lt-theme-red .lt-infobox-title {
background: #c10000;
color: white;
text-transform: uppercase;
font-family: 'Anton', sans-serif; /* or scrapbook engine handles it */
padding: 10px;
}
/* Image Border */
html.lt-theme-red .lt-infobox-image {
padding: 6px;
background:
repeating-linear-gradient(
45deg,
#0f0f0f,
#0f0f0f 10px,
#292929 10px,
#292929 20px
);
}
html.lt-theme-red .lt-infobox-image img {
width: 92%;
margin: 0 auto;
display: block;
border: 4px solid #ffffff; /* white frame */
}
/* White trapezoid Label thingies */
html.lt-theme-red .lt-infobox-label {
position: relative;
font-family: 'Courier New', monospace;
color: black;
z-index: 1;
}
html.lt-theme-red .lt-infobox-label::before {
content: "";
position: absolute;
inset: -2px -6px;
background: white;
transform: skewX(-15deg);
z-index: -1;
}
/* Dotted Line Info Borders */
html.lt-theme-red .lt-infobox-row {
border-bottom: 2px dotted #888;
}
/* Push infobox values over */
html.lt-theme-red .lt-infobox-value {
margin-left: 12px;
font-family: 'Courier New', monospace;
color: white;
}
/* Lock infobox fonts in Mementos theme */
html.lt-theme-red .lt-infobox-label,
html.lt-theme-red .lt-infobox-value {
font-family: 'Courier New', monospace !important;
}
/* Body Font */
html.lt-theme-red body {
font-family: 'Barlow', sans-serif;
color: white;
}
/* Mementos Content Card – Base */
html.lt-theme-red .mw-parser-output {
background: #000;
border: 4px solid #ffffff;
padding: 40px;
position: relative;
filter: drop-shadow(16px 16px 0 #c10000);
}
.metaverse-wobble-layer {
pointer-events: none;
}
/* Header Rectangles */
/* Make scrapbook headline layer positioning context */
html.lt-theme-red h2 .scrap-layer {
position: relative;
display: inline-block;
z-index: 2;
}
/* Red slab behind scrapbook header */
html.lt-theme-red h2 .scrap-layer::before {
content: "";
position: absolute;
top: -8px;
bottom: -8px;
left: -14px;
right: -14px;
background: #c10000;
z-index: -1;
transform: translate(10px, 4px) rotate(1deg);
}
html.lt-theme-red h3 .scrap-layer {
position: relative;
display: inline-block;
z-index: 2;
}
/* Red slab behind scrapbook header */
html.lt-theme-red h3 .scrap-layer::before {
content: "";
position: absolute;
top: -8px;
bottom: -8px;
left: -14px;
right: -14px;
background: #c10000;
z-index: -1;
transform: translate(10px, 4px) rotate(1deg);
}
/* Header Lines */
html.lt-theme-red h2 {
border-bottom: 2px solid #ff0000;
padding-bottom: 6px;
}
/* ===============================
Mementos Background — Final
=============================== */
/* ===============================
Mementos Background — Seamless
=============================== */
html.lt-theme-red body {
background-color: #0b0000;
overflow-x: hidden;
}
html.lt-theme-red body::before {
content: "";
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
pointer-events: none;
z-index: -1;
background:
repeating-linear-gradient(
-30deg,
#000 0px,
#000 90px,
#5c0000 90px,
#5c0000 180px
);
animation: metaverse-drift 60s linear infinite;
}
@keyframes metaverse-drift {
from { transform: translate(0px, 0px); }
to { transform: translate(400px, 400px); }
}
/* Mementos Footer */
html.lt-theme-red .mw-footer.citizen-footer {
background:
repeating-linear-gradient(
45deg,
#1a1a1a 0px,
#1a1a1a 12px,
#2a2a2a 12px,
#2a2a2a 24px
);
border-top: 4px solid #c10000;
}
html.lt-theme-red .mw-footer {
font-family: 'Barlow', sans-serif;
color: #ffffff;
}
html.lt-theme-red #footer-places a {
color: #ffffff;
transition: color 0.2s ease;
}
html.lt-theme-red #footer-places a:hover {
color: #bf0000;
}
/* RED */
/* ===============================
Mementos — Accent Override
=============================== */
html.lt-theme-red {
--color-primary: #a00000;
--color-primary--hover: #ff0000;
--color-progressive: #a00000;
--color-progressive--hover: #ff0000;
--color-accent: #a00000;
}
html.lt-theme-red a {
color: #a00000;
}
html.lt-theme-red a:hover {
color: #ff0000;
}
html.lt-theme-red a:visited {
color: #730000;
}
html.lt-theme-red .citizen-header,
html.lt-theme-red .citizen-header a,
html.lt-theme-red .citizen-header svg {
color: #ffffff !important;
fill: #ffffff !important;
}
/* Primary buttons (Edit) */
html.lt-theme-red .cdx-button--action-primary {
background-color: #a00000;
border-color: #a00000;
color: #ffffff;
}
html.lt-theme-red .cdx-button--action-primary:hover {
background-color: #ff0000;
border-color: #ff0000;
}
html.lt-theme-red .citizen-menu a {
color: #ffffff;
}
html.lt-theme-red .citizen-menu a:hover {
color: #ff0000;
}
html.lt-theme-red ::selection {
background: #a00000;
color: #ffffff;
}
html.lt-theme-red .page-info__label,
html.lt-theme-red .page-info__text {
color: #ffffff !important;
}
html.lt-theme-red #citizen-sidebar-lastmod a {
color: #ffffff !important;
}
html.lt-theme-red #citizen-sidebar-lastmod a:hover {
color: #ff0000 !important;
}
/* Share + quiet buttons */
html.lt-theme-red .citizen-button,
html.lt-theme-red .cdx-button--weight-quiet {
color: #ffffff !important;
border-color: #5c0000 !important;
}
html.lt-theme-red .citizen-button:hover,
html.lt-theme-red .cdx-button--weight-quiet:hover {
color: #ff0000 !important;
}
/* TOC heading */
html.lt-theme-red .citizen-menu__heading {
color: #ffffff !important;
}
/* TOC links */
html.lt-theme-red .citizen-toc-link {
color: #ffffff !important;
}
html.lt-theme-red .citizen-toc-link:hover {
color: #ff0000 !important;
}
/* Selected section */
html.lt-theme-red .citizen-toc-list-item.is-active > .citizen-toc-link {
color: #ff0000 !important;
}
html.lt-theme-red #siteSub {
color: #cccccc !important;
}
html.lt-theme-red .citizen-header__logo .citizen-ui-icon-home {
display: none;
}
html.lt-theme-red .mw-page-title-main{
font-size: 50px;
background: #a00000;
padding: 6px 12px;
display: inline-block;
transform: skewX(-8deg);
}
/* Sticky Header — Gray Stripe */
html.lt-theme-red .citizen-sticky-header-background {
background:
repeating-linear-gradient(
135deg,
#2a2a2a 0px,
#2a2a2a 12px,
#1a1a1a 12px,
#1a1a1a 24px
) !important;
}
html.lt-theme-red .citizen-sticky-header {
border-bottom: 2px solid #ffffff;
}
/* Header */
html.lt-theme-red .citizen-header {
background: #000000 !important;
border-right: 3px solid #a00000;
border-top: 3px solid #a00000;
}
/* Sidebar */
html.lt-theme-red .citizen-drawer__card {
background: #0a0a0a !important;
border-left: 4px solid #a00000;
}
/* Menu Card */
html.lt-theme-red .citizen-menu__card {
background: #000000 !important;
border: 2px solid #ffffff !important;
box-shadow: 6px 6px 0px #a00000 !important;
}
/* Wordmark red backing */
html.lt-theme-red .mw-logo-wordmark {
background: #a00000;
padding: 6px 12px;
display: inline-block;
transform: skewX(-8deg);
}
html.lt-theme-red .mw-logo-wordmark span {
transform: skewX(8deg);
display: inline-block;
}
/* Remove sticky header hover background + ring */
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet:hover,
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet:active,
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet:focus,
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet:focus-visible {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* ===============================
Mementos — Command Palette
=============================== */
html.lt-theme-red .citizen-command-palette {
background: #000000 !important;
color: #ffffff !important;
border: 2px solid #ffffff !important;
box-shadow: 12px 12px 0 #a00000 !important;
/* Kill Codex blue tokens */
--color-progressive: #a00000;
--color-progressive--hover: #ff0000;
--color-base: #ffffff;
--color-base--hover: #ff0000;
--color-subtle: #5c0000;
--color-subtle--hover: #ff0000;
}
html.lt-theme-red .citizen-command-palette .cdx-text-input {
background: #0a0a0a !important;
border: 2px solid #a00000 !important;
}
html.lt-theme-red .citizen-command-palette .cdx-text-input__input {
color: #ffffff !important;
}
html.lt-theme-red .citizen-command-palette .cdx-text-input__input::placeholder {
color: #888888 !important;
}
html.lt-theme-red .citizen-command-palette .cdx-text-input:focus-within {
border-color: #ff0000 !important;
box-shadow: 0 0 0 2px #ff0000 !important;
}
html.lt-theme-red .citizen-command-palette-list-item {
background: transparent !important;
color: #ffffff !important;
}
html.lt-theme-red .citizen-command-palette-list-item:hover,
html.lt-theme-red .citizen-command-palette-list-item[aria-selected="true"] {
background: #a00000 !important;
color: #ffffff !important;
}
html.lt-theme-red .citizen-command-palette .cdx-button--weight-quiet {
background: transparent !important;
color: #ffffff !important;
box-shadow: none !important;
}
html.lt-theme-red .citizen-command-palette .cdx-button--weight-quiet:hover {
color: #ff0000 !important;
}
/* ===============================
Mementos — Command Palette Clean Hover
=============================== */
/* Remove all gradient + shading */
html.lt-theme-red .citizen-command-palette-list-item,
html.lt-theme-red .citizen-command-palette-list-item:hover,
html.lt-theme-red .citizen-command-palette-list-item[aria-selected="true"] {
background-image: none !important;
box-shadow: none !important;
}
/* Flat red hover */
html.lt-theme-red .citizen-command-palette-list-item:hover,
html.lt-theme-red .citizen-command-palette-list-item[aria-selected="true"] {
background-color: #c10000 !important;
color: #ffffff !important;
}
/* Remove subtle Codex hover token influence */
html.lt-theme-red .citizen-command-palette {
--background-color-interactive-subtle: transparent !important;
--background-color-interactive-subtle--hover: #c10000 !important;
}
/* ===============================
Mementos — Command Palette Text Fix
=============================== */
/* Descriptions like "Create or edit page" */
html.lt-theme-red .citizen-command-palette-list-item__text__description,
html.lt-theme-red .citizen-command-palette-list-item__text__description bdi {
color: #ffffff !important;
}
/* Footer note: "Type : to search for namespace" */
html.lt-theme-red .citizen-command-palette__footer-note {
color: #ffffff !important;
}
/* Metadata text like "Action" */
html.lt-theme-red .citizen-command-palette-list-item__metadata__item {
color: #ffffff !important;
}
/* ======================================== END MEMENTOS THEME ==================================================== */
/* ======================================== BEGIN JUSTICE THEME ================================================ */
/* Typography global setting */
html.lt-theme-blue,
html.lt-theme-blue body {
font-family: Georgia, "Times New Roman", Times, serif !important;
}
/* Everything except the Ace Editor (that would be bad) */
html.lt-theme-blue body,
html.lt-theme-blue .mw-parser-output,
html.lt-theme-blue .citizen-content,
html.lt-theme-blue .mw-page-title-main,
html.lt-theme-blue h1,
html.lt-theme-blue h2,
html.lt-theme-blue h3,
html.lt-theme-blue h4,
html.lt-theme-blue h5,
html.lt-theme-blue h6 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #ffffff;
}
html.lt-theme-blue .mw-page-title-main {
font-size: 50px;
}
html.lt-theme-blue .lt-infobox {
position: relative;
background: #ffffff;
border: 6px solid #2f6fb3; /* thick blue */
outline: 2px solid #ffffff; /* thin white outer */
padding: 0;
}
html.lt-theme-blue .lt-infobox::before,
html.lt-theme-blue .lt-infobox::after,
html.lt-theme-blue .lt-infobox .lt-infobox-section::before,
html.lt-theme-blue .lt-infobox .lt-infobox-section::after {
content: "";
position: absolute;
width: 26px;
height: 26px;
border: 6px solid #2f6fb3;
z-index: 10;
}
/* Top Left */
html.lt-theme-blue .lt-infobox::before {
top: -18px;
left: -18px;
border-right: none;
border-bottom: none;
}
/* Top Right */
html.lt-theme-blue .lt-infobox::after {
top: -18px;
right: -18px;
border-left: none;
border-bottom: none;
}
/* Bottom Left */
html.lt-theme-blue .lt-infobox .lt-infobox-section::before {
bottom: -18px;
left: -18px;
border-right: none;
border-top: none;
}
/* Bottom Right */
html.lt-theme-blue .lt-infobox .lt-infobox-section::after {
bottom: -18px;
right: -18px;
border-left: none;
border-top: none;
}
html.lt-theme-blue .lt-infobox-row {
padding: 5px 5px;
border-bottom: 2px dashed #000;
}
html.lt-theme-blue .lt-infobox-row:last-child {
border-bottom: none;
}
html.lt-theme-blue .lt-infobox-label {
font-weight: bold;
color: #1d3557;
}
html.lt-theme-blue .lt-infobox-value {
color: #000000;
}
html.lt-theme-blue .lt-infobox-title {
padding: 6px 0; /* reduced vertical padding */
font-size: 35px;
border-bottom: 3px solid #2f6fb3;
text-align: center;
color: #000;
}
html.lt-theme-blue .lt-infobox-title span {
position: relative;
display: inline-block;
padding: 0 14px;
z-index: 1;
}
html.lt-theme-blue .lt-infobox-title span::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 22%; /* controls top gap */
bottom: 22%; /* controls bottom gap */
background: #f2c230;
z-index: -1;
}
/* Blue image panel */
html.lt-theme-blue .lt-infobox-image {
background: #2f6fb3;
padding: 3px;
text-align: center;
}
/* Scale image down slightly */
html.lt-theme-blue .lt-infobox-image img {
max-width: 90%;
height: auto;
display: block;
margin: 0 auto;
}
html.lt-theme-blue .mw-parser-output {
background: rgba(0, 20, 50, 0.85);
backdrop-filter: blur(2px);
border: 1px solid #ffffff; /* razor thin white border */
padding: 36px 40px;
position: relative;
}
html.lt-theme-blue .mw-parser-output::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index:0;
background-image:
linear-gradient(45deg,
rgba(255,255,255,0.04) 25%,
transparent 25%,
transparent 75%,
rgba(255,255,255,0.04) 75%
),
linear-gradient(45deg,
rgba(255,255,255,0.04) 25%,
transparent 25%,
transparent 75%,
rgba(255,255,255,0.04) 75%
);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
opacity: 0.25;
}
/* Header Hexagons */
/* Header Hexagons */
/* Shrink wrapper to content */
html.lt-theme-blue .mw-parser-output .mw-heading > h2 {
display: inline-block;
position: relative;
padding: 5px 36px;
margin: 30px 0 20px 0;
color: #ffffff;
font-weight: normal;
border: none;
z-index: 1;
}
/* Blue hex background */
html.lt-theme-blue .mw-parser-output .mw-heading > h2::before {
content: "";
position: absolute;
inset: 0;
background: #4a8fb6;
z-index: -1;
clip-path: polygon(
8% 0%,
92% 0%,
100% 50%,
92% 100%,
8% 100%,
0% 50%
);
}
/* White border layer */
html.lt-theme-blue .mw-parser-output .mw-heading > h2::after {
content: "";
position: absolute;
inset: -2px;
background: #ffffff;
z-index: -2;
clip-path: polygon(
8% 0%,
92% 0%,
100% 50%,
92% 100%,
8% 100%,
0% 50%
);
}
html.lt-theme-blue .mw-parser-output .mw-heading2 {
display: flex;
align-items: center; /* vertical center */
gap: 20px; /* space between hex and line */
margin: 40px 0 25px 0;
}
/* The actual H2 (your hex lives here) */
html.lt-theme-blue .mw-parser-output .mw-heading2 > h2 {
position: relative;
margin: 0;
z-index: 2;
}
/* The white line — built as a pseudo flex item */
html.lt-theme-blue .mw-parser-output .mw-heading2::after {
content: "";
flex: 1; /* fills remaining space */
height: 2px;
background: #ffffff;
}
/* H2 wrapper becomes flex */
html.lt-theme-blue .mw-parser-output .mw-heading2 {
display: flex;
align-items: center;
gap: 20px;
}
/* LOCK the hex width */
html.lt-theme-blue .mw-parser-output .mw-heading2 > h2 {
flex: 0 0 auto; /* do not stretch */
margin: 0; /* override earlier margin */
}
/* The white horizontal line */
html.lt-theme-blue .mw-parser-output .mw-heading2::after {
content: "";
flex: 1;
height: 2px;
background: #ffffff;
}
/* Courtroom BG */
html.lt-theme-blue body {
position: relative;
background-color: #0b1a2b; /* fallback navy */
}
html.lt-theme-blue body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background-image: url("/images/c/cc/Screenshot-court.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(6px);
transform: scale(1.05); /* prevents blur edge clipping */
}
/* Header */
html.lt-theme-blue .citizen-page-header {
background: linear-gradient(
to bottom,
#7a5029 0%,
#6b4524 20%,
#5a3b1e 60%,
#3f2613 100%
);
border-bottom: 4px solid #d4af37; /* gold accent */
border-top: 4px solid #d4af37; /* gold accent */
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* Make all header text/icons white */
html.lt-theme-blue .citizen-page-header,
html.lt-theme-blue .citizen-page-header a,
html.lt-theme-blue .citizen-page-header svg,
html.lt-theme-blue .citizen-page-header span {
color: #ffffff !important;
fill: #ffffff !important;
}
/* Sticky Header */
html.lt-theme-blue .citizen-sticky-header {
background: linear-gradient(
to bottom,
#7a5029 0%,
#6b4524 20%,
#5a3b1e 60%,
#3f2613 100%
);
border-bottom: 4px solid #d4af37; /* gold accent */
}
/* Remove any inherited weird borders */
html.lt-theme-blue .citizen-sticky-header::after {
display: none;
}
/* Page Title */
html.lt-theme-blue .mw-page-title-main {
/* Blue vertical gradient simulated with base color */
color: #2f8fe5;
background: linear-gradient(
to bottom,
#5ec0ff 0%,
#2f8fe5 50%,
#0d4ea6 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* First layer = white stroke */
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff,
/* Second layer = black outer stroke */
-3px -3px 0 #000,
3px -3px 0 #000,
-3px 3px 0 #000,
3px 3px 0 #000,
0 4px 6px rgba(0,0,0,0.4);
}