Out of Ore Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
mNo edit summary
mNo edit summary
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-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 BUILD BOX (Category Infobox)
Retrieved from "https://wiki.outofore.com/index.php/MediaWiki:Common.css"