MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| (98 intermediate revisions by the same user not shown) | |||
| Line 424: | Line 424: | ||
rgba(255,196,0,0.3) | rgba(255,196,0,0.3) | ||
); | ); | ||
} | |||
/* ========================================================= | |||
OOO CARD MOBILE TEXT | |||
========================================================= */ | |||
@media (max-width: 700px) { | |||
.ooo-card { | |||
padding: 16px; | |||
} | |||
.ooo-card h2 { | |||
font-size: 1.35rem; | |||
line-height: 1.25; | |||
} | |||
.ooo-card h3 { | |||
font-size: 1.15rem; | |||
line-height: 1.25; | |||
} | |||
.ooo-card p, | |||
.ooo-card li { | |||
font-size: 0.95rem; | |||
line-height: 1.45; | |||
} | |||
/* prevent text overflow */ | |||
.ooo-card { | |||
word-break: break-word; | |||
overflow-wrap: anywhere; | |||
} | |||
} | } | ||
| Line 443: | Line 477: | ||
/* Brand color, but theme-safe */ | /* Brand color, but theme-safe */ | ||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
clear: both; | |||
} | } | ||
| Line 1,024: | Line 1,060: | ||
.ooo-browser { | .ooo-browser { | ||
display: flex; | display: flex; | ||
gap: | gap: 16px; /* smaller spacing between list and panel */ | ||
align-items: flex-start; | align-items: flex-start; | ||
margin-top: 14px; | margin-top: 14px; | ||
flex-wrap: wrap; /* allows responsive stacking */ | |||
} | } | ||
| Line 1,091: | Line 1,128: | ||
.ooo-browser__panel { | .ooo-browser__panel { | ||
flex: 1; | flex: 1; | ||
border-left: 1px solid var(--ooo-border); | border-left: 1px solid var(--ooo-border); | ||
padding-left: 24px; | padding-left: 24px; | ||
margin-left: 24px; | |||
box-sizing: border-box; | |||
} | |||
.ooo-browser__panel .ooo-extra, | |||
.ooo-browser__panel .ooo-extra2 { | |||
max-width: 420px; | |||
} | } | ||
.ooo-browser__panel .ooo-infobox { | .ooo-browser__panel .ooo-infobox { | ||
flex-shrink: 0; | |||
width: 300px; | |||
margin: 0; | margin: 0; | ||
float: none; | float: none; | ||
} | } | ||
| Line 1,249: | Line 1,293: | ||
.ooo-item-top{ | .ooo-item-top{ | ||
display:flex; | display:flex; | ||
gap: | gap:20px; /* gap between item list and infobox */ | ||
align-items:flex-start; | align-items:flex-start; | ||
} | } | ||
| Line 1,282: | Line 1,326: | ||
border-radius:4px; | border-radius:4px; | ||
font-size:0.95rem; | font-size:0.95rem; | ||
} | |||
/* ========================================================= | |||
OOO BROWSER STICKY ITEM LIST | |||
========================================================= */ | |||
.ooo-browser__list{ | |||
position: sticky; | |||
top: 80px; | |||
align-self: flex-start; | |||
} | |||
/* ========================================================= | |||
OOO EXTRA CONTENT | |||
========================================================= */ | |||
.ooo-extra { | |||
margin-top: 18px; | |||
font-size: 0.92rem; | |||
line-height: 1.55; | |||
max-width: 720px; | |||
} | |||
/* title */ | |||
.ooo-extra__title { | |||
margin-bottom: 6px; | |||
font-size: 0.85rem; | |||
font-weight: 800; | |||
letter-spacing: 0.3px; | |||
text-transform: uppercase; | |||
color: var(--ooo-accent); | |||
} | |||
/* text */ | |||
.ooo-extra p { | |||
margin: 0 0 0.6em 0; | |||
} | |||
.ooo-extra ul { | |||
margin: 0.3em 0 0.6em 1.2em; | |||
} | |||
/* ========================================================= | |||
OOO EXTRA BLOCK (Secondary Info Panel) | |||
========================================================= */ | |||
.ooo-extra2 { | |||
margin-top: 18px; | |||
padding: 12px 16px; | |||
border-left: 4px solid var(--ooo-accent); | |||
border-radius: 6px; | |||
/* base + gradient like other OOO blocks */ | |||
background: | |||
linear-gradient( | |||
to right, | |||
rgba(245,196,0,0.08), | |||
rgba(245,196,0,0.02) | |||
); | |||
border: 1px solid rgba(245,196,0,0.18); | |||
font-size: 0.95rem; | |||
line-height: 1.6; | |||
max-width: 540px; | |||
} | |||
/* title */ | |||
.ooo-extra2__title { | |||
font-weight: 800; | |||
font-size: 0.9rem; | |||
margin-bottom: 6px; | |||
color: var(--ooo-accent); | |||
letter-spacing: 0.3px; | |||
text-transform: uppercase; | |||
} | |||
/* spacing */ | |||
.ooo-extra2 p { | |||
margin: 0 0 0.6em 0; | |||
} | |||
.ooo-extra2 ul { | |||
margin: 0.3em 0 0.4em 1.2em; | |||
} | |||
/* dark theme tuning */ | |||
.skin-theme-clientpref-night .ooo-extra2 { | |||
background: | |||
linear-gradient( | |||
to right, | |||
rgba(245,196,0,0.18), | |||
rgba(245,196,0,0.06) | |||
); | |||
border-color: rgba(245,196,0,0.35); | |||
} | |||
.ooo-browser__info.is-active{ | |||
display:grid; | |||
grid-template-columns:300px 1fr; | |||
gap:24px; | |||
align-items:start; | |||
} | |||
.ooo-browser__info .ooo-infobox{ | |||
grid-column:1; | |||
float:none; | |||
margin:0; | |||
} | |||
.ooo-browser__info .ooo-extra, | |||
.ooo-browser__info .ooo-extra2{ | |||
grid-column:2; | |||
} | |||
/* ========================================================= | |||
OOO External Link | |||
========================================================= */ | |||
.ooo-extlink a, | |||
.ooo-extlink a.external, | |||
.ooo-extlink a.extiw { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
text-align: center; | |||
padding: 4px 8px; | |||
border-radius: 4px; | |||
border: 1px solid var(--ooo-border); | |||
background: rgba(245,196,0,0.05); | |||
color: var(--ooo-accent) !important; | |||
text-decoration: none !important; | |||
font-weight: 600; | |||
transition: background 0.15s ease, border-color 0.15s ease; | |||
background-image: none !important; | |||
} | |||
/* hover */ | |||
.ooo-extlink a:hover, | |||
.ooo-extlink a.external:hover, | |||
.ooo-extlink a.extiw:hover { | |||
background: rgba(245,196,0,0.15); | |||
border-color: rgba(245,196,0,0.6); | |||
} | |||
/* custom icon */ | |||
.ooo-extlink a::after, | |||
.ooo-extlink a.external::after, | |||
.ooo-extlink a.extiw::after { | |||
content: ""; | |||
display: inline-block; | |||
width: 12px; | |||
height: 12px; | |||
opacity: 0.8; | |||
flex-shrink: 0; | |||
background-color: currentColor; | |||
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain; | |||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain; | |||
transition: transform 0.15s ease; | |||
} | |||
.ooo-extlink a:hover::after, | |||
.ooo-extlink a.external:hover::after, | |||
.ooo-extlink a.extiw:hover::after { | |||
transform: translate(1px,-1px); | |||
} | |||
/* ========================================================= | |||
OOO External Link Grid | |||
4 items per column | |||
========================================================= */ | |||
.ooo-extlinks-grid { | |||
display: grid; | |||
grid-auto-flow: column; | |||
grid-template-rows: repeat(4, auto); | |||
justify-content: start; | |||
align-content: start; | |||
column-gap: 10px; | |||
row-gap: 6px; | |||
margin: 8px 0; | |||
} | |||
/* remove MediaWiki paragraph wrappers */ | |||
.ooo-extlinks-grid p { | |||
display: contents; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
/* remove random line breaks */ | |||
.ooo-extlinks-grid br { | |||
display: none; | |||
} | |||
/* normalize grid items */ | |||
.ooo-extlinks-grid .ooo-extlink { | |||
display: block; | |||
margin: 0; | |||
align-self: start; | |||
} | |||
/* tablet */ | |||
@media (max-width: 900px) { | |||
.ooo-extlinks-grid { | |||
grid-template-rows: repeat(3, auto); | |||
} | |||
} | |||
/* mobile */ | |||
@media (max-width: 600px) { | |||
.ooo-extlinks-grid { | |||
grid-auto-flow: row; | |||
grid-template-columns: 1fr; | |||
grid-template-rows: none; | |||
} | |||
} | |||
.skin-theme-clientpref-day .ooo-extlink a, | |||
.skin-theme-clientpref-day .ooo-extlink a.external, | |||
.skin-theme-clientpref-day .ooo-extlink a.extiw { | |||
background: rgba(245,196,0,0.12); | |||
border-color: rgba(245,196,0,0.55); | |||
color: #9a7a00 !important; | |||
} | |||
.skin-theme-clientpref-day .ooo-extlink a:hover { | |||
background: rgba(245,196,0,0.22); | |||
} | |||
/* ========================================================= | |||
OOO MENU LINK – navigation style | |||
========================================================= */ | |||
.mw-parser-output .ooo-menulink a { | |||
display: block; | |||
position: relative; | |||
padding: 4px 8px 4px 14px; | |||
text-decoration: none !important; | |||
color: inherit; | |||
transition: background 0.18s ease, color 0.18s ease; | |||
} | |||
/* left accent bar (always visible) */ | |||
.mw-parser-output .ooo-menulink a::before { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
top: 2px; | |||
bottom: 2px; | |||
width: 3px; | |||
background: var(--ooo-accent); | |||
opacity: 0.6; | |||
} | |||
/* arrow */ | |||
.mw-parser-output .ooo-menulink a::after { | |||
content: "➜"; | |||
position: absolute; | |||
right: 6px; | |||
opacity: 0; | |||
transform: translateX(-4px); | |||
color: var(--ooo-accent); | |||
font-weight: 700; | |||
transition: 0.18s ease; | |||
} | |||
/* hover */ | |||
.mw-parser-output .ooo-menulink a:hover { | |||
font-weight: 700; | |||
color: var(--ooo-accent) !important; | |||
background: linear-gradient( | |||
to right, | |||
rgba(245,196,0,0.10), | |||
rgba(245,196,0,0.02) | |||
); | |||
} | |||
/* show arrow */ | |||
.mw-parser-output .ooo-menulink a:hover::after { | |||
opacity: 1; | |||
transform: translateX(0); | |||
} | |||
/* ========================================================= | |||
OOO MENU LINK – COMING SOON | |||
========================================================= */ | |||
.mw-parser-output .ooo-menulink-soon a { | |||
display: block; | |||
position: relative; | |||
padding: 4px 8px 4px 14px; | |||
opacity: 0.55; | |||
text-decoration: none !important; | |||
color: inherit; | |||
cursor: default; | |||
} | |||
/* dashed left indicator */ | |||
.mw-parser-output .ooo-menulink-soon a::before { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
top: 2px; | |||
bottom: 2px; | |||
width: 3px; | |||
background: repeating-linear-gradient( | |||
to bottom, | |||
rgba(245,196,0,0.5), | |||
rgba(245,196,0,0.5) 2px, | |||
transparent 2px, | |||
transparent 4px | |||
); | |||
} | |||
/* auto label */ | |||
.mw-parser-output .ooo-menulink-soon a::after { | |||
content: " (coming soon)"; | |||
font-size: 0.85em; | |||
font-style: italic; | |||
opacity: 0.7; | |||
} | |||
/* disable hover effects */ | |||
.mw-parser-output .ooo-menulink-soon a:hover { | |||
background: none; | |||
color: inherit !important; | |||
font-weight: normal; | |||
} | |||
/* ========================================================= | |||
OOO MENU SUB SECTION | |||
========================================================= */ | |||
.mw-parser-output .ooo-menusub { | |||
margin-top: 14px; | |||
margin-bottom: 6px; | |||
font-weight: 700; | |||
font-size: 0.95rem; | |||
color: var(--ooo-accent); | |||
border-bottom: 1px solid rgba(245,196,0,0.35); | |||
padding-bottom: 3px; | |||
letter-spacing: 0.02em; | |||
} | |||
/* ============================================================ | |||
OUT OF ORE WIKI V2 — complete replacement for the V2 section | |||
Images are controlled by MediaWiki templates, not CSS URLs. | |||
============================================================ */ | |||
.ooo-v2 { | |||
--v2-bg:#151a1e; --v2-panel:#20262b; --v2-line:#343d44; | |||
--v2-text:#edf0f1; --v2-muted:#aeb8be; --v2-yellow:#e6b934; | |||
color:var(--v2-text); font-family:Barlow,Arial,sans-serif; | |||
font-size:16px; background:var(--v2-bg); border:1px solid var(--v2-line); | |||
border-radius:8px; overflow:hidden; | |||
} | |||
.ooo-v2,.ooo-v2 * {box-sizing:border-box} | |||
.ooo-v2 a {color:inherit;text-decoration:none} | |||
.ooo-v2 a:hover {color:var(--v2-yellow);text-decoration:none} | |||
/* Header */ | |||
.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-v2-brand {font-size:21px;font-weight:800;letter-spacing:.07em} | |||
.ooo-v2-brand span {color:var(--v2-yellow)} | |||
.ooo-v2-toplinks {display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--v2-muted)} | |||
/* Main layout */ | |||
.ooo-v2-shell {display:grid;grid-template-columns:245px minmax(0,1fr);min-height:650px} | |||
.ooo-v2-side {min-width:0;padding:24px 12px;background:#1a2024;border-right:1px solid var(--v2-line)} | |||
.ooo-v2-side-label {margin:16px 10px 9px;color:var(--v2-yellow);font-size:12px;font-weight:700;letter-spacing:.11em} | |||
.ooo-v2-nav,.ooo-v2-nav-current {margin:3px 0;padding:11px 12px;border-radius:4px;font-size:15px} | |||
.ooo-v2-nav:hover {background:#293137} | |||
.ooo-v2-nav-current {background:#8c7330;color:#fff;font-weight:700} | |||
.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-v2-main {min-width:0;padding:24px;background:var(--v2-bg)} | |||
/* Hero: image rendered by Template:OOO-Hero */ | |||
.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-v2 .ooo-v2-hero-image {position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none} | |||
/* Hero image container */ | |||
.ooo-v2 .ooo-v2-hero-image > a, | |||
.ooo-v2 .ooo-v2-hero-image > span, | |||
.ooo-v2 .ooo-v2-hero-image > figure { | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
margin:0; | |||
} | |||
/* 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: ""; | |||
} | } | ||