MediaWiki:Common.css: Difference between revisions

Latest revision as of 11:56, 9 September 2026

/* Games Day campaign organization — scoped, no JavaScript required. */
.gd-home,.gd-article { --gd-ink:#172c3a; --gd-muted:#566673; --gd-accent:#8a552c; --gd-line:#d8dfe3; color:var(--gd-ink); }
.gd-home a,.gd-article a,.gd-context a { text-decoration:none; }
.gd-home a:hover,.gd-article a:hover,.gd-context a:hover { text-decoration:underline; }
.gd-kicker { color:#8a552c; font:700 .76rem/1.5 sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.gd-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,420px); align-items:center; gap:clamp(2rem,4vw,4rem); padding:1.5rem 0 2rem; margin-bottom:1rem; border-bottom:1px solid #d8dfe3; }
.gd-hero-copy { min-width:0; }
.gd-hero h1 { font:normal 2.7rem/1.12 Georgia,serif; border:0; margin:.4rem 0 1rem; }
.gd-hero p { font-size:1.08rem; line-height:1.65; max-width:65ch; }
.gd-hero-art { width:100%; max-width:420px; justify-self:end; }
.gd-hero-art img { display:block; width:100%; max-width:100%; height:auto; }
.gd-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin:1.3rem 0 2rem; clear:both; }
.gd-card { position:relative; display:flex; flex-direction:column; border:1px solid #d8dfe3; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 2px 8px #172c3a0a; cursor:pointer; }
.gd-card-art { height:155px; overflow:hidden; background:#e9edef; }
.gd-card-art img { width:100%; height:155px; object-fit:cover; display:block; }
.gd-card-art a,.gd-card-art span { display:block; }
.gd-card-copy { display:flex; flex:1; flex-direction:column; padding:1.1rem 1.2rem 1.2rem; }
.gd-card-meta { display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 .65rem; }
.gd-badge { display:inline-flex; align-items:center; padding:.2rem .5rem; border:1px solid #b98a4f; border-radius:999px; background:#f4e4c6; color:#68451f; font:700 .68rem/1.35 sans-serif; letter-spacing:.025em; }
.gd-badge-secondary { border-color:#a9b8c1; background:#edf2f4; color:#405b6a; }
.gd-card h2 { font:normal 1.45rem/1.25 Georgia,serif; border:0; margin:0 0 .6rem; padding:0; }
.gd-card h2 a::after { content:""; position:absolute; inset:0; z-index:2; }
.gd-card p { margin:.5rem 0 1rem; color:#566673; font-size:.93rem; line-height:1.5; }
.gd-card .gd-enter { margin-top:auto; color:#765020; font-weight:700; font-size:.9rem; }
.gd-card:focus-within { outline:3px solid #315d7a; outline-offset:3px; }
#p-pagemisc.gd-collapsible .gd-portlet-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
#p-pagemisc.gd-collapsible .gd-portlet-toggle::after { content:"▾"; margin-left:.6rem; color:#657079; font-size:.8em; transition:transform .16s ease; }
#p-pagemisc.gd-collapsible .gd-portlet-toggle[aria-expanded="false"]::after { transform:rotate(-90deg); }
#p-pagemisc.gd-collapsible .gd-portlet-toggle:focus-visible { outline:2px solid #315d7a; outline-offset:4px; border-radius:2px; }
#p-pagemisc.gd-collapsible .mw-portlet-body[hidden] { display:none; }
.gd-context { margin:.5rem 0 1.3rem; border-bottom:1px solid #d8dfe3; padding-bottom:1rem; }
.gd-breadcrumb { font-size:.84rem; line-height:1.7; color:#667683; margin-bottom:.8rem; }
.gd-breadcrumb span { margin:0 .45rem; color:#8b969e; }
.gd-context-title { font:700 .78rem/1.5 sans-serif; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.55rem; color:#566673; }
.gd-campaign-menu { display:flex; flex-wrap:wrap; gap:.4rem; }
.gd-campaign-menu a { display:inline-block; padding:.45rem .7rem; background:#f1f4f5; border-radius:4px; color:#264f67; font-size:.9rem; }
.gd-campaign-menu a:hover { background:#e4edf2; }
.gd-article { line-height:1.7; font-size:1rem; }
.gd-article h1.gd-page-title { font:normal 2.35rem/1.2 Georgia,serif; border:0; margin:.6rem 0 1.1rem; overflow-wrap:anywhere; }
.gd-article h2 { margin-top:1.7rem; font-size:1.55rem; }
.gd-article h3 { margin-top:1.3rem; }
.gd-article p { margin:.7rem 0 1rem; }
.gd-article img { max-width:100%; height:auto; }
.gd-article .thumb { max-width:100%; }
.gd-article .thumbinner { max-width:100%; box-sizing:border-box; }
.gd-article .center { max-width:100%; }
.gd-article pre { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; box-sizing:border-box; }
.gd-article .wikitable { max-width:100%; }
.gd-facts { padding:.8rem 1rem; background:#f3f6f7; border-left:3px solid #8a552c; margin:0 0 1.4rem; font-size:.94rem; }
.gd-facts p { margin:.2rem 0; }
.gd-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.2rem 0; }
.gd-panel { border:1px solid #d8dfe3; border-radius:6px; padding:1.1rem 1.3rem; background:#fff; }
.gd-panel h2,.gd-panel h3 { border:0; margin:0 0 .7rem; padding:0; }
.gd-panel ul { margin:.3rem 0 .3rem 1.2rem; }
.gd-panel li { margin:.35rem 0; }
.gd-section-links { columns:2; column-gap:2rem; }
.gd-section-links li { break-inside:avoid; margin:.45rem 0; }
.gd-article-footer { clear:both; border-top:1px solid #d8dfe3; margin-top:2rem; padding:1rem 0; font-size:.9rem; }
.gd-sequence { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; border:1px solid #d8dfe3; border-radius:5px; padding:.8rem 1rem; margin:1.5rem 0; font-size:.9rem; }
.gd-infobox { float:right; clear:right; width:285px; max-width:100%; border:1px solid #d8dfe3; border-radius:5px; background:#f7f8f9; margin:0 0 1.2rem 1.4rem; padding:.7rem; font-size:.9rem; }
.gd-infobox table { width:100%; border-collapse:collapse; }
.gd-infobox caption { font:700 1.1rem/1.4 Georgia,serif; padding:.3rem 0 .7rem; }
.gd-infobox th,.gd-infobox td { padding:.3rem .4rem; border-bottom:1px solid #e2e7ea; vertical-align:top; text-align:left; }
.gd-infobox th { width:36%; color:#566673; }
.gd-infobox tr:has(td:empty) { display:none; }
.gd-note { background:#f8f5ec; border-left:3px solid #b49a61; padding:.8rem 1rem; margin:1rem 0; }
#mw-content-text .gd-home .mw-heading,#mw-content-text .gd-panel .mw-heading { border:0; margin:0; padding:0; }
#mw-content-text .gd-hero h1 { font:normal 2.7rem/1.12 Georgia,serif; }
#mw-content-text .gd-card h2 { font:normal 1.45rem/1.25 Georgia,serif; }
#mw-content-text .gd-panel h2 { font:normal 1.4rem/1.3 Georgia,serif; }
@supports selector(body:has(.gd-context)) {
 body:has(.gd-context) #firstHeading,body:has(.gd-home) #firstHeading { display:none; }
 [id^="p-gd-"] { display:none; }
 body:has(.gd-context-archimedes) #p-gd-archimedes,
 body:has(.gd-context-star-wars) #p-gd-star-wars,
 body:has(.gd-context-vyrras-nest) #p-gd-vyrras-nest,
 body:has(.gd-context-lower-decks) #p-gd-lower-decks,
 body:has(.gd-context-age-of-ashes) #p-gd-age-of-ashes,
 body:has(.gd-context-polycism) #p-gd-polycism,
 body:has(.gd-context-lord-of-the-rings) #p-gd-lord-of-the-rings,
 body:has(.gd-context-chaos-beneath-the-stones) #p-gd-chaos-beneath-the-stones,
 body:has(.gd-context-those-old-scientists) #p-gd-those-old-scientists { display:block; }
}
@media(max-width:1100px) {
 .gd-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .gd-hero { grid-template-columns:minmax(0,1fr) minmax(260px,360px); gap:2rem; }
}
@media(max-width:650px) {
 .gd-grid,.gd-catalog { grid-template-columns:1fr; }
 .gd-hero { grid-template-columns:1fr; gap:1.1rem; padding:.7rem 0 1.25rem; }
 .gd-hero-art { display:block; width:min(100%,360px); justify-self:center; }
 #mw-content-text .gd-hero h1 { font-size:2rem; }
 .gd-hero h1 { font-size:2rem; }
 .gd-article h1.gd-page-title { font-size:1.9rem; }
 .gd-section-links { columns:1; }
 .gd-infobox { float:none; margin:1rem 0; width:auto; }
 .gd-campaign-menu a { padding:.55rem .65rem; }
 .gd-article .thumb { float:none; margin:1rem auto; }
}

/* Games Day campaign archive theme — global Timeless skin layer. */
:root {
 --gd-shell:#111824;
 --gd-shell-2:#1c2735;
 --gd-paper:#f7f0df;
 --gd-paper-deep:#eadcc2;
 --gd-ink:#25313a;
 --gd-muted:#657079;
 --gd-brass:#a76f32;
 --gd-brass-light:#d1a660;
 --gd-blue:#315d7a;
 --gd-rule:#cfbd9e;
}

body.skin-timeless {
 color:var(--gd-ink);
 background-color:var(--gd-shell);
 background-image:linear-gradient(180deg,var(--gd-shell-2),var(--gd-shell));
}

body.skin-timeless #mw-header-container {
 color:#f7eedb;
 background:rgba(13,20,30,.96);
 border-bottom:3px solid var(--gd-brass);
 box-shadow:0 3px 14px rgba(0,0,0,.38);
}
body.skin-timeless #mw-header { min-height:3.7rem; }
body.skin-timeless #p-banner {
 color:#fff4db;
 font-family:Georgia,"Times New Roman",serif;
 font-size:1.55rem;
 font-variant:small-caps;
 letter-spacing:.055em;
 text-shadow:0 1px 0 #000;
}
body.skin-timeless #p-banner:hover { color:var(--gd-brass-light); text-decoration:none; }
body.skin-timeless #user-tools,
body.skin-timeless #user-tools a { color:#f2e4ca; }
body.skin-timeless #user-tools h2,
body.skin-timeless #user-tools h2 span { color:#f2e4ca; }
body.skin-timeless #simpleSearch {
 background:#f7f0e4;
 border:1px solid #b99867;
 border-radius:4px;
 box-shadow:inset 0 1px 3px rgba(45,32,18,.18);
}
body.skin-timeless #searchInput { color:#28333c; }

body.skin-timeless #mw-content-container { background:transparent; }
body.skin-timeless #mw-content {
 background-color:var(--gd-paper);
 border:1px solid #c8b694;
 border-radius:7px;
 box-shadow:0 4px 14px rgba(0,0,0,.24);
}
body.skin-timeless #mw-content-text,
body.skin-timeless .mw-body { color:var(--gd-ink); }
body.skin-timeless .mw-body h1,
body.skin-timeless .mw-body h2,
body.skin-timeless .mw-body h3,
body.skin-timeless .mw-body h4 {
 color:#243744;
 font-family:Georgia,"Times New Roman",serif;
}
body.skin-timeless .mw-body h1,
body.skin-timeless .mw-body h2 { border-color:var(--gd-rule); }
body.skin-timeless .mw-body a { color:var(--gd-blue); }
body.skin-timeless .mw-body a:visited { color:#624f75; }
body.skin-timeless .mw-body a:hover { color:#8a4f25; }

body.skin-timeless #mw-site-navigation .timeless-logo {
 padding:.55rem;
 background:#efe2c9;
 border:1px solid #b78d50;
 border-radius:7px;
 box-shadow:0 2px 8px rgba(0,0,0,.25);
}
body.skin-timeless #mw-site-navigation .timeless-logo img { border-radius:3px; }
body.skin-timeless .sidebar-chunk {
 color:#2b3942;
 background:linear-gradient(160deg,#fbf4e6,#e8d8bc);
 border:1px solid #bfa77f;
 border-radius:6px;
 box-shadow:0 2px 7px rgba(0,0,0,.2);
}
body.skin-timeless .sidebar-chunk h2 {
 color:#354652;
 font-family:Georgia,"Times New Roman",serif;
 letter-spacing:.025em;
 border-color:#bda57e;
}
body.skin-timeless .sidebar-chunk a { color:#315d7a; }
body.skin-timeless .sidebar-chunk a:hover { color:#8a4f25; }
body.skin-timeless #site-tools { display:none; }
body.skin-timeless #mw-page-header-links { border-color:var(--gd-rule); }
body.skin-timeless #mw-page-header-links a { color:#365d78; }
body.skin-timeless #mw-footer-container {
 color:#cabda8;
 background:transparent;
}
body.skin-timeless #mw-footer-container a { color:#e2c38d; }

/* Campaign components inherit the archive materials. */
.gd-home,.gd-article {
 --gd-ink:#25313a;
 --gd-muted:#657079;
 --gd-accent:#9a612c;
 --gd-line:#cfbd9e;
}
.gd-kicker { color:#895727; }
.gd-hero { border-color:var(--gd-rule); }
.gd-card {
 background:linear-gradient(160deg,#fffaf0,#f0e4ce);
 border-color:#c5ad83;
 border-radius:7px;
 box-shadow:0 2px 6px rgba(62,43,23,.12);
 transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.gd-card:hover {
 transform:translateY(-2px);
 border-color:#a9783c;
 box-shadow:0 6px 14px rgba(41,30,18,.18);
}
.gd-card-art { background:#283542; border-bottom:2px solid var(--gd-brass); }
.gd-card-copy { background:linear-gradient(180deg,rgba(255,255,255,.22),transparent); }
.gd-card p { color:#626b70; }
.gd-card .gd-enter a { color:#765020; }
.gd-campaign-menu a {
 color:#31546b;
 background:#eadcc2;
 border:1px solid #cfbd9e;
}
.gd-campaign-menu a:hover { color:#70461e; background:#f4e8d2; }
.gd-facts,.gd-panel,.gd-infobox {
 background:rgba(255,250,240,.72);
 border-color:#c9b48f;
 box-shadow:0 2px 8px rgba(68,46,23,.08);
}
.gd-facts { border-left-color:var(--gd-brass); }
.gd-note { background:#efe2c8; border-left-color:#a9783c; }
.gd-sequence { background:rgba(255,250,240,.5); border-color:#c9b48f; }
.gd-context,.gd-article-footer { border-color:var(--gd-rule); }

body.skin-timeless table.wikitable {
 color:var(--gd-ink);
 background:#fbf5e8;
 border-color:#bda780;
}
body.skin-timeless table.wikitable > tr > th,
body.skin-timeless table.wikitable > * > tr > th { background:#e5d4b5; border-color:#bda780; }
body.skin-timeless table.wikitable > tr > td,
body.skin-timeless table.wikitable > * > tr > td { border-color:#cbb998; }

@media(max-width:850px) {
 body.skin-timeless #mw-content { border-radius:0; box-shadow:none; }
 body.skin-timeless #mw-site-navigation .timeless-logo { background:#efe2c9; }
}

@media print {
 body.skin-timeless,
 body.skin-timeless #mw-content { background:#fff; color:#000; box-shadow:none; }
}