Jump to content

MediaWiki:Common.css: Difference between revisions

From Out of Ore Wiki
← Older editNewer edit →
mNo edit summary
mNo edit summary
Line 628: Line 628:


/* =========================================================
/* =========================================================
   OOO FAQ – Clean Industrial
   OOO FAQ – Clean Industrial Collapsible
   ========================================================= */
   ========================================================= */


Line 635: Line 635:
}
}


/* FAQ card */
/* FAQ card container */
.ooo-faq__item {
.ooo-faq__item {
  position: relative;
   border: 1px solid rgba(245,196,0,0.25);
   border: 1px solid rgba(245,196,0,0.25);
   border-radius: 8px;
   border-radius: 8px;
Line 642: Line 643:
   margin-bottom: 14px;
   margin-bottom: 14px;
   overflow: hidden;
   overflow: hidden;
   transition: border 0.2s ease, background 0.2s ease;
   transition: background 0.2s ease, border 0.2s ease;
}
}


/* Question */
/* Question block */
.ooo-faq__question {
.ooo-faq__question {
   padding: 16px 22px;
   padding: 16px 50px 16px 22px; /* right padding for arrow */
   font-weight: 700;
   font-weight: 700;
   cursor: pointer;
   cursor: pointer;
Line 653: Line 654:
}
}


/* Left accent */
/* Left accent bar */
.ooo-faq__question::before {
.ooo-faq__question::before {
   content: "";
   content: "";
Line 664: Line 665:
}
}


/* Hover */
/* Custom large arrow */
.ooo-faq__question:hover {
.ooo-faq__question::after {
  background: rgba(245,196,0,0.08);
}
 
/* Arrow (using MW toggle link) */
.ooo-faq__item .mw-collapsible-toggle {
  float: right;
  font-size: 0;
}
 
.ooo-faq__item .mw-collapsible-toggle::after {
   content: "▸";
   content: "▸";
   font-size: 18px;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
   font-size: 20px;
   color: var(--ooo-accent);
   color: var(--ooo-accent);
   transition: transform 0.2s ease;
   transition: transform 0.2s ease;
}
}


/* Rotate arrow */
/* Rotate arrow when expanded */
.ooo-faq__item:not(.mw-collapsed) .mw-collapsible-toggle::after {
.ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after {
   transform: rotate(90deg);
   transform: translateY(-50%) rotate(90deg);
}
 
/* Hide default tiny toggle visually */
.ooo-faq__item .mw-collapsible-toggle {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
}
}


Line 692: Line 695:
   line-height: 1.7;
   line-height: 1.7;
   border-top: 1px solid rgba(245,196,0,0.2);
   border-top: 1px solid rgba(245,196,0,0.2);
}
/* Hover */
.ooo-faq__question:hover {
  background: rgba(245,196,0,0.08);
}
}


Revision as of 20:45, 3 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;
}

.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 (Clean Branded Intro Section)
   ========================================================= */

.ooo-intro {
  margin: 30px 0 40px 0;
}

/* Title */
.ooo-intro__title {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 14px;

  /* Force brand color */
  color: var(--ooo-accent) !important;
}

/* Intro text */
.ooo-intro__text {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
  opacity: 0.95;
}

/* Divider AFTER content */
.ooo-intro__divider {
  height: 3px;
  width: 100%;
  background: var(--ooo-accent);
  opacity: 0.6;
}

/* =========================================================
   OOO FAQ – Clean Industrial Collapsible
   ========================================================= */

.ooo-faq {
  margin: 40px 0;
}

/* FAQ card container */
.ooo-faq__item {
  position: relative;
  border: 1px solid rgba(245,196,0,0.25);
  border-radius: 8px;
  background: rgba(245,196,0,0.05);
  margin-bottom: 14px;
  overflow: hidden;
  transition: background 0.2s ease, border 0.2s ease;
}

/* Question block */
.ooo-faq__question {
  padding: 16px 50px 16px 22px; /* right padding for arrow */
  font-weight: 700;
  cursor: pointer;
  position: relative;
}

/* Left accent bar */
.ooo-faq__question::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ooo-accent);
}

/* Custom large arrow */
.ooo-faq__question::after {
  content: "▸";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--ooo-accent);
  transition: transform 0.2s ease;
}

/* Rotate arrow when expanded */
.ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Hide default tiny toggle visually */
.ooo-faq__item .mw-collapsible-toggle {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
}

/* Answer */
.ooo-faq__answer {
  padding: 16px 22px;
  line-height: 1.7;
  border-top: 1px solid rgba(245,196,0,0.2);
}

/* Hover */
.ooo-faq__question:hover {
  background: rgba(245,196,0,0.08);
}

/* Dark theme */
.skin-theme-clientpref-night .ooo-faq__item {
  background: rgba(245,196,0,0.08);
  border-color: rgba(245,196,0,0.35);
}
Retrieved from "https://wiki.outofore.com/index.php?title=MediaWiki:Common.css&oldid=993"