Out of Ore Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
mNo edit summary
mNo edit summary
Line 1,741: Line 1,741:
}
}


/* Out of Ore Wiki V2 — sandbox-only design */
/* ============================================================
.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; background:var(--v2-bg); border:1px solid var(--v2-line); border-radius:8px; overflow:hidden; }
  OUT OF ORE WIKI V2 — complete replacement for the V2 section
.ooo-v2 * {box-sizing:border-box}
  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 {color:inherit;text-decoration:none}
.ooo-v2 a:hover {color:var(--v2-yellow);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-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-brand {font-size:21px;font-weight:800;letter-spacing:.07em}
.ooo-v2-toplinks {display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--v2-muted)}
.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-shell {display:grid;grid-template-columns:245px minmax(0,1fr);min-height:650px}
.ooo-v2-side {padding:24px 12px;background:#1a2024;border-right:1px solid var(--v2-line)}
.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:11px;font-weight:700;letter-spacing:.11em}
.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:14px}
.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-nav:hover {background:#293137}
.ooo-v2-side-bottom {margin:25px 10px 0;padding-top:16px;border-top:1px solid var(--v2-line);font-size:12px;line-height:1.7;color:var(--v2-muted)}
.ooo-v2-nav-current {background:#8c7330;color:#fff;font-weight:700}
.ooo-v2-main {min-width:0;padding:24px;background:#151a1e}
.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-hero {padding:54px 42px;min-height:280px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(100deg,rgba(13,17,20,.95),rgba(20,25,28,.62)),linear-gradient(145deg,#37434b,#1b2024);border:1px solid var(--v2-line);border-radius:6px}
.ooo-v2-main {min-width:0;padding:24px;background:var(--v2-bg)}
.ooo-v2-eyebrow {font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--v2-yellow)}
/* 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}
.ooo-v2 .ooo-v2-hero-image > a,
.ooo-v2 .ooo-v2-hero-image > span,
.ooo-v2 .ooo-v2-hero-image > figure,
.ooo-v2 .ooo-v2-hero-image .mw-file-element,
.ooo-v2 .ooo-v2-hero-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-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-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:16px;line-height:1.5}
.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:14px;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)}
.ooo-v2-hero-actions {margin-top:25px;font-size:15px;font-weight:700}
.ooo-v2-section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 15px;font-size:17px;font-weight:800;letter-spacing:.035em}
.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-heading-sub {font-size:12px;font-weight:400;color:var(--v2-muted)}
.ooo-v2-hero-actions a:first-child {background:var(--v2-yellow);color:#1b1b1b;border-color:var(--v2-yellow)}
.ooo-v2-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* Section headings */
.ooo-v2-tile {min-height:150px;padding:20px;background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:5px}.ooo-v2-tile:hover {border-color:#947d3b}
.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-tile-icon {font-size:24px;color:var(--v2-yellow);margin-bottom:13px}.ooo-v2-tile-title {font-size:16px;font-weight:750;margin-bottom:8px}.ooo-v2-tile-desc {font-size:13px;line-height:1.5;color:var(--v2-muted)}
.ooo-v2-heading-sub {font-size:13px;font-weight:400;color:var(--v2-muted)}
.ooo-v2-two {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
/* 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 {min-width:0;padding:22px;background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:5px}
.ooo-v2-panel-title {font-size:14px;font-weight:800;letter-spacing:.06em;margin-bottom:13px}
.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:14px}.ooo-v2-guide span {float:right;color:var(--v2-yellow)}
.ooo-v2-guide {padding:11px 0;border-top:1px solid var(--v2-line);font-size:15px}
.ooo-v2-update {font-size:14px;line-height:1.6;overflow-wrap:anywhere}.ooo-v2-panel-foot {padding-top:12px;font-size:13px;color:var(--v2-yellow)}
.ooo-v2-guide span {float:right;color:var(--v2-yellow)}
.ooo-v2-bottom {margin-top:24px;padding:17px 5px;border-top:1px solid var(--v2-line);font-size:13px;color:var(--v2-muted);line-height:1.8}
.ooo-v2-update {font-size:15px;line-height:1.6;overflow-wrap:anywhere}
@media(max-width:900px){.ooo-v2-shell{grid-template-columns:195px minmax(0,1fr)}.ooo-v2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ooo-v2-main{padding:16px}.ooo-v2-hero{padding:34px 25px}}
.ooo-v2-panel-foot {padding-top:12px;font-size:14px;color:var(--v2-yellow)}
@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-tiles,.ooo-v2-two{grid-template-columns:1fr}.ooo-v2-hero{padding:30px 20px}.ooo-v2-main{padding:12px}}
.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 */
/* Main banner */
@media(max-width:1100px) {.ooo-v2 .ooo-v2-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}}
.ooo-v2 .ooo-v2-hero {
@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}}
    background-image:
@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}}
        linear-gradient(
            90deg,
            rgba(12, 16, 20, 0.95) 0%,
            rgba(12, 16, 20, 0.65) 45%,
            rgba(12, 16, 20, 0.10) 100%
        ),
        url("https://wiki.outofore.com/images/7/7b/Main_Banner_1.png");
 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
}
 
/* V2 REUSABLE IMAGE CARDS */
 
.ooo-v2 .ooo-v2-imagecard {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}
 
.ooo-v2 .ooo-v2-card-image {
    position: absolute;
    inset: 0;
    z-index: -2;
}
 
.ooo-v2 .ooo-v2-card-image .mw-file-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
.ooo-v2 .ooo-v2-imagecard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(10,14,18,.96),
        rgba(10,14,18,.55) 60%,
        rgba(10,14,18,.12)
    );
}
 
.ooo-v2 .ooo-v2-card-content {
    position: relative;
    z-index: 1;
}
 
.ooo-v2 .ooo-v2-imagecard:hover {
    border-color: #f5c400;
}
Retrieved from "https://wiki.outofore.com/index.php/MediaWiki:Common.css"