BorderConnect Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
No edit summary
Tag: Reverted
Undo revision 3242 by Admin (talk)
Tag: Undo
Line 1,734: Line 1,734:


/* ============================================================
/* ============================================================
   --- TOC "VARIABLE SWAP" SYSTEM (The Fix) ---
   --- TABLE OF CONTENTS (TOC) - VARIABLE SYSTEM ---
  1. Define the palettes (Light vs Dark)
  2. Apply variables to the elements
   ============================================================ */
   ============================================================ */


/* 1. DEFINE VARIABLES & LAYOUT
/* 1. DEFAULT PALETTE (Light Mode) */
  We define the colors as variables first.
:root {
  By default, these are the LIGHT MODE colors. */
 
html body .mw-parser-output #toc,
html body .mw-parser-output .toc,
html body .vector-toc {
    /* --- COLOR VARIABLES (Default: Light) --- */
     --toc-bg: #ffffff;
     --toc-bg: #ffffff;
     --toc-border: #e1e8eb;
     --toc-border: #e1e8eb;
     --toc-shadow: rgba(0,0,0,0.05);
     --toc-shadow: rgba(0,0,0,0.05);
     --toc-title: #266065;
     --toc-title-color: #266065;
     --toc-title-border: #eef5f6;
     --toc-title-border: #eef5f6;
     --toc-text: #546e7a;
     --toc-text: #546e7a;
     --toc-hover-bg: #e0f2f1;
     --toc-hover-bg: #e0f2f1;
     --toc-hover-text: #266065;
     --toc-hover-text: #266065;
     --toc-indent-line: #e1e8eb;
     --toc-line: #e1e8eb;
     --toc-number: #b0bec5;
     --toc-number: #b0bec5;
}


    /* --- LAYOUT LOCKS (Structure) --- */
/* 2. DARK MODE PALETTE (OS Preference + Night Class) */
    display: inline-block !important;
/* Applies if OS is Dark AND User hasn't forced Light */
    box-sizing: border-box !important;
@media (prefers-color-scheme: dark) {
     width: auto !important;
     :root:not(.skin-theme-clientpref-light) {
    min-width: 200px !important;
        --toc-bg: #1e1e1e;
    max-width: 350px !important;
        --toc-border: #333333;
    border-radius: 12px !important;
        --toc-shadow: rgba(0,0,0,0.5);
    padding: 12px 15px !important;
        --toc-title-color: #4db6ac;
    margin-bottom: 25px !important;
        --toc-title-border: #333333;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
        --toc-text: #e0e0e0;
   
        --toc-hover-bg: #263238;
    /* --- APPLY THE VARIABLES --- */
        --toc-hover-text: #80cbc4;
    background-color: var(--toc-bg) !important;
        --toc-line: #424242;
    border: 1px solid var(--toc-border) !important;
        --toc-number: #757575;
    box-shadow: 0 4px 15px var(--toc-shadow) !important;
     }
      
    /* Smooth transition for the color swap */
    transition: all 0.3s ease !important;
}
}


/* 2. DARK MODE OVERRIDES (Update Variables Only)
/* Applies if User explicitly clicks Dark Mode button */
  If the HTML tag has the night class, we simply update the variable values.
html.skin-theme-clientpref-night {
  The browser automatically recalculates the styles above. */
 
html.skin-theme-clientpref-night body .mw-parser-output #toc,
html.skin-theme-clientpref-night body .mw-parser-output .toc,
html.skin-theme-clientpref-night body .vector-toc {
     --toc-bg: #1e1e1e;
     --toc-bg: #1e1e1e;
     --toc-border: #333333;
     --toc-border: #333333;
     --toc-shadow: rgba(0,0,0,0.5);
     --toc-shadow: rgba(0,0,0,0.5);
     --toc-title: #4db6ac;
     --toc-title-color: #4db6ac;
     --toc-title-border: #333333;
     --toc-title-border: #333333;
     --toc-text: #e0e0e0;
     --toc-text: #e0e0e0;
     --toc-hover-bg: #263238;
     --toc-hover-bg: #263238;
     --toc-hover-text: #80cbc4;
     --toc-hover-text: #80cbc4;
     --toc-indent-line: #424242;
     --toc-line: #424242;
     --toc-number: #757575;
     --toc-number: #757575;
}
}


/* 3. OS PREFERENCE FALLBACK
/* 3. FORCE LIGHT PALETTE (User explicitly clicks Light Mode) */
  Handles users who don't have the class but use System Dark Mode.
html.skin-theme-clientpref-light {
  (Excluded if user has explicitly forced Light Mode) */
    --toc-bg: #ffffff;
    --toc-border: #e1e8eb;
    --toc-shadow: rgba(0,0,0,0.05);
    --toc-title-color: #266065;
    --toc-title-border: #eef5f6;
    --toc-text: #546e7a;
    --toc-hover-bg: #e0f2f1;
    --toc-hover-text: #266065;
    --toc-line: #e1e8eb;
    --toc-number: #b0bec5;
}


@media (prefers-color-scheme: dark) {
    html:not(.skin-theme-clientpref-light) body .mw-parser-output #toc,
    html:not(.skin-theme-clientpref-light) body .mw-parser-output .toc,
    html:not(.skin-theme-clientpref-light) body .vector-toc {
        --toc-bg: #1e1e1e;
        --toc-border: #333333;
        --toc-shadow: rgba(0,0,0,0.5);
        --toc-title: #4db6ac;
        --toc-title-border: #333333;
        --toc-text: #e0e0e0;
        --toc-hover-bg: #263238;
        --toc-hover-text: #80cbc4;
        --toc-indent-line: #424242;
        --toc-number: #757575;
    }
}


/* ============================================================
/* ============================================================
   --- INNER ELEMENT STYLING (Uses the Variables) ---
   --- COMPONENT STYLING (Uses Variables) ---
  No need to edit below this line for colors!
   ============================================================ */
   ============================================================ */
/* Main Container */
.mw-parser-output #toc,
.mw-parser-output .toc,
.vector-toc {
    background-color: var(--toc-bg) !important;
    border: 1px solid var(--toc-border) !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    box-shadow: 0 4px 15px var(--toc-shadow) !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: 350px !important;
    margin-bottom: 25px !important;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}


/* Title Header */
/* Title Header */
html body .mw-parser-output #toctitle h2,
.mw-parser-output #toctitle h2,
html body .vector-toc-title {
.vector-toc-title {
     font-family: 'Segoe UI', Roboto, sans-serif !important;
     font-family: 'Segoe UI', Roboto, sans-serif !important;
     font-weight: 800 !important;
     font-weight: 800 !important;
    color: var(--toc-title-color) !important;
    font-size: 0.95rem !important;
     text-transform: uppercase !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
     letter-spacing: 0.5px !important;
     margin-bottom: 8px !important;
     margin-bottom: 8px !important;
     padding-bottom: 8px !important;
     padding-bottom: 8px !important;
     border-bottom-width: 2px !important;
     border-bottom: 2px solid var(--toc-title-border) !important;
    border-bottom-style: solid !important;
     width: 100% !important;
     width: 100% !important;
   
    /* Variable Colors */
    color: var(--toc-title) !important;
    border-bottom-color: var(--toc-title-border) !important;
}
}


/* Links (Base State) */
/* Links (Base) */
html body .mw-parser-output #toc a,
.mw-parser-output #toc a,
html body .vector-toc-link {
.vector-toc-link {
     text-decoration: none !important;
     text-decoration: none !important;
    color: var(--toc-text) !important;
    background: transparent !important;
     display: block !important;
     display: block !important;
     padding: 5px 8px !important;
     padding: 5px 8px !important;
     border-radius: 4px !important;
     border-radius: 4px !important;
     font-weight: 500 !important;
     font-weight: 500 !important;
    background: transparent !important;
     transition: all 0.2s ease !important;
     transition: all 0.2s ease !important;
   
    /* Variable Colors */
    color: var(--toc-text) !important;
}
}


/* Links (Hover State) */
/* Links (Hover) */
html body .mw-parser-output #toc a:hover,
.mw-parser-output #toc a:hover,
html body .vector-toc-link:hover {
.vector-toc-link:hover {
    text-decoration: none !important;
   
    /* Variable Colors */
     background-color: var(--toc-hover-bg) !important;
     background-color: var(--toc-hover-bg) !important;
     color: var(--toc-hover-text) !important;
     color: var(--toc-hover-text) !important;
    text-decoration: none !important;
}
/* List Structure */
.mw-parser-output #toc ul, .vector-toc-list {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.mw-parser-output #toc li, .vector-toc-list-item {
    margin: 0 !important; padding: 0 !important; font-size: 0.9rem !important;
    line-height: 1.2 !important; white-space: normal !important; word-wrap: break-word !important;
}
}


/* Indentation Lines */
/* Indentation Lines */
html body .mw-parser-output #toc ul ul,
.mw-parser-output #toc ul ul, .vector-toc-list .vector-toc-list {
html body .vector-toc-list .vector-toc-list {
     margin-left: 0 !important;
     margin-left: 0 !important;
     padding-left: 10px !important;
     padding-left: 10px !important;
     border-left-width: 2px !important;
     border-left: 2px solid var(--toc-line) !important;
     border-left-style: solid !important;
     margin-top: 2px !important;
      
     margin-bottom: 2px !important;
    /* Variable Colors */
    border-left-color: var(--toc-indent-line) !important;
}
}


/* Numbers & Toggles */
/* Numbers & Toggles */
html body .tocnumber { color: var(--toc-number) !important; }
.tocnumber { color: var(--toc-number) !important; font-size: 0.85em !important; margin-right: 5px !important; }
html body .toctogglelabel { color: var(--toc-text) !important; opacity: 0.8; }
.toctogglelabel { font-size: 0.75rem !important; color: var(--toc-text) !important; opacity: 0.7; }
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css"