MediaWiki:Common.css

From Games Day
Revision as of 01:07, 6 September 2026 by EvilGM (talk | contribs) (Apply the Games Day campaign archive theme)

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.
/* 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:flex; align-items:center; gap:2rem; padding:1.5rem 0 2rem; margin-bottom:1rem; border-bottom:1px solid #d8dfe3; }
.gd-hero-copy { flex:1; 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 { flex:0 0 180px; }
.gd-hero-art img { 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 { border:1px solid #d8dfe3; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 2px 8px #172c3a0a; }
.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 { padding:1.1rem 1.2rem 1.2rem; }
.gd-card h2 { font:normal 1.45rem/1.25 Georgia,serif; border:0; margin:0 0 .6rem; padding:0; }
.gd-card p { margin:.5rem 0 1rem; color:#566673; font-size:.93rem; line-height:1.5; }
.gd-card .gd-enter a { font-weight:700; font-size:.9rem; }
.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)); } }
@media(max-width:650px) {
 .gd-grid,.gd-catalog { grid-template-columns:1fr; }
 .gd-hero { gap:1rem; align-items:flex-start; }
 .gd-hero { display:block; padding:.7rem 0 1rem; }
 .gd-hero-art { display:none; }
 #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:
  radial-gradient(circle at 18% 0,#2a3a4e 0,transparent 38rem),
  linear-gradient(135deg,rgba(255,255,255,.018) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.018) 75%),
  linear-gradient(180deg,var(--gd-shell-2),var(--gd-shell));
 background-size:auto,22px 22px,auto;
}

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 #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);
 background-image:
  radial-gradient(circle at 15% 10%,rgba(255,255,255,.72),transparent 32rem),
  repeating-linear-gradient(0deg,rgba(91,64,34,.018) 0,rgba(91,64,34,.018) 1px,transparent 1px,transparent 4px);
 border:1px solid #c8b694;
 border-radius:7px;
 box-shadow:0 8px 30px rgba(0,0,0,.3);
}
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 5px 18px rgba(0,0,0,.35);
}
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 5px 16px rgba(0,0,0,.27);
}
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 #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 4px 12px rgba(62,43,23,.14);
 transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.gd-card:hover {
 transform:translateY(-2px);
 border-color:#a9783c;
 box-shadow:0 8px 20px rgba(41,30,18,.2);
}
.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; }
}