Template:Theme-STR: Difference between revisions

From HUIJIA FUN
← Older editNewer edit →
VisualWikitext
Debug: Color Scheme and Sidetools
Code updated to V3.0 version
Line 3: Line 3:
<style>
<style>
/**
/**
  * S.T.R. OFFICE — TIMELESS THEME (v2.1, refactored)
* HUIJIA FUN · Theme-STR (Setting Zone theme)
  * Theme: Deep Cyber-Mystic
  * S.T.R. OFFICE — TIMELESS THEME v3.0
* Palette "DeepFi Cyber": #3F3954 #025F32 #C1E1A6 #000000  (active)
  * Design language: VGR Design System · Setting Zone (night)
* Palette "DeepFi Noble": #3F3954 #025F32 #FFD700 #FFFFFF
*  → for Noble, set --str-accent and --str-heading to #FFD700
  *
  *
  * v2.1: deduped font imports, merged text-brightness selectors,
  *   Sub-Utopia: a city that came close to an ideal and never arrived.
  *      consolidated mobile fixes into one media query,
*  Order                → 40px grid on the content card, scanlines, corner markers
  *      removed dead code, fixed section numbering.
*  Warmth of the ideal  → old-style serif body text (LXGW Neo ZhiSong)
*  Dipfield            → violet-black ground + Plurimod light-green headings
*                          + green-leaning sidebar links + pale Dipfield violet accent
*
* v3.0: Strictly follows the VGR Design language; search box, site name and personal menu
  *      share one height, width and corner radius;
  *      removed the full-screen flicker layer (photosensitivity risk), scroll fade-ins
*      (headings could stay hidden) and the ambient pulse;
*      no longer force-recolors every span in the content (inline colors work again);
*      all motion respects prefers-reduced-motion.
  */
  */


/* === 1. Fonts (single consolidated import) === */
/* === 1. Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@600;900&family=JetBrains+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@400;600&family=Noto+Sans+SC:wght@400;500&family=Source+Serif+4:wght@400;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=JetBrains+Mono:wght@400;500;700&family=Share+Tech+Mono&display=swap');
/* LXGW Neo ZhiSong: body text. Full package is ~4.4MB; Noto Serif SC shows while it loads on first visit. SIL OFL 1.1 */
@import url('https://cdn.jsdelivr.net/npm/[email protected]/style.css');
@import url('https://cdn.jsdelivr.net/npm/[email protected]/style.css');
@import url('https://cdn.jsdelivr.net/npm/[email protected]/style.css');


/* === 2. Root variables === */
/* === 2. Tokens === */
:root {
:root,
    --str-deep: #3F3954;
html.skin-theme-clientpref-night {
     --str-green: #025F32;
     /* Source colors */
     --str-green-bright: #0A8F4F;
     --src-huijia-green: #025F32;
    --str-green-glow: #22CC66;
     --src-dragon-green: #3B7E3D;
     --str-accent: #C1E1A6;
     --src-plurimod-light: #C1E1A6;
    --str-black: #000000;
     --src-dipfield-violet: #3F3954;
     --str-bg-body: #0D0D12;
     --str-bg-card: #101018;
    --str-bg-card-alt: #161622;
    --str-bg-sidebar: rgba(0, 0, 0, 0);
    --str-border: #28284A;
    --str-border-glow: rgba(2, 95, 50, 0.4);


     --background-color-warning-subtle: #202040;
    /* Paper: Dipfield violet-black */
     --color-base--emphasized: #2cff05;
     --paper: #0D0D12;
     --color-surface-2: #202040;
    --paper-raised: #101018;
     --paper-sunk: #08080F;
     --paper-alt: #161622;


     --str-text: #E8E8F4;
    /* Ink */
    --str-text-dim: #AAAAAA;
     --ink: #E8E8F4;           /* body text 15.6:1 */
     --str-text-bright: #F5F5FF;
     --ink-bright: #F5F5FF;
     --str-link: #66EEBB;
     --ink-muted: #A9A6BF;     /* captions 8.0:1 */
     --str-link-hover: #C1E1A6;
     --heading: #C1E1A6;       /* headings: Plurimod light green 13.2:1 */
     --str-heading: #C1E1A6;
     --nav-ink: #22CC66;       /* sidebar: green-leaning nav text 9.1:1 */


     --str-radius: 8px;
    /* Rules */
     --str-glow-green: 0 0 25px rgba(34, 204, 102, 0.9);
    --rule: #28284A;          /* decorative lines */
     --rule-strong: #5A5A8A;   /* borders that carry information, e.g. inputs 3.0:1 */
     --grid-line: rgba(193, 225, 166, 0.03);
    --heading-bar: #025F32;


     --font-heading: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
    /* Accent */
     --font-body: 'JetBrains Mono', 'Fira Code', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
     --accent: #B9B2D6;        /* Setting Zone accent: pale Dipfield violet 9.4:1 */
     --font-code: 'JetBrains Mono', monospace;
    --accent-fill: #025F32;
     --font-banner: 'ZCOOL XiaoWei', sans-serif;
     --accent-fill-hover: #3B7E3D;
     --shadow-subtle: 0 10px 10px rgba(0, 0, 0, 0.1);
     --on-accent: #FFFFFF;     /* 7.8:1 / 4.96:1 */
}
     --accent-tint: rgba(185, 178, 214, 0.08);
     --green-tint: rgba(2, 95, 50, 0.18);
    --link: #66EEBB;
    --link-visited: #55CCAA;
    --link-hover: #C1E1A6;
    --link-new: #EE7766;
    --focus: #8FB0FF;


/* === 3. Nav span colors === */
    /* Type */
#mw-site-navigation span,
    --font-body: "LXGW Neo ZhiSong", "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", serif;
#mw-related-navigation span,
    --font-serif: "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", serif;
#personal .dropdown span,
    --font-display: "Noto Serif SC", "Source Han Serif SC", serif;
#p-normal-catlinks a,
    --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
#p-variants-desktop a {
    --font-latin: "Cormorant Garamond", "EB Garamond", Georgia, serif;
     color: #22CC66 !important;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
     text-decoration: none !important;
     --font-hud: "Share Tech Mono", "JetBrains Mono", monospace;
}
     --font-banner: "ZCOOL XiaoWei", "Noto Serif SC", serif;
    --font-scripture: "LXGW WenKai Screen", "Kaiti SC", STKaiti, KaiTi, serif;


.sidebar-inner li a:before {
    /* Spacing */
    color: var(--str-accent) !important;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
     filter: drop-shadow(0 0 5px rgba(120, 205, 110, 1)) !important;
     --space-6: 24px; --space-8: 32px; --space-12: 48px;
}


.sidebar-inner li a:hover:before {
    /* Shape: shared by header controls, cards, sidebars and the personal menu */
     color: #FFFFFF !important;
    --radius: 6px;
     text-shadow: 0 0 10px #22CC66, 0 0 20px #22CC66 !important;
    --radius-sm: 4px;
}
     --radius-xs: 2px;
     --radius-none: 0;
    --radius-pill: 999px;
    --control-h: 40px;
    --control-w: 320px;


/* === 4. Personal dropdown === */
    /* Variables read by the skin and extensions */
#personal-inner.dropdown {
    --color-primary: var(--accent-fill);
     background-color: transparent !important;
    --color-progressive: var(--link);
     border: none !important;
     --background-color-progressive: var(--accent-fill);
     box-shadow: none !important;
     --border-color-progressive: var(--accent);
     padding: 0 !important;
     /* The skin's surface levels (white and light grey by default), replaced with five shades of Dipfield violet-black */
}
    --color-surface-0: #0D0D12;   /* = paper, bottom layer */
     --color-surface-1: #101018;  /* = paper-raised, cards and menus */
    --color-surface-2: #161622;  /* = paper-alt, toolbars and overlays */
    --color-surface-3: #1E1E2E;   /* hover and selected items */
    --color-surface-4: #2A2A40;  /* lightest layer: dividers and pressed states */


#personal-inner #p-personal {
    /* Matching text, border and interaction variables, also switched to dark */
     background-color: #1a1a1a !important;
     --color-base: var(--ink);
     border: 1px solid var(--str-accent) !important;
     --color-base--subtle: var(--ink-muted);
     border-radius: 8px !important;
     --color-emphasized: var(--ink-bright);
     padding: 10px !important;
     --color-subtle: var(--ink-muted);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 8px var(--str-accent) !important;
    --background-color-base: var(--paper-raised);
}
     --background-color-interactive: var(--color-surface-3);
 
     --background-color-interactive-subtle: var(--color-surface-2);
#p-personal .mw-portlet-body {
     --background-color-quiet--hover: rgba(185, 178, 214, 0.08);
    background-color: transparent !important;
     --border-color-base: var(--rule);
     border: none !important;
     --border-color-base--darker: var(--rule-strong);
}
     --border-color-subtle: var(--rule);
 
    --background-color-warning-subtle: #2A2440;
#p-personal-label {
    background-color: transparent !important;
     color: var(--str-accent) !important;
     text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
     margin-bottom: 10px;
     padding-bottom: 6px;
     border-bottom: 1px solid var(--str-accent) !important;
}


#p-personal .mw-portlet-body ul li {
    /* Legacy variable names, kept for other templates */
     background-color: transparent !important;
    --str-deep: var(--src-dipfield-violet);
     transition: background-color 0.15s ease;
    --str-green: var(--src-huijia-green);
}
    --str-accent: var(--heading);
    --str-bg-body: var(--paper);
    --str-bg-card: var(--paper-raised);
    --str-bg-card-alt: var(--paper-alt);
    --str-border: var(--rule);
    --str-text: var(--ink);
    --str-link: var(--link);
    --str-heading: var(--heading);
    --mw-primary: var(--accent-fill);
     --mw-border: var(--rule-strong);
     --font-heading: var(--font-serif);
    --font-code: var(--font-mono);


#p-personal .mw-portlet-body ul li:hover {
     color-scheme: dark;
     background-color: rgba(0, 255, 100, 0.1) !important;
    border-radius: 4px;
}
}


.kawaii-header-background { display: none !important; }
/* === 3. Page base: scanlines and drifting glow === */
 
/* === 5. Body + atmospheric overlays === */
body {
body {
     background-color: var(--str-bg-body) !important;
     background-color: var(--paper) !important;
     color: var(--str-text) !important;
     color: var(--ink) !important;
     font-family: var(--font-body) !important;
     font-family: var(--font-sans) !important;
     font-size: 16px;
     font-size: 16px;
     line-height: 1.75;
     line-height: 1.8;
     -webkit-font-smoothing: antialiased;
     -webkit-font-smoothing: antialiased;
     position: relative;
     position: relative;
}
}


body::before { /* static CRT scanlines */
body::before { /* static scanlines */
     content: "";
     content: "";
     position: fixed;
     position: fixed;
Line 140: Line 159:
}
}


body::after { /* drifting luminance blobs */
body::after { /* drifting glow: deep green and Dipfield violet */
     content: "";
     content: "";
     position: fixed;
     position: fixed;
Line 165: Line 184:
}
}


/* === 6. Kill desktop sticky header === */
::selection { background-color: var(--accent-fill) !important; color: var(--on-accent) !important; }
 
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
 
.kawaii-header-background { display: none !important; }
 
/* === 4. Header
  Stacking: above #mw-content-container (skin z-index: 100) at every width, so the avatar menu is never covered by the content.
  Position: the sticky header is disabled on desktop widths only; mobile keeps Timeless's own positioning. === */
#mw-header-container,
#mw-header-container,
#mw-header-hack,
#mw-header-hack,
.mw-header-container {
.mw-header-container {
    position: relative !important;
     background-color: var(--paper) !important;
    top: auto !important;
     border-bottom: 1px solid var(--rule) !important;
     background-color: var(--str-bg-body) !important;
     z-index: 1000 !important;
     border-bottom: 1px solid var(--str-border) !important;
}
     z-index: 100 !important;
@media screen and (min-width: 851px) {
    #mw-header-container,
    #mw-header-hack,
    .mw-header-container,
    .ts-container,
    #mw-header-container.ts-sticky,
    .mw-header-container[style*="position"] {
        position: relative !important;
        top: auto !important;
    }
    #mw-header-container::after { display: none !important; }
}
}
.mw-header-content,
.mw-header-content,
#mw-header {
#mw-header { background: transparent !important; }
    background: transparent !important;
    position: relative !important;
}


.ts-container,
/* === 5. Site name S.T.R. OFFICE (wordmark and glitch kept, at a lower frequency) === */
#mw-header-container.ts-sticky,
.mw-header-container[style*="position"] {
    position: relative !important;
    top: auto !important;
}
 
header, nav { position: relative !important; }
#mw-header-container::after { display: none !important; }
 
/* === 7. Banner / site title with glitch === */
#p-banner {
#p-banner {
     color: transparent !important;
     color: transparent !important;
     font-size: 0 !important;
     font-size: 0 !important;
     position: relative;
     position: relative;
    display: flex !important;
    align-items: center;
    height: var(--control-h);
}
}
#p-banner a,
#p-banner a,
#p-banner span {
#p-banner span {
Line 204: Line 229:
     font-size: 0 !important;
     font-size: 0 !important;
}
}
#p-banner::after {
#p-banner::after {
     content: "S.T.R. OFFICE";
     content: "S.T.R. OFFICE";
Line 210: Line 234:
     font-size: 22px;
     font-size: 22px;
     font-weight: 700;
     font-weight: 700;
     color: var(--str-accent) !important;
    line-height: var(--control-h);
     color: var(--heading) !important;
     letter-spacing: 4px;
     letter-spacing: 4px;
     text-transform: uppercase;
     text-transform: uppercase;
     text-shadow: 0 0 8px rgba(193, 225, 166, 0.7), 0 0 25px rgba(2, 95, 50, 0.5), 0 0 50px rgba(2, 95, 50, 0.2);
     text-shadow: 0 0 8px rgba(193, 225, 166, 0.5), 0 0 24px rgba(2, 95, 50, 0.4);
     position: relative;
     position: relative;
     display: inline-block;
     display: inline-block;
     animation: str-glitch-subtle 6s infinite;
     animation: str-glitch-subtle 9s infinite;
}
}
@keyframes str-glitch-subtle {
@keyframes str-glitch-subtle {
     0%, 88%, 100% {
     0%, 93%, 100% {
         text-shadow: 0 0 8px rgba(193, 225, 166, 0.7), 0 0 25px rgba(2, 95, 50, 0.5), 0 0 50px rgba(2, 95, 50, 0.2);
         text-shadow: 0 0 8px rgba(193, 225, 166, 0.5), 0 0 24px rgba(2, 95, 50, 0.4);
         transform: translate(0, 0) skewX(0deg);
         transform: translate(0, 0) skewX(0deg);
         opacity: 1;
         opacity: 1;
     }
     }
     89% { text-shadow: -3px 0 #C1E1A6, 3px 0 #025F32; transform: translate(-2px, 0) skewX(-1deg); opacity: 0.85; }
     94% { text-shadow: -3px 0 #C1E1A6, 3px 0 #025F32; transform: translate(-2px, 0) skewX(-1deg); opacity: 0.88; }
     90% { text-shadow: 3px 0 #C1E1A6, -3px 0 #3F3954; transform: translate(2px, 0) skewX(1deg); opacity: 0.9; }
     95% { text-shadow: 3px 0 #C1E1A6, -3px 0 #3F3954; transform: translate(2px, 0) skewX(1deg); opacity: 0.92; }
     91% { text-shadow: 0 0 8px rgba(193, 225, 166, 0.7); transform: translate(0, 0) skewX(0deg); opacity: 1; }
     96% { text-shadow: 0 0 8px rgba(193, 225, 166, 0.5); transform: translate(0, 0); opacity: 1; }
    92% { text-shadow: -1px 2px #C1E1A6, 1px -2px #025F32, 0 0 30px rgba(34, 204, 102, 0.4); transform: translate(1px, -1px); opacity: 0.88; }
    93% { transform: translate(0, 0); opacity: 1; }
}
 
/* === 8. Content wrapper + card === */
#mw-content-wrapper {
    background: transparent !important;
    padding-top: 0;
}
 
#mw-content {
    background-color: var(--str-bg-card) !important;
    color: var(--str-text) !important;
    padding: 25px;
    border-radius: var(--str-radius);
    border: 1px solid var(--str-border);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    background-image:
        linear-gradient(rgba(193, 225, 166, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(193, 225, 166, 0.018) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    animation: str-page-enter 0.6s ease-out;
}
}


@keyframes str-page-enter {
/* === 6. Search box (shared height, width and corner radius) === */
    from { opacity: 0; transform: translateY(15px); }
    to  { opacity: 1; transform: translateY(0); }
}
 
/* Body text forced bright (consolidated) */
#mw-content,
#mw-content p, #mw-content li, #mw-content dd, #mw-content dt,
#mw-content span, #mw-content div,
.mw-body-content,
.mw-body-content p, .mw-body-content li, .mw-body-content span {
    color: var(--str-text) !important;
}
 
/* Bug Defender
@media screen and (min-width: 1100px) {
    #mw-content-container { margin-top: 25px; }
} */
 
@media screen and (min-width: 851px) {
    #p-variants-desktop h3 {
        padding: 0;
        margin: 0;
        display: flex;
        height: 55px;
        align-items: center;
    }
}
 
/* === 9. Pill search bar === */
#p-search {
#p-search {
     margin: 0 20px !important;
     margin: 0 20px !important;
Line 287: Line 260:
     align-items: center;
     align-items: center;
}
}
#searchform {
#searchform {
     background: #3F3954 !important;
     background: var(--paper-alt) !important;
     border: 1px solid var(--mw-border) !important;
     border: 1px solid var(--rule-strong) !important;
     border-radius: 30px !important;
     border-radius: var(--radius) !important;
     display: flex !important;
     display: flex !important;
     flex-direction: row !important;
     flex-direction: row !important;
     align-items: center !important;
     align-items: center !important;
     padding: 2px 4px 2px 15px !important;
    height: var(--control-h);
     transition: all 0.3s ease;
    box-sizing: border-box;
     padding: 0 6px 0 14px !important;
     width: 100%;
    max-width: var(--control-w);
     overflow: hidden;
     overflow: hidden;
     max-width: 350px;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
}
#searchform:focus-within {
#searchform:focus-within {
     border-color: var(--mw-primary) !important;
     border-color: var(--accent) !important;
     box-shadow: 0 0 0 4px rgba(2, 95, 50, 0.1) !important;
     box-shadow: 0 0 0 3px rgba(185, 178, 214, 0.18) !important;
}
}
#simpleSearch {
#simpleSearch {
     background: transparent !important;
     background: transparent !important;
Line 313: Line 286:
     align-items: center !important;
     align-items: center !important;
}
}
#searchInput {
#searchInput {
     background: transparent !important;
     background: transparent !important;
     border: none !important;
     border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
     font-family: var(--font-body);
     font-family: var(--font-sans);
     font-size: 0.85em !important;
     font-size: 14px !important;
     padding: 8px 0 !important;
     padding: 0 !important;
     color: #C1E1A6 !important;
    height: calc(var(--control-h) - 2px);
     color: var(--heading) !important;
     width: 100% !important;
     width: 100% !important;
    outline: none;
}
}
#searchInput::placeholder { color: var(--ink-muted); }


/* === 10. Sidebars (left + right) === */
/* === 7. Personal menu (avatar): original code, do not modify === */
.sidebar-chunk {
#personal-inner.dropdown {
     background-color: var(--str-bg-sidebar) !important;
     background-color: transparent !important;
     border-radius: var(--str-radius);
     border: none !important;
     border: 1px solid var(--str-border) !important;
    box-shadow: none !important;
     margin-bottom: 16px;
    padding: 0 !important;
     padding: 14px;
}
     box-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
 
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
#personal-inner #p-personal {
     animation: str-sidebar-enter 0.7s ease-out both;
    background-color: #1a1a1a !important;
     border: 1px solid var(--str-accent) !important;
     border-radius: 8px !important;
     padding: 10px !important;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 8px var(--str-accent) !important;
}
 
#p-personal .mw-portlet-body {
     background-color: transparent !important;
    border: none !important;
}
 
#p-personal-label {
    background-color: transparent !important;
    color: var(--str-accent) !important;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    padding-bottom: 6px;
     border-bottom: 1px solid var(--str-accent) !important;
}
 
#p-personal .mw-portlet-body ul li {
    background-color: transparent !important;
    transition: background-color 0.15s ease;
}
 
#p-personal .mw-portlet-body ul li:hover {
    background-color: rgba(0, 255, 100, 0.1) !important;
    border-radius: 4px;
}
 
#personal .dropdown span {
    color: #22CC66 !important;
    text-decoration: none !important;
}
}


@keyframes str-sidebar-enter {
/* Personal menu items: original fonts, padding and hover effect */
     from { opacity: 0; transform: translateX(-10px); }
#p-personal h3 {
     to  { opacity: 1; transform: translateX(0); }
    font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif !important;
    text-transform: uppercase;
}
#p-personal .mw-portlet-body li a {
     color: #F5F5FF !important;
    font-family: 'LXGW WenKai Screen', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
#p-personal .mw-portlet-body li a:hover {
    color: #C1E1A6 !important;
    padding-left: 5px;
     text-decoration: none !important;
    text-shadow: 0 0 6px rgba(102, 238, 187, 0.3);
}
}


.sidebar-chunk:hover {
/* === 8. Left and right sidebars === */
     border-color: var(--str-green) !important;
.sidebar-chunk {
     box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(2, 95, 50, 0.15) !important;
    background-color: rgba(16, 16, 24, 0.6) !important;
     border-radius: var(--radius);
    border: 1px solid var(--rule) !important;
    margin-bottom: 16px;
    padding: 14px;
     box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    transition: border-color 0.3s ease;
}
}
.sidebar-chunk:hover { border-color: var(--src-huijia-green) !important; }


/* Group names: HUD monospace, Plurimod light green */
.sidebar-chunk h2,
.sidebar-chunk h2,
.sidebar-chunk h3,
.sidebar-chunk h3,
.sidebar-chunk .sidebar-name {
.sidebar-chunk .sidebar-name,
     font-family: var(--font-heading) !important;
.mw-portlet:not(#p-personal) h3 {
     font-size: 0.85em !important;
     font-family: var(--font-hud) !important;
     color: var(--str-accent) !important;
     font-size: 13px !important;
     letter-spacing: 1.5px;
    font-weight: 400 !important;
     color: var(--heading) !important;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     text-transform: uppercase;
     border-bottom: 1px solid var(--str-border) !important;
     border-bottom: 1px solid var(--rule) !important;
     padding-bottom: 8px;
     padding-bottom: 8px;
     margin-bottom: 10px;
     margin-bottom: 10px;
}
.sidebar-chunk h2::before,
.mw-portlet:not(#p-personal) h3::before {
    content: "◈ ";
    color: var(--accent);
    font-size: 0.85em;
}
}


/* Sidebar nav links — bright (consolidated) */
/* Nav links: green-leaning */
.sidebar-chunk li, .sidebar-chunk li a, .sidebar-chunk .body li a,
.sidebar-chunk li a,
.mw-portlet-body li a,
.sidebar-chunk li a span,
#mw-panel .portal .body li a,
.mw-portlet:not(#p-personal) .mw-portlet-body li a,
#mw-site-navigation li a,
.mw-portlet:not(#p-personal) .mw-portlet-body li a span,
#mw-related-navigation li a {
#mw-site-navigation li a span,
     color: var(--str-text-bright) !important;
#mw-related-navigation li a span,
#p-normal-catlinks a,
#p-variants-desktop a {
     color: var(--nav-ink) !important;
     font-family: var(--font-body) !important;
     font-family: var(--font-body) !important;
     padding: 10px;
     font-size: 15.5px;
    letter-spacing: 0.03em;
    text-decoration: none !important;
}
.sidebar-chunk li a,
.mw-portlet:not(#p-personal) .mw-portlet-body li a {
     transition: color 0.2s ease, padding-left 0.2s ease;
     transition: color 0.2s ease, padding-left 0.2s ease;
}
}
#ca-unwatch a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    box-sizing: content-box !important;
    width: 100%;
    height: 100%;
    text-shadow: 0 0 5px rgba(34, 204, 102, 0.9) !important;
}
.sidebar-chunk li a:hover,
.sidebar-chunk li a:hover,
.mw-portlet-body li a:hover {
.sidebar-chunk li a:hover span,
     color: var(--str-accent) !important;
.mw-portlet:not(#p-personal) .mw-portlet-body li a:hover,
    padding-left: 5px;
.mw-portlet:not(#p-personal) .mw-portlet-body li a:hover span {
     color: var(--heading) !important;
     text-decoration: none !important;
     text-decoration: none !important;
    text-shadow: 0 0 6px rgba(102, 238, 187, 0.3);
}
}
.sidebar-chunk li a:hover,
.mw-portlet:not(#p-personal) .mw-portlet-body li a:hover { padding-left: 14px; }


.sidebar-inner li a:before { color: var(--heading) !important; }
.sidebar-inner li a:hover:before { color: #FFFFFF !important; }
.sidebar-chunk .mw-ui-icon::before,
.sidebar-chunk .mw-ui-icon::before,
.sidebar-chunk .mw-ui-icon svg,
.sidebar-chunk .mw-ui-icon svg,
Line 397: Line 435:
     opacity: 0.85 !important;
     opacity: 0.85 !important;
}
}
.mw-portlet:not(#p-personal) { background-color: transparent !important; padding: 0; }


.mw-portlet {
/* === 9. Content card: grid lines + corner markers === */
     background-color: var(--str-bg-sidebar) !important;
/* The wrapper is a layout container only: the skin's background, shadow and border are removed, and all visuals belong to the content card #mw-content */
     padding: 0;
#mw-content-wrapper {
     background: transparent !important;
    padding-top: 0;
    box-shadow: none !important;
    border: none !important;
     border-radius: 0 !important;
}
}


.mw-portlet h3 {
#mw-content {
     color: var(--str-accent) !important;
     position: relative;
     font-family: var(--font-heading) !important;
    background-color: var(--paper-raised) !important;
     letter-spacing: 1.5px;
    color: var(--ink) !important;
     text-transform: uppercase;
    padding: 28px 32px;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    background-image:
        /* corner markers: one horizontal and one vertical line per corner */
        linear-gradient(var(--heading), var(--heading)),
        linear-gradient(var(--heading), var(--heading)),
        linear-gradient(var(--heading), var(--heading)),
        linear-gradient(var(--heading), var(--heading)),
        linear-gradient(var(--heading), var(--heading)),
        linear-gradient(var(--heading), var(--heading)),
        linear-gradient(var(--heading), var(--heading)),
        linear-gradient(var(--heading), var(--heading)),
        /* 40px grid */
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;
    background-size:
        14px 1px, 1px 14px,
        14px 1px, 1px 14px,
        14px 1px, 1px 14px,
        14px 1px, 1px 14px,
        40px 40px, 40px 40px !important;
    background-position:
        10px 10px, 10px 10px,
        calc(100% - 10px) 10px, calc(100% - 10px) 10px,
        10px calc(100% - 10px), 10px calc(100% - 10px),
        calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
        0 0, 0 0 !important;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat, repeat !important;
}
 
/* Body text: old-style serif. Color is set only on containers and text blocks, so inline colors in the page are not overridden */
.mw-parser-output {
     font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.9;
     letter-spacing: 0.02em;
    color: var(--ink);
}
#mw-content p, #mw-content li, #mw-content dd, #mw-content dt,
.mw-body-content p, .mw-body-content li {
    color: var(--ink);
}
.mw-parser-output b,
.mw-parser-output strong { font-family: var(--font-serif); font-weight: 600; color: var(--ink-bright); letter-spacing: 0; }
i, em, cite { font-synthesis: none; }
 
@media screen and (min-width: 1100px) {
    #mw-content-container { margin-top: 25px; }
}
 
@media screen and (min-width: 851px) {
     #p-variants-desktop h3 {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
    }
}
}


.mw-portlet li,
/* === 10. Page tabs (Template / Discussion / Read / Edit / History) === */
.mw-portlet li a { color: var(--str-text-bright) !important; }
.mw-portlet-views li a,
.mw-portlet li a:hover { color: var(--str-link) !important; }
.mw-portlet-namespaces li a,
.mw-portlet-variants li a,
.mw-portlet-views li a span,
.mw-portlet-namespaces li a span {
    color: var(--ink-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 15.5px;
    letter-spacing: 0.06em;
}
.mw-portlet-views li.selected a,
.mw-portlet-namespaces li.selected a,
.mw-portlet-views li.selected a span,
.mw-portlet-namespaces li.selected a span {
    color: var(--heading) !important;
}
.mw-portlet-views li.selected a,
.mw-portlet-namespaces li.selected a {
    border-bottom: 2px solid var(--src-huijia-green) !important;
    box-shadow: none !important;
}
.tabber__tab { color: var(--ink-muted) !important; font-family: var(--font-body) !important; }
.tabber__tab[aria-selected="true"] { color: var(--heading) !important; }
.tabber__indicator { background: var(--src-huijia-green) !important; }


/* === 11. Headings === */
/* === 11. Headings: Plurimod light green, with a deep-green underline that shortens by level === */
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
.mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
     font-family: var(--font-heading) !important;
     font-family: var(--font-serif) !important;
     color: var(--str-heading) !important;
     color: var(--heading) !important;
     font-weight: 600;
     font-weight: 600;
     letter-spacing: 0.08em;
     letter-spacing: 0.08em;
     padding-bottom: 8px;
     padding-bottom: 8px;
     margin-bottom: 1em;
     margin-bottom: 0.8em;
     overflow: hidden;
     overflow: hidden;
     display: block;
     display: block;
    text-wrap: balance;
}
}
.mw-parser-output h1 { font-size: 26px; border-bottom: 2px solid var(--heading-bar) !important; }
.mw-parser-output h2 { font-size: 23px; border-bottom: 2px solid rgba(2, 95, 50, 0.6) !important; margin-top: 1.6em; }
.mw-parser-output h3 { font-size: 19px; }
.mw-parser-output h4 { font-size: 17px; }
.mw-parser-output h5 { font-size: 15px; }
.mw-parser-output h6 { font-family: var(--font-hud) !important; font-size: 13px; letter-spacing: 0.14em; }


.mw-parser-output h1 { border-bottom: 2px solid var(--str-green) !important; }
/* Setting Zone mark: ◈ before h2 */
.mw-parser-output h2 { border-bottom: 2px solid rgba(2, 95, 50, 0.5) !important; }
.mw-parser-output h2::before {
    content: "◈";
    color: var(--accent);
    font-size: 0.6em;
    margin-right: 10px;
    vertical-align: 0.2em;
}
.toc h2::before, #toc h2::before, .mw-parser-output .toctitle h2::before { content: none; }


.mw-parser-output h3, .mw-parser-output h4,
.mw-parser-output h3, .mw-parser-output h4,
Line 435: Line 576:
     position: relative;
     position: relative;
}
}
.mw-parser-output h3::after, .mw-parser-output h4::after,
.mw-parser-output h3::after, .mw-parser-output h4::after,
.mw-parser-output h5::after, .mw-parser-output h6::after {
.mw-parser-output h5::after, .mw-parser-output h6::after {
Line 444: Line 584:
     left: 0;
     left: 0;
     height: 2px;
     height: 2px;
     background: linear-gradient(90deg, var(--str-green), transparent);
     background: linear-gradient(90deg, var(--src-huijia-green), transparent);
     border-radius: 1px;
     border-radius: 1px;
}
}
.mw-parser-output h3::after { width: 75%; }
.mw-parser-output h3::after { width: 75%; }
.mw-parser-output h4::after { width: 55%; opacity: 0.7; }
.mw-parser-output h4::after { width: 55%; opacity: 0.7; }
Line 454: Line 593:


h1.firstHeading {
h1.firstHeading {
     font-family: var(--font-heading) !important;
     font-family: var(--font-serif) !important;
     color: var(--str-accent) !important;
     color: var(--heading) !important;
     font-size: 2em;
     font-size: 30px;
     font-weight: 700;
     font-weight: 600;
     letter-spacing: 0.1em;
     letter-spacing: 0.1em;
     border-bottom: 2px solid var(--str-green) !important;
     border-bottom: 2px solid var(--heading-bar) !important;
     padding-bottom: 10px;
     padding-bottom: 10px;
     margin-bottom: 1em;
     margin: 0.25em 0 1em;
}
}
h1.firstHeading::before {
h1.firstHeading::before {
     content: "▹";
     content: "▹";
     color: var(--str-green-glow);
     color: var(--nav-ink);
     margin-right: 10px;
     margin-right: 10px;
}
}


.mw-body h1.firstHeading { margin: 0.25em 0; }


h2 {
/* === 12. Code and editors === */
    color: var(--str-heading) !important;
    border-bottom: 1px solid var(--str-border) !important;
    padding-bottom: 5px;
    margin-top: 2em;
    font-size: 1.5em;
}
 
/* === 12. Code + editor === */
code {
code {
     background-color: #1A1A30 !important;
     background-color: #1A1A30 !important;
     color: #88FFB8 !important;
     color: #88FFB8 !important;
     padding: 3px 7px;
     padding: 2px 6px;
     border-radius: 4px;
     border-radius: var(--radius-sm);
     font-family: var(--font-code) !important;
     font-family: var(--font-mono) !important;
     border: 1px solid var(--str-border);
    font-size: 13px;
     border: 1px solid var(--rule);
}
pre {
    position: relative;
    background-color: var(--paper-sunk) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
    border-left: 2px solid var(--src-huijia-green) !important;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono) !important;
    font-size: 13px;
}
}
.mw-editfont-monospace, #wpTextbox1, textarea.mw-editfont-monospace,
.mw-editfont-monospace, #wpTextbox1, textarea.mw-editfont-monospace,
.ace_editor, .ace_editor .ace_content, .ace_editor .ace_text-layer,
.ace_editor, .ace_editor .ace_content, .ace_editor .ace_text-layer,
Line 498: Line 637:
     background-color: #0C0C18 !important;
     background-color: #0C0C18 !important;
     color: #E8FFE8 !important;
     color: #E8FFE8 !important;
     font-family: var(--font-code) !important;
     font-family: var(--font-mono) !important;
     caret-color: var(--str-green-glow) !important;
     caret-color: var(--nav-ink) !important;
}
}
.CodeMirror-gutters {
.CodeMirror-gutters {
     background-color: #08080F !important;
     background-color: #08080F !important;
     border-right: 1px solid var(--str-border) !important;
     border-right: 1px solid var(--rule) !important;
}
}
 
.CodeMirror-linenumber { color: var(--ink-muted) !important; }
.CodeMirror-linenumber { color: var(--str-text-dim) !important; }
 
.ace_cursor {
.ace_cursor {
     color: var(--str-green-glow) !important;
     color: var(--nav-ink) !important;
     border-left-color: var(--str-green-glow) !important;
     border-left-color: var(--nav-ink) !important;
}
}


/* === 13. Links === */
/* === 13. Links === */
a {
a {
     color: var(--str-link) !important;
     color: var(--link) !important;
     text-decoration: none;
     text-decoration: none;
     transition: all 0.2s ease;
     transition: color 0.2s ease;
}
}
 
a:visited { color: var(--link-visited) !important; }
a:hover {
a:hover {
     color: var(--str-link-hover) !important;
     color: var(--link-hover) !important;
     text-decoration: underline dotted !important;
     text-decoration: underline dotted !important;
     text-shadow: 0 0 8px rgba(102, 238, 187, 0.35);
     text-underline-offset: 3px;
}
}
a.new, a.new:visited { color: var(--link-new) !important; }


a:visited { color: #55CCAA !important; }
/* === 14. Tables === */
a.new { color: #EE7766 !important; }
 
/* === 14. Wikitables === */
table.wikitable {
table.wikitable {
     border-radius: var(--str-radius);
     border-radius: var(--radius);
     overflow: hidden;
     overflow: hidden;
     border: 1px solid var(--str-border) !important;
     border: 1px solid var(--rule) !important;
     border-collapse: separate;
     border-collapse: separate;
     border-spacing: 0;
     border-spacing: 0;
     background-color: var(--str-bg-card-alt) !important;
     background-color: var(--paper-alt) !important;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: 14px;
}
}
 
table.wikitable > * > tr > th,
table.wikitable th {
table.wikitable > tr > th {
     background-color: rgba(2, 95, 50, 0.2) !important;
     background-color: rgba(2, 95, 50, 0.2) !important;
     color: var(--str-accent) !important;
     color: var(--heading) !important;
     font-family: var(--font-heading) !important;
     font-family: var(--font-hud) !important;
     font-size: 0.88em;
     font-size: 13px;
     letter-spacing: 0.08em;
    font-weight: 400;
     letter-spacing: 0.1em;
    text-align: left;
     padding: 10px 12px;
     padding: 10px 12px;
     border-bottom: 2px solid var(--str-green) !important;
    border: none;
     border-bottom: 2px solid var(--src-huijia-green) !important;
}
}
 
table.wikitable > * > tr > td,
table.wikitable td {
table.wikitable > tr > td {
     padding: 9px 12px;
     padding: 9px 12px;
     border-top: 1px solid var(--str-border) !important;
    border: none;
     color: var(--str-text-bright) !important;
     border-top: 1px solid var(--rule) !important;
    color: var(--ink-bright) !important;
    background: transparent;
}
table.wikitable > tbody > tr:nth-of-type(even) { background: transparent; }
table.wikitable > tbody > tr:last-of-type > td { border-bottom: none; }
table.wikitable > tbody > tr:hover > td,
table.wikitable > tr:hover > td {
    background-color: rgba(2, 95, 50, 0.12) !important;
     color: var(--ink-bright) !important;
}
}


table.wikitable tr:hover td { background-color: rgba(2, 95, 50, 0.06); }
/* === 15. Category bar and footer === */
 
/* === 15. Categories + footer === */
#catlinks {
#catlinks {
     background-color: var(--str-bg-card-alt) !important;
     background-color: var(--paper-alt) !important;
     border: 1px solid var(--str-border) !important;
     border: 1px solid var(--rule) !important;
     border-radius: var(--str-radius);
     border-radius: var(--radius);
     padding: 12px 15px;
     padding: 12px 15px;
     color: var(--str-text) !important;
     color: var(--ink-muted) !important;
}
}
.mw-footer {
.mw-footer {
     background-color: var(--str-bg-sidebar) !important;
     background-color: transparent !important;
     padding: 25px 30px;
     padding: 25px 30px;
     border-radius: var(--str-radius) var(--str-radius) 0 0;
     border-radius: var(--radius) var(--radius) 0 0;
     margin-top: 30px;
     margin-top: 30px;
     border-top: 3px solid var(--str-green) !important;
     border-top: 2px solid var(--src-huijia-green) !important;
     color: var(--str-text-dim) !important;
     color: var(--ink-muted) !important;
}
}
.mw-footer-container { background: transparent; }
.mw-footer-container { background: transparent; }
.mw-footer li,
.mw-footer li,
.mw-footer a { color: var(--str-text-dim) !important; }
.mw-footer a { color: var(--ink-muted) !important; }


/* === 16. Tabs === */
/* === 16. Table of contents === */
.mw-portlet-views li a,
.mw-portlet-namespaces li a,
.mw-portlet-variants li a {
    color: var(--str-text) !important;
    font-family: var(--font-body) !important;
}
 
.mw-portlet-views li.selected a,
.mw-portlet-namespaces li.selected a {
    color: var(--str-accent) !important;
    border-bottom: 2px solid var(--str-green) !important;
}
 
/* === 17. TOC === */
.toc, #toc {
.toc, #toc {
     background-color: var(--str-bg-card-alt) !important;
     background-color: var(--paper-alt) !important;
     border: 1px solid var(--str-border) !important;
     border: 1px solid var(--rule) !important;
     border-radius: var(--str-radius);
     border-radius: var(--radius);
     padding: 15px;
     padding: 15px;
     color: var(--str-text) !important;
     color: var(--ink) !important;
}
}
.toc h2, #toc h2 {
.toc h2, #toc h2 {
     font-family: var(--font-heading) !important;
     font-family: var(--font-hud) !important;
     color: var(--str-accent) !important;
     color: var(--heading) !important;
     font-size: 0.85em !important;
     font-size: 13px !important;
     letter-spacing: 1px;
     letter-spacing: 0.14em;
}
 
.toc a { color: var(--str-link) !important; }
.toc li { color: var(--str-text) !important; }
 
/* === 18. Selection === */
::selection {
    background-color: var(--str-green) !important;
    color: #FFFFFF !important;
}
}
.toc a { color: var(--link) !important; }
.toc li { color: var(--ink) !important; }


/* === 19. Logo === */
/* === 17. Logo === */
#p-logo, .mw-portlet-logo {
#p-logo, .mw-portlet-logo {
     display: flex !important;
     display: flex !important;
Line 629: Line 751:
}
}


/* === 20. Misc UI (editor toolbar, buttons, diffs, inputs, message boxes) === */
/* === 18. Editor toolbar, buttons, diffs, inputs, message boxes === */
.oo-ui-toolbar-bar {
.oo-ui-toolbar-bar {
     background-color: var(--str-bg-card-alt) !important;
     background-color: var(--paper-alt) !important;
     border-color: var(--str-border) !important;
     border-color: var(--rule) !important;
}
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
     background-color: var(--str-bg-card-alt) !important;
     background-color: var(--paper-alt) !important;
     color: var(--str-text-bright) !important;
     color: var(--ink-bright) !important;
     border-color: var(--str-border) !important;
     border-color: var(--rule-strong) !important;
    border-radius: var(--radius-sm) !important;
}
}
 
.oo-ui-labelElement .oo-ui-labelElement-label { color: var(--ink) !important; }
.oo-ui-labelElement .oo-ui-labelElement-label { color: var(--str-text) !important; }
 
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget textarea {
.oo-ui-textInputWidget textarea {
     background-color: var(--str-bg-card) !important;
     background-color: var(--paper-raised) !important;
     color: var(--str-text-bright) !important;
     color: var(--ink-bright) !important;
     border-color: var(--str-border) !important;
     border-color: var(--rule-strong) !important;
}
}
td.diff-context {
td.diff-context {
     background-color: var(--str-bg-card) !important;
     background-color: var(--paper-raised) !important;
     color: var(--str-text) !important;
     color: var(--ink) !important;
}
}
td.diff-addedline { background-color: rgba(2, 95, 50, 0.18) !important; }
td.diff-addedline { background-color: rgba(2, 95, 50, 0.18) !important; }
td.diff-deletedline { background-color: rgba(180, 50, 50, 0.18) !important; }
td.diff-deletedline { background-color: rgba(180, 50, 50, 0.18) !important; }
Line 660: Line 778:
input[type="text"], input[type="search"],
input[type="text"], input[type="search"],
input[type="password"], select {
input[type="password"], select {
     background-color: var(--str-bg-card) !important;
     background-color: var(--paper-raised) !important;
     color: var(--str-text-bright) !important;
     color: var(--ink-bright) !important;
     border: 1px solid var(--str-border) !important;
     border: 1px solid var(--rule-strong) !important;
     border-radius: 4px;
     border-radius: var(--radius-sm);
     font-family: var(--font-body) !important;
     font-family: var(--font-sans) !important;
}
}
.mw-ui-button,
.mw-ui-button,
input[type="submit"] {
input[type="submit"] {
     background-color: var(--str-green) !important;
     background-color: var(--accent-fill) !important;
     color: #FFFFFF !important;
     color: var(--on-accent) !important;
     border: none !important;
     border: none !important;
     border-radius: 4px;
     border-radius: var(--radius-sm);
     font-family: var(--font-heading) !important;
     font-family: var(--font-sans) !important;
     letter-spacing: 0.5px;
     letter-spacing: 0.04em;
     transition: all 0.2s ease;
     transition: background-color 0.2s ease;
}
}
.mw-ui-button:hover,
.mw-ui-button:hover,
input[type="submit"]:hover {
input[type="submit"]:hover {
     background-color: var(--str-green-bright) !important;
     background-color: var(--accent-fill-hover) !important;
     box-shadow: var(--str-glow-green);
     box-shadow: 0 0 16px rgba(34, 204, 102, 0.35);
}
}
.previewnote, .mw-warning-with-logexcerpt, .warningbox {
.previewnote, .mw-warning-with-logexcerpt, .warningbox {
     background-color: rgba(63, 57, 84, 0.3) !important;
     background-color: rgba(63, 57, 84, 0.3) !important;
     border-color: var(--str-border) !important;
     border-color: var(--rule) !important;
     color: var(--str-text) !important;
     color: var(--ink) !important;
}
}
.successbox {
.successbox {
     background-color: rgba(2, 95, 50, 0.2) !important;
     background-color: rgba(2, 95, 50, 0.2) !important;
     border-color: var(--str-green) !important;
     border-color: var(--src-huijia-green) !important;
     color: var(--str-text) !important;
     color: var(--ink) !important;
}
}
.errorbox {
.errorbox {
     background-color: rgba(180, 50, 50, 0.2) !important;
     background-color: rgba(180, 50, 50, 0.2) !important;
Line 701: Line 814:
}
}


/* === 21. Scrollbar === */
/* === 18b. Infobox and navbox: dark version
  Common.css draws the infobox light (#fbfbfb background, #ddd border); the Setting Zone switches it to dark.
  A template's background parameter is written as an inline style, so it still takes priority. */
.infoBox {
    background-color: var(--paper-alt) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
    color: var(--ink) !important;
    overflow: hidden;
}
.infoBoxContent {
    background-color: var(--paper-raised) !important;
    border: none !important;
    border-top: 1px solid var(--rule) !important;
    border-radius: 0 !important;
}
.infoBoxTitle {
    color: var(--heading) !important;
    font-family: var(--font-serif);
    letter-spacing: 0.08em;
}
.infoBoxText,
.infoBoxBelow { color: var(--ink) !important; }
.infoBoxIcon { color: var(--accent) !important; }
.infoBox a { color: var(--link) !important; }
 
table.infobox {
    background-color: var(--paper-alt) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius);
}
table.infobox th { color: var(--heading) !important; background-color: rgba(2, 95, 50, 0.2) !important; }
 
.navbox,
.navbox-subgroup,
.navbox-list { background-color: var(--paper-alt) !important; border-color: var(--rule) !important; color: var(--ink) !important; }
.navbox th, .navbox-title { background-color: rgba(2, 95, 50, 0.25) !important; color: var(--heading) !important; }
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background-color: rgba(63, 57, 84, 0.35) !important; color: var(--ink) !important; }
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background-color: var(--paper-raised) !important; }
.navbox-even { background-color: rgba(255, 255, 255, 0.02) !important; }
.navbox-odd { background-color: transparent !important; }
 
/* === 18c. White background at low resolutions
  On narrow screens Timeless changes its layout; html and several wrapper containers have a white background that shows through.
  The canvas is set to violet-black here, and all wrappers are transparent. */
html { background-color: var(--paper) !important; }
#mw-wrapper,
#mw-header-hack,
#mw-header-nav-hack,
#mw-content-container,
#mw-content-block,
#mw-site-navigation,
#mw-related-navigation,
#mw-footer-container,
#mw-footer,
.ts-inner {
    background-color: transparent !important;
}
 
/* === 19. Scrollbar === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--str-bg-body); }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--str-border); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--str-green); }
::-webkit-scrollbar-thumb:hover { background: var(--src-huijia-green); }
 
/* === 20. Reading progress bar, scanline sweep, copy button === */
#str-progress-container {
    position: fixed; bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    pointer-events: none;
}
#str-progress-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, #025F32, #22CC66, #C1E1A6);
    box-shadow: 0 0 8px rgba(34, 204, 102, 0.6);
}
#str-scanline-sweep {
    position: fixed; inset: 0; pointer-events: none;
    z-index: 9991; overflow: hidden;
}
#str-scanline-sweep::after {
    content: ""; position: absolute; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg,
        transparent 0%, rgba(193, 225, 166, 0.05) 15%,
        rgba(2, 95, 50, 0.10) 40%, rgba(34, 204, 102, 0.06) 60%,
        rgba(193, 225, 166, 0.05) 85%, transparent 100%);
    animation: str-sweep-down 9s linear infinite;
}
@keyframes str-sweep-down { 0% { top: -10px; } 100% { top: 100%; } }
 
.str-copy-btn {
    position: absolute; top: 8px; right: 8px;
    background: rgba(2, 95, 50, 0.85); color: #FFFFFF;
    border: 1px solid rgba(193, 225, 166, 0.25);
    border-radius: var(--radius-sm);
    padding: 4px 10px; font-size: 11px;
    font-family: var(--font-hud);
    letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; opacity: 0;
    transition: opacity 0.2s ease; z-index: 50;
}
pre:hover .str-copy-btn,
.str-copy-btn:focus-visible { opacity: 1; }


/* === 22. Universal text safety === */
/* === 21. Reduced motion === */
p, li, dd, dt, td, th, span, div,
@media (prefers-reduced-motion: reduce) {
label, legend, figcaption, summary, blockquote {
    body::after,
     color: inherit;
    #p-banner::after,
    #str-scanline-sweep::after { animation: none !important; }
    #str-scanline-sweep { display: none; }
     * { transition: none !important; }
}
}


/* === 23. MOBILE (≤850px) === */
/* === 22. Mobile (≤850px) === */
@media screen and (max-width: 850px) {
@media screen and (max-width: 850px) {
    #mw-content { padding: 18px 16px; }
     .sidebar-chunk {
     .sidebar-chunk {
         transform: none !important;
         transform: none !important;
        animation: none !important;
         opacity: 1 !important;
         opacity: 1 !important;
         background: none !important;
         background: none !important;
Line 729: Line 948:
         margin: 0 !important;
         margin: 0 !important;
     }
     }
     #mw-content-block{
    .sidebar-chunk h2::before { content: none; }
        background: transparent !important;
     #mw-content-block { background: transparent !important; }
    }
 
    /* Hide the empty green sidebar/portlet shells */
     .sidebar-chunk:empty,
     .sidebar-chunk:empty,
     .mw-portlet:empty,
     .mw-portlet:empty,
Line 743: Line 959:
         background: none !important;
         background: none !important;
     }
     }
     #mw-content-block .sidebar-chunk {
     #mw-content-block .sidebar-chunk {
         border: none !important;
         border: none !important;
Line 750: Line 965:
         padding: 0 !important;
         padding: 0 !important;
     }
     }
    table.wikitable { display: block; overflow-x: auto; white-space: normal; }


    /* On narrow screens the sidebars become dropdown menus; their panels go dark so no white shows through */
    #mw-site-navigation .sidebar-inner,
    #mw-related-navigation .sidebar-inner,
    #site-tools .sidebar-inner,
    #mw-site-navigation .dropdown .mw-portlet-body,
    #mw-related-navigation .dropdown .mw-portlet-body {
        background-color: var(--paper-alt) !important;
        border: 1px solid var(--rule) !important;
        border-radius: var(--radius) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
        color: var(--ink) !important;
    }
    /* Cap the logo size so it can't blow up when the sidebar renders incorrectly */
    #p-logo img {
        max-width: 180px !important;
        width: auto !important;
        height: auto !important;
    }
}
}
</style>
</style>
Line 756: Line 991:
<script>
<script>
/**
/**
  * S.T.R. OFFICE — UI ENHANCEMENTS (v2.1)
  * S.T.R. OFFICE — UI ENHANCEMENTS (v3.0)
  * Reading progress bar · code copy buttons · scroll reveal ·
  * Kept: reading progress bar, code copy button, scanline sweep, non-sticky header
  * scanline sweep · flicker · ambient glow · sticky-header kill.
  * Removed: full-screen flicker layer, scroll fade-ins, ambient pulse
  */
  */
(function () {
(function () {
     "use strict";
     "use strict";
    if (window.__strThemeLoaded) return;
    window.__strThemeLoaded = true;


     const injectStyles = () => {
     var reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const s = document.createElement('style');
    var isZh = (document.documentElement.lang || "").toLowerCase().indexOf("zh") === 0;
        s.innerHTML = `
    var LABEL = isZh ? { copy: "复制", done: "已复制", fail: "请手动复制" }
            #str-progress-container {
                    : { copy: "COPY", done: "COPIED", fail: "FAILED" };
                position: fixed; bottom: 0; left: 0;
                width: 100%; height: 3px;
                background: rgba(0, 0, 0, 0.6); z-index: 99999;
            }
            #str-progress-bar {
                height: 100%; width: 0%;
                background: linear-gradient(90deg, #025F32, #22CC66, #C1E1A6);
                box-shadow: 0 0 10px #025F32, 0 0 4px #22CC66;
                transition: width 0.1s ease-out;
            }
            .str-copy-btn {
                position: absolute; top: 8px; right: 8px;
                background: rgba(2, 95, 50, 0.7); color: #D0F0D0;
                border: 1px solid rgba(193, 225, 166, 0.25); border-radius: 4px;
                padding: 4px 10px; font-size: 10px;
                font-family: 'Share Tech Mono', monospace;
                letter-spacing: 1px; text-transform: uppercase;
                cursor: pointer; opacity: 0;
                transition: all 0.2s ease; z-index: 50;
            }
            pre:hover .str-copy-btn { opacity: 1; }
            .str-copy-btn:hover {
                background: rgba(10, 143, 79, 0.9);
                box-shadow: 0 0 12px rgba(2, 95, 50, 0.5);
            }
            pre { position: relative; }
            .str-reveal {
                opacity: 0; transform: translateY(18px);
                transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
            }
            .str-reveal.str-visible { opacity: 1; transform: translateY(0); }
            .str-delay-1 { transition-delay: 0.06s; }
            .str-delay-2 { transition-delay: 0.14s; }
            .str-delay-3 { transition-delay: 0.22s; }
            #str-scanline-sweep {
                position: fixed; inset: 0; pointer-events: none;
                z-index: 9991; overflow: hidden;
            }
            #str-scanline-sweep::after {
                content: ""; position: absolute; left: 0;
                width: 100%; height: 4px;
                background: linear-gradient(90deg,
                    transparent 0%, rgba(193, 225, 166, 0.06) 15%,
                    rgba(2, 95, 50, 0.12) 40%, rgba(34, 204, 102, 0.08) 60%,
                    rgba(193, 225, 166, 0.06) 85%, transparent 100%);
                box-shadow: 0 0 30px rgba(2, 95, 50, 0.08);
                animation: str-sweep-down 7s linear infinite;
            }
            @keyframes str-sweep-down { 0% { top: -10px; } 100% { top: 100%; } }
            #str-flicker {
                position: fixed; inset: 0; pointer-events: none;
                z-index: 9987; opacity: 0;
                animation: str-flicker-anim 0.12s steps(3) infinite;
            }
            @keyframes str-flicker-anim {
                0% { opacity: 0; } 33% { opacity: 0.015; }
                66% { opacity: 0; } 100% { opacity: 0.008; }
            }
            #str-ambient {
                position: fixed; inset: 0; pointer-events: none;
                z-index: 9986; opacity: 0;
                animation: str-ambient-pulse 18s ease-in-out infinite;
            }
            @keyframes str-ambient-pulse {
                0%, 100% { opacity: 0; } 50% { opacity: 1; }
            }
        `;
        document.head.appendChild(s);
    };


     const killStickyHeader = () => {
     function killStickyHeader() {
         const hdr = document.getElementById('mw-header-container');
         /* Mobile keeps Timeless's own header positioning */
         if (!hdr) return;
         if (window.matchMedia && window.matchMedia("(max-width: 850px)").matches) return;
        hdr.style.setProperty('position', 'relative', 'important');
         var hdr = document.getElementById("mw-header-container");
        hdr.style.setProperty('top', 'auto', 'important');
        if (!hdr || !window.MutationObserver) return;
         new MutationObserver((mutations) => {
        var pin = function () {
            mutations.forEach((m) => {
            hdr.style.setProperty("position", "relative", "important");
                if (m.target.id === 'mw-header-container' ||
            hdr.style.setProperty("top", "auto", "important");
                    m.target.classList.contains('mw-header-container')) {
        };
                    m.target.style.setProperty('position', 'relative', 'important');
        pin();
                    m.target.style.setProperty('top', 'auto', 'important');
         new MutationObserver(pin).observe(hdr, { attributes: true, attributeFilter: ["class", "style"] });
                }
     }
            });
         }).observe(hdr, { attributes: true, attributeFilter: ['class', 'style'] });
     };


     const initProgress = () => {
     function initProgress() {
         const c = document.createElement('div');
         if (document.getElementById("str-progress-container")) return;
         c.id = 'str-progress-container';
        var c = document.createElement("div");
         const b = document.createElement('div');
         c.id = "str-progress-container";
         b.id = 'str-progress-bar';
         var b = document.createElement("div");
         b.id = "str-progress-bar";
         c.appendChild(b);
         c.appendChild(b);
         document.body.appendChild(c);
         document.body.appendChild(c);
         window.addEventListener('scroll', () => {
         var ticking = false;
             const st = window.pageYOffset || document.documentElement.scrollTop;
        function update() {
             const dh = document.documentElement.scrollHeight - document.documentElement.clientHeight;
             var st = window.pageYOffset || document.documentElement.scrollTop;
             if (dh > 0) b.style.width = ((st / dh) * 100) + '%';
             var dh = document.documentElement.scrollHeight - document.documentElement.clientHeight;
         });
             b.style.width = (dh > 0 ? (st / dh) * 100 : 0) + "%";
     };
            ticking = false;
         }
        window.addEventListener("scroll", function () {
            if (!ticking) { ticking = true; window.requestAnimationFrame(update); }
        }, { passive: true });
        update();
     }


     const initCopy = () => {
     function initCopy() {
         document.querySelectorAll('pre').forEach(block => {
         document.querySelectorAll("#mw-content pre").forEach(function (block) {
             if (block.querySelector('.str-copy-btn')) return;
             if (block.querySelector(".str-copy-btn")) return;
             const btn = document.createElement('button');
             var btn = document.createElement("button");
             btn.className = 'str-copy-btn';
            btn.type = "button";
             btn.innerText = 'COPY';
             btn.className = "str-copy-btn";
             btn.addEventListener('click', (e) => {
             btn.textContent = LABEL.copy;
             btn.addEventListener("click", function (e) {
                 e.preventDefault();
                 e.preventDefault();
                 e.stopPropagation();
                 e.stopPropagation();
                 const text = block.innerText.replace('COPY', '').replace('COPIED!', '').trim();
                 var clone = block.cloneNode(true);
                 navigator.clipboard.writeText(text).then(() => {
                var own = clone.querySelector(".str-copy-btn");
                     btn.innerText = 'COPIED!';
                if (own) own.remove();
                     setTimeout(() => btn.innerText = 'COPY', 2000);
                 var text = clone.textContent.trim();
                 });
                var done = function (label) {
                     btn.textContent = label;
                     setTimeout(function () { btn.textContent = LABEL.copy; }, 2000);
                 };
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(text).then(
                        function () { done(LABEL.done); },
                        function () { done(LABEL.fail); }
                    );
                } else {
                    done(LABEL.fail);
                }
             });
             });
             block.appendChild(btn);
             block.appendChild(btn);
         });
         });
     };
     }
 
    const initReveal = () => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(e => {
                if (e.isIntersecting) {
                    e.target.classList.add('str-visible');
                    observer.unobserve(e.target);
                }
            });
        }, { threshold: 0.04 });
        const targets = document.querySelectorAll(
            '#mw-content h2, #mw-content h3, #mw-content h4, ' +
            '.thumbinner, table.wikitable, #mw-content pre, ' +
            '#mw-content .toc, #catlinks, .sidebar-chunk'
        );
        targets.forEach((el, i) => {
            el.classList.add('str-reveal', 'str-delay-' + ((i % 3) + 1));
            observer.observe(el);
        });
    };


     const initOverlay = (id, bg) => {
     function initSweep() {
         const div = document.createElement('div');
         if (reduceMotion || document.getElementById("str-scanline-sweep")) return;
         div.id = id;
        var div = document.createElement("div");
         if (bg) div.style.background = bg;
         div.id = "str-scanline-sweep";
         div.setAttribute("aria-hidden", "true");
         document.body.appendChild(div);
         document.body.appendChild(div);
     };
     }


     document.addEventListener('DOMContentLoaded', () => {
     function init() {
        injectStyles();
         killStickyHeader();
         killStickyHeader();
         initProgress();
         initProgress();
         initCopy();
         initCopy();
         initReveal();
         initSweep();
        initOverlay('str-scanline-sweep');
    }
        initOverlay('str-flicker', 'rgba(193, 225, 166, 0.12)');
 
         initOverlay('str-ambient', [
    if (document.readyState === "loading") {
            'radial-gradient(ellipse at 3% 97%, rgba(2, 95, 50, 0.06) 0%, transparent 45%)',
         document.addEventListener("DOMContentLoaded", init);
            'radial-gradient(ellipse at 97% 3%, rgba(63, 57, 84, 0.08) 0%, transparent 40%)',
    } else {
            'radial-gradient(ellipse at 50% 50%, rgba(34, 204, 102, 0.02) 0%, transparent 60%)'
         init();
         ].join(', '));
     }
     });
})();
})();
</script>
</script>
Line 933: Line 1,095:
</includeonly><noinclude>{{Theme-STR}}
</includeonly><noinclude>{{Theme-STR}}
==Description==
==Description==
'''Theme-STR''' is the shared theme for Setting Zone pages on HUIJIA FUN (myths, entities and the Way). It follows the Setting Zone (night) palette of the VGR Design System: a Dipfield violet-black ground, Plurimod light-green headings, green-leaning sidebar links and a pale Dipfield violet accent. The content card keeps its 40px grid lines and scanlines and adds corner markers; body text is set in LXGW Neo ZhiSong.
The Setting Zone always uses a dark theme and the Archive Zone (Theme-HJ) always uses a light one, so readers can tell fiction from reality by the background alone.
==Origin==
==Origin==
Author: [[User:PlurimodSU|Marina Malinti]]
Author: [[User:PlurimodSU|Marina Malinti]]
Line 939: Line 1,105:
To use this theme on a page, simply add the following code directly to the page's source code:
To use this theme on a page, simply add the following code directly to the page's source code:
<pre>{{Theme-STR}}</pre>
<pre>{{Theme-STR}}</pre>
==Test==
A body paragraph with an [[Main Page|internal link]], a [[Nonexistent Page|red link]], some <code>inline code</code> and '''bold text'''. <span style="color:#FFD700;">This inline color should stay gold.</span>
===Subheading 3===
====Subheading 4====
=====Subheading 5=====
======Subheading 6======
{| class="wikitable"
! Event !! S.C. !! O.
|-
| Sample event A || 1999 || 0
|-
| Sample event B || 2021.05.14 || 22.05.14
|}
[[Category:Template-Theme]]
[[Category:Template-Theme]]
</noinclude>
</noinclude>

Revision as of 03:00, 3 October 2026

Description

Theme-STR is the shared theme for Setting Zone pages on HUIJIA FUN (myths, entities and the Way). It follows the Setting Zone (night) palette of the VGR Design System: a Dipfield violet-black ground, Plurimod light-green headings, green-leaning sidebar links and a pale Dipfield violet accent. The content card keeps its 40px grid lines and scanlines and adds corner markers; body text is set in LXGW Neo ZhiSong.

The Setting Zone always uses a dark theme and the Archive Zone (Theme-HJ) always uses a light one, so readers can tell fiction from reality by the background alone.

Origin

Author: Marina Malinti

Note

To use this theme on a page, simply add the following code directly to the page's source code: 

{{Theme-STR}}

Test

A body paragraph with an internal link, a red link, some inline code and bold text. This inline color should stay gold.

Subheading 3

Subheading 4

Subheading 5
Subheading 6
Event S.C. O.
Sample event A 1999 0
Sample event B 2021.05.14 22.05.14
Retrieved from "https://en.huijia.fun/index.php?title=Template:Theme-STR&oldid=172"