MediaWiki:Common.css: Difference between revisions

Latest revision as of 20:56, 23 July 2026

:root {
  --aoe-void:#070504;
  --aoe-ink:#0e0906;
  --aoe-panel:#17100b;
  --aoe-panel-2:#21140c;
  --aoe-panel-3:#2a190e;
  --aoe-ember:#ff6b1a;
  --aoe-ember-2:#ff9348;
  --aoe-gold:#f5bd55;
  --aoe-cream:#fff0d1;
  --aoe-text:#eadbc5;
  --aoe-muted:#b8a58d;
  --aoe-green:#67d59a;
  --aoe-red:#ff7c72;
  --aoe-blue:#72b7ff;
  --aoe-line:rgba(255,139,55,.26);
  --aoe-line-strong:rgba(246,189,85,.48);
  --aoe-shadow:0 18px 50px rgba(0,0,0,.38);
}

html,body,.mw-page-container { background:var(--aoe-void); color:var(--aoe-text); }
body { background-image:radial-gradient(circle at 50% -20%,rgba(255,107,26,.11),transparent 42%); }
a, a:visited { color:var(--aoe-ember-2); }
a:hover { color:var(--aoe-gold); }
.mw-parser-output { color:var(--aoe-text); }
.vector-menu-portal .vector-menu-content-list li a { color:var(--aoe-cream); }
.vector-menu-portal .vector-menu-content-list li a:hover { color:var(--aoe-gold); }
.vector-menu-portal .vector-menu-content-list li.selected > a,
.vector-menu-portal .vector-menu-content-list li a[aria-current="page"] { color:var(--aoe-green)!important; font-weight:800; border-left:3px solid var(--aoe-green); padding-left:.55rem; }
.vector-menu-portal h3 { color:var(--aoe-gold); }
.vector-header-container,.vector-sticky-header,.mw-header {
  background:rgba(8,6,5,.97); border-color:var(--aoe-line); color:var(--aoe-text);
  box-shadow:0 1px 18px rgba(0,0,0,.45);
}
.mw-page-container { border-color:var(--aoe-line); max-width:1720px; }
.mw-body {
  background:linear-gradient(155deg,rgba(31,18,11,.97),rgba(10,7,5,.99) 58%);
  border:1px solid var(--aoe-line); border-radius:14px; padding:clamp(1rem,2.4vw,2.2rem);
  box-shadow:var(--aoe-shadow); min-height:540px;
}
.mw-body-content { font-size:1rem; line-height:1.68; }
.mw-body h1,.mw-body h2,.mw-body h3,.mw-body h4 {
  color:var(--aoe-gold); border-color:var(--aoe-line); font-family:Georgia,'Times New Roman',serif;
}
.mw-body h1 { font-size:2.25rem; letter-spacing:-.02em; }
.mw-body h2 { margin-top:1.8em; }
.mw-body a { color:var(--aoe-ember-2); }
.mw-body a:visited { color:#e9925c; }
.mw-body a:hover { color:var(--aoe-cream); }
.mw-logo-wordmark,.mw-logo-tagline { filter:brightness(1.7); }
.vector-pinnable-header-label,.vector-toc-landmark,.vector-page-toolbar,.vector-appearance-landmark { color:var(--aoe-muted); }
.vector-column-end { display:none; }
.vector-toc { background:rgba(21,13,8,.92); border:1px solid var(--aoe-line); border-radius:10px; padding:.65rem; }
.vector-toc-link { color:var(--aoe-muted)!important; }
.vector-toc-link:hover,.vector-toc-level-1-active>.vector-toc-link { color:var(--aoe-gold)!important; }
.catlinks,#catlinks { background:rgba(14,9,6,.96)!important; border:1px solid var(--aoe-line)!important; border-radius:8px; color:var(--aoe-muted)!important; padding:.65rem .8rem; }
.catlinks a,#catlinks a { color:var(--aoe-ember-2)!important; }
.mw-footer { color:var(--aoe-muted); }

.aoe-hero {
  position:relative; overflow:hidden; min-height:330px; display:flex; align-items:center;
  padding:clamp(2rem,5vw,5rem); border:1px solid var(--aoe-line-strong); border-radius:16px;
  background:linear-gradient(90deg,rgba(8,5,3,.98) 0%,rgba(18,10,6,.93) 54%,rgba(18,8,3,.66) 100%),
             url('/resources/assets/aoe-wiki-hero.webp') center right/cover no-repeat;
  box-shadow:inset 0 0 80px rgba(255,89,0,.08),var(--aoe-shadow); margin-bottom:1.5rem;
}
.aoe-hero:after { content:''; position:absolute; inset:auto 0 0; height:3px; background:linear-gradient(90deg,transparent,var(--aoe-ember),var(--aoe-gold),transparent); }
.aoe-hero__content { position:relative; z-index:1; max-width:780px; }
.aoe-kicker { color:var(--aoe-ember-2); text-transform:uppercase; font-weight:800; letter-spacing:.16em; font-size:.78rem; }
.aoe-hero h1 { color:var(--aoe-cream); border:0; margin:.15rem 0 .6rem; font-size:clamp(2.7rem,6vw,5.2rem); line-height:1; text-shadow:0 4px 30px #000; }
.aoe-hero p { color:var(--aoe-text); font-size:clamp(1rem,1.6vw,1.25rem); max-width:680px; }
.aoe-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.aoe-button { display:inline-flex; align-items:center; gap:.45rem; padding:.78rem 1.15rem; border-radius:8px; background:linear-gradient(135deg,#ffd16d,#f07325); color:#251005!important; font-weight:900; text-decoration:none; box-shadow:0 8px 24px rgba(255,107,26,.24); text-shadow:none; }
.aoe-button--ghost { background:rgba(255,255,255,.035); color:var(--aoe-cream)!important; border:1px solid var(--aoe-line-strong); box-shadow:none; }

.aoe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.25rem 0; }
.aoe-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.aoe-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.aoe-card {
  position:relative; overflow:hidden; padding:1.2rem; border:1px solid var(--aoe-line); border-radius:11px;
  background:linear-gradient(145deg,rgba(255,107,26,.075),rgba(255,255,255,.018)); min-height:120px;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.aoe-card:hover { transform:translateY(-2px); border-color:var(--aoe-line-strong); background:linear-gradient(145deg,rgba(255,107,26,.12),rgba(255,255,255,.025)); }
.aoe-card h3 { margin:0 0 .45rem; font-size:1.28rem; }
.aoe-card h3 a { color:var(--aoe-gold); text-decoration:none; }
.aoe-card p { margin:.35rem 0; color:var(--aoe-muted); }
.aoe-card__meta { color:var(--aoe-ember-2); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }

.aoe-infobox { float:right; width:min(340px,38%); margin:0 0 1.25rem 1.6rem; padding:0; border:1px solid var(--aoe-line-strong); border-radius:12px; background:linear-gradient(160deg,var(--aoe-panel-2),var(--aoe-ink)); overflow:hidden; box-shadow:0 14px 38px rgba(0,0,0,.3); }
.aoe-infobox__title { padding:1rem 1.1rem; color:var(--aoe-cream); font-family:Georgia,'Times New Roman',serif; font-size:1.35rem; font-weight:800; background:linear-gradient(90deg,rgba(255,107,26,.18),transparent); border-bottom:1px solid var(--aoe-line); }
.aoe-infobox__image { padding:.8rem; text-align:center; border-bottom:1px solid var(--aoe-line); background:#080604; }
.aoe-infobox__image img { max-width:100%; height:auto; border-radius:6px; }
.aoe-infobox table { width:100%; border-collapse:collapse; }
.aoe-infobox th,.aoe-infobox td { padding:.56rem .8rem; border-bottom:1px solid rgba(255,255,255,.045); vertical-align:top; }
.aoe-infobox th { width:36%; text-align:left; color:var(--aoe-gold); font-weight:800; }
.aoe-infobox td { color:var(--aoe-text); }

.aoe-note { padding:1rem 1.1rem; margin:1rem 0; border:1px solid var(--aoe-line); border-left:4px solid var(--aoe-ember); border-radius:8px; background:rgba(255,107,26,.055); }
.aoe-note--verified { border-left-color:var(--aoe-green); background:rgba(103,213,154,.055); }
.aoe-note--warning { border-left-color:var(--aoe-gold); background:rgba(245,189,85,.06); }
.aoe-note__title { display:block; color:var(--aoe-cream); font-weight:900; margin-bottom:.2rem; }
.aoe-play-cta { clear:both; margin:1.8rem 0 .5rem; padding:1.1rem 1.25rem; border:1px solid var(--aoe-line-strong); border-radius:10px; background:linear-gradient(110deg,rgba(255,107,26,.14),rgba(103,213,154,.08)); box-shadow:0 8px 22px rgba(0,0,0,.18); }
.aoe-play-cta__title { color:var(--aoe-gold); font-size:1.2rem; font-weight:900; }
.aoe-play-cta__text { margin:.35rem 0 .65rem; color:var(--aoe-text); }
.aoe-play-cta__links { font-weight:800; }
.aoe-steps { counter-reset:aoesteps; list-style:none; padding:0; }
.aoe-steps li { position:relative; counter-increment:aoesteps; margin:.75rem 0; padding:.85rem 1rem .85rem 3.4rem; border:1px solid var(--aoe-line); border-radius:8px; background:rgba(255,255,255,.018); }
.aoe-steps li:before { content:counter(aoesteps); position:absolute; left:.85rem; top:.72rem; width:1.8rem; height:1.8rem; display:grid; place-items:center; border-radius:50%; background:var(--aoe-ember); color:#160902; font-weight:900; }
.aoe-statline { display:flex; flex-wrap:wrap; gap:.55rem; margin:.85rem 0; }
.aoe-pill { padding:.3rem .58rem; border:1px solid var(--aoe-line); border-radius:999px; color:var(--aoe-muted); background:rgba(255,255,255,.025); font-size:.84rem; }
.aoe-pill--live { border-color:rgba(103,213,154,.35); color:var(--aoe-green); }
.aoe-pill--danger { border-color:rgba(255,124,114,.35); color:var(--aoe-red); }

.wikitable { width:100%; margin:1rem 0; background:#0c0806; color:var(--aoe-text); border:1px solid var(--aoe-line); border-collapse:separate; border-spacing:0; border-radius:9px; overflow:hidden; }
.wikitable>tr>th,.wikitable>*>tr>th { padding:.7rem; background:linear-gradient(#2a190e,#1e120b); color:var(--aoe-gold); border-color:var(--aoe-line); }
.wikitable>tr>td,.wikitable>*>tr>td { padding:.62rem .7rem; border-color:rgba(255,255,255,.06); }
.wikitable>*>tr:nth-child(even)>td { background:rgba(255,255,255,.018); }
.wikitable a { color:var(--aoe-ember-2); }
.wikitable a:hover { color:var(--aoe-gold); }
.mw-parser-output .mw-category-generated { background:var(--aoe-ink)!important; color:var(--aoe-text); }
.mw-parser-output .mw-category-generated a { color:var(--aoe-ember-2); }
.aoe-drop-unique td:first-child { color:var(--aoe-gold); font-weight:800; }
.aoe-drop-tertiary td:first-child { color:var(--aoe-blue); font-weight:800; }
.aoe-drop-always td:first-child { color:var(--aoe-green); font-weight:800; }

@media (max-width:1100px) { .aoe-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .vector-column-start { display:none; } }
@media (max-width:850px) {
  .aoe-grid,.aoe-grid--2,.aoe-grid--4 { grid-template-columns:1fr; }
  .aoe-infobox { float:none; width:auto; margin:1rem 0; }
  .mw-body { padding:1rem; border-radius:9px; }
  .aoe-hero { min-height:260px; padding:2rem 1.2rem; background-position:65% center; }
  .aoe-hero h1 { font-size:2.8rem; }
  .wikitable { display:block; overflow-x:auto; white-space:nowrap; }
}