Jump to content

Sidebar

From The Shivo Library
Revision as of 14:21, 26 December 2025 by Coobr (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/* ============================================== */ .vector-main-menu *, .vector-main-menu .vector-pinnable-header, .vector-main-menu .vector-pinnable-header-label { /* Also remove any border/box-shadow from pinned container */

  1. vector-main-menu-pinned-container * {

/* ================================================= */ /* 7) FORCE TOP TABS (READ / EDIT / HISTORY, ETC.) */ /* BLACK IN ALL MODES */ /* ================================================= */ /* (A) links in #p-views */

  1. p-views .vector-menu-content-list > li > a,
  2. p-views .vector-menu-content-list > li > a *,
  3. p-views .vector-menu-content-list > li *,
  4. p-views .vector-menu-content-list li span,
  5. p-views .vector-menu-content-list li svg {

fill: #000 !important; /* For icons */ /* (B) links in #p-associated-pages */

  1. p-associated-pages .vector-menu-content-list > li > a,
  2. p-associated-pages .vector-menu-content-list > li > a *,
  3. p-associated-pages .vector-menu-content-list > li *,
  4. p-associated-pages .vector-menu-content-list li span,
  5. p-associated-pages .vector-menu-content-list li svg {

/* ======================================================== */ /* 8) REMOVE TOGGLE BUTTONS */ /* FOR MAIN MENU, CONTENTS, TOOLS, APPEARANCE */ /* ======================================================== */ /* ======================================================== */ /* 9) HIDE LINK/BUTTON */ /* (WITH BROAD SELECTORS IN #vector-appearance) */ /* ======================================================== */

  1. vector-appearance a[href*="issue"],
  2. vector-appearance a[href*="dark"],
  3. vector-appearance a[title*="issue"],
  4. vector-appearance a[title*="dark"],
  5. vector-appearance button[title*="issue"],
  6. vector-appearance button[title*="dark"] {

/* ======================================================== */ /* 10) GREEN BOX FOR (#vector-toc), MATCHING SIZE */ /* ======================================================== */ background-color: #2E6625 !important; /* Green like the sides */ width: 20em !important; /* Adjust as desired */

  1. vector-toc .vector-pinnable-header-label,

background-color: transparent !important; /* If you also have #mw-panel-toc or #vector-toc-pinned-container, ensure they don't override the background: */ /* ===================================================== */ /* 11) MATCHING GREEN BOX & WIDTH FOR (#vector-main-menu) */ /* ===================================================== */ /* Give #vector-main-menu the same style: green background, rounded corners, same width (20em), white text. */ width: 20em !important; /* Same as #vector-toc */ /* Make the header/links inside #vector-main-menu white text */

  1. vector-main-menu .vector-pinnable-header,
  2. vector-main-menu .vector-pinnable-header-label,
  3. vector-main-menu .vector-menu-content-list,

background-color: transparent !important; /* ============================================================= */ /* 1) BASICS: Green sides, beige center, black text in all modes */ /* ============================================================= */ /* Overall body background: green */ background-color: #2E6625; /* Green sides */ color: #000; /* Default black text */ /* Main content area: beige, black text */ background-color: #f0e68c; /* Beige center */ /* Personal header area (top-right) */ background-color: #244F1D; /* Darker green */ /* Left nav portlet (#p-navigation) in dark-ish gray */ /* Keep large left #mw-panel green in all modes */ /* Buttons */ background-color: #2980b9; /* Blue */ background-color: #34495e; /* Darker */ /* ================================================= */ /* 2) LINK COLORS: DEEPER BLUE / RED (ALL NORMAL) */ /* ================================================= */ /* Normal link => deeper blue */ color: #1D4AB0 !important; /* Deeper blue */ /* Hover => deeper red */ color: #B30808 !important; /* Deeper red */ /* ======================================= */ /* 3) KEEP ARTICLE TEXT & HEADINGS BLACK */ /* IN ALL MODES */ /* ======================================= */ /* Article text always black */ /* Page titles always black */ /* Sidebar headings => black in light mode */ /* Article headings (h1 h6, .mw-headline) => black in ALL modes */ /* ======================================== */ /* 4) DARK MODE OVERRIDES (Night Mode) */ /* ======================================== */ /* Your wiki uses .vector-feature-night-mode-enabled.skin-theme-clientpref-night on <html> when in dark mode. */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night { /* We do all dark-mode overrides under this parent */ /* (A) Make *all* .mw-portlet headings & content white in dark mode. etc. */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-heading, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-content, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-heading *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-content * { /* (B) #mw-panel => ensure text & links white in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel a, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel input, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel label { /* (C) pinned panel => white in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-pinned-container, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-pinned-container * { /* (D) dropdown => white text in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-dropdown, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-dropdown *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .vector-appearance-landmark .vector-dropdown-label-text { /* ============================================== */ /* 5) FORCE HEADINGS WHITE */ /* (Pinned containers w/ .vector-pinnable-... )*/ /* ============================================== */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-page-tools .vector-pinnable-header-label, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-page-tools .vector-pinnable-header-label *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-toc .vector-pinnable-header-label, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-toc .vector-pinnable-header-label * { /* ================================================= */ /* 6) REMOVE BORDERS/SHADOWS FROM MAIN MENU CHILDREN */ /* (But keep container green & rounded) */ /* ================================================= */ /* We remove border/shadows from child elements only, letting #vector-main-menu keep its own background/radius. */ .vector-main-menu * { /* ================================================= */ /* 7) FORCE TOP TABS (READ / EDIT / HISTORY, ETC.) */ /* BLACK IN ALL MODES */ /* ================================================= */ /* (A) links in #p-views */

  1. p-views .vector-menu-content-list > li > a,
  2. p-views .vector-menu-content-list > li > a *,
  3. p-views .vector-menu-content-list > li *,
  4. p-views .vector-menu-content-list li span,
  5. p-views .vector-menu-content-list li svg {

fill: #000 !important; /* For icons */ /* (B) links in #p-associated-pages */

  1. p-associated-pages .vector-menu-content-list > li > a,
  2. p-associated-pages .vector-menu-content-list > li > a *,
  3. p-associated-pages .vector-menu-content-list > li *,
  4. p-associated-pages .vector-menu-content-list li span,
  5. p-associated-pages .vector-menu-content-list li svg {

/* ======================================================== */ /* 8) REMOVE TOGGLE BUTTONS */ /* FOR MAIN MENU, CONTENTS, TOOLS, APPEARANCE */ /* ======================================================== */ /* ======================================================== */ /* 9) HIDE LINK/BUTTON */ /* (WITH BROAD SELECTORS IN #vector-appearance) */ /* ======================================================== */

  1. vector-appearance a[href*="issue"],
  2. vector-appearance a[href*="dark"],
  3. vector-appearance a[title*="issue"],
  4. vector-appearance a[title*="dark"],
  5. vector-appearance button[title*="issue"],
  6. vector-appearance button[title*="dark"] {

/* ======================================================== */ /* 10) GREEN BOX FOR (#vector-toc), 20em WIDTH */ /* ======================================================== */ background-color: #2E6625 !important; /* Green like the sides */ width: 20em !important; /* Adjust as desired */

  1. vector-toc .vector-pinnable-header-label,

background-color: transparent !important; /* ======================================================== */ /* 11) MATCHING GREEN BOX & WIDTH FOR MAIN MENU (#vector-main-menu) */ /* ======================================================== */ background-color: #2E6625 !important; /* Green like contents */ border-radius: 5px !important; /* Rounded corners */ width: 20em !important; /* Same as #vector-toc */ color: #fff !important; /* White text by default */ /* ============================================================= */ /* 1) BASICS: Green sides, beige center, black text in all modes */ /* ============================================================= */ /* Overall body background: green */ background-color: #2E6625; /* Green sides */ color: #000; /* Default black text */ /* Main content area: beige, black text */ background-color: #f0e68c; /* Beige center */ /* Personal header area (top-right) */ background-color: #244F1D; /* Darker green */ /* Left nav portlet (#p-navigation) in dark-ish gray */ /* Keep large left #mw-panel green in all modes */ /* Buttons */ background-color: #2980b9; /* Blue */ background-color: #34495e; /* Darker */ /* ================================================= */ /* 2) LINK COLORS: DEEPER BLUE / RED (ALL NORMAL) */ /* ================================================= */ /* Normal link => deeper blue */ color: #1D4AB0 !important; /* Deeper blue */ /* Hover => deeper red */ color: #B30808 !important; /* Deeper red */ /* ======================================= */ /* 3) KEEP ARTICLE TEXT & HEADINGS BLACK */ /* IN ALL MODES */ /* ======================================= */ color: #000 !important; /* Article text always black */ color: #000 !important; /* Page titles always black */ /* Sidebar headings => black in light mode */ /* Article headings (h1 h6, .mw-headline) => black in ALL modes */ /* ======================================== */ /* 4) DARK MODE OVERRIDES (Night Mode) */ /* ======================================== */ /* .vector-feature-night-mode-enabled.skin-theme-clientpref-night on <html> */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night { /* Wrap dark-mode rules here */ /* (A) Force .mw-portlet headings & content white in dark mode (Navigation, Tools, etc.) */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-heading, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-content, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-heading *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-content * { /* (B) #mw-panel => text & links white in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel a, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel input, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel label { /* (C) pinned panel => white text in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-pinned-container, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-pinned-container * { /* (D) dropdown => white text in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-dropdown, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-dropdown *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .vector-appearance-landmark .vector-dropdown-label-text { /* (E) Tools & TOC headings => white in dark mode (pinned .vector-pinnable-header-label) */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-page-tools .vector-pinnable-header-label, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-page-tools .vector-pinnable-header-label *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-toc .vector-pinnable-header-label, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-toc .vector-pinnable-header-label * { /* ===================================================== */ /* 5) REMOVE BORDERS/SHADOWS INSIDE MAIN MENU CHILDREN */ /* (But keep the parent container's color & rounding) */ /* ===================================================== */ .vector-main-menu * { /* ================================================= */ /* 6) FORCE TOP TABS (READ / EDIT / HISTORY, ETC.) */ /* BLACK IN ALL MODES */ /* ================================================= */ /* A) => #p-views */

  1. p-views .vector-menu-content-list > li > a,
  2. p-views .vector-menu-content-list > li > a *,
  3. p-views .vector-menu-content-list > li *,
  4. p-views .vector-menu-content-list li span,
  5. p-views .vector-menu-content-list li svg {

fill: #000 !important; /* For icons */ /* B) => #p-associated-pages */

  1. p-associated-pages .vector-menu-content-list > li > a,
  2. p-associated-pages .vector-menu-content-list > li > a *,
  3. p-associated-pages .vector-menu-content-list > li *,
  4. p-associated-pages .vector-menu-content-list li span,
  5. p-associated-pages .vector-menu-content-list li svg {

/* ======================================================== */ /* 7) REMOVE TOGGLE BUTTONS */ /* FOR MAIN MENU, CONTENTS, TOOLS, APPEARANCE */ /* ======================================================== */ /* ======================================================== */ /* 8) HIDE LINK/BUTTON */ /* (WITH BROAD SELECTORS IN #vector-appearance) */ /* ======================================================== */

  1. vector-appearance a[href*="issue"],
  2. vector-appearance a[href*="dark"],
  3. vector-appearance a[title*="issue"],
  4. vector-appearance a[title*="dark"],
  5. vector-appearance button[title*="issue"],
  6. vector-appearance button[title*="dark"] {

/* ======================================================== */ /* 9) GREEN BOX FOR (#vector-toc), 20em WIDTH */ /* ======================================================== */ background-color: #2E6625 !important; /* Green like the sides */ width: 20em !important; /* Adjust as desired */ /* Move it fully left to match main menu offset (if pinned on left) */

  1. vector-toc .vector-pinnable-header-label,

background-color: transparent !important; /* If you also have #mw-panel-toc or #vector-toc-pinned-container, ensure they don't override the background: */ /* Add the line under label => same white line as you see */

  1. vector-toc .vector-pinnable-header-label {

border-bottom: 1px solid #fff !important; /* ======================================================== */ /* 10) MATCHING GREEN BOX & WIDTH FOR MAIN MENU (#vector-main-menu) */ /* SHIFT IT LEFT, ADD THE SAME WHITE LINE */ /* ======================================================== */ background-color: #2E6625 !important; /* Same green as #vector-toc */ width: 20em !important; /* Match #vector-toc */ color: #fff !important; /* White text */ /* Move it fully left to match alignment with #vector-toc */ /* Add the same line under heading */

  1. vector-main-menu .vector-pinnable-header-label {

border-bottom: 1px solid #fff !important; /* ============================================================= */ /* 1) BASICS: Green sides, beige center, black text in all modes */ /* ============================================================= */ /* Overall body background: green */ background-color: #2E6625; /* Green sides */ color: #000; /* Default black text */ /* Main content area: beige, black text */ background-color: #f0e68c; /* Beige center */ /* Personal header area (top-right) */ background-color: #244F1D; /* Darker green */ /* Left nav portlet (#p-navigation) in dark-ish gray */ /* Keep large left #mw-panel green in all modes */ /* Buttons */ background-color: #2980b9; /* Blue */ background-color: #34495e; /* Darker */ /* ================================================= */ /* 2) LINK COLORS: DEEPER BLUE / RED (ALL NORMAL) */ /* ================================================= */ /* Normal link => deeper blue */ color: #1D4AB0 !important; /* Deeper blue */ /* Hover => deeper red */ color: #B30808 !important; /* Deeper red */ /* ======================================= */ /* 3) KEEP ARTICLE TEXT & HEADINGS BLACK */ /* IN ALL MODES */ /* ======================================= */ color: #000 !important; /* Article text always black */ color: #000 !important; /* Page titles always black */ /* Sidebar headings => black in light mode */ /* Article headings (h1 h6, .mw-headline) => black in ALL modes */ /* ======================================== */ /* 4) DARK MODE OVERRIDES (Night Mode) */ /* ======================================== */ /* .vector-feature-night-mode-enabled.skin-theme-clientpref-night on <html> */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night { /* Wrap dark-mode rules here */ /* (A) Force .mw-portlet headings & content white in dark mode (Navigation, Tools, etc.) */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-heading, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-content, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-heading *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .mw-portlet .vector-menu-content * { /* (B) #mw-panel => text & links white in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel a, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel input, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #mw-panel label { /* (C) pinned panel => white text in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-pinned-container, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-pinned-container * { /* (D) dropdown => white text in dark mode */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-dropdown, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-appearance-dropdown *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night .vector-appearance-landmark .vector-dropdown-label-text { /* (E) Tools & TOC headings => white in dark mode (pinned .vector-pinnable-header-label) */ html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-page-tools .vector-pinnable-header-label, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-page-tools .vector-pinnable-header-label *, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-toc .vector-pinnable-header-label, html.vector-feature-night-mode-enabled.skin-theme-clientpref-night #vector-toc .vector-pinnable-header-label * { /* ===================================================== */ /* 5) REMOVE BORDERS/SHADOWS INSIDE MAIN MENU CHILDREN */ /* (But keep the parent container's color & rounding) */ /* ===================================================== */ .vector-main-menu * { /* ================================================= */ /* 6) FORCE TOP TABS (READ / EDIT / HISTORY, ETC.) */ /* BLACK IN ALL MODES */ /* ================================================= */ /* A) => #p-views */

  1. p-views .vector-menu-content-list > li > a,
  2. p-views .vector-menu-content-list > li > a *,
  3. p-views .vector-menu-content-list > li *,
  4. p-views .vector-menu-content-list li span,
  5. p-views .vector-menu-content-list li svg {

fill: #000 !important; /* For icons */ /* B) => #p-associated-pages */

  1. p-associated-pages .vector-menu-content-list > li > a,
  2. p-associated-pages .vector-menu-content-list > li > a *,
  3. p-associated-pages .vector-menu-content-list > li *,
  4. p-associated-pages .vector-menu-content-list li span,
  5. p-associated-pages .vector-menu-content-list li svg {

/* ======================================================== */ /* 7) REMOVE TOGGLE BUTTONS */ /* FOR MAIN MENU, CONTENTS, TOOLS, APPEARANCE */ /* ======================================================== */ /* ======================================================== */ /* 8) HIDE LINK/BUTTON */ /* (WITH BROAD SELECTORS IN #vector-appearance) */ /* ======================================================== */

  1. vector-appearance a[href*="issue"],
  2. vector-appearance a[href*="dark"],
  3. vector-appearance a[title*="issue"],
  4. vector-appearance a[title*="dark"],
  5. vector-appearance button[title*="issue"],
  6. vector-appearance button[title*="dark"] {

/* ======================================================== */ /* 9) ALIGNMENT RESET FOR BOTH MENU & TOC CONTAINERS */ /* (Remove any margin/padding from parent containers) */ /* ======================================================== */ /* This helps ensure the same left offset for #vector-main-menu and #vector-toc */ /* ======================================================== */ /* 10) GREEN BOX FOR (#vector-toc), 20em WIDTH */ /* ======================================================== */ margin-left: 0 !important; /* Zero left margin */ /* White text & no boxy backgrounds inside #vector-toc */

  1. vector-toc .vector-pinnable-header-label,

background-color: transparent !important; /* Add white line under heading */

  1. vector-toc .vector-pinnable-header-label {

border-bottom: 1px solid #fff !important; /* ======================================================== */ /* 11) MATCHING GREEN BOX & WIDTH FOR MAIN MENU (#vector-main-menu) */ /* SHIFT IT LEFT, ADD THE SAME WHITE LINE */ /* ======================================================== */ margin-left: 0 !important; /* Zero left margin to align with #vector-toc */ /* White line under heading */

  1. vector-main-menu .vector-pinnable-header-label {

border-bottom: 1px solid #fff !important;

Retrieved from "https://shivolibrary.wiki/index.php?title=Sidebar&oldid=14"