Template:Theme-STR: Difference between revisions
From HUIJIA FUN
PlurimodSU (talk | contribs) m Edit |
PlurimodSU (talk | contribs) m Edit |
||
| Line 2: | Line 2: | ||
<html> | <html> | ||
<style> | <style> | ||
/** | /** | ||
* S.T.R. OFFICE | * S.T.R. OFFICE — TIMELESS THEME (v2.1, refactored) | ||
* Theme: Deep Cyber-Mystic | * 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 | ||
* | * → for Noble, set --str-accent and --str-heading to #FFD700 | ||
* | * | ||
* v2. | * v2.1: deduped font imports, merged text-brightness selectors, | ||
* consolidated mobile fixes into one media query, | |||
* removed dead code, fixed section numbering. | |||
* | |||
* | |||
*/ | */ | ||
/* === 1. Fonts (single consolidated import) === */ | |||
/* | @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& | |||
@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 === */ | |||
/* | |||
:root { | :root { | ||
--str-deep: #3F3954; | --str-deep: #3F3954; | ||
| Line 44: | Line 37: | ||
--color-surface-2: #202040; | --color-surface-2: #202040; | ||
--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); | ||
--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: | ||
} | } | ||
/* | /* === 4. Personal dropdown === */ | ||
#personal-inner.dropdown { | #personal-inner.dropdown { | ||
background-color: transparent !important; | background-color: transparent !important; | ||
| Line 91: | Line 82: | ||
} | } | ||
#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; | ||
} | } | ||
#p-personal .mw-portlet-body { | #p-personal .mw-portlet-body { | ||
background-color: transparent !important; | background-color: transparent !important; | ||
| Line 108: | Line 95: | ||
} | } | ||
#p-personal-label { | #p-personal-label { | ||
background-color: transparent !important; | background-color: transparent !important; | ||
| Line 120: | Line 106: | ||
} | } | ||
#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: | ||
} | } | ||
#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; } | ||
} | |||
/* === 5. Body + atmospheric overlays === */ | |||
body { | body { | ||
background-color: var(--str-bg-body) !important; | background-color: var(--str-bg-body) !important; | ||
| Line 146: | Line 129: | ||
} | } | ||
/* | body::before { /* static CRT scanlines */ | ||
content: ""; | content: ""; | ||
position: fixed; | position: fixed; | ||
inset: 0; | |||
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, | ||
rgba(0, 0, 0, 0.035) 2px, rgba(0, 0, 0, 0.035) 4px); | |||
rgba(0, 0, 0, 0.035) 2px, | |||
} | } | ||
/* | body::after { /* drifting luminance blobs */ | ||
content: ""; | content: ""; | ||
position: fixed; | position: fixed; | ||
| Line 191: | Line 165: | ||
} | } | ||
/* === 6. Kill desktop sticky header === */ | |||
/* === | |||
#mw-header-container, | #mw-header-container, | ||
#mw-header-hack, | #mw-header-hack, | ||
| Line 211: | Line 182: | ||
} | } | ||
.ts-container, | .ts-container, | ||
#mw-header-container.ts-sticky, | #mw-header-container.ts-sticky, | ||
| Line 219: | Line 189: | ||
} | } | ||
header, nav { position: relative !important; } | |||
header, | #mw-header-container::after { display: none !important; } | ||
nav { | |||
} | |||
#mw-header-container::after { | |||
} | |||
/* | /* === 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); | ||
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); | ||
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; } | ||
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; } | |||
90% { | |||
91% { | |||
92% { | |||
93% { | |||
} | } | ||
/* === 8. Content wrapper + card === */ | |||
/* | |||
#mw-content-wrapper { | #mw-content-wrapper { | ||
background: transparent !important; | background: transparent !important; | ||
padding-top: | 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: | 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); | ||
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 | /* 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; | ||
} | } | ||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-content-container { | #mw-content-container { margin-top: 25px; } | ||
} | } | ||
| Line 364: | Line 280: | ||
} | } | ||
/* | /* === 9. Pill search bar === */ | ||
#p-search { | #p-search { | ||
margin: 0 20px !important; | margin: 0 20px !important; | ||
| Line 408: | Line 324: | ||
} | } | ||
/* === 10. Sidebars (left + 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 — | /* 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; | ||
padding: 10px; | |||
padding: | |||
transition: color 0.2s ease, padding-left 0.2s ease; | transition: color 0.2s ease, padding-left 0.2s ease; | ||
} | } | ||
#ca-unwatch a { | #ca-unwatch a { | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
padding: 0 !important; | padding: 0 !important; | ||
box-sizing: content-box !important; | box-sizing: content-box !important; | ||
| Line 480: | Line 390: | ||
} | } | ||
.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: | ||
} | } | ||
.mw-portlet { | .mw-portlet { | ||
background-color: var(--str-bg-sidebar) !important; | background-color: var(--str-bg-sidebar) !important; | ||
padding: 0; | |||
padding: | |||
} | } | ||
| 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; | ||
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; } | ||
.mw-portlet li a:hover { color: var(--str-link) !important; } | |||
} | |||
.mw-portlet li a:hover { | |||
} | |||
/* === 11. 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; | ||
} | } | ||
.mw-body h1.firstHeading { | .mw-body h1.firstHeading { margin: 0.25em 0; } | ||
} | |||
h2 { | h2 { | ||
| Line 593: | Line 479: | ||
} | } | ||
/* === 12. 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; | ||
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, | |||
.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; } | ||
} | |||
.ace_cursor { | .ace_cursor { | ||
| Line 642: | Line 513: | ||
} | } | ||
/* === 13. Links === */ | |||
/* | |||
a { | a { | ||
color: var(--str-link) !important; | color: var(--str-link) !important; | ||
| Line 656: | Line 526: | ||
} | } | ||
a:visited { | a:visited { color: #55CCAA !important; } | ||
a.new { color: #EE7766 !important; } | |||
} | |||
/* === 14. 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); } | ||
} | |||
/* === 15. 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; } | ||
} | |||
/* === 16. 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 === */ | |||
/* | .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 === */ | |||
/* | |||
::selection { | ::selection { | ||
background-color: var(--str-green) !important; | background-color: var(--str-green) !important; | ||
| Line 763: | Line 617: | ||
} | } | ||
/* === 19. 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) === */ | |||
/* | |||
.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; } | ||
} | |||
.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 === */ | |||
/* | |||
::-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 === */ | |||
/* | 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 | * S.T.R. OFFICE — UI ENHANCEMENTS (v2.1) | ||
* | * Reading progress bar · code copy buttons · scroll reveal · | ||
* scanline sweep · flicker · ambient glow · sticky-header kill. | |||
* | |||
*/ | */ | ||
(function () { | |||
(function() { | |||
"use strict"; | "use strict"; | ||
| Line 887: | Line 798: | ||
const s = document.createElement('style'); | const s = document.createElement('style'); | ||
s.innerHTML = ` | s.innerHTML = ` | ||
#str-progress-container { | #str-progress-container { | ||
position: fixed; | position: fixed; bottom: 0; left: 0; | ||
width: 100%; height: 3px; | |||
background: rgba(0, 0, 0, 0.6); z-index: 99999; | |||
width: 100%; | |||
background: rgba(0, 0, 0, 0.6); | |||
} | } | ||
#str-progress-bar { | #str-progress-bar { | ||
height: 100%; | height: 100%; 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; | ||
} | } | ||
.str-copy-btn { | .str-copy-btn { | ||
position: absolute; | 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; | |||
background: rgba(2, 95, 50, 0.7); | padding: 4px 10px; font-size: 10px; | ||
border: 1px solid rgba(193, 225, 166, 0.25); | |||
padding: 4px 10px; | |||
font-family: 'Share Tech Mono', monospace; | font-family: 'Share Tech Mono', monospace; | ||
letter-spacing: 1px; | letter-spacing: 1px; text-transform: uppercase; | ||
cursor: pointer; opacity: 0; | |||
cursor: pointer; | transition: all 0.2s ease; z-index: 50; | ||
transition: all 0.2s ease; | |||
} | } | ||
pre:hover .str-copy-btn { opacity: 1; } | pre:hover .str-copy-btn { opacity: 1; } | ||
| Line 931: | Line 825: | ||
} | } | ||
pre { position: relative; } | pre { position: relative; } | ||
.str-reveal { | .str-reveal { | ||
opacity: 0; | opacity: 0; 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); } | ||
.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; } | ||
#str-scanline-sweep { | #str-scanline-sweep { | ||
position: fixed; | position: fixed; inset: 0; pointer-events: none; | ||
z-index: 9991; overflow: hidden; | |||
z-index: 9991; | |||
} | } | ||
#str-scanline-sweep::after { | #str-scanline-sweep::after { | ||
content: ""; | content: ""; position: absolute; left: 0; | ||
width: 100%; height: 4px; | |||
background: linear-gradient(90deg, | |||
width: 100%; | transparent 0%, rgba(193, 225, 166, 0.06) 15%, | ||
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%); | ||
transparent 0%, | |||
rgba(2, 95, 50, 0.12) 40%, | |||
rgba(193, 225, 166, 0.06) 85%, | |||
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%; } } | ||
#str-flicker { | #str-flicker { | ||
position: fixed; | position: fixed; inset: 0; pointer-events: none; | ||
z-index: 9987; opacity: 0; | |||
z-index: 9987; | |||
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% | 0% { opacity: 0; } 33% { opacity: 0.015; } | ||
66% { opacity: 0; } 100% { opacity: 0.008; } | |||
66% | |||
} | } | ||
#str-ambient { | #str-ambient { | ||
position: fixed; | position: fixed; inset: 0; pointer-events: none; | ||
z-index: 9986; opacity: 0; | |||
z-index: 9986; | |||
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; } | ||
} | } | ||
`; | `; | ||
| Line 1,020: | Line 870: | ||
}; | }; | ||
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('top', 'auto', 'important'); | |||
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'] }); | ||
}; | }; | ||
const initProgress = () => { | const initProgress = () => { | ||
const c = document.createElement('div'); | const c = document.createElement('div'); | ||
| Line 1,058: | Line 900: | ||
}; | }; | ||
const initCopy = () => { | const initCopy = () => { | ||
document.querySelectorAll('pre').forEach(block => { | document.querySelectorAll('pre').forEach(block => { | ||
| Line 1,079: | Line 919: | ||
}; | }; | ||
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' | ||
); | ); | ||
targets.forEach((el, i) => { | |||
targets.forEach(el => { | el.classList.add('str-reveal', 'str-delay-' + ((i % 3) + 1)); | ||
el.classList.add('str-reveal' | |||
observer.observe(el); | observer.observe(el); | ||
}); | }); | ||
}; | }; | ||
const initOverlay = (id, bg) => { | |||
const | |||
const div = document.createElement('div'); | const div = document.createElement('div'); | ||
div.id = | div.id = id; | ||
if (bg) div.style.background = bg; | |||
document.body.appendChild(div); | document.body.appendChild(div); | ||
}; | }; | ||
document.addEventListener('DOMContentLoaded', () => { | document.addEventListener('DOMContentLoaded', () => { | ||
injectStyles(); | injectStyles(); | ||
| Line 1,143: | Line 952: | ||
initCopy(); | initCopy(); | ||
initReveal(); | initReveal(); | ||
initOverlay('str-scanline-sweep'); | |||
initOverlay('str-flicker', 'rgba(193, 225, 166, 0.12)'); | |||
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}}
