Template:Theme-STR: Difference between revisions

From HUIJIA FUN
m Edit
m Edit
Line 2: Line 2:
<html>
<html>
<style>
<style>
/**
/**
  * S.T.R. OFFICE - TIMELESS CONSOLIDATED THEME (v2.0)
  * S.T.R. OFFICE — TIMELESS THEME (v2.1, refactored)
  * Theme: Deep Cyber-Mystic Aesthetic
  * Theme: Deep Cyber-Mystic
  * Palette "DeepFi Cyber": #3F3954 #025F32 #C1E1A6 #000000
  * Palette "DeepFi Cyber": #3F3954 #025F32 #C1E1A6 #000000 (active)
  * Palette "DeepFi Noble": #3F3954 #025F32 #FFD700 #FFFFFF
  * Palette "DeepFi Noble": #3F3954 #025F32 #FFD700 #FFFFFF
  * Active palette: Cyber (switch --str-accent and --str-heading to #FFD700 for Noble)
  *   → for Noble, set --str-accent and --str-heading to #FFD700
  *
  *
  * v2.0 Changelog:
  * v2.1: deduped font imports, merged text-brightness selectors,
*  - Significantly brighter body/sidebar text for readability
  *       consolidated mobile fixes into one media query,
*  - Fixed sticky header popping on scroll
  *       removed dead code, fixed section numbering.
  * - Added animated scanline sweep, irregular luminance flicker
  * - Enhanced entrance animations for content elements
*  - More pervasive sci-fi / mysterious atmosphere
  */
  */


 
/* === 1. Fonts (single consolidated import) === */
/* --- 1. Font Imports --- */
@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=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@600;900&family=JetBrains+Mono:wght@400;700&display=swap');
@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. Root Variables (DeepFi Cyber Palette) --- */
:root {
:root {
     --str-deep: #3F3954;
     --str-deep: #3F3954;
Line 44: Line 37:
     --color-surface-2: #202040;
     --color-surface-2: #202040;


    /* BRIGHTER text colors */
     --str-text: #E8E8F4;
     --str-text: #E8E8F4;
     --str-text-dim: #AAAAAA;
     --str-text-dim: #AAAAAA;
Line 55: Line 47:
     --str-glow-green: 0 0 25px rgba(34, 204, 102, 0.9);
     --str-glow-green: 0 0 25px rgba(34, 204, 102, 0.9);


    /* Fonts */
     --font-heading: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
     --font-heading: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
     --font-body: 'JetBrains Mono', 'Fira Code', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
     --font-body: 'JetBrains Mono', 'Fira Code', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
Line 63: Line 54:
}
}


#mw-site-navigation span,  
/* === 3. Nav span colors === */
#mw-related-navigation span,  
#mw-site-navigation span,
#personal .dropdown span,  
#mw-related-navigation span,
#p-normal-catlinks a,  
#personal .dropdown span,
#p-normal-catlinks a,
#p-variants-desktop a {
#p-variants-desktop a {
     color: #22CC66 !important;
     color: #22CC66 !important;
Line 74: Line 66:
.sidebar-inner li a:before {
.sidebar-inner li a:before {
     color: var(--str-accent) !important;
     color: var(--str-accent) !important;
     filter: drop-shadow(0 0 5px rgba(120, 205, 110, 1)) !important
     filter: drop-shadow(0 0 5px rgba(120, 205, 110, 1)) !important;
}
}


Line 82: Line 74:
}
}


/* --- 3. Global Body --- */
/* === 4. Personal dropdown === */
/* ── Reset: no bleed when collapsed ── */
#personal-inner.dropdown {
#personal-inner.dropdown {
     background-color: transparent !important;
     background-color: transparent !important;
Line 91: Line 82:
}
}


/* ── The actual portlet inside — THIS is what's always visible ── */
#personal-inner #p-personal {
#personal-inner #p-personal {
     background-color: #1a1a1a !important;
     background-color: #1a1a1a !important;
Line 97: Line 87:
     border-radius: 8px !important;
     border-radius: 8px !important;
     padding: 10px !important;
     padding: 10px !important;
     box-shadow:  
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 8px var(--str-accent) !important;
        0 0 20px rgba(0, 0, 0, 0.5),
        0 0 8px var(--str-accent) !important;
}
}


/* ── Portlet body transparent ── */
#p-personal .mw-portlet-body {
#p-personal .mw-portlet-body {
     background-color: transparent !important;
     background-color: transparent !important;
Line 108: Line 95:
}
}


/* ── Header: title + separator ── */
#p-personal-label {
#p-personal-label {
     background-color: transparent !important;
     background-color: transparent !important;
Line 120: Line 106:
}
}


/* ── List items ── */
#p-personal .mw-portlet-body ul li {
#p-personal .mw-portlet-body ul li {
     background-color: transparent !important;
     background-color: transparent !important;
Line 126: Line 111:
}
}


/* ── Hover ── */
#p-personal .mw-portlet-body ul li:hover {
#p-personal .mw-portlet-body ul li:hover {
     background-color: rgba(0, 255, 100, 0.1) !important;
     background-color: rgba(0, 255, 100, 0.1) !important;
Line 132: Line 116:
}
}


.kawaii-header-background {
.kawaii-header-background { display: none !important; }
    display: none !important;
}


/* === 5. Body + atmospheric overlays === */
body {
body {
     background-color: var(--str-bg-body) !important;
     background-color: var(--str-bg-body) !important;
Line 146: Line 129:
}
}


/* Static CRT scanlines (subtle) */
body::before { /* static CRT scanlines */
body::before {
     content: "";
     content: "";
     position: fixed;
     position: fixed;
     top: 0;
     inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
     pointer-events: none;
     pointer-events: none;
     z-index: 9990;
     z-index: 9990;
     background: repeating-linear-gradient(
     background: repeating-linear-gradient(
         0deg,
         0deg, transparent, transparent 2px,
        transparent,
         rgba(0, 0, 0, 0.035) 2px, rgba(0, 0, 0, 0.035) 4px);
        transparent 2px,
         rgba(0, 0, 0, 0.035) 2px,
        rgba(0, 0, 0, 0.035) 4px
    );
}
}


/* Irregular luminance blobs that slowly drift */
body::after { /* drifting luminance blobs */
body::after {
     content: "";
     content: "";
     position: fixed;
     position: fixed;
Line 191: Line 165:
}
}


 
/* === 6. Kill desktop sticky header === */
/* ============================================================
  4. KILL STICKY HEADER — prevent pop-out on scroll
  ============================================================ */
#mw-header-container,
#mw-header-container,
#mw-header-hack,
#mw-header-hack,
Line 211: Line 182:
}
}


/* Timeless skin sticky behavior override */
.ts-container,
.ts-container,
#mw-header-container.ts-sticky,
#mw-header-container.ts-sticky,
Line 219: Line 189:
}
}


/* Force any sticky/fixed header variants */
header, nav { position: relative !important; }
header,
#mw-header-container::after { display: none !important; }
nav {
    position: relative !important;
}
 
/* Also prevent the drop-shadow bar that appears */
#mw-header-container::after {
    display: none !important;
}
 


/* --- 5. Banner / Site Title: S.T.R. OFFICE with Glitch --- */
/* === 7. Banner / site title with glitch === */
#p-banner {
#p-banner {
     color: transparent !important;
     color: transparent !important;
Line 252: Line 213:
     letter-spacing: 4px;
     letter-spacing: 4px;
     text-transform: uppercase;
     text-transform: uppercase;
     text-shadow:
     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);
        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);
     position: relative;
     position: relative;
     display: inline-block;
     display: inline-block;
Line 263: Line 221:
@keyframes str-glitch-subtle {
@keyframes str-glitch-subtle {
     0%, 88%, 100% {
     0%, 88%, 100% {
         text-shadow:
         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);
            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);
         transform: translate(0, 0) skewX(0deg);
         transform: translate(0, 0) skewX(0deg);
         opacity: 1;
         opacity: 1;
     }
     }
     89% {
     89% { text-shadow: -3px 0 #C1E1A6, 3px 0 #025F32; transform: translate(-2px, 0) skewX(-1deg); opacity: 0.85; }
        text-shadow: -3px 0 #C1E1A6, 3px 0 #025F32;
     90% { text-shadow: 3px 0 #C1E1A6, -3px 0 #3F3954; transform: translate(2px, 0) skewX(1deg); opacity: 0.9; }
        transform: translate(-2px, 0) skewX(-1deg);
     91% { text-shadow: 0 0 8px rgba(193, 225, 166, 0.7); transform: translate(0, 0) skewX(0deg); opacity: 1; }
        opacity: 0.85;
     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; }
     90% {
        text-shadow: 3px 0 #C1E1A6, -3px 0 #3F3954;
        transform: translate(2px, 0) skewX(1deg);
        opacity: 0.9;
    }
     91% {
        text-shadow: 0 0 8px rgba(193, 225, 166, 0.7);
        transform: translate(0, 0) skewX(0deg);
        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 === */
/* --- 6. Main Content Wrapper & Card --- */
#mw-content-wrapper {
#mw-content-wrapper {
     background: transparent !important;
     background: transparent !important;
     padding-top: 0px;
     padding-top: 0;
}
}


Line 306: Line 241:
     background-color: var(--str-bg-card) !important;
     background-color: var(--str-bg-card) !important;
     color: var(--str-text) !important;
     color: var(--str-text) !important;
     padding: 25px 25px;
     padding: 25px;
     border-radius: var(--str-radius);
     border-radius: var(--str-radius);
     border: 1px solid var(--str-border);
     border: 1px solid var(--str-border);
     box-shadow:
     box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
        0 0 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
     background-image:
     background-image:
         linear-gradient(rgba(193, 225, 166, 0.018) 1px, transparent 1px),
         linear-gradient(rgba(193, 225, 166, 0.018) 1px, transparent 1px),
Line 324: Line 257:
}
}


/* Body text forced bright across content */
/* Body text forced bright (consolidated) */
#mw-content,
#mw-content,
#mw-content p,
#mw-content p, #mw-content li, #mw-content dd, #mw-content dt,
#mw-content li,
#mw-content span, #mw-content div,
#mw-content dd,
#mw-content dt,
#mw-content span,
#mw-content div,
.mw-body-content,
.mw-body-content,
.mw-body-content p,
.mw-body-content p, .mw-body-content li, .mw-body-content span {
.mw-body-content li,
.mw-body-content span {
     color: var(--str-text) !important;
     color: var(--str-text) !important;
}
}
/* .tools-inline div,
.tools-inline ul,
.tools-inline li {
    display: flex;
    padding: 5px;
    margin: 0;
    list-style: none;
} */


@media screen and (min-width: 1100px) {
@media screen and (min-width: 1100px) {
     #mw-content-container {
     #mw-content-container { margin-top: 25px; }
        margin-top: 25px;
    }
}
}


Line 364: Line 280:
}
}


/* --- 7. Pill Search Bar --- */
/* === 9. Pill search bar === */
#p-search {
#p-search {
     margin: 0 20px !important;
     margin: 0 20px !important;
Line 408: Line 324:
}
}


 
/* === 10. Sidebars (left + right) === */
/* --- 8. Sidebar Styling (BOTH left and right) --- */
.sidebar-chunk {
.sidebar-chunk {
     background-color: var(--str-bg-sidebar) !important;
     background-color: var(--str-bg-sidebar) !important;
Line 444: Line 359:
}
}


/* Sidebar nav links — BRIGHT white */
/* Sidebar nav links — bright (consolidated) */
.sidebar-chunk li,
.sidebar-chunk li, .sidebar-chunk li a, .sidebar-chunk .body li a,
.sidebar-chunk li a,
.sidebar-chunk .body li a,
.mw-portlet-body li a,
.mw-portlet-body li a,
#mw-panel .portal .body li a,
#mw-panel .portal .body li a,
Line 454: Line 367:
     color: var(--str-text-bright) !important;
     color: var(--str-text-bright) !important;
     font-family: var(--font-body) !important;
     font-family: var(--font-body) !important;
    /* font-size: 1em; */
     padding: 10px;
     padding: 10px 10px;
     transition: color 0.2s ease, padding-left 0.2s ease;
     transition: color 0.2s ease, padding-left 0.2s ease;
}
}


/* Unwatch Logo Bug */
#ca-unwatch a {
#ca-unwatch a {
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
    /* Debugged: Resetting padding and box-sizing to allow flex centering */
     padding: 0 !important;
     padding: 0 !important;
     box-sizing: content-box !important;
     box-sizing: content-box !important;
Line 480: Line 390:
}
}


/* Sidebar icons brightness */
.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 488: Line 397:
}
}


/* Right sidebar portlets */
.mw-portlet {
.mw-portlet {
     background-color: var(--str-bg-sidebar) !important;
     background-color: var(--str-bg-sidebar) !important;
    /* border: 1px solid var(--str-border) !important; */
     padding: 0;
    /* border-radius: var(--str-radius) !important; */
    /* margin-bottom: 16px !important; */
     padding: 0px;
}
}


Line 500: Line 405:
     color: var(--str-accent) !important;
     color: var(--str-accent) !important;
     font-family: var(--font-heading) !important;
     font-family: var(--font-heading) !important;
    /* font-size: 1em !important; */
     letter-spacing: 1.5px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     text-transform: uppercase;
Line 506: Line 410:


.mw-portlet li,
.mw-portlet li,
.mw-portlet li a {
.mw-portlet li a { color: var(--str-text-bright) !important; }
    color: var(--str-text-bright) !important;
.mw-portlet li a:hover { color: var(--str-link) !important; }
}
 
.mw-portlet li a:hover {
    color: var(--str-link) !important;
}


 
/* === 11. Headings === */
/* --- 9. Headings --- */
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.mw-parser-output h1,
.mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
     font-family: var(--font-heading) !important;
     font-family: var(--font-heading) !important;
     color: var(--str-heading) !important;
     color: var(--str-heading) !important;
Line 535: Line 429:
.mw-parser-output h2 { border-bottom: 2px solid rgba(2, 95, 50, 0.5) !important; }
.mw-parser-output h2 { border-bottom: 2px solid rgba(2, 95, 50, 0.5) !important; }


.mw-parser-output h3,
.mw-parser-output h3, .mw-parser-output h4,
.mw-parser-output h4,
.mw-parser-output h5, .mw-parser-output h6 {
.mw-parser-output h5,
.mw-parser-output h6 {
     border-bottom: none !important;
     border-bottom: none !important;
     position: relative;
     position: relative;
}
}


.mw-parser-output h3::after,
.mw-parser-output h3::after, .mw-parser-output h4::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 {
     content: "";
     content: "";
     display: block;
     display: block;
Line 577: Line 467:
     color: var(--str-green-glow);
     color: var(--str-green-glow);
     margin-right: 10px;
     margin-right: 10px;
    /* font-size: 1em; */
}
}


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


h2 {
h2 {
Line 593: Line 479:
}
}


 
/* === 12. Code + editor === */
/* --- 10. Source Code & Editor --- */
code {
code {
     background-color: #1A1A30 !important;
     background-color: #1A1A30 !important;
Line 601: Line 486:
     border-radius: 4px;
     border-radius: 4px;
     font-family: var(--font-code) !important;
     font-family: var(--font-code) !important;
    /* font-size: 1em; */
     border: 1px solid var(--str-border);
     border: 1px solid var(--str-border);
}
}


 
.mw-editfont-monospace, #wpTextbox1, textarea.mw-editfont-monospace,
 
.ace_editor, .ace_editor .ace_content, .ace_editor .ace_text-layer,
/* Source editor — VERY BRIGHT text */
.mw-editfont-monospace,
#wpTextbox1,
textarea.mw-editfont-monospace,
.ace_editor,
.ace_editor .ace_content,
.ace_editor .ace_text-layer,
.ace_editor .ace_line,
.ace_editor .ace_line,
.CodeMirror,
.CodeMirror, .CodeMirror pre, .CodeMirror-code,
.CodeMirror pre,
.CodeMirror-line, .CodeMirror-line span,
.CodeMirror-code,
.mw-editfont-default, textarea {
.CodeMirror-line,
.CodeMirror-line span,
.mw-editfont-default,
textarea {
     background-color: #0C0C18 !important;
     background-color: #0C0C18 !important;
     color: #E8FFE8 !important;
     color: #E8FFE8 !important;
Line 633: Line 506:
}
}


.CodeMirror-linenumber {
.CodeMirror-linenumber { color: var(--str-text-dim) !important; }
    color: var(--str-text-dim) !important;
}


.ace_cursor {
.ace_cursor {
Line 642: Line 513:
}
}


 
/* === 13. Links === */
/* --- 11. Links --- */
a {
a {
     color: var(--str-link) !important;
     color: var(--str-link) !important;
Line 656: Line 526:
}
}


a:visited {
a:visited { color: #55CCAA !important; }
    color: #55CCAA !important;
a.new { color: #EE7766 !important; }
}


a.new {
/* === 14. Wikitables === */
    color: #EE7766 !important;
}
 
 
/* --- 12. Wikitables --- */
table.wikitable {
table.wikitable {
     border-radius: var(--str-radius);
     border-radius: var(--str-radius);
Line 691: Line 555:
}
}


table.wikitable tr:hover td {
table.wikitable tr:hover td { background-color: rgba(2, 95, 50, 0.06); }
    background-color: rgba(2, 95, 50, 0.06);
}


 
/* === 15. Categories + footer === */
/* --- 13. Categories & Footer --- */
#catlinks {
#catlinks {
     background-color: var(--str-bg-card-alt) !important;
     background-color: var(--str-bg-card-alt) !important;
Line 715: Line 576:


.mw-footer li,
.mw-footer li,
.mw-footer a {
.mw-footer a { color: var(--str-text-dim) !important; }
    color: var(--str-text-dim) !important;
}


 
/* === 16. Tabs === */
/* --- 14. Tabs --- */
.mw-portlet-views li a,
.mw-portlet-views li a,
.mw-portlet-namespaces li a,
.mw-portlet-namespaces li a,
Line 734: Line 592:
}
}


 
/* === 17. TOC === */
/* --- 15. TOC --- */
.toc, #toc {
.toc,
#toc {
     background-color: var(--str-bg-card-alt) !important;
     background-color: var(--str-bg-card-alt) !important;
     border: 1px solid var(--str-border) !important;
     border: 1px solid var(--str-border) !important;
Line 745: Line 601:
}
}


.toc h2,
.toc h2, #toc h2 {
#toc h2 {
     font-family: var(--font-heading) !important;
     font-family: var(--font-heading) !important;
     color: var(--str-accent) !important;
     color: var(--str-accent) !important;
Line 756: Line 611:
.toc li { color: var(--str-text) !important; }
.toc li { color: var(--str-text) !important; }


 
/* === 18. Selection === */
/* --- 16. Selection --- */
::selection {
::selection {
     background-color: var(--str-green) !important;
     background-color: var(--str-green) !important;
Line 763: Line 617:
}
}


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


 
/* === 20. Misc UI (editor toolbar, buttons, diffs, inputs, message boxes) === */
/* --- 18. Misc UI --- */
.oo-ui-toolbar-bar {
.oo-ui-toolbar-bar {
     background-color: var(--str-bg-card-alt) !important;
     background-color: var(--str-bg-card-alt) !important;
Line 786: Line 638:
}
}


.oo-ui-labelElement .oo-ui-labelElement-label {
.oo-ui-labelElement .oo-ui-labelElement-label { color: var(--str-text) !important; }
    color: var(--str-text) !important;
}


.oo-ui-textInputWidget input,
.oo-ui-textInputWidget input,
Line 805: Line 655:
td.diff-deletedline { background-color: rgba(180, 50, 50, 0.18) !important; }
td.diff-deletedline { background-color: rgba(180, 50, 50, 0.18) !important; }


input[type="text"],
input[type="text"], input[type="search"],
input[type="search"],
input[type="password"], select {
input[type="password"],
select {
     background-color: var(--str-bg-card) !important;
     background-color: var(--str-bg-card) !important;
     color: var(--str-text-bright) !important;
     color: var(--str-text-bright) !important;
Line 833: Line 681:
}
}


.previewnote,
.previewnote, .mw-warning-with-logexcerpt, .warningbox {
.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(--str-border) !important;
Line 852: Line 698:
}
}


 
/* === 21. Scrollbar === */
/* --- 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(--str-bg-body); }
Line 859: Line 704:
::-webkit-scrollbar-thumb:hover { background: var(--str-green); }
::-webkit-scrollbar-thumb:hover { background: var(--str-green); }


 
/* === 22. Universal text safety === */
/* --- 20. Universal text brightness safety --- */
p, li, dd, dt, td, th, span, div,
p, li, dd, dt, td, th, span, div, label, legend, figcaption, summary, blockquote {
label, legend, figcaption, summary, blockquote {
     color: inherit;
     color: inherit;
}
}


/* === 23. MOBILE FIXES (≤850px) === */
@media screen and (max-width: 850px) {
    /* Undo global relative-positioning that breaks Timeless dropdowns */
    header, nav,
    #mw-header-container, #mw-header-hack, .mw-header-container {
        position: static !important;
        top: auto !important;
    }
    #mw-mf-page-left, .dropdown, .dropdown-active,
    #mw-site-navigation, #mw-related-navigation,
    #site-tools, #personal {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .dropdown .mw-portlet-body,
    .dropdown.dropdown-active .mw-portlet-body {
        display: block !important;
        height: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        background-color: var(--str-bg-card) !important;
        border: 1px solid var(--str-border) !important;
        border-radius: var(--str-radius) !important;
        box-shadow: 0 0 25px rgba(0,0,0,0.6), 0 0 8px var(--str-accent) !important;
        z-index: 9999 !important;
        position: relative !important;
    }
    .dropdown-toggle, #ca-more, .mw-ui-icon {
        position: relative !important;
        z-index: 9999 !important;
    }


    /* Hide empty sidebar/portlet shells */
    .sidebar-chunk:empty,
    .mw-portlet:empty,
    .mw-portlet:not(:has(li)):not(:has(a)) {
        display: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
    }
    #mw-content-block .sidebar-chunk {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    /* No abrupt white bottom */
    html, body,
    #mw-content-block, #mw-content-wrapper, .mw-body {
        background-color: var(--str-bg-body) !important;
    }
    #mw-content {
        border-radius: var(--str-radius) var(--str-radius) 0 0 !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }
    .mw-footer {
        background-color: var(--str-bg-card) !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-top: 3px solid var(--str-green) !important;
    }
}
</style>
</style>


<script>
<script>
/**
/**
  * S.T.R. OFFICE - UI ENHANCEMENTS (v2.0)
  * S.T.R. OFFICE — UI ENHANCEMENTS (v2.1)
  * Features:
  * Reading progress bar · code copy buttons · scroll reveal ·
*  - Bottom reading progress bar with green glow
  * scanline sweep · flicker · ambient glow · sticky-header kill.
*  - Code copy buttons
*  - Scroll reveal entrance animations (staggered)
  * - Animated scanline sweep (bright line descending)
*  - Irregular luminance flicker overlay
*  - Ambient corner glow pulse
*  - Kill sticky header via JS as backup
  */
  */
 
(function () {
(function() {
     "use strict";
     "use strict";


Line 887: Line 798:
         const s = document.createElement('style');
         const s = document.createElement('style');
         s.innerHTML = `
         s.innerHTML = `
            /* === Reading Progress Bar === */
             #str-progress-container {
             #str-progress-container {
                 position: fixed;
                 position: fixed; bottom: 0; left: 0;
                bottom: 0;
                 width: 100%; height: 3px;
                left: 0;
                 background: rgba(0, 0, 0, 0.6); z-index: 99999;
                 width: 100%;
                height: 3px;
                 background: rgba(0, 0, 0, 0.6);
                z-index: 99999;
             }
             }
             #str-progress-bar {
             #str-progress-bar {
                 height: 100%;
                 height: 100%; width: 0%;
                width: 0%;
                 background: linear-gradient(90deg, #025F32, #22CC66, #C1E1A6);
                 background: linear-gradient(90deg, #025F32, #22CC66, #C1E1A6);
                 box-shadow: 0 0 10px #025F32, 0 0 4px #22CC66;
                 box-shadow: 0 0 10px #025F32, 0 0 4px #22CC66;
                 transition: width 0.1s ease-out;
                 transition: width 0.1s ease-out;
             }
             }
            /* === Code Copy Button === */
             .str-copy-btn {
             .str-copy-btn {
                 position: absolute;
                 position: absolute; top: 8px; right: 8px;
                top: 8px;
                 background: rgba(2, 95, 50, 0.7); color: #D0F0D0;
                right: 8px;
                 border: 1px solid rgba(193, 225, 166, 0.25); border-radius: 4px;
                 background: rgba(2, 95, 50, 0.7);
                 padding: 4px 10px; font-size: 10px;
                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;
                 font-family: 'Share Tech Mono', monospace;
                 letter-spacing: 1px;
                 letter-spacing: 1px; text-transform: uppercase;
                text-transform: uppercase;
                 cursor: pointer; opacity: 0;
                 cursor: pointer;
                 transition: all 0.2s ease; z-index: 50;
                opacity: 0;
                 transition: all 0.2s ease;
                z-index: 50;
             }
             }
             pre:hover .str-copy-btn { opacity: 1; }
             pre:hover .str-copy-btn { opacity: 1; }
Line 931: Line 825:
             }
             }
             pre { position: relative; }
             pre { position: relative; }
            /* === Scroll Reveal === */
             .str-reveal {
             .str-reveal {
                 opacity: 0;
                 opacity: 0; transform: translateY(18px);
                transform: translateY(18px);
                 transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                 transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                             transform 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 {
             .str-reveal.str-visible { opacity: 1; transform: translateY(0); }
                opacity: 1;
                transform: translateY(0);
            }
             .str-delay-1 { transition-delay: 0.06s; }
             .str-delay-1 { transition-delay: 0.06s; }
             .str-delay-2 { transition-delay: 0.14s; }
             .str-delay-2 { transition-delay: 0.14s; }
             .str-delay-3 { transition-delay: 0.22s; }
             .str-delay-3 { transition-delay: 0.22s; }
            /* === Animated Scanline Sweep === */
             #str-scanline-sweep {
             #str-scanline-sweep {
                 position: fixed;
                 position: fixed; inset: 0; pointer-events: none;
                top: 0;
                 z-index: 9991; overflow: hidden;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                 z-index: 9991;
                overflow: hidden;
             }
             }
             #str-scanline-sweep::after {
             #str-scanline-sweep::after {
                 content: "";
                 content: ""; position: absolute; left: 0;
                position: absolute;
                 width: 100%; height: 4px;
                left: 0;
                 background: linear-gradient(90deg,
                 width: 100%;
                     transparent 0%, rgba(193, 225, 166, 0.06) 15%,
                height: 4px;
                     rgba(2, 95, 50, 0.12) 40%, rgba(34, 204, 102, 0.08) 60%,
                 background: linear-gradient(
                     rgba(193, 225, 166, 0.06) 85%, transparent 100%);
                    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);
                 box-shadow: 0 0 30px rgba(2, 95, 50, 0.08);
                 animation: str-sweep-down 7s linear infinite;
                 animation: str-sweep-down 7s linear infinite;
             }
             }
             @keyframes str-sweep-down {
             @keyframes str-sweep-down { 0% { top: -10px; } 100% { top: 100%; } }
                0%   { top: -10px; }
                100% { top: 100%; }
            }
 
            /* === Irregular Luminance Flicker === */
             #str-flicker {
             #str-flicker {
                 position: fixed;
                 position: fixed; inset: 0; pointer-events: none;
                top: 0;
                 z-index: 9987; opacity: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                 z-index: 9987;
                opacity: 0;
                 animation: str-flicker-anim 0.12s steps(3) infinite;
                 animation: str-flicker-anim 0.12s steps(3) infinite;
             }
             }
             @keyframes str-flicker-anim {
             @keyframes str-flicker-anim {
                 0%   { opacity: 0; }
                 0% { opacity: 0; } 33% { opacity: 0.015; }
                33% { opacity: 0.015; }
                 66% { opacity: 0; } 100% { opacity: 0.008; }
                 66% { opacity: 0; }
                100% { opacity: 0.008; }
             }
             }
            /* === Ambient Corner Glow Pulse === */
             #str-ambient {
             #str-ambient {
                 position: fixed;
                 position: fixed; inset: 0; pointer-events: none;
                top: 0;
                 z-index: 9986; opacity: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                 z-index: 9986;
                opacity: 0;
                 animation: str-ambient-pulse 18s ease-in-out infinite;
                 animation: str-ambient-pulse 18s ease-in-out infinite;
             }
             }
             @keyframes str-ambient-pulse {
             @keyframes str-ambient-pulse {
                 0%, 100% { opacity: 0; }
                 0%, 100% { opacity: 0; } 50% { opacity: 1; }
                50%     { opacity: 1; }
             }
             }
         `;
         `;
Line 1,020: Line 870:
     };
     };


    /* --- Kill sticky header via JS (backup for CSS) --- */
     const killStickyHeader = () => {
     const killStickyHeader = () => {
         const hdr = document.getElementById('mw-header-container');
         const hdr = document.getElementById('mw-header-container');
         if (hdr) {
         if (!hdr) return;
            hdr.style.setProperty('position', 'relative', 'important');
        hdr.style.setProperty('position', 'relative', 'important');
            hdr.style.setProperty('top', 'auto', 'important');
        hdr.style.setProperty('top', 'auto', 'important');
         }
         new MutationObserver((mutations) => {
        /* Also kill any scroll-triggered class toggling */
        const observer = new MutationObserver((mutations) => {
             mutations.forEach((m) => {
             mutations.forEach((m) => {
                 if (m.target.id === 'mw-header-container' || m.target.classList.contains('mw-header-container')) {
                 if (m.target.id === 'mw-header-container' ||
                    m.target.classList.contains('mw-header-container')) {
                     m.target.style.setProperty('position', 'relative', 'important');
                     m.target.style.setProperty('position', 'relative', 'important');
                     m.target.style.setProperty('top', 'auto', 'important');
                     m.target.style.setProperty('top', 'auto', 'important');
                 }
                 }
             });
             });
         });
         }).observe(hdr, { attributes: true, attributeFilter: ['class', 'style'] });
        if (hdr) {
            observer.observe(hdr, { attributes: true, attributeFilter: ['class', 'style'] });
        }
     };
     };


    /* --- Reading progress bar --- */
     const initProgress = () => {
     const initProgress = () => {
         const c = document.createElement('div');
         const c = document.createElement('div');
Line 1,058: Line 900:
     };
     };


    /* --- Code copy buttons --- */
     const initCopy = () => {
     const initCopy = () => {
         document.querySelectorAll('pre').forEach(block => {
         document.querySelectorAll('pre').forEach(block => {
Line 1,079: Line 919:
     };
     };


    /* --- Scroll reveal with stagger --- */
     const initReveal = () => {
     const initReveal = () => {
         const observer = new IntersectionObserver((entries) => {
         const observer = new IntersectionObserver((entries) => {
Line 1,090: Line 928:
             });
             });
         }, { threshold: 0.04 });
         }, { threshold: 0.04 });
         const targets = document.querySelectorAll(
         const targets = document.querySelectorAll(
             '#mw-content h2, #mw-content h3, #mw-content h4, ' +
             '#mw-content h2, #mw-content h3, #mw-content h4, ' +
Line 1,096: Line 933:
             '#mw-content .toc, #catlinks, .sidebar-chunk'
             '#mw-content .toc, #catlinks, .sidebar-chunk'
         );
         );
        let i = 0;
         targets.forEach((el, i) => {
         targets.forEach(el => {
             el.classList.add('str-reveal', 'str-delay-' + ((i % 3) + 1));
             el.classList.add('str-reveal');
            el.classList.add('str-delay-' + ((i % 3) + 1));
             observer.observe(el);
             observer.observe(el);
            i++;
         });
         });
     };
     };


 
     const initOverlay = (id, bg) => {
    /* --- Animated scanline sweep --- */
     const initScanlineSweep = () => {
         const div = document.createElement('div');
         const div = document.createElement('div');
         div.id = 'str-scanline-sweep';
         div.id = id;
        if (bg) div.style.background = bg;
         document.body.appendChild(div);
         document.body.appendChild(div);
     };
     };


    /* --- Irregular flicker --- */
    const initFlicker = () => {
        const div = document.createElement('div');
        div.id = 'str-flicker';
        div.style.background = 'rgba(193, 225, 166, 0.12)';
        document.body.appendChild(div);
    };
    /* --- Ambient glow --- */
    const initAmbient = () => {
        const div = document.createElement('div');
        div.id = 'str-ambient';
        div.style.background = [
            'radial-gradient(ellipse at 3% 97%, rgba(2, 95, 50, 0.06) 0%, transparent 45%)',
            'radial-gradient(ellipse at 97% 3%, rgba(63, 57, 84, 0.08) 0%, transparent 40%)',
            'radial-gradient(ellipse at 50% 50%, rgba(34, 204, 102, 0.02) 0%, transparent 60%)'
        ].join(', ');
        document.body.appendChild(div);
    };
    /* --- Execute all --- */
     document.addEventListener('DOMContentLoaded', () => {
     document.addEventListener('DOMContentLoaded', () => {
         injectStyles();
         injectStyles();
Line 1,143: Line 952:
         initCopy();
         initCopy();
         initReveal();
         initReveal();
         initScanlineSweep();
         initOverlay('str-scanline-sweep');
         initFlicker();
         initOverlay('str-flicker', 'rgba(193, 225, 166, 0.12)');
         initAmbient();
         initOverlay('str-ambient', [
            'radial-gradient(ellipse at 3% 97%, rgba(2, 95, 50, 0.06) 0%, transparent 45%)',
            'radial-gradient(ellipse at 97% 3%, rgba(63, 57, 84, 0.08) 0%, transparent 40%)',
            'radial-gradient(ellipse at 50% 50%, rgba(34, 204, 102, 0.02) 0%, transparent 60%)'
        ].join(', '));
     });
     });
})();
})();
</script>
</script>

Revision as of 03:41, 30 May 2026

Description

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}}