MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 1,043: | Line 1,043: | ||
border-left:1px solid var(--ooo-border); | border-left:1px solid var(--ooo-border); | ||
padding-left:28px; | padding-left:28px; | ||
} | |||
/* Prevent infobox overflow inside browser panel */ | |||
.ooo-browser__panel .ooo-infobox { | |||
width:100% !important; | |||
max-width:100%; | |||
box-sizing:border-box; | |||
} | |||
/* Prevent tables inside infobox from breaking layout */ | |||
.ooo-browser__panel .ooo-infobox table { | |||
width:100%; | |||
table-layout:fixed; | |||
} | |||
/* Prevent long lines pushing layout */ | |||
.ooo-browser__panel .ooo-infobox td, | |||
.ooo-browser__panel .ooo-infobox th { | |||
word-break:break-word; | |||
} | } | ||
Revision as of 12:52, 5 March 2026
/* CSS placed here will be applied to all skins */
/* ===== OOO Tab Scroll — minimal, production-safe ===== */
/* =========================================================
OOO THEME TOKENS (GLOBAL BASE)
========================================================= */
:root {
/* ===== OOO Tab System ===== */
--ooo-tab-arrow-size: 22px;
--ooo-tab-arrow-offset: -0.1rem;
--ooo-tab-arrow-color: currentColor;
--ooo-tab-arrow-bg: var(--background-color-neutral, #f8f9fa);
--ooo-tab-arrow-bg-hover: var(--background-color-neutral-subtle, #f1f2f3);
--ooo-tab-arrow-border: var(--border-color-base, #a2a9b1);
--ooo-tab-arrow-shadow: none;
--ooo-tab-arrow-focus: 0 0 0 2px rgba(245,196,0,.4);
/* ===== OOO Brand Accent (Default Fallback) ===== */
--ooo-accent: #f5c400;
/* ===== Structural Tokens ===== */
--ooo-border: var(--border-color-base, #a2a9b1);
--ooo-bg-block: var(--background-color-base, #ffffff);
}
/* =========================================================
BRAND ACCENT TUNING PER THEME
========================================================= */
/* Light theme — deeper yellow for better contrast on white */
.skin-theme-clientpref-day {
--ooo-accent: #c49a00;
}
/* Dark theme — brighter industrial yellow */
.skin-theme-clientpref-night {
--ooo-accent: #f5c400;
}
/* OS-controlled dark mode */
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os {
--ooo-accent: #f5c400;
}
}
/* Wrapper must be positioned (JS also enforces if needed) */
.ooo-infobox-tabwrap--scroll { position: relative; }
/* Our injected arrow buttons (use currentColor for icon) */
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
position: absolute;
top: var(--ooo-tab-arrow-offset);
inline-size: var(--ooo-tab-arrow-size);
block-size: var(--ooo-tab-arrow-size);
border-radius: 999px;
border: 1px solid var(--ooo-tab-arrow-border);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-sizing: border-box;
appearance: none;
font: inherit;
text-shadow: none;
box-shadow: var(--ooo-tab-arrow-shadow);
padding: 0;
margin: 0;
background: var(--ooo-tab-arrow-bg);
color: var(--ooo-tab-arrow-color);
}
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow::before {
content:"";
position:absolute;
inset:-6px;
}
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow--prev { inset-inline-start: 2px; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow--next { inset-inline-end: 2px; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
background: var(--ooo-tab-arrow-bg-hover);
}
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:disabled {
opacity:.4;
cursor: default;
box-shadow: none;
}
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow.is-hidden { display: none; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow__icon { display: block; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:focus-visible {
outline: none;
box-shadow: var(--ooo-tab-arrow-focus);
}
/* Dark theme — explicit client preference */
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll {
--ooo-tab-arrow-color: var(--color-base, #eaecf0);
}
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
border-color: #3a3a3a;
background: var(--background-color-neutral, #2a2b2e);
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
background: var(--background-color-neutral-subtle, #222325);
}
/* Dark theme — follow OS */
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll {
--ooo-tab-arrow-color: var(--color-base, #eaecf0);
}
html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
border-color: #3a3a3a;
background: var(--background-color-neutral, #2a2b2e);
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
background: var(--background-color-neutral-subtle, #222325);
}
}
/* ===== TabberNeue header arrows — use currentColor via mask ===== */
.tabber__header__next:after,
.tabber__header__prev:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: currentColor !important;
background: none !important;
-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='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/></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='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/></svg>") no-repeat center / contain;
}
.tabber__header__prev:after {
-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='M13 1l1.4 1.5L7 10l7.4 7.5L13 19l-9-9z'/></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='M13 1l1.4 1.5L7 10l7.4 7.5L13 19l-9-9z'/></svg>") no-repeat center / contain;
}
.ooo-infobox-tabwrap--scroll .tabber__header {
color: var(--ooo-tab-arrow-color);
}
@media (max-width: 640px) {
.ooo-infobox-tabwrap,
.ooo-infobox-tabwrap--left,
.ooo-infobox-tabwrap--none,
.ooo-infobox-tabwrap--center {
float: none;
width: 100%;
margin: 0 0 1em 0;
}
}
.ooo-infobox-tabwrap .tabber__header {
border-bottom:0 !important;
box-shadow:none !important;
margin-bottom:10px;
}
.ooo-infobox-tabwrap .tabber__tabs {
margin-bottom: 12px !important;
}
.ooo-infobox-tabwrap .tabber__tab--active {
box-shadow:none !important;
margin-bottom:0 !important;
border-color:rgba(245,196,0,0.8);
background:rgba(245,196,0,0.10);
}
.ooo-infobox-tabwrap .tabber__tabs {
display:flex;
gap:8px;
margin-bottom:14px !important;
}
/* =========================================================
OOO TYPOGRAPHY SYSTEM (Theme Adaptive)
========================================================= */
/* ---------- Page Title ---------- */
#firstHeading,
.mw-body h1 {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.4px;
border: none !important;
margin-bottom: 1rem;
}
/* ---------- Section Headings ---------- */
.mw-body h2 {
font-size: 1.6rem;
font-weight: 700;
border: none !important;
border-left: 4px solid var(--ooo-accent);
padding-left: 10px;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.mw-body h3 {
font-size: 1.3rem;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 0.8rem;
border: none !important;
}
.mw-body h4 {
font-size: 1.1rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.6rem;
opacity: 0.9;
}
/* ---------- Paragraphs ---------- */
.mw-body p {
line-height: 1.65;
margin-bottom: 1rem;
}
/* ---------- Lists ---------- */
.mw-body ul,
.mw-body ol {
margin-bottom: 1rem;
}
/* ---------- Blockquotes ---------- */
.mw-body blockquote {
margin: 1.5rem 0;
padding: 0.8rem 1.2rem;
border-left: 4px solid var(--ooo-accent);
background: var(--background-color-neutral-subtle, rgba(0,0,0,0.03));
font-style: italic;
}
/* ---------- Preformatted (code blocks) ---------- */
.mw-body pre {
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
background: var(--background-color-neutral, #f8f9fa);
border: 1px solid var(--border-color-base, #ddd);
font-size: 0.9rem;
}
/* ---------- Inline code ---------- */
.mw-body code {
padding: 2px 6px;
border-radius: 4px;
background: var(--background-color-neutral, #f3f3f3);
font-size: 0.9em;
}
/* =========================================================
OOO Styled Wikitable (Theme Adaptive)
========================================================= */
.wikitable {
background: var(--background-color-base, #ffffff);
border: 1px solid var(--border-color-base, #a2a9b1);
border-collapse: collapse;
width: 100%;
font-size: 0.95rem;
}
.wikitable th {
background: var(--background-color-neutral, #f8f9fa);
color: var(--ooo-accent);
text-align: left;
padding: 8px 10px;
font-weight: 600;
border-bottom: 1px solid var(--border-color-base, #a2a9b1);
}
.wikitable td {
padding: 8px 10px;
border-top: 1px solid var(--border-color-base, #a2a9b1);
}
.wikitable tr:hover td {
background: rgba(255,196,0,0.07);
}
/* =========================================================
OOO HERO HEADER (Theme Adaptive – No Background Box)
========================================================= */
.ooo-hero {
text-align: center;
padding: 2rem 1rem 1.5rem 1rem;
margin-bottom: 2rem;
}
.ooo-hero__title {
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.5px;
margin: 0;
color: var(--ooo-accent);
}
.ooo-hero__subtitle {
font-size: 1.1rem;
margin-top: 0.5rem;
opacity: 0.75;
color: inherit;
}
.ooo-hero::after {
content: "";
display: block;
width: 120px;
height: 2px;
margin: 1.2rem auto 0 auto;
background: var(--ooo-accent);
opacity: 0.4;
}
/* =========================================================
OOO LAYOUT SYSTEM
========================================================= */
.ooo-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Split layout */
.ooo-split {
display: flex;
gap: 60px;
margin-bottom: 100px;
}
.ooo-main {
flex: 3;
}
.ooo-sidebar {
flex: 1;
}
/* Grid layout */
.ooo-grid {
display: flex;
gap: 40px;
margin-bottom: 120px;
}
.ooo-grid > div {
flex: 1;
}
/* =========================================================
OOO CARD SYSTEM
========================================================= */
.ooo-card {
padding: 30px;
border-radius: 14px;
border: 1px solid rgba(245,196,0,0.35);
background: rgba(245,196,0,0.05);
transition: 0.2s ease;
}
.ooo-card:hover {
border-color: rgba(245,196,0,0.6);
}
.ooo-card h3 {
margin-top: 0;
color: var(--ooo-accent);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.ooo-split,
.ooo-grid {
flex-direction: column;
}
}
/* =========================================================
OOO CARD TITLE SEPARATOR
========================================================= */
.ooo-card h3,
.ooo-card h2 {
position: relative;
padding-bottom: 12px;
margin-bottom: 20px;
}
.ooo-card h3::after,
.ooo-card h2::after {
content: "";
display: block;
height: 2px;
width: 100%;
margin-top: 10px;
background: linear-gradient(
to right,
var(--ooo-accent),
rgba(255,196,0,0.3)
);
}
/* =========================================================
OOO SECTION TITLE (Brand Yellow Industrial Clean)
========================================================= */
.ooo-section-title {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
font-size: 1.7rem;
font-weight: 800;
margin: 5rem 0 2.5rem 0;
letter-spacing: 0.6px;
text-transform: uppercase;
/* Brand color, but theme-safe */
color: var(--ooo-accent);
}
/* Lines left + right */
.ooo-section-title::before,
.ooo-section-title::after {
content: "";
flex: 1;
height: 2px;
/* Uses currentColor so it always matches the title */
background: linear-gradient(
to right,
transparent,
currentColor 50%,
transparent
);
opacity: 0.55;
}
/* Small screens — remove lines */
@media (max-width: 600px) {
.ooo-section-title {
font-size: 1.4rem;
}
.ooo-section-title::before,
.ooo-section-title::after {
display: none;
}
}
/* =========================================================
Light Theme Readability Boost (Subtle Outline)
========================================================= */
.skin-theme-clientpref-day .ooo-section-title {
text-shadow:
0 0 0.5px rgba(0,0,0,0.6),
0 1px 0 rgba(0,0,0,0.25);
}
/* =========================================================
OOO NOTICE SYSTEM (Variant Driven – Industrial Clean)
========================================================= */
.ooo-notice {
position: relative;
padding: 22px 26px;
margin: 28px 0;
border-radius: 10px;
border: 1px solid transparent;
border-left: 8px solid var(--ooo-accent);
background: rgba(245,196,0,0.04);
}
/* Title */
.ooo-notice__title {
font-size: 1.05rem;
font-weight: 800;
margin-bottom: 8px;
letter-spacing: 0.3px;
color: inherit;
}
/* Content */
.ooo-notice__content {
line-height: 1.6;
opacity: 0.95;
}
/* =========================================================
INFO (Brand Yellow Default)
========================================================= */
.ooo-notice--info {
border-left-color: #2f6fdb;
border-color: rgba(47,111,219,0.25);
background: rgba(47,111,219,0.06);
}
.ooo-notice--info .ooo-notice__title {
color: #2f6fdb;
}
/* Force clean background inside notice content */
.ooo-notice__content,
.ooo-notice__content p,
.ooo-notice__content ul,
.ooo-notice__content ol,
.ooo-notice__content dl {
background: transparent !important;
}
/* =========================================================
WARNING (Stronger Yellow)
========================================================= */
.ooo-notice--warning {
border-left-color: #f5c400;
border-color: rgba(245,196,0,0.35);
background: rgba(245,196,0,0.10);
}
.ooo-notice--warning .ooo-notice__title {
color: #f5c400;
}
/* =========================================================
SUCCESS (Green)
========================================================= */
.ooo-notice--success {
border-left-color: #2ea44f;
border-color: rgba(46,164,79,0.30);
background: rgba(46,164,79,0.06);
}
.ooo-notice--success .ooo-notice__title {
color: #2ea44f;
}
/* =========================================================
DANGER (Red)
========================================================= */
.ooo-notice--danger {
border-left-color: #d73a49;
border-color: rgba(215,58,73,0.30);
background: rgba(215,58,73,0.06);
}
.ooo-notice--danger .ooo-notice__title {
color: #d73a49;
}
/* =========================================================
DARK MODE TUNING
========================================================= */
.skin-theme-clientpref-night .ooo-notice--info {
background: rgba(245,196,0,0.12);
}
.skin-theme-clientpref-night .ooo-notice--warning {
background: rgba(245,196,0,0.18);
}
.skin-theme-clientpref-night .ooo-notice--success {
background: rgba(46,164,79,0.12);
}
.skin-theme-clientpref-night .ooo-notice--danger {
background: rgba(215,58,73,0.12);
}
/* =========================================================
OOO INTRO (Neutral, Theme-Safe)
========================================================= */
.ooo-intro {
margin: 30px 0 40px 0;
/* Explicitly remove any inherited background */
background: none !important;
border: none !important;
box-shadow: none !important;
}
/* Title */
.ooo-intro__title {
font-size: 1.9rem;
font-weight: 800;
letter-spacing: 0.5px;
margin-bottom: 14px;
color: var(--ooo-accent) !important;
}
/* Intro text */
.ooo-intro__text {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 18px;
opacity: 0.95;
}
/* Divider */
.ooo-intro__divider {
height: 3px;
width: 100%;
background: linear-gradient(
to right,
var(--ooo-accent),
rgba(245,196,0,0.2)
);
}
/* =========================================================
OOO FAQ SYSTEM – Clean Industrial (Stable)
========================================================= */
.ooo-faq {
margin: 50px 0;
}
/* =========================================================
FAQ CARD – Balanced Light & Dark
========================================================= */
.ooo-faq__item {
position: relative;
border-radius: 10px;
margin-bottom: 18px;
overflow: hidden;
transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
/* Light theme */
border: 1px solid rgba(0,0,0,0.08);
background: linear-gradient(
to bottom,
rgba(245,196,0,0.04),
rgba(245,196,0,0.015)
);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
/* Light theme hover */
.ooo-faq__item:hover {
border-color: rgba(245,196,0,0.35);
box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}
/* Dark theme */
.skin-theme-clientpref-night .ooo-faq__item {
background: linear-gradient(
to bottom,
rgba(245,196,0,0.10),
rgba(245,196,0,0.05)
);
border-color: rgba(245,196,0,0.30);
box-shadow: none;
}
/* =========================================================
QUESTION
========================================================= */
.ooo-faq__question {
position: relative;
padding: 20px 70px 20px 22px;
font-weight: 800;
font-size: 1.15rem;
cursor: pointer;
color: var(--ooo-accent);
transition: background 0.2s ease;
}
/* Left accent bar */
.ooo-faq__question::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: var(--ooo-accent);
}
/* + / − toggle */
.ooo-faq__question::after {
content: "+";
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
font-size: 26px;
font-weight: 900;
color: var(--ooo-accent);
transition: 0.2s ease;
}
/* When expanded */
.ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after {
content: "−";
}
/* Hover */
.ooo-faq__question:hover {
background: rgba(0,0,0,0.03);
}
.skin-theme-clientpref-night .ooo-faq__question:hover {
background: rgba(245,196,0,0.08);
}
/* =========================================================
ANSWER
========================================================= */
.ooo-faq__answer {
padding: 20px 22px;
line-height: 1.7;
font-size: 0.98rem;
border-top: 1px solid rgba(0,0,0,0.06);
}
/* Dark theme answer border */
.skin-theme-clientpref-night .ooo-faq__answer {
border-top: 1px solid rgba(245,196,0,0.2);
}
/* =========================================================
HIDE DEFAULT MW TOGGLE TEXT
========================================================= */
.ooo-faq__item .mw-collapsible-toggle {
position: absolute;
inset: 0;
opacity: 0;
z-index: 5;
cursor: pointer;
}
/* =========================================================
Fix FAQ styling inside Template namespace (documentation)
========================================================= */
.ns-10 .ooo-faq__item {
background: linear-gradient(
to bottom,
rgba(245,196,0,0.04),
rgba(245,196,0,0.015)
) !important;
border: 1px solid rgba(0,0,0,0.08) !important;
}
.skin-theme-clientpref-night .ns-10 .ooo-faq__item {
background: linear-gradient(
to bottom,
rgba(245,196,0,0.10),
rgba(245,196,0,0.05)
) !important;
border-color: rgba(245,196,0,0.30) !important;
}
/* =========================================================
OOO TIP (Subtle Inline Callout)
========================================================= */
.ooo-tip {
margin: 18px 0;
padding: 10px 14px;
border-left: 4px solid var(--ooo-accent);
border-radius: 6px;
background: linear-gradient(
to right,
rgba(245,196,0,0.06),
transparent
);
font-size: 0.98rem;
line-height: 1.6;
}
/* Tip title */
.ooo-tip strong {
color: var(--ooo-accent);
font-weight: 700;
}
/* Dark theme tuning */
.skin-theme-clientpref-night .ooo-tip {
background: linear-gradient(
to right,
rgba(245,196,0,0.14),
transparent
);
}
/* Prevent wiki paragraph backgrounds inside */
.ooo-tip p {
margin: 0;
background: transparent !important;
}
/* =========================================================
OOO STEP (Guide / Tutorial Step Block)
========================================================= */
.ooo-step {
margin: 26px 0;
padding: 16px 18px;
border-left: 5px solid var(--ooo-accent);
border-radius: 6px;
background: linear-gradient(
to right,
rgba(245,196,0,0.06),
transparent
);
}
/* Header */
.ooo-step__title {
font-weight: 800;
font-size: 1.05rem;
margin-bottom: 10px;
color: var(--ooo-accent);
}
/* Step number */
.ooo-step__number {
font-weight: 900;
margin-right: 6px;
}
/* Layout container */
.ooo-step__body {
display: flex;
gap: 14px;
align-items: flex-start;
overflow: visible;
}
/* =========================================================
STEP IMAGE
========================================================= */
.ooo-step__image {
position: relative;
flex-shrink: 0;
}
/* Thumbnail */
.ooo-step__image img {
max-width: 140px;
height: auto;
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.15);
cursor: zoom-in;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
/* Hover zoom preview */
.ooo-step__image:hover img {
transform: scale(2.2);
position: relative;
z-index: 50;
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
/* =========================================================
STEP TEXT
========================================================= */
.ooo-step__content {
line-height: 1.65;
font-size: 0.98rem;
}
/* =========================================================
DARK MODE
========================================================= */
.skin-theme-clientpref-night .ooo-step {
background: linear-gradient(
to right,
rgba(245,196,0,0.12),
transparent
);
}
.skin-theme-clientpref-night .ooo-step__image img {
border-color: rgba(255,255,255,0.2);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.ooo-step__body {
flex-direction: column;
}
.ooo-step__image img {
max-width: 100%;
}
}
/* =========================================================
OOO BUILD BOX (Category Infobox)
========================================================= */
.ooo-buildbox {
margin: 30px 0;
padding: 0;
border: none;
background: none;
}
/* Title */
.ooo-buildbox__title {
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 10px;
color: var(--ooo-accent);
}
/* Description */
.ooo-buildbox__desc {
margin-bottom: 18px;
line-height: 1.6;
opacity: 0.9;
}
/* Tab spacing */
.ooo-buildbox .tabber {
margin-top: 10px;
}
/* Remove extra tab borders */
.tabber__header {
border-bottom:1px solid var(--ooo-border);
margin-bottom:10px;
}
/* =========================================================
OOO MINI INFO CARD (Item preview)
========================================================= */
.ooo-itemcard {
border: 1px solid var(--ooo-border);
border-radius: 8px;
padding: 12px 14px;
margin: 10px 0;
background: var(--ooo-bg-block);
display: flex;
gap: 14px;
align-items: center;
}
/* icon */
.ooo-itemcard__img img {
width: 48px;
height: 48px;
object-fit: contain;
}
/* name */
.ooo-itemcard__name {
font-weight: 700;
color: var(--ooo-accent);
}
/* info text */
.ooo-itemcard__meta {
font-size: 0.9rem;
opacity: 0.85;
}
/* =========================================================
OOO BROWSER (Stable layout)
========================================================= */
.ooo-browser {
display:flex;
gap:40px;
align-items:flex-start;
margin-top:14px;
}
/* LEFT LIST */
.ooo-browser__list{
width:240px;
min-width:240px;
flex-shrink:0;
}
/* RIGHT PANEL */
.ooo-browser__panel{
flex:1;
min-width:0;
border-left:1px solid var(--ooo-border);
padding-left:28px;
}
/* Prevent infobox overflow inside browser panel */
.ooo-browser__panel .ooo-infobox {
width:100% !important;
max-width:100%;
box-sizing:border-box;
}
/* Prevent tables inside infobox from breaking layout */
.ooo-browser__panel .ooo-infobox table {
width:100%;
table-layout:fixed;
}
/* Prevent long lines pushing layout */
.ooo-browser__panel .ooo-infobox td,
.ooo-browser__panel .ooo-infobox th {
word-break:break-word;
}
/* INFOBOX */
.ooo-browser__panel .ooo-infobox{
width:320px;
max-width:100%;
margin:0;
float:none;
}
/* ITEM BUTTON */
.ooo-browser__item{
display:block;
width:100%;
text-align:left;
padding:10px 12px;
margin:6px 0;
border-radius:10px;
border:1px solid var(--ooo-border);
background:rgba(245,196,0,0.04);
cursor:pointer;
font-weight:700;
transition:.15s ease;
position:relative;
}
.ooo-browser__item:hover{
border-color:rgba(245,196,0,0.55);
background:rgba(245,196,0,0.07);
}
.ooo-browser__item.is-active{
border-color:rgba(245,196,0,0.80);
background:rgba(245,196,0,0.10);
}
.ooo-browser__item.is-active::after{
content:"▶";
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
font-size:14px;
color:var(--ooo-accent);
}
/* PANELS */
.ooo-browser__info{
display:none;
}
.ooo-browser__info.is-active{
display:block;
}
/* MOBILE */
@media (max-width:1100px){
.ooo-browser{
flex-direction:column;
}
.ooo-browser__list{
width:100%;
min-width:0;
}
.ooo-browser__panel{
border-left:none;
padding-left:0;
border-top:1px solid var(--ooo-border);
padding-top:16px;
}
.ooo-browser__panel .ooo-infobox{
width:100%;
}
}
/* =========================================================
OOO BROWSER STABLE LEFT COLUMN
========================================================= */
.ooo-browser__listwrap{
position:sticky;
top:90px;
align-self:flex-start;
height:max-content;
}
/* =========================================================
OOO BUILDING TABS
========================================================= */
.tabber__tabs{
display:flex;
gap:8px;
margin-bottom:14px;
}
/* base tab */
.tabber__tab{
border:1px solid var(--ooo-border);
background:rgba(245,196,0,0.04);
transition:all .15s ease;
}
/* clickable element */
.tabber__tab a{
display:block;
padding:8px 14px;
font-weight:700;
color:var(--color-base) !important;
text-decoration:none !important;
border-bottom:none !important;
}
/* remove wiki link colors */
.tabber__tab a:link,
.tabber__tab a:visited,
.tabber__tab a:hover,
.tabber__tab a:active{
color:var(--color-base) !important;
text-decoration:none !important;
}
/* hover */
.tabber__tab:hover{
border:2px solid rgba(245,196,0,0.75);
background:rgba(245,196,0,0.12);
}
.tabber__tab:hover a{
padding:7px 13px;
}
/* active tab */
.tabber__tab[aria-selected="true"]{
border:2px solid rgba(245,196,0,0.95);
background:rgba(245,196,0,0.18);
}
.tabber__tab[aria-selected="true"] a{
padding:7px 13px;
}
/* remove tabber blue indicator line */
.tabber__tab:after,
.tabber__tab::after{
display:none !important;
}
/* =========================================================
FORCE STYLE TABBER TABS (override TabberNeue)
========================================================= */
.tabber__header a,
.tabber__header a:link,
.tabber__header a:visited,
.tabber__header a:hover,
.tabber__header a:active{
color: var(--color-base) !important;
text-decoration: none !important;
}
/* remove default active underline */
.tabber__header .tabber__tab::after{
display:none !important;
}
/* remove bottom highlight */
.tabber__header .tabber__tab{
border-bottom:none !important;
}
/* active tab */
.tabber__header .tabber__tab[aria-selected="true"]{
border:2px solid rgba(245,196,0,0.95) !important;
background:rgba(245,196,0,0.18) !important;
}
/* hover */
.tabber__header .tabber__tab:hover{
border:2px solid rgba(245,196,0,0.75) !important;
background:rgba(245,196,0,0.12) !important;
}
/* =========================================================
OOO INFOBOX VARIANT TABS (square style)
========================================================= */
.ooo-infobox-tabwrap .tabber__tab{
border-radius:0 !important;
}
.ooo-infobox-tabwrap .tabber__tab > a{
border-radius:0 !important;
}
/* remove rounded active outline */
.ooo-infobox-tabwrap .tabber__tab[aria-selected="true"]{
border-radius:0 !important;
}
/* =========================================================
OOO ITEM PANEL LAYOUT (Stable)
========================================================= */
.ooo-item-top{
display:grid;
grid-template-columns:260px 1fr;
gap:24px;
align-items:start;
}
.ooo-item-top .ooo-infobox{
width:260px;
min-width:260px;
}
.ooo-item-description{
line-height:1.6;
}
.ooo-item-body{
margin-top:20px;
padding-top:18px;
border-top:1px solid var(--ooo-border);
max-width:540px;
line-height:1.65;
}
/* =========================================================
OOO PANEL SECTION HEADINGS
(Used inside browser panels instead of == wiki headings ==)
========================================================= */
.ooo-section-heading{
font-weight:700;
font-size:1.15rem;
margin:14px 0 6px 0;
padding-bottom:4px;
border-bottom:2px solid var(--ooo-accent);
}