Out of Ore Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
mNo edit summary
mNo edit summary
 
(21 intermediate revisions by the same user not shown)
Line 1,741: Line 1,741:
}
}


/* Out of Ore Wiki homepage v2: sandbox-scoped, append to Common.css. */
/* ============================================================
.ooo-home-v2{--home-yellow:#f5c400;--home-bg:#15191b;--home-panel:#202426;--home-border:#3a4042;max-width:1280px;margin:0 auto;font-family:Barlow,Arial,sans-serif;color:#edf0f1}
  OUT OF ORE WIKI V2 — complete replacement for the V2 section
.ooo-home-v2 *{box-sizing:border-box}
  Images are controlled by MediaWiki templates, not CSS URLs.
.ooo-home-v2 a{color:inherit;text-decoration:none!important}
  ============================================================ */
.ooo-home-v2 a:hover{color:var(--home-yellow)}
.ooo-v2 {
.ooo-home-v2__hero{background:linear-gradient(110deg,rgba(10,15,17,.96),rgba(10,15,17,.68)),linear-gradient(145deg,#303b39,#131819);border:1px solid var(--home-border);border-radius:12px;padding:clamp(28px,6vw,76px);margin:12px 0 35px;min-height:320px;position:relative;overflow:hidden}
  --v2-bg:#151a1e; --v2-panel:#20262b; --v2-line:#343d44;
.ooo-home-v2__hero:after{content:"";position:absolute;right:-8%;top:-50%;width:55%;height:180%;background:repeating-linear-gradient(120deg,transparent 0 27px,rgba(245,196,0,.025) 28px 29px);pointer-events:none}
  --v2-text:#edf0f1; --v2-muted:#aeb8be; --v2-yellow:#e6b934;
.ooo-home-v2__eyebrow{font-size:12px;font-weight:800;letter-spacing:.15em;color:var(--home-yellow)}
  color:var(--v2-text); font-family:Barlow,Arial,sans-serif;
.ooo-home-v2__headline{font-size:clamp(35px,5vw,70px);font-weight:900;line-height:1.02;letter-spacing:.01em;margin:12px 0}
  font-size:16px; background:var(--v2-bg); border:1px solid var(--v2-line);
.ooo-home-v2__headline span{color:var(--home-yellow)}
  border-radius:8px; overflow:hidden;
.ooo-home-v2__hero p{max-width:520px;font-size:17px;color:#c9d0d2}
}
.ooo-home-v2__actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0}
.ooo-v2,.ooo-v2 * {box-sizing:border-box}
.ooo-home-v2__action a{display:inline-block;background:var(--home-yellow);border:1px solid var(--home-yellow);padding:12px 18px;border-radius:5px;color:#15191b!important;font-weight:800}
.ooo-v2 a {color:inherit;text-decoration:none}
.ooo-home-v2__action--outline a{background:transparent;color:var(--home-yellow)!important}
.ooo-v2 a:hover {color:var(--v2-yellow);text-decoration:none}
.ooo-home-v2__hero-foot{font-size:13px;color:#c1c5c6;margin-top:24px}
/* Header */
.ooo-home-v2__section-title{font-size:19px;font-weight:900;color:var(--home-yellow);letter-spacing:.035em;margin:24px 0 15px;border-bottom:1px solid #454033;padding-bottom:10px}
.ooo-v2-top {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;border-bottom:1px solid var(--v2-line);background:#1b2024}
.ooo-home-v2__section-title span{float:right;font-size:12px;font-weight:500;color:#aeb4b6;letter-spacing:0}
.ooo-v2-brand {font-size:21px;font-weight:800;letter-spacing:.07em}
.ooo-home-v2__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ooo-v2-brand span {color:var(--v2-yellow)}
.ooo-home-v2__card{background:linear-gradient(145deg,#292d2e,#1a1f21);border:1px solid var(--home-border);border-radius:9px;padding:23px 19px;min-height:205px;transition:border-color .2s,transform .2s}
.ooo-v2-toplinks {display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--v2-muted)}
.ooo-home-v2__card:hover{border-color:var(--home-yellow);transform:translateY(-2px)}
/* Main layout */
.ooo-home-v2__card-icon{font-size:29px;color:var(--home-yellow);margin-bottom:20px}
.ooo-v2-shell {display:grid;grid-template-columns:245px minmax(0,1fr);min-height:650px}
.ooo-home-v2__card-title{font-weight:900;font-size:18px}
.ooo-v2-side {min-width:0;padding:24px 12px;background:#1a2024;border-right:1px solid var(--v2-line)}
.ooo-home-v2__card p{font-size:13px;line-height:1.5;color:#bbc1c2;min-height:48px;margin:8px 0 12px}
.ooo-v2-side-label {margin:16px 10px 9px;color:var(--v2-yellow);font-size:12px;font-weight:700;letter-spacing:.11em}
.ooo-home-v2__card a{color:var(--home-yellow);font-size:13px;font-weight:800}
.ooo-v2-nav,.ooo-v2-nav-current {margin:3px 0;padding:11px 12px;border-radius:4px;font-size:15px}
.ooo-home-v2__columns{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:27px}
.ooo-v2-nav:hover {background:#293137}
.ooo-home-v2__linklist{background:var(--home-panel);border:1px solid var(--home-border);border-radius:8px;overflow:hidden}
.ooo-v2-nav-current {background:#8c7330;color:#fff;font-weight:700}
.ooo-home-v2__linklist>div>a{display:block;padding:12px 16px;border-bottom:1px solid #343a3b;font-weight:600}
.ooo-v2-side-bottom {margin:25px 10px 0;padding-top:16px;border-top:1px solid var(--v2-line);font-size:13px;line-height:1.7;color:var(--v2-muted)}
.ooo-home-v2__linklist>div:last-child>a{border-bottom:0}
.ooo-v2-main {min-width:0;padding:24px;background:var(--v2-bg)}
.ooo-home-v2__linklist span{float:right;color:var(--home-yellow)}
/* Hero: image rendered by Template:OOO-Hero */
.ooo-home-v2__feature{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin-top:35px;padding:28px;background:#202426;border:1px solid var(--home-border);border-radius:10px}
.ooo-v2 .ooo-v2-hero {position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:300px;padding:54px 42px;background:#20262b;border:1px solid var(--v2-line);border-radius:6px;overflow:hidden}
.ooo-home-v2__feature-title{font-size:24px;font-weight:900;margin-top:8px}
.ooo-v2 .ooo-v2-hero-image {position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ooo-home-v2__feature p{color:#c5cbcd;line-height:1.6}
/* Hero image container */
.ooo-home-v2__feature a{color:var(--home-yellow);font-weight:800}
.ooo-v2 .ooo-v2-hero-image > a,
.ooo-home-v2__feature-art{background:linear-gradient(145deg,#303a3b,#131819);border:1px solid #454d4f;border-radius:7px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--home-yellow);font-size:44px;min-height:160px}
.ooo-v2 .ooo-v2-hero-image > span,
.ooo-home-v2__feature-art small{font-size:11px;letter-spacing:.1em;text-align:center;color:#c4c9ca}
.ooo-v2 .ooo-v2-hero-image > figure {
.ooo-home-v2__footer{margin:30px 0 10px;padding:17px 20px;border-left:3px solid var(--home-yellow);background:#262820;font-size:14px}
    display:block;
@media(max-width:850px){.ooo-home-v2__cards{grid-template-columns:repeat(2,minmax(0,1fr))}.ooo-home-v2__columns{grid-template-columns:1fr}.ooo-home-v2__feature{grid-template-columns:1fr}}
    width:100%;
@media(max-width:500px){.ooo-home-v2__cards{grid-template-columns:1fr}.ooo-home-v2__hero{padding:25px 20px;min-height:0}.ooo-home-v2__section-title span{display:none}.ooo-home-v2__card{min-height:0}.ooo-home-v2__card p{min-height:0}}
    height:100%;
/* Keep homepage readable even when the user selects a light wiki skin. */
    margin:0;
.ooo-home-v2 .ooo-home-v2__card,.ooo-home-v2 .ooo-home-v2__feature,.ooo-home-v2 .ooo-home-v2__linklist{color:#edf0f1}
}
 
/* Hero image */
.ooo-v2 .ooo-v2-hero-image img,
.ooo-v2 .ooo-v2-hero-image .mw-file-element {
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
    filter:none;
}
.ooo-v2 .ooo-v2-hero::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(12,16,20,.95) 0%,rgba(12,16,20,.65) 45%,rgba(12,16,20,.10) 100%)}
.ooo-v2-eyebrow {font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--v2-yellow)}
.ooo-v2-hero-title {margin:12px 0;font-size:clamp(32px,4vw,56px);line-height:1.08;font-weight:800}
.ooo-v2-hero-copy {max-width:580px;color:#c8d0d4;font-size:17px;line-height:1.5}
.ooo-v2-hero-actions {margin-top:25px;font-size:15px;font-weight:700}
.ooo-v2-hero-actions a {display:inline-block;padding:11px 15px;margin:0 8px 8px 0;background:#2c353a;border:1px solid #4c565d;border-radius:4px}
.ooo-v2-hero-actions a:first-child {background:var(--v2-yellow);color:#1b1b1b;border-color:var(--v2-yellow)}
/* Section headings */
.ooo-v2-section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 15px;font-size:19px;font-weight:800;letter-spacing:.035em}
.ooo-v2-heading-sub {font-size:13px;font-weight:400;color:var(--v2-muted)}
/* Category grid */
.ooo-v2 .ooo-v2-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.ooo-v2 .ooo-v2-tile {position:relative;min-width:0;min-height:210px;padding:20px;background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:5px;overflow:hidden}
.ooo-v2 .ooo-v2-tile:hover {border-color:var(--v2-yellow)}
.ooo-v2 .ooo-v2-imagecard {display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.ooo-v2 .ooo-v2-card-image {position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ooo-v2 .ooo-v2-card-image > a,
.ooo-v2 .ooo-v2-card-image > span,
.ooo-v2 .ooo-v2-card-image > figure,
.ooo-v2 .ooo-v2-card-image .mw-file-element,
.ooo-v2 .ooo-v2-card-image img {display:block;width:100%;height:100%;max-width:none;min-width:0;margin:0;object-fit:cover;object-position:center}
.ooo-v2 .ooo-v2-imagecard::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(10,14,18,.96) 0%,rgba(10,14,18,.58) 55%,rgba(10,14,18,.12) 100%)}
.ooo-v2 .ooo-v2-card-content {position:relative;z-index:1;width:100%;min-width:0}
.ooo-v2 .ooo-v2-tile-icon {font-size:24px;color:var(--v2-yellow);margin-bottom:13px}
.ooo-v2 .ooo-v2-tile-title {font-size:21px;font-weight:700;line-height:1.2;margin-bottom:8px}
.ooo-v2 .ooo-v2-tile-desc {font-size:15px;line-height:1.5;color:#d1d8dc}
/* Guides and updates */
.ooo-v2-two {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:26px}
.ooo-v2-panel {min-width:0;padding:22px;background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:5px}
.ooo-v2-panel-title {font-size:16px;font-weight:800;letter-spacing:.06em;margin-bottom:13px}
.ooo-v2-guide {padding:11px 0;border-top:1px solid var(--v2-line);font-size:15px}
.ooo-v2-guide span {float:right;color:var(--v2-yellow)}
.ooo-v2-update {font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.ooo-v2-panel-foot {padding-top:12px;font-size:14px;color:var(--v2-yellow)}
.ooo-v2-bottom {margin-top:24px;padding:17px 5px;border-top:1px solid var(--v2-line);font-size:14px;color:var(--v2-muted);line-height:1.8}
/* Responsive */
@media(max-width:1100px) {.ooo-v2 .ooo-v2-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px) {.ooo-v2-shell{grid-template-columns:195px minmax(0,1fr)}.ooo-v2-main{padding:16px}.ooo-v2 .ooo-v2-hero{padding:34px 25px}}
@media(max-width:640px) {.ooo-v2-top{display:block}.ooo-v2-toplinks{margin-top:10px}.ooo-v2-shell{display:block}.ooo-v2-side{border-right:0;border-bottom:1px solid var(--v2-line)}.ooo-v2 .ooo-v2-tiles,.ooo-v2-two{grid-template-columns:1fr}.ooo-v2 .ooo-v2-hero{padding:30px 20px}.ooo-v2-main{padding:12px}}
 
 
/* V2 InfoBox */
 
.ooo-v2-infobox {
    background: #202124;
    border: 1px solid #414141;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0;
    color: #eeeeee;
}
 
.ooo-v2-infobox-header {
    background: #292929;
    border-bottom: 2px solid #e5b62e;
    padding: 14px 18px;
    font-weight: 700;
    letter-spacing: 1px;
}
 
.ooo-v2-infobox-image {
    padding: 16px;
    text-align: center;
    background: #181818;
}
 
.ooo-v2-infobox-image img {
    max-width: 100%;
    height: auto;
}
 
.ooo-v2-infobox-body {
    padding: 6px 18px;
}
 
.ooo-v2-infobox-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #383838;
}
 
.ooo-v2-infobox-row:last-child {
    border-bottom: none;
}
 
.ooo-v2-infobox-row span {
    color: #aaaaaa;
}
 
.ooo-v2-infobox-row strong {
    color: #f0f0f0;
    text-align: right;
}
 
 
/* V2 Vehicle Details: Overview and InfoBox */
 
.ooo-v2-vehicle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 24px;
    align-items: start;
    margin: 20px 0 30px;
}
 
.ooo-v2-vehicle-description {
    min-width: 0;
    line-height: 1.7;
}
 
.ooo-v2-vehicle-sidebar {
    min-width: 0;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
 
/* Responsive layout */
 
@media (max-width: 900px) {
    .ooo-v2-vehicle-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}
 
/* ==========================================
  V2 VEHICLE DETAILS REFINEMENT
  ========================================== */
 
/* Vehicle navigation */
 
.ooo-v2-vehicle-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    margin: 18px 0 28px;
    background: #242628;
    border: 1px solid #3c3f42;
    border-radius: 7px;
}
 
.ooo-v2-vehicle-nav-link a {
    display: inline-block;
    padding: 10px 16px;
    color: #cccccc !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 5px;
}
 
.ooo-v2-vehicle-nav-link a:hover,
.ooo-v2-vehicle-nav-link a:focus {
    background: #373a3d;
    color: #e5b62e !important;
}
 
/* Overview and infobox columns */
 
.ooo-v2-vehicle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
    margin: 16px 0 32px;
}
 
.ooo-v2-vehicle-description {
    min-width: 0;
    line-height: 1.7;
}
 
.ooo-v2-vehicle-sidebar {
    min-width: 0;
}
 
/* Compact infobox */
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-header {
    padding: 12px 16px;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-image {
    padding: 12px;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-body {
    padding: 4px 16px;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 0;
    height: auto;
    padding: 10px 0;
    margin: 0;
    line-height: 1.4;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row span {
    flex: 0 1 auto;
    color: #aaaaaa;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row strong {
    flex: 0 1 auto;
    text-align: right;
    overflow-wrap: anywhere;
}
 
/* Mobile and narrower screens */
 
@media (max-width: 1050px) {
    .ooo-v2-vehicle-layout {
        grid-template-columns: minmax(0, 1fr);
    }
 
    .ooo-v2-vehicle-sidebar {
        max-width: 440px;
    }
}
 
@media (max-width: 600px) {
    .ooo-v2-vehicle-nav-link a {
        padding: 9px 11px;
        font-size: 12px;
    }
}
 
/* ==========================================
  V2 VEHICLE CATEGORY
  ========================================== */
 
.ooo-v2-vehicle-category-intro {
    margin: 20px 0 28px;
    line-height: 1.7;
}
 
.ooo-v2-vehicle-list {
    background: #202124;
    border: 1px solid #3c3f42;
    border-radius: 8px;
    padding: 10px 20px;
}
 
.ooo-v2-vehicle-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.ooo-v2-vehicle-list li {
    margin: 0;
    padding: 12px 8px;
    border-bottom: 1px solid #383838;
}
 
.ooo-v2-vehicle-list li:last-child {
    border-bottom: none;
}
 
.ooo-v2-vehicle-list li a {
    color: #eeeeee !important;
    text-decoration: none !important;
    font-weight: 500;
}
 
.ooo-v2-vehicle-list li a:hover {
    color: #e5b62e !important;
}
 
/* ==========================================
  V2 VEHICLE DETAILS - COMPACT LAYOUT
  ========================================== */
 
/* Navigation */
.ooo-v2-vehicle-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    margin: 14px 0 24px;
    background: #242628;
    border: 1px solid #3c3f42;
    border-radius: 6px;
}
 
.ooo-v2-vehicle-nav-link {
    display: inline-flex;
    align-items: center;
}
 
.ooo-v2-vehicle-nav-link a {
    display: block;
    padding: 9px 14px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #cccccc !important;
    text-decoration: none !important;
    border-radius: 4px;
}
 
.ooo-v2-vehicle-nav-link a:hover {
    background: #383b3e;
    color: #e5b62e !important;
}
 
/* Overview and infobox layout */
.ooo-v2-vehicle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 24px;
    align-items: start;
    margin: 16px 0 28px;
}
 
.ooo-v2-vehicle-description {
    min-width: 0;
    line-height: 1.7;
}
 
.ooo-v2-vehicle-sidebar {
    min-width: 0;
}
 
/* Infobox */
.ooo-v2-vehicle-sidebar .ooo-v2-infobox {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-header {
    padding: 12px 16px;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-body {
    padding: 6px 16px;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 9px 0;
    line-height: 1.4;
    border-bottom: 1px solid #383b3e;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row:last-child {
    border-bottom: none;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row span {
    display: block;
    color: #aaaaaa;
    font-size: 13px;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row strong {
    display: block;
    color: #eeeeee;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-image {
    padding: 10px;
}
 
.ooo-v2-vehicle-sidebar .ooo-v2-infobox-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
 
/* Responsive */
@media (max-width: 1050px) {
    .ooo-v2-vehicle-layout {
        grid-template-columns: minmax(0, 1fr);
    }
 
    .ooo-v2-vehicle-sidebar {
        max-width: 480px;
    }
}
 
@media (max-width: 600px) {
    .ooo-v2-vehicle-nav-link a {
        padding: 8px 10px;
        font-size: 12px;
    }
}
 
/* V2 VEHICLE CONTROLS */
 
.ooo-v2-controls {
    display: grid;
    gap: 14px;
}
 
.ooo-v2-controls-intro {
    line-height: 1.7;
    color: #c8d0d4;
}
 
.ooo-v2-controls-group {
    background: #20262b;
    border: 1px solid #343d44;
    border-radius: 6px;
    overflow: hidden;
}
 
.ooo-v2-controls-title {
    padding: 12px 16px;
    background: #293137;
    border-bottom: 1px solid #343d44;
    color: #e6b934;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
}
 
.ooo-v2-controls-body {
    padding: 14px 18px;
    line-height: 1.7;
}
 
.ooo-v2-controls-body p:first-child {
    margin-top: 0;
}
 
.ooo-v2-controls-body p:last-child {
    margin-bottom: 0;
}
 
/* ========================================
  V2 VEHICLE ATTACHMENTS
======================================== */
 
.ooo-v2-attachment {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 14px;
    margin-bottom: 12px;
    background: #20262b;
    border: 1px solid #343d44;
    border-radius: 6px;
}
 
.ooo-v2-attachment-image {
    width: 180px;
    min-width: 180px;
    min-height: 115px;
    background: #171c20;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.ooo-v2-attachment-image img {
    display: block;
    max-width: 100%;
    max-height: 135px;
    width: auto;
    height: auto;
    object-fit: contain;
}
 
.ooo-v2-attachment-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
 
.ooo-v2-attachment-name {
    font-size: 18px;
    font-weight: 700;
}
 
.ooo-v2-attachment-name a {
    color: #e6b934;
    text-decoration: none;
}
 
.ooo-v2-attachment-name a:hover {
    text-decoration: underline;
}
 
.ooo-v2-attachment-description {
    color: #d0d7db;
    font-size: 14px;
    line-height: 1.6;
}
 
.ooo-v2-attachment-compatibility {
    color: #aeb8be;
    font-size: 13px;
    line-height: 1.5;
}
 
.ooo-v2-attachment-compatibility span {
    color: #e6b934;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-right: 8px;
}
 
@media (max-width: 650px) {
    .ooo-v2-attachment {
        flex-direction: column;
    }
 
    .ooo-v2-attachment-image {
        width: 100%;
        min-width: 0;
        min-height: 150px;
    }
}
 
/* ========================================
  V2 IMAGE GALLERY
======================================== */
 
.ooo-v2-gallery {
    margin: 18px 0 26px;
}
 
.ooo-v2-gallery-description {
    color: #aeb8be;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
}
 
.ooo-v2-gallery .gallery {
    margin: 0;
    padding: 0;
}
 
.ooo-v2-gallery .gallerybox {
    margin: 0 8px 12px 0;
}
 
.ooo-v2-gallery .thumb {
    background: #20262b;
    border: 1px solid #343d44;
    border-radius: 6px;
    overflow: hidden;
    padding: 5px;
}
 
.ooo-v2-gallery .thumb img {
    border-radius: 4px;
}
 
.ooo-v2-gallery .gallerytext {
    color: #aeb8be;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    padding-top: 6px;
}
 
/* V2 VEHICLE OVERVIEW REFINEMENTS */
 
.ooo-v2-vehicle-layout {
    align-items: start;
}
 
.ooo-v2-vehicle-description {
    line-height: 1.7;
}
 
.ooo-v2-vehicle-description p:first-child {
    margin-top: 0;
}
 
.ooo-v2-vehicle-layout + .ooo-v2-vehicle-sections {
    margin-top: 28px;
}
 
.ooo-v2-heading-sub {
    margin-left: 8px;
}
 
/* V2 VEHICLE CATEGORY REFINEMENTS */
 
.ooo-v2-vehicle-category-intro {
    margin: 16px 0 22px;
    line-height: 1.7;
}
 
.ooo-v2-vehicle-list {
    margin-top: 14px;
}
 
.ooo-v2-vehicle-list ul {
    list-style: none;
    margin: 0;
    padding: 8px 16px;
}
 
.ooo-v2-vehicle-list li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #343d44;
}
 
.ooo-v2-vehicle-list li:last-child {
    border-bottom: none;
}
 
.ooo-v2-vehicle-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 6px;
    text-decoration: none;
    transition: color 0.15s ease;
}
 
.ooo-v2-vehicle-list li a::after {
    content: "›";
    color: #e6b934;
    font-size: 20px;
}
 
.ooo-v2-vehicle-list li a:hover {
    color: #e6b934;
}
 
/* V2 VEHICLE LIST ITEMS */
 
.ooo-v2-vehicle-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-bottom: 1px solid #343d44;
}
 
.ooo-v2-vehicle-list-item:last-child {
    border-bottom: none;
}
 
.ooo-v2-vehicle-list-image {
    width: 150px;
    min-width: 150px;
    height: 85px;
    background: #171c20;
    border-radius: 5px;
    overflow: hidden;
}
 
.ooo-v2-vehicle-list-image a {
    display: block;
    height: 100%;
}
 
.ooo-v2-vehicle-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
.ooo-v2-vehicle-list-details {
    flex: 1;
    min-width: 0;
}
 
.ooo-v2-vehicle-list-name a {
    font-weight: 700;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
}
 
.ooo-v2-vehicle-list-name a:hover {
    color: #e6b934;
}
 
.ooo-v2-vehicle-list-description {
    color: #aeb8be;
    font-size: 13px;
    margin-top: 5px;
}
 
.ooo-v2-vehicle-list-arrow {
    color: #e6b934;
    font-size: 24px;
    padding: 0 8px;
}
 
@media (max-width: 600px) {
    .ooo-v2-vehicle-list-image {
        width: 100px;
        min-width: 100px;
        height: 65px;
    }
}
 
/* V2 COLLAPSIBLE LEVEL CARDS */
 
.ooo-v2-level-card {
    background: #20262b;
    border: 1px solid #343d44;
    border-radius: 7px;
    margin-bottom: 7px;
    overflow: hidden;
}
 
.ooo-v2-level-card.is-open {
    border-color: #e6b934;
}
 
.ooo-v2-level-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 16px;
    cursor: pointer;
}
 
.ooo-v2-level-heading:hover {
    background: #293137;
}
 
.ooo-v2-level-heading:focus-visible {
    outline: 2px solid #e6b934;
    outline-offset: -2px;
}
 
.ooo-v2-level-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    background: #343d44;
    color: #e6b934;
    border-radius: 5px;
    font-size: 19px;
    font-weight: 700;
}
 
.ooo-v2-level-info {
    flex: 1;
    min-width: 0;
}
 
.ooo-v2-level-name {
    color: #edf0f1;
    font-size: 16px;
    font-weight: 700;
}
 
.ooo-v2-level-xp {
    color: #aeb8be;
    font-size: 13px;
    margin-top: 3px;
}
 
.ooo-v2-level-arrow {
    color: #e6b934;
    font-size: 24px;
    transition: transform .2s;
}
 
.ooo-v2-level-card.is-open .ooo-v2-level-arrow {
    transform: rotate(180deg);
}
 
.ooo-v2-level-details {
    padding: 15px 20px 18px;
    border-top: 1px solid #343d44;
}
 
.ooo-v2-level-details[hidden] {
    display: none !important;
}
 
.ooo-v2-level-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #aeb8be;
    font-size: 14px;
}
 
.ooo-v2-level-detail-row strong {
    color: #edf0f1;
}
 
.ooo-v2-level-unlocks {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid #343d44;
}
 
.ooo-v2-level-unlocks-title {
    color: #e6b934;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}
 
.ooo-v2-level-unlocks-content {
    color: #edf0f1;
    font-size: 14px;
}
 
.ooo-v2-level-unlocks-content a {
    color: #e6b934;
}
 
@media (max-width: 600px) {
    .ooo-v2-level-heading {
        padding: 10px;
        gap: 10px;
    }
 
    .ooo-v2-level-name {
        font-size: 14px;
    }
}
 
/* =========================================
  V2 LEVEL PROGRESSION FIXES
========================================= */
 
/* Hide all level details by default */
.ooo-v2 .ooo-v2-level-details {
    display: none;
}
 
/* Show details only when expanded */
.ooo-v2 .ooo-v2-level-card.is-open .ooo-v2-level-details {
    display: block;
}
 
/* Keep cards compact */
.ooo-v2 .ooo-v2-level-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
 
/* Remove unwanted MediaWiki spacing */
.ooo-v2 .ooo-v2-level-list .ooo-v2-level-card {
    margin: 0 !important;
}
 
/* Compact row height */
.ooo-v2 .ooo-v2-level-heading {
    padding: 9px 14px;
    min-height: 48px;
}
 
/* Smaller level number */
.ooo-v2 .ooo-v2-level-number {
    width: 38px;
    min-width: 38px;
    height: 38px;
    font-size: 17px;
}
 
/* Remove extra paragraph spacing */
.ooo-v2 .ooo-v2-level-list p {
    margin: 0 !important;
}
 
/* Expanded details spacing */
.ooo-v2 .ooo-v2-level-details {
    padding: 12px 16px;
}
 
/* V2 LEVEL CARDS - REMOVE MEDIAWIKI SPACING */
 
.ooo-v2 .ooo-v2-level-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}
 
.ooo-v2 .ooo-v2-level-list > .ooo-v2-level-card {
    margin: 0 !important;
}
 
/* Hide empty paragraphs inserted by MediaWiki */
.ooo-v2 .ooo-v2-level-list > p:empty {
    display: none !important;
}
 
/* Hide unwanted line breaks between cards */
.ooo-v2 .ooo-v2-level-list > br {
    display: none !important;
}
 
/* Prevent extra margins on card wrappers */
.ooo-v2 .ooo-v2-level-list > p {
    margin: 0 !important;
    padding: 0 !important;
}
/* Level card Details button */
 
.ooo-v2 .ooo-v2-level-arrow {
    font-size: 13px;
    font-weight: 700;
    color: #e6b934;
    background: #30373c;
    padding: 7px 14px;
    border-radius: 5px;
    transition: background .2s;
    transform: none !important;
}
 
.ooo-v2 .ooo-v2-level-card.is-open .ooo-v2-level-arrow {
    background: #3c3930;
}
 
.ooo-v2 .ooo-v2-level-card.is-open .ooo-v2-level-arrow::after {
    content: "";
}
Retrieved from "https://wiki.outofore.com/index.php/MediaWiki:Common.css"