|
|
| Line 1: |
Line 1: |
| /* 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;
| |
| }
| |
|
| |
| .ooo-infobox-tabwrap .tabber__tabs::after {
| |
| content: none !important;
| |
| }
| |
|
| |
| .ooo-infobox-tabwrap .tabber__tab--active {
| |
| box-shadow: none !important;
| |
| margin-bottom: 0 !important;
| |
| }
| |
|
| |
| .ooo-infobox-tabwrap .tabber__tabs {
| |
| margin-bottom: 0px !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 BUILD BOX (Category Infobox) |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| .ooo-card { | | .ooo-buildbox { |
| padding: 30px; | | margin: 30px 0; |
| border-radius: 14px;
| | padding: 22px 24px; |
| 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-radius: 10px; |
| border: 1px solid transparent; | | border: 1px solid var(--ooo-border); |
| 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 {
| | background: var(--ooo-bg-block); |
| 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 */ | | /* Title */ |
| .ooo-intro__title { | | .ooo-buildbox__title { |
| font-size: 1.9rem; | | font-size: 1.25rem; |
| font-weight: 800; | | font-weight: 800; |
| letter-spacing: 0.5px;
| | margin-bottom: 10px; |
| margin-bottom: 14px; | |
|
| |
|
| color: var(--ooo-accent) !important; | | color: var(--ooo-accent); |
| } | | } |
|
| |
|
| /* Intro text */ | | /* Description */ |
| .ooo-intro__text { | | .ooo-buildbox__desc { |
| font-size: 1.05rem;
| |
| line-height: 1.7;
| |
| margin-bottom: 18px; | | 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; | | line-height: 1.6; |
| | opacity: 0.9; |
| } | | } |
|
| |
|
| /* Tip title */ | | /* Tab spacing */ |
| .ooo-tip strong { | | .ooo-buildbox .tabber { |
| color: var(--ooo-accent);
| | margin-top: 10px; |
| 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%;
| |
| }
| |
|
| |
|
| | /* Remove extra tab borders */ |
| | .ooo-buildbox .tabber__header { |
| | border-bottom: 1px solid var(--ooo-border); |
| } | | } |