https://en.huijia.fun/api.php?action=feedcontributions&feedformat=atom&user=PlurimodSU HUIJIA FUN - User contributions [en] 2026-10-15T15:51:19Z User contributions MediaWiki 1.43.9 https://en.huijia.fun/index.php?title=Template:Theme-VGR&diff=201 Template:Theme-VGR 2026-10-13T16:35:57Z <p>PlurimodSU: Site name: keep the English series title on one line (19px, nowrap)</p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> &lt;style&gt;<br /> /**<br /> * HUIJIA FUN - Theme-VGR (theme for the work Verdant Green Revelation)<br /> * VERDANT GREEN REVELATION — TIMELESS THEME v1.0<br /> * Design language: VGR Design System - Canon Zone (ink green, night)<br /> *<br /> * Position: between Theme-STR (Dipfield's sci-fi order) and Theme-HJ (Huijia's sober archive).<br /> * Sacred -&gt; a high-window halo at the top of the content card; a double-line lintel; ∴ as the only ornament<br /> * Heavy -&gt; ink-green ground; serif body text with wide leading; scripture passages in Kai script<br /> * Sub-utopian -&gt; a planning-map cross grid (only the intersections remain): order survives, but incomplete<br /> *<br /> * Only one animation is kept: the reading progress bar at the bottom. No scanlines, glitch text or drifting glows.<br /> * Header, personal menu, white-background fixes and table hover reuse the proven Theme-STR code.<br /> */<br /> <br /> /* === 1. Fonts === */<br /> @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&amp;family=Noto+Sans+SC:wght@400;500&amp;family=Source+Serif+4:ital,wght@0,400;0,600;1,400&amp;family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&amp;family=JetBrains+Mono:wght@400;500&amp;family=ZCOOL+XiaoWei&amp;display=swap');<br /> @import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');<br /> <br /> /* === 2. Tokens === */<br /> :root,<br /> html.skin-theme-clientpref-night {<br /> /* Source colors */<br /> --src-huijia-green: #025F32;<br /> --src-dragon-green: #3B7E3D;<br /> --src-plurimod-light: #C1E1A6;<br /> --src-plurimod-deep: #2F4F2F;<br /> <br /> /* Ground: ink green */<br /> --paper: #0B2419;<br /> --paper-raised: #0F2D20;<br /> --paper-sunk: #081B13;<br /> --paper-alt: #143626;<br /> <br /> /* Text */<br /> --ink: #E6EEE4; /* body text 12.5:1 */<br /> --ink-bright: #F4F8F1;<br /> --ink-muted: #A8C0AF; /* secondary text 7.6:1 */<br /> --heading: #C1E1A6; /* headings: Plurimod light green 10.3:1 */<br /> --nav-ink: #9CD8AC; /* sidebar: a deeper green than Theme-STR 9.1:1 */<br /> <br /> /* Lines */<br /> --rule: #24503A; /* decorative lines */<br /> --rule-strong: #6A9B80; /* borders that carry information, e.g. inputs 4.2:1 */<br /> --heading-bar: #4E9A50;<br /> --halo: rgba(193, 225, 166, 0.10); /* high-window halo */<br /> <br /> /* Accent */<br /> --accent: #B5D6A8; /* Canon Zone accent (night) 9.3:1 */<br /> --accent-fill: #025F32;<br /> --accent-fill-hover: #3B7E3D;<br /> --on-accent: #FFFFFF; /* 7.8:1 / 4.96:1 */<br /> --accent-tint: rgba(59, 126, 61, 0.14);<br /> --link: #A8E3BC;<br /> --link-visited: #8FCDA3;<br /> --link-hover: #C1E1A6;<br /> --link-new: #F2A491;<br /> --focus: #8FB0FF;<br /> <br /> /* Fonts: sans to look things up, serif to read, Kai for scripture */<br /> --font-body: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-display: Huiwen, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-sans: &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-latin: &quot;Cormorant Garamond&quot;, &quot;EB Garamond&quot;, Georgia, serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> --font-scripture: &quot;LXGW WenKai Screen&quot;, &quot;Kaiti SC&quot;, STKaiti, KaiTi, serif;<br /> <br /> /* Spacing */<br /> --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;<br /> --space-6: 24px; --space-8: 32px; --space-12: 48px;<br /> <br /> /* Shape: between HJ's square corners and STR's 6px */<br /> --radius: 2px;<br /> --radius-sm: 2px;<br /> --radius-none: 0;<br /> --radius-pill: 999px;<br /> --control-h: 40px;<br /> --control-w: 320px;<br /> <br /> /* Variables read by the skin and extensions */<br /> --color-primary: var(--accent-fill);<br /> --color-progressive: var(--link);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> --color-surface-0: #0B2419;<br /> --color-surface-1: #0F2D20;<br /> --color-surface-2: #143626;<br /> --color-surface-3: #1A4030;<br /> --color-surface-4: #22503B;<br /> --color-base: var(--ink);<br /> --color-base--subtle: var(--ink-muted);<br /> --color-emphasized: var(--ink-bright);<br /> --color-subtle: var(--ink-muted);<br /> --background-color-base: var(--paper-raised);<br /> --background-color-interactive: var(--color-surface-3);<br /> --background-color-interactive-subtle: var(--color-surface-2);<br /> --background-color-quiet--hover: rgba(169, 201, 160, 0.08);<br /> --border-color-base: var(--rule);<br /> --border-color-base--darker: var(--rule-strong);<br /> --border-color-subtle: var(--rule);<br /> --background-color-warning-subtle: #2A2A1C;<br /> <br /> /* Read by the personal menu (reuses the original Theme-STR code) */<br /> --str-accent: var(--heading);<br /> --mw-primary: var(--accent-fill);<br /> --mw-border: var(--rule-strong);<br /> --font-heading: var(--font-serif);<br /> --font-code: var(--font-mono);<br /> <br /> color-scheme: dark;<br /> }<br /> <br /> /* === 2b. Component tokens: read by the page components in Common.css section 8 (title block, cards, chapter track...) === */<br /> :root,<br /> html.skin-theme-clientpref-night {<br /> --c-surface: color-mix(in srgb, var(--paper-sunk) 25%, var(--paper-raised));<br /> --c-lintel-line: rgba(193, 225, 166, 0.22);<br /> --c-radius: var(--radius);<br /> --c-mark: &quot;∴&quot;;<br /> --c-label-font: var(--font-latin), &quot;Noto Serif SC&quot;, serif;<br /> --c-label-size: 15px;<br /> --c-label-weight: 600;<br /> --c-label-spacing: 0.18em;<br /> --c-soon-style: italic;<br /> --c-intro-border: 3px double var(--accent);<br /> --c-title-bg:<br /> radial-gradient(ellipse 70% 260px at 50% 0, var(--halo), transparent 75%) no-repeat,<br /> url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 20v8M20 24h8' stroke='%23C1E1A6' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E&quot;) center 0 repeat,<br /> var(--c-surface);<br /> --c-title-top: 3px solid var(--heading-bar);<br /> /* Lintel: a thin line 4px below the thick one; the gap shares --c-surface with the ground, so no seam shows between the lines */<br /> --c-title-shadow: inset 0 4px 0 var(--c-surface), inset 0 5px 0 var(--c-lintel-line);<br /> --c-title-ink: var(--ink-bright);<br /> --c-title-en-ink: var(--heading);<br /> --c-chap-bg: var(--paper-alt);<br /> --c-chap-bg-hover: var(--color-surface-3);<br /> --c-chap-top: 3px solid var(--heading-bar);<br /> --c-chap-lintel: var(--c-lintel-line);<br /> }<br /> <br /> /* === 3. Page ground === */<br /> html { background-color: var(--paper) !important; }<br /> body {<br /> background-color: var(--paper) !important;<br /> color: var(--ink) !important;<br /> font-family: var(--font-sans) !important;<br /> font-size: 16px;<br /> line-height: 1.8;<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> ::selection { background-color: var(--accent-fill) !important; color: var(--on-accent) !important; }<br /> :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> .kawaii-header-background { display: none !important; }<br /> <br /> /* === 4. Header (same as Theme-STR: z-index 1000 at every width; unpinned on desktop only) === */<br /> #mw-header-container,<br /> #mw-header-hack,<br /> .mw-header-container {<br /> background-color: var(--paper) !important;<br /> border-bottom: 1px solid var(--rule) !important;<br /> z-index: 1000 !important;<br /> }<br /> @media screen and (min-width: 851px) {<br /> #mw-header-container,<br /> #mw-header-hack,<br /> .mw-header-container,<br /> .ts-container,<br /> #mw-header-container.ts-sticky,<br /> .mw-header-container[style*=&quot;position&quot;] {<br /> position: relative !important;<br /> top: auto !important;<br /> }<br /> #mw-header-container::after { display: none !important; }<br /> }<br /> .mw-header-content,<br /> #mw-header { background: transparent !important; }<br /> <br /> /* === 5. Site name: the series title, wide tracking, static === */<br /> #p-banner {<br /> color: transparent !important;<br /> font-size: 0 !important;<br /> position: relative;<br /> display: flex !important;<br /> align-items: center;<br /> height: var(--control-h);<br /> }<br /> #p-banner a,<br /> #p-banner span {<br /> color: transparent !important;<br /> font-size: 0 !important;<br /> }<br /> #p-banner::after {<br /> content: &quot;Verdant Green Revelation&quot;;<br /> font-family: var(--font-latin) !important;<br /> font-size: 19px;<br /> font-weight: 600;<br /> line-height: var(--control-h);<br /> letter-spacing: 0.04em;<br /> white-space: nowrap; /* the English title is longer than the Chinese one; keep it on one line */<br /> color: var(--heading) !important;<br /> text-shadow: 0 0 18px rgba(193, 225, 166, 0.18);<br /> }<br /> <br /> /* === 6. Search box === */<br /> #p-search {<br /> margin: 0 20px !important;<br /> display: flex;<br /> align-items: center;<br /> }<br /> #searchform {<br /> background: var(--paper-alt) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius) !important;<br /> display: flex !important;<br /> flex-direction: row !important;<br /> align-items: center !important;<br /> height: var(--control-h);<br /> box-sizing: border-box;<br /> padding: 0 6px 0 14px !important;<br /> width: 100%;<br /> max-width: var(--control-w);<br /> overflow: hidden;<br /> transition: border-color 0.2s ease;<br /> }<br /> #searchform:focus-within { border-color: var(--accent) !important; }<br /> #simpleSearch {<br /> background: transparent !important;<br /> border: none !important;<br /> width: 100% !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> #searchInput {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> font-family: var(--font-sans);<br /> font-size: 14px !important;<br /> padding: 0 !important;<br /> height: calc(var(--control-h) - 2px);<br /> color: var(--ink-bright) !important;<br /> width: 100% !important;<br /> outline: none;<br /> }<br /> #searchInput::placeholder { color: var(--ink-muted); }<br /> <br /> /* === 7. Personal menu (avatar): copied unchanged from the original Theme-STR code === */<br /> #personal-inner.dropdown {<br /> background-color: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> padding: 0 !important;<br /> }<br /> <br /> #personal-inner #p-personal {<br /> background-color: #1a1a1a !important;<br /> border: 1px solid var(--str-accent) !important;<br /> border-radius: 8px !important;<br /> padding: 10px !important;<br /> box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 8px var(--str-accent) !important;<br /> }<br /> <br /> #p-personal .mw-portlet-body {<br /> background-color: transparent !important;<br /> border: none !important;<br /> }<br /> <br /> #p-personal-label {<br /> background-color: transparent !important;<br /> color: var(--str-accent) !important;<br /> text-align: center;<br /> font-weight: bold;<br /> letter-spacing: 0.05em;<br /> margin-bottom: 10px;<br /> padding-bottom: 6px;<br /> border-bottom: 1px solid var(--str-accent) !important;<br /> }<br /> <br /> #p-personal .mw-portlet-body ul li {<br /> background-color: transparent !important;<br /> transition: background-color 0.15s ease;<br /> }<br /> <br /> #p-personal .mw-portlet-body ul li:hover {<br /> background-color: rgba(0, 255, 100, 0.1) !important;<br /> border-radius: 4px;<br /> }<br /> <br /> #personal .dropdown span {<br /> color: #22CC66 !important;<br /> text-decoration: none !important;<br /> }<br /> <br /> #p-personal h3 {<br /> font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif !important;<br /> text-transform: uppercase;<br /> }<br /> #p-personal .mw-portlet-body li a {<br /> color: #F5F5FF !important;<br /> font-family: 'LXGW WenKai Screen', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;<br /> transition: color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> #p-personal .mw-portlet-body li a:hover {<br /> color: #C1E1A6 !important;<br /> padding-left: 5px;<br /> text-decoration: none !important;<br /> text-shadow: 0 0 6px rgba(102, 238, 187, 0.3);<br /> }<br /> <br /> /* === 8. Left and right sidebars: no shadows, thin dividers === */<br /> .sidebar-chunk {<br /> background-color: var(--paper-raised) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-top: 2px solid var(--src-plurimod-deep) !important;<br /> border-radius: var(--radius);<br /> margin-bottom: 16px;<br /> padding: 14px;<br /> box-shadow: none;<br /> }<br /> <br /> /* Group names: serif, wide tracking, like a stele heading */<br /> .sidebar-chunk h2,<br /> .sidebar-chunk h3,<br /> .sidebar-chunk .sidebar-name,<br /> .mw-portlet:not(#p-personal) h3 {<br /> font-family: var(--font-serif) !important;<br /> font-size: 14px !important;<br /> font-weight: 600 !important;<br /> color: var(--heading) !important;<br /> letter-spacing: 0.24em;<br /> text-transform: uppercase;<br /> border-bottom: 1px solid var(--rule) !important;<br /> padding-bottom: 8px;<br /> margin-bottom: 10px;<br /> }<br /> <br /> .sidebar-chunk li a,<br /> .sidebar-chunk li a span,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a span,<br /> #mw-site-navigation li a span,<br /> #mw-related-navigation li a span,<br /> #p-normal-catlinks a,<br /> #p-variants-desktop a {<br /> color: var(--nav-ink) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.03em;<br /> text-decoration: none !important;<br /> }<br /> .sidebar-chunk li a,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a {<br /> transition: color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .sidebar-chunk li a:hover span,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover span {<br /> color: var(--heading) !important;<br /> text-decoration: none !important;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover { padding-left: 12px; }<br /> <br /> .sidebar-inner li a:before { color: var(--heading) !important; }<br /> .sidebar-chunk .mw-ui-icon::before,<br /> .sidebar-chunk .mw-ui-icon svg,<br /> .sidebar-chunk img {<br /> filter: brightness(2) !important;<br /> opacity: 0.8 !important;<br /> }<br /> .mw-portlet:not(#p-personal) { background-color: transparent !important; padding: 0; }<br /> <br /> /* === 9. Content card: double-line lintel + high-window halo + cross grid === */<br /> #mw-content-wrapper {<br /> background: transparent !important;<br /> padding-top: 0;<br /> box-shadow: none !important;<br /> border: none !important;<br /> border-radius: 0 !important;<br /> }<br /> #mw-content {<br /> position: relative;<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink) !important;<br /> padding: 32px 36px;<br /> border: 1px solid var(--rule);<br /> border-top: 3px solid var(--heading-bar);<br /> border-radius: var(--radius);<br /> /* Second thin line of the lintel: 4px below the thick line */<br /> box-shadow:<br /> inset 0 4px 0 var(--paper-raised),<br /> inset 0 5px 0 rgba(193, 225, 166, 0.22);<br /> background-image:<br /> /* High-window halo: a shaft of light falling from the top center */<br /> radial-gradient(ellipse 60% 360px at 50% 0, var(--halo), transparent 75%),<br /> /* Cross grid: 48px spacing, intersections only */<br /> url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 20v8M20 24h8' stroke='%23C1E1A6' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E&quot;) !important;<br /> background-repeat: no-repeat, repeat !important;<br /> background-position: 0 0, 0 0 !important;<br /> }<br /> <br /> /* Body text: serif, wide leading */<br /> .mw-parser-output {<br /> font-family: var(--font-body);<br /> font-size: 16px;<br /> line-height: 1.95;<br /> letter-spacing: 0.02em;<br /> color: var(--ink);<br /> }<br /> #mw-content p, #mw-content li, #mw-content dd, #mw-content dt,<br /> .mw-body-content p, .mw-body-content li {<br /> color: var(--ink);<br /> }<br /> .mw-parser-output b,<br /> .mw-parser-output strong { font-weight: 600; color: var(--ink-bright); letter-spacing: 0; }<br /> i, em, cite { font-synthesis: none; }<br /> <br /> @media screen and (min-width: 1100px) {<br /> #mw-content-container { margin-top: 25px; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> #p-variants-desktop h3 {<br /> padding: 0;<br /> margin: 0;<br /> display: flex;<br /> align-items: center;<br /> }<br /> }<br /> <br /> /* Scripture and epigraphs: Kai script, double line on the left */<br /> .mw-parser-output blockquote {<br /> font-family: var(--font-scripture);<br /> font-size: 17px;<br /> line-height: 2;<br /> color: var(--ink);<br /> background: rgba(59, 126, 61, 0.06);<br /> border: none;<br /> border-left: 3px double var(--accent);<br /> margin: 1.4em 0;<br /> padding: 12px 20px;<br /> }<br /> <br /> /* Horizontal rule: drawn as the novel's scene break ∴ */<br /> .mw-parser-output hr {<br /> border: none;<br /> height: auto;<br /> background: none;<br /> margin: 2em 0;<br /> text-align: center;<br /> overflow: visible;<br /> }<br /> .mw-parser-output hr::after {<br /> content: &quot;∴&quot;;<br /> display: block;<br /> font-size: 15px;<br /> line-height: 1;<br /> color: var(--accent);<br /> background:<br /> linear-gradient(var(--rule-strong), var(--rule-strong)) left center / calc(50% - 20px) 1px no-repeat,<br /> linear-gradient(var(--rule-strong), var(--rule-strong)) right center / calc(50% - 20px) 1px no-repeat;<br /> }<br /> <br /> /* === 10. Page tabs (Template / Discussion / Read / Edit / History) === */<br /> .mw-portlet-views li a,<br /> .mw-portlet-namespaces li a,<br /> .mw-portlet-variants li a,<br /> .mw-portlet-views li a span,<br /> .mw-portlet-namespaces li a span {<br /> color: var(--ink-muted) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.06em;<br /> }<br /> .mw-portlet-views li.selected a,<br /> .mw-portlet-namespaces li.selected a,<br /> .mw-portlet-views li.selected a span,<br /> .mw-portlet-namespaces li.selected a span {<br /> color: var(--heading) !important;<br /> }<br /> .mw-portlet-views li.selected a,<br /> .mw-portlet-namespaces li.selected a {<br /> border-bottom: 2px solid var(--src-dragon-green) !important;<br /> box-shadow: none !important;<br /> }<br /> .tabber__tab { color: var(--ink-muted) !important; font-family: var(--font-body) !important; }<br /> .tabber__tab[aria-selected=&quot;true&quot;] { color: var(--heading) !important; }<br /> .tabber__indicator { background: var(--src-dragon-green) !important; }<br /> .tabber .tabbernav li a { color: var(--ink-muted) !important; font-family: var(--font-body) !important; }<br /> .tabber .tabbernav li.tabberactive a { color: var(--heading) !important; border-bottom-color: var(--src-dragon-green) !important; }<br /> <br /> /* === 11. Headings === */<br /> /* Page title: wide tracking; below it a lintel line &quot;— ∴ —&quot; instead of a plain underline */<br /> h1.firstHeading {<br /> font-family: var(--font-display) !important;<br /> color: var(--heading) !important;<br /> font-size: 30px;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> letter-spacing: 0.14em;<br /> border-bottom: none !important;<br /> padding-bottom: 0;<br /> margin: 0.25em 0 1.2em;<br /> text-shadow: 0 0 22px rgba(193, 225, 166, 0.12);<br /> }<br /> h1.firstHeading::after {<br /> content: &quot;∴&quot;;<br /> display: block;<br /> margin-top: 14px;<br /> font-size: 14px;<br /> line-height: 1;<br /> letter-spacing: 0;<br /> text-align: center;<br /> color: var(--accent);<br /> text-shadow: none;<br /> background:<br /> linear-gradient(90deg, transparent, var(--heading-bar)) left center / calc(50% - 20px) 1px no-repeat,<br /> linear-gradient(90deg, var(--heading-bar), transparent) right center / calc(50% - 20px) 1px no-repeat;<br /> }<br /> <br /> .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,<br /> .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {<br /> font-family: var(--font-serif) !important;<br /> color: var(--heading) !important;<br /> font-weight: 600;<br /> letter-spacing: 0.08em;<br /> padding-bottom: 8px;<br /> margin-bottom: 0.8em;<br /> overflow: hidden;<br /> display: block;<br /> text-wrap: balance;<br /> }<br /> .mw-parser-output h1 { font-size: 26px; border-bottom: 2px solid var(--heading-bar) !important; }<br /> .mw-parser-output h2 { font-size: 23px; border-bottom: 1px solid var(--heading-bar) !important; margin-top: 1.8em; }<br /> .mw-parser-output h3 { font-size: 19px; }<br /> .mw-parser-output h4 { font-size: 17px; }<br /> .mw-parser-output h5 { font-size: 15px; }<br /> .mw-parser-output h6 { font-family: var(--font-latin) !important; font-size: 15px; letter-spacing: 0.16em; color: var(--ink-muted) !important; }<br /> <br /> /* Canon Zone mark: ∴ before level-2 headings */<br /> .mw-parser-output h2::before {<br /> content: &quot;∴&quot;;<br /> color: var(--accent);<br /> font-size: 0.62em;<br /> margin-right: 12px;<br /> vertical-align: 0.18em;<br /> }<br /> .toc h2::before, #toc h2::before, .mw-parser-output .toctitle h2::before { content: none; }<br /> <br /> /* h3–h6: graded rules, shorter and fainter at each level */<br /> .mw-parser-output h3, .mw-parser-output h4,<br /> .mw-parser-output h5, .mw-parser-output h6 {<br /> border-bottom: none !important;<br /> position: relative;<br /> }<br /> .mw-parser-output h3::after, .mw-parser-output h4::after,<br /> .mw-parser-output h5::after, .mw-parser-output h6::after {<br /> content: &quot;&quot;;<br /> display: block;<br /> position: absolute;<br /> bottom: 0;<br /> left: 0;<br /> height: 1px;<br /> background: linear-gradient(90deg, var(--heading-bar), transparent);<br /> }<br /> .mw-parser-output h3::after { width: 75%; }<br /> .mw-parser-output h4::after { width: 55%; opacity: 0.75; }<br /> .mw-parser-output h5::after { width: 35%; opacity: 0.55; }<br /> .mw-parser-output h6::after { width: 20%; opacity: 0.35; }<br /> <br /> /* === 12. Code and editor === */<br /> code {<br /> background-color: var(--paper-alt) !important;<br /> color: #B8E6C4 !important;<br /> padding: 2px 6px;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> border: 1px solid var(--rule);<br /> }<br /> pre {<br /> position: relative;<br /> background-color: var(--paper-sunk) !important;<br /> color: var(--ink) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-left: 2px solid var(--src-dragon-green) !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> }<br /> .mw-editfont-monospace, #wpTextbox1, textarea.mw-editfont-monospace,<br /> .ace_editor, .ace_editor .ace_content, .ace_editor .ace_text-layer,<br /> .ace_editor .ace_line,<br /> .CodeMirror, .CodeMirror pre, .CodeMirror-code,<br /> .CodeMirror-line, .CodeMirror-line span,<br /> .mw-editfont-default, textarea {<br /> background-color: #071A11 !important;<br /> color: #E6F0E6 !important;<br /> font-family: var(--font-mono) !important;<br /> caret-color: var(--accent) !important;<br /> }<br /> .CodeMirror-gutters {<br /> background-color: var(--paper-sunk) !important;<br /> border-right: 1px solid var(--rule) !important;<br /> }<br /> .CodeMirror-linenumber { color: var(--ink-muted) !important; }<br /> .ace_cursor {<br /> color: var(--accent) !important;<br /> border-left-color: var(--accent) !important;<br /> }<br /> <br /> /* === 13. Links === */<br /> a {<br /> color: var(--link) !important;<br /> text-decoration: none;<br /> transition: color 0.2s ease;<br /> }<br /> a:visited { color: var(--link-visited) !important; }<br /> a:hover {<br /> color: var(--link-hover) !important;<br /> text-decoration: underline !important;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1px;<br /> }<br /> a.new, a.new:visited { color: var(--link-new) !important; }<br /> <br /> /* === 14. Tables: double line on top, serif headers with wide tracking === */<br /> table.wikitable {<br /> border-radius: var(--radius);<br /> overflow: hidden;<br /> border: 1px solid var(--rule) !important;<br /> border-top: 3px double var(--accent) !important;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> background-color: var(--paper-alt) !important;<br /> box-shadow: none;<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> }<br /> table.wikitable &gt; * &gt; tr &gt; th,<br /> table.wikitable &gt; tr &gt; th {<br /> background-color: rgba(59, 126, 61, 0.14) !important;<br /> color: var(--heading) !important;<br /> font-family: var(--font-serif) !important;<br /> font-size: 13px;<br /> font-weight: 600;<br /> letter-spacing: 0.14em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong) !important;<br /> }<br /> table.wikitable &gt; * &gt; tr &gt; td,<br /> table.wikitable &gt; tr &gt; td {<br /> padding: 9px 12px;<br /> border: none;<br /> border-top: 1px solid var(--rule) !important;<br /> color: var(--ink-bright) !important;<br /> background: transparent;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:nth-of-type(even) { background: transparent; }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover &gt; td,<br /> table.wikitable &gt; tr:hover &gt; td {<br /> background-color: rgba(59, 126, 61, 0.12) !important;<br /> color: var(--ink-bright) !important;<br /> }<br /> <br /> /* === 14b. Tables next to floats: full width by default, narrowing beside a right-floated image ===<br /> The outer table becomes a block and opens a BFC, so it avoids floats and takes only the remaining width;<br /> the inner tbody goes back to table layout and fills it, so column widths still follow the table algorithm. */<br /> .mw-parser-output table.wikitable {<br /> display: block;<br /> width: auto;<br /> max-width: 100%;<br /> overflow-x: auto;<br /> box-sizing: border-box;<br /> }<br /> .mw-parser-output table.wikitable &gt; tbody,<br /> .mw-parser-output table.wikitable &gt; thead,<br /> .mw-parser-output table.wikitable &gt; tfoot {<br /> display: table;<br /> width: 100%;<br /> }<br /> <br /> /* === 15. Category bar and footer === */<br /> #catlinks {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> padding: 12px 15px;<br /> color: var(--ink-muted) !important;<br /> }<br /> .mw-footer {<br /> background-color: transparent !important;<br /> padding: 25px 30px;<br /> margin-top: 30px;<br /> border-top: 1px solid var(--rule-strong) !important;<br /> color: var(--ink-muted) !important;<br /> }<br /> .mw-footer-container { background: transparent; }<br /> .mw-footer li,<br /> .mw-footer a { color: var(--ink-muted) !important; }<br /> <br /> /* === 16. Table of contents === */<br /> .toc, #toc {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-top: 2px solid var(--src-plurimod-deep) !important;<br /> border-radius: var(--radius);<br /> padding: 15px;<br /> color: var(--ink) !important;<br /> }<br /> .toc h2, #toc h2 {<br /> font-family: var(--font-serif) !important;<br /> color: var(--heading) !important;<br /> font-size: 14px !important;<br /> letter-spacing: 0.24em;<br /> }<br /> .toc a { color: var(--link) !important; }<br /> .toc li { color: var(--ink) !important; }<br /> <br /> /* === 17. Logo === */<br /> #p-logo, .mw-portlet-logo {<br /> display: flex !important;<br /> justify-content: center;<br /> align-items: center;<br /> padding: 15px 0 !important;<br /> margin-bottom: 8px;<br /> }<br /> <br /> /* === 18. Editor toolbar, buttons, diffs, inputs, notices === */<br /> .oo-ui-toolbar-bar {<br /> background-color: var(--paper-alt) !important;<br /> border-color: var(--rule) !important;<br /> }<br /> .oo-ui-buttonElement-framed.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> background-color: var(--paper-alt) !important;<br /> color: var(--ink-bright) !important;<br /> border-color: var(--rule-strong) !important;<br /> border-radius: var(--radius-sm) !important;<br /> }<br /> .oo-ui-labelElement .oo-ui-labelElement-label { color: var(--ink) !important; }<br /> .oo-ui-textInputWidget input,<br /> .oo-ui-textInputWidget textarea {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink-bright) !important;<br /> border-color: var(--rule-strong) !important;<br /> }<br /> td.diff-context {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink) !important;<br /> }<br /> td.diff-addedline { background-color: rgba(59, 126, 61, 0.2) !important; }<br /> td.diff-deletedline { background-color: rgba(180, 70, 60, 0.18) !important; }<br /> <br /> input[type=&quot;text&quot;], input[type=&quot;search&quot;],<br /> input[type=&quot;password&quot;], select {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink-bright) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-sans) !important;<br /> }<br /> .mw-ui-button,<br /> input[type=&quot;submit&quot;] {<br /> background-color: var(--accent-fill) !important;<br /> color: var(--on-accent) !important;<br /> border: none !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-sans) !important;<br /> letter-spacing: 0.04em;<br /> transition: background-color 0.2s ease;<br /> }<br /> .mw-ui-button:hover,<br /> input[type=&quot;submit&quot;]:hover { background-color: var(--accent-fill-hover) !important; }<br /> .previewnote, .mw-warning-with-logexcerpt, .warningbox {<br /> background-color: #2A2A1C !important;<br /> border-color: var(--rule) !important;<br /> color: var(--ink) !important;<br /> }<br /> .successbox {<br /> background-color: rgba(59, 126, 61, 0.2) !important;<br /> border-color: var(--src-dragon-green) !important;<br /> color: var(--ink) !important;<br /> }<br /> .errorbox {<br /> background-color: rgba(180, 70, 60, 0.2) !important;<br /> color: #F0B4A8 !important;<br /> }<br /> <br /> /* === 18b. Infobox ({{Info}}) and navboxes: dark version === */<br /> .infoBox {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-top: 3px double var(--accent) !important;<br /> border-radius: var(--radius) !important;<br /> box-shadow: none !important;<br /> color: var(--ink) !important;<br /> overflow: hidden;<br /> }<br /> .infoBoxContent {<br /> background-color: var(--paper-raised) !important;<br /> border: none !important;<br /> border-top: 1px solid var(--rule) !important;<br /> border-radius: 0 !important;<br /> }<br /> .infoBoxTitle {<br /> color: var(--heading) !important;<br /> font-family: var(--font-serif);<br /> letter-spacing: 0.12em;<br /> }<br /> .infoBoxText,<br /> .infoBoxBelow { color: var(--ink) !important; }<br /> .infoBoxIcon { color: var(--accent) !important; }<br /> .infoBox a { color: var(--link) !important; }<br /> <br /> table.infobox {<br /> background-color: var(--paper-alt) !important;<br /> color: var(--ink) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> }<br /> table.infobox th { color: var(--heading) !important; background-color: rgba(59, 126, 61, 0.14) !important; }<br /> <br /> .navbox,<br /> .navbox-subgroup,<br /> .navbox-list { background-color: var(--paper-alt) !important; border-color: var(--rule) !important; color: var(--ink) !important; }<br /> .navbox th, .navbox-title { background-color: rgba(59, 126, 61, 0.2) !important; color: var(--heading) !important; }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background-color: rgba(47, 79, 47, 0.35) !important; color: var(--ink) !important; }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background-color: var(--paper-raised) !important; }<br /> .navbox-even { background-color: rgba(255, 255, 255, 0.02) !important; }<br /> .navbox-odd { background-color: transparent !important; }<br /> <br /> /* === 18c. White backgrounds at low resolutions: all outer frames transparent === */<br /> #mw-wrapper,<br /> #mw-header-hack,<br /> #mw-header-nav-hack,<br /> #mw-content-container,<br /> #mw-content-block,<br /> #mw-site-navigation,<br /> #mw-related-navigation,<br /> #mw-footer-container,<br /> #mw-footer,<br /> .ts-inner {<br /> background-color: transparent !important;<br /> }<br /> <br /> /* === 19. Scrollbars === */<br /> ::-webkit-scrollbar { width: 8px; height: 8px; }<br /> ::-webkit-scrollbar-track { background: var(--paper); }<br /> ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }<br /> ::-webkit-scrollbar-thumb:hover { background: var(--src-dragon-green); }<br /> <br /> /* === 20. Reading progress bar and copy button === */<br /> #vgr-progress-container {<br /> position: fixed; bottom: 0; left: 0;<br /> width: 100%; height: 3px;<br /> background: rgba(0, 0, 0, 0.5);<br /> z-index: 99999;<br /> pointer-events: none;<br /> }<br /> #vgr-progress-bar {<br /> height: 100%; width: 0;<br /> background: var(--accent-fill);<br /> }<br /> .vgr-copy-btn {<br /> position: absolute; top: 8px; right: 8px;<br /> background: var(--accent-fill); color: var(--on-accent);<br /> border: none;<br /> border-radius: var(--radius-sm);<br /> padding: 4px 10px; font-size: 12px;<br /> font-family: var(--font-sans);<br /> letter-spacing: 0.04em;<br /> cursor: pointer; opacity: 0;<br /> transition: opacity 0.2s ease; z-index: 50;<br /> }<br /> pre:hover .vgr-copy-btn,<br /> .vgr-copy-btn:focus-visible { opacity: 1; }<br /> <br /> /* === 21. Reduced motion === */<br /> @media (prefers-reduced-motion: reduce) {<br /> * { transition: none !important; animation: none !important; }<br /> }<br /> <br /> /* === 22. Image frames === */<br /> figcaption, .thumbcaption {<br /> background: var(--paper-alt) !important;<br /> color: var(--ink-muted) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 13px !important;<br /> line-height: 1.7 !important;<br /> letter-spacing: 0.04em;<br /> text-align: center;<br /> padding: 8px 14px !important;<br /> border-top: 1px solid var(--rule) !important;<br /> }<br /> figure img, .thumbimage { filter: brightness(0.88); }<br /> figure img:hover, .thumbimage:hover { filter: none; }<br /> figure[typeof~='mw:File/Thumb'] &gt; figcaption, figure[typeof~='mw:File/Frame'] &gt; figcaption { border: none !important; }<br /> <br /> /* === 23. Phones (≤850px) === */<br /> @media screen and (max-width: 850px) {<br /> #mw-content { padding: 22px 16px; }<br /> h1.firstHeading { font-size: 25px; letter-spacing: 0.08em; }<br /> #p-banner::after { font-size: 17px; letter-spacing: 0.18em; }<br /> .sidebar-chunk {<br /> transform: none !important;<br /> opacity: 1 !important;<br /> background: none !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> .sidebar-chunk h2 {<br /> font-size: 0 !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> }<br /> .sidebar-chunk:empty,<br /> .mw-portlet:empty,<br /> .mw-portlet:not(:has(li)):not(:has(a)) {<br /> display: none !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> background: none !important;<br /> }<br /> #mw-content-block .sidebar-chunk {<br /> border: none !important;<br /> box-shadow: none !important;<br /> background: transparent !important;<br /> padding: 0 !important;<br /> }<br /> table.wikitable { display: block; overflow-x: auto; white-space: normal; }<br /> <br /> #mw-site-navigation .sidebar-inner,<br /> #mw-related-navigation .sidebar-inner,<br /> #site-tools .sidebar-inner,<br /> #mw-site-navigation .dropdown .mw-portlet-body,<br /> #mw-related-navigation .dropdown .mw-portlet-body {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius) !important;<br /> box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;<br /> color: var(--ink) !important;<br /> }<br /> <br /> #p-logo img {<br /> max-width: 180px !important;<br /> width: auto !important;<br /> height: auto !important;<br /> }<br /> }<br /> &lt;/style&gt;<br /> <br /> &lt;script&gt;<br /> /**<br /> * VERDANT GREEN REVELATION — UI (v1.0)<br /> * Reading progress bar, code copy button, header unpinned on desktop<br /> */<br /> (function () {<br /> &quot;use strict&quot;;<br /> if (window.__vgrThemeLoaded) return;<br /> window.__vgrThemeLoaded = true;<br /> <br /> var LABEL = { copy: &quot;Copy&quot;, done: &quot;Copied&quot;, fail: &quot;Copy failed&quot; };<br /> <br /> function killStickyHeader() {<br /> /* On phones, keep Timeless's original header positioning */<br /> if (window.matchMedia &amp;&amp; window.matchMedia(&quot;(max-width: 850px)&quot;).matches) return;<br /> var hdr = document.getElementById(&quot;mw-header-container&quot;);<br /> if (!hdr || !window.MutationObserver) return;<br /> var pin = function () {<br /> hdr.style.setProperty(&quot;position&quot;, &quot;relative&quot;, &quot;important&quot;);<br /> hdr.style.setProperty(&quot;top&quot;, &quot;auto&quot;, &quot;important&quot;);<br /> };<br /> pin();<br /> new MutationObserver(pin).observe(hdr, { attributes: true, attributeFilter: [&quot;class&quot;, &quot;style&quot;] });<br /> }<br /> <br /> function initProgress() {<br /> if (document.getElementById(&quot;vgr-progress-container&quot;)) return;<br /> var c = document.createElement(&quot;div&quot;);<br /> c.id = &quot;vgr-progress-container&quot;;<br /> var b = document.createElement(&quot;div&quot;);<br /> b.id = &quot;vgr-progress-bar&quot;;<br /> c.appendChild(b);<br /> document.body.appendChild(c);<br /> var ticking = false;<br /> function update() {<br /> var st = window.pageYOffset || document.documentElement.scrollTop;<br /> var dh = document.documentElement.scrollHeight - document.documentElement.clientHeight;<br /> b.style.width = (dh &gt; 0 ? (st / dh) * 100 : 0) + &quot;%&quot;;<br /> ticking = false;<br /> }<br /> window.addEventListener(&quot;scroll&quot;, function () {<br /> if (!ticking) { ticking = true; window.requestAnimationFrame(update); }<br /> }, { passive: true });<br /> update();<br /> }<br /> <br /> function initCopy() {<br /> document.querySelectorAll(&quot;#mw-content pre&quot;).forEach(function (block) {<br /> if (block.querySelector(&quot;.vgr-copy-btn&quot;)) return;<br /> var btn = document.createElement(&quot;button&quot;);<br /> btn.type = &quot;button&quot;;<br /> btn.className = &quot;vgr-copy-btn&quot;;<br /> btn.textContent = LABEL.copy;<br /> btn.addEventListener(&quot;click&quot;, function (e) {<br /> e.preventDefault();<br /> var clone = block.cloneNode(true);<br /> var own = clone.querySelector(&quot;.vgr-copy-btn&quot;);<br /> if (own) own.remove();<br /> var text = clone.textContent.trim();<br /> var done = function (label) {<br /> btn.textContent = label;<br /> setTimeout(function () { btn.textContent = LABEL.copy; }, 2000);<br /> };<br /> if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) {<br /> navigator.clipboard.writeText(text).then(<br /> function () { done(LABEL.done); },<br /> function () { done(LABEL.fail); }<br /> );<br /> } else {<br /> done(LABEL.fail);<br /> }<br /> });<br /> block.appendChild(btn);<br /> });<br /> }<br /> <br /> function init() {<br /> killStickyHeader();<br /> initProgress();<br /> initCopy();<br /> }<br /> <br /> if (document.readyState === &quot;loading&quot;) {<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, init);<br /> } else {<br /> init();<br /> }<br /> })();<br /> &lt;/script&gt;<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;&lt;noinclude&gt;{{Theme-VGR}}<br /> ==Description==<br /> '''Theme-VGR''' is the theme for the work ''Verdant Green Revelation'' and the Canon Zone on HUIJIA FUN. It follows the Canon Zone (night) palette of the VGR Design System and sits between Theme-STR (Dipfield's sci-fi order) and Theme-HJ (Huijia's sober archive): an ink-green ground, Plurimod light-green headings and a pale green accent. The content card has a double-line lintel, a high-window halo falling from the top and a planning-map cross grid; body text is set in a serif with wide leading, and scripture in Kai script. ∴ is its only ornament: it marks level-2 headings, the page title and horizontal rules.<br /> <br /> The only animation is the reading progress bar at the bottom: no scanlines, glitch text or drifting glows.<br /> <br /> ==Origin==<br /> Author: [[User:PlurimodSU|Marina Malinti]]<br /> <br /> ==Usage==<br /> This template has no parameters. Add the following at the very top of the page source:<br /> &lt;pre&gt;{{Theme-VGR}}&lt;/pre&gt;<br /> The whole page (header, sidebars, content card, footer) switches to the Canon Zone theme.<br /> <br /> ==Component tokens==<br /> The page components (&lt;code&gt;.vgr-title-block&lt;/code&gt;, &lt;code&gt;.rec-card&lt;/code&gt;, &lt;code&gt;.rec-subhead&lt;/code&gt;, &lt;code&gt;.rec-intro&lt;/code&gt;, &lt;code&gt;.novel-track&lt;/code&gt;, &lt;code&gt;.rec-soon&lt;/code&gt; and others) are defined in section 8 of &lt;code&gt;MediaWiki:Common.css&lt;/code&gt; and work on any page. This theme only resets the tokens below; pages without a theme use the defaults in Common.css (Archive Zone look).<br /> {| class=&quot;wikitable&quot;<br /> ! Token !! Value !! Used for<br /> |-<br /> | &lt;code&gt;--c-surface&lt;/code&gt; || &lt;code&gt;--paper-sunk&lt;/code&gt; mixed 25% into &lt;code&gt;--paper-raised&lt;/code&gt; || Title block background; also the gap color between the two lintel lines<br /> |-<br /> | &lt;code&gt;--c-lintel-line&lt;/code&gt; || &lt;code&gt;rgba(193,225,166,0.22)&lt;/code&gt; || Second thin line of the lintel<br /> |-<br /> | &lt;code&gt;--c-radius&lt;/code&gt; || &lt;code&gt;var(--radius)&lt;/code&gt; (2px) || Corners of cards, anchor buttons and the title block<br /> |-<br /> | &lt;code&gt;--c-mark&lt;/code&gt; || &lt;code&gt;&quot;∴&quot;&lt;/code&gt; || Zone mark: tagline divider and above Coming Soon<br /> |-<br /> | &lt;code&gt;--c-label-font&lt;/code&gt; || &lt;code&gt;var(--font-latin)&lt;/code&gt; || Font of small labels (&lt;code&gt;.rec-subhead&lt;/code&gt;, chapter numbers, Coming Soon)<br /> |-<br /> | &lt;code&gt;--c-label-size&lt;/code&gt; / &lt;code&gt;-weight&lt;/code&gt; / &lt;code&gt;-spacing&lt;/code&gt; || &lt;code&gt;15px&lt;/code&gt; / &lt;code&gt;600&lt;/code&gt; / &lt;code&gt;0.18em&lt;/code&gt; || Label size, weight and tracking<br /> |-<br /> | &lt;code&gt;--c-soon-style&lt;/code&gt; || &lt;code&gt;italic&lt;/code&gt; || Font style of Coming Soon<br /> |-<br /> | &lt;code&gt;--c-intro-border&lt;/code&gt; || &lt;code&gt;3px double var(--accent)&lt;/code&gt; || Double left rule of &lt;code&gt;.rec-intro&lt;/code&gt;<br /> |-<br /> | &lt;code&gt;--c-title-bg&lt;/code&gt; || high-window halo + cross grid + &lt;code&gt;--c-surface&lt;/code&gt; || Background of &lt;code&gt;.vgr-title-block&lt;/code&gt;<br /> |-<br /> | &lt;code&gt;--c-title-top&lt;/code&gt; / &lt;code&gt;-shadow&lt;/code&gt; || &lt;code&gt;3px solid var(--heading-bar)&lt;/code&gt; / double-line lintel || Title block top rule and lintel<br /> |-<br /> | &lt;code&gt;--c-title-ink&lt;/code&gt; / &lt;code&gt;-en-ink&lt;/code&gt; || &lt;code&gt;var(--ink-bright)&lt;/code&gt; / &lt;code&gt;var(--heading)&lt;/code&gt; || Main and secondary title colors in the title block<br /> |-<br /> | &lt;code&gt;--c-chap-bg&lt;/code&gt; / &lt;code&gt;-bg-hover&lt;/code&gt; || &lt;code&gt;var(--paper-alt)&lt;/code&gt; / &lt;code&gt;var(--color-surface-3)&lt;/code&gt; || Chapter card background and hover background<br /> |-<br /> | &lt;code&gt;--c-chap-top&lt;/code&gt; / &lt;code&gt;-lintel&lt;/code&gt; || &lt;code&gt;3px solid var(--heading-bar)&lt;/code&gt; / &lt;code&gt;var(--c-lintel-line)&lt;/code&gt; || Chapter card top rule and lintel line<br /> |}<br /> <br /> ==Page components==<br /> With this theme on the page, the components below take on the Canon Zone look.<br /> <br /> * '''Title block''': &lt;code&gt;.vgr-title-block&lt;/code&gt; (&lt;code&gt;-cn&lt;/code&gt; / &lt;code&gt;-en&lt;/code&gt; / &lt;code&gt;-sub&lt;/code&gt; / &lt;code&gt;-tagline&lt;/code&gt;). A page with a title block hides the default page title and table of contents<br /> * '''Anchor bar''': &lt;code&gt;#rec-anchors&lt;/code&gt;<br /> * '''Section''': &lt;code&gt;.rec-section&lt;/code&gt;, which only adds space above the section heading<br /> * '''Epigraph''': &lt;code&gt;.rec-intro&lt;/code&gt;; '''small label''': &lt;code&gt;.rec-subhead&lt;/code&gt; (not a real heading, not in the TOC)<br /> * '''Grid''': &lt;code&gt;.rec-grid&lt;/code&gt; + &lt;code&gt;.rec-grid-2&lt;/code&gt; / &lt;code&gt;.rec-grid-4&lt;/code&gt;; '''card with description''': &lt;code&gt;.rec-card&lt;/code&gt; (title in &lt;code&gt;.rec-card-title&lt;/code&gt;); '''compact link''': &lt;code&gt;.rec-link&lt;/code&gt;<br /> * '''Chapter track''': &lt;code&gt;.novel-track&lt;/code&gt; / &lt;code&gt;.novel-chap&lt;/code&gt; (&lt;code&gt;.chap-no&lt;/code&gt; / &lt;code&gt;.chap-pd&lt;/code&gt; / &lt;code&gt;.chap-title&lt;/code&gt; / &lt;code&gt;.chap-desc&lt;/code&gt;; unfinished chapters use &lt;code&gt;.chap-upcoming&lt;/code&gt;)<br /> * '''Placeholder''': &lt;code&gt;.rec-soon&lt;/code&gt;<br /> <br /> ===Example===<br /> &lt;div class=&quot;vgr-demo&quot;&gt;<br /> &lt;div class=&quot;vgr-title-block&quot;&gt;<br /> &lt;div class=&quot;vgr-title-cn&quot;&gt;Series Title&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-en&quot;&gt;Series Subtitle&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-sub&quot;&gt;A one-line introduction to the series&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-tagline&quot;&gt;An optional epigraph.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div id=&quot;rec-anchors&quot;&gt;<br /> [[#demo-section-1|Section One]]<br /> [[#demo-section-2|Section Two]]<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> &lt;html&gt;&lt;div class=&quot;mw-heading mw-heading2&quot;&gt;&lt;h2 id=&quot;demo-section-1&quot;&gt;Section One&lt;/h2&gt;&lt;/div&gt;&lt;/html&gt;<br /> &lt;div class=&quot;rec-intro&quot;&gt;A short introduction to this section.&lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Cards with descriptions&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-2&quot;&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Entry title]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Another entry]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Compact links&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-4&quot;&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term one]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term two]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term three]]&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;novel-track&quot;&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter I&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter II&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter III&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter IV&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap chap-upcoming&quot;&gt;In progress&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> &lt;html&gt;&lt;div class=&quot;mw-heading mw-heading2&quot;&gt;&lt;h2 id=&quot;demo-section-2&quot;&gt;Section Two&lt;/h2&gt;&lt;/div&gt;&lt;/html&gt;<br /> &lt;div class=&quot;rec-soon&quot;&gt;Coming Soon&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> ===Code===<br /> Put &lt;code&gt;&lt;nowiki&gt;{{Theme-VGR}}&lt;/nowiki&gt;&lt;/code&gt; at the very top of the page, then build the body like this:<br /> &lt;pre&gt;<br /> &lt;div class=&quot;vgr-title-block&quot;&gt;<br /> &lt;div class=&quot;vgr-title-cn&quot;&gt;Series Title&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-en&quot;&gt;Series Subtitle&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-sub&quot;&gt;A one-line introduction to the series&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-tagline&quot;&gt;An optional epigraph.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div id=&quot;rec-anchors&quot;&gt;<br /> [[#Section One|Section One]]<br /> [[#Section Two|Section Two]]<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> == Section One ==<br /> &lt;div class=&quot;rec-intro&quot;&gt;A short introduction to this section.&lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Cards with descriptions&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-2&quot;&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Entry title]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Another entry]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Compact links&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-4&quot;&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term one]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term two]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term three]]&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;novel-track&quot;&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter I&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter II&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter III&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter IV&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap chap-upcoming&quot;&gt;In progress&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> == Section Two ==<br /> &lt;div class=&quot;rec-soon&quot;&gt;Coming Soon&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> <br /> * The two section headings in the example are written in HTML so they stay out of this page's TOC; on a real page use &lt;code&gt;&lt;nowiki&gt;== Section One ==&lt;/nowiki&gt;&lt;/code&gt; as in the code above.<br /> * A title block wrapped in &lt;code&gt;&lt;nowiki&gt;&lt;div class=&quot;vgr-demo&quot;&gt;&lt;/nowiki&gt;&lt;/code&gt; does not hide the page title or TOC; it is for documentation pages only.<br /> * The old &lt;code&gt;mini-block rec-card&lt;/code&gt;, &lt;code&gt;mini-block-title&lt;/code&gt; and &lt;code&gt;mini-block-list&lt;/code&gt; classes still work, but new pages should use the classes above.<br /> <br /> ==Test==<br /> A body paragraph with an [[Main Page|internal link]], a [[Nonexistent Page|red link]], some &lt;code&gt;inline code&lt;/code&gt; and '''bold text'''.<br /> <br /> &lt;blockquote&gt;A scripture passage or epigraph is set in Kai script with a double line on the left.&lt;/blockquote&gt;<br /> <br /> ----<br /> <br /> ===Subheading 3===<br /> ====Subheading 4====<br /> =====Subheading 5=====<br /> ======Subheading 6======<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! Event !! S.C. !! O.<br /> |-<br /> | Sample event A || 1999 || 0<br /> |-<br /> | Sample event B || 2021.05.14 || 22.05.14<br /> |}<br /> <br /> [[Category:Template-Theme]]<br /> &lt;/noinclude&gt;</div> PlurimodSU https://en.huijia.fun/index.php?title=Template:Theme-VGR&diff=200 Template:Theme-VGR 2026-10-13T16:35:19Z <p>PlurimodSU: Create Theme-VGR (Canon Zone theme) ported from the zh site, with English comments and documentation</p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> &lt;style&gt;<br /> /**<br /> * HUIJIA FUN - Theme-VGR (theme for the work Verdant Green Revelation)<br /> * VERDANT GREEN REVELATION — TIMELESS THEME v1.0<br /> * Design language: VGR Design System - Canon Zone (ink green, night)<br /> *<br /> * Position: between Theme-STR (Dipfield's sci-fi order) and Theme-HJ (Huijia's sober archive).<br /> * Sacred -&gt; a high-window halo at the top of the content card; a double-line lintel; ∴ as the only ornament<br /> * Heavy -&gt; ink-green ground; serif body text with wide leading; scripture passages in Kai script<br /> * Sub-utopian -&gt; a planning-map cross grid (only the intersections remain): order survives, but incomplete<br /> *<br /> * Only one animation is kept: the reading progress bar at the bottom. No scanlines, glitch text or drifting glows.<br /> * Header, personal menu, white-background fixes and table hover reuse the proven Theme-STR code.<br /> */<br /> <br /> /* === 1. Fonts === */<br /> @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&amp;family=Noto+Sans+SC:wght@400;500&amp;family=Source+Serif+4:ital,wght@0,400;0,600;1,400&amp;family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&amp;family=JetBrains+Mono:wght@400;500&amp;family=ZCOOL+XiaoWei&amp;display=swap');<br /> @import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');<br /> <br /> /* === 2. Tokens === */<br /> :root,<br /> html.skin-theme-clientpref-night {<br /> /* Source colors */<br /> --src-huijia-green: #025F32;<br /> --src-dragon-green: #3B7E3D;<br /> --src-plurimod-light: #C1E1A6;<br /> --src-plurimod-deep: #2F4F2F;<br /> <br /> /* Ground: ink green */<br /> --paper: #0B2419;<br /> --paper-raised: #0F2D20;<br /> --paper-sunk: #081B13;<br /> --paper-alt: #143626;<br /> <br /> /* Text */<br /> --ink: #E6EEE4; /* body text 12.5:1 */<br /> --ink-bright: #F4F8F1;<br /> --ink-muted: #A8C0AF; /* secondary text 7.6:1 */<br /> --heading: #C1E1A6; /* headings: Plurimod light green 10.3:1 */<br /> --nav-ink: #9CD8AC; /* sidebar: a deeper green than Theme-STR 9.1:1 */<br /> <br /> /* Lines */<br /> --rule: #24503A; /* decorative lines */<br /> --rule-strong: #6A9B80; /* borders that carry information, e.g. inputs 4.2:1 */<br /> --heading-bar: #4E9A50;<br /> --halo: rgba(193, 225, 166, 0.10); /* high-window halo */<br /> <br /> /* Accent */<br /> --accent: #B5D6A8; /* Canon Zone accent (night) 9.3:1 */<br /> --accent-fill: #025F32;<br /> --accent-fill-hover: #3B7E3D;<br /> --on-accent: #FFFFFF; /* 7.8:1 / 4.96:1 */<br /> --accent-tint: rgba(59, 126, 61, 0.14);<br /> --link: #A8E3BC;<br /> --link-visited: #8FCDA3;<br /> --link-hover: #C1E1A6;<br /> --link-new: #F2A491;<br /> --focus: #8FB0FF;<br /> <br /> /* Fonts: sans to look things up, serif to read, Kai for scripture */<br /> --font-body: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-display: Huiwen, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-sans: &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-latin: &quot;Cormorant Garamond&quot;, &quot;EB Garamond&quot;, Georgia, serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> --font-scripture: &quot;LXGW WenKai Screen&quot;, &quot;Kaiti SC&quot;, STKaiti, KaiTi, serif;<br /> <br /> /* Spacing */<br /> --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;<br /> --space-6: 24px; --space-8: 32px; --space-12: 48px;<br /> <br /> /* Shape: between HJ's square corners and STR's 6px */<br /> --radius: 2px;<br /> --radius-sm: 2px;<br /> --radius-none: 0;<br /> --radius-pill: 999px;<br /> --control-h: 40px;<br /> --control-w: 320px;<br /> <br /> /* Variables read by the skin and extensions */<br /> --color-primary: var(--accent-fill);<br /> --color-progressive: var(--link);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> --color-surface-0: #0B2419;<br /> --color-surface-1: #0F2D20;<br /> --color-surface-2: #143626;<br /> --color-surface-3: #1A4030;<br /> --color-surface-4: #22503B;<br /> --color-base: var(--ink);<br /> --color-base--subtle: var(--ink-muted);<br /> --color-emphasized: var(--ink-bright);<br /> --color-subtle: var(--ink-muted);<br /> --background-color-base: var(--paper-raised);<br /> --background-color-interactive: var(--color-surface-3);<br /> --background-color-interactive-subtle: var(--color-surface-2);<br /> --background-color-quiet--hover: rgba(169, 201, 160, 0.08);<br /> --border-color-base: var(--rule);<br /> --border-color-base--darker: var(--rule-strong);<br /> --border-color-subtle: var(--rule);<br /> --background-color-warning-subtle: #2A2A1C;<br /> <br /> /* Read by the personal menu (reuses the original Theme-STR code) */<br /> --str-accent: var(--heading);<br /> --mw-primary: var(--accent-fill);<br /> --mw-border: var(--rule-strong);<br /> --font-heading: var(--font-serif);<br /> --font-code: var(--font-mono);<br /> <br /> color-scheme: dark;<br /> }<br /> <br /> /* === 2b. Component tokens: read by the page components in Common.css section 8 (title block, cards, chapter track...) === */<br /> :root,<br /> html.skin-theme-clientpref-night {<br /> --c-surface: color-mix(in srgb, var(--paper-sunk) 25%, var(--paper-raised));<br /> --c-lintel-line: rgba(193, 225, 166, 0.22);<br /> --c-radius: var(--radius);<br /> --c-mark: &quot;∴&quot;;<br /> --c-label-font: var(--font-latin), &quot;Noto Serif SC&quot;, serif;<br /> --c-label-size: 15px;<br /> --c-label-weight: 600;<br /> --c-label-spacing: 0.18em;<br /> --c-soon-style: italic;<br /> --c-intro-border: 3px double var(--accent);<br /> --c-title-bg:<br /> radial-gradient(ellipse 70% 260px at 50% 0, var(--halo), transparent 75%) no-repeat,<br /> url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 20v8M20 24h8' stroke='%23C1E1A6' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E&quot;) center 0 repeat,<br /> var(--c-surface);<br /> --c-title-top: 3px solid var(--heading-bar);<br /> /* Lintel: a thin line 4px below the thick one; the gap shares --c-surface with the ground, so no seam shows between the lines */<br /> --c-title-shadow: inset 0 4px 0 var(--c-surface), inset 0 5px 0 var(--c-lintel-line);<br /> --c-title-ink: var(--ink-bright);<br /> --c-title-en-ink: var(--heading);<br /> --c-chap-bg: var(--paper-alt);<br /> --c-chap-bg-hover: var(--color-surface-3);<br /> --c-chap-top: 3px solid var(--heading-bar);<br /> --c-chap-lintel: var(--c-lintel-line);<br /> }<br /> <br /> /* === 3. Page ground === */<br /> html { background-color: var(--paper) !important; }<br /> body {<br /> background-color: var(--paper) !important;<br /> color: var(--ink) !important;<br /> font-family: var(--font-sans) !important;<br /> font-size: 16px;<br /> line-height: 1.8;<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> ::selection { background-color: var(--accent-fill) !important; color: var(--on-accent) !important; }<br /> :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> .kawaii-header-background { display: none !important; }<br /> <br /> /* === 4. Header (same as Theme-STR: z-index 1000 at every width; unpinned on desktop only) === */<br /> #mw-header-container,<br /> #mw-header-hack,<br /> .mw-header-container {<br /> background-color: var(--paper) !important;<br /> border-bottom: 1px solid var(--rule) !important;<br /> z-index: 1000 !important;<br /> }<br /> @media screen and (min-width: 851px) {<br /> #mw-header-container,<br /> #mw-header-hack,<br /> .mw-header-container,<br /> .ts-container,<br /> #mw-header-container.ts-sticky,<br /> .mw-header-container[style*=&quot;position&quot;] {<br /> position: relative !important;<br /> top: auto !important;<br /> }<br /> #mw-header-container::after { display: none !important; }<br /> }<br /> .mw-header-content,<br /> #mw-header { background: transparent !important; }<br /> <br /> /* === 5. Site name: the series title, wide tracking, static === */<br /> #p-banner {<br /> color: transparent !important;<br /> font-size: 0 !important;<br /> position: relative;<br /> display: flex !important;<br /> align-items: center;<br /> height: var(--control-h);<br /> }<br /> #p-banner a,<br /> #p-banner span {<br /> color: transparent !important;<br /> font-size: 0 !important;<br /> }<br /> #p-banner::after {<br /> content: &quot;Verdant Green Revelation&quot;;<br /> font-family: var(--font-latin) !important;<br /> font-size: 21px;<br /> font-weight: 600;<br /> line-height: var(--control-h);<br /> letter-spacing: 0.08em;<br /> color: var(--heading) !important;<br /> text-shadow: 0 0 18px rgba(193, 225, 166, 0.18);<br /> }<br /> <br /> /* === 6. Search box === */<br /> #p-search {<br /> margin: 0 20px !important;<br /> display: flex;<br /> align-items: center;<br /> }<br /> #searchform {<br /> background: var(--paper-alt) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius) !important;<br /> display: flex !important;<br /> flex-direction: row !important;<br /> align-items: center !important;<br /> height: var(--control-h);<br /> box-sizing: border-box;<br /> padding: 0 6px 0 14px !important;<br /> width: 100%;<br /> max-width: var(--control-w);<br /> overflow: hidden;<br /> transition: border-color 0.2s ease;<br /> }<br /> #searchform:focus-within { border-color: var(--accent) !important; }<br /> #simpleSearch {<br /> background: transparent !important;<br /> border: none !important;<br /> width: 100% !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> #searchInput {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> font-family: var(--font-sans);<br /> font-size: 14px !important;<br /> padding: 0 !important;<br /> height: calc(var(--control-h) - 2px);<br /> color: var(--ink-bright) !important;<br /> width: 100% !important;<br /> outline: none;<br /> }<br /> #searchInput::placeholder { color: var(--ink-muted); }<br /> <br /> /* === 7. Personal menu (avatar): copied unchanged from the original Theme-STR code === */<br /> #personal-inner.dropdown {<br /> background-color: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> padding: 0 !important;<br /> }<br /> <br /> #personal-inner #p-personal {<br /> background-color: #1a1a1a !important;<br /> border: 1px solid var(--str-accent) !important;<br /> border-radius: 8px !important;<br /> padding: 10px !important;<br /> box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 8px var(--str-accent) !important;<br /> }<br /> <br /> #p-personal .mw-portlet-body {<br /> background-color: transparent !important;<br /> border: none !important;<br /> }<br /> <br /> #p-personal-label {<br /> background-color: transparent !important;<br /> color: var(--str-accent) !important;<br /> text-align: center;<br /> font-weight: bold;<br /> letter-spacing: 0.05em;<br /> margin-bottom: 10px;<br /> padding-bottom: 6px;<br /> border-bottom: 1px solid var(--str-accent) !important;<br /> }<br /> <br /> #p-personal .mw-portlet-body ul li {<br /> background-color: transparent !important;<br /> transition: background-color 0.15s ease;<br /> }<br /> <br /> #p-personal .mw-portlet-body ul li:hover {<br /> background-color: rgba(0, 255, 100, 0.1) !important;<br /> border-radius: 4px;<br /> }<br /> <br /> #personal .dropdown span {<br /> color: #22CC66 !important;<br /> text-decoration: none !important;<br /> }<br /> <br /> #p-personal h3 {<br /> font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif !important;<br /> text-transform: uppercase;<br /> }<br /> #p-personal .mw-portlet-body li a {<br /> color: #F5F5FF !important;<br /> font-family: 'LXGW WenKai Screen', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;<br /> transition: color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> #p-personal .mw-portlet-body li a:hover {<br /> color: #C1E1A6 !important;<br /> padding-left: 5px;<br /> text-decoration: none !important;<br /> text-shadow: 0 0 6px rgba(102, 238, 187, 0.3);<br /> }<br /> <br /> /* === 8. Left and right sidebars: no shadows, thin dividers === */<br /> .sidebar-chunk {<br /> background-color: var(--paper-raised) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-top: 2px solid var(--src-plurimod-deep) !important;<br /> border-radius: var(--radius);<br /> margin-bottom: 16px;<br /> padding: 14px;<br /> box-shadow: none;<br /> }<br /> <br /> /* Group names: serif, wide tracking, like a stele heading */<br /> .sidebar-chunk h2,<br /> .sidebar-chunk h3,<br /> .sidebar-chunk .sidebar-name,<br /> .mw-portlet:not(#p-personal) h3 {<br /> font-family: var(--font-serif) !important;<br /> font-size: 14px !important;<br /> font-weight: 600 !important;<br /> color: var(--heading) !important;<br /> letter-spacing: 0.24em;<br /> text-transform: uppercase;<br /> border-bottom: 1px solid var(--rule) !important;<br /> padding-bottom: 8px;<br /> margin-bottom: 10px;<br /> }<br /> <br /> .sidebar-chunk li a,<br /> .sidebar-chunk li a span,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a span,<br /> #mw-site-navigation li a span,<br /> #mw-related-navigation li a span,<br /> #p-normal-catlinks a,<br /> #p-variants-desktop a {<br /> color: var(--nav-ink) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.03em;<br /> text-decoration: none !important;<br /> }<br /> .sidebar-chunk li a,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a {<br /> transition: color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .sidebar-chunk li a:hover span,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover span {<br /> color: var(--heading) !important;<br /> text-decoration: none !important;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover { padding-left: 12px; }<br /> <br /> .sidebar-inner li a:before { color: var(--heading) !important; }<br /> .sidebar-chunk .mw-ui-icon::before,<br /> .sidebar-chunk .mw-ui-icon svg,<br /> .sidebar-chunk img {<br /> filter: brightness(2) !important;<br /> opacity: 0.8 !important;<br /> }<br /> .mw-portlet:not(#p-personal) { background-color: transparent !important; padding: 0; }<br /> <br /> /* === 9. Content card: double-line lintel + high-window halo + cross grid === */<br /> #mw-content-wrapper {<br /> background: transparent !important;<br /> padding-top: 0;<br /> box-shadow: none !important;<br /> border: none !important;<br /> border-radius: 0 !important;<br /> }<br /> #mw-content {<br /> position: relative;<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink) !important;<br /> padding: 32px 36px;<br /> border: 1px solid var(--rule);<br /> border-top: 3px solid var(--heading-bar);<br /> border-radius: var(--radius);<br /> /* Second thin line of the lintel: 4px below the thick line */<br /> box-shadow:<br /> inset 0 4px 0 var(--paper-raised),<br /> inset 0 5px 0 rgba(193, 225, 166, 0.22);<br /> background-image:<br /> /* High-window halo: a shaft of light falling from the top center */<br /> radial-gradient(ellipse 60% 360px at 50% 0, var(--halo), transparent 75%),<br /> /* Cross grid: 48px spacing, intersections only */<br /> url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 20v8M20 24h8' stroke='%23C1E1A6' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E&quot;) !important;<br /> background-repeat: no-repeat, repeat !important;<br /> background-position: 0 0, 0 0 !important;<br /> }<br /> <br /> /* Body text: serif, wide leading */<br /> .mw-parser-output {<br /> font-family: var(--font-body);<br /> font-size: 16px;<br /> line-height: 1.95;<br /> letter-spacing: 0.02em;<br /> color: var(--ink);<br /> }<br /> #mw-content p, #mw-content li, #mw-content dd, #mw-content dt,<br /> .mw-body-content p, .mw-body-content li {<br /> color: var(--ink);<br /> }<br /> .mw-parser-output b,<br /> .mw-parser-output strong { font-weight: 600; color: var(--ink-bright); letter-spacing: 0; }<br /> i, em, cite { font-synthesis: none; }<br /> <br /> @media screen and (min-width: 1100px) {<br /> #mw-content-container { margin-top: 25px; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> #p-variants-desktop h3 {<br /> padding: 0;<br /> margin: 0;<br /> display: flex;<br /> align-items: center;<br /> }<br /> }<br /> <br /> /* Scripture and epigraphs: Kai script, double line on the left */<br /> .mw-parser-output blockquote {<br /> font-family: var(--font-scripture);<br /> font-size: 17px;<br /> line-height: 2;<br /> color: var(--ink);<br /> background: rgba(59, 126, 61, 0.06);<br /> border: none;<br /> border-left: 3px double var(--accent);<br /> margin: 1.4em 0;<br /> padding: 12px 20px;<br /> }<br /> <br /> /* Horizontal rule: drawn as the novel's scene break ∴ */<br /> .mw-parser-output hr {<br /> border: none;<br /> height: auto;<br /> background: none;<br /> margin: 2em 0;<br /> text-align: center;<br /> overflow: visible;<br /> }<br /> .mw-parser-output hr::after {<br /> content: &quot;∴&quot;;<br /> display: block;<br /> font-size: 15px;<br /> line-height: 1;<br /> color: var(--accent);<br /> background:<br /> linear-gradient(var(--rule-strong), var(--rule-strong)) left center / calc(50% - 20px) 1px no-repeat,<br /> linear-gradient(var(--rule-strong), var(--rule-strong)) right center / calc(50% - 20px) 1px no-repeat;<br /> }<br /> <br /> /* === 10. Page tabs (Template / Discussion / Read / Edit / History) === */<br /> .mw-portlet-views li a,<br /> .mw-portlet-namespaces li a,<br /> .mw-portlet-variants li a,<br /> .mw-portlet-views li a span,<br /> .mw-portlet-namespaces li a span {<br /> color: var(--ink-muted) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.06em;<br /> }<br /> .mw-portlet-views li.selected a,<br /> .mw-portlet-namespaces li.selected a,<br /> .mw-portlet-views li.selected a span,<br /> .mw-portlet-namespaces li.selected a span {<br /> color: var(--heading) !important;<br /> }<br /> .mw-portlet-views li.selected a,<br /> .mw-portlet-namespaces li.selected a {<br /> border-bottom: 2px solid var(--src-dragon-green) !important;<br /> box-shadow: none !important;<br /> }<br /> .tabber__tab { color: var(--ink-muted) !important; font-family: var(--font-body) !important; }<br /> .tabber__tab[aria-selected=&quot;true&quot;] { color: var(--heading) !important; }<br /> .tabber__indicator { background: var(--src-dragon-green) !important; }<br /> .tabber .tabbernav li a { color: var(--ink-muted) !important; font-family: var(--font-body) !important; }<br /> .tabber .tabbernav li.tabberactive a { color: var(--heading) !important; border-bottom-color: var(--src-dragon-green) !important; }<br /> <br /> /* === 11. Headings === */<br /> /* Page title: wide tracking; below it a lintel line &quot;— ∴ —&quot; instead of a plain underline */<br /> h1.firstHeading {<br /> font-family: var(--font-display) !important;<br /> color: var(--heading) !important;<br /> font-size: 30px;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> letter-spacing: 0.14em;<br /> border-bottom: none !important;<br /> padding-bottom: 0;<br /> margin: 0.25em 0 1.2em;<br /> text-shadow: 0 0 22px rgba(193, 225, 166, 0.12);<br /> }<br /> h1.firstHeading::after {<br /> content: &quot;∴&quot;;<br /> display: block;<br /> margin-top: 14px;<br /> font-size: 14px;<br /> line-height: 1;<br /> letter-spacing: 0;<br /> text-align: center;<br /> color: var(--accent);<br /> text-shadow: none;<br /> background:<br /> linear-gradient(90deg, transparent, var(--heading-bar)) left center / calc(50% - 20px) 1px no-repeat,<br /> linear-gradient(90deg, var(--heading-bar), transparent) right center / calc(50% - 20px) 1px no-repeat;<br /> }<br /> <br /> .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,<br /> .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {<br /> font-family: var(--font-serif) !important;<br /> color: var(--heading) !important;<br /> font-weight: 600;<br /> letter-spacing: 0.08em;<br /> padding-bottom: 8px;<br /> margin-bottom: 0.8em;<br /> overflow: hidden;<br /> display: block;<br /> text-wrap: balance;<br /> }<br /> .mw-parser-output h1 { font-size: 26px; border-bottom: 2px solid var(--heading-bar) !important; }<br /> .mw-parser-output h2 { font-size: 23px; border-bottom: 1px solid var(--heading-bar) !important; margin-top: 1.8em; }<br /> .mw-parser-output h3 { font-size: 19px; }<br /> .mw-parser-output h4 { font-size: 17px; }<br /> .mw-parser-output h5 { font-size: 15px; }<br /> .mw-parser-output h6 { font-family: var(--font-latin) !important; font-size: 15px; letter-spacing: 0.16em; color: var(--ink-muted) !important; }<br /> <br /> /* Canon Zone mark: ∴ before level-2 headings */<br /> .mw-parser-output h2::before {<br /> content: &quot;∴&quot;;<br /> color: var(--accent);<br /> font-size: 0.62em;<br /> margin-right: 12px;<br /> vertical-align: 0.18em;<br /> }<br /> .toc h2::before, #toc h2::before, .mw-parser-output .toctitle h2::before { content: none; }<br /> <br /> /* h3–h6: graded rules, shorter and fainter at each level */<br /> .mw-parser-output h3, .mw-parser-output h4,<br /> .mw-parser-output h5, .mw-parser-output h6 {<br /> border-bottom: none !important;<br /> position: relative;<br /> }<br /> .mw-parser-output h3::after, .mw-parser-output h4::after,<br /> .mw-parser-output h5::after, .mw-parser-output h6::after {<br /> content: &quot;&quot;;<br /> display: block;<br /> position: absolute;<br /> bottom: 0;<br /> left: 0;<br /> height: 1px;<br /> background: linear-gradient(90deg, var(--heading-bar), transparent);<br /> }<br /> .mw-parser-output h3::after { width: 75%; }<br /> .mw-parser-output h4::after { width: 55%; opacity: 0.75; }<br /> .mw-parser-output h5::after { width: 35%; opacity: 0.55; }<br /> .mw-parser-output h6::after { width: 20%; opacity: 0.35; }<br /> <br /> /* === 12. Code and editor === */<br /> code {<br /> background-color: var(--paper-alt) !important;<br /> color: #B8E6C4 !important;<br /> padding: 2px 6px;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> border: 1px solid var(--rule);<br /> }<br /> pre {<br /> position: relative;<br /> background-color: var(--paper-sunk) !important;<br /> color: var(--ink) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-left: 2px solid var(--src-dragon-green) !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> }<br /> .mw-editfont-monospace, #wpTextbox1, textarea.mw-editfont-monospace,<br /> .ace_editor, .ace_editor .ace_content, .ace_editor .ace_text-layer,<br /> .ace_editor .ace_line,<br /> .CodeMirror, .CodeMirror pre, .CodeMirror-code,<br /> .CodeMirror-line, .CodeMirror-line span,<br /> .mw-editfont-default, textarea {<br /> background-color: #071A11 !important;<br /> color: #E6F0E6 !important;<br /> font-family: var(--font-mono) !important;<br /> caret-color: var(--accent) !important;<br /> }<br /> .CodeMirror-gutters {<br /> background-color: var(--paper-sunk) !important;<br /> border-right: 1px solid var(--rule) !important;<br /> }<br /> .CodeMirror-linenumber { color: var(--ink-muted) !important; }<br /> .ace_cursor {<br /> color: var(--accent) !important;<br /> border-left-color: var(--accent) !important;<br /> }<br /> <br /> /* === 13. Links === */<br /> a {<br /> color: var(--link) !important;<br /> text-decoration: none;<br /> transition: color 0.2s ease;<br /> }<br /> a:visited { color: var(--link-visited) !important; }<br /> a:hover {<br /> color: var(--link-hover) !important;<br /> text-decoration: underline !important;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1px;<br /> }<br /> a.new, a.new:visited { color: var(--link-new) !important; }<br /> <br /> /* === 14. Tables: double line on top, serif headers with wide tracking === */<br /> table.wikitable {<br /> border-radius: var(--radius);<br /> overflow: hidden;<br /> border: 1px solid var(--rule) !important;<br /> border-top: 3px double var(--accent) !important;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> background-color: var(--paper-alt) !important;<br /> box-shadow: none;<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> }<br /> table.wikitable &gt; * &gt; tr &gt; th,<br /> table.wikitable &gt; tr &gt; th {<br /> background-color: rgba(59, 126, 61, 0.14) !important;<br /> color: var(--heading) !important;<br /> font-family: var(--font-serif) !important;<br /> font-size: 13px;<br /> font-weight: 600;<br /> letter-spacing: 0.14em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong) !important;<br /> }<br /> table.wikitable &gt; * &gt; tr &gt; td,<br /> table.wikitable &gt; tr &gt; td {<br /> padding: 9px 12px;<br /> border: none;<br /> border-top: 1px solid var(--rule) !important;<br /> color: var(--ink-bright) !important;<br /> background: transparent;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:nth-of-type(even) { background: transparent; }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover &gt; td,<br /> table.wikitable &gt; tr:hover &gt; td {<br /> background-color: rgba(59, 126, 61, 0.12) !important;<br /> color: var(--ink-bright) !important;<br /> }<br /> <br /> /* === 14b. Tables next to floats: full width by default, narrowing beside a right-floated image ===<br /> The outer table becomes a block and opens a BFC, so it avoids floats and takes only the remaining width;<br /> the inner tbody goes back to table layout and fills it, so column widths still follow the table algorithm. */<br /> .mw-parser-output table.wikitable {<br /> display: block;<br /> width: auto;<br /> max-width: 100%;<br /> overflow-x: auto;<br /> box-sizing: border-box;<br /> }<br /> .mw-parser-output table.wikitable &gt; tbody,<br /> .mw-parser-output table.wikitable &gt; thead,<br /> .mw-parser-output table.wikitable &gt; tfoot {<br /> display: table;<br /> width: 100%;<br /> }<br /> <br /> /* === 15. Category bar and footer === */<br /> #catlinks {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> padding: 12px 15px;<br /> color: var(--ink-muted) !important;<br /> }<br /> .mw-footer {<br /> background-color: transparent !important;<br /> padding: 25px 30px;<br /> margin-top: 30px;<br /> border-top: 1px solid var(--rule-strong) !important;<br /> color: var(--ink-muted) !important;<br /> }<br /> .mw-footer-container { background: transparent; }<br /> .mw-footer li,<br /> .mw-footer a { color: var(--ink-muted) !important; }<br /> <br /> /* === 16. Table of contents === */<br /> .toc, #toc {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-top: 2px solid var(--src-plurimod-deep) !important;<br /> border-radius: var(--radius);<br /> padding: 15px;<br /> color: var(--ink) !important;<br /> }<br /> .toc h2, #toc h2 {<br /> font-family: var(--font-serif) !important;<br /> color: var(--heading) !important;<br /> font-size: 14px !important;<br /> letter-spacing: 0.24em;<br /> }<br /> .toc a { color: var(--link) !important; }<br /> .toc li { color: var(--ink) !important; }<br /> <br /> /* === 17. Logo === */<br /> #p-logo, .mw-portlet-logo {<br /> display: flex !important;<br /> justify-content: center;<br /> align-items: center;<br /> padding: 15px 0 !important;<br /> margin-bottom: 8px;<br /> }<br /> <br /> /* === 18. Editor toolbar, buttons, diffs, inputs, notices === */<br /> .oo-ui-toolbar-bar {<br /> background-color: var(--paper-alt) !important;<br /> border-color: var(--rule) !important;<br /> }<br /> .oo-ui-buttonElement-framed.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> background-color: var(--paper-alt) !important;<br /> color: var(--ink-bright) !important;<br /> border-color: var(--rule-strong) !important;<br /> border-radius: var(--radius-sm) !important;<br /> }<br /> .oo-ui-labelElement .oo-ui-labelElement-label { color: var(--ink) !important; }<br /> .oo-ui-textInputWidget input,<br /> .oo-ui-textInputWidget textarea {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink-bright) !important;<br /> border-color: var(--rule-strong) !important;<br /> }<br /> td.diff-context {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink) !important;<br /> }<br /> td.diff-addedline { background-color: rgba(59, 126, 61, 0.2) !important; }<br /> td.diff-deletedline { background-color: rgba(180, 70, 60, 0.18) !important; }<br /> <br /> input[type=&quot;text&quot;], input[type=&quot;search&quot;],<br /> input[type=&quot;password&quot;], select {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink-bright) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-sans) !important;<br /> }<br /> .mw-ui-button,<br /> input[type=&quot;submit&quot;] {<br /> background-color: var(--accent-fill) !important;<br /> color: var(--on-accent) !important;<br /> border: none !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-sans) !important;<br /> letter-spacing: 0.04em;<br /> transition: background-color 0.2s ease;<br /> }<br /> .mw-ui-button:hover,<br /> input[type=&quot;submit&quot;]:hover { background-color: var(--accent-fill-hover) !important; }<br /> .previewnote, .mw-warning-with-logexcerpt, .warningbox {<br /> background-color: #2A2A1C !important;<br /> border-color: var(--rule) !important;<br /> color: var(--ink) !important;<br /> }<br /> .successbox {<br /> background-color: rgba(59, 126, 61, 0.2) !important;<br /> border-color: var(--src-dragon-green) !important;<br /> color: var(--ink) !important;<br /> }<br /> .errorbox {<br /> background-color: rgba(180, 70, 60, 0.2) !important;<br /> color: #F0B4A8 !important;<br /> }<br /> <br /> /* === 18b. Infobox ({{Info}}) and navboxes: dark version === */<br /> .infoBox {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-top: 3px double var(--accent) !important;<br /> border-radius: var(--radius) !important;<br /> box-shadow: none !important;<br /> color: var(--ink) !important;<br /> overflow: hidden;<br /> }<br /> .infoBoxContent {<br /> background-color: var(--paper-raised) !important;<br /> border: none !important;<br /> border-top: 1px solid var(--rule) !important;<br /> border-radius: 0 !important;<br /> }<br /> .infoBoxTitle {<br /> color: var(--heading) !important;<br /> font-family: var(--font-serif);<br /> letter-spacing: 0.12em;<br /> }<br /> .infoBoxText,<br /> .infoBoxBelow { color: var(--ink) !important; }<br /> .infoBoxIcon { color: var(--accent) !important; }<br /> .infoBox a { color: var(--link) !important; }<br /> <br /> table.infobox {<br /> background-color: var(--paper-alt) !important;<br /> color: var(--ink) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> }<br /> table.infobox th { color: var(--heading) !important; background-color: rgba(59, 126, 61, 0.14) !important; }<br /> <br /> .navbox,<br /> .navbox-subgroup,<br /> .navbox-list { background-color: var(--paper-alt) !important; border-color: var(--rule) !important; color: var(--ink) !important; }<br /> .navbox th, .navbox-title { background-color: rgba(59, 126, 61, 0.2) !important; color: var(--heading) !important; }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background-color: rgba(47, 79, 47, 0.35) !important; color: var(--ink) !important; }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background-color: var(--paper-raised) !important; }<br /> .navbox-even { background-color: rgba(255, 255, 255, 0.02) !important; }<br /> .navbox-odd { background-color: transparent !important; }<br /> <br /> /* === 18c. White backgrounds at low resolutions: all outer frames transparent === */<br /> #mw-wrapper,<br /> #mw-header-hack,<br /> #mw-header-nav-hack,<br /> #mw-content-container,<br /> #mw-content-block,<br /> #mw-site-navigation,<br /> #mw-related-navigation,<br /> #mw-footer-container,<br /> #mw-footer,<br /> .ts-inner {<br /> background-color: transparent !important;<br /> }<br /> <br /> /* === 19. Scrollbars === */<br /> ::-webkit-scrollbar { width: 8px; height: 8px; }<br /> ::-webkit-scrollbar-track { background: var(--paper); }<br /> ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }<br /> ::-webkit-scrollbar-thumb:hover { background: var(--src-dragon-green); }<br /> <br /> /* === 20. Reading progress bar and copy button === */<br /> #vgr-progress-container {<br /> position: fixed; bottom: 0; left: 0;<br /> width: 100%; height: 3px;<br /> background: rgba(0, 0, 0, 0.5);<br /> z-index: 99999;<br /> pointer-events: none;<br /> }<br /> #vgr-progress-bar {<br /> height: 100%; width: 0;<br /> background: var(--accent-fill);<br /> }<br /> .vgr-copy-btn {<br /> position: absolute; top: 8px; right: 8px;<br /> background: var(--accent-fill); color: var(--on-accent);<br /> border: none;<br /> border-radius: var(--radius-sm);<br /> padding: 4px 10px; font-size: 12px;<br /> font-family: var(--font-sans);<br /> letter-spacing: 0.04em;<br /> cursor: pointer; opacity: 0;<br /> transition: opacity 0.2s ease; z-index: 50;<br /> }<br /> pre:hover .vgr-copy-btn,<br /> .vgr-copy-btn:focus-visible { opacity: 1; }<br /> <br /> /* === 21. Reduced motion === */<br /> @media (prefers-reduced-motion: reduce) {<br /> * { transition: none !important; animation: none !important; }<br /> }<br /> <br /> /* === 22. Image frames === */<br /> figcaption, .thumbcaption {<br /> background: var(--paper-alt) !important;<br /> color: var(--ink-muted) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 13px !important;<br /> line-height: 1.7 !important;<br /> letter-spacing: 0.04em;<br /> text-align: center;<br /> padding: 8px 14px !important;<br /> border-top: 1px solid var(--rule) !important;<br /> }<br /> figure img, .thumbimage { filter: brightness(0.88); }<br /> figure img:hover, .thumbimage:hover { filter: none; }<br /> figure[typeof~='mw:File/Thumb'] &gt; figcaption, figure[typeof~='mw:File/Frame'] &gt; figcaption { border: none !important; }<br /> <br /> /* === 23. Phones (≤850px) === */<br /> @media screen and (max-width: 850px) {<br /> #mw-content { padding: 22px 16px; }<br /> h1.firstHeading { font-size: 25px; letter-spacing: 0.08em; }<br /> #p-banner::after { font-size: 17px; letter-spacing: 0.18em; }<br /> .sidebar-chunk {<br /> transform: none !important;<br /> opacity: 1 !important;<br /> background: none !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> .sidebar-chunk h2 {<br /> font-size: 0 !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> }<br /> .sidebar-chunk:empty,<br /> .mw-portlet:empty,<br /> .mw-portlet:not(:has(li)):not(:has(a)) {<br /> display: none !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> background: none !important;<br /> }<br /> #mw-content-block .sidebar-chunk {<br /> border: none !important;<br /> box-shadow: none !important;<br /> background: transparent !important;<br /> padding: 0 !important;<br /> }<br /> table.wikitable { display: block; overflow-x: auto; white-space: normal; }<br /> <br /> #mw-site-navigation .sidebar-inner,<br /> #mw-related-navigation .sidebar-inner,<br /> #site-tools .sidebar-inner,<br /> #mw-site-navigation .dropdown .mw-portlet-body,<br /> #mw-related-navigation .dropdown .mw-portlet-body {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius) !important;<br /> box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;<br /> color: var(--ink) !important;<br /> }<br /> <br /> #p-logo img {<br /> max-width: 180px !important;<br /> width: auto !important;<br /> height: auto !important;<br /> }<br /> }<br /> &lt;/style&gt;<br /> <br /> &lt;script&gt;<br /> /**<br /> * VERDANT GREEN REVELATION — UI (v1.0)<br /> * Reading progress bar, code copy button, header unpinned on desktop<br /> */<br /> (function () {<br /> &quot;use strict&quot;;<br /> if (window.__vgrThemeLoaded) return;<br /> window.__vgrThemeLoaded = true;<br /> <br /> var LABEL = { copy: &quot;Copy&quot;, done: &quot;Copied&quot;, fail: &quot;Copy failed&quot; };<br /> <br /> function killStickyHeader() {<br /> /* On phones, keep Timeless's original header positioning */<br /> if (window.matchMedia &amp;&amp; window.matchMedia(&quot;(max-width: 850px)&quot;).matches) return;<br /> var hdr = document.getElementById(&quot;mw-header-container&quot;);<br /> if (!hdr || !window.MutationObserver) return;<br /> var pin = function () {<br /> hdr.style.setProperty(&quot;position&quot;, &quot;relative&quot;, &quot;important&quot;);<br /> hdr.style.setProperty(&quot;top&quot;, &quot;auto&quot;, &quot;important&quot;);<br /> };<br /> pin();<br /> new MutationObserver(pin).observe(hdr, { attributes: true, attributeFilter: [&quot;class&quot;, &quot;style&quot;] });<br /> }<br /> <br /> function initProgress() {<br /> if (document.getElementById(&quot;vgr-progress-container&quot;)) return;<br /> var c = document.createElement(&quot;div&quot;);<br /> c.id = &quot;vgr-progress-container&quot;;<br /> var b = document.createElement(&quot;div&quot;);<br /> b.id = &quot;vgr-progress-bar&quot;;<br /> c.appendChild(b);<br /> document.body.appendChild(c);<br /> var ticking = false;<br /> function update() {<br /> var st = window.pageYOffset || document.documentElement.scrollTop;<br /> var dh = document.documentElement.scrollHeight - document.documentElement.clientHeight;<br /> b.style.width = (dh &gt; 0 ? (st / dh) * 100 : 0) + &quot;%&quot;;<br /> ticking = false;<br /> }<br /> window.addEventListener(&quot;scroll&quot;, function () {<br /> if (!ticking) { ticking = true; window.requestAnimationFrame(update); }<br /> }, { passive: true });<br /> update();<br /> }<br /> <br /> function initCopy() {<br /> document.querySelectorAll(&quot;#mw-content pre&quot;).forEach(function (block) {<br /> if (block.querySelector(&quot;.vgr-copy-btn&quot;)) return;<br /> var btn = document.createElement(&quot;button&quot;);<br /> btn.type = &quot;button&quot;;<br /> btn.className = &quot;vgr-copy-btn&quot;;<br /> btn.textContent = LABEL.copy;<br /> btn.addEventListener(&quot;click&quot;, function (e) {<br /> e.preventDefault();<br /> var clone = block.cloneNode(true);<br /> var own = clone.querySelector(&quot;.vgr-copy-btn&quot;);<br /> if (own) own.remove();<br /> var text = clone.textContent.trim();<br /> var done = function (label) {<br /> btn.textContent = label;<br /> setTimeout(function () { btn.textContent = LABEL.copy; }, 2000);<br /> };<br /> if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) {<br /> navigator.clipboard.writeText(text).then(<br /> function () { done(LABEL.done); },<br /> function () { done(LABEL.fail); }<br /> );<br /> } else {<br /> done(LABEL.fail);<br /> }<br /> });<br /> block.appendChild(btn);<br /> });<br /> }<br /> <br /> function init() {<br /> killStickyHeader();<br /> initProgress();<br /> initCopy();<br /> }<br /> <br /> if (document.readyState === &quot;loading&quot;) {<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, init);<br /> } else {<br /> init();<br /> }<br /> })();<br /> &lt;/script&gt;<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;&lt;noinclude&gt;{{Theme-VGR}}<br /> ==Description==<br /> '''Theme-VGR''' is the theme for the work ''Verdant Green Revelation'' and the Canon Zone on HUIJIA FUN. It follows the Canon Zone (night) palette of the VGR Design System and sits between Theme-STR (Dipfield's sci-fi order) and Theme-HJ (Huijia's sober archive): an ink-green ground, Plurimod light-green headings and a pale green accent. The content card has a double-line lintel, a high-window halo falling from the top and a planning-map cross grid; body text is set in a serif with wide leading, and scripture in Kai script. ∴ is its only ornament: it marks level-2 headings, the page title and horizontal rules.<br /> <br /> The only animation is the reading progress bar at the bottom: no scanlines, glitch text or drifting glows.<br /> <br /> ==Origin==<br /> Author: [[User:PlurimodSU|Marina Malinti]]<br /> <br /> ==Usage==<br /> This template has no parameters. Add the following at the very top of the page source:<br /> &lt;pre&gt;{{Theme-VGR}}&lt;/pre&gt;<br /> The whole page (header, sidebars, content card, footer) switches to the Canon Zone theme.<br /> <br /> ==Component tokens==<br /> The page components (&lt;code&gt;.vgr-title-block&lt;/code&gt;, &lt;code&gt;.rec-card&lt;/code&gt;, &lt;code&gt;.rec-subhead&lt;/code&gt;, &lt;code&gt;.rec-intro&lt;/code&gt;, &lt;code&gt;.novel-track&lt;/code&gt;, &lt;code&gt;.rec-soon&lt;/code&gt; and others) are defined in section 8 of &lt;code&gt;MediaWiki:Common.css&lt;/code&gt; and work on any page. This theme only resets the tokens below; pages without a theme use the defaults in Common.css (Archive Zone look).<br /> {| class=&quot;wikitable&quot;<br /> ! Token !! Value !! Used for<br /> |-<br /> | &lt;code&gt;--c-surface&lt;/code&gt; || &lt;code&gt;--paper-sunk&lt;/code&gt; mixed 25% into &lt;code&gt;--paper-raised&lt;/code&gt; || Title block background; also the gap color between the two lintel lines<br /> |-<br /> | &lt;code&gt;--c-lintel-line&lt;/code&gt; || &lt;code&gt;rgba(193,225,166,0.22)&lt;/code&gt; || Second thin line of the lintel<br /> |-<br /> | &lt;code&gt;--c-radius&lt;/code&gt; || &lt;code&gt;var(--radius)&lt;/code&gt; (2px) || Corners of cards, anchor buttons and the title block<br /> |-<br /> | &lt;code&gt;--c-mark&lt;/code&gt; || &lt;code&gt;&quot;∴&quot;&lt;/code&gt; || Zone mark: tagline divider and above Coming Soon<br /> |-<br /> | &lt;code&gt;--c-label-font&lt;/code&gt; || &lt;code&gt;var(--font-latin)&lt;/code&gt; || Font of small labels (&lt;code&gt;.rec-subhead&lt;/code&gt;, chapter numbers, Coming Soon)<br /> |-<br /> | &lt;code&gt;--c-label-size&lt;/code&gt; / &lt;code&gt;-weight&lt;/code&gt; / &lt;code&gt;-spacing&lt;/code&gt; || &lt;code&gt;15px&lt;/code&gt; / &lt;code&gt;600&lt;/code&gt; / &lt;code&gt;0.18em&lt;/code&gt; || Label size, weight and tracking<br /> |-<br /> | &lt;code&gt;--c-soon-style&lt;/code&gt; || &lt;code&gt;italic&lt;/code&gt; || Font style of Coming Soon<br /> |-<br /> | &lt;code&gt;--c-intro-border&lt;/code&gt; || &lt;code&gt;3px double var(--accent)&lt;/code&gt; || Double left rule of &lt;code&gt;.rec-intro&lt;/code&gt;<br /> |-<br /> | &lt;code&gt;--c-title-bg&lt;/code&gt; || high-window halo + cross grid + &lt;code&gt;--c-surface&lt;/code&gt; || Background of &lt;code&gt;.vgr-title-block&lt;/code&gt;<br /> |-<br /> | &lt;code&gt;--c-title-top&lt;/code&gt; / &lt;code&gt;-shadow&lt;/code&gt; || &lt;code&gt;3px solid var(--heading-bar)&lt;/code&gt; / double-line lintel || Title block top rule and lintel<br /> |-<br /> | &lt;code&gt;--c-title-ink&lt;/code&gt; / &lt;code&gt;-en-ink&lt;/code&gt; || &lt;code&gt;var(--ink-bright)&lt;/code&gt; / &lt;code&gt;var(--heading)&lt;/code&gt; || Main and secondary title colors in the title block<br /> |-<br /> | &lt;code&gt;--c-chap-bg&lt;/code&gt; / &lt;code&gt;-bg-hover&lt;/code&gt; || &lt;code&gt;var(--paper-alt)&lt;/code&gt; / &lt;code&gt;var(--color-surface-3)&lt;/code&gt; || Chapter card background and hover background<br /> |-<br /> | &lt;code&gt;--c-chap-top&lt;/code&gt; / &lt;code&gt;-lintel&lt;/code&gt; || &lt;code&gt;3px solid var(--heading-bar)&lt;/code&gt; / &lt;code&gt;var(--c-lintel-line)&lt;/code&gt; || Chapter card top rule and lintel line<br /> |}<br /> <br /> ==Page components==<br /> With this theme on the page, the components below take on the Canon Zone look.<br /> <br /> * '''Title block''': &lt;code&gt;.vgr-title-block&lt;/code&gt; (&lt;code&gt;-cn&lt;/code&gt; / &lt;code&gt;-en&lt;/code&gt; / &lt;code&gt;-sub&lt;/code&gt; / &lt;code&gt;-tagline&lt;/code&gt;). A page with a title block hides the default page title and table of contents<br /> * '''Anchor bar''': &lt;code&gt;#rec-anchors&lt;/code&gt;<br /> * '''Section''': &lt;code&gt;.rec-section&lt;/code&gt;, which only adds space above the section heading<br /> * '''Epigraph''': &lt;code&gt;.rec-intro&lt;/code&gt;; '''small label''': &lt;code&gt;.rec-subhead&lt;/code&gt; (not a real heading, not in the TOC)<br /> * '''Grid''': &lt;code&gt;.rec-grid&lt;/code&gt; + &lt;code&gt;.rec-grid-2&lt;/code&gt; / &lt;code&gt;.rec-grid-4&lt;/code&gt;; '''card with description''': &lt;code&gt;.rec-card&lt;/code&gt; (title in &lt;code&gt;.rec-card-title&lt;/code&gt;); '''compact link''': &lt;code&gt;.rec-link&lt;/code&gt;<br /> * '''Chapter track''': &lt;code&gt;.novel-track&lt;/code&gt; / &lt;code&gt;.novel-chap&lt;/code&gt; (&lt;code&gt;.chap-no&lt;/code&gt; / &lt;code&gt;.chap-pd&lt;/code&gt; / &lt;code&gt;.chap-title&lt;/code&gt; / &lt;code&gt;.chap-desc&lt;/code&gt;; unfinished chapters use &lt;code&gt;.chap-upcoming&lt;/code&gt;)<br /> * '''Placeholder''': &lt;code&gt;.rec-soon&lt;/code&gt;<br /> <br /> ===Example===<br /> &lt;div class=&quot;vgr-demo&quot;&gt;<br /> &lt;div class=&quot;vgr-title-block&quot;&gt;<br /> &lt;div class=&quot;vgr-title-cn&quot;&gt;Series Title&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-en&quot;&gt;Series Subtitle&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-sub&quot;&gt;A one-line introduction to the series&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-tagline&quot;&gt;An optional epigraph.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div id=&quot;rec-anchors&quot;&gt;<br /> [[#demo-section-1|Section One]]<br /> [[#demo-section-2|Section Two]]<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> &lt;html&gt;&lt;div class=&quot;mw-heading mw-heading2&quot;&gt;&lt;h2 id=&quot;demo-section-1&quot;&gt;Section One&lt;/h2&gt;&lt;/div&gt;&lt;/html&gt;<br /> &lt;div class=&quot;rec-intro&quot;&gt;A short introduction to this section.&lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Cards with descriptions&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-2&quot;&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Entry title]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Another entry]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Compact links&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-4&quot;&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term one]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term two]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term three]]&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;novel-track&quot;&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter I&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter II&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter III&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter IV&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap chap-upcoming&quot;&gt;In progress&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> &lt;html&gt;&lt;div class=&quot;mw-heading mw-heading2&quot;&gt;&lt;h2 id=&quot;demo-section-2&quot;&gt;Section Two&lt;/h2&gt;&lt;/div&gt;&lt;/html&gt;<br /> &lt;div class=&quot;rec-soon&quot;&gt;Coming Soon&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> ===Code===<br /> Put &lt;code&gt;&lt;nowiki&gt;{{Theme-VGR}}&lt;/nowiki&gt;&lt;/code&gt; at the very top of the page, then build the body like this:<br /> &lt;pre&gt;<br /> &lt;div class=&quot;vgr-title-block&quot;&gt;<br /> &lt;div class=&quot;vgr-title-cn&quot;&gt;Series Title&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-en&quot;&gt;Series Subtitle&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-sub&quot;&gt;A one-line introduction to the series&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-tagline&quot;&gt;An optional epigraph.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div id=&quot;rec-anchors&quot;&gt;<br /> [[#Section One|Section One]]<br /> [[#Section Two|Section Two]]<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> == Section One ==<br /> &lt;div class=&quot;rec-intro&quot;&gt;A short introduction to this section.&lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Cards with descriptions&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-2&quot;&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Entry title]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Another entry]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Compact links&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-4&quot;&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term one]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term two]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term three]]&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;novel-track&quot;&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter I&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter II&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter III&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter IV&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap chap-upcoming&quot;&gt;In progress&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> == Section Two ==<br /> &lt;div class=&quot;rec-soon&quot;&gt;Coming Soon&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> <br /> * The two section headings in the example are written in HTML so they stay out of this page's TOC; on a real page use &lt;code&gt;&lt;nowiki&gt;== Section One ==&lt;/nowiki&gt;&lt;/code&gt; as in the code above.<br /> * A title block wrapped in &lt;code&gt;&lt;nowiki&gt;&lt;div class=&quot;vgr-demo&quot;&gt;&lt;/nowiki&gt;&lt;/code&gt; does not hide the page title or TOC; it is for documentation pages only.<br /> * The old &lt;code&gt;mini-block rec-card&lt;/code&gt;, &lt;code&gt;mini-block-title&lt;/code&gt; and &lt;code&gt;mini-block-list&lt;/code&gt; classes still work, but new pages should use the classes above.<br /> <br /> ==Test==<br /> A body paragraph with an [[Main Page|internal link]], a [[Nonexistent Page|red link]], some &lt;code&gt;inline code&lt;/code&gt; and '''bold text'''.<br /> <br /> &lt;blockquote&gt;A scripture passage or epigraph is set in Kai script with a double line on the left.&lt;/blockquote&gt;<br /> <br /> ----<br /> <br /> ===Subheading 3===<br /> ====Subheading 4====<br /> =====Subheading 5=====<br /> ======Subheading 6======<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! Event !! S.C. !! O.<br /> |-<br /> | Sample event A || 1999 || 0<br /> |-<br /> | Sample event B || 2021.05.14 || 22.05.14<br /> |}<br /> <br /> [[Category:Template-Theme]]<br /> &lt;/noinclude&gt;</div> PlurimodSU https://en.huijia.fun/index.php?title=Template:Theme-STR&diff=199 Template:Theme-STR 2026-10-13T16:35:19Z <p>PlurimodSU: Sync with zh: component tokens (section 2b) for Common.css page components; docs: component tokens and page-component demo; English-only copy labels</p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> &lt;style&gt;<br /> /**<br /> * HUIJIA FUN · Theme-STR (Setting Zone theme)<br /> * S.T.R. OFFICE — TIMELESS THEME v3.0<br /> * Design language: VGR Design System · Setting Zone (night)<br /> *<br /> * Sub-Utopia: a city that came close to an ideal and never arrived.<br /> * Order → 40px grid on the content card, scanlines, corner markers<br /> * Warmth of the ideal → old-style serif body text (LXGW Neo ZhiSong)<br /> * Dipfield → violet-black ground + Plurimod light-green headings<br /> * + green-leaning sidebar links + pale Dipfield violet accent<br /> *<br /> * v3.0: Strictly follows the VGR Design language; search box, site name and personal menu<br /> * share one height, width and corner radius;<br /> * removed the full-screen flicker layer (photosensitivity risk), scroll fade-ins<br /> * (headings could stay hidden) and the ambient pulse;<br /> * no longer force-recolors every span in the content (inline colors work again);<br /> * all motion respects prefers-reduced-motion.<br /> */<br /> <br /> /* === 1. Fonts === */<br /> @import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&amp;family=Noto+Serif+SC:wght@400;600&amp;family=Noto+Sans+SC:wght@400;500&amp;family=Source+Serif+4:wght@400;600&amp;family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Share+Tech+Mono&amp;display=swap');<br /> /* LXGW Neo ZhiSong: body text. Full package is ~4.4MB; Noto Serif SC shows while it loads on first visit. SIL OFL 1.1 */<br /> @import url('https://cdn.jsdelivr.net/npm/lxgw-neo-zhisong-webfont@1.0.0/style.css');<br /> @import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');<br /> <br /> /* === 2. Tokens === */<br /> :root,<br /> html.skin-theme-clientpref-night {<br /> /* Source colors */<br /> --src-huijia-green: #025F32;<br /> --src-dragon-green: #3B7E3D;<br /> --src-plurimod-light: #C1E1A6;<br /> --src-dipfield-violet: #3F3954;<br /> <br /> /* Paper: Dipfield violet-black */<br /> --paper: #0D0D12;<br /> --paper-raised: #101018;<br /> --paper-sunk: #08080F;<br /> --paper-alt: #161622;<br /> <br /> /* Ink */<br /> --ink: #E8E8F4; /* body text 15.6:1 */<br /> --ink-bright: #F5F5FF;<br /> --ink-muted: #A9A6BF; /* captions 8.0:1 */<br /> --heading: #C1E1A6; /* headings: Plurimod light green 13.2:1 */<br /> --nav-ink: #22CC66; /* sidebar: green-leaning nav text 9.1:1 */<br /> <br /> /* Rules */<br /> --rule: #28284A; /* decorative lines */<br /> --rule-strong: #5A5A8A; /* borders that carry information, e.g. inputs 3.0:1 */<br /> --grid-line: rgba(193, 225, 166, 0.03);<br /> --heading-bar: #025F32;<br /> <br /> /* Accent */<br /> --accent: #B9B2D6; /* Setting Zone accent: pale Dipfield violet 9.4:1 */<br /> --accent-fill: #025F32;<br /> --accent-fill-hover: #3B7E3D;<br /> --on-accent: #FFFFFF; /* 7.8:1 / 4.96:1 */<br /> --accent-tint: rgba(185, 178, 214, 0.08);<br /> --green-tint: rgba(2, 95, 50, 0.18);<br /> --link: #66EEBB;<br /> --link-visited: #55CCAA;<br /> --link-hover: #C1E1A6;<br /> --link-new: #EE7766;<br /> --focus: #8FB0FF;<br /> <br /> /* Type */<br /> --font-body: &quot;LXGW Neo ZhiSong&quot;, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-display: &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-sans: &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-latin: &quot;Cormorant Garamond&quot;, &quot;EB Garamond&quot;, Georgia, serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> --font-hud: &quot;Share Tech Mono&quot;, &quot;JetBrains Mono&quot;, monospace;<br /> --font-banner: &quot;ZCOOL XiaoWei&quot;, &quot;Noto Serif SC&quot;, serif;<br /> --font-scripture: &quot;LXGW WenKai Screen&quot;, &quot;Kaiti SC&quot;, STKaiti, KaiTi, serif;<br /> <br /> /* Spacing */<br /> --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;<br /> --space-6: 24px; --space-8: 32px; --space-12: 48px;<br /> <br /> /* Shape: shared by header controls, cards, sidebars and the personal menu */<br /> --radius: 6px;<br /> --radius-sm: 4px;<br /> --radius-xs: 2px;<br /> --radius-none: 0;<br /> --radius-pill: 999px;<br /> --control-h: 40px;<br /> --control-w: 320px;<br /> <br /> /* Variables read by the skin and extensions */<br /> --color-primary: var(--accent-fill);<br /> --color-progressive: var(--link);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> /* The skin's surface levels (white and light grey by default), replaced with five shades of Dipfield violet-black */<br /> --color-surface-0: #0D0D12; /* = paper, bottom layer */<br /> --color-surface-1: #101018; /* = paper-raised, cards and menus */<br /> --color-surface-2: #161622; /* = paper-alt, toolbars and overlays */<br /> --color-surface-3: #1E1E2E; /* hover and selected items */<br /> --color-surface-4: #2A2A40; /* lightest layer: dividers and pressed states */<br /> <br /> /* Matching text, border and interaction variables, also switched to dark */<br /> --color-base: var(--ink);<br /> --color-base--subtle: var(--ink-muted);<br /> --color-emphasized: var(--ink-bright);<br /> --color-subtle: var(--ink-muted);<br /> --background-color-base: var(--paper-raised);<br /> --background-color-interactive: var(--color-surface-3);<br /> --background-color-interactive-subtle: var(--color-surface-2);<br /> --background-color-quiet--hover: rgba(185, 178, 214, 0.08);<br /> --border-color-base: var(--rule);<br /> --border-color-base--darker: var(--rule-strong);<br /> --border-color-subtle: var(--rule);<br /> --background-color-warning-subtle: #2A2440;<br /> <br /> /* Legacy variable names, kept for other templates */<br /> --str-deep: var(--src-dipfield-violet);<br /> --str-green: var(--src-huijia-green);<br /> --str-accent: var(--heading);<br /> --str-bg-body: var(--paper);<br /> --str-bg-card: var(--paper-raised);<br /> --str-bg-card-alt: var(--paper-alt);<br /> --str-border: var(--rule);<br /> --str-text: var(--ink);<br /> --str-link: var(--link);<br /> --str-heading: var(--heading);<br /> --mw-primary: var(--accent-fill);<br /> --mw-border: var(--rule-strong);<br /> --font-heading: var(--font-serif);<br /> --font-code: var(--font-mono);<br /> <br /> color-scheme: dark;<br /> }<br /> <br /> /* === 2b. Component tokens: read by the page components in Common.css section 8 (title block, cards, chapter track...) === */<br /> :root,<br /> html.skin-theme-clientpref-night {<br /> --c-radius: var(--radius);<br /> --c-mark: &quot;◈&quot;;<br /> --c-label-font: var(--font-hud);<br /> --c-label-size: 13px;<br /> --c-label-weight: 400;<br /> --c-label-spacing: 0.16em;<br /> --c-soon-style: normal;<br /> --c-intro-border: 4px solid rgba(0, 163, 108, 0.6);<br /> --c-title-bg:<br /> linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,<br /> linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,<br /> var(--accent-tint);<br /> --c-title-top: 1px solid var(--accent);<br /> --c-title-shadow: none;<br /> --c-title-ink: var(--ink);<br /> --c-title-en-ink: var(--accent);<br /> --c-chap-bg: var(--paper-raised);<br /> --c-chap-bg-hover: var(--color-surface-3);<br /> --c-chap-top: 3px solid var(--accent);<br /> --c-chap-lintel: transparent;<br /> }<br /> <br /> /* === 3. Page base: scanlines and drifting glow === */<br /> body {<br /> background-color: var(--paper) !important;<br /> color: var(--ink) !important;<br /> font-family: var(--font-sans) !important;<br /> font-size: 16px;<br /> line-height: 1.8;<br /> -webkit-font-smoothing: antialiased;<br /> position: relative;<br /> }<br /> <br /> body::before { /* static scanlines */<br /> content: &quot;&quot;;<br /> position: fixed;<br /> inset: 0;<br /> pointer-events: none;<br /> z-index: 9990;<br /> background: repeating-linear-gradient(<br /> 0deg, transparent, transparent 2px,<br /> rgba(0, 0, 0, 0.035) 2px, rgba(0, 0, 0, 0.035) 4px);<br /> }<br /> <br /> body::after { /* drifting glow: deep green and Dipfield violet */<br /> content: &quot;&quot;;<br /> position: fixed;<br /> top: 0;<br /> left: 0;<br /> width: 200%;<br /> height: 200%;<br /> pointer-events: none;<br /> z-index: 9988;<br /> background:<br /> radial-gradient(ellipse at 15% 40%, rgba(2, 95, 50, 0.07) 0%, transparent 55%),<br /> radial-gradient(ellipse at 75% 15%, rgba(63, 57, 84, 0.14) 0%, transparent 45%),<br /> radial-gradient(ellipse at 55% 75%, rgba(193, 225, 166, 0.04) 0%, transparent 50%),<br /> radial-gradient(circle at 90% 85%, rgba(2, 95, 50, 0.05) 0%, transparent 35%);<br /> animation: str-luminance-drift 30s ease-in-out infinite alternate;<br /> }<br /> <br /> @keyframes str-luminance-drift {<br /> 0% { transform: translate(0%, 0%); }<br /> 25% { transform: translate(-5%, -3%); }<br /> 50% { transform: translate(-8%, -6%); }<br /> 75% { transform: translate(-3%, -8%); }<br /> 100% { transform: translate(-10%, -4%); }<br /> }<br /> <br /> ::selection { background-color: var(--accent-fill) !important; color: var(--on-accent) !important; }<br /> <br /> :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> <br /> .kawaii-header-background { display: none !important; }<br /> <br /> /* === 4. Header<br /> Stacking: above #mw-content-container (skin z-index: 100) at every width, so the avatar menu is never covered by the content.<br /> Position: the sticky header is disabled on desktop widths only; mobile keeps Timeless's own positioning. === */<br /> #mw-header-container,<br /> #mw-header-hack,<br /> .mw-header-container {<br /> background-color: var(--paper) !important;<br /> border-bottom: 1px solid var(--rule) !important;<br /> z-index: 1000 !important;<br /> }<br /> @media screen and (min-width: 851px) {<br /> #mw-header-container,<br /> #mw-header-hack,<br /> .mw-header-container,<br /> .ts-container,<br /> #mw-header-container.ts-sticky,<br /> .mw-header-container[style*=&quot;position&quot;] {<br /> position: relative !important;<br /> top: auto !important;<br /> }<br /> #mw-header-container::after { display: none !important; }<br /> }<br /> .mw-header-content,<br /> #mw-header { background: transparent !important; }<br /> <br /> /* === 5. Site name S.T.R. OFFICE (wordmark and glitch kept, at a lower frequency) === */<br /> #p-banner {<br /> color: transparent !important;<br /> font-size: 0 !important;<br /> position: relative;<br /> display: flex !important;<br /> align-items: center;<br /> height: var(--control-h);<br /> }<br /> #p-banner a,<br /> #p-banner span {<br /> color: transparent !important;<br /> font-size: 0 !important;<br /> }<br /> #p-banner::after {<br /> content: &quot;S.T.R. OFFICE&quot;;<br /> font-family: var(--font-banner) !important;<br /> font-size: 22px;<br /> font-weight: 700;<br /> line-height: var(--control-h);<br /> color: var(--heading) !important;<br /> letter-spacing: 4px;<br /> text-transform: uppercase;<br /> text-shadow: 0 0 8px rgba(193, 225, 166, 0.5), 0 0 24px rgba(2, 95, 50, 0.4);<br /> position: relative;<br /> display: inline-block;<br /> animation: str-glitch-subtle 9s infinite;<br /> }<br /> @keyframes str-glitch-subtle {<br /> 0%, 93%, 100% {<br /> text-shadow: 0 0 8px rgba(193, 225, 166, 0.5), 0 0 24px rgba(2, 95, 50, 0.4);<br /> transform: translate(0, 0) skewX(0deg);<br /> opacity: 1;<br /> }<br /> 94% { text-shadow: -3px 0 #C1E1A6, 3px 0 #025F32; transform: translate(-2px, 0) skewX(-1deg); opacity: 0.88; }<br /> 95% { text-shadow: 3px 0 #C1E1A6, -3px 0 #3F3954; transform: translate(2px, 0) skewX(1deg); opacity: 0.92; }<br /> 96% { text-shadow: 0 0 8px rgba(193, 225, 166, 0.5); transform: translate(0, 0); opacity: 1; }<br /> }<br /> <br /> /* === 6. Search box (shared height, width and corner radius) === */<br /> #p-search {<br /> margin: 0 20px !important;<br /> display: flex;<br /> align-items: center;<br /> }<br /> #searchform {<br /> background: var(--paper-alt) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius) !important;<br /> display: flex !important;<br /> flex-direction: row !important;<br /> align-items: center !important;<br /> height: var(--control-h);<br /> box-sizing: border-box;<br /> padding: 0 6px 0 14px !important;<br /> width: 100%;<br /> max-width: var(--control-w);<br /> overflow: hidden;<br /> transition: border-color 0.2s ease, box-shadow 0.2s ease;<br /> }<br /> #searchform:focus-within {<br /> border-color: var(--accent) !important;<br /> box-shadow: 0 0 0 3px rgba(185, 178, 214, 0.18) !important;<br /> }<br /> #simpleSearch {<br /> background: transparent !important;<br /> border: none !important;<br /> width: 100% !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> #searchInput {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> font-family: var(--font-sans);<br /> font-size: 14px !important;<br /> padding: 0 !important;<br /> height: calc(var(--control-h) - 2px);<br /> color: var(--heading) !important;<br /> width: 100% !important;<br /> outline: none;<br /> }<br /> #searchInput::placeholder { color: var(--ink-muted); }<br /> <br /> /* === 7. Personal menu (avatar): original code, do not modify === */<br /> #personal-inner.dropdown {<br /> background-color: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> padding: 0 !important;<br /> }<br /> <br /> #personal-inner #p-personal {<br /> background-color: #1a1a1a !important;<br /> border: 1px solid var(--str-accent) !important;<br /> border-radius: 8px !important;<br /> padding: 10px !important;<br /> box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 8px var(--str-accent) !important;<br /> }<br /> <br /> #p-personal .mw-portlet-body {<br /> background-color: transparent !important;<br /> border: none !important;<br /> }<br /> <br /> #p-personal-label {<br /> background-color: transparent !important;<br /> color: var(--str-accent) !important;<br /> text-align: center;<br /> font-weight: bold;<br /> letter-spacing: 0.05em;<br /> margin-bottom: 10px;<br /> padding-bottom: 6px;<br /> border-bottom: 1px solid var(--str-accent) !important;<br /> }<br /> <br /> #p-personal .mw-portlet-body ul li {<br /> background-color: transparent !important;<br /> transition: background-color 0.15s ease;<br /> }<br /> <br /> #p-personal .mw-portlet-body ul li:hover {<br /> background-color: rgba(0, 255, 100, 0.1) !important;<br /> border-radius: 4px;<br /> }<br /> <br /> #personal .dropdown span {<br /> color: #22CC66 !important;<br /> text-decoration: none !important;<br /> }<br /> <br /> /* Personal menu items: original fonts, padding and hover effect */<br /> #p-personal h3 {<br /> font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif !important;<br /> text-transform: uppercase;<br /> }<br /> #p-personal .mw-portlet-body li a {<br /> color: #F5F5FF !important;<br /> font-family: 'LXGW WenKai Screen', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;<br /> transition: color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> #p-personal .mw-portlet-body li a:hover {<br /> color: #C1E1A6 !important;<br /> padding-left: 5px;<br /> text-decoration: none !important;<br /> text-shadow: 0 0 6px rgba(102, 238, 187, 0.3);<br /> }<br /> <br /> /* === 8. Left and right sidebars === */<br /> .sidebar-chunk {<br /> background-color: rgba(16, 16, 24, 0.6) !important;<br /> border-radius: var(--radius);<br /> border: 1px solid var(--rule) !important;<br /> margin-bottom: 16px;<br /> padding: 14px;<br /> box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);<br /> transition: border-color 0.3s ease;<br /> }<br /> .sidebar-chunk:hover { border-color: var(--src-huijia-green) !important; }<br /> <br /> /* Group names: HUD monospace, Plurimod light green */<br /> .sidebar-chunk h2,<br /> .sidebar-chunk h3,<br /> .sidebar-chunk .sidebar-name,<br /> .mw-portlet:not(#p-personal) h3 {<br /> font-family: var(--font-hud) !important;<br /> font-size: 13px !important;<br /> font-weight: 400 !important;<br /> color: var(--heading) !important;<br /> letter-spacing: 0.16em;<br /> text-transform: uppercase;<br /> border-bottom: 1px solid var(--rule) !important;<br /> padding-bottom: 8px;<br /> margin-bottom: 10px;<br /> }<br /> .sidebar-chunk h2::before,<br /> .mw-portlet:not(#p-personal) h3::before {<br /> content: &quot;◈ &quot;;<br /> color: var(--accent);<br /> font-size: 0.85em;<br /> }<br /> <br /> /* Nav links: green-leaning */<br /> .sidebar-chunk li a,<br /> .sidebar-chunk li a span,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a span,<br /> #mw-site-navigation li a span,<br /> #mw-related-navigation li a span,<br /> #p-normal-catlinks a,<br /> #p-variants-desktop a {<br /> color: var(--nav-ink) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.03em;<br /> text-decoration: none !important;<br /> }<br /> .sidebar-chunk li a,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a {<br /> transition: color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .sidebar-chunk li a:hover span,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover span {<br /> color: var(--heading) !important;<br /> text-decoration: none !important;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover { padding-left: 14px; }<br /> <br /> .sidebar-inner li a:before { color: var(--heading) !important; }<br /> .sidebar-inner li a:hover:before { color: #FFFFFF !important; }<br /> .sidebar-chunk .mw-ui-icon::before,<br /> .sidebar-chunk .mw-ui-icon svg,<br /> .sidebar-chunk img {<br /> filter: brightness(2.2) !important;<br /> opacity: 0.85 !important;<br /> }<br /> .mw-portlet:not(#p-personal) { background-color: transparent !important; padding: 0; }<br /> <br /> /* === 9. Content card: grid lines + corner markers === */<br /> /* 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 */<br /> #mw-content-wrapper {<br /> background: transparent !important;<br /> padding-top: 0;<br /> box-shadow: none !important;<br /> border: none !important;<br /> border-radius: 0 !important;<br /> }<br /> <br /> #mw-content {<br /> position: relative;<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink) !important;<br /> padding: 28px 32px;<br /> border-radius: var(--radius);<br /> border: 1px solid var(--rule);<br /> box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);<br /> background-image:<br /> /* corner markers: one horizontal and one vertical line per corner */<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> /* 40px grid */<br /> linear-gradient(var(--grid-line) 1px, transparent 1px),<br /> linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;<br /> background-size:<br /> 14px 1px, 1px 14px,<br /> 14px 1px, 1px 14px,<br /> 14px 1px, 1px 14px,<br /> 14px 1px, 1px 14px,<br /> 40px 40px, 40px 40px !important;<br /> background-position:<br /> 10px 10px, 10px 10px,<br /> calc(100% - 10px) 10px, calc(100% - 10px) 10px,<br /> 10px calc(100% - 10px), 10px calc(100% - 10px),<br /> calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),<br /> 0 0, 0 0 !important;<br /> background-repeat:<br /> no-repeat, no-repeat, no-repeat, no-repeat,<br /> no-repeat, no-repeat, no-repeat, no-repeat,<br /> repeat, repeat !important;<br /> }<br /> <br /> /* Body text: old-style serif. Color is set only on containers and text blocks, so inline colors in the page are not overridden */<br /> .mw-parser-output {<br /> font-family: var(--font-body);<br /> font-size: 16px;<br /> line-height: 1.9;<br /> letter-spacing: 0.02em;<br /> color: var(--ink);<br /> }<br /> #mw-content p, #mw-content li, #mw-content dd, #mw-content dt,<br /> .mw-body-content p, .mw-body-content li {<br /> color: var(--ink);<br /> }<br /> .mw-parser-output b,<br /> .mw-parser-output strong { font-family: var(--font-serif); font-weight: 600; color: var(--ink-bright); letter-spacing: 0; }<br /> i, em, cite { font-synthesis: none; }<br /> <br /> @media screen and (min-width: 1100px) {<br /> #mw-content-container { margin-top: 25px; }<br /> }<br /> <br /> @media screen and (min-width: 851px) {<br /> #p-variants-desktop h3 {<br /> padding: 0;<br /> margin: 0;<br /> display: flex;<br /> align-items: center;<br /> }<br /> }<br /> <br /> /* === 10. Page tabs (Template / Discussion / Read / Edit / History) === */<br /> .mw-portlet-views li a,<br /> .mw-portlet-namespaces li a,<br /> .mw-portlet-variants li a,<br /> .mw-portlet-views li a span,<br /> .mw-portlet-namespaces li a span {<br /> color: var(--ink-muted) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.06em;<br /> }<br /> .mw-portlet-views li.selected a,<br /> .mw-portlet-namespaces li.selected a,<br /> .mw-portlet-views li.selected a span,<br /> .mw-portlet-namespaces li.selected a span {<br /> color: var(--heading) !important;<br /> }<br /> .mw-portlet-views li.selected a,<br /> .mw-portlet-namespaces li.selected a {<br /> border-bottom: 2px solid var(--src-huijia-green) !important;<br /> box-shadow: none !important;<br /> }<br /> .tabber__tab { color: var(--ink-muted) !important; font-family: var(--font-body) !important; }<br /> .tabber__tab[aria-selected=&quot;true&quot;] { color: var(--heading) !important; }<br /> .tabber__indicator { background: var(--src-huijia-green) !important; }<br /> <br /> /* === 11. Headings: Plurimod light green, with a deep-green underline that shortens by level === */<br /> .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,<br /> .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {<br /> font-family: var(--font-serif) !important;<br /> color: var(--heading) !important;<br /> font-weight: 600;<br /> letter-spacing: 0.08em;<br /> padding-bottom: 8px;<br /> margin-bottom: 0.8em;<br /> overflow: hidden;<br /> display: block;<br /> text-wrap: balance;<br /> }<br /> .mw-parser-output h1 { font-size: 26px; border-bottom: 2px solid var(--heading-bar) !important; }<br /> .mw-parser-output h2 { font-size: 23px; border-bottom: 2px solid rgba(2, 95, 50, 0.6) !important; margin-top: 1.6em; }<br /> .mw-parser-output h3 { font-size: 19px; }<br /> .mw-parser-output h4 { font-size: 17px; }<br /> .mw-parser-output h5 { font-size: 15px; }<br /> .mw-parser-output h6 { font-family: var(--font-hud) !important; font-size: 13px; letter-spacing: 0.14em; }<br /> <br /> /* Setting Zone mark: ◈ before h2 */<br /> .mw-parser-output h2::before {<br /> content: &quot;◈&quot;;<br /> color: var(--accent);<br /> font-size: 0.6em;<br /> margin-right: 10px;<br /> vertical-align: 0.2em;<br /> }<br /> .toc h2::before, #toc h2::before, .mw-parser-output .toctitle h2::before { content: none; }<br /> <br /> .mw-parser-output h3, .mw-parser-output h4,<br /> .mw-parser-output h5, .mw-parser-output h6 {<br /> border-bottom: none !important;<br /> position: relative;<br /> }<br /> .mw-parser-output h3::after, .mw-parser-output h4::after,<br /> .mw-parser-output h5::after, .mw-parser-output h6::after {<br /> content: &quot;&quot;;<br /> display: block;<br /> position: absolute;<br /> bottom: 0;<br /> left: 0;<br /> height: 2px;<br /> background: linear-gradient(90deg, var(--src-huijia-green), transparent);<br /> border-radius: 1px;<br /> }<br /> .mw-parser-output h3::after { width: 75%; }<br /> .mw-parser-output h4::after { width: 55%; opacity: 0.7; }<br /> .mw-parser-output h5::after { width: 35%; opacity: 0.5; }<br /> .mw-parser-output h6::after { width: 20%; opacity: 0.3; }<br /> <br /> h1.firstHeading {<br /> font-family: var(--font-serif) !important;<br /> color: var(--heading) !important;<br /> font-size: 30px;<br /> font-weight: 600;<br /> letter-spacing: 0.1em;<br /> border-bottom: 2px solid var(--heading-bar) !important;<br /> padding-bottom: 10px;<br /> margin: 0.25em 0 1em;<br /> }<br /> h1.firstHeading::before {<br /> content: &quot;▹&quot;;<br /> color: var(--nav-ink);<br /> margin-right: 10px;<br /> }<br /> <br /> <br /> /* === 12. Code and editors === */<br /> code {<br /> background-color: #1A1A30 !important;<br /> color: #88FFB8 !important;<br /> padding: 2px 6px;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> border: 1px solid var(--rule);<br /> }<br /> pre {<br /> position: relative;<br /> background-color: var(--paper-sunk) !important;<br /> color: var(--ink) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-left: 2px solid var(--src-huijia-green) !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> }<br /> .mw-editfont-monospace, #wpTextbox1, textarea.mw-editfont-monospace,<br /> .ace_editor, .ace_editor .ace_content, .ace_editor .ace_text-layer,<br /> .ace_editor .ace_line,<br /> .CodeMirror, .CodeMirror pre, .CodeMirror-code,<br /> .CodeMirror-line, .CodeMirror-line span,<br /> .mw-editfont-default, textarea {<br /> background-color: #0C0C18 !important;<br /> color: #E8FFE8 !important;<br /> font-family: var(--font-mono) !important;<br /> caret-color: var(--nav-ink) !important;<br /> }<br /> .CodeMirror-gutters {<br /> background-color: #08080F !important;<br /> border-right: 1px solid var(--rule) !important;<br /> }<br /> .CodeMirror-linenumber { color: var(--ink-muted) !important; }<br /> .ace_cursor {<br /> color: var(--nav-ink) !important;<br /> border-left-color: var(--nav-ink) !important;<br /> }<br /> <br /> /* === 13. Links === */<br /> a {<br /> color: var(--link) !important;<br /> text-decoration: none;<br /> transition: color 0.2s ease;<br /> }<br /> a:visited { color: var(--link-visited) !important; }<br /> a:hover {<br /> color: var(--link-hover) !important;<br /> text-decoration: underline dotted !important;<br /> text-underline-offset: 3px;<br /> }<br /> a.new, a.new:visited { color: var(--link-new) !important; }<br /> <br /> /* === 14. Tables === */<br /> table.wikitable {<br /> border-radius: var(--radius);<br /> overflow: hidden;<br /> border: 1px solid var(--rule) !important;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> background-color: var(--paper-alt) !important;<br /> box-shadow: none;<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> }<br /> table.wikitable &gt; * &gt; tr &gt; th,<br /> table.wikitable &gt; tr &gt; th {<br /> background-color: rgba(2, 95, 50, 0.2) !important;<br /> color: var(--heading) !important;<br /> font-family: var(--font-hud) !important;<br /> font-size: 13px;<br /> font-weight: 400;<br /> letter-spacing: 0.1em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 2px solid var(--src-huijia-green) !important;<br /> }<br /> table.wikitable &gt; * &gt; tr &gt; td,<br /> table.wikitable &gt; tr &gt; td {<br /> padding: 9px 12px;<br /> border: none;<br /> border-top: 1px solid var(--rule) !important;<br /> color: var(--ink-bright) !important;<br /> background: transparent;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:nth-of-type(even) { background: transparent; }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover &gt; td,<br /> table.wikitable &gt; tr:hover &gt; td {<br /> background-color: rgba(2, 95, 50, 0.12) !important;<br /> color: var(--ink-bright) !important;<br /> }<br /> <br /> /* === 15. Category bar and footer === */<br /> #catlinks {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> padding: 12px 15px;<br /> color: var(--ink-muted) !important;<br /> }<br /> .mw-footer {<br /> background-color: transparent !important;<br /> padding: 25px 30px;<br /> border-radius: var(--radius) var(--radius) 0 0;<br /> margin-top: 30px;<br /> border-top: 2px solid var(--src-huijia-green) !important;<br /> color: var(--ink-muted) !important;<br /> }<br /> .mw-footer-container { background: transparent; }<br /> .mw-footer li,<br /> .mw-footer a { color: var(--ink-muted) !important; }<br /> <br /> /* === 16. Table of contents === */<br /> .toc, #toc {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> padding: 15px;<br /> color: var(--ink) !important;<br /> }<br /> .toc h2, #toc h2 {<br /> font-family: var(--font-hud) !important;<br /> color: var(--heading) !important;<br /> font-size: 13px !important;<br /> letter-spacing: 0.14em;<br /> }<br /> .toc a { color: var(--link) !important; }<br /> .toc li { color: var(--ink) !important; }<br /> <br /> /* === 17. Logo === */<br /> #p-logo, .mw-portlet-logo {<br /> display: flex !important;<br /> justify-content: center;<br /> align-items: center;<br /> padding: 15px 0 !important;<br /> margin-bottom: 8px;<br /> }<br /> <br /> /* === 18. Editor toolbar, buttons, diffs, inputs, message boxes === */<br /> .oo-ui-toolbar-bar {<br /> background-color: var(--paper-alt) !important;<br /> border-color: var(--rule) !important;<br /> }<br /> .oo-ui-buttonElement-framed.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> background-color: var(--paper-alt) !important;<br /> color: var(--ink-bright) !important;<br /> border-color: var(--rule-strong) !important;<br /> border-radius: var(--radius-sm) !important;<br /> }<br /> .oo-ui-labelElement .oo-ui-labelElement-label { color: var(--ink) !important; }<br /> .oo-ui-textInputWidget input,<br /> .oo-ui-textInputWidget textarea {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink-bright) !important;<br /> border-color: var(--rule-strong) !important;<br /> }<br /> td.diff-context {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink) !important;<br /> }<br /> td.diff-addedline { background-color: rgba(2, 95, 50, 0.18) !important; }<br /> td.diff-deletedline { background-color: rgba(180, 50, 50, 0.18) !important; }<br /> <br /> input[type=&quot;text&quot;], input[type=&quot;search&quot;],<br /> input[type=&quot;password&quot;], select {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink-bright) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-sans) !important;<br /> }<br /> .mw-ui-button,<br /> input[type=&quot;submit&quot;] {<br /> background-color: var(--accent-fill) !important;<br /> color: var(--on-accent) !important;<br /> border: none !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-sans) !important;<br /> letter-spacing: 0.04em;<br /> transition: background-color 0.2s ease;<br /> }<br /> .mw-ui-button:hover,<br /> input[type=&quot;submit&quot;]:hover {<br /> background-color: var(--accent-fill-hover) !important;<br /> box-shadow: 0 0 16px rgba(34, 204, 102, 0.35);<br /> }<br /> .previewnote, .mw-warning-with-logexcerpt, .warningbox {<br /> background-color: rgba(63, 57, 84, 0.3) !important;<br /> border-color: var(--rule) !important;<br /> color: var(--ink) !important;<br /> }<br /> .successbox {<br /> background-color: rgba(2, 95, 50, 0.2) !important;<br /> border-color: var(--src-huijia-green) !important;<br /> color: var(--ink) !important;<br /> }<br /> .errorbox {<br /> background-color: rgba(180, 50, 50, 0.2) !important;<br /> color: #FFAAAA !important;<br /> }<br /> <br /> /* === 18b. Infobox and navbox: dark version<br /> Common.css draws the infobox light (#fbfbfb background, #ddd border); the Setting Zone switches it to dark.<br /> A template's background parameter is written as an inline style, so it still takes priority. */<br /> .infoBox {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius) !important;<br /> box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;<br /> color: var(--ink) !important;<br /> overflow: hidden;<br /> }<br /> .infoBoxContent {<br /> background-color: var(--paper-raised) !important;<br /> border: none !important;<br /> border-top: 1px solid var(--rule) !important;<br /> border-radius: 0 !important;<br /> }<br /> .infoBoxTitle {<br /> color: var(--heading) !important;<br /> font-family: var(--font-serif);<br /> letter-spacing: 0.08em;<br /> }<br /> .infoBoxText,<br /> .infoBoxBelow { color: var(--ink) !important; }<br /> .infoBoxIcon { color: var(--accent) !important; }<br /> .infoBox a { color: var(--link) !important; }<br /> <br /> table.infobox {<br /> background-color: var(--paper-alt) !important;<br /> color: var(--ink) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> }<br /> table.infobox th { color: var(--heading) !important; background-color: rgba(2, 95, 50, 0.2) !important; }<br /> <br /> .navbox,<br /> .navbox-subgroup,<br /> .navbox-list { background-color: var(--paper-alt) !important; border-color: var(--rule) !important; color: var(--ink) !important; }<br /> .navbox th, .navbox-title { background-color: rgba(2, 95, 50, 0.25) !important; color: var(--heading) !important; }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background-color: rgba(63, 57, 84, 0.35) !important; color: var(--ink) !important; }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background-color: var(--paper-raised) !important; }<br /> .navbox-even { background-color: rgba(255, 255, 255, 0.02) !important; }<br /> .navbox-odd { background-color: transparent !important; }<br /> <br /> /* === 18c. White background at low resolutions<br /> On narrow screens Timeless changes its layout; html and several wrapper containers have a white background that shows through.<br /> The canvas is set to violet-black here, and all wrappers are transparent. */<br /> html { background-color: var(--paper) !important; }<br /> #mw-wrapper,<br /> #mw-header-hack,<br /> #mw-header-nav-hack,<br /> #mw-content-container,<br /> #mw-content-block,<br /> #mw-site-navigation,<br /> #mw-related-navigation,<br /> #mw-footer-container,<br /> #mw-footer,<br /> .ts-inner {<br /> background-color: transparent !important;<br /> }<br /> <br /> /* === 19. Scrollbar === */<br /> ::-webkit-scrollbar { width: 8px; height: 8px; }<br /> ::-webkit-scrollbar-track { background: var(--paper); }<br /> ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }<br /> ::-webkit-scrollbar-thumb:hover { background: var(--src-huijia-green); }<br /> <br /> /* === 20. Reading progress bar, scanline sweep, copy button === */<br /> #str-progress-container {<br /> position: fixed; bottom: 0; left: 0;<br /> width: 100%; height: 3px;<br /> background: rgba(0, 0, 0, 0.6);<br /> z-index: 99999;<br /> pointer-events: none;<br /> }<br /> #str-progress-bar {<br /> height: 100%; width: 0;<br /> background: linear-gradient(90deg, #025F32, #22CC66, #C1E1A6);<br /> box-shadow: 0 0 8px rgba(34, 204, 102, 0.6);<br /> }<br /> #str-scanline-sweep {<br /> position: fixed; inset: 0; pointer-events: none;<br /> z-index: 9991; overflow: hidden;<br /> }<br /> #str-scanline-sweep::after {<br /> content: &quot;&quot;; position: absolute; left: 0;<br /> width: 100%; height: 4px;<br /> background: linear-gradient(90deg,<br /> transparent 0%, rgba(193, 225, 166, 0.05) 15%,<br /> rgba(2, 95, 50, 0.10) 40%, rgba(34, 204, 102, 0.06) 60%,<br /> rgba(193, 225, 166, 0.05) 85%, transparent 100%);<br /> animation: str-sweep-down 9s linear infinite;<br /> }<br /> @keyframes str-sweep-down { 0% { top: -10px; } 100% { top: 100%; } }<br /> <br /> .str-copy-btn {<br /> position: absolute; top: 8px; right: 8px;<br /> background: rgba(2, 95, 50, 0.85); color: #FFFFFF;<br /> border: 1px solid rgba(193, 225, 166, 0.25);<br /> border-radius: var(--radius-sm);<br /> padding: 4px 10px; font-size: 11px;<br /> font-family: var(--font-hud);<br /> letter-spacing: 0.1em; text-transform: uppercase;<br /> cursor: pointer; opacity: 0;<br /> transition: opacity 0.2s ease; z-index: 50;<br /> }<br /> pre:hover .str-copy-btn,<br /> .str-copy-btn:focus-visible { opacity: 1; }<br /> <br /> /* === 21. Reduced motion === */<br /> @media (prefers-reduced-motion: reduce) {<br /> body::after,<br /> #p-banner::after,<br /> #str-scanline-sweep::after { animation: none !important; }<br /> #str-scanline-sweep { display: none; }<br /> * { transition: none !important; }<br /> }<br /> <br /> /* === 22. Mobile (≤850px) === */<br /> @media screen and (max-width: 850px) {<br /> #mw-content { padding: 18px 16px; }<br /> .sidebar-chunk {<br /> transform: none !important;<br /> opacity: 1 !important;<br /> background: none !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> .sidebar-chunk h2 {<br /> font-size: 0 !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> }<br /> .sidebar-chunk h2::before { content: none; }<br /> #mw-content-block { background: transparent !important; }<br /> .sidebar-chunk:empty,<br /> .mw-portlet:empty,<br /> .mw-portlet:not(:has(li)):not(:has(a)) {<br /> display: none !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> background: none !important;<br /> }<br /> #mw-content-block .sidebar-chunk {<br /> border: none !important;<br /> box-shadow: none !important;<br /> background: transparent !important;<br /> padding: 0 !important;<br /> }<br /> table.wikitable { display: block; overflow-x: auto; white-space: normal; }<br /> <br /> /* On narrow screens the sidebars become dropdown menus; their panels go dark so no white shows through */<br /> #mw-site-navigation .sidebar-inner,<br /> #mw-related-navigation .sidebar-inner,<br /> #site-tools .sidebar-inner,<br /> #mw-site-navigation .dropdown .mw-portlet-body,<br /> #mw-related-navigation .dropdown .mw-portlet-body {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius) !important;<br /> box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;<br /> color: var(--ink) !important;<br /> }<br /> <br /> /* Cap the logo size so it can't blow up when the sidebar renders incorrectly */<br /> #p-logo img {<br /> max-width: 180px !important;<br /> width: auto !important;<br /> height: auto !important;<br /> }<br /> }<br /> &lt;/style&gt;<br /> <br /> &lt;script&gt;<br /> /**<br /> * S.T.R. OFFICE — UI ENHANCEMENTS (v3.0)<br /> * Kept: reading progress bar, code copy button, scanline sweep, non-sticky header<br /> * Removed: full-screen flicker layer, scroll fade-ins, ambient pulse<br /> */<br /> (function () {<br /> &quot;use strict&quot;;<br /> if (window.__strThemeLoaded) return;<br /> window.__strThemeLoaded = true;<br /> <br /> var reduceMotion = window.matchMedia &amp;&amp; window.matchMedia(&quot;(prefers-reduced-motion: reduce)&quot;).matches;<br /> var LABEL = { copy: &quot;COPY&quot;, done: &quot;COPIED&quot;, fail: &quot;FAILED&quot; };<br /> <br /> function killStickyHeader() {<br /> /* Mobile keeps Timeless's own header positioning */<br /> if (window.matchMedia &amp;&amp; window.matchMedia(&quot;(max-width: 850px)&quot;).matches) return;<br /> var hdr = document.getElementById(&quot;mw-header-container&quot;);<br /> if (!hdr || !window.MutationObserver) return;<br /> var pin = function () {<br /> hdr.style.setProperty(&quot;position&quot;, &quot;relative&quot;, &quot;important&quot;);<br /> hdr.style.setProperty(&quot;top&quot;, &quot;auto&quot;, &quot;important&quot;);<br /> };<br /> pin();<br /> new MutationObserver(pin).observe(hdr, { attributes: true, attributeFilter: [&quot;class&quot;, &quot;style&quot;] });<br /> }<br /> <br /> function initProgress() {<br /> if (document.getElementById(&quot;str-progress-container&quot;)) return;<br /> var c = document.createElement(&quot;div&quot;);<br /> c.id = &quot;str-progress-container&quot;;<br /> var b = document.createElement(&quot;div&quot;);<br /> b.id = &quot;str-progress-bar&quot;;<br /> c.appendChild(b);<br /> document.body.appendChild(c);<br /> var ticking = false;<br /> function update() {<br /> var st = window.pageYOffset || document.documentElement.scrollTop;<br /> var dh = document.documentElement.scrollHeight - document.documentElement.clientHeight;<br /> b.style.width = (dh &gt; 0 ? (st / dh) * 100 : 0) + &quot;%&quot;;<br /> ticking = false;<br /> }<br /> window.addEventListener(&quot;scroll&quot;, function () {<br /> if (!ticking) { ticking = true; window.requestAnimationFrame(update); }<br /> }, { passive: true });<br /> update();<br /> }<br /> <br /> function initCopy() {<br /> document.querySelectorAll(&quot;#mw-content pre&quot;).forEach(function (block) {<br /> if (block.querySelector(&quot;.str-copy-btn&quot;)) return;<br /> var btn = document.createElement(&quot;button&quot;);<br /> btn.type = &quot;button&quot;;<br /> btn.className = &quot;str-copy-btn&quot;;<br /> btn.textContent = LABEL.copy;<br /> btn.addEventListener(&quot;click&quot;, function (e) {<br /> e.preventDefault();<br /> e.stopPropagation();<br /> var clone = block.cloneNode(true);<br /> var own = clone.querySelector(&quot;.str-copy-btn&quot;);<br /> if (own) own.remove();<br /> var text = clone.textContent.trim();<br /> var done = function (label) {<br /> btn.textContent = label;<br /> setTimeout(function () { btn.textContent = LABEL.copy; }, 2000);<br /> };<br /> if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) {<br /> navigator.clipboard.writeText(text).then(<br /> function () { done(LABEL.done); },<br /> function () { done(LABEL.fail); }<br /> );<br /> } else {<br /> done(LABEL.fail);<br /> }<br /> });<br /> block.appendChild(btn);<br /> });<br /> }<br /> <br /> function initSweep() {<br /> if (reduceMotion || document.getElementById(&quot;str-scanline-sweep&quot;)) return;<br /> var div = document.createElement(&quot;div&quot;);<br /> div.id = &quot;str-scanline-sweep&quot;;<br /> div.setAttribute(&quot;aria-hidden&quot;, &quot;true&quot;);<br /> document.body.appendChild(div);<br /> }<br /> <br /> function init() {<br /> killStickyHeader();<br /> initProgress();<br /> initCopy();<br /> initSweep();<br /> }<br /> <br /> if (document.readyState === &quot;loading&quot;) {<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, init);<br /> } else {<br /> init();<br /> }<br /> })();<br /> &lt;/script&gt;<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;&lt;noinclude&gt;{{Theme-STR}}<br /> ==Description==<br /> '''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.<br /> <br /> 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.<br /> <br /> ==Origin==<br /> Author: [[User:PlurimodSU|Marina Malinti]]<br /> <br /> ===Note===<br /> To use this theme on a page, simply add the following code directly to the page's source code:<br /> &lt;pre&gt;{{Theme-STR}}&lt;/pre&gt;<br /> <br /> ==Component tokens==<br /> The page components (&lt;code&gt;.vgr-title-block&lt;/code&gt;, &lt;code&gt;.rec-card&lt;/code&gt;, &lt;code&gt;.rec-subhead&lt;/code&gt;, &lt;code&gt;.rec-intro&lt;/code&gt;, &lt;code&gt;.novel-track&lt;/code&gt;, &lt;code&gt;.rec-soon&lt;/code&gt; and others) are defined in section 8 of &lt;code&gt;MediaWiki:Common.css&lt;/code&gt; and work on any page. This theme only resets the tokens below; pages without a theme use the defaults in Common.css (Archive Zone look).<br /> {| class=&quot;wikitable&quot;<br /> ! Token !! Value !! Used for<br /> |-<br /> | &lt;code&gt;--c-radius&lt;/code&gt; || &lt;code&gt;var(--radius)&lt;/code&gt; (6px) || Corners of cards, anchor buttons and the title block<br /> |-<br /> | &lt;code&gt;--c-mark&lt;/code&gt; || &lt;code&gt;&quot;◈&quot;&lt;/code&gt; || Zone mark: tagline divider and above Coming Soon<br /> |-<br /> | &lt;code&gt;--c-label-font&lt;/code&gt; || &lt;code&gt;var(--font-hud)&lt;/code&gt; || Font of small labels (&lt;code&gt;.rec-subhead&lt;/code&gt;, chapter numbers, Coming Soon)<br /> |-<br /> | &lt;code&gt;--c-label-size&lt;/code&gt; / &lt;code&gt;-weight&lt;/code&gt; / &lt;code&gt;-spacing&lt;/code&gt; || &lt;code&gt;13px&lt;/code&gt; / &lt;code&gt;400&lt;/code&gt; / &lt;code&gt;0.16em&lt;/code&gt; || Label size, weight and tracking<br /> |-<br /> | &lt;code&gt;--c-soon-style&lt;/code&gt; || &lt;code&gt;normal&lt;/code&gt; || Font style of Coming Soon<br /> |-<br /> | &lt;code&gt;--c-intro-border&lt;/code&gt; || &lt;code&gt;4px solid rgba(0,163,108,0.6)&lt;/code&gt; || Left rule of &lt;code&gt;.rec-intro&lt;/code&gt;<br /> |-<br /> | &lt;code&gt;--c-title-bg&lt;/code&gt; || 40px grid lines + &lt;code&gt;--accent-tint&lt;/code&gt; || Background of &lt;code&gt;.vgr-title-block&lt;/code&gt;<br /> |-<br /> | &lt;code&gt;--c-title-top&lt;/code&gt; / &lt;code&gt;-shadow&lt;/code&gt; || &lt;code&gt;1px solid var(--accent)&lt;/code&gt; / &lt;code&gt;none&lt;/code&gt; || Title block top rule and lintel<br /> |-<br /> | &lt;code&gt;--c-title-ink&lt;/code&gt; / &lt;code&gt;-en-ink&lt;/code&gt; || &lt;code&gt;var(--ink)&lt;/code&gt; / &lt;code&gt;var(--accent)&lt;/code&gt; || Main and secondary title colors in the title block<br /> |-<br /> | &lt;code&gt;--c-chap-bg&lt;/code&gt; / &lt;code&gt;-bg-hover&lt;/code&gt; || &lt;code&gt;var(--paper-raised)&lt;/code&gt; / &lt;code&gt;var(--color-surface-3)&lt;/code&gt; || Chapter card background and hover background<br /> |-<br /> | &lt;code&gt;--c-chap-top&lt;/code&gt; / &lt;code&gt;-lintel&lt;/code&gt; || &lt;code&gt;3px solid var(--accent)&lt;/code&gt; / &lt;code&gt;transparent&lt;/code&gt; || Chapter card top rule and lintel line<br /> |}<br /> <br /> ==Page components==<br /> With this theme on the page, the components below take on the Worldview Zone look.<br /> <br /> * '''Title block''': &lt;code&gt;.vgr-title-block&lt;/code&gt; (&lt;code&gt;-cn&lt;/code&gt; / &lt;code&gt;-en&lt;/code&gt; / &lt;code&gt;-sub&lt;/code&gt; / &lt;code&gt;-tagline&lt;/code&gt;). A page with a title block hides the default page title and table of contents<br /> * '''Anchor bar''': &lt;code&gt;#rec-anchors&lt;/code&gt;<br /> * '''Section''': &lt;code&gt;.rec-section&lt;/code&gt;, which only adds space above the section heading<br /> * '''Epigraph''': &lt;code&gt;.rec-intro&lt;/code&gt;; '''small label''': &lt;code&gt;.rec-subhead&lt;/code&gt; (not a real heading, not in the TOC)<br /> * '''Grid''': &lt;code&gt;.rec-grid&lt;/code&gt; + &lt;code&gt;.rec-grid-2&lt;/code&gt; / &lt;code&gt;.rec-grid-4&lt;/code&gt;; '''card with description''': &lt;code&gt;.rec-card&lt;/code&gt; (title in &lt;code&gt;.rec-card-title&lt;/code&gt;); '''compact link''': &lt;code&gt;.rec-link&lt;/code&gt;<br /> * '''Chapter track''': &lt;code&gt;.novel-track&lt;/code&gt; / &lt;code&gt;.novel-chap&lt;/code&gt; (&lt;code&gt;.chap-no&lt;/code&gt; / &lt;code&gt;.chap-pd&lt;/code&gt; / &lt;code&gt;.chap-title&lt;/code&gt; / &lt;code&gt;.chap-desc&lt;/code&gt;; unfinished chapters use &lt;code&gt;.chap-upcoming&lt;/code&gt;)<br /> * '''Placeholder''': &lt;code&gt;.rec-soon&lt;/code&gt;<br /> <br /> ===Example===<br /> &lt;div class=&quot;vgr-demo&quot;&gt;<br /> &lt;div class=&quot;vgr-title-block&quot;&gt;<br /> &lt;div class=&quot;vgr-title-cn&quot;&gt;Series Title&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-en&quot;&gt;Series Subtitle&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-sub&quot;&gt;A one-line introduction to the series&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-tagline&quot;&gt;An optional epigraph.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div id=&quot;rec-anchors&quot;&gt;<br /> [[#demo-section-1|Section One]]<br /> [[#demo-section-2|Section Two]]<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> &lt;html&gt;&lt;div class=&quot;mw-heading mw-heading2&quot;&gt;&lt;h2 id=&quot;demo-section-1&quot;&gt;Section One&lt;/h2&gt;&lt;/div&gt;&lt;/html&gt;<br /> &lt;div class=&quot;rec-intro&quot;&gt;A short introduction to this section.&lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Cards with descriptions&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-2&quot;&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Entry title]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Another entry]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Compact links&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-4&quot;&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term one]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term two]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term three]]&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;novel-track&quot;&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter I&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter II&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter III&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter IV&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap chap-upcoming&quot;&gt;In progress&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> &lt;html&gt;&lt;div class=&quot;mw-heading mw-heading2&quot;&gt;&lt;h2 id=&quot;demo-section-2&quot;&gt;Section Two&lt;/h2&gt;&lt;/div&gt;&lt;/html&gt;<br /> &lt;div class=&quot;rec-soon&quot;&gt;Coming Soon&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> ===Code===<br /> Put &lt;code&gt;&lt;nowiki&gt;{{Theme-STR}}&lt;/nowiki&gt;&lt;/code&gt; at the very top of the page, then build the body like this:<br /> &lt;pre&gt;<br /> &lt;div class=&quot;vgr-title-block&quot;&gt;<br /> &lt;div class=&quot;vgr-title-cn&quot;&gt;Series Title&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-en&quot;&gt;Series Subtitle&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-sub&quot;&gt;A one-line introduction to the series&lt;/div&gt;<br /> &lt;div class=&quot;vgr-title-tagline&quot;&gt;An optional epigraph.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div id=&quot;rec-anchors&quot;&gt;<br /> [[#Section One|Section One]]<br /> [[#Section Two|Section Two]]<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> == Section One ==<br /> &lt;div class=&quot;rec-intro&quot;&gt;A short introduction to this section.&lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Cards with descriptions&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-2&quot;&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Entry title]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;div class=&quot;rec-card&quot;&gt;&lt;span class=&quot;rec-card-title&quot;&gt;[[Main Page|Another entry]]&lt;/span&gt;<br /> One or two sentences describing the entry.&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-subhead&quot;&gt;Compact links&lt;/div&gt;<br /> &lt;div class=&quot;rec-grid rec-grid-4&quot;&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term one]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term two]]&lt;/div&gt;<br /> &lt;div class=&quot;rec-link&quot;&gt;[[Main Page|Term three]]&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;novel-track&quot;&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter I&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter II&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter III&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap&quot;&gt;&lt;div class=&quot;chap-no&quot;&gt;Chapter IV&lt;/div&gt;&lt;div class=&quot;chap-pd&quot;&gt;Subtitle&lt;/div&gt;&lt;div class=&quot;chap-title&quot;&gt;Title&lt;/div&gt;&lt;div class=&quot;chap-desc&quot;&gt;A sample chapter summary.&lt;/div&gt;&lt;/div&gt;<br /> &lt;div class=&quot;novel-chap chap-upcoming&quot;&gt;In progress&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;rec-section&quot;&gt;<br /> == Section Two ==<br /> &lt;div class=&quot;rec-soon&quot;&gt;Coming Soon&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> <br /> * The two section headings in the example are written in HTML so they stay out of this page's TOC; on a real page use &lt;code&gt;&lt;nowiki&gt;== Section One ==&lt;/nowiki&gt;&lt;/code&gt; as in the code above.<br /> * A title block wrapped in &lt;code&gt;&lt;nowiki&gt;&lt;div class=&quot;vgr-demo&quot;&gt;&lt;/nowiki&gt;&lt;/code&gt; does not hide the page title or TOC; it is for documentation pages only.<br /> * The old &lt;code&gt;mini-block rec-card&lt;/code&gt;, &lt;code&gt;mini-block-title&lt;/code&gt; and &lt;code&gt;mini-block-list&lt;/code&gt; classes still work, but new pages should use the classes above.<br /> <br /> ==Test==<br /> A body paragraph with an [[Main Page|internal link]], a [[Nonexistent Page|red link]], some &lt;code&gt;inline code&lt;/code&gt; and '''bold text'''. &lt;span style=&quot;color:#FFD700;&quot;&gt;This inline color should stay gold.&lt;/span&gt;<br /> <br /> ===Subheading 3===<br /> ====Subheading 4====<br /> =====Subheading 5=====<br /> ======Subheading 6======<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! Event !! S.C. !! O.<br /> |-<br /> | Sample event A || 1999 || 0<br /> |-<br /> | Sample event B || 2021.05.14 || 22.05.14<br /> |}<br /> <br /> [[Category:Template-Theme]]<br /> &lt;/noinclude&gt;</div> PlurimodSU https://en.huijia.fun/index.php?title=Template:Theme-HJ&diff=198 Template:Theme-HJ 2026-10-13T16:35:18Z <p>PlurimodSU: Sync with zh: ink-green headings; 1px heading rules (full width on h1/h2, fading on h3-h6); Archive Zone mark on h2; no page-title rule; flat language-variant button and dropdown; English-only copy labels</p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> &lt;style&gt;<br /> /**<br /> * HUIJIA FUN - TIMELESS THEME - HJ V5.0<br /> * VGR Design System: Archive Zone / site-wide default theme<br /> * Changes: uses VGR tokens; body text in Zhuque Fangsong; square corners, no shadows; keeps the dot pattern and graded heading rules;<br /> * scroll fade-ins removed; overrides the pink of Timeless and Tabber<br /> */<br /> <br /> /* === 0. Fonts ===<br /> Source Sans 3 / Source Serif 4 are the Latin halves of the same families as Noto Sans SC / Noto Serif SC (Source Han Sans / Serif).<br /> Latin first, Chinese second: English italics come from the Latin font, while Chinese stays upright. */<br /> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&amp;family=Noto+Serif+SC:wght@400;600&amp;family=Source+Sans+3:ital,wght@0,400;0,500;0,700;1,400&amp;family=Source+Serif+4:ital,wght@0,400;0,600;1,400&amp;family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&amp;family=JetBrains+Mono:wght@400;700&amp;display=swap');<br /> @import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');<br /> /* Zhuque Fangsong: body font. Loaded in character slices, so only the glyphs a page uses are downloaded. SIL OFL 1.1 */<br /> @import url('https://cdn.jsdelivr.net/npm/@chinese-fonts/zqfs@3.0.0/dist/ZhuqueFangsong-Regular/result.css');<br /> <br /> /* === 1. Tokens (light) === */<br /> :root {<br /> /* Source colors */<br /> --src-huijia-green: #025F32;<br /> --src-dragon-green: #3B7E3D;<br /> --src-gate-grey: #969682;<br /> --src-plurimod-light: #C1E1A6;<br /> --src-huashao-blue: #002F9C;<br /> <br /> /* Semantic colors */<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> --heading: #0F3D27; /* heading text: ink green 12.2:1 */<br /> --heading-bar: #C8D8C8; /* rule under sidebar group names */<br /> --heading-line: #8FB39A; /* heading rules: full width on h1/h2, fading from h3 to h6 */<br /> --dot: #A3B1A8; /* dot pattern on the content card */<br /> <br /> /* Type */<br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> /* Body: Fangsong, the tone of archives and official documents. Falls back to Noto Serif SC if it fails to load */<br /> --font-body: &quot;Source Serif 4&quot;, &quot;Zhuque Fangsong (technical preview)&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;FangSong&quot;, &quot;STFangsong&quot;, serif;<br /> --font-latin: &quot;Cormorant Garamond&quot;, &quot;EB Garamond&quot;, Georgia, serif;<br /> --font-scripture: &quot;LXGW WenKai Screen&quot;, &quot;Kaiti SC&quot;, STKaiti, KaiTi, serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> /* Spacing and radius */<br /> --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;<br /> --space-6: 24px; --space-8: 32px; --space-12: 48px;<br /> --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-pill: 999px;<br /> <br /> /* Point the Timeless / Codex / FlowThread primary-color variables at Huijia Green, replacing the skin's pink */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --color-progressive--hover: var(--src-dragon-green);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> --color-link: var(--link);<br /> --color-link--visited: var(--link);<br /> --color-link-red: var(--link-new);<br /> <br /> /* Legacy variable names, kept for other templates */<br /> --mw-primary: var(--accent);<br /> --mw-accent: var(--src-dragon-green);<br /> --mw-link: var(--link);<br /> --mw-border: var(--rule);<br /> --font-heading: var(--font-serif);<br /> --font-code: var(--font-mono);<br /> }<br /> <br /> /* === 1b. Tokens (dark)<br /> Applies only under MediaWiki's night-mode class and does not follow the system setting:<br /> Common.css and other templates are not dark-ready yet, so following the system would leave some elements dark-on-dark. */<br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> --heading: #D2E8C6;<br /> --heading-bar: #2F4033;<br /> --heading-line: #4F7559;<br /> --dot: #2A352E;<br /> color-scheme: dark;<br /> }<br /> <br /> /* === 2. Page and body text === */<br /> body {<br /> background-color: var(--paper);<br /> color: var(--ink);<br /> font-family: var(--font-sans);<br /> font-size: 16px;<br /> line-height: 1.8;<br /> accent-color: var(--accent);<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> <br /> /* Body text uses Fangsong; UI elements such as navigation, tables and buttons stay in sans (set in their own sections) */<br /> .mw-parser-output {<br /> font-family: var(--font-body);<br /> font-size: 16px;<br /> line-height: 1.9;<br /> letter-spacing: 0.02em;<br /> }<br /> .mw-parser-output b,<br /> .mw-parser-output strong { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }<br /> <br /> /* Chinese has no true italic: stop the browser from faking slanted Chinese; Latin italics work as usual */<br /> i, em, cite, .mw-parser-output i { font-synthesis: none; }<br /> <br /> ::selection { background: var(--accent-fill); color: var(--on-accent); }<br /> <br /> :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> <br /> /* === 3. Header === */<br /> #mw-header-container {<br /> background: var(--paper-raised);<br /> border-bottom: 1px solid var(--rule);<br /> box-shadow: none;<br /> }<br /> #p-banner, #p-banner a, .mw-wiki-title {<br /> font-family: var(--font-sans);<br /> font-weight: 500;<br /> letter-spacing: 0.04em;<br /> color: var(--ink) !important;<br /> }<br /> <br /> /* === 4. Search box (the only pill shape) === */<br /> #p-search {<br /> margin: 0 20px !important;<br /> display: flex;<br /> align-items: center;<br /> }<br /> #searchform {<br /> background: var(--paper-raised) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius-pill) !important;<br /> display: flex !important;<br /> flex-direction: row !important;<br /> align-items: center !important;<br /> padding: 2px 4px 2px 16px !important;<br /> max-width: 350px;<br /> overflow: hidden;<br /> box-shadow: none !important;<br /> transition: border-color 0.2s ease;<br /> }<br /> #searchform:focus-within {<br /> border-color: var(--accent) !important;<br /> outline: 2px solid var(--focus);<br /> outline-offset: 2px;<br /> }<br /> #simpleSearch {<br /> background: transparent !important;<br /> border: none !important;<br /> width: 100% !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> #searchInput {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> font-family: var(--font-sans);<br /> font-size: 14px !important;<br /> padding: 8px 0 !important;<br /> color: var(--ink) !important;<br /> width: 100% !important;<br /> outline: none;<br /> }<br /> #searchInput::placeholder { color: var(--ink-muted); }<br /> <br /> /* === 5. Logo === */<br /> #p-logo, .mw-portlet-logo {<br /> display: flex !important;<br /> justify-content: center;<br /> align-items: center;<br /> padding: 20px 0 !important;<br /> margin-bottom: 10px;<br /> }<br /> #p-logo img {<br /> border-radius: var(--radius-none);<br /> box-shadow: none;<br /> }<br /> <br /> /* === 6. Left and right sidebars === */<br /> .sidebar-chunk {<br /> background-color: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-none);<br /> box-shadow: none;<br /> margin-bottom: var(--space-4);<br /> padding: var(--space-4);<br /> }<br /> .sidebar-chunk h2,<br /> .sidebar-chunk h3,<br /> .mw-portlet h3 {<br /> /* Group names (Navigation / Hubs / Setting Zone / Page tools…): Source Serif / Noto Serif SC */<br /> font-family: var(--font-serif) !important;<br /> font-size: 15px !important;<br /> font-weight: 600 !important;<br /> letter-spacing: 0.1em;<br /> text-transform: none;<br /> color: var(--ink) !important;<br /> border: none !important;<br /> border-bottom: 2px solid var(--heading-bar) !important;<br /> padding-bottom: 6px;<br /> margin-bottom: var(--space-3);<br /> }<br /> .sidebar-chunk li a,<br /> .sidebar-chunk li a span,<br /> .mw-portlet-body li a,<br /> .mw-portlet-body li a span {<br /> /* Nav links: Zhuque Fangsong, matching the body text */<br /> color: var(--ink) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.04em;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .mw-portlet-body li a:hover {<br /> color: var(--accent) !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* === 7. Content card === */<br /> #mw-content-wrapper {<br /> background: transparent;<br /> padding-top: 0;<br /> box-shadow: none;<br /> }<br /> #mw-content {<br /> background-color: var(--paper-raised);<br /> /* dot pattern: 1px dots on a 20px grid */<br /> background-image: radial-gradient(var(--dot) 0px, transparent 1px);<br /> background-size: 20px 20px;<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-none);<br /> box-shadow: none;<br /> padding: var(--space-6) var(--space-8);<br /> }<br /> <br /> /* Page tabs (Read / Edit / History / Discussion): the selected tab uses Huijia Green instead of pink */<br /> #mw-content-block .mw-portlet li a,<br /> #mw-content-block .mw-portlet li a .mw-ui-icon::before {<br /> color: var(--ink-muted) !important;<br /> }<br /> /* Page tab labels (Template / Discussion / Read / Edit / History): Zhuque Fangsong */<br /> #mw-content-block .mw-portlet li a,<br /> #mw-content-block .mw-portlet li a span {<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.06em;<br /> }<br /> #mw-content-block .mw-portlet li.selected a,<br /> #mw-content-block .mw-portlet li.selected a .mw-ui-icon::before {<br /> color: var(--accent) !important;<br /> }<br /> #mw-content-block .mw-portlet li.selected a {<br /> box-shadow: none !important;<br /> }<br /> #mw-content-block .mw-portlet li a:hover { color: var(--ink) !important; }<br /> <br /> /* Language variant button: remove the underline the skin puts under the label; remove the skin's pink shadow from the dropdown */<br /> #p-variants-desktop h3,<br /> #p-variants-desktop-label { border-bottom: none !important; box-shadow: none !important; }<br /> #p-variants-desktop .dropdown { box-shadow: none !important; }<br /> <br /> /* Tabber (e.g. the Main Page &quot;Site info / Create a page&quot; tabs) */<br /> .tabber__tab { color: var(--ink-muted) !important; font-family: var(--font-body) !important; font-size: 15.5px; letter-spacing: 0.06em; }<br /> .tabber__tab[aria-selected=&quot;true&quot;] { color: var(--accent) !important; }<br /> .tabber__indicator { background: var(--accent) !important; }<br /> .tabber .tabbernav li a { color: var(--ink-muted) !important; font-family: var(--font-body) !important; letter-spacing: 0.06em; }<br /> .tabber .tabbernav li.tabberactive a {<br /> color: var(--accent) !important;<br /> border-bottom-color: var(--accent) !important;<br /> }<br /> <br /> /* === 8. Headings ===<br /> Text in ink green (--heading). The page title has no rule. h1/h2: a full-width 1px green-grey rule; h2 gets the Archive Zone mark ■.<br /> h3-h6: a rule of the same color and weight (1px) fading out to the right, shorter and fainter at each level (same approach as Theme-VGR, in Archive Zone green-grey). */<br /> h1.firstHeading {<br /> font-family: var(--font-serif);<br /> font-size: 30px;<br /> font-weight: 600;<br /> line-height: 1.3;<br /> color: var(--heading) !important;<br /> letter-spacing: 0.02em;<br /> border-bottom: none !important;<br /> padding-bottom: 10px;<br /> margin-bottom: var(--space-6);<br /> text-wrap: balance;<br /> }<br /> <br /> .mw-parser-output h1,<br /> .mw-parser-output h2,<br /> .mw-parser-output h3,<br /> .mw-parser-output h4,<br /> .mw-parser-output h5,<br /> .mw-parser-output h6 {<br /> font-family: var(--font-serif) !important;<br /> font-weight: 600;<br /> color: var(--heading) !important;<br /> letter-spacing: 0.02em;<br /> text-wrap: balance;<br /> padding-bottom: var(--space-2);<br /> overflow: hidden;<br /> border: none !important;<br /> }<br /> <br /> /* h1/h2: full-width 1px rule, same color and weight as the h3-h6 fading rules */<br /> .mw-parser-output h1,<br /> .mw-parser-output h2 {<br /> background: linear-gradient(var(--heading-line) 0 0) left bottom / 100% 1px no-repeat;<br /> }<br /> .mw-parser-output h1 {<br /> font-size: 26px;<br /> line-height: 1.3;<br /> margin: var(--space-8) 0 var(--space-3);<br /> }<br /> .mw-parser-output h2 {<br /> font-size: 23px;<br /> line-height: 1.35;<br /> margin: var(--space-8) 0 var(--space-3);<br /> }<br /> /* Archive Zone mark: a small solid square (drawn in CSS, font-independent, matching the sidebar ■) */<br /> .mw-parser-output h2::before {<br /> content: &quot;&quot;;<br /> display: inline-block;<br /> width: 8px;<br /> height: 8px;<br /> margin-right: 12px;<br /> vertical-align: 0.2em;<br /> background: var(--accent);<br /> }<br /> .toc h2::before, #toc h2::before, .mw-parser-output .toctitle h2::before { content: none; display: none; }<br /> .toc h2, #toc h2, .mw-parser-output .toctitle h2 { background: none; }<br /> <br /> .mw-parser-output h3 {<br /> font-size: 19px;<br /> line-height: 1.45;<br /> margin: var(--space-6) 0 var(--space-2);<br /> }<br /> .mw-parser-output h4 {<br /> font-size: 17px;<br /> line-height: 1.5;<br /> color: var(--ink) !important;<br /> margin: var(--space-4) 0 var(--space-2);<br /> }<br /> .mw-parser-output h5 {<br /> font-size: 15px;<br /> line-height: 1.5;<br /> color: var(--ink) !important;<br /> margin: var(--space-4) 0 var(--space-1);<br /> }<br /> .mw-parser-output h6 {<br /> font-family: var(--font-sans) !important;<br /> font-size: 13px;<br /> font-weight: 500;<br /> letter-spacing: 0.08em;<br /> color: var(--ink-muted) !important;<br /> margin: var(--space-4) 0 var(--space-1);<br /> }<br /> <br /> /* h3-h6: fade out to the right */<br /> .mw-parser-output h3,<br /> .mw-parser-output h4,<br /> .mw-parser-output h5,<br /> .mw-parser-output h6 { position: relative; }<br /> .mw-parser-output h3::after,<br /> .mw-parser-output h4::after,<br /> .mw-parser-output h5::after,<br /> .mw-parser-output h6::after {<br /> content: &quot;&quot;;<br /> display: block;<br /> position: absolute;<br /> left: 0;<br /> bottom: 0;<br /> background: linear-gradient(90deg, var(--heading-line), transparent);<br /> }<br /> .mw-parser-output h3::after { width: 85%; height: 1px; }<br /> .mw-parser-output h4::after { width: 65%; height: 1px; opacity: 0.8; }<br /> .mw-parser-output h5::after { width: 45%; height: 1px; opacity: 0.7; }<br /> .mw-parser-output h6::after { width: 25%; height: 1px; opacity: 0.6; }<br /> <br /> #personal h2,<br /> #personal .header-avatar { overflow: visible; }<br /> <br /> /* === 9. Links === */<br /> .mw-parser-output a,<br /> #catlinks a { color: var(--link); text-decoration: none; }<br /> .mw-parser-output a:visited { color: var(--link); }<br /> .mw-parser-output a:hover { text-decoration: underline; text-underline-offset: 3px; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: var(--link-new); }<br /> <br /> /* === 10. Code === */<br /> code {<br /> background-color: var(--paper-sunk);<br /> color: var(--ink);<br /> padding: 2px 6px;<br /> border-radius: var(--radius-xs);<br /> font-family: var(--font-mono);<br /> font-size: 13px;<br /> }<br /> pre {<br /> position: relative;<br /> background-color: var(--paper-sunk) !important;<br /> color: var(--ink);<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius-none);<br /> padding: var(--space-4) !important;<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> line-height: 1.6;<br /> overflow-x: auto;<br /> }<br /> <br /> /* === 11. Tables (override Common.css's solid deep-green header row and zebra striping) === */<br /> .mw-parser-output table.wikitable {<br /> width: auto;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> border-radius: var(--radius-none);<br /> box-shadow: none;<br /> overflow: visible;<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> }<br /> .mw-parser-output table.wikitable &gt; * &gt; tr &gt; th,<br /> .mw-parser-output table.wikitable &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> .mw-parser-output table.wikitable &gt; * &gt; tr &gt; td,<br /> .mw-parser-output table.wikitable &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> .mw-parser-output table.wikitable &gt; tbody &gt; tr:nth-of-type(even) { background: transparent; }<br /> .mw-parser-output table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> .mw-parser-output table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); color: var(--ink); }<br /> <br /> /* === 12. Category bar and footer === */<br /> #catlinks {<br /> background-color: var(--paper-sunk);<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-none);<br /> padding: var(--space-3) var(--space-4);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> .mw-footer {<br /> background-color: var(--paper-sunk);<br /> color: var(--ink-muted);<br /> border-top: 1px solid var(--rule);<br /> border-radius: var(--radius-none);<br /> margin-top: var(--space-12);<br /> padding: var(--space-6) var(--space-8);<br /> font-size: 13px;<br /> }<br /> .mw-footer a { color: var(--ink-muted); }<br /> .mw-footer-container { background: transparent; }<br /> <br /> /* === 13. Pink from Common.css (temporary override; better to fix Common.css itself later) === */<br /> textarea:hover,<br /> textarea:focus-visible { border-color: var(--accent) !important; box-shadow: none !important; }<br /> .navbox th, .navbox-title { background: var(--accent-tint) !important; color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk) !important; }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper) !important; }<br /> .navbox-even { background: var(--paper) !important; }<br /> .repost-circle, .repost-circle a.external { color: var(--accent) !important; border-color: var(--accent) !important; }<br /> <br /> /* === 14. Mobile (≤850px) === */<br /> @media screen and (max-width: 850px) {<br /> #mw-content { padding: var(--space-4); }<br /> <br /> /* Restore Timeless mobile nav (in case global rules interfere) */<br /> #mw-mf-page-left, .dropdown, .dropdown-active,<br /> #mw-related-navigation,<br /> #site-tools, #personal {<br /> height: auto !important;<br /> max-height: none !important;<br /> overflow: visible !important;<br /> }<br /> <br /> /* Cap the logo size so it can't blow up when the sidebar renders incorrectly */<br /> #p-logo img {<br /> max-width: 180px !important;<br /> width: auto !important;<br /> height: auto !important;<br /> }<br /> <br /> .dropdown .mw-portlet-body,<br /> .dropdown.dropdown-active .mw-portlet-body {<br /> display: block !important;<br /> height: auto !important;<br /> max-height: 70vh !important;<br /> overflow-y: auto !important;<br /> background-color: var(--paper-raised) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius-none) !important;<br /> box-shadow: none !important;<br /> z-index: 9999 !important;<br /> position: relative !important;<br /> }<br /> <br /> .dropdown-toggle, #ca-more, .mw-ui-icon {<br /> position: relative !important;<br /> z-index: 9999 !important;<br /> }<br /> <br /> /* Hide the empty sidebar/portlet shells */<br /> .sidebar-chunk:empty,<br /> .mw-portlet:empty,<br /> .mw-portlet:not(:has(li)):not(:has(a)) {<br /> display: none !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> background: none !important;<br /> }<br /> <br /> #mw-content-block .sidebar-chunk {<br /> border: none !important;<br /> box-shadow: none !important;<br /> background: transparent !important;<br /> padding: 0 !important;<br /> }<br /> <br /> #mw-content-block { background: transparent !important; }<br /> <br /> .mw-parser-output table.wikitable {<br /> display: block;<br /> overflow-x: auto;<br /> white-space: normal;<br /> }<br /> }<br /> <br /> /* === 15. Reading progress bar and copy button === */<br /> #reading-progress-container {<br /> position: fixed;<br /> left: 0;<br /> bottom: 0;<br /> width: 100%;<br /> height: 3px;<br /> background: var(--rule);<br /> z-index: 9999;<br /> pointer-events: none;<br /> }<br /> #reading-progress-bar {<br /> height: 100%;<br /> width: 0;<br /> background: var(--accent-fill);<br /> }<br /> .code-copy-btn {<br /> position: absolute;<br /> top: 8px;<br /> right: 8px;<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 500;<br /> letter-spacing: 0.04em;<br /> padding: 4px 10px;<br /> color: var(--on-accent);<br /> background: var(--accent-fill);<br /> border: none;<br /> border-radius: var(--radius-sm);<br /> cursor: pointer;<br /> opacity: 0;<br /> transition: opacity 0.2s ease;<br /> }<br /> pre:hover .code-copy-btn,<br /> .code-copy-btn:focus-visible { opacity: 1; }<br /> <br /> @media (prefers-reduced-motion: reduce) {<br /> * { transition: none !important; animation: none !important; }<br /> }<br /> &lt;/style&gt;<br /> &lt;script&gt;<br /> /**<br /> * HUIJIA FUN - UI ENHANCEMENTS (v5.0)<br /> * Kept: bottom reading progress bar, code copy button<br /> * Removed: scroll fade-ins (headings started transparent and vanished if the script failed)<br /> */<br /> (function () {<br /> &quot;use strict&quot;;<br /> if (window.__hjThemeLoaded) return; /* don't run twice when a page includes the template twice */<br /> window.__hjThemeLoaded = true;<br /> <br /> var LABEL = { copy: &quot;Copy&quot;, done: &quot;Copied&quot;, fail: &quot;Copy failed&quot; };<br /> <br /> function initProgressBar() {<br /> if (document.getElementById(&quot;reading-progress-container&quot;)) return;<br /> var container = document.createElement(&quot;div&quot;);<br /> container.id = &quot;reading-progress-container&quot;;<br /> var bar = document.createElement(&quot;div&quot;);<br /> bar.id = &quot;reading-progress-bar&quot;;<br /> container.appendChild(bar);<br /> document.body.appendChild(container);<br /> <br /> var ticking = false;<br /> function update() {<br /> var top = window.pageYOffset || document.documentElement.scrollTop;<br /> var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;<br /> bar.style.width = (height &gt; 0 ? (top / height) * 100 : 0) + &quot;%&quot;;<br /> ticking = false;<br /> }<br /> window.addEventListener(&quot;scroll&quot;, function () {<br /> if (!ticking) { ticking = true; window.requestAnimationFrame(update); }<br /> }, { passive: true });<br /> update();<br /> }<br /> <br /> function initCopyButtons() {<br /> document.querySelectorAll(&quot;#mw-content pre&quot;).forEach(function (block) {<br /> if (block.querySelector(&quot;.code-copy-btn&quot;)) return;<br /> var btn = document.createElement(&quot;button&quot;);<br /> btn.type = &quot;button&quot;;<br /> btn.className = &quot;code-copy-btn&quot;;<br /> btn.textContent = LABEL.copy;<br /> btn.addEventListener(&quot;click&quot;, function () {<br /> var clone = block.cloneNode(true);<br /> var own = clone.querySelector(&quot;.code-copy-btn&quot;);<br /> if (own) own.remove();<br /> var text = clone.textContent.trim();<br /> var done = function (label) {<br /> btn.textContent = label;<br /> setTimeout(function () { btn.textContent = LABEL.copy; }, 2000);<br /> };<br /> if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) {<br /> navigator.clipboard.writeText(text).then(<br /> function () { done(LABEL.done); },<br /> function () { done(LABEL.fail); }<br /> );<br /> } else {<br /> done(LABEL.fail);<br /> }<br /> });<br /> block.appendChild(btn);<br /> });<br /> }<br /> <br /> function init() {<br /> initProgressBar();<br /> initCopyButtons();<br /> }<br /> <br /> if (document.readyState === &quot;loading&quot;) {<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, init);<br /> } else {<br /> init();<br /> }<br /> })();<br /> &lt;/script&gt;<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;&lt;noinclude&gt;{{Theme-HJ}}<br /> ==Description==<br /> '''Theme-HJ''' is the theme for HUIJIA FUN's Archive Zone and the site-wide default pages, built strictly on the VGR Design System. Its features: a cool, green-tinted grey paper ground, a &quot;Huijia Green&quot; accent, square corners and no shadows; the content card carries a dot pattern, and headings are set in ink green on thin green-grey rules: full width under level-1 and level-2 headings (level 2 also carries the Archive Zone mark ■), fading out to the right and getting shorter at each level below.<br /> <br /> ==Origin==<br /> Author: [[User:PlurimodSU|Marina Malinti]]<br /> <br /> ===Note===<br /> To use this theme on a page, simply add the following code directly to the page's source code:<br /> &lt;pre&gt;{{Theme-HJ}}&lt;/pre&gt;<br /> <br /> ==Test==<br /> A body paragraph with an [[Main Page|internal link]], a [[Nonexistent Page|red link]] and some &lt;code&gt;inline code&lt;/code&gt;. ''English italic stays italic; 中文不会被压斜。''<br /> <br /> ===Subheading 3===<br /> ====Subheading 4====<br /> =====Subheading 5=====<br /> ======Subheading 6======<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! Event !! S.C. !! O.<br /> |-<br /> | Sample event A || 1999 || 0<br /> |-<br /> | Sample event B || 2021 || 22<br /> |}<br /> <br /> &lt;pre&gt;{{Theme-HJ}}&lt;/pre&gt;<br /> <br /> ==Test 2==<br /> ===Subheading 3===<br /> ====Subheading 4====<br /> =====Subheading 5=====<br /> ======Subheading 6======<br /> [[Category:Template-Theme]]<br /> &lt;/noinclude&gt;</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.css&diff=197 MediaWiki:Common.css 2026-10-13T16:35:17Z <p>PlurimodSU: Sync with zh: move page components into section 8 (title block, rec-* cards, chapter track, Coming Soon) driven by component tokens with Archive Zone defaults; .vgr-demo exclusion for doc examples</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)<br /> * Design language: VGR Design System - v2<br /> *<br /> * v2: Main Page cards, comments and profile pages are written from scratch for this site;<br /> * all pink is gone; no resources are loaded from other wikis, and no other site<br /> * is named in these comments.<br /> *<br /> * Attribution:<br /> * - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes<br /> * - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Fonts<br /> * ===================================================================== */<br /> <br /> /* Pre-Diphic Mono: the in-world language of the VGR series.<br /> The font file lives on huijia.fun. Browsers only load a cross-origin font when the server<br /> sends an Access-Control-Allow-Origin header, so /fonts/ on huijia.fun must allow<br /> https://en.huijia.fun (or upload the same file under en.huijia.fun/fonts/ and point here). */<br /> @font-face {<br /> font-family: &quot;Pre-Diphic Mono&quot;;<br /> src: url(&quot;https://huijia.fun/fonts/PreDiphicMono-1.1.woff2&quot;) format(&quot;woff2&quot;);<br /> font-display: swap;<br /> }<br /> /* !important: theme templates set fonts with !important on sidebars, headings, tables, etc.; without it .pd loses */<br /> .pd {<br /> font-family: &quot;Pre-Diphic Mono&quot;, sans-serif !important;<br /> font-feature-settings: &quot;rlig&quot; 1, &quot;ccmp&quot; 1 !important;<br /> line-height: 1;<br /> }<br /> <br /> /* {{PD}} vertical text: Module:PreDiphic splits the text into fixed-length columns (.pd-col);<br /> columns run left to right and wrap to a new row at the right edge of the content, no scrollbar */<br /> .pd-cols {<br /> display: inline-flex;<br /> flex-wrap: wrap;<br /> align-items: flex-start;<br /> vertical-align: top;<br /> max-width: 100%;<br /> column-gap: 0.25em;<br /> row-gap: 0.75em;<br /> }<br /> /* Each column stays within the visible window height (minus header and margins); the<br /> height parameter overrides this cap. 100svh = visible height with the mobile address bar<br /> shown, matching the column logic in Common.js; browsers without svh fall back to 100vh. */<br /> .pd-col {<br /> writing-mode: vertical-lr;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Single vertical span (the typer page's &quot;Copy as HTML&quot; output): top-aligned, within window height */<br /> .pd-v {<br /> writing-mode: vertical-lr;<br /> vertical-align: top;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Huiwen Mincho: work titles and chapter titles (--font-display).<br /> The file name is percent-encoded so this file stays ASCII-only. */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule<br /> never took effect. Kept now that it is fixed; delete it once no page uses it. */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a<br /> Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System<br /> no longer uses. If a page still needs one, upload the font file to this site first. */<br /> <br /> /* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.<br /> The loli.net mirror keeps them loading for visitors in mainland China. */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens (site default = Archive Zone &quot;paper&quot; palette)<br /> * Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* Primary-color variables read by the skin and extensions: all point to Huijia Green */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. General utilities<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* Custom link: underline on hover */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* Two-column layouts<br /> In the old #left-column-0.3 the &quot;.&quot; was read as a class selector, so those rules never<br /> matched. The escaped form below matches id=&quot;left-column-0.3&quot; without changing any page. */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* Main Page: hide the page title, page tabs, variant menu and category bar */<br /> body.page-Main_Page #firstHeading,<br /> body.page-Main_Page #siteSub,<br /> body.page-Main_Page li#ca-talk,<br /> body.page-Main_Page li#ca-watch,<br /> body.page-Main_Page li#ca-unwatch,<br /> body.page-Main_Page li#ca-history,<br /> body.page-Main_Page li#ca-nstab-main,<br /> body.page-Main_Page li#ca-viewsource,<br /> body.page-Main_Page li#ca-view,<br /> body.page-Main_Page #p-variants,<br /> body.page-Main_Page #p-variants-desktop-label,<br /> body.page-Main_Page #catlinks-sidebar,<br /> body.page-Main_Page #mw-normal-catlinks { display: none !important; }<br /> <br /> /* Scroll-to-top / bottom buttons */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* Repost badge */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Spoiler blackout (adapted from Moegirlpedia)<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Info boxes<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* Upload page: info box layout fix */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. Tables<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* Light green table (old class name kept, now reads the variables) */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar (adapted from Wikipedia)<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;: &quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; \00B7 &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot; (&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;)&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. Page components (VGR Design System)<br /> * Usable on any page; their look is set by the &quot;component tokens&quot; below.<br /> * The defaults here are the Archive Zone (paper) look; Theme-STR and Theme-VGR only reset these tokens,<br /> * so the same markup automatically takes on each zone's look under a different theme.<br /> *<br /> * Components:<br /> * .vgr-title-block (-cn / -en / -sub / -tagline) hub title block; pages with one hide the default title and TOC<br /> * #rec-anchors / .rec-anchors anchor bar at the top<br /> * .rec-section section (only adjusts heading spacing)<br /> * .rec-grid + .rec-grid-2 / .rec-grid-4 entry grid<br /> * .rec-card (.rec-card-title) / .rec-link card with description / compact link<br /> * .rec-subhead small label above a group of cards (not a real heading, not in the TOC)<br /> * .rec-intro epigraph or series introduction (Kai script, left rule)<br /> * .novel-track / .novel-chap (.chap-no / -pd / -title / -desc, .chap-upcoming) horizontal chapter track<br /> * .rec-soon Coming Soon placeholder<br /> * .work-full cover image floated right<br /> * The old mini-block / mini-block-list / mini-block-title classes still work.<br /> * ===================================================================== */<br /> <br /> /* ---------- 8.0 Component tokens (defaults = Archive Zone) ---------- */<br /> :root {<br /> --c-radius: 0; /* corners of cards, anchor buttons and the title block */<br /> --c-mark: &quot;■&quot;; /* zone mark: Archive ■ / Worldview ◈ / Canon ∴ */<br /> --c-label-font: var(--font-sans); /* small labels (rec-subhead, chapter numbers, Coming Soon) */<br /> --c-label-size: 12px;<br /> --c-label-weight: 700;<br /> --c-label-spacing: 0.12em;<br /> --c-soon-style: normal; /* font style of Coming Soon (italic in the Canon Zone) */<br /> --c-intro-border: 3px solid var(--accent); /* left rule of the epigraph */<br /> --c-title-bg: radial-gradient(var(--dot) 0px, transparent 1px) 0 0 / 20px 20px, var(--paper-sunk);<br /> --c-title-top: 2px solid var(--accent); /* top rule of the title block */<br /> --c-title-shadow: none; /* title block lintel (Canon Zone only) */<br /> --c-title-ink: var(--ink);<br /> --c-title-en-ink: var(--accent);<br /> --c-chap-bg: var(--paper-raised); /* chapter card background */<br /> --c-chap-bg-hover: var(--paper-sunk);<br /> --c-chap-top: 2px solid var(--accent);<br /> --c-chap-lintel: transparent; /* second thin lintel line on chapter cards (Canon Zone only) */<br /> }<br /> <br /> /* ---------- 8.1 Legacy class names: mini-block (still used by Main Page subtemplates; delete once everything uses rec-*) ---------- */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> /* ---------- 8.2 Title block: pages that have one hide the default title and TOC (screen readers still read the title)<br /> A title block inside .vgr-demo (examples on theme doc pages) does not trigger the hiding ---------- */<br /> .mw-body:has(.vgr-title-block:not(.vgr-demo *)) h1.firstHeading,<br /> #content:has(.vgr-title-block:not(.vgr-demo *)) h1.firstHeading {<br /> position: absolute !important;<br /> width: 1px; height: 1px;<br /> overflow: hidden;<br /> clip-path: inset(50%);<br /> white-space: nowrap;<br /> margin: 0 !important; padding: 0 !important;<br /> }<br /> .mw-body:has(.vgr-title-block:not(.vgr-demo *)) #toc,<br /> .mw-body:has(.vgr-title-block:not(.vgr-demo *)) .toc,<br /> #content:has(.vgr-title-block:not(.vgr-demo *)) #toc,<br /> #content:has(.vgr-title-block:not(.vgr-demo *)) .toc { display: none !important; }<br /> <br /> .vgr-title-block {<br /> box-sizing: border-box;<br /> text-align: center;<br /> padding: 48px 16px 32px;<br /> margin: 0 0 24px;<br /> border: 1px solid var(--rule);<br /> border-top: var(--c-title-top);<br /> border-radius: var(--c-radius);<br /> box-shadow: var(--c-title-shadow);<br /> background: var(--c-title-bg);<br /> }<br /> .vgr-title-cn {<br /> font-family: var(--font-display);<br /> font-size: clamp(34px, 6vw, 58px);<br /> font-weight: 600;<br /> line-height: 1.5;<br /> letter-spacing: 0.12em;<br /> color: var(--c-title-ink);<br /> margin-bottom: 0.3em;<br /> text-wrap: balance;<br /> }<br /> .vgr-title-en {<br /> font-family: var(--font-latin, &quot;Cormorant Garamond&quot;), &quot;Noto Serif SC&quot;, serif;<br /> font-size: 18px;<br /> font-weight: 500;<br /> letter-spacing: 0.22em;<br /> text-transform: uppercase;<br /> color: var(--c-title-en-ink);<br /> margin-bottom: 1em;<br /> }<br /> .vgr-title-sub {<br /> font-family: var(--font-body, var(--font-serif));<br /> font-size: 16px;<br /> color: var(--ink-muted);<br /> letter-spacing: 0.04em;<br /> }<br /> .vgr-title-sub a:not(.new) {<br /> color: var(--link) !important;<br /> text-decoration: none !important;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> .vgr-title-sub a:not(.new):hover { border-bottom-color: var(--link); }<br /> .vgr-title-sub i { font-style: italic; color: var(--ink); }<br /> .vgr-title-tagline {<br /> font-family: var(--font-scripture, &quot;LXGW WenKai Screen&quot;, KaiTi, serif);<br /> font-size: 15px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> letter-spacing: 0.04em;<br /> max-width: 36em;<br /> margin: 24px auto 0;<br /> }<br /> /* Divider: &quot;— zone mark —&quot; */<br /> .vgr-title-tagline::before {<br /> content: var(--c-mark);<br /> display: block;<br /> width: 12em;<br /> margin: 0 auto 16px;<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> background:<br /> linear-gradient(var(--rule-strong), var(--rule-strong)) left center / calc(50% - 16px) 1px no-repeat,<br /> linear-gradient(var(--rule-strong), var(--rule-strong)) right center / calc(50% - 16px) 1px no-repeat;<br /> }<br /> <br /> /* ---------- 8.3 Anchor bar ---------- */<br /> #rec-anchors, .rec-anchors {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> justify-content: center;<br /> margin: 16px 0 32px;<br /> }<br /> /* MediaWiki wraps the lines of links in a &lt;p&gt;; take that layer out of layout so the gap applies to each link */<br /> #rec-anchors &gt; p, .rec-anchors &gt; p { display: contents; }<br /> #rec-anchors a, .rec-anchors a {<br /> display: inline-block;<br /> padding: 5px 16px;<br /> border: 1px solid var(--rule-strong);<br /> border-radius: var(--c-radius);<br /> color: var(--ink) !important;<br /> font-family: var(--font-body, var(--font-serif));<br /> font-size: 15px;<br /> letter-spacing: 0.06em;<br /> text-decoration: none !important;<br /> background: transparent;<br /> transition: background-color 0.2s ease, border-color 0.2s ease;<br /> }<br /> #rec-anchors a:hover, .rec-anchors a:hover {<br /> background: var(--accent-tint);<br /> border-color: var(--accent);<br /> }<br /> <br /> /* ---------- 8.4 Sections: since MediaWiki 1.43 headings are wrapped in .mw-heading, so both structures are covered ---------- */<br /> .rec-section &gt; h2,<br /> .rec-section &gt; .mw-heading2 { margin-top: 48px !important; }<br /> <br /> /* ---------- 8.5 Entry grid and cards ---------- */<br /> .rec-grid,<br /> .rec-grid.mini-block-list,<br /> .rec-grid.mini-block-container {<br /> display: grid;<br /> gap: 12px;<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* Card with description: one line on the left. Selectors include .mini-block to beat the legacy styles above */<br /> .rec-card,<br /> .mini-block.rec-card {<br /> box-sizing: border-box;<br /> width: auto;<br /> min-width: 0;<br /> margin: 0;<br /> padding: 8px 0 8px 14px;<br /> background: none;<br /> border: none;<br /> border-left: 2px solid var(--rule-strong);<br /> border-radius: 0;<br /> box-shadow: none;<br /> transition: border-color 0.2s ease;<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title,<br /> .rec-card .mini-block-title {<br /> display: block;<br /> font-family: var(--font-serif);<br /> font-size: 17px;<br /> font-weight: 600;<br /> line-height: 1.5;<br /> letter-spacing: 0.04em;<br /> margin-bottom: 4px;<br /> }<br /> .rec-card-title a:not(.new),<br /> .rec-card .mini-block-title a:not(.new) { color: var(--ink) !important; }<br /> .rec-card-title a:not(.new):hover,<br /> .rec-card .mini-block-title a:not(.new):hover { color: var(--accent) !important; }<br /> /* Themes color body text through #mw-content p, so this needs the same specificity to turn muted */<br /> .rec-card, .rec-card p,<br /> #mw-content .rec-card, #mw-content .rec-card p {<br /> font-size: 15px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> }<br /> .rec-card p { margin: 0; }<br /> <br /> /* Compact link */<br /> .rec-link,<br /> .mini-block.rec-link {<br /> box-sizing: border-box;<br /> width: auto;<br /> min-width: 0;<br /> margin: 0;<br /> padding: 7px 0 7px 14px;<br /> background: none;<br /> border: none;<br /> border-left: 2px solid var(--rule);<br /> border-radius: 0;<br /> box-shadow: none;<br /> transition: border-color 0.2s ease;<br /> }<br /> .rec-link a:not(.new) { color: var(--ink) !important; }<br /> .rec-link:hover { border-left-color: var(--accent); }<br /> .rec-link p, .rec-card .mini-block-title + p { margin: 0; }<br /> <br /> /* ---------- 8.6 Small labels and epigraphs ---------- */<br /> .rec-subhead {<br /> font-family: var(--c-label-font);<br /> font-size: var(--c-label-size);<br /> font-weight: var(--c-label-weight);<br /> letter-spacing: var(--c-label-spacing);<br /> text-transform: uppercase;<br /> color: var(--accent);<br /> margin: 24px 0 8px;<br /> }<br /> .rec-intro,<br /> #mw-content .rec-intro {<br /> font-family: var(--font-scripture, &quot;LXGW WenKai Screen&quot;, KaiTi, serif);<br /> font-size: 16px;<br /> line-height: 1.9;<br /> color: var(--ink);<br /> text-align: left;<br /> margin: 8px 0 24px;<br /> padding: 4px 0 4px 16px;<br /> border-left: var(--c-intro-border);<br /> }<br /> <br /> /* ---------- 8.7 Horizontal chapter track ---------- */<br /> .novel-track {<br /> display: flex;<br /> gap: 12px;<br /> overflow-x: auto;<br /> padding: 4px 2px 16px;<br /> scroll-snap-type: x mandatory;<br /> -webkit-overflow-scrolling: touch;<br /> scrollbar-color: var(--rule-strong) var(--paper-sunk);<br /> }<br /> .novel-track::-webkit-scrollbar { height: 6px; }<br /> .novel-track::-webkit-scrollbar-track { background: var(--paper-sunk); }<br /> .novel-track::-webkit-scrollbar-thumb { background: var(--rule-strong); }<br /> .novel-track::-webkit-scrollbar-thumb:hover { background: var(--accent); }<br /> <br /> /* Chapter card: the background and the lintel gap share --c-chap-bg and change together on hover, so no seam shows between the lines */<br /> .novel-chap {<br /> --chap-bg: var(--c-chap-bg);<br /> flex: 0 0 232px;<br /> scroll-snap-align: start;<br /> display: flex;<br /> flex-direction: column;<br /> box-sizing: border-box;<br /> padding: 16px;<br /> background: var(--chap-bg);<br /> border: 1px solid var(--rule);<br /> border-top: var(--c-chap-top);<br /> border-radius: var(--c-radius);<br /> box-shadow:<br /> inset 0 4px 0 var(--chap-bg),<br /> inset 0 5px 0 var(--c-chap-lintel);<br /> transition: border-color 0.2s ease;<br /> }<br /> .novel-chap:hover {<br /> --chap-bg: var(--c-chap-bg-hover);<br /> border-color: var(--rule-strong);<br /> border-top-color: var(--accent);<br /> }<br /> .novel-chap .chap-no {<br /> font-family: var(--c-label-font);<br /> font-size: var(--c-label-size);<br /> font-weight: var(--c-label-weight);<br /> letter-spacing: var(--c-label-spacing);<br /> color: var(--accent);<br /> margin: 4px 0 6px;<br /> }<br /> .novel-chap .chap-pd {<br /> font-family: var(--font-latin, &quot;Cormorant Garamond&quot;), &quot;Noto Serif SC&quot;, serif;<br /> font-style: italic;<br /> font-size: 15px;<br /> color: var(--ink-muted);<br /> }<br /> .novel-chap .chap-title {<br /> font-family: var(--font-display);<br /> font-size: 19px;<br /> font-weight: 600;<br /> line-height: 1.45;<br /> letter-spacing: 0.04em;<br /> color: var(--ink);<br /> margin: 2px 0 8px;<br /> }<br /> .novel-chap .chap-title a:not(.new) { color: var(--ink) !important; }<br /> .novel-chap .chap-title a:not(.new):hover { color: var(--accent) !important; }<br /> .novel-chap .chap-desc {<br /> font-size: 14px;<br /> line-height: 1.75;<br /> color: var(--ink-muted);<br /> }<br /> .novel-chap.chap-upcoming,<br /> .novel-chap.chap-upcoming:hover {<br /> border: 1px dashed var(--rule-strong);<br /> box-shadow: none;<br /> background: transparent;<br /> justify-content: center;<br /> align-items: center;<br /> text-align: center;<br /> color: var(--ink-muted);<br /> }<br /> <br /> /* ---------- 8.8 Coming Soon placeholder: zone mark above ---------- */<br /> .rec-soon {<br /> border: 1px dashed var(--rule-strong);<br /> border-radius: var(--c-radius);<br /> font-family: var(--c-label-font);<br /> font-style: var(--c-soon-style);<br /> font-size: 16px;<br /> letter-spacing: 0.1em;<br /> padding: 28px;<br /> text-align: center;<br /> color: var(--ink-muted);<br /> }<br /> .rec-soon::before {<br /> content: var(--c-mark);<br /> display: block;<br /> font-family: var(--font-sans);<br /> font-style: normal;<br /> font-size: 12px;<br /> color: var(--accent);<br /> margin-bottom: 8px;<br /> }<br /> <br /> /* ---------- 8.9 Cover image floated right ---------- */<br /> .work-full { overflow: hidden; }<br /> .work-full #image { float: right; width: 200px; margin: 0 0 10px 16px; }<br /> <br /> /* ---------- 8.10 Phones (≤850px) ---------- */<br /> @media screen and (max-width: 850px) {<br /> .vgr-title-block { padding: 32px 12px 24px; }<br /> .vgr-title-en { font-size: 15px; letter-spacing: 0.16em; }<br /> .novel-chap { flex-basis: 78%; }<br /> .work-full #image { float: none; width: 100%; max-width: 280px; margin: 0 0 12px; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. Forms, notifications, profile pages<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. Comments (FlowThread): site colors only; layout is left to the extension<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 11. Notice box {{Notice}}: .vgr-notice<br /> * All colors read the theme variables, so it works under Theme-HJ / Theme-STR / Theme-VGR.<br /> * Default = zone color; is-warning = pending / warning; is-danger = spoiler / error.<br /> * There is always a text label on the left, so color is never the only signal.<br /> * ===================================================================== */<br /> .vgr-notice {<br /> --notice-c: var(--zone-accent, var(--accent));<br /> display: grid;<br /> grid-template-columns: auto minmax(0, 1fr);<br /> gap: 6px 16px;<br /> box-sizing: border-box;<br /> max-width: 100%;<br /> margin: 1em 0;<br /> padding: 12px 16px;<br /> background: var(--paper-sunk);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--notice-c);<br /> border-radius: 0;<br /> }<br /> /* Amber: mixed with the current text color, so it darkens on light themes and lightens on dark ones */<br /> .vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }<br /> /* Red: each theme's red-link color */<br /> .vgr-notice.is-danger { --notice-c: var(--link-new); }<br /> <br /> .vgr-notice-side {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 6px;<br /> min-width: 3em;<br /> padding-top: 3px;<br /> }<br /> .vgr-notice-tag {<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> line-height: 1.4;<br /> white-space: nowrap;<br /> color: var(--notice-c);<br /> }<br /> .vgr-notice-icon { line-height: 1; color: var(--notice-c); }<br /> .vgr-notice-icon .md,<br /> .vgr-notice-icon .md-lg,<br /> .vgr-notice-icon .md-md,<br /> .vgr-notice-icon .material-icons { font-size: 26px; }<br /> .vgr-notice-icon img { max-width: 32px; height: auto; }<br /> <br /> .vgr-notice-main { min-width: 0; }<br /> .vgr-notice-title {<br /> font-family: var(--font-serif);<br /> font-size: 16px;<br /> font-weight: 600;<br /> line-height: 1.6;<br /> color: var(--ink);<br /> }<br /> #mw-content .vgr-notice-body,<br /> #mw-content .vgr-notice-body p,<br /> .vgr-notice-body,<br /> .vgr-notice-body p {<br /> margin: 0;<br /> font-size: 14px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> }<br /> .vgr-notice-body &gt; p + p { margin-top: 0.5em; }<br /> .vgr-notice-below {<br /> grid-column: 1 / -1;<br /> margin-top: 4px;<br /> padding-top: 8px;<br /> border-top: 1px solid var(--rule);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 12. Infobox {{Infobox}}: .vgr-infobox<br /> * The fact table on the right of an article. All colors read the theme variables;<br /> * square corners, no shadow; full width on phones.<br /> * ===================================================================== */<br /> table.vgr-infobox {<br /> float: right;<br /> clear: right;<br /> width: 300px;<br /> margin: 0 0 1em 1.5em;<br /> border-collapse: collapse;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--zone-accent, var(--accent));<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> line-height: 1.6;<br /> }<br /> table.vgr-infobox th.vgr-infobox-title {<br /> padding: 10px 12px;<br /> text-align: center;<br /> font-family: var(--font-serif);<br /> font-size: 18px;<br /> font-weight: 600;<br /> letter-spacing: 0.04em;<br /> color: var(--ink);<br /> background: var(--accent-tint);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td {<br /> padding: 12px;<br /> text-align: center;<br /> }<br /> table.vgr-infobox .vgr-infobox-media img { max-width: 100%; height: auto; }<br /> .vgr-infobox-desc {<br /> margin-top: 6px;<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> table.vgr-infobox th[scope=&quot;row&quot;] {<br /> width: 5.5em;<br /> padding: 7px 8px 7px 12px;<br /> text-align: left;<br /> vertical-align: top;<br /> white-space: nowrap;<br /> font-size: 13px;<br /> font-weight: 600;<br /> color: var(--ink-muted);<br /> background: transparent;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox td {<br /> padding: 7px 12px 7px 8px;<br /> vertical-align: top;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td { border-top: none; }<br /> table.vgr-infobox td p { margin: 0; }<br /> /* {{Infobox2}}: group subheadings */<br /> table.vgr-infobox .vgr-infobox-group th {<br /> padding: 6px 12px;<br /> text-align: left;<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> color: var(--zone-accent, var(--accent));<br /> background: var(--paper-sunk);<br /> border-top: 1px solid var(--rule);<br /> }<br /> @media screen and (max-width: 850px) {<br /> table.vgr-infobox {<br /> float: none;<br /> width: 100%;<br /> margin: 0 0 1.5em;<br /> }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 13. Click-to-load video and audio (video and audio widgets): .vgr-media<br /> * Before the click there is only a button and no request is made; the player is created on click.<br /> * ===================================================================== */<br /> .vgr-media-load {<br /> display: inline-flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0;<br /> padding: 8px 16px;<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> letter-spacing: 0.04em;<br /> color: var(--on-accent);<br /> background: var(--accent-fill);<br /> border: none;<br /> border-radius: var(--radius-sm, 2px);<br /> cursor: pointer;<br /> transition: background-color 0.15s ease;<br /> }<br /> .vgr-media-load:hover { background: #3B7E3D; }<br /> .vgr-media-load:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> /* Play triangle drawn with borders, no icon font needed */<br /> .vgr-media-icon {<br /> width: 0;<br /> height: 0;<br /> border-style: solid;<br /> border-width: 6px 0 6px 10px;<br /> border-color: transparent transparent transparent currentColor;<br /> }<br /> <br /> /* Video: holds a 16:9 slot before loading; after loading it uses the video's own ratio */<br /> .vgr-media-video {<br /> box-sizing: border-box;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> aspect-ratio: 16 / 9;<br /> margin: 0 0 1em;<br /> background: var(--paper-sunk);<br /> border: 1px solid var(--rule);<br /> }<br /> .vgr-media-video.is-loaded {<br /> display: block;<br /> aspect-ratio: auto;<br /> background: #000;<br /> border: none;<br /> }<br /> .vgr-media-video video {<br /> display: block;<br /> width: 100%;<br /> height: auto;<br /> max-height: 80vh;<br /> }<br /> <br /> /* Audio: small inline button; a caption can follow it directly */<br /> .vgr-media-audio {<br /> display: inline-flex;<br /> align-items: center;<br /> vertical-align: middle;<br /> max-width: 100%;<br /> margin: 4px 8px 4px 0;<br /> }<br /> .vgr-media-audio .vgr-media-load {<br /> padding: 5px 12px;<br /> font-size: 13px;<br /> }<br /> .vgr-media-audio .vgr-media-icon { border-width: 5px 0 5px 8px; }<br /> .vgr-media-audio audio {<br /> height: 36px;<br /> max-width: 100%;<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Copyrightwarning2&diff=196 MediaWiki:Copyrightwarning2 2026-10-13T05:30:54Z <p>PlurimodSU: Create the page</p> <hr /> <div>By saving your edit, you agree that your contribution is released by default under the [https://creativecommons.org/licenses/by-sa/3.0/ CC BY-SA 3.0] license: anyone may reuse it if they credit the source and share alike.&lt;br&gt;Only submit work that is your own, or that comes from the public domain or a compatible free license. Do not submit copyrighted work without permission, or the names, photos or recordings of real people without their consent. Questions: [mailto:a@huijia.fun a@huijia.fun].</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.css&diff=195 MediaWiki:Common.css 2026-10-13T01:07:10Z <p>PlurimodSU: Refine with respect to Widget:视频 and Widget:音频</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)<br /> * Design language: VGR Design System - v2<br /> *<br /> * v2: Main Page cards, comments and profile pages are written from scratch for this site;<br /> * all pink is gone; no resources are loaded from other wikis, and no other site<br /> * is named in these comments.<br /> *<br /> * Attribution:<br /> * - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes<br /> * - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Fonts<br /> * ===================================================================== */<br /> <br /> /* Pre-Diphic Mono: the in-world language of the VGR series.<br /> The font file lives on huijia.fun. Browsers only load a cross-origin font when the server<br /> sends an Access-Control-Allow-Origin header, so /fonts/ on huijia.fun must allow<br /> https://en.huijia.fun (or upload the same file under en.huijia.fun/fonts/ and point here). */<br /> @font-face {<br /> font-family: &quot;Pre-Diphic Mono&quot;;<br /> src: url(&quot;https://huijia.fun/fonts/PreDiphicMono-1.1.woff2&quot;) format(&quot;woff2&quot;);<br /> font-display: swap;<br /> }<br /> /* !important: theme templates set fonts with !important on sidebars, headings, tables, etc.; without it .pd loses */<br /> .pd {<br /> font-family: &quot;Pre-Diphic Mono&quot;, sans-serif !important;<br /> font-feature-settings: &quot;rlig&quot; 1, &quot;ccmp&quot; 1 !important;<br /> line-height: 1;<br /> }<br /> <br /> /* {{PD}} vertical text: Module:PreDiphic splits the text into fixed-length columns (.pd-col);<br /> columns run left to right and wrap to a new row at the right edge of the content, no scrollbar */<br /> .pd-cols {<br /> display: inline-flex;<br /> flex-wrap: wrap;<br /> align-items: flex-start;<br /> vertical-align: top;<br /> max-width: 100%;<br /> column-gap: 0.25em;<br /> row-gap: 0.75em;<br /> }<br /> /* Each column stays within the visible window height (minus header and margins); the<br /> height parameter overrides this cap. 100svh = visible height with the mobile address bar<br /> shown, matching the column logic in Common.js; browsers without svh fall back to 100vh. */<br /> .pd-col {<br /> writing-mode: vertical-lr;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Single vertical span (the typer page's &quot;Copy as HTML&quot; output): top-aligned, within window height */<br /> .pd-v {<br /> writing-mode: vertical-lr;<br /> vertical-align: top;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Huiwen Mincho: work titles and chapter titles (--font-display).<br /> The file name is percent-encoded so this file stays ASCII-only. */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule<br /> never took effect. Kept now that it is fixed; delete it once no page uses it. */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a<br /> Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System<br /> no longer uses. If a page still needs one, upload the font file to this site first. */<br /> <br /> /* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.<br /> The loli.net mirror keeps them loading for visitors in mainland China. */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens (site default = Archive Zone &quot;paper&quot; palette)<br /> * Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* Primary-color variables read by the skin and extensions: all point to Huijia Green */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. General utilities<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* Custom link: underline on hover */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* Two-column layouts<br /> In the old #left-column-0.3 the &quot;.&quot; was read as a class selector, so those rules never<br /> matched. The escaped form below matches id=&quot;left-column-0.3&quot; without changing any page. */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* Main Page: hide the page title, page tabs, variant menu and category bar */<br /> body.page-Main_Page #firstHeading,<br /> body.page-Main_Page #siteSub,<br /> body.page-Main_Page li#ca-talk,<br /> body.page-Main_Page li#ca-watch,<br /> body.page-Main_Page li#ca-unwatch,<br /> body.page-Main_Page li#ca-history,<br /> body.page-Main_Page li#ca-nstab-main,<br /> body.page-Main_Page li#ca-viewsource,<br /> body.page-Main_Page li#ca-view,<br /> body.page-Main_Page #p-variants,<br /> body.page-Main_Page #p-variants-desktop-label,<br /> body.page-Main_Page #catlinks-sidebar,<br /> body.page-Main_Page #mw-normal-catlinks { display: none !important; }<br /> <br /> /* Scroll-to-top / bottom buttons */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* Repost badge */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Spoiler blackout (adapted from Moegirlpedia)<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Info boxes<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* Upload page: info box layout fix */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. Tables<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* Light green table (old class name kept, now reads the variables) */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar (adapted from Wikipedia)<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;: &quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; \00B7 &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot; (&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;)&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)<br /> * Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.<br /> * ===================================================================== */<br /> .rec-grid {<br /> display: grid;<br /> gap: var(--space-3, 12px);<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> .rec-card {<br /> padding: 12px 16px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }<br /> .rec-card-title a { color: inherit; }<br /> .rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }<br /> .rec-link {<br /> padding: 8px 12px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> transition: border-color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .rec-link a { color: var(--ink); }<br /> .rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* Compatibility layer: the old mini-block class names. Some templates still use them<br /> (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those<br /> templates have moved to rec-card / rec-link. */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. Forms, notifications, profile pages<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. Comments (FlowThread): site colors only; layout is left to the extension<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 11. Notice box {{Notice}}: .vgr-notice<br /> * All colors read the theme variables, so it works under Theme-HJ / Theme-STR / Theme-VGR.<br /> * Default = zone color; is-warning = pending / warning; is-danger = spoiler / error.<br /> * There is always a text label on the left, so color is never the only signal.<br /> * ===================================================================== */<br /> .vgr-notice {<br /> --notice-c: var(--zone-accent, var(--accent));<br /> display: grid;<br /> grid-template-columns: auto minmax(0, 1fr);<br /> gap: 6px 16px;<br /> box-sizing: border-box;<br /> max-width: 100%;<br /> margin: 1em 0;<br /> padding: 12px 16px;<br /> background: var(--paper-sunk);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--notice-c);<br /> border-radius: 0;<br /> }<br /> /* Amber: mixed with the current text color, so it darkens on light themes and lightens on dark ones */<br /> .vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }<br /> /* Red: each theme's red-link color */<br /> .vgr-notice.is-danger { --notice-c: var(--link-new); }<br /> <br /> .vgr-notice-side {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 6px;<br /> min-width: 3em;<br /> padding-top: 3px;<br /> }<br /> .vgr-notice-tag {<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> line-height: 1.4;<br /> white-space: nowrap;<br /> color: var(--notice-c);<br /> }<br /> .vgr-notice-icon { line-height: 1; color: var(--notice-c); }<br /> .vgr-notice-icon .md,<br /> .vgr-notice-icon .md-lg,<br /> .vgr-notice-icon .md-md,<br /> .vgr-notice-icon .material-icons { font-size: 26px; }<br /> .vgr-notice-icon img { max-width: 32px; height: auto; }<br /> <br /> .vgr-notice-main { min-width: 0; }<br /> .vgr-notice-title {<br /> font-family: var(--font-serif);<br /> font-size: 16px;<br /> font-weight: 600;<br /> line-height: 1.6;<br /> color: var(--ink);<br /> }<br /> #mw-content .vgr-notice-body,<br /> #mw-content .vgr-notice-body p,<br /> .vgr-notice-body,<br /> .vgr-notice-body p {<br /> margin: 0;<br /> font-size: 14px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> }<br /> .vgr-notice-body &gt; p + p { margin-top: 0.5em; }<br /> .vgr-notice-below {<br /> grid-column: 1 / -1;<br /> margin-top: 4px;<br /> padding-top: 8px;<br /> border-top: 1px solid var(--rule);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 12. Infobox {{Infobox}}: .vgr-infobox<br /> * The fact table on the right of an article. All colors read the theme variables;<br /> * square corners, no shadow; full width on phones.<br /> * ===================================================================== */<br /> table.vgr-infobox {<br /> float: right;<br /> clear: right;<br /> width: 300px;<br /> margin: 0 0 1em 1.5em;<br /> border-collapse: collapse;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--zone-accent, var(--accent));<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> line-height: 1.6;<br /> }<br /> table.vgr-infobox th.vgr-infobox-title {<br /> padding: 10px 12px;<br /> text-align: center;<br /> font-family: var(--font-serif);<br /> font-size: 18px;<br /> font-weight: 600;<br /> letter-spacing: 0.04em;<br /> color: var(--ink);<br /> background: var(--accent-tint);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td {<br /> padding: 12px;<br /> text-align: center;<br /> }<br /> table.vgr-infobox .vgr-infobox-media img { max-width: 100%; height: auto; }<br /> .vgr-infobox-desc {<br /> margin-top: 6px;<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> table.vgr-infobox th[scope=&quot;row&quot;] {<br /> width: 5.5em;<br /> padding: 7px 8px 7px 12px;<br /> text-align: left;<br /> vertical-align: top;<br /> white-space: nowrap;<br /> font-size: 13px;<br /> font-weight: 600;<br /> color: var(--ink-muted);<br /> background: transparent;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox td {<br /> padding: 7px 12px 7px 8px;<br /> vertical-align: top;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td { border-top: none; }<br /> table.vgr-infobox td p { margin: 0; }<br /> /* {{Infobox2}}: group subheadings */<br /> table.vgr-infobox .vgr-infobox-group th {<br /> padding: 6px 12px;<br /> text-align: left;<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> color: var(--zone-accent, var(--accent));<br /> background: var(--paper-sunk);<br /> border-top: 1px solid var(--rule);<br /> }<br /> @media screen and (max-width: 850px) {<br /> table.vgr-infobox {<br /> float: none;<br /> width: 100%;<br /> margin: 0 0 1.5em;<br /> }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 13. Click-to-load video and audio (video and audio widgets): .vgr-media<br /> * Before the click there is only a button and no request is made; the player is created on click.<br /> * ===================================================================== */<br /> .vgr-media-load {<br /> display: inline-flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0;<br /> padding: 8px 16px;<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> letter-spacing: 0.04em;<br /> color: var(--on-accent);<br /> background: var(--accent-fill);<br /> border: none;<br /> border-radius: var(--radius-sm, 2px);<br /> cursor: pointer;<br /> transition: background-color 0.15s ease;<br /> }<br /> .vgr-media-load:hover { background: #3B7E3D; }<br /> .vgr-media-load:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> /* Play triangle drawn with borders, no icon font needed */<br /> .vgr-media-icon {<br /> width: 0;<br /> height: 0;<br /> border-style: solid;<br /> border-width: 6px 0 6px 10px;<br /> border-color: transparent transparent transparent currentColor;<br /> }<br /> <br /> /* Video: holds a 16:9 slot before loading; after loading it uses the video's own ratio */<br /> .vgr-media-video {<br /> box-sizing: border-box;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> aspect-ratio: 16 / 9;<br /> margin: 0 0 1em;<br /> background: var(--paper-sunk);<br /> border: 1px solid var(--rule);<br /> }<br /> .vgr-media-video.is-loaded {<br /> display: block;<br /> aspect-ratio: auto;<br /> background: #000;<br /> border: none;<br /> }<br /> .vgr-media-video video {<br /> display: block;<br /> width: 100%;<br /> height: auto;<br /> max-height: 80vh;<br /> }<br /> <br /> /* Audio: small inline button; a caption can follow it directly */<br /> .vgr-media-audio {<br /> display: inline-flex;<br /> align-items: center;<br /> vertical-align: middle;<br /> max-width: 100%;<br /> margin: 4px 8px 4px 0;<br /> }<br /> .vgr-media-audio .vgr-media-load {<br /> padding: 5px 12px;<br /> font-size: 13px;<br /> }<br /> .vgr-media-audio .vgr-media-icon { border-width: 5px 0 5px 8px; }<br /> .vgr-media-audio audio {<br /> height: 36px;<br /> max-width: 100%;<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Timeless.css&diff=194 MediaWiki:Timeless.css 2026-10-13T00:22:49Z <p>PlurimodSU: Verdant Green Revelation → The-VGR-Canon</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Timeless.css - v2<br /> * Design language: VGR Design System<br /> *<br /> * Only Timeless-specific fixes live here; styles shared by all skins are in Common.css.<br /> * Organized by block: header / left sidebar / right toolbar / content card / popups and<br /> * extensions / icons.<br /> * When the custom Timeless skin is built, move these blocks into the skin's resources/<br /> * one at a time, deleting each block here once it has moved.<br /> *<br /> * Colors always read the variables from Common.css and the theme templates (--paper, --ink,<br /> * --accent...), never hard-coded values, so everything works under Theme-HJ / Theme-STR /<br /> * Theme-VGR.<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Header<br /> * ===================================================================== */<br /> #mw-header-nav-hack,<br /> #mw-header-hack { box-shadow: none; }<br /> <br /> /* Notification (Echo) popup: the theme templates raise the header to z-index 1000,<br /> so the popup has to sit higher or the header covers it */<br /> div.mw-echo-ui-overlay { z-index: 1100; }<br /> <br /> .oo-ui-clippableElement-clippable.oo-ui-popupWidget-body { max-width: unset !important; }<br /> .oo-ui-popupWidget-popup {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> background-color: var(--paper-raised);<br /> }<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before { border-bottom-color: var(--rule); }<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after { border-bottom-color: var(--paper-raised); }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-head { border-bottom: 1px solid var(--rule); }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-footer { border-top: 1px solid var(--rule); }<br /> .mw-echo-ui-notificationItemWidget {<br /> background-color: transparent;<br /> border-bottom: 1px solid var(--rule);<br /> }<br /> .mw-echo-ui-notificationItemWidget:hover { background-color: var(--accent-tint); }<br /> .mw-echo-ui-notificationItemWidget:focus { box-shadow: inset 0 0 0 2px var(--focus); }<br /> @media screen and (max-width: 850px) {<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor { display: none; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 2. Left sidebar and right toolbar (including tablet and phone dropdowns)<br /> * ===================================================================== */<br /> #mw-site-navigation h2,<br /> #mw-related-navigation h2 { font-weight: 600; }<br /> <br /> /* No shadow on sidebar blocks at tablet width */<br /> @media screen and (min-width: 851px) and (max-width: 1099px) {<br /> #mw-site-navigation .sidebar-chunk,<br /> #mw-related-navigation .sidebar-chunk { box-shadow: none; }<br /> }<br /> <br /> /* Tablet and phone: the sidebars become dropdown menus; a thin rule and a light shadow<br /> separate the menu from the page */<br /> @media screen and (max-width: 1099px) {<br /> .sidebar-inner,<br /> .dropdown {<br /> border: 1px solid var(--rule) !important;<br /> border-radius: 0;<br /> box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.35) !important;<br /> }<br /> }<br /> @media screen and (max-width: 850px) {<br /> .sidebar-inner,<br /> .dropdown { z-index: 501; }<br /> }<br /> #menus-cover { background: #000; opacity: 0.2; }<br /> <br /> <br /> /* =====================================================================<br /> * 3. Content card<br /> * ===================================================================== */<br /> /* Title spacing on talk and user talk pages */<br /> body.ns-1 .mw-body h1.firstHeading,<br /> body.ns-3 .mw-body h1.firstHeading { margin-bottom: .5em; }<br /> <br /> /* List spacing in article text (the old rule added 10px to every li on the site,<br /> which stretched the menus too) */<br /> .mw-parser-output li { margin-bottom: 0.3em; }<br /> <br /> /* Table of contents, file TOC, warning boxes: thin rules, no shadow, no rounding */<br /> ul#filetoc,<br /> .toc,<br /> .mw-warning {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> box-shadow: none;<br /> background: var(--paper-raised);<br /> }<br /> div.mw-warning-with-logexcerpt {<br /> padding: 4px 16px !important;<br /> margin-bottom: 10px !important;<br /> border: 1px solid var(--rule) !important;<br /> border-left: 3px solid var(--link-new) !important;<br /> border-radius: 0 !important;<br /> clear: both !important;<br /> }<br /> <br /> /* Hide the &quot;Help&quot; link */<br /> body #mw-wrapper .mw-helplink,<br /> body #mw-wrapper #mw-indicator-mw-helplink { display: none; }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Buttons, dialogs and extensions<br /> * ===================================================================== */<br /> /* Native buttons: solid Huijia Green, no scaling or bounce */<br /> button,<br /> html input[type=&quot;button&quot;],<br /> input[type=&quot;reset&quot;],<br /> input[type=&quot;submit&quot;] {<br /> background-color: var(--accent-fill);<br /> color: var(--on-accent);<br /> border: none;<br /> border-radius: 2px;<br /> padding: 5px 12px;<br /> margin-right: 5px;<br /> font-weight: 600;<br /> transition: background-color 100ms;<br /> }<br /> button:hover,<br /> html input[type=&quot;button&quot;]:hover,<br /> input[type=&quot;submit&quot;]:hover { background-color: #3B7E3D; }<br /> button:focus-visible,<br /> html input[type=&quot;button&quot;]:focus-visible,<br /> input[type=&quot;submit&quot;]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> <br /> .mw-ui-button { border: none; }<br /> .mw-ui-button.mw-ui-progressive { border-radius: 2px; }<br /> .mw-ui-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-buttonElement &gt; .oo-ui-buttonElement-button { box-shadow: none; }<br /> <br /> /* Dialogs (including the media player) */<br /> .oo-ui-windowManager-modal.oo-ui-windowManager-floating &gt; .oo-ui-dialog &gt; .oo-ui-window-frame {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);<br /> }<br /> <br /> /* Media viewer: no background or border on the tool buttons */<br /> .mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-options-button, .mw-mmv-close,<br /> .mw-mmv-fullscreen, .mw-mmv-next-image, .mw-mmv-prev-image {<br /> box-shadow: none !important;<br /> background-color: transparent !important;<br /> border: none !important;<br /> }<br /> <br /> /* SocialProfile: friends list */<br /> .relationship-item {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> background: var(--paper-raised);<br /> }<br /> .relationship-item img,<br /> .relationship-action img { border-radius: 50%; }<br /> #profile-title-container { padding: 19px 0 6px 6px; }<br /> #profile-top { border-bottom: none; }<br /> .user-section-heading { line-height: 34px; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Icons: sidebar<br /> * The three zone entries carry the VGR zone marks (Archive = square, Worldview = diamond,<br /> * Canon = three dots); other entries have no icon.<br /> * Sidebar ids are generated from the link text in MediaWiki:Sidebar, with spaces turned<br /> * into hyphens (&quot;Archive Area&quot; -&gt; #n-Archive-Area). If the link text changes, update the<br /> * selectors here.<br /> * ===================================================================== */<br /> /* Drawn with CSS: all three marks share one size and baseline and do not depend on a font.<br /> --vgr-mark has a fallback color, so the marks show even on pages without Common.css or a<br /> theme template. */<br /> #n-Archive-Area a:before,<br /> #n-Worldview-Area a:before,<br /> #n-The-VGR-Canon a:before {<br /> --vgr-mark: var(--accent, #025F32);<br /> content: '' !important;<br /> font-family: inherit !important;<br /> display: inline-block !important;<br /> box-sizing: border-box;<br /> width: 12px !important;<br /> height: 12px !important;<br /> margin: 0 10px 0 0 !important;<br /> vertical-align: middle;<br /> position: relative;<br /> top: -1px;<br /> background-repeat: no-repeat !important;<br /> }<br /> <br /> /* Archive: solid square */<br /> #n-Archive-Area a:before {<br /> background-image: linear-gradient(var(--vgr-mark), var(--vgr-mark)) !important;<br /> background-size: 9px 9px !important;<br /> background-position: center !important;<br /> }<br /> <br /> /* Worldview (setting): diamond outline with a center dot */<br /> #n-Worldview-Area a:before {<br /> width: 9px !important;<br /> height: 9px !important;<br /> margin: 0 11.5px 0 1.5px !important;<br /> border: 1.5px solid var(--vgr-mark);<br /> background-image: radial-gradient(circle, var(--vgr-mark) 0 1.4px, transparent 1.6px) !important;<br /> transform: rotate(45deg);<br /> }<br /> <br /> /* Canon (works): three dots, one above and two below */<br /> #n-The-VGR-Canon a:before {<br /> background-image:<br /> radial-gradient(circle at 50% 22%, var(--vgr-mark) 0 1.7px, transparent 1.9px),<br /> radial-gradient(circle at 18% 78%, var(--vgr-mark) 0 1.7px, transparent 1.9px),<br /> radial-gradient(circle at 82% 78%, var(--vgr-mark) 0 1.7px, transparent 1.9px) !important;<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=Template:Info&diff=193 Template:Info 2026-10-13T00:18:38Z <p>PlurimodSU: Updated style</p> <hr /> <div>&lt;includeonly&gt;&lt;table class=&quot;infobox vgr-infobox {{{class|}}}&quot; style=&quot;{{#if:{{{background|}}}|background-color:{{{background}}};}}&quot;&gt;&lt;!--<br /> --&gt;&lt;tr&gt;&lt;th colspan=&quot;2&quot; class=&quot;vgr-infobox-title&quot;&gt;{{{title|{{PAGENAME}}}}}&lt;/th&gt;&lt;/tr&gt;&lt;!--<br /> --&gt;{{#if:{{{file|}}}{{{file2|}}}{{{description|}}}|&lt;tr class=&quot;vgr-infobox-media&quot;&gt;&lt;td colspan=&quot;2&quot;&gt;{{#if:{{{file|}}}|[[File:{{{file}}}|{{{size|260px}}}]]}}{{{file2|}}}{{#if:{{{description|}}}|&lt;div class=&quot;vgr-infobox-desc&quot;&gt;{{{description}}}&lt;/div&gt;}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{title1|}}}|&lt;tr class=&quot;vgr-infobox-group&quot;&gt;&lt;th colspan=&quot;2&quot;&gt;{{{title1}}}&lt;/th&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{1|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{1}}}&lt;/th&gt;&lt;td&gt;{{{T1|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{2|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{2}}}&lt;/th&gt;&lt;td&gt;{{{T2|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{3|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{3}}}&lt;/th&gt;&lt;td&gt;{{{T3|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{4|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{4}}}&lt;/th&gt;&lt;td&gt;{{{T4|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{5|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{5}}}&lt;/th&gt;&lt;td&gt;{{{T5|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{6|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{6}}}&lt;/th&gt;&lt;td&gt;{{{T6|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{7|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{7}}}&lt;/th&gt;&lt;td&gt;{{{T7|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{8|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{8}}}&lt;/th&gt;&lt;td&gt;{{{T8|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{9|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{9}}}&lt;/th&gt;&lt;td&gt;{{{T9|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{10|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{10}}}&lt;/th&gt;&lt;td&gt;{{{T10|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{11|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{11}}}&lt;/th&gt;&lt;td&gt;{{{T11|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{12|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{12}}}&lt;/th&gt;&lt;td&gt;{{{T12|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{13|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{13}}}&lt;/th&gt;&lt;td&gt;{{{T13|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{14|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{14}}}&lt;/th&gt;&lt;td&gt;{{{T14|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{15|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{15}}}&lt;/th&gt;&lt;td&gt;{{{T15|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{16|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{16}}}&lt;/th&gt;&lt;td&gt;{{{T16|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{17|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{17}}}&lt;/th&gt;&lt;td&gt;{{{T17|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{18|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{18}}}&lt;/th&gt;&lt;td&gt;{{{T18|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{19|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{19}}}&lt;/th&gt;&lt;td&gt;{{{T19|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{20|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{20}}}&lt;/th&gt;&lt;td&gt;{{{T20|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{title2|}}}|&lt;tr class=&quot;vgr-infobox-group&quot;&gt;&lt;th colspan=&quot;2&quot;&gt;{{{title2}}}&lt;/th&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{21|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{21}}}&lt;/th&gt;&lt;td&gt;{{{T21|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{22|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{22}}}&lt;/th&gt;&lt;td&gt;{{{T22|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{23|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{23}}}&lt;/th&gt;&lt;td&gt;{{{T23|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{24|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{24}}}&lt;/th&gt;&lt;td&gt;{{{T24|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;{{#if:{{{25|}}}|&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;{{{25}}}&lt;/th&gt;&lt;td&gt;{{{T25|}}}&lt;/td&gt;&lt;/tr&gt;}}&lt;!--<br /> --&gt;&lt;/table&gt;&lt;/includeonly&gt;&lt;noinclude&gt;<br /> An infobox with custom field names, shown on the right of an article. Its look comes from &lt;code&gt;.vgr-infobox&lt;/code&gt; in &lt;code&gt;MediaWiki:Common.css&lt;/code&gt;; colors read the current theme's variables, so it works under Theme-HJ, Theme-STR and Theme-VGR. On phones it becomes full width and stops floating.<br /> <br /> == Origin ==<br /> Author: [[Marina Malinti]]<br /> <br /> == Parameters ==<br /> Every parameter is optional; empty rows are not shown.<br /> {| class=&quot;wikitable&quot;<br /> ! Parameter !! Description<br /> |-<br /> | &lt;code&gt;title&lt;/code&gt; || Name at the top of the box; defaults to the page name<br /> |-<br /> | &lt;code&gt;file&lt;/code&gt; || Image file name (without &lt;code&gt;File:&lt;/code&gt;)<br /> |-<br /> | &lt;code&gt;size&lt;/code&gt; || Image width, default &lt;code&gt;260px&lt;/code&gt;<br /> |-<br /> | &lt;code&gt;file2&lt;/code&gt; || Any content below the image, such as a second image or tabs<br /> |-<br /> | &lt;code&gt;description&lt;/code&gt; || Image caption<br /> |-<br /> | &lt;code&gt;title1&lt;/code&gt; || Subheading for the first group, shown above rows 1–20; hidden when empty<br /> |-<br /> | &lt;code&gt;1&lt;/code&gt;–&lt;code&gt;20&lt;/code&gt;, &lt;code&gt;T1&lt;/code&gt;–&lt;code&gt;T20&lt;/code&gt; || First group: &lt;code&gt;1&lt;/code&gt; is the field name, &lt;code&gt;T1&lt;/code&gt; its value, and so on<br /> |-<br /> | &lt;code&gt;title2&lt;/code&gt; || Subheading for the second group, shown above rows 21–25; hidden when empty<br /> |-<br /> | &lt;code&gt;21&lt;/code&gt;–&lt;code&gt;25&lt;/code&gt;, &lt;code&gt;T21&lt;/code&gt;–&lt;code&gt;T25&lt;/code&gt; || Second group<br /> |-<br /> | &lt;code&gt;background&lt;/code&gt; || Kept for old pages; overrides the theme background. A custom light background makes text unreadable under dark themes, so avoid it on new pages<br /> |-<br /> | &lt;code&gt;class&lt;/code&gt; || Extra CSS classes<br /> |}<br /> <br /> * A row only appears when its field name (&lt;code&gt;1&lt;/code&gt;, &lt;code&gt;2&lt;/code&gt;, ...) is filled in.<br /> * Worldview and Canon pages: write dates in S.C. or O., not the Gregorian calendar.<br /> * Real people in the Archive Area: no birthdays, social accounts or other personal details; school-level information only.<br /> <br /> == Example ==<br /> &lt;pre&gt;<br /> {{info<br /> |title=Plurimod Student Union<br /> |file=PSU.jpg<br /> |description=The logo of Plurimod Student Union<br /> |title1=Information<br /> |1=Alias<br /> |T1=Chinese: Plurimod学生会<br /> |2=Scale<br /> |T2=Over ten members<br /> |3=Leader<br /> |T3=[[User:PlurimodSU|Marina Malinti (PlurimodSU account operator)]]<br /> |4=Founder<br /> |T4=[[User:PlurimodSU|Marina Malinti]], Akatsuki0702<br /> |5=Founded<br /> |T5=2023-06-07<br /> |title2=Relations<br /> |21=Allied group<br /> |T21=[[Beijing Huijia Private School]]<br /> }}<br /> &lt;/pre&gt;<br /> {{info<br /> |title=Plurimod Student Union<br /> |file=PSU.jpg<br /> |description=The logo of Plurimod Student Union<br /> |title1=Information<br /> |1=Alias<br /> |T1=Chinese: Plurimod学生会<br /> |2=Scale<br /> |T2=Over ten members<br /> |3=Leader<br /> |T3=[[User:PlurimodSU|Marina Malinti (PlurimodSU account operator)]]<br /> |4=Founder<br /> |T4=[[User:PlurimodSU|Marina Malinti]], Akatsuki0702<br /> |5=Founded<br /> |T5=2023-06-07<br /> |title2=Relations<br /> |21=Allied group<br /> |T21=[[Beijing Huijia Private School]]<br /> }}<br /> &lt;/noinclude&gt;</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Timeless.css&diff=192 MediaWiki:Timeless.css 2026-10-12T23:27:46Z <p>PlurimodSU: Undo revision 190 by PlurimodSU (talk)</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Timeless.css - v2<br /> * Design language: VGR Design System<br /> *<br /> * Only Timeless-specific fixes live here; styles shared by all skins are in Common.css.<br /> * Organized by block: header / left sidebar / right toolbar / content card / popups and<br /> * extensions / icons.<br /> * When the custom Timeless skin is built, move these blocks into the skin's resources/<br /> * one at a time, deleting each block here once it has moved.<br /> *<br /> * Colors always read the variables from Common.css and the theme templates (--paper, --ink,<br /> * --accent...), never hard-coded values, so everything works under Theme-HJ / Theme-STR /<br /> * Theme-VGR.<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Header<br /> * ===================================================================== */<br /> #mw-header-nav-hack,<br /> #mw-header-hack { box-shadow: none; }<br /> <br /> /* Notification (Echo) popup: the theme templates raise the header to z-index 1000,<br /> so the popup has to sit higher or the header covers it */<br /> div.mw-echo-ui-overlay { z-index: 1100; }<br /> <br /> .oo-ui-clippableElement-clippable.oo-ui-popupWidget-body { max-width: unset !important; }<br /> .oo-ui-popupWidget-popup {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> background-color: var(--paper-raised);<br /> }<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before { border-bottom-color: var(--rule); }<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after { border-bottom-color: var(--paper-raised); }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-head { border-bottom: 1px solid var(--rule); }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-footer { border-top: 1px solid var(--rule); }<br /> .mw-echo-ui-notificationItemWidget {<br /> background-color: transparent;<br /> border-bottom: 1px solid var(--rule);<br /> }<br /> .mw-echo-ui-notificationItemWidget:hover { background-color: var(--accent-tint); }<br /> .mw-echo-ui-notificationItemWidget:focus { box-shadow: inset 0 0 0 2px var(--focus); }<br /> @media screen and (max-width: 850px) {<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor { display: none; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 2. Left sidebar and right toolbar (including tablet and phone dropdowns)<br /> * ===================================================================== */<br /> #mw-site-navigation h2,<br /> #mw-related-navigation h2 { font-weight: 600; }<br /> <br /> /* No shadow on sidebar blocks at tablet width */<br /> @media screen and (min-width: 851px) and (max-width: 1099px) {<br /> #mw-site-navigation .sidebar-chunk,<br /> #mw-related-navigation .sidebar-chunk { box-shadow: none; }<br /> }<br /> <br /> /* Tablet and phone: the sidebars become dropdown menus; a thin rule and a light shadow<br /> separate the menu from the page */<br /> @media screen and (max-width: 1099px) {<br /> .sidebar-inner,<br /> .dropdown {<br /> border: 1px solid var(--rule) !important;<br /> border-radius: 0;<br /> box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.35) !important;<br /> }<br /> }<br /> @media screen and (max-width: 850px) {<br /> .sidebar-inner,<br /> .dropdown { z-index: 501; }<br /> }<br /> #menus-cover { background: #000; opacity: 0.2; }<br /> <br /> <br /> /* =====================================================================<br /> * 3. Content card<br /> * ===================================================================== */<br /> /* Title spacing on talk and user talk pages */<br /> body.ns-1 .mw-body h1.firstHeading,<br /> body.ns-3 .mw-body h1.firstHeading { margin-bottom: .5em; }<br /> <br /> /* List spacing in article text (the old rule added 10px to every li on the site,<br /> which stretched the menus too) */<br /> .mw-parser-output li { margin-bottom: 0.3em; }<br /> <br /> /* Table of contents, file TOC, warning boxes: thin rules, no shadow, no rounding */<br /> ul#filetoc,<br /> .toc,<br /> .mw-warning {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> box-shadow: none;<br /> background: var(--paper-raised);<br /> }<br /> div.mw-warning-with-logexcerpt {<br /> padding: 4px 16px !important;<br /> margin-bottom: 10px !important;<br /> border: 1px solid var(--rule) !important;<br /> border-left: 3px solid var(--link-new) !important;<br /> border-radius: 0 !important;<br /> clear: both !important;<br /> }<br /> <br /> /* Hide the &quot;Help&quot; link */<br /> body #mw-wrapper .mw-helplink,<br /> body #mw-wrapper #mw-indicator-mw-helplink { display: none; }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Buttons, dialogs and extensions<br /> * ===================================================================== */<br /> /* Native buttons: solid Huijia Green, no scaling or bounce */<br /> button,<br /> html input[type=&quot;button&quot;],<br /> input[type=&quot;reset&quot;],<br /> input[type=&quot;submit&quot;] {<br /> background-color: var(--accent-fill);<br /> color: var(--on-accent);<br /> border: none;<br /> border-radius: 2px;<br /> padding: 5px 12px;<br /> margin-right: 5px;<br /> font-weight: 600;<br /> transition: background-color 100ms;<br /> }<br /> button:hover,<br /> html input[type=&quot;button&quot;]:hover,<br /> input[type=&quot;submit&quot;]:hover { background-color: #3B7E3D; }<br /> button:focus-visible,<br /> html input[type=&quot;button&quot;]:focus-visible,<br /> input[type=&quot;submit&quot;]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> <br /> .mw-ui-button { border: none; }<br /> .mw-ui-button.mw-ui-progressive { border-radius: 2px; }<br /> .mw-ui-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-buttonElement &gt; .oo-ui-buttonElement-button { box-shadow: none; }<br /> <br /> /* Dialogs (including the media player) */<br /> .oo-ui-windowManager-modal.oo-ui-windowManager-floating &gt; .oo-ui-dialog &gt; .oo-ui-window-frame {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);<br /> }<br /> <br /> /* Media viewer: no background or border on the tool buttons */<br /> .mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-options-button, .mw-mmv-close,<br /> .mw-mmv-fullscreen, .mw-mmv-next-image, .mw-mmv-prev-image {<br /> box-shadow: none !important;<br /> background-color: transparent !important;<br /> border: none !important;<br /> }<br /> <br /> /* SocialProfile: friends list */<br /> .relationship-item {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> background: var(--paper-raised);<br /> }<br /> .relationship-item img,<br /> .relationship-action img { border-radius: 50%; }<br /> #profile-title-container { padding: 19px 0 6px 6px; }<br /> #profile-top { border-bottom: none; }<br /> .user-section-heading { line-height: 34px; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Icons: sidebar<br /> * The three zone entries carry the VGR zone marks (Archive = square, Worldview = diamond,<br /> * Canon = three dots); other entries have no icon.<br /> * Sidebar ids are generated from the link text in MediaWiki:Sidebar, with spaces turned<br /> * into hyphens (&quot;Archive Area&quot; -&gt; #n-Archive-Area). If the link text changes, update the<br /> * selectors here.<br /> * ===================================================================== */<br /> /* Drawn with CSS: all three marks share one size and baseline and do not depend on a font.<br /> --vgr-mark has a fallback color, so the marks show even on pages without Common.css or a<br /> theme template. */<br /> #n-Archive-Area a:before,<br /> #n-Worldview-Area a:before,<br /> #n-Verdant-Green-Revelation a:before {<br /> --vgr-mark: var(--accent, #025F32);<br /> content: '' !important;<br /> font-family: inherit !important;<br /> display: inline-block !important;<br /> box-sizing: border-box;<br /> width: 12px !important;<br /> height: 12px !important;<br /> margin: 0 10px 0 0 !important;<br /> vertical-align: middle;<br /> position: relative;<br /> top: -1px;<br /> background-repeat: no-repeat !important;<br /> }<br /> <br /> /* Archive: solid square */<br /> #n-Archive-Area a:before {<br /> background-image: linear-gradient(var(--vgr-mark), var(--vgr-mark)) !important;<br /> background-size: 9px 9px !important;<br /> background-position: center !important;<br /> }<br /> <br /> /* Worldview (setting): diamond outline with a center dot */<br /> #n-Worldview-Area a:before {<br /> width: 9px !important;<br /> height: 9px !important;<br /> margin: 0 11.5px 0 1.5px !important;<br /> border: 1.5px solid var(--vgr-mark);<br /> background-image: radial-gradient(circle, var(--vgr-mark) 0 1.4px, transparent 1.6px) !important;<br /> transform: rotate(45deg);<br /> }<br /> <br /> /* Canon (works): three dots, one above and two below */<br /> #n-Verdant-Green-Revelation a:before {<br /> background-image:<br /> radial-gradient(circle at 50% 22%, var(--vgr-mark) 0 1.7px, transparent 1.9px),<br /> radial-gradient(circle at 18% 78%, var(--vgr-mark) 0 1.7px, transparent 1.9px),<br /> radial-gradient(circle at 82% 78%, var(--vgr-mark) 0 1.7px, transparent 1.9px) !important;<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.css&diff=191 MediaWiki:Common.css 2026-10-12T23:27:30Z <p>PlurimodSU: The reform with respect to &quot;Template:Info&quot;</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)<br /> * Design language: VGR Design System - v2<br /> *<br /> * v2: Main Page cards, comments and profile pages are written from scratch for this site;<br /> * all pink is gone; no resources are loaded from other wikis, and no other site<br /> * is named in these comments.<br /> *<br /> * Attribution:<br /> * - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes<br /> * - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Fonts<br /> * ===================================================================== */<br /> <br /> /* Pre-Diphic Mono: the in-world language of the VGR series.<br /> The font file lives on huijia.fun. Browsers only load a cross-origin font when the server<br /> sends an Access-Control-Allow-Origin header, so /fonts/ on huijia.fun must allow<br /> https://en.huijia.fun (or upload the same file under en.huijia.fun/fonts/ and point here). */<br /> @font-face {<br /> font-family: &quot;Pre-Diphic Mono&quot;;<br /> src: url(&quot;https://huijia.fun/fonts/PreDiphicMono-1.1.woff2&quot;) format(&quot;woff2&quot;);<br /> font-display: swap;<br /> }<br /> /* !important: theme templates set fonts with !important on sidebars, headings, tables, etc.; without it .pd loses */<br /> .pd {<br /> font-family: &quot;Pre-Diphic Mono&quot;, sans-serif !important;<br /> font-feature-settings: &quot;rlig&quot; 1, &quot;ccmp&quot; 1 !important;<br /> line-height: 1;<br /> }<br /> <br /> /* {{PD}} vertical text: Module:PreDiphic splits the text into fixed-length columns (.pd-col);<br /> columns run left to right and wrap to a new row at the right edge of the content, no scrollbar */<br /> .pd-cols {<br /> display: inline-flex;<br /> flex-wrap: wrap;<br /> align-items: flex-start;<br /> vertical-align: top;<br /> max-width: 100%;<br /> column-gap: 0.25em;<br /> row-gap: 0.75em;<br /> }<br /> /* Each column stays within the visible window height (minus header and margins); the<br /> height parameter overrides this cap. 100svh = visible height with the mobile address bar<br /> shown, matching the column logic in Common.js; browsers without svh fall back to 100vh. */<br /> .pd-col {<br /> writing-mode: vertical-lr;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Single vertical span (the typer page's &quot;Copy as HTML&quot; output): top-aligned, within window height */<br /> .pd-v {<br /> writing-mode: vertical-lr;<br /> vertical-align: top;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Huiwen Mincho: work titles and chapter titles (--font-display).<br /> The file name is percent-encoded so this file stays ASCII-only. */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule<br /> never took effect. Kept now that it is fixed; delete it once no page uses it. */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a<br /> Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System<br /> no longer uses. If a page still needs one, upload the font file to this site first. */<br /> <br /> /* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.<br /> The loli.net mirror keeps them loading for visitors in mainland China. */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens (site default = Archive Zone &quot;paper&quot; palette)<br /> * Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* Primary-color variables read by the skin and extensions: all point to Huijia Green */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. General utilities<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* Custom link: underline on hover */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* Two-column layouts<br /> In the old #left-column-0.3 the &quot;.&quot; was read as a class selector, so those rules never<br /> matched. The escaped form below matches id=&quot;left-column-0.3&quot; without changing any page. */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* Main Page: hide the page title, page tabs, variant menu and category bar */<br /> body.page-Main_Page #firstHeading,<br /> body.page-Main_Page #siteSub,<br /> body.page-Main_Page li#ca-talk,<br /> body.page-Main_Page li#ca-watch,<br /> body.page-Main_Page li#ca-unwatch,<br /> body.page-Main_Page li#ca-history,<br /> body.page-Main_Page li#ca-nstab-main,<br /> body.page-Main_Page li#ca-viewsource,<br /> body.page-Main_Page li#ca-view,<br /> body.page-Main_Page #p-variants,<br /> body.page-Main_Page #p-variants-desktop-label,<br /> body.page-Main_Page #catlinks-sidebar,<br /> body.page-Main_Page #mw-normal-catlinks { display: none !important; }<br /> <br /> /* Scroll-to-top / bottom buttons */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* Repost badge */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Spoiler blackout (adapted from Moegirlpedia)<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Info boxes<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* Upload page: info box layout fix */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. Tables<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* Light green table (old class name kept, now reads the variables) */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar (adapted from Wikipedia)<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;: &quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; \00B7 &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot; (&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;)&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)<br /> * Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.<br /> * ===================================================================== */<br /> .rec-grid {<br /> display: grid;<br /> gap: var(--space-3, 12px);<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> .rec-card {<br /> padding: 12px 16px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }<br /> .rec-card-title a { color: inherit; }<br /> .rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }<br /> .rec-link {<br /> padding: 8px 12px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> transition: border-color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .rec-link a { color: var(--ink); }<br /> .rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* Compatibility layer: the old mini-block class names. Some templates still use them<br /> (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those<br /> templates have moved to rec-card / rec-link. */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. Forms, notifications, profile pages<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. Comments (FlowThread): site colors only; layout is left to the extension<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 11. Notice box {{Notice}}: .vgr-notice<br /> * All colors read the theme variables, so it works under Theme-HJ / Theme-STR / Theme-VGR.<br /> * Default = zone color; is-warning = pending / warning; is-danger = spoiler / error.<br /> * There is always a text label on the left, so color is never the only signal.<br /> * ===================================================================== */<br /> .vgr-notice {<br /> --notice-c: var(--zone-accent, var(--accent));<br /> display: grid;<br /> grid-template-columns: auto minmax(0, 1fr);<br /> gap: 6px 16px;<br /> box-sizing: border-box;<br /> max-width: 100%;<br /> margin: 1em 0;<br /> padding: 12px 16px;<br /> background: var(--paper-sunk);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--notice-c);<br /> border-radius: 0;<br /> }<br /> /* Amber: mixed with the current text color, so it darkens on light themes and lightens on dark ones */<br /> .vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }<br /> /* Red: each theme's red-link color */<br /> .vgr-notice.is-danger { --notice-c: var(--link-new); }<br /> <br /> .vgr-notice-side {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 6px;<br /> min-width: 3em;<br /> padding-top: 3px;<br /> }<br /> .vgr-notice-tag {<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> line-height: 1.4;<br /> white-space: nowrap;<br /> color: var(--notice-c);<br /> }<br /> .vgr-notice-icon { line-height: 1; color: var(--notice-c); }<br /> .vgr-notice-icon .md,<br /> .vgr-notice-icon .md-lg,<br /> .vgr-notice-icon .md-md,<br /> .vgr-notice-icon .material-icons { font-size: 26px; }<br /> .vgr-notice-icon img { max-width: 32px; height: auto; }<br /> <br /> .vgr-notice-main { min-width: 0; }<br /> .vgr-notice-title {<br /> font-family: var(--font-serif);<br /> font-size: 16px;<br /> font-weight: 600;<br /> line-height: 1.6;<br /> color: var(--ink);<br /> }<br /> #mw-content .vgr-notice-body,<br /> #mw-content .vgr-notice-body p,<br /> .vgr-notice-body,<br /> .vgr-notice-body p {<br /> margin: 0;<br /> font-size: 14px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> }<br /> .vgr-notice-body &gt; p + p { margin-top: 0.5em; }<br /> .vgr-notice-below {<br /> grid-column: 1 / -1;<br /> margin-top: 4px;<br /> padding-top: 8px;<br /> border-top: 1px solid var(--rule);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 12. Infobox {{Infobox}}: .vgr-infobox<br /> * The fact table on the right of an article. All colors read the theme variables;<br /> * square corners, no shadow; full width on phones.<br /> * ===================================================================== */<br /> table.vgr-infobox {<br /> float: right;<br /> clear: right;<br /> width: 300px;<br /> margin: 0 0 1em 1.5em;<br /> border-collapse: collapse;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--zone-accent, var(--accent));<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> line-height: 1.6;<br /> }<br /> table.vgr-infobox th.vgr-infobox-title {<br /> padding: 10px 12px;<br /> text-align: center;<br /> font-family: var(--font-serif);<br /> font-size: 18px;<br /> font-weight: 600;<br /> letter-spacing: 0.04em;<br /> color: var(--ink);<br /> background: var(--accent-tint);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td {<br /> padding: 12px;<br /> text-align: center;<br /> }<br /> table.vgr-infobox .vgr-infobox-media img { max-width: 100%; height: auto; }<br /> .vgr-infobox-desc {<br /> margin-top: 6px;<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> table.vgr-infobox th[scope=&quot;row&quot;] {<br /> width: 5.5em;<br /> padding: 7px 8px 7px 12px;<br /> text-align: left;<br /> vertical-align: top;<br /> white-space: nowrap;<br /> font-size: 13px;<br /> font-weight: 600;<br /> color: var(--ink-muted);<br /> background: transparent;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox td {<br /> padding: 7px 12px 7px 8px;<br /> vertical-align: top;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td { border-top: none; }<br /> table.vgr-infobox td p { margin: 0; }<br /> /* {{Infobox2}}: group subheadings */<br /> table.vgr-infobox .vgr-infobox-group th {<br /> padding: 6px 12px;<br /> text-align: left;<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> color: var(--zone-accent, var(--accent));<br /> background: var(--paper-sunk);<br /> border-top: 1px solid var(--rule);<br /> }<br /> @media screen and (max-width: 850px) {<br /> table.vgr-infobox {<br /> float: none;<br /> width: 100%;<br /> margin: 0 0 1.5em;<br /> }<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Timeless.css&diff=190 MediaWiki:Timeless.css 2026-10-12T23:26:34Z <p>PlurimodSU: The reform with respect to &quot;Template:信息2&quot;</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN · MediaWiki:Common.css（适用于所有皮肤）<br /> * 设计语言：VGR Design System · v2<br /> *<br /> * v2：首页卡片、评论区、资料卡改为本站自己的写法；粉色全部去掉；<br /> * 不再从任何其他wiki站点加载资源，注释里也不再出现其他站点的名字。<br /> *<br /> * 版权说明：<br /> * - 萌娘百科 MediaWiki:Gadget-site-styles.css（CC BY-NC-SA 3.0）：黑幕、信息框<br /> * - 中文维基百科 MediaWiki:Common.css（CC BY-SA）：hlist、navbox、navbar、collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. 字体<br /> * ===================================================================== */<br /> <br /> /* Pre-Diphic-Mono：VGR系列世界观内的语言 */<br /> @font-face {<br /> font-family: &quot;Pre-Diphic Mono&quot;;<br /> src: url(&quot;https://huijia.fun/fonts/PreDiphicMono-1.1.woff2&quot;) format(&quot;woff2&quot;);<br /> font-display: swap;<br /> }<br /> /* 加 !important：主题模板给侧栏、标题、表格等处的文字用 !important 指定了字体，不加的话 .pd 会被盖掉 */<br /> .pd {<br /> font-family: &quot;Pre-Diphic Mono&quot;, sans-serif !important;<br /> font-feature-settings: &quot;rlig&quot; 1, &quot;ccmp&quot; 1 !important;<br /> line-height: 1;<br /> }<br /> <br /> /* {{PD}}竖排：Module:PreDiphic把文字切成固定字数的列（.pd-col）；<br /> 列从左往右排，撞到正文右边就自动换到下面一排，不出现滚动条 */<br /> .pd-cols {<br /> display: inline-flex;<br /> flex-wrap: wrap;<br /> align-items: flex-start;<br /> vertical-align: top;<br /> max-width: 100%;<br /> column-gap: 0.25em;<br /> row-gap: 0.75em;<br /> }<br /> /* 每列不超过可见窗口高度（减去顶栏和边距）；「高度」参数会覆盖这个上限。<br /> 100svh = 手机地址栏展开时的可见高度，和 Common.js 里的分列算法一致；不支持 svh 的浏览器退回 100vh */<br /> .pd-col {<br /> writing-mode: vertical-lr;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* 单个竖排span（打字页「复制为HTML」的输出）：顶端对齐，不超过窗口高度 */<br /> .pd-v {<br /> writing-mode: vertical-lr;<br /> vertical-align: top;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* 汇文明朝体：作品名、章节标题（--font-display） */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/汇文明朝体.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* 悦宋：原文件第3行注释缺了「/*」，这条规则一直没有生效。<br /> 修好后保留，确认没有页面使用后可以删除。 */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* 已停用的字体：两款外链字体（一款来自其他wiki的文件服务器，一款来自Fandom图片服务器），<br /> 以及 VGR Design System 不再使用的瀞之故障黑体、Rubik 80s Fade。<br /> 如果某个页面还在用，把字体文件上传到本站后再加回来。 */<br /> <br /> /* Material Icons（Google，Apache 2.0）：{{信息}}、上传页等处的 .md 图标。<br /> 用 loli.net 镜像是为了中国大陆访客能加载。 */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens（全站默认 = 档案区「纸本」配色）<br /> * 主题模板（Theme-HJ / 设定区主题等）只需重设其中几项。<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* 皮肤与扩展读取的主色变量：统一指向汇佳绿 */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. 通用小工具<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* 自定义链接：悬停时显示下划线 */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* 左右分栏<br /> 原写法 #left-column-0.3 里的「.」会被当成类选择器，规则从未生效。<br /> 这里用转义写法，页面里的 id=&quot;left-column-0.3&quot; 不用改。 */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* 首页隐藏页面标题及相关标签+变体 */<br /> body.page-首页 #firstHeading,<br /> body.page-首页 #siteSub,<br /> body.page-首页 #ca-talk,<br /> body.page-首页 #ca-watch,<br /> body.page-首页 #ca-unwatch,<br /> body.page-首页 #ca-history,<br /> body.page-首页 #ca-nstab-main,<br /> body.page-首页 #ca-viewsource,<br /> body.page-首页 #ca-view,<br /> body.page-首页 #p-variants,<br /> body.page-首页 #p-variants-desktop-label { display: none !important; }<br /> <br /> /* 回到顶部 / 底部按钮 */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* 转载标记 */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. 黑幕（改写自萌娘百科）<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. 信息框<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* 上传页 InfoBox 修复 */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. 表格<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* 浅绿表格（旧类名保留，改为读变量） */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar（改写自中文维基百科）<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;：&quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; · &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot;（&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;）&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* 原文件先定义了一套蓝紫色、后面又用粉色覆盖，这里合并成一套 */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. 条目卡片：rec-grid / rec-card / rec-link（VGR Design System）<br /> * 描述性条目用 rec-grid-2 里的 rec-card，短术语用 rec-grid-4 里的 rec-link。<br /> * ===================================================================== */<br /> .rec-grid {<br /> display: grid;<br /> gap: var(--space-3, 12px);<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> .rec-card {<br /> padding: 12px 16px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }<br /> .rec-card-title a { color: inherit; }<br /> .rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }<br /> .rec-link {<br /> padding: 8px 12px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> transition: border-color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .rec-link a { color: var(--ink); }<br /> .rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* 兼容层：mini-block 旧类名。仍有模板使用（首页子模板、设定区中心页的 rec-grid 等）。<br /> 这些模板改用 rec-card / rec-link 之后，整段删除。 */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. 表单、通知、资料卡<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* 个人资料页（SocialProfile）：只设颜色与形状，布局交给扩展默认样式 */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. 评论区 FlowThread：只换成本站配色，布局交给扩展默认样式<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 11. 提示框 {{提示}}：.vgr-notice<br /> * 颜色全部读主题变量，Theme-HJ / Theme-STR / Theme-VGR 下都能正确显示。<br /> * 默认 = 分区色；is-warning = 待定、警告；is-danger = 剧透、错误。<br /> * 左侧一定有文字标签，不只靠颜色区分。<br /> * ===================================================================== */<br /> .vgr-notice {<br /> --notice-c: var(--zone-accent, var(--accent));<br /> display: grid;<br /> grid-template-columns: auto minmax(0, 1fr);<br /> gap: 6px 16px;<br /> box-sizing: border-box;<br /> max-width: 100%;<br /> margin: 1em 0;<br /> padding: 12px 16px;<br /> background: var(--paper-sunk);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--notice-c);<br /> border-radius: 0;<br /> }<br /> /* 黄色：按当前文字色调深或调浅，浅色、深色主题上都保持可读 */<br /> .vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }<br /> /* 红色：直接用各主题的红链色 */<br /> .vgr-notice.is-danger { --notice-c: var(--link-new); }<br /> <br /> .vgr-notice-side {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 6px;<br /> min-width: 3em;<br /> padding-top: 3px;<br /> }<br /> .vgr-notice-tag {<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> line-height: 1.4;<br /> white-space: nowrap;<br /> color: var(--notice-c);<br /> }<br /> .vgr-notice-icon { line-height: 1; color: var(--notice-c); }<br /> .vgr-notice-icon .md,<br /> .vgr-notice-icon .md-lg,<br /> .vgr-notice-icon .md-md,<br /> .vgr-notice-icon .material-icons { font-size: 26px; }<br /> .vgr-notice-icon img { max-width: 32px; height: auto; }<br /> <br /> .vgr-notice-main { min-width: 0; }<br /> .vgr-notice-title {<br /> font-family: var(--font-serif);<br /> font-size: 16px;<br /> font-weight: 600;<br /> line-height: 1.6;<br /> color: var(--ink);<br /> }<br /> #mw-content .vgr-notice-body,<br /> #mw-content .vgr-notice-body p,<br /> .vgr-notice-body,<br /> .vgr-notice-body p {<br /> margin: 0;<br /> font-size: 14px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> }<br /> .vgr-notice-body &gt; p + p { margin-top: 0.5em; }<br /> .vgr-notice-below {<br /> grid-column: 1 / -1;<br /> margin-top: 4px;<br /> padding-top: 8px;<br /> border-top: 1px solid var(--rule);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 12. 信息框 {{信息}}：.vgr-infobox<br /> * 条目右侧的资料表。颜色全部读主题变量；直角、无投影；手机上改为整行宽。<br /> * ===================================================================== */<br /> table.vgr-infobox {<br /> float: right;<br /> clear: right;<br /> width: 300px;<br /> margin: 0 0 1em 1.5em;<br /> border-collapse: collapse;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--zone-accent, var(--accent));<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> line-height: 1.6;<br /> }<br /> table.vgr-infobox th.vgr-infobox-title {<br /> padding: 10px 12px;<br /> text-align: center;<br /> font-family: var(--font-serif);<br /> font-size: 18px;<br /> font-weight: 600;<br /> letter-spacing: 0.04em;<br /> color: var(--ink);<br /> background: var(--accent-tint);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td {<br /> padding: 12px;<br /> text-align: center;<br /> }<br /> table.vgr-infobox .vgr-infobox-media img { max-width: 100%; height: auto; }<br /> .vgr-infobox-desc {<br /> margin-top: 6px;<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> table.vgr-infobox th[scope=&quot;row&quot;] {<br /> width: 5.5em;<br /> padding: 7px 8px 7px 12px;<br /> text-align: left;<br /> vertical-align: top;<br /> white-space: nowrap;<br /> font-size: 13px;<br /> font-weight: 600;<br /> color: var(--ink-muted);<br /> background: transparent;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox td {<br /> padding: 7px 12px 7px 8px;<br /> vertical-align: top;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td { border-top: none; }<br /> table.vgr-infobox td p { margin: 0; }<br /> /* {{信息2}}：分组小标题 */<br /> table.vgr-infobox .vgr-infobox-group th {<br /> padding: 6px 12px;<br /> text-align: left;<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> color: var(--zone-accent, var(--accent));<br /> background: var(--paper-sunk);<br /> border-top: 1px solid var(--rule);<br /> }<br /> @media screen and (max-width: 850px) {<br /> table.vgr-infobox {<br /> float: none;<br /> width: 100%;<br /> margin: 0 0 1.5em;<br /> }<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Timeless.css&diff=189 MediaWiki:Timeless.css 2026-10-12T23:25:39Z <p>PlurimodSU: New System</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Timeless.css - v2<br /> * Design language: VGR Design System<br /> *<br /> * Only Timeless-specific fixes live here; styles shared by all skins are in Common.css.<br /> * Organized by block: header / left sidebar / right toolbar / content card / popups and<br /> * extensions / icons.<br /> * When the custom Timeless skin is built, move these blocks into the skin's resources/<br /> * one at a time, deleting each block here once it has moved.<br /> *<br /> * Colors always read the variables from Common.css and the theme templates (--paper, --ink,<br /> * --accent...), never hard-coded values, so everything works under Theme-HJ / Theme-STR /<br /> * Theme-VGR.<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Header<br /> * ===================================================================== */<br /> #mw-header-nav-hack,<br /> #mw-header-hack { box-shadow: none; }<br /> <br /> /* Notification (Echo) popup: the theme templates raise the header to z-index 1000,<br /> so the popup has to sit higher or the header covers it */<br /> div.mw-echo-ui-overlay { z-index: 1100; }<br /> <br /> .oo-ui-clippableElement-clippable.oo-ui-popupWidget-body { max-width: unset !important; }<br /> .oo-ui-popupWidget-popup {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> background-color: var(--paper-raised);<br /> }<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before { border-bottom-color: var(--rule); }<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after { border-bottom-color: var(--paper-raised); }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-head { border-bottom: 1px solid var(--rule); }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-footer { border-top: 1px solid var(--rule); }<br /> .mw-echo-ui-notificationItemWidget {<br /> background-color: transparent;<br /> border-bottom: 1px solid var(--rule);<br /> }<br /> .mw-echo-ui-notificationItemWidget:hover { background-color: var(--accent-tint); }<br /> .mw-echo-ui-notificationItemWidget:focus { box-shadow: inset 0 0 0 2px var(--focus); }<br /> @media screen and (max-width: 850px) {<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor { display: none; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 2. Left sidebar and right toolbar (including tablet and phone dropdowns)<br /> * ===================================================================== */<br /> #mw-site-navigation h2,<br /> #mw-related-navigation h2 { font-weight: 600; }<br /> <br /> /* No shadow on sidebar blocks at tablet width */<br /> @media screen and (min-width: 851px) and (max-width: 1099px) {<br /> #mw-site-navigation .sidebar-chunk,<br /> #mw-related-navigation .sidebar-chunk { box-shadow: none; }<br /> }<br /> <br /> /* Tablet and phone: the sidebars become dropdown menus; a thin rule and a light shadow<br /> separate the menu from the page */<br /> @media screen and (max-width: 1099px) {<br /> .sidebar-inner,<br /> .dropdown {<br /> border: 1px solid var(--rule) !important;<br /> border-radius: 0;<br /> box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.35) !important;<br /> }<br /> }<br /> @media screen and (max-width: 850px) {<br /> .sidebar-inner,<br /> .dropdown { z-index: 501; }<br /> }<br /> #menus-cover { background: #000; opacity: 0.2; }<br /> <br /> <br /> /* =====================================================================<br /> * 3. Content card<br /> * ===================================================================== */<br /> /* Title spacing on talk and user talk pages */<br /> body.ns-1 .mw-body h1.firstHeading,<br /> body.ns-3 .mw-body h1.firstHeading { margin-bottom: .5em; }<br /> <br /> /* List spacing in article text (the old rule added 10px to every li on the site,<br /> which stretched the menus too) */<br /> .mw-parser-output li { margin-bottom: 0.3em; }<br /> <br /> /* Table of contents, file TOC, warning boxes: thin rules, no shadow, no rounding */<br /> ul#filetoc,<br /> .toc,<br /> .mw-warning {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> box-shadow: none;<br /> background: var(--paper-raised);<br /> }<br /> div.mw-warning-with-logexcerpt {<br /> padding: 4px 16px !important;<br /> margin-bottom: 10px !important;<br /> border: 1px solid var(--rule) !important;<br /> border-left: 3px solid var(--link-new) !important;<br /> border-radius: 0 !important;<br /> clear: both !important;<br /> }<br /> <br /> /* Hide the &quot;Help&quot; link */<br /> body #mw-wrapper .mw-helplink,<br /> body #mw-wrapper #mw-indicator-mw-helplink { display: none; }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Buttons, dialogs and extensions<br /> * ===================================================================== */<br /> /* Native buttons: solid Huijia Green, no scaling or bounce */<br /> button,<br /> html input[type=&quot;button&quot;],<br /> input[type=&quot;reset&quot;],<br /> input[type=&quot;submit&quot;] {<br /> background-color: var(--accent-fill);<br /> color: var(--on-accent);<br /> border: none;<br /> border-radius: 2px;<br /> padding: 5px 12px;<br /> margin-right: 5px;<br /> font-weight: 600;<br /> transition: background-color 100ms;<br /> }<br /> button:hover,<br /> html input[type=&quot;button&quot;]:hover,<br /> input[type=&quot;submit&quot;]:hover { background-color: #3B7E3D; }<br /> button:focus-visible,<br /> html input[type=&quot;button&quot;]:focus-visible,<br /> input[type=&quot;submit&quot;]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> <br /> .mw-ui-button { border: none; }<br /> .mw-ui-button.mw-ui-progressive { border-radius: 2px; }<br /> .mw-ui-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-buttonElement &gt; .oo-ui-buttonElement-button { box-shadow: none; }<br /> <br /> /* Dialogs (including the media player) */<br /> .oo-ui-windowManager-modal.oo-ui-windowManager-floating &gt; .oo-ui-dialog &gt; .oo-ui-window-frame {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);<br /> }<br /> <br /> /* Media viewer: no background or border on the tool buttons */<br /> .mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-options-button, .mw-mmv-close,<br /> .mw-mmv-fullscreen, .mw-mmv-next-image, .mw-mmv-prev-image {<br /> box-shadow: none !important;<br /> background-color: transparent !important;<br /> border: none !important;<br /> }<br /> <br /> /* SocialProfile: friends list */<br /> .relationship-item {<br /> border: 1px solid var(--rule);<br /> border-radius: 0;<br /> background: var(--paper-raised);<br /> }<br /> .relationship-item img,<br /> .relationship-action img { border-radius: 50%; }<br /> #profile-title-container { padding: 19px 0 6px 6px; }<br /> #profile-top { border-bottom: none; }<br /> .user-section-heading { line-height: 34px; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Icons: sidebar<br /> * The three zone entries carry the VGR zone marks (Archive = square, Worldview = diamond,<br /> * Canon = three dots); other entries have no icon.<br /> * Sidebar ids are generated from the link text in MediaWiki:Sidebar, with spaces turned<br /> * into hyphens (&quot;Archive Area&quot; -&gt; #n-Archive-Area). If the link text changes, update the<br /> * selectors here.<br /> * ===================================================================== */<br /> /* Drawn with CSS: all three marks share one size and baseline and do not depend on a font.<br /> --vgr-mark has a fallback color, so the marks show even on pages without Common.css or a<br /> theme template. */<br /> #n-Archive-Area a:before,<br /> #n-Worldview-Area a:before,<br /> #n-Verdant-Green-Revelation a:before {<br /> --vgr-mark: var(--accent, #025F32);<br /> content: '' !important;<br /> font-family: inherit !important;<br /> display: inline-block !important;<br /> box-sizing: border-box;<br /> width: 12px !important;<br /> height: 12px !important;<br /> margin: 0 10px 0 0 !important;<br /> vertical-align: middle;<br /> position: relative;<br /> top: -1px;<br /> background-repeat: no-repeat !important;<br /> }<br /> <br /> /* Archive: solid square */<br /> #n-Archive-Area a:before {<br /> background-image: linear-gradient(var(--vgr-mark), var(--vgr-mark)) !important;<br /> background-size: 9px 9px !important;<br /> background-position: center !important;<br /> }<br /> <br /> /* Worldview (setting): diamond outline with a center dot */<br /> #n-Worldview-Area a:before {<br /> width: 9px !important;<br /> height: 9px !important;<br /> margin: 0 11.5px 0 1.5px !important;<br /> border: 1.5px solid var(--vgr-mark);<br /> background-image: radial-gradient(circle, var(--vgr-mark) 0 1.4px, transparent 1.6px) !important;<br /> transform: rotate(45deg);<br /> }<br /> <br /> /* Canon (works): three dots, one above and two below */<br /> #n-Verdant-Green-Revelation a:before {<br /> background-image:<br /> radial-gradient(circle at 50% 22%, var(--vgr-mark) 0 1.7px, transparent 1.9px),<br /> radial-gradient(circle at 18% 78%, var(--vgr-mark) 0 1.7px, transparent 1.9px),<br /> radial-gradient(circle at 82% 78%, var(--vgr-mark) 0 1.7px, transparent 1.9px) !important;<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.css&diff=188 MediaWiki:Common.css 2026-10-12T22:19:32Z <p>PlurimodSU: For &quot;Template:Info&quot;, the design is refined</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)<br /> * Design language: VGR Design System - v2<br /> *<br /> * v2: Main Page cards, comments and profile pages are written from scratch for this site;<br /> * all pink is gone; no resources are loaded from other wikis, and no other site<br /> * is named in these comments.<br /> *<br /> * Attribution:<br /> * - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes<br /> * - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Fonts<br /> * ===================================================================== */<br /> <br /> /* Pre-Diphic Mono: the in-world language of the VGR series.<br /> The font file lives on huijia.fun. Browsers only load a cross-origin font when the server<br /> sends an Access-Control-Allow-Origin header, so /fonts/ on huijia.fun must allow<br /> https://en.huijia.fun (or upload the same file under en.huijia.fun/fonts/ and point here). */<br /> @font-face {<br /> font-family: &quot;Pre-Diphic Mono&quot;;<br /> src: url(&quot;https://huijia.fun/fonts/PreDiphicMono-1.1.woff2&quot;) format(&quot;woff2&quot;);<br /> font-display: swap;<br /> }<br /> .pd {<br /> font-family: &quot;Pre-Diphic Mono&quot;, sans-serif;<br /> font-feature-settings: &quot;rlig&quot; 1, &quot;ccmp&quot; 1;<br /> line-height: 1;<br /> }<br /> <br /> /* {{PD}} vertical text: Module:PreDiphic splits the text into fixed-length columns (.pd-col);<br /> columns run left to right and wrap to a new row at the right edge of the content, no scrollbar */<br /> .pd-cols {<br /> display: inline-flex;<br /> flex-wrap: wrap;<br /> align-items: flex-start;<br /> vertical-align: top;<br /> max-width: 100%;<br /> column-gap: 0.25em;<br /> row-gap: 0.75em;<br /> }<br /> /* Each column stays within the visible window height (minus header and margins); the<br /> height parameter overrides this cap. 100svh = visible height with the mobile address bar<br /> shown, matching the column logic in Common.js; browsers without svh fall back to 100vh. */<br /> .pd-col {<br /> writing-mode: vertical-lr;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Single vertical span (the typer page's &quot;Copy as HTML&quot; output): top-aligned, within window height */<br /> .pd-v {<br /> writing-mode: vertical-lr;<br /> vertical-align: top;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Huiwen Mincho: work titles and chapter titles (--font-display).<br /> The file name is percent-encoded so this file stays ASCII-only. */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule<br /> never took effect. Kept now that it is fixed; delete it once no page uses it. */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a<br /> Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System<br /> no longer uses. If a page still needs one, upload the font file to this site first. */<br /> <br /> /* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.<br /> The loli.net mirror keeps them loading for visitors in mainland China. */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens (site default = Archive Zone &quot;paper&quot; palette)<br /> * Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* Primary-color variables read by the skin and extensions: all point to Huijia Green */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. General utilities<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* Custom link: underline on hover */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* Two-column layouts<br /> In the old #left-column-0.3 the &quot;.&quot; was read as a class selector, so those rules never<br /> matched. The escaped form below matches id=&quot;left-column-0.3&quot; without changing any page. */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* Main Page: hide the page title, page tabs, variant menu and category bar */<br /> body.page-Main_Page #firstHeading,<br /> body.page-Main_Page #siteSub,<br /> body.page-Main_Page li#ca-talk,<br /> body.page-Main_Page li#ca-watch,<br /> body.page-Main_Page li#ca-unwatch,<br /> body.page-Main_Page li#ca-history,<br /> body.page-Main_Page li#ca-nstab-main,<br /> body.page-Main_Page li#ca-viewsource,<br /> body.page-Main_Page li#ca-view,<br /> body.page-Main_Page #p-variants,<br /> body.page-Main_Page #p-variants-desktop-label,<br /> body.page-Main_Page #catlinks-sidebar,<br /> body.page-Main_Page #mw-normal-catlinks { display: none !important; }<br /> <br /> /* Scroll-to-top / bottom buttons */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* Repost badge */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Spoiler blackout (adapted from Moegirlpedia)<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Info boxes<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* Upload page: info box layout fix */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. Tables<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* Light green table (old class name kept, now reads the variables) */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar (adapted from Wikipedia)<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;: &quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; \00B7 &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot; (&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;)&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)<br /> * Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.<br /> * ===================================================================== */<br /> .rec-grid {<br /> display: grid;<br /> gap: var(--space-3, 12px);<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> .rec-card {<br /> padding: 12px 16px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }<br /> .rec-card-title a { color: inherit; }<br /> .rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }<br /> .rec-link {<br /> padding: 8px 12px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> transition: border-color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .rec-link a { color: var(--ink); }<br /> .rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* Compatibility layer: the old mini-block class names. Some templates still use them<br /> (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those<br /> templates have moved to rec-card / rec-link. */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. Forms, notifications, profile pages<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. Comments (FlowThread): site colors only; layout is left to the extension<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 11. Notice box {{Notice}}: .vgr-notice<br /> * All colors read the theme variables, so it works under Theme-HJ / Theme-STR / Theme-VGR.<br /> * Default = zone color; is-warning = pending / warning; is-danger = spoiler / error.<br /> * There is always a text label on the left, so color is never the only signal.<br /> * ===================================================================== */<br /> .vgr-notice {<br /> --notice-c: var(--zone-accent, var(--accent));<br /> display: grid;<br /> grid-template-columns: auto minmax(0, 1fr);<br /> gap: 6px 16px;<br /> box-sizing: border-box;<br /> max-width: 100%;<br /> margin: 1em 0;<br /> padding: 12px 16px;<br /> background: var(--paper-sunk);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--notice-c);<br /> border-radius: 0;<br /> }<br /> /* Amber: mixed with the current text color, so it darkens on light themes and lightens on dark ones */<br /> .vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }<br /> /* Red: each theme's red-link color */<br /> .vgr-notice.is-danger { --notice-c: var(--link-new); }<br /> <br /> .vgr-notice-side {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 6px;<br /> min-width: 3em;<br /> padding-top: 3px;<br /> }<br /> .vgr-notice-tag {<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> line-height: 1.4;<br /> white-space: nowrap;<br /> color: var(--notice-c);<br /> }<br /> .vgr-notice-icon { line-height: 1; color: var(--notice-c); }<br /> .vgr-notice-icon .md,<br /> .vgr-notice-icon .md-lg,<br /> .vgr-notice-icon .md-md,<br /> .vgr-notice-icon .material-icons { font-size: 26px; }<br /> .vgr-notice-icon img { max-width: 32px; height: auto; }<br /> <br /> .vgr-notice-main { min-width: 0; }<br /> .vgr-notice-title {<br /> font-family: var(--font-serif);<br /> font-size: 16px;<br /> font-weight: 600;<br /> line-height: 1.6;<br /> color: var(--ink);<br /> }<br /> #mw-content .vgr-notice-body,<br /> #mw-content .vgr-notice-body p,<br /> .vgr-notice-body,<br /> .vgr-notice-body p {<br /> margin: 0;<br /> font-size: 14px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> }<br /> .vgr-notice-body &gt; p + p { margin-top: 0.5em; }<br /> .vgr-notice-below {<br /> grid-column: 1 / -1;<br /> margin-top: 4px;<br /> padding-top: 8px;<br /> border-top: 1px solid var(--rule);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 12. Infobox {{Infobox}}: .vgr-infobox<br /> * The fact table on the right of an article. All colors read the theme variables;<br /> * square corners, no shadow; full width on phones.<br /> * ===================================================================== */<br /> table.vgr-infobox {<br /> float: right;<br /> clear: right;<br /> width: 300px;<br /> margin: 0 0 1em 1.5em;<br /> border-collapse: collapse;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--zone-accent, var(--accent));<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> line-height: 1.6;<br /> }<br /> table.vgr-infobox th.vgr-infobox-title {<br /> padding: 10px 12px;<br /> text-align: center;<br /> font-family: var(--font-serif);<br /> font-size: 18px;<br /> font-weight: 600;<br /> letter-spacing: 0.04em;<br /> color: var(--ink);<br /> background: var(--accent-tint);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td {<br /> padding: 12px;<br /> text-align: center;<br /> }<br /> table.vgr-infobox .vgr-infobox-media img { max-width: 100%; height: auto; }<br /> .vgr-infobox-desc {<br /> margin-top: 6px;<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> table.vgr-infobox th[scope=&quot;row&quot;] {<br /> width: 5.5em;<br /> padding: 7px 8px 7px 12px;<br /> text-align: left;<br /> vertical-align: top;<br /> white-space: nowrap;<br /> font-size: 13px;<br /> font-weight: 600;<br /> color: var(--ink-muted);<br /> background: transparent;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox td {<br /> padding: 7px 12px 7px 8px;<br /> vertical-align: top;<br /> border-top: 1px solid var(--rule);<br /> }<br /> table.vgr-infobox .vgr-infobox-media td { border-top: none; }<br /> table.vgr-infobox td p { margin: 0; }<br /> @media screen and (max-width: 850px) {<br /> table.vgr-infobox {<br /> float: none;<br /> width: 100%;<br /> margin: 0 0 1.5em;<br /> }<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Hjf-meta-description&diff=187 MediaWiki:Hjf-meta-description 2026-10-12T21:26:44Z <p>PlurimodSU: Create the page</p> <hr /> <div>HUIJIA FUN is a portfolio and archive created by Marina Malinti, featuring the Gesamtkunstwerk-style work Verdant Green Revelation as well as archives based on the Beijing Huijia Private School.</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.css&diff=186 MediaWiki:Common.css 2026-10-12T10:03:35Z <p>PlurimodSU: Pre-Diphic Font Important</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)<br /> * Design language: VGR Design System - v2<br /> *<br /> * v2: Main Page cards, comments and profile pages are written from scratch for this site;<br /> * all pink is gone; no resources are loaded from other wikis, and no other site<br /> * is named in these comments.<br /> *<br /> * Attribution:<br /> * - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes<br /> * - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Fonts<br /> * ===================================================================== */<br /> <br /> /* Pre-Diphic Mono: the in-world language of the VGR series.<br /> The font file lives on huijia.fun. Browsers only load a cross-origin font when the server<br /> sends an Access-Control-Allow-Origin header, so /fonts/ on huijia.fun must allow<br /> https://en.huijia.fun (or upload the same file under en.huijia.fun/fonts/ and point here). */<br /> @font-face {<br /> font-family: &quot;Pre-Diphic Mono&quot;;<br /> src: url(&quot;https://huijia.fun/fonts/PreDiphicMono-1.1.woff2&quot;) format(&quot;woff2&quot;);<br /> font-display: swap;<br /> }<br /> .pd {<br /> font-family: &quot;Pre-Diphic Mono&quot;, sans-serif !important;<br /> font-feature-settings: &quot;rlig&quot; 1, &quot;ccmp&quot; 1;<br /> line-height: 1;<br /> }<br /> <br /> /* {{PD}} vertical text: Module:PreDiphic splits the text into fixed-length columns (.pd-col);<br /> columns run left to right and wrap to a new row at the right edge of the content, no scrollbar */<br /> .pd-cols {<br /> display: inline-flex;<br /> flex-wrap: wrap;<br /> align-items: flex-start;<br /> vertical-align: top;<br /> max-width: 100%;<br /> column-gap: 0.25em;<br /> row-gap: 0.75em;<br /> }<br /> /* Each column stays within the visible window height (minus header and margins); the<br /> height parameter overrides this cap. 100svh = visible height with the mobile address bar<br /> shown, matching the column logic in Common.js; browsers without svh fall back to 100vh. */<br /> .pd-col {<br /> writing-mode: vertical-lr;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Single vertical span (the typer page's &quot;Copy as HTML&quot; output): top-aligned, within window height */<br /> .pd-v {<br /> writing-mode: vertical-lr;<br /> vertical-align: top;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Huiwen Mincho: work titles and chapter titles (--font-display).<br /> The file name is percent-encoded so this file stays ASCII-only. */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule<br /> never took effect. Kept now that it is fixed; delete it once no page uses it. */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a<br /> Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System<br /> no longer uses. If a page still needs one, upload the font file to this site first. */<br /> <br /> /* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.<br /> The loli.net mirror keeps them loading for visitors in mainland China. */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens (site default = Archive Zone &quot;paper&quot; palette)<br /> * Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* Primary-color variables read by the skin and extensions: all point to Huijia Green */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. General utilities<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* Custom link: underline on hover */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* Two-column layouts<br /> In the old #left-column-0.3 the &quot;.&quot; was read as a class selector, so those rules never<br /> matched. The escaped form below matches id=&quot;left-column-0.3&quot; without changing any page. */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* Main Page: hide the page title, page tabs, variant menu and category bar */<br /> body.page-Main_Page #firstHeading,<br /> body.page-Main_Page #siteSub,<br /> body.page-Main_Page li#ca-talk,<br /> body.page-Main_Page li#ca-watch,<br /> body.page-Main_Page li#ca-unwatch,<br /> body.page-Main_Page li#ca-history,<br /> body.page-Main_Page li#ca-nstab-main,<br /> body.page-Main_Page li#ca-viewsource,<br /> body.page-Main_Page li#ca-view,<br /> body.page-Main_Page #p-variants,<br /> body.page-Main_Page #p-variants-desktop-label,<br /> body.page-Main_Page #catlinks-sidebar,<br /> body.page-Main_Page #mw-normal-catlinks { display: none !important; }<br /> <br /> /* Scroll-to-top / bottom buttons */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* Repost badge */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Spoiler blackout (adapted from Moegirlpedia)<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Info boxes<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* Upload page: info box layout fix */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. Tables<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* Light green table (old class name kept, now reads the variables) */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar (adapted from Wikipedia)<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;: &quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; \00B7 &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot; (&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;)&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)<br /> * Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.<br /> * ===================================================================== */<br /> .rec-grid {<br /> display: grid;<br /> gap: var(--space-3, 12px);<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> .rec-card {<br /> padding: 12px 16px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }<br /> .rec-card-title a { color: inherit; }<br /> .rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }<br /> .rec-link {<br /> padding: 8px 12px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> transition: border-color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .rec-link a { color: var(--ink); }<br /> .rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* Compatibility layer: the old mini-block class names. Some templates still use them<br /> (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those<br /> templates have moved to rec-card / rec-link. */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. Forms, notifications, profile pages<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. Comments (FlowThread): site colors only; layout is left to the extension<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 11. Notice box {{Notice}}: .vgr-notice<br /> * All colors read the theme variables, so it works under Theme-HJ / Theme-STR / Theme-VGR.<br /> * Default = zone color; is-warning = pending / warning; is-danger = spoiler / error.<br /> * There is always a text label on the left, so color is never the only signal.<br /> * ===================================================================== */<br /> .vgr-notice {<br /> --notice-c: var(--zone-accent, var(--accent));<br /> display: grid;<br /> grid-template-columns: auto minmax(0, 1fr);<br /> gap: 6px 16px;<br /> box-sizing: border-box;<br /> max-width: 100%;<br /> margin: 1em 0;<br /> padding: 12px 16px;<br /> background: var(--paper-sunk);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--notice-c);<br /> border-radius: 0;<br /> }<br /> /* Amber: mixed with the current text color, so it darkens on light themes and lightens on dark ones */<br /> .vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }<br /> /* Red: each theme's red-link color */<br /> .vgr-notice.is-danger { --notice-c: var(--link-new); }<br /> <br /> .vgr-notice-side {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 6px;<br /> min-width: 3em;<br /> padding-top: 3px;<br /> }<br /> .vgr-notice-tag {<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> line-height: 1.4;<br /> white-space: nowrap;<br /> color: var(--notice-c);<br /> }<br /> .vgr-notice-icon { line-height: 1; color: var(--notice-c); }<br /> .vgr-notice-icon .md,<br /> .vgr-notice-icon .md-lg,<br /> .vgr-notice-icon .md-md,<br /> .vgr-notice-icon .material-icons { font-size: 26px; }<br /> .vgr-notice-icon img { max-width: 32px; height: auto; }<br /> <br /> .vgr-notice-main { min-width: 0; }<br /> .vgr-notice-title {<br /> font-family: var(--font-serif);<br /> font-size: 16px;<br /> font-weight: 600;<br /> line-height: 1.6;<br /> color: var(--ink);<br /> }<br /> #mw-content .vgr-notice-body,<br /> #mw-content .vgr-notice-body p,<br /> .vgr-notice-body,<br /> .vgr-notice-body p {<br /> margin: 0;<br /> font-size: 14px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> }<br /> .vgr-notice-body &gt; p + p { margin-top: 0.5em; }<br /> .vgr-notice-below {<br /> grid-column: 1 / -1;<br /> margin-top: 4px;<br /> padding-top: 8px;<br /> border-top: 1px solid var(--rule);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.js&diff=185 MediaWiki:Common.js 2026-10-12T09:41:57Z <p>PlurimodSU: Update</p> <hr /> <div>/**<br /> * HUIJIA FUN (EN) - MediaWiki:Common.js - v2.1: adds Pre-Diphic font support<br /> * Loaded on every page, so only code that is actually in use lives here:<br /> * 1. Tables using the old class=&quot;collapsible&quot; -&gt; MediaWiki's built-in mw-collapsible<br /> * 2. autocollapse / innercollapse support for mw-collapsible<br /> * 3. Pre-Diphic typer page: loads the typer only on pages containing #pd-typer<br /> * 4. Pre-Diphic vertical text: automatic column layout<br /> * Removed:<br /> * - the console banner printed on every page load (it carried another wiki's name);<br /> * - the NavFrame toggle function (only the function was defined, nothing ever created<br /> * the toggle buttons, so it never ran).<br /> * Parts 1 and 2 are adapted from en.wikipedia.org MediaWiki:Common.js (CC BY-SA).<br /> */<br /> /* global mw, $ */<br /> mw.loader.using( [ 'mediawiki.util' ] ).done( function () {<br /> <br /> // 1. class=&quot;collapsible&quot; -&gt; mw-collapsible<br /> function makeCollapsibleMwCollapsible( $content ) {<br /> var $tables = $content<br /> .find( 'table.collapsible:not(.mw-collapsible)' )<br /> .addClass( 'mw-collapsible' );<br /> <br /> $tables.each( function () {<br /> if ( $( this ).hasClass( 'collapsed' ) ) {<br /> $( this ).addClass( 'mw-collapsed' );<br /> }<br /> } );<br /> if ( $tables.length ) {<br /> mw.loader.using( 'jquery.makeCollapsible' ).then( function () {<br /> $tables.makeCollapsible();<br /> } );<br /> }<br /> }<br /> mw.hook( 'wikipage.content' ).add( makeCollapsibleMwCollapsible );<br /> <br /> // 2. autocollapse (collapse when a page has two or more) and innercollapse (collapse inside outercollapse)<br /> function mwCollapsibleSetup( $collapsibleContent ) {<br /> var autoCollapseThreshold = 2;<br /> $collapsibleContent.each( function () {<br /> var $element = $( this ),<br /> $toggle;<br /> if ( $element.hasClass( 'collapsible' ) ) {<br /> $element.find( 'tr:first &gt; th:first' ).prepend( $element.find( 'tr:first &gt; * &gt; .mw-collapsible-toggle' ) );<br /> }<br /> if ( $collapsibleContent.length &gt;= autoCollapseThreshold &amp;&amp; $element.hasClass( 'autocollapse' ) ) {<br /> $element.data( 'mw-collapsible' ).collapse();<br /> } else if ( $element.hasClass( 'innercollapse' ) &amp;&amp; $element.parents( '.outercollapse' ).length ) {<br /> $element.data( 'mw-collapsible' ).collapse();<br /> }<br /> // On colored header backgrounds, the toggle link takes the text color to keep contrast<br /> $toggle = $element.find( '.mw-collapsible-toggle' );<br /> if ( $toggle.length &amp;&amp; $toggle.parent()[ 0 ].style.color ) {<br /> $toggle.find( 'a' ).css( 'color', 'inherit' );<br /> }<br /> } );<br /> }<br /> mw.hook( 'wikipage.collapsibleContent' ).add( mwCollapsibleSetup );<br /> } );<br /> <br /> /* ===== 3. Pre-Diphic typer page: load the typer only on pages containing #pd-typer ===== */<br /> mw.hook( 'wikipage.content' ).add( function ( $content ) {<br /> if ( window.pdTyperLoading || !$content.find( '#pd-typer' ).length ) return;<br /> window.pdTyperLoading = true;<br /> var s = mw.config.get( 'wgScript' );<br /> mw.loader.load( s + '?title=MediaWiki:PreDiphicTyper.css&amp;action=raw&amp;ctype=text/css', 'text/css' );<br /> mw.loader.load( s + '?title=MediaWiki:PreDiphicTyper.js&amp;action=raw&amp;ctype=text/javascript' );<br /> } );<br /> <br /> /* ===== 4. Pre-Diphic vertical text: automatic columns =====<br /> * When {{PD}} has no per-column count or height set (it carries data-pd-auto), the text is<br /> * regrouped into columns for the screen: column height = visible window height - 120px,<br /> * independent of font size, and re-laid out when the window is resized.<br /> * Module:PreDiphic has already split the text into words (.pd-w, data-n = number of cells);<br /> * this only regroups them and does not convert anything again.<br /> *<br /> * On phones the address bar hides and shows while scrolling, which changes window.innerHeight<br /> * and fires resize; using it would make the vertical text re-flow and jump while scrolling.<br /> * So this uses documentElement.clientHeight (unaffected by the address bar, matching CSS 100svh)<br /> * and only re-lays out when the width changes or the height changes by more than 100px. */<br /> ( function () {<br /> var CELL_EM = 0.8; // each cell is about 0.8em tall (glyph height 800 units)<br /> var MARGIN = 120; // room for the header and margins; matches .pd-col max-height in Common.css<br /> <br /> function viewH() {<br /> return document.documentElement.clientHeight || window.innerHeight;<br /> }<br /> <br /> function collect( box ) {<br /> var paras = [], cur = null;<br /> Array.prototype.forEach.call( box.children, function ( col ) {<br /> if ( !cur || col.classList.contains( 'pd-nl' ) ) { cur = []; paras.push( cur ); }<br /> Array.prototype.forEach.call( col.querySelectorAll( '.pd-w' ), function ( w ) {<br /> var n = Number( w.getAttribute( 'data-n' ) ) || 1;<br /> if ( w.getAttribute( 'data-c' ) &amp;&amp; cur.length ) {<br /> // rejoin the half of a word that was split from the previous column<br /> cur[ cur.length - 1 ].t += w.textContent;<br /> cur[ cur.length - 1 ].n += n;<br /> } else {<br /> cur.push( { t: w.textContent, n: n } );<br /> }<br /> } );<br /> } );<br /> return paras;<br /> }<br /> <br /> function layout( box ) {<br /> var fs = parseFloat( window.getComputedStyle( box ).fontSize ) || 32;<br /> var per = Math.max( 1, Math.floor( ( viewH() - MARGIN ) / ( fs * CELL_EM ) ) );<br /> if ( box.pdPer === per ) return;<br /> box.pdPer = per;<br /> if ( !box.pdParas ) box.pdParas = collect( box );<br /> <br /> var frag = document.createDocumentFragment();<br /> box.pdParas.forEach( function ( words ) {<br /> var col = null, used = 0;<br /> words.forEach( function ( w ) {<br /> if ( !col || ( used &gt; 0 &amp;&amp; used + w.n &gt; per ) ) {<br /> col = document.createElement( 'span' );<br /> col.className = 'pd-col';<br /> frag.appendChild( col );<br /> used = 0;<br /> } else {<br /> col.appendChild( document.createTextNode( ' ' ) ); // word boundary<br /> }<br /> var s = document.createElement( 'span' );<br /> s.className = 'pd-w';<br /> s.textContent = w.t;<br /> col.appendChild( s );<br /> used += w.n; // a word longer than a full column gets its own column; .pd-col max-height is the fallback<br /> } );<br /> } );<br /> box.textContent = '';<br /> box.appendChild( frag );<br /> }<br /> <br /> function layoutAll( root ) {<br /> Array.prototype.forEach.call( ( root || document ).querySelectorAll( '.pd-cols[data-pd-auto]' ), layout );<br /> }<br /> <br /> mw.hook( 'wikipage.content' ).add( function ( $content ) { layoutAll( $content[ 0 ] ); } );<br /> <br /> var timer, lastW = window.innerWidth, lastH = viewH();<br /> window.addEventListener( 'resize', function () {<br /> var w = window.innerWidth, h = viewH();<br /> if ( w === lastW &amp;&amp; Math.abs( h - lastH ) &lt; 100 ) return; // only the address bar moved: no re-layout<br /> lastW = w;<br /> lastH = h;<br /> clearTimeout( timer );<br /> timer = setTimeout( function () { layoutAll(); }, 150 );<br /> } );<br /> }() );<br /> <br /> /* DO NOT ADD CODE BELOW THIS LINE */</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.css&diff=184 MediaWiki:Common.css 2026-10-12T09:41:42Z <p>PlurimodSU: Update</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)<br /> * Design language: VGR Design System - v2<br /> *<br /> * v2: Main Page cards, comments and profile pages are written from scratch for this site;<br /> * all pink is gone; no resources are loaded from other wikis, and no other site<br /> * is named in these comments.<br /> *<br /> * Attribution:<br /> * - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes<br /> * - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Fonts<br /> * ===================================================================== */<br /> <br /> /* Pre-Diphic Mono: the in-world language of the VGR series.<br /> The font file lives on huijia.fun. Browsers only load a cross-origin font when the server<br /> sends an Access-Control-Allow-Origin header, so /fonts/ on huijia.fun must allow<br /> https://en.huijia.fun (or upload the same file under en.huijia.fun/fonts/ and point here). */<br /> @font-face {<br /> font-family: &quot;Pre-Diphic Mono&quot;;<br /> src: url(&quot;https://huijia.fun/fonts/PreDiphicMono-1.1.woff2&quot;) format(&quot;woff2&quot;);<br /> font-display: swap;<br /> }<br /> .pd {<br /> font-family: &quot;Pre-Diphic Mono&quot;, sans-serif;<br /> font-feature-settings: &quot;rlig&quot; 1, &quot;ccmp&quot; 1;<br /> line-height: 1;<br /> }<br /> <br /> /* {{PD}} vertical text: Module:PreDiphic splits the text into fixed-length columns (.pd-col);<br /> columns run left to right and wrap to a new row at the right edge of the content, no scrollbar */<br /> .pd-cols {<br /> display: inline-flex;<br /> flex-wrap: wrap;<br /> align-items: flex-start;<br /> vertical-align: top;<br /> max-width: 100%;<br /> column-gap: 0.25em;<br /> row-gap: 0.75em;<br /> }<br /> /* Each column stays within the visible window height (minus header and margins); the<br /> height parameter overrides this cap. 100svh = visible height with the mobile address bar<br /> shown, matching the column logic in Common.js; browsers without svh fall back to 100vh. */<br /> .pd-col {<br /> writing-mode: vertical-lr;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Single vertical span (the typer page's &quot;Copy as HTML&quot; output): top-aligned, within window height */<br /> .pd-v {<br /> writing-mode: vertical-lr;<br /> vertical-align: top;<br /> max-height: calc(100vh - 120px);<br /> max-height: calc(100svh - 120px);<br /> }<br /> <br /> /* Huiwen Mincho: work titles and chapter titles (--font-display).<br /> The file name is percent-encoded so this file stays ASCII-only. */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule<br /> never took effect. Kept now that it is fixed; delete it once no page uses it. */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a<br /> Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System<br /> no longer uses. If a page still needs one, upload the font file to this site first. */<br /> <br /> /* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.<br /> The loli.net mirror keeps them loading for visitors in mainland China. */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens (site default = Archive Zone &quot;paper&quot; palette)<br /> * Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* Primary-color variables read by the skin and extensions: all point to Huijia Green */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. General utilities<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* Custom link: underline on hover */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* Two-column layouts<br /> In the old #left-column-0.3 the &quot;.&quot; was read as a class selector, so those rules never<br /> matched. The escaped form below matches id=&quot;left-column-0.3&quot; without changing any page. */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* Main Page: hide the page title, page tabs, variant menu and category bar */<br /> body.page-Main_Page #firstHeading,<br /> body.page-Main_Page #siteSub,<br /> body.page-Main_Page li#ca-talk,<br /> body.page-Main_Page li#ca-watch,<br /> body.page-Main_Page li#ca-unwatch,<br /> body.page-Main_Page li#ca-history,<br /> body.page-Main_Page li#ca-nstab-main,<br /> body.page-Main_Page li#ca-viewsource,<br /> body.page-Main_Page li#ca-view,<br /> body.page-Main_Page #p-variants,<br /> body.page-Main_Page #p-variants-desktop-label,<br /> body.page-Main_Page #catlinks-sidebar,<br /> body.page-Main_Page #mw-normal-catlinks { display: none !important; }<br /> <br /> /* Scroll-to-top / bottom buttons */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* Repost badge */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Spoiler blackout (adapted from Moegirlpedia)<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Info boxes<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* Upload page: info box layout fix */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. Tables<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* Light green table (old class name kept, now reads the variables) */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar (adapted from Wikipedia)<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;: &quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; \00B7 &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot; (&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;)&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)<br /> * Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.<br /> * ===================================================================== */<br /> .rec-grid {<br /> display: grid;<br /> gap: var(--space-3, 12px);<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> .rec-card {<br /> padding: 12px 16px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }<br /> .rec-card-title a { color: inherit; }<br /> .rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }<br /> .rec-link {<br /> padding: 8px 12px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> transition: border-color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .rec-link a { color: var(--ink); }<br /> .rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* Compatibility layer: the old mini-block class names. Some templates still use them<br /> (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those<br /> templates have moved to rec-card / rec-link. */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. Forms, notifications, profile pages<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. Comments (FlowThread): site colors only; layout is left to the extension<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 11. Notice box {{Notice}}: .vgr-notice<br /> * All colors read the theme variables, so it works under Theme-HJ / Theme-STR / Theme-VGR.<br /> * Default = zone color; is-warning = pending / warning; is-danger = spoiler / error.<br /> * There is always a text label on the left, so color is never the only signal.<br /> * ===================================================================== */<br /> .vgr-notice {<br /> --notice-c: var(--zone-accent, var(--accent));<br /> display: grid;<br /> grid-template-columns: auto minmax(0, 1fr);<br /> gap: 6px 16px;<br /> box-sizing: border-box;<br /> max-width: 100%;<br /> margin: 1em 0;<br /> padding: 12px 16px;<br /> background: var(--paper-sunk);<br /> color: var(--ink);<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--notice-c);<br /> border-radius: 0;<br /> }<br /> /* Amber: mixed with the current text color, so it darkens on light themes and lightens on dark ones */<br /> .vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }<br /> /* Red: each theme's red-link color */<br /> .vgr-notice.is-danger { --notice-c: var(--link-new); }<br /> <br /> .vgr-notice-side {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 6px;<br /> min-width: 3em;<br /> padding-top: 3px;<br /> }<br /> .vgr-notice-tag {<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.12em;<br /> line-height: 1.4;<br /> white-space: nowrap;<br /> color: var(--notice-c);<br /> }<br /> .vgr-notice-icon { line-height: 1; color: var(--notice-c); }<br /> .vgr-notice-icon .md,<br /> .vgr-notice-icon .md-lg,<br /> .vgr-notice-icon .md-md,<br /> .vgr-notice-icon .material-icons { font-size: 26px; }<br /> .vgr-notice-icon img { max-width: 32px; height: auto; }<br /> <br /> .vgr-notice-main { min-width: 0; }<br /> .vgr-notice-title {<br /> font-family: var(--font-serif);<br /> font-size: 16px;<br /> font-weight: 600;<br /> line-height: 1.6;<br /> color: var(--ink);<br /> }<br /> #mw-content .vgr-notice-body,<br /> #mw-content .vgr-notice-body p,<br /> .vgr-notice-body,<br /> .vgr-notice-body p {<br /> margin: 0;<br /> font-size: 14px;<br /> line-height: 1.8;<br /> color: var(--ink-muted);<br /> }<br /> .vgr-notice-body &gt; p + p { margin-top: 0.5em; }<br /> .vgr-notice-below {<br /> grid-column: 1 / -1;<br /> margin-top: 4px;<br /> padding-top: 8px;<br /> border-top: 1px solid var(--rule);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.css&diff=183 MediaWiki:Common.css 2026-10-09T22:31:02Z <p>PlurimodSU: Main Page Category Visibility</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)<br /> * Design language: VGR Design System - v2<br /> *<br /> * v2: Main Page cards, comments and profile pages are written from scratch for this site;<br /> * all pink is gone; no resources are loaded from other wikis, and no other site<br /> * is named in these comments.<br /> *<br /> * Attribution:<br /> * - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes<br /> * - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Fonts<br /> * ===================================================================== */<br /> <br /> /* Huiwen Mincho: work titles and chapter titles (--font-display).<br /> The file name is percent-encoded so this file stays ASCII-only. */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule<br /> never took effect. Kept now that it is fixed; delete it once no page uses it. */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a<br /> Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System<br /> no longer uses. If a page still needs one, upload the font file to this site first. */<br /> <br /> /* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.<br /> The loli.net mirror keeps them loading for visitors in mainland China. */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens (site default = Archive Zone &quot;paper&quot; palette)<br /> * Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* Primary-color variables read by the skin and extensions: all point to Huijia Green */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. General utilities<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* Custom link: underline on hover */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* Two-column layouts<br /> In the old #left-column-0.3 the &quot;.&quot; was read as a class selector, so those rules never<br /> matched. The escaped form below matches id=&quot;left-column-0.3&quot; without changing any page. */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* Main Page: hide the page title, page tabs and category bar */<br /> body.page-Main_Page #firstHeading,<br /> body.page-Main_Page #siteSub,<br /> body.page-Main_Page li#ca-talk,<br /> body.page-Main_Page li#ca-watch,<br /> body.page-Main_Page li#ca-unwatch,<br /> body.page-Main_Page li#ca-history,<br /> body.page-Main_Page li#ca-nstab-main,<br /> body.page-Main_Page li#ca-viewsource,<br /> body.page-Main_Page li#ca-view { display: none !important; }<br /> <br /> /* Scroll-to-top / bottom buttons */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* Repost badge */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Spoiler blackout (adapted from Moegirlpedia)<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Info boxes<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* Upload page: info box layout fix */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. Tables<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* Light green table (old class name kept, now reads the variables) */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar (adapted from Wikipedia)<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;: &quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; \00B7 &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot; (&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;)&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)<br /> * Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.<br /> * ===================================================================== */<br /> .rec-grid {<br /> display: grid;<br /> gap: var(--space-3, 12px);<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> .rec-card {<br /> padding: 12px 16px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }<br /> .rec-card-title a { color: inherit; }<br /> .rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }<br /> .rec-link {<br /> padding: 8px 12px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> transition: border-color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .rec-link a { color: var(--ink); }<br /> .rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* Compatibility layer: the old mini-block class names. Some templates still use them<br /> (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those<br /> templates have moved to rec-card / rec-link. */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. Forms, notifications, profile pages<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. Comments (FlowThread): site colors only; layout is left to the extension<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.css&diff=182 MediaWiki:Common.css 2026-10-09T22:23:35Z <p>PlurimodSU: New System</p> <hr /> <div>/* =====================================================================<br /> * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)<br /> * Design language: VGR Design System - v2<br /> *<br /> * v2: Main Page cards, comments and profile pages are written from scratch for this site;<br /> * all pink is gone; no resources are loaded from other wikis, and no other site<br /> * is named in these comments.<br /> *<br /> * Attribution:<br /> * - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes<br /> * - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton<br /> * ===================================================================== */<br /> <br /> <br /> /* =====================================================================<br /> * 1. Fonts<br /> * ===================================================================== */<br /> <br /> /* Huiwen Mincho: work titles and chapter titles (--font-display).<br /> The file name is percent-encoded so this file stays ASCII-only. */<br /> @font-face {<br /> font-family: 'Huiwen';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule<br /> never took effect. Kept now that it is fixed; delete it once no page uses it. */<br /> @font-face {<br /> font-family: 'Yuesong';<br /> src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');<br /> font-display: swap;<br /> }<br /> <br /> /* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a<br /> Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System<br /> no longer uses. If a page still needs one, upload the font file to this site first. */<br /> <br /> /* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.<br /> The loli.net mirror keeps them loading for visitors in mainland China. */<br /> @font-face {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: 400;<br /> font-display: block;<br /> src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');<br /> }<br /> .md, .md-lg, .md-md, .md-sm, .material-icons {<br /> font-family: 'Material Icons';<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 24px;<br /> line-height: 1;<br /> letter-spacing: normal;<br /> text-transform: none;<br /> white-space: nowrap;<br /> direction: ltr;<br /> display: inline-block;<br /> user-select: none;<br /> font-feature-settings: 'liga';<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> .md-lg { font-size: 60px; }<br /> .md-md { font-size: 30px; }<br /> .md-sm { font-size: 10px; }<br /> <br /> <br /> /* =====================================================================<br /> * 2. VGR tokens (site default = Archive Zone &quot;paper&quot; palette)<br /> * Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.<br /> * ===================================================================== */<br /> :root {<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --heading-bar: #C8D8C8;<br /> --dot: #A3B1A8;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> <br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> --radius-xs: 2px;<br /> --radius-sm: 4px;<br /> <br /> /* Primary-color variables read by the skin and extensions: all point to Huijia Green */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> }<br /> <br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> }<br /> <br /> body { accent-color: var(--accent); }<br /> <br /> <br /> /* =====================================================================<br /> * 3. General utilities<br /> * ===================================================================== */<br /> <br /> .mw-collapsible.mw-collapsed { max-height: none; }<br /> <br /> p { word-break: normal; }<br /> <br /> cite { font-style: normal; }<br /> <br /> .res-img img { max-width: 100%; height: auto; }<br /> <br /> /* Custom link: underline on hover */<br /> .custom-link { text-decoration: none; color: inherit; }<br /> .custom-link:hover { text-decoration: underline; color: var(--link); }<br /> <br /> /* Two-column layouts<br /> In the old #left-column-0.3 the &quot;.&quot; was read as a class selector, so those rules never<br /> matched. The escaped form below matches id=&quot;left-column-0.3&quot; without changing any page. */<br /> #left-column { float: left; width: 49%; }<br /> #right-column { float: right; width: 49%; }<br /> #left-column-full { float: left; width: 50%; }<br /> #right-column-full { float: right; width: 50%; }<br /> #middle-column-full { margin: 0 auto; width: 50%; }<br /> #left-column-0\.3 { float: left; width: 29%; }<br /> #left-column-0\.7 { float: left; width: 69%; }<br /> #right-column-0\.3 { float: right; width: 29%; }<br /> #right-column-0\.7 { float: right; width: 69%; }<br /> <br /> @media screen and (max-width: 850px) {<br /> #left-column, #right-column,<br /> #left-column-full, #right-column-full, #middle-column-full,<br /> #left-column-0\.3, #left-column-0\.7,<br /> #right-column-0\.3, #right-column-0\.7,<br /> #user-page-left, #user-page-right {<br /> float: none;<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* Main Page: hide the page title, page tabs and category bar */<br /> body.page-Main_Page #firstHeading,<br /> body.page-Main_Page #siteSub,<br /> body.page-Main_Page li#ca-talk,<br /> body.page-Main_Page li#ca-watch,<br /> body.page-Main_Page li#ca-unwatch,<br /> body.page-Main_Page li#ca-history,<br /> body.page-Main_Page li#ca-nstab-main,<br /> body.page-Main_Page li#ca-viewsource,<br /> body.page-Main_Page li#ca-view,<br /> body.page-Main_Page #catlinks-sidebar,<br /> body.page-Main_Page #mw-normal-catlinks { display: none !important; }<br /> <br /> /* Scroll-to-top / bottom buttons */<br /> img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }<br /> img#scrollUpButton:hover { transform: scale(1.1); }<br /> img#scrollUpButton:active { transform: scale(.95); }<br /> img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }<br /> img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }<br /> <br /> /* Repost badge */<br /> .repost-circle {<br /> display: inline-block;<br /> margin-left: 5px;<br /> padding: 3px 6px;<br /> font-size: 12px;<br /> line-height: 1;<br /> color: var(--accent);<br /> border: 1px solid var(--accent);<br /> border-radius: var(--radius-xs);<br /> }<br /> .repost-circle a.external {<br /> background: none !important;<br /> padding-right: 0 !important;<br /> color: var(--accent) !important;<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 4. Spoiler blackout (adapted from Moegirlpedia)<br /> * ===================================================================== */<br /> .heimu,<br /> .heimu rt { background-color: #252525; }<br /> span.heimu a.external,<br /> span.heimu a.external:visited,<br /> span.heimu a.extiw,<br /> span.heimu a.extiw:visited { color: #252525; }<br /> .heimu,<br /> .heimu a,<br /> a .heimu,<br /> .heimu a.new { color: #252525; text-shadow: none; }<br /> body:not(.heimu_toggle_on) .heimu:hover,<br /> body:not(.heimu_toggle_on) .heimu:active,<br /> body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }<br /> body:not(.heimu_toggle_on) .heimu:hover a,<br /> body:not(.heimu_toggle_on) a:hover .heimu,<br /> body:not(.heimu_toggle_on) .heimu.off a,<br /> body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }<br /> body:not(.heimu_toggle_on) .heimu.off .new,<br /> body:not(.heimu_toggle_on) .heimu.off .new:hover,<br /> body:not(.heimu_toggle_on) .new:hover .heimu.off,<br /> body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }<br /> <br /> <br /> /* =====================================================================<br /> * 5. Info boxes<br /> * ===================================================================== */<br /> .infoBox {<br /> margin: 10px auto;<br /> width: 80%;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .infoBox a { word-break: normal; }<br /> .infoBoxTitle {<br /> margin: 3px auto;<br /> padding: 6px 0 0;<br /> text-align: center;<br /> font-weight: 700;<br /> color: var(--ink);<br /> }<br /> .infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }<br /> .infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }<br /> .infoBoxContent { border: 0; background: var(--paper-sunk); }<br /> .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }<br /> <br /> @media screen and (max-width: 850px) {<br /> .infoBox { float: unset !important; width: 100% !important; clear: both; }<br /> .infobox { width: 100%; margin: 0 0 2em; }<br /> }<br /> @media screen and (min-width: 851px) {<br /> .infobox { width: 300px; margin: 1em 0 30px 30px; }<br /> }<br /> <br /> .fieldset {<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-sm);<br /> padding: 0.35em 1.625em 0.75em;<br /> }<br /> <br /> /* Upload page: info box layout fix */<br /> .mw-special-Upload i.md { display: flex; }<br /> .mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }<br /> <br /> <br /> /* =====================================================================<br /> * 6. Tables<br /> * ===================================================================== */<br /> table.wikitable {<br /> width: 100%;<br /> margin: 1em 0;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> font-family: var(--font-sans);<br /> font-size: 0.95em;<br /> }<br /> table.wikitable &gt; tr &gt; th,<br /> table.wikitable &gt; * &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> table.wikitable &gt; tr &gt; td,<br /> table.wikitable &gt; * &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> line-height: 1.6;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); }<br /> <br /> /* Light green table (old class name kept, now reads the variables) */<br /> table.wikitable-green { background: var(--accent-tint); }<br /> .wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }<br /> .wikitable-green td { background: var(--paper-raised); }<br /> <br /> @media screen and (max-width: 768px) {<br /> table.wikitable { display: block; overflow-x: auto; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 7. hlist / navbox / navbar (adapted from Wikipedia)<br /> * ===================================================================== */<br /> .hlist dl, .hlist ol, .hlist ul { margin: 0; }<br /> .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }<br /> .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,<br /> .hlist dl dl, .hlist dl ol, .hlist dl ul,<br /> .hlist ol dl, .hlist ol ol, .hlist ol ul,<br /> .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }<br /> .hlist dt:after { content: &quot;: &quot;; }<br /> .hlist dd:after, .hlist li:after { content: &quot; \00B7 &quot;; font-weight: bold; }<br /> .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }<br /> .hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }<br /> .hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: &quot; (&quot;; }<br /> .hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: &quot;)&quot;; }<br /> .hlist.hnum ol li { counter-increment: level1; }<br /> .hlist.hnum ol li:before { content: counter(level1) &quot; &quot;; }<br /> .hlist.hnum ol ol li { counter-increment: level2; }<br /> .hlist.hnum ol ol li:before { content: counter(level2) &quot; &quot;; }<br /> <br /> /* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */<br /> .navbox {<br /> width: 100%;<br /> margin: auto;<br /> clear: both;<br /> font-size: 88%;<br /> text-align: center;<br /> padding: 1px;<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> background: var(--paper-raised);<br /> }<br /> .navbox-inner, .navbox-subgroup { width: 100%; }<br /> .navbox-subgroup { background: var(--paper-raised); }<br /> .navbox-list { border-color: var(--paper-raised); }<br /> .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }<br /> .navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }<br /> th.navbox-group { white-space: nowrap; text-align: right; }<br /> .navbox-even { background: var(--paper); }<br /> .navbox-odd { background: transparent; }<br /> table.navbox + table.navbox { margin-top: -1px; }<br /> .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,<br /> .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }<br /> .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }<br /> .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }<br /> ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }<br /> <br /> .navbar { display: inline; font-weight: normal; }<br /> .navbar ul { display: inline; white-space: nowrap; }<br /> .navbar li { word-spacing: -0.125em; }<br /> .navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }<br /> .navbox .navbar { display: block; }<br /> .navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }<br /> <br /> .collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }<br /> .navbox .collapseButton { width: 8em; }<br /> <br /> @media screen and (max-width: 850px) {<br /> th.navbox-group { white-space: normal; }<br /> th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)<br /> * Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.<br /> * ===================================================================== */<br /> .rec-grid {<br /> display: grid;<br /> gap: var(--space-3, 12px);<br /> margin: 0.8em 0 1.2em;<br /> }<br /> .rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> .rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }<br /> .rec-card {<br /> padding: 12px 16px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> }<br /> .rec-card:hover { border-left-color: var(--accent); }<br /> .rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }<br /> .rec-card-title a { color: inherit; }<br /> .rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }<br /> .rec-link {<br /> padding: 8px 12px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-left: 3px solid var(--rule-strong);<br /> transition: border-color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .rec-link a { color: var(--ink); }<br /> .rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }<br /> @media screen and (max-width: 850px) {<br /> .rec-grid-2 { grid-template-columns: 1fr; }<br /> .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }<br /> }<br /> <br /> /* Compatibility layer: the old mini-block class names. Some templates still use them<br /> (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those<br /> templates have moved to rec-card / rec-link. */<br /> .mini-block {<br /> box-sizing: border-box;<br /> width: 100%;<br /> padding: 16px;<br /> margin-top: 8px;<br /> background: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> }<br /> .mini-block p { margin: 0 0 1em; }<br /> .mini-block p:last-child { margin: 0; }<br /> .mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }<br /> .mini-block-container ul { margin: 0; padding: 0; }<br /> .mini-block-container li { list-style: none; margin: 0; }<br /> .mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }<br /> .mini-block-container li a:hover { color: var(--accent); }<br /> .mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }<br /> @media screen and (max-width: 850px) {<br /> .mini-block-container { flex-direction: column; }<br /> }<br /> <br /> <br /> /* =====================================================================<br /> * 9. Forms, notifications, profile pages<br /> * ===================================================================== */<br /> textarea {<br /> border-radius: var(--radius-sm);<br /> box-shadow: none;<br /> background-color: transparent;<br /> border: 1px solid var(--rule-strong);<br /> outline: none;<br /> }<br /> textarea:hover { border-color: var(--accent); }<br /> textarea:focus-visible {<br /> border-color: var(--accent);<br /> box-shadow: 0 0 0 2px var(--focus);<br /> }<br /> <br /> .mw-notification {<br /> border: 1px solid var(--rule);<br /> border-top: 2px solid var(--accent);<br /> border-radius: 0;<br /> box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);<br /> }<br /> <br /> .oo-ui-buttonElement.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;<br /> }<br /> <br /> /* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */<br /> .profile-tab-on { border-bottom: 2px solid var(--accent); }<br /> .profile-tab a, .profile-tab-on a { color: var(--ink) !important; }<br /> #profile-toggle-button {<br /> background-color: var(--accent-fill);<br /> border-radius: var(--radius-sm);<br /> padding: 5px 10px;<br /> }<br /> #profile-toggle-button a { color: var(--on-accent); }<br /> #profile-toggle-button:hover { background-color: #3B7E3D; }<br /> .profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }<br /> #profile-image img,<br /> .c-avatar img,<br /> .profile-info img { border-radius: 50%; }<br /> <br /> <br /> /* =====================================================================<br /> * 10. Comments (FlowThread): site colors only; layout is left to the extension<br /> * ===================================================================== */<br /> #flowthread .comment-submit {<br /> color: var(--on-accent);<br /> background-color: var(--accent-fill);<br /> border: 0;<br /> text-shadow: none;<br /> }<br /> #flowthread .comment-submit:hover { background-color: #3B7E3D; }<br /> #flowthread .comment-toolbar {<br /> background-color: var(--paper-sunk);<br /> border-color: var(--rule);<br /> }<br /> #flowthread .comment-replybox &gt; .comment-body { border-color: var(--rule-strong); }<br /> #flowthread .comment-user,<br /> #flowthread .comment-user a { color: var(--ink-muted); }<br /> #flowthread .comment-like[liked],<br /> #flowthread .comment-report[reported] { color: var(--accent); }</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Common.js&diff=181 MediaWiki:Common.js 2026-10-09T22:22:36Z <p>PlurimodSU: New System</p> <hr /> <div>/**<br /> * HUIJIA FUN (EN) - MediaWiki:Common.js - v2<br /> * Loaded on every page, so only the two parts actually in use are kept:<br /> * 1. Tables using the old class=&quot;collapsible&quot; -&gt; MediaWiki's built-in mw-collapsible<br /> * 2. autocollapse / innercollapse support for mw-collapsible<br /> * Removed:<br /> * - the console banner printed on every page load (it carried another wiki's name);<br /> * - the NavFrame toggle function (only the function was defined, nothing ever created<br /> * the toggle buttons, so it never ran).<br /> * Adapted from en.wikipedia.org MediaWiki:Common.js (CC BY-SA).<br /> */<br /> /* global mw, $ */<br /> mw.loader.using( [ 'mediawiki.util' ] ).done( function () {<br /> <br /> // 1. class=&quot;collapsible&quot; -&gt; mw-collapsible<br /> function makeCollapsibleMwCollapsible( $content ) {<br /> var $tables = $content<br /> .find( 'table.collapsible:not(.mw-collapsible)' )<br /> .addClass( 'mw-collapsible' );<br /> <br /> $tables.each( function () {<br /> if ( $( this ).hasClass( 'collapsed' ) ) {<br /> $( this ).addClass( 'mw-collapsed' );<br /> }<br /> } );<br /> if ( $tables.length ) {<br /> mw.loader.using( 'jquery.makeCollapsible' ).then( function () {<br /> $tables.makeCollapsible();<br /> } );<br /> }<br /> }<br /> mw.hook( 'wikipage.content' ).add( makeCollapsibleMwCollapsible );<br /> <br /> // 2. autocollapse (collapse when a page has two or more) and innercollapse (collapse inside outercollapse)<br /> function mwCollapsibleSetup( $collapsibleContent ) {<br /> var autoCollapseThreshold = 2;<br /> $collapsibleContent.each( function () {<br /> var $element = $( this ),<br /> $toggle;<br /> if ( $element.hasClass( 'collapsible' ) ) {<br /> $element.find( 'tr:first &gt; th:first' ).prepend( $element.find( 'tr:first &gt; * &gt; .mw-collapsible-toggle' ) );<br /> }<br /> if ( $collapsibleContent.length &gt;= autoCollapseThreshold &amp;&amp; $element.hasClass( 'autocollapse' ) ) {<br /> $element.data( 'mw-collapsible' ).collapse();<br /> } else if ( $element.hasClass( 'innercollapse' ) &amp;&amp; $element.parents( '.outercollapse' ).length ) {<br /> $element.data( 'mw-collapsible' ).collapse();<br /> }<br /> // On colored header backgrounds, the toggle link takes the text color to keep contrast<br /> $toggle = $element.find( '.mw-collapsible-toggle' );<br /> if ( $toggle.length &amp;&amp; $toggle.parent()[ 0 ].style.color ) {<br /> $toggle.find( 'a' ).css( 'color', 'inherit' );<br /> }<br /> } );<br /> }<br /> mw.hook( 'wikipage.collapsibleContent' ).add( mwCollapsibleSetup );<br /> } );<br /> /* DO NOT ADD CODE BELOW THIS LINE */</div> PlurimodSU https://en.huijia.fun/index.php?title=Main_Page&diff=180 Main Page 2026-10-06T04:52:52Z <p>PlurimodSU: New main page design</p> <hr /> <div>{{Theme-HJ}}__NOTOC__<br /> &lt;html&gt;&lt;style&gt;<br /> /* HUIJIA FUN Main Page (English): table-of-contents layout<br /> * Mirrors huijia.fun 首页. Reads only Theme-HJ tokens; no shadows; hover uses colour, accent rule and arrow shift. */<br /> <br /> h1.firstHeading {<br /> position: absolute !important;<br /> width: 1px; height: 1px;<br /> overflow: hidden;<br /> clip-path: inset(50%);<br /> white-space: nowrap;<br /> margin: 0 !important; padding: 0 !important;<br /> }<br /> <br /> .hf-home { max-width: 920px; margin: 0 auto; }<br /> .hf-home .hf-toc &gt; p, .hf-home .hf-start &gt; p { display: none; }<br /> <br /> /* —— Masthead —— */<br /> .hf-mast {<br /> text-align: center;<br /> padding: var(--space-8) var(--space-4) var(--space-6);<br /> margin-bottom: var(--space-8);<br /> border-bottom: 1px solid var(--rule);<br /> }<br /> .hf-mast-name {<br /> font-family: var(--font-latin);<br /> font-size: 44px;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> letter-spacing: 0.24em;<br /> padding-left: 0.24em;<br /> color: var(--accent);<br /> }<br /> .hf-mast-line {<br /> font-family: var(--font-serif);<br /> font-size: 17px;<br /> letter-spacing: 0.02em;<br /> color: var(--ink);<br /> margin-top: var(--space-2);<br /> }<br /> .hf-mast-meta {<br /> font-family: var(--font-sans);<br /> font-size: 13px;<br /> letter-spacing: 0.08em;<br /> color: var(--ink-muted);<br /> margin-top: var(--space-3);<br /> }<br /> .hf-mast-meta .hf-dot { margin: 0 var(--space-2); }<br /> <br /> /* —— Contents: area rows —— */<br /> .hf-toc {<br /> border-top: 2px solid var(--accent);<br /> margin-bottom: var(--space-8);<br /> }<br /> .hf-zone-block { border-bottom: 1px solid var(--rule); }<br /> <br /> .hf-row {<br /> position: relative;<br /> display: grid;<br /> grid-template-columns: 3.5em minmax(0, 1fr) 2em;<br /> gap: var(--space-4);<br /> align-items: center;<br /> padding: var(--space-4) var(--space-2);<br /> transition: background-color 0.2s ease;<br /> }<br /> .hf-row::before {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> left: 0; top: 0; bottom: 0;<br /> width: 3px;<br /> background: var(--accent);<br /> transform: scaleY(0);<br /> transform-origin: top;<br /> transition: transform 0.25s ease;<br /> }<br /> .hf-row:hover,<br /> .hf-row:focus-within { background-color: var(--accent-tint); }<br /> .hf-row:hover::before,<br /> .hf-row:focus-within::before { transform: scaleY(1); }<br /> <br /> .hf-num {<br /> font-family: var(--font-latin);<br /> font-size: 24px;<br /> font-weight: 600;<br /> color: var(--ink-muted);<br /> text-align: center;<br /> transition: color 0.2s ease;<br /> }<br /> .hf-row:hover .hf-num,<br /> .hf-row:focus-within .hf-num { color: var(--accent); }<br /> <br /> .hf-zone {<br /> font-family: var(--font-serif);<br /> font-size: 22px;<br /> font-weight: 600;<br /> }<br /> .hf-zone a { color: var(--ink) !important; }<br /> .hf-zone a::after {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> }<br /> .hf-alt {<br /> font-family: var(--font-serif);<br /> font-size: 14px;<br /> letter-spacing: 0.12em;<br /> color: var(--ink-muted);<br /> margin-left: var(--space-2);<br /> }<br /> .hf-desc {<br /> display: block;<br /> font-family: var(--font-body);<br /> font-size: 15px;<br /> line-height: 1.7;<br /> color: var(--ink-muted);<br /> margin-top: 2px;<br /> }<br /> .hf-arrow {<br /> font-family: var(--font-sans);<br /> font-size: 20px;<br /> color: var(--ink-muted);<br /> transition: transform 0.25s ease, color 0.2s ease;<br /> }<br /> .hf-row:hover .hf-arrow,<br /> .hf-row:focus-within .hf-arrow { transform: translateX(6px); color: var(--accent); }<br /> <br /> /* —— Sub-areas: one button per line —— */<br /> .hf-home ul.hf-subs {<br /> list-style: none;<br /> display: grid;<br /> gap: var(--space-1);<br /> margin: 0 0 var(--space-4);<br /> padding: 0 var(--space-2) 0 calc(3.5em + var(--space-4) + var(--space-2));<br /> }<br /> .hf-home ul.hf-subs li {<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> border-radius: var(--radius-sm);<br /> transition: background-color 0.4s cubic-bezier(0.22, 0.58, 0.12, 0.98);<br /> }<br /> .hf-home ul.hf-subs li a {<br /> position: relative;<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> padding: 10px 14px 10px 16px;<br /> font-family: var(--font-serif);<br /> font-size: 17px;<br /> letter-spacing: 0.04em;<br /> color: var(--ink) !important;<br /> text-decoration: none !important;<br /> transition: color 0.2s ease;<br /> }<br /> /* short accent rule on the left */<br /> .hf-home ul.hf-subs li a::before {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> left: 0; top: 8px; bottom: 8px;<br /> width: 2px;<br /> background: var(--accent);<br /> transform: scaleY(0);<br /> transition: transform 0.25s ease;<br /> }<br /> /* arrow on the right (hidden from screen readers) */<br /> .hf-home ul.hf-subs li a::after {<br /> content: &quot;→&quot;;<br /> content: &quot;→&quot; / &quot;&quot;;<br /> font-family: var(--font-sans);<br /> font-size: 15px;<br /> color: var(--ink-muted);<br /> transition: transform 0.25s ease, color 0.2s ease;<br /> }<br /> .hf-home ul.hf-subs li:hover,<br /> .hf-home ul.hf-subs li:focus-within { background-color: var(--accent-tint); }<br /> .hf-home ul.hf-subs li:active { background-color: var(--rule); }<br /> .hf-home ul.hf-subs li:hover a,<br /> .hf-home ul.hf-subs li:focus-within a { color: var(--accent) !important; }<br /> .hf-home ul.hf-subs li:hover a::before,<br /> .hf-home ul.hf-subs li:focus-within a::before { transform: scaleY(1); }<br /> .hf-home ul.hf-subs li:hover a::after,<br /> .hf-home ul.hf-subs li:focus-within a::after { transform: translateX(4px); color: var(--accent); }<br /> <br /> /* —— Start here —— */<br /> .hf-start {<br /> display: flex;<br /> flex-wrap: wrap;<br /> align-items: baseline;<br /> gap: var(--space-2) var(--space-4);<br /> padding: var(--space-3) var(--space-4);<br /> margin-bottom: var(--space-8);<br /> background: var(--paper-sunk);<br /> border-left: 3px solid var(--accent);<br /> font-family: var(--font-sans);<br /> font-size: 15px;<br /> }<br /> .hf-start-label {<br /> font-family: var(--font-serif);<br /> font-weight: 600;<br /> color: var(--ink);<br /> }<br /> <br /> /* —— Footer —— */<br /> .hf-foot {<br /> margin-top: var(--space-8);<br /> padding-top: var(--space-4);<br /> border-top: 1px solid var(--rule);<br /> font-family: var(--font-sans);<br /> font-size: 13px;<br /> line-height: 1.9;<br /> color: var(--ink-muted);<br /> }<br /> <br /> /* —— Keyboard focus —— */<br /> .hf-zone a:focus-visible { outline: none; }<br /> .hf-row:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> <br /> /* —— Mobile —— */<br /> @media screen and (max-width: 850px) {<br /> .hf-mast-name { font-size: 32px; letter-spacing: 0.14em; padding-left: 0.14em; }<br /> .hf-row { grid-template-columns: 2.5em minmax(0, 1fr) 1.5em; }<br /> .hf-home ul.hf-subs { padding-left: calc(2.5em + var(--space-4) + var(--space-2)); }<br /> }<br /> <br /> /* —— Reduced motion —— */<br /> @media (prefers-reduced-motion: reduce) {<br /> .hf-home *, .hf-home *::before, .hf-home *::after { transition: none !important; }<br /> .hf-row:hover .hf-arrow,<br /> .hf-home ul.hf-subs li:hover a::after { transform: none; }<br /> }<br /> &lt;/style&gt;&lt;/html&gt;<br /> &lt;div class=&quot;hf-home&quot;&gt;<br /> &lt;div class=&quot;hf-mast&quot;&gt;<br /> &lt;div class=&quot;hf-mast-name&quot;&gt;HUIJIA FUN&lt;/div&gt;<br /> &lt;div class=&quot;hf-mast-line&quot;&gt;Portfolio and archive of ''[[Verdant Green Revelation]]''&lt;/div&gt;<br /> &lt;div class=&quot;hf-mast-meta plainlinks&quot;&gt;Rooted in [[Beijing Huijia Private School|Huijia Academy]]&lt;span class=&quot;hf-dot&quot;&gt;·&lt;/span&gt;Chinese Branch: [https://huijia.fun huijia.fun]&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;hf-toc&quot;&gt;<br /> &lt;div class=&quot;hf-zone-block&quot;&gt;<br /> &lt;div class=&quot;hf-row&quot;&gt;&lt;div class=&quot;hf-num&quot;&gt;I&lt;/div&gt;&lt;div&gt;&lt;span class=&quot;hf-zone&quot;&gt;[[Canon Area]]&lt;/span&gt;&lt;span class=&quot;hf-desc&quot;&gt;The creative works of ''Verdant Green Revelation''&lt;/span&gt;&lt;/div&gt;&lt;span class=&quot;hf-arrow&quot; aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;hf-zone-block&quot;&gt;<br /> &lt;div class=&quot;hf-row&quot;&gt;&lt;div class=&quot;hf-num&quot;&gt;II&lt;/div&gt;&lt;div&gt;&lt;span class=&quot;hf-zone&quot;&gt;[[Worldview Area]]&lt;/span&gt;&lt;span class=&quot;hf-desc&quot;&gt;An encyclopedia of the world of Dipfield City&lt;/span&gt;&lt;/div&gt;&lt;span class=&quot;hf-arrow&quot; aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/div&gt;<br /> &lt;ul class=&quot;hf-subs&quot;&gt;<br /> &lt;li&gt;[[:Category:Mythology|Mythology]]&lt;/li&gt;<br /> &lt;li&gt;[[:Category:Entity|Entity]]&lt;/li&gt;<br /> &lt;li&gt;[[:Category:Cosmology|Cosmology]]&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;hf-zone-block&quot;&gt;<br /> &lt;div class=&quot;hf-row&quot;&gt;&lt;div class=&quot;hf-num&quot;&gt;III&lt;/div&gt;&lt;div&gt;&lt;span class=&quot;hf-zone&quot;&gt;[[Archive Area]]&lt;/span&gt;&lt;span class=&quot;hf-desc&quot;&gt;The real Huijia Academy&lt;/span&gt;&lt;/div&gt;&lt;span class=&quot;hf-arrow&quot; aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/div&gt;<br /> &lt;ul class=&quot;hf-subs&quot;&gt;<br /> &lt;li&gt;[[:Category:Record|Record]]&lt;/li&gt;<br /> &lt;li&gt;[[:Category:Origin|Origin]]&lt;/li&gt;<br /> &lt;li&gt;[[:Category:Tangent|Tangent]]&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;hf-start&quot;&gt;&lt;span class=&quot;hf-start-label&quot;&gt;First time here?&lt;/span&gt;[[Verdant Green Revelation|About the series]] [[Quick Guide]] [[Guidelines]]&lt;/div&gt;<br /> <br /> == About this site ==<br /> HUIJIA FUN began as a playful student wiki centred on [[Beijing Huijia Private School|Huijia Academy]]. Today it is the portfolio and archive of [[Marina Malinti]], and the home of ''[[Verdant Green Revelation]]'': a Gesamtkunstwerk (total artwork) series spanning novels, music albums, the constructed language [[Pre-Diphic]], and a world rooted in Huijia Academy.<br /> <br /> The site is non-profit, ad-free and membership-free. It is maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]], and its content is published under CC BY-SA.<br /> <br /> Before collaborating, please read the [[Guidelines]].<br /> &lt;div class=&quot;hf-foot&quot;&gt;<br /> Contact: a@huijia.fun&lt;br&gt;<br /> Thanks to: LastW!sh and Trooperr9863625badun (writing), Akatsuki0702 (framework), Bululu and JohnDing (world-building), 1S0d1uM1 and Hewu888 (articles)<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> [[Category:Hub]]</div> PlurimodSU https://en.huijia.fun/index.php?title=Main_Page&diff=178 Main Page 2026-10-04T05:25:10Z <p>PlurimodSU: Typo</p> <hr /> <div>&lt;html&gt;&lt;style&gt;<br /> .mini-block-portfolio {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-portfolio:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-portfolio .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-portfolio .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-portfolio .mini-block-title,<br /> .mini-block-portfolio .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-portfolio .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> <br /> .mini-block-canon {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-canon:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-canon .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-canon .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-canon .mini-block-title,<br /> .mini-block-canon .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-canon .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> &lt;/style&gt;&lt;/html&gt;<br /> {{Theme-HJ}}<br /> &lt;div style=&quot;font-size: 26px;margin-top: 6px;text-align: center;&quot;&gt;'''Welcome to「HUIJIA FUN - Rooted in Huijia School」'''&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 18px;margin-bottom: 6px;text-align: center;&quot;&gt;''The Parallel Universe Rooted in [[Beijing Huijia Private School|Huijia Academy]]'' - A Gesamtkunstwerk Work by [[Marina Malinti]]&lt;/div&gt;<br /> &lt;div style=&quot;font-family:Huiwen;text-align: center;&quot;&gt;TIP: THE ENGLISH BRANCH WEBSITE IS STILL UNDER THE BASIC CONSTRUCTION. PLEASE FORGIVE THE LOW COMPLETION RATE.&lt;br&gt;· Chinese Branch: https://huijia.fun&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;tabber&gt;<br /> |-|Website Information=<br /> &lt;br&gt;<br /> [[File:HUIJIA LOGO.png|150px|frameless|right]]<br /> &lt;span class=&quot;mini-block-title&quot;&gt;Welcome to HUIJIA FUN&lt;/span&gt;<br /> <br /> HUIJIA FUN began as a fan wiki dedicated to Beijing Huijia Private School and has since grown into something more. Today it serves as the '''official archive and Intellectual Property''' of [[Marina Malinti]] built upon the culture of Huijia as its spiritual origin and also get recognized by Huijia's principal.<br /> <br /> Whatever, This site is home to the '''[[Verdant Green Revelation]]''': A Gesamtkunstwerk (Total Art) IP encompassing novel series, music albums, constructed language [[Pre-Diphic]], OtoMAD works and even a speculative worldview rooted in Huijia Academy.<br /> <br /> This website is '''non-profit''' '''non-advertisement''' and '''non-membership'''. It is largely created and maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]]. For questions or consultation please contact me directly through: a@huijia.fun<br /> <br /> |-|Create a Page=<br /> &lt;br&gt;<br /> &lt;div style=&quot;text-align:center&quot;&gt; '''Remember! This website is publicly accessible on the internet!'''<br /> <br /> I fully support and actively encourage fan editing. To ensure resource reliability information neutrality and compliance with the '''Creative Commons''' license and copyright, please make sure you have read the [[Guideline]] and understand the community and editing rules. Before writing a page, please be aware that this site follows the '''CC BY-SA''' license and maintains relatively rigorous content standards.<br /> <br /> Ready? Create a page through the section below!<br /> {{#createpage:}}<br /> &lt;/div&gt;<br /> &lt;/tabber&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block mini-block-canon&quot; style=&quot;border-left: 4px solid #025F32;&quot;&gt;<br /> &lt;div class=&quot;mini-block-fulllink&quot;&gt;[[:Category:Canon]]&lt;/div&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Canon&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;center&gt;<br /> &lt;div style=&quot;font-family: 'Noto Serif SC', serif; margin: 1.6em 1em 1.2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 28px; font-weight: 600; letter-spacing: 0.06em; color: #025F32; text-shadow: 0 1px 3px rgba(2,95,50,0.15);&quot;&gt;墨绿色的启示录&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8fa896; margin-top: 4px;&quot;&gt;Verdant Green Revelation&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 15px; opacity: 0.75; margin-top: 0.8em; font-style: italic;&quot;&gt;VGR Portfolio：Everything is still unfolding&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/center&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Setting&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Setting Area]]&lt;/span&gt;<br /> <br /> ''The fictional universe of VGR - myths, mankind, and canons.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Mythology|Mythology]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Entity|Entity]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Cosmology|Cosmology]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Archive&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Archive Area]]&lt;/span&gt;<br /> <br /> ''The real Huijia - documents, footage, and the origin of it all.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Record|Record]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Origin|Origin]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Tangent|Tangent]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Quick Guide&lt;/big&gt;<br /> <br /> ''[[Quick Guide|Click here to jump to the Quick Guide]]''.<br /> <br /> Welcome - whether you arrived from [[Dipfield City]] or the Eartho.<br /> <br /> HUIJIA FUN is the web centers on the Gesamtkunstwerk IP [[Verdant Green Revelation]], derived from the culture of [[Beijing Huijia Private School|Huijia Academy]]. It's organized into three areas. The '''[[Portfolio Area]]''' collects the creative output: novels, music albums and more - if it was made, it lives here. The '''[[Worldview Area]]''' documents the fictional universe: its myths ('''Mythos''') groups and places ('''Entity''') and canonical settings ('''Lore'''). The '''[[Archive Area]]''' preserves the real Huijia: historical documents ('''Record''') original footage and campus materials ('''Origin''') and other derivative works ('''Tangent''').<br /> <br /> The real Huijia Academy is the root. The VGR universe is what grew from it.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Side Guide&lt;/big&gt;<br /> <br /> [[Portfolio Area|'''''I want to explore the creative works of Verdant Green Revelation!''''']]<br /> <br /> [[:Category:Novel|''I want to read the '''VGR novel series'''!'']]<br /> <br /> [[:Category:Album|''I want to listen to the '''Green Revelation''' music albums!'']]<br /> <br /> [[:Category:OtoMAD|''I want to watch the '''DipfieldMAD''' works!'']]<br /> <br /> [[Worldview Area|''What is the '''VGR or Huijia Worldview''' - where do I start?'']]<br /> <br /> [[Trinitarian Laws of Huashael Practice|''What is the most iconic church with the mysterious ''' hexagrams'''?'']]<br /> <br /> [[Wang Zhize|''Who is the '''actual founder and absolute origin''' of Huijia Group?'']]<br /> <br /> [[Color Code|''How can I '''design''' like Huijia and Plurimod? (Color Code)'']]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Guidelines&lt;/big&gt;<br /> <br /> ''[[Guidelines|Click here to jump to the Guidelines]]''.<br /> <br /> It's not a big deal temporarily but I do believe this is necessary. To foster a harmonious non-harassment community environment we have established the following rules.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Special Thanks &amp; Tributes&lt;/big&gt;<br /> <br /> Thanks to these previous tributers:<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:LastW!sh LastW!sh] and [https://huijia.fandom.com/zh/wiki/User:Trooperr9863625badun Trooperr9863625badun] for writing the text for this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:Akatsuki0702 Akatsuki0702] for planning the framework of this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:YunxinBululu.Li YunxinBululu.Li] and [https://huijia.fandom.com/zh/wiki/User:JohnDing2023 JohnDing] for refining the world-building;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:1S0d1uM1 1S0d1uM1] and [https://huijia.fandom.com/zh/wiki/User:Hewu888 Hewu888] for contributing articles.<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> [[Category:Hub]]</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Hjf-rawhtml-denied&diff=177 MediaWiki:Hjf-rawhtml-denied 2026-10-04T05:23:48Z <p>PlurimodSU: Create the page</p> <hr /> <div>This edit contains &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt;, &lt;code&gt;#tag&lt;/code&gt; or &lt;code&gt;#css&lt;/code&gt;, which only administrators can use. Please remove them and save again. For videos, use EmbedVideo.</div> PlurimodSU https://en.huijia.fun/index.php?title=Main_Page&diff=176 Main Page 2026-10-03T09:39:03Z <p>PlurimodSU: Typo</p> <hr /> <div>&lt;html&gt;&lt;style&gt;<br /> .mini-block-portfolio {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-portfolio:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-portfolio .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-portfolio .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-portfolio .mini-block-title,<br /> .mini-block-portfolio .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-portfolio .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> <br /> .mini-block-canon {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-canon:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-canon .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-canon .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-canon .mini-block-title,<br /> .mini-block-canon .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-canon .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> &lt;/style&gt;&lt;/html&gt;<br /> {{Theme-HJ}}<br /> &lt;div style=&quot;font-size: 26px;margin-top: 6px;text-align: center;&quot;&gt;'''Welcome to「HUIJIA FUN - Rooted in Huijia School」'''&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 18px;margin-bottom: 6px;text-align: center;&quot;&gt;''The Parallel Universe Rooted in [[Beijing Huijia Private School|Huijia Academy]]'' - A Gesamtkunstwerk Work by [[Marina Malinti]]&lt;/div&gt;<br /> &lt;div style=&quot;font-family:Huiwen;text-align: center;&quot;&gt;TIP: THE ENGLISH BRANCH WEBSITE IS STILL UNDER THE BASIC CONSTRUCTION. PLEASE FORGIVE THE LOW COMPLETION RATE.&lt;br&gt;· Chinese Branch: https://huijia.fun&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;tabber&gt;<br /> |-|Website Information=<br /> &lt;br&gt;<br /> [[File:HUIJIA LOGO.png|150px|frameless|right]]<br /> &lt;span class=&quot;mini-block-title&quot;&gt;Welcome to HUIJIA FUN&lt;/span&gt;<br /> <br /> HUIJIA FUN began as a fan wiki dedicated to Beijing Huijia Private School and has since grown into something more. Today it serves as the '''official archive and Intellectual Property''' of [[Marina Malinti]] built upon the culture of Huijia as its spiritual origin and also get recognized by Huijia's principal.<br /> <br /> Whatever, This site is home to the '''[[Verdant Green Revelation]]''': A Gesamtkunstwerk (Total Art) IP encompassing novel series, music albums, constructed language [[Pre-Diphic]], OtoMAD works and even a speculative worldview rooted in Huijia Academy.<br /> <br /> This website is '''non-profit''' '''non-advertisement''' and '''non-membership'''. It is largely created and maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]]. For questions or consultation please contact me directly through: a@huijia.fun<br /> <br /> |-|Create a Page=<br /> &lt;br&gt;<br /> &lt;div style=&quot;text-align:center&quot;&gt; '''Remember! This website is publicly accessible on the internet!'''<br /> <br /> I fully support and actively encourage fan editing. To ensure resource reliability information neutrality and compliance with the '''Creative Commons''' license and copyright, please make sure you have read the [[Guideline]] and understand the community and editing rules. Before writing a page, please be aware that this site follows the '''CC BY-SA''' license and maintains relatively rigorous content standards.<br /> <br /> Ready? Create a page through the section below!<br /> {{#createpage:}}<br /> &lt;/div&gt;<br /> &lt;/tabber&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block mini-block-canon&quot; style=&quot;border-left: 4px solid #025F32;&quot;&gt;<br /> &lt;div class=&quot;mini-block-fulllink&quot;&gt;[[:Category:Canon]]&lt;/div&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Canon&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;center&gt;<br /> &lt;div style=&quot;font-family: 'Noto Serif SC', serif; margin: 1.6em 1em 1.2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 28px; font-weight: 600; letter-spacing: 0.06em; color: #025F32; text-shadow: 0 1px 3px rgba(2,95,50,0.15);&quot;&gt;墨绿色的启示录&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8fa896; margin-top: 4px;&quot;&gt;Verdant Green Revelation&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 15px; opacity: 0.75; margin-top: 0.8em; font-style: italic;&quot;&gt;VGR Portfolio：Everything is still unfolding&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/center&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Setting&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[:Category:Setting Area]]&lt;/span&gt;<br /> <br /> ''The fictional universe of VGR - myths, mankind, and canons.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Mythology|Mythology]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Entity|Entity]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Cosmology|Cosmology]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Archive&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Archive Area]]&lt;/span&gt;<br /> <br /> ''The real Huijia - documents, footage, and the origin of it all.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Record|Record]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Origin|Origin]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Tangent|Tangent]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Quick Guide&lt;/big&gt;<br /> <br /> ''[[Quick Guide|Click here to jump to the Quick Guide]]''.<br /> <br /> Welcome - whether you arrived from [[Dipfield City]] or the Eartho.<br /> <br /> HUIJIA FUN is the web centers on the Gesamtkunstwerk IP [[Verdant Green Revelation]], derived from the culture of [[Beijing Huijia Private School|Huijia Academy]]. It's organized into three areas. The '''[[Portfolio Area]]''' collects the creative output: novels, music albums and more - if it was made, it lives here. The '''[[Worldview Area]]''' documents the fictional universe: its myths ('''Mythos''') groups and places ('''Entity''') and canonical settings ('''Lore'''). The '''[[Archive Area]]''' preserves the real Huijia: historical documents ('''Record''') original footage and campus materials ('''Origin''') and other derivative works ('''Tangent''').<br /> <br /> The real Huijia Academy is the root. The VGR universe is what grew from it.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Side Guide&lt;/big&gt;<br /> <br /> [[Portfolio Area|'''''I want to explore the creative works of Verdant Green Revelation!''''']]<br /> <br /> [[:Category:Novel|''I want to read the '''VGR novel series'''!'']]<br /> <br /> [[:Category:Album|''I want to listen to the '''Green Revelation''' music albums!'']]<br /> <br /> [[:Category:OtoMAD|''I want to watch the '''DipfieldMAD''' works!'']]<br /> <br /> [[Worldview Area|''What is the '''VGR or Huijia Worldview''' - where do I start?'']]<br /> <br /> [[Trinitarian Laws of Huashael Practice|''What is the most iconic church with the mysterious ''' hexagrams'''?'']]<br /> <br /> [[Wang Zhize|''Who is the '''actual founder and absolute origin''' of Huijia Group?'']]<br /> <br /> [[Color Code|''How can I '''design''' like Huijia and Plurimod? (Color Code)'']]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Guidelines&lt;/big&gt;<br /> <br /> ''[[Guidelines|Click here to jump to the Guidelines]]''.<br /> <br /> It's not a big deal temporarily but I do believe this is necessary. To foster a harmonious non-harassment community environment we have established the following rules.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Special Thanks &amp; Tributes&lt;/big&gt;<br /> <br /> Thanks to these previous tributers:<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:LastW!sh LastW!sh] and [https://huijia.fandom.com/zh/wiki/User:Trooperr9863625badun Trooperr9863625badun] for writing the text for this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:Akatsuki0702 Akatsuki0702] for planning the framework of this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:YunxinBululu.Li YunxinBululu.Li] and [https://huijia.fandom.com/zh/wiki/User:JohnDing2023 JohnDing] for refining the world-building;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:1S0d1uM1 1S0d1uM1] and [https://huijia.fandom.com/zh/wiki/User:Hewu888 Hewu888] for contributing articles.<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> [[Category:Hub]]</div> PlurimodSU https://en.huijia.fun/index.php?title=Main_Page&diff=175 Main Page 2026-10-03T09:16:44Z <p>PlurimodSU: Mythos to Mythology and other names correction and unification</p> <hr /> <div>&lt;html&gt;&lt;style&gt;<br /> .mini-block-portfolio {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-portfolio:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-portfolio .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-portfolio .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-portfolio .mini-block-title,<br /> .mini-block-portfolio .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-portfolio .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> <br /> .mini-block-canon {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-canon:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-canon .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-canon .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-canon .mini-block-title,<br /> .mini-block-canon .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-canon .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> &lt;/style&gt;&lt;/html&gt;<br /> {{Theme-HJ}}<br /> &lt;div style=&quot;font-size: 26px;margin-top: 6px;text-align: center;&quot;&gt;'''Welcome to「HUIJIA FUN - Rooted in Huijia School」'''&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 18px;margin-bottom: 6px;text-align: center;&quot;&gt;''The Parallel Universe Rooted in [[Beijing Huijia Private School|Huijia Academy]]'' - A Gesamtkunstwerk Work by [[Marina Malinti]]&lt;/div&gt;<br /> &lt;div style=&quot;font-family:Huiwen;text-align: center;&quot;&gt;TIP: THE ENGLISH BRANCH WEBSITE IS STILL UNDER THE BASIC CONSTRUCTION. PLEASE FORGIVE THE LOW COMPLETION RATE.&lt;br&gt;· Chinese Branch: https://huijia.fun&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;tabber&gt;<br /> |-|Website Information=<br /> &lt;br&gt;<br /> [[File:HUIJIA LOGO.png|150px|frameless|right]]<br /> &lt;span class=&quot;mini-block-title&quot;&gt;Welcome to HUIJIA FUN&lt;/span&gt;<br /> <br /> HUIJIA FUN began as a fan wiki dedicated to Beijing Huijia Private School and has since grown into something more. Today it serves as the '''official archive and Intellectual Property''' of [[Marina Malinti]] built upon the culture of Huijia as its spiritual origin and also get recognized by Huijia's principal.<br /> <br /> Whatever, This site is home to the '''[[Verdant Green Revelation]]''': A Gesamtkunstwerk (Total Art) IP encompassing novel series, music albums, constructed language [[Pre-Diphic]], OtoMAD works and even a speculative worldview rooted in Huijia Academy.<br /> <br /> This website is '''non-profit''' '''non-advertisement''' and '''non-membership'''. It is largely created and maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]]. For questions or consultation please contact me directly through: a@huijia.fun<br /> <br /> |-|Create a Page=<br /> &lt;br&gt;<br /> &lt;div style=&quot;text-align:center&quot;&gt; '''Remember! This website is publicly accessible on the internet!'''<br /> <br /> I fully support and actively encourage fan editing. To ensure resource reliability information neutrality and compliance with the '''Creative Commons''' license and copyright, please make sure you have read the [[Guideline]] and understand the community and editing rules. Before writing a page, please be aware that this site follows the '''CC BY-SA''' license and maintains relatively rigorous content standards.<br /> <br /> Ready? Create a page through the section below!<br /> {{#createpage:}}<br /> &lt;/div&gt;<br /> &lt;/tabber&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block mini-block-canon&quot; style=&quot;border-left: 4px solid #025F32;&quot;&gt;<br /> &lt;div class=&quot;mini-block-fulllink&quot;&gt;[[Canon Area]]&lt;/div&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Canon&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;center&gt;<br /> &lt;div style=&quot;font-family: 'Noto Serif SC', serif; margin: 1.6em 1em 1.2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 28px; font-weight: 600; letter-spacing: 0.06em; color: #025F32; text-shadow: 0 1px 3px rgba(2,95,50,0.15);&quot;&gt;墨绿色的启示录&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8fa896; margin-top: 4px;&quot;&gt;Verdant Green Revelation&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 15px; opacity: 0.75; margin-top: 0.8em; font-style: italic;&quot;&gt;VGR Portfolio：Everything is still unfolding&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/center&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Canon&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[:Category:Canon]]&lt;/span&gt;<br /> <br /> ''The fictional universe of VGR - myths, mankind, and canons.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Mythology|Mythology]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Entity|Entity]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Cosmology|Cosmology]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Archive&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Archive Area]]&lt;/span&gt;<br /> <br /> ''The real Huijia - documents, footage, and the origin of it all.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Record|Record]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Origin|Origin]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Tangent|Tangent]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Quick Guide&lt;/big&gt;<br /> <br /> ''[[Quick Guide|Click here to jump to the Quick Guide]]''.<br /> <br /> Welcome - whether you arrived from [[Dipfield City]] or the Eartho.<br /> <br /> HUIJIA FUN is the web centers on the Gesamtkunstwerk IP [[Verdant Green Revelation]], derived from the culture of [[Beijing Huijia Private School|Huijia Academy]]. It's organized into three areas. The '''[[Portfolio Area]]''' collects the creative output: novels, music albums and more - if it was made, it lives here. The '''[[Worldview Area]]''' documents the fictional universe: its myths ('''Mythos''') groups and places ('''Entity''') and canonical settings ('''Lore'''). The '''[[Archive Area]]''' preserves the real Huijia: historical documents ('''Record''') original footage and campus materials ('''Origin''') and other derivative works ('''Tangent''').<br /> <br /> The real Huijia Academy is the root. The VGR universe is what grew from it.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Side Guide&lt;/big&gt;<br /> <br /> [[Portfolio Area|'''''I want to explore the creative works of Verdant Green Revelation!''''']]<br /> <br /> [[:Category:Novel|''I want to read the '''VGR novel series'''!'']]<br /> <br /> [[:Category:Album|''I want to listen to the '''Green Revelation''' music albums!'']]<br /> <br /> [[:Category:OtoMAD|''I want to watch the '''DipfieldMAD''' works!'']]<br /> <br /> [[Worldview Area|''What is the '''VGR or Huijia Worldview''' - where do I start?'']]<br /> <br /> [[Trinitarian Laws of Huashael Practice|''What is the most iconic church with the mysterious ''' hexagrams'''?'']]<br /> <br /> [[Wang Zhize|''Who is the '''actual founder and absolute origin''' of Huijia Group?'']]<br /> <br /> [[Color Code|''How can I '''design''' like Huijia and Plurimod? (Color Code)'']]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Guidelines&lt;/big&gt;<br /> <br /> ''[[Guidelines|Click here to jump to the Guidelines]]''.<br /> <br /> It's not a big deal temporarily but I do believe this is necessary. To foster a harmonious non-harassment community environment we have established the following rules.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Special Thanks &amp; Tributes&lt;/big&gt;<br /> <br /> Thanks to these previous tributers:<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:LastW!sh LastW!sh] and [https://huijia.fandom.com/zh/wiki/User:Trooperr9863625badun Trooperr9863625badun] for writing the text for this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:Akatsuki0702 Akatsuki0702] for planning the framework of this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:YunxinBululu.Li YunxinBululu.Li] and [https://huijia.fandom.com/zh/wiki/User:JohnDing2023 JohnDing] for refining the world-building;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:1S0d1uM1 1S0d1uM1] and [https://huijia.fandom.com/zh/wiki/User:Hewu888 Hewu888] for contributing articles.<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> [[Category:Hub]]</div> PlurimodSU https://en.huijia.fun/index.php?title=Template:Theme-HJ&diff=174 Template:Theme-HJ 2026-10-03T09:09:13Z <p>PlurimodSU: Design System and Theme updated to V5.0</p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> &lt;style&gt;<br /> /**<br /> * HUIJIA FUN - TIMELESS THEME - HJ V5.0<br /> * VGR Design System: Archive Zone / site-wide default theme<br /> * Changes: uses VGR tokens; body text in Zhuque Fangsong; square corners, no shadows; keeps the dot pattern and graded heading rules;<br /> * scroll fade-ins removed; overrides the pink of Timeless and Tabber<br /> */<br /> <br /> /* === 0. Fonts ===<br /> Source Sans 3 / Source Serif 4 are the Latin halves of the same families as Noto Sans SC / Noto Serif SC (Source Han Sans / Serif).<br /> Latin first, Chinese second: English italics come from the Latin font, while Chinese stays upright. */<br /> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&amp;family=Noto+Serif+SC:wght@400;600&amp;family=Source+Sans+3:ital,wght@0,400;0,500;0,700;1,400&amp;family=Source+Serif+4:ital,wght@0,400;0,600;1,400&amp;family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&amp;family=JetBrains+Mono:wght@400;700&amp;display=swap');<br /> @import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');<br /> /* Zhuque Fangsong: body font. Loaded in character slices, so only the glyphs a page uses are downloaded. SIL OFL 1.1 */<br /> @import url('https://cdn.jsdelivr.net/npm/@chinese-fonts/zqfs@3.0.0/dist/ZhuqueFangsong-Regular/result.css');<br /> <br /> /* === 1. Tokens (light) === */<br /> :root {<br /> /* Source colors */<br /> --src-huijia-green: #025F32;<br /> --src-dragon-green: #3B7E3D;<br /> --src-gate-grey: #969682;<br /> --src-plurimod-light: #C1E1A6;<br /> --src-huashao-blue: #002F9C;<br /> <br /> /* Semantic colors */<br /> --paper: #F3F5F1;<br /> --paper-raised: #FFFFFF;<br /> --paper-sunk: #E7ECE5;<br /> --ink: #16211B;<br /> --ink-muted: #4C5A51;<br /> --rule: #C9D3CA;<br /> --rule-strong: #7E8B81;<br /> --accent: #025F32;<br /> --accent-fill: #025F32;<br /> --on-accent: #FFFFFF;<br /> --accent-tint: #DCEBD9;<br /> --link: #0B6B3A;<br /> --link-new: #A8432F;<br /> --focus: #002F9C;<br /> --heading-bar: #C8D8C8; /* graded rules under headings */<br /> --dot: #A3B1A8; /* dot pattern on the content card */<br /> <br /> /* Type */<br /> --font-display: Huiwen, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;Songti SC&quot;, serif;<br /> --font-sans: &quot;Source Sans 3&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> /* Body: Fangsong, the tone of archives and official documents. Falls back to Noto Serif SC if it fails to load */<br /> --font-body: &quot;Source Serif 4&quot;, &quot;Zhuque Fangsong (technical preview)&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, &quot;FangSong&quot;, &quot;STFangsong&quot;, serif;<br /> --font-latin: &quot;Cormorant Garamond&quot;, &quot;EB Garamond&quot;, Georgia, serif;<br /> --font-scripture: &quot;LXGW WenKai Screen&quot;, &quot;Kaiti SC&quot;, STKaiti, KaiTi, serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> <br /> /* Spacing and radius */<br /> --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;<br /> --space-6: 24px; --space-8: 32px; --space-12: 48px;<br /> --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-pill: 999px;<br /> <br /> /* Point the Timeless / Codex / FlowThread primary-color variables at Huijia Green, replacing the skin's pink */<br /> --color-primary: var(--accent);<br /> --color-progressive: var(--accent);<br /> --color-progressive--hover: var(--src-dragon-green);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> --color-link: var(--link);<br /> --color-link--visited: var(--link);<br /> --color-link-red: var(--link-new);<br /> <br /> /* Legacy variable names, kept for other templates */<br /> --mw-primary: var(--accent);<br /> --mw-accent: var(--src-dragon-green);<br /> --mw-link: var(--link);<br /> --mw-border: var(--rule);<br /> --font-heading: var(--font-serif);<br /> --font-code: var(--font-mono);<br /> }<br /> <br /> /* === 1b. Tokens (dark)<br /> Applies only under MediaWiki's night-mode class and does not follow the system setting:<br /> Common.css and other templates are not dark-ready yet, so following the system would leave some elements dark-on-dark. */<br /> html.skin-theme-clientpref-night {<br /> --paper: #111613;<br /> --paper-raised: #18201B;<br /> --paper-sunk: #0C100E;<br /> --ink: #E4EBE5;<br /> --ink-muted: #A2B0A6;<br /> --rule: #2A352E;<br /> --rule-strong: #667A6C;<br /> --accent: #C1E1A6;<br /> --accent-fill: #3B7E3D;<br /> --accent-tint: #1C2B21;<br /> --link: #8FD3A8;<br /> --link-new: #F0907E;<br /> --focus: #8FB0FF;<br /> --heading-bar: #2F4033;<br /> --dot: #2A352E;<br /> color-scheme: dark;<br /> }<br /> <br /> /* === 2. Page and body text === */<br /> body {<br /> background-color: var(--paper);<br /> color: var(--ink);<br /> font-family: var(--font-sans);<br /> font-size: 16px;<br /> line-height: 1.8;<br /> accent-color: var(--accent);<br /> -webkit-font-smoothing: antialiased;<br /> }<br /> <br /> /* Body text uses Fangsong; UI elements such as navigation, tables and buttons stay in sans (set in their own sections) */<br /> .mw-parser-output {<br /> font-family: var(--font-body);<br /> font-size: 16px;<br /> line-height: 1.9;<br /> letter-spacing: 0.02em;<br /> }<br /> .mw-parser-output b,<br /> .mw-parser-output strong { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }<br /> <br /> /* Chinese has no true italic: stop the browser from faking slanted Chinese; Latin italics work as usual */<br /> i, em, cite, .mw-parser-output i { font-synthesis: none; }<br /> <br /> ::selection { background: var(--accent-fill); color: var(--on-accent); }<br /> <br /> :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> <br /> /* === 3. Header === */<br /> #mw-header-container {<br /> background: var(--paper-raised);<br /> border-bottom: 1px solid var(--rule);<br /> box-shadow: none;<br /> }<br /> #p-banner, #p-banner a, .mw-wiki-title {<br /> font-family: var(--font-sans);<br /> font-weight: 500;<br /> letter-spacing: 0.04em;<br /> color: var(--ink) !important;<br /> }<br /> <br /> /* === 4. Search box (the only pill shape) === */<br /> #p-search {<br /> margin: 0 20px !important;<br /> display: flex;<br /> align-items: center;<br /> }<br /> #searchform {<br /> background: var(--paper-raised) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius-pill) !important;<br /> display: flex !important;<br /> flex-direction: row !important;<br /> align-items: center !important;<br /> padding: 2px 4px 2px 16px !important;<br /> max-width: 350px;<br /> overflow: hidden;<br /> box-shadow: none !important;<br /> transition: border-color 0.2s ease;<br /> }<br /> #searchform:focus-within {<br /> border-color: var(--accent) !important;<br /> outline: 2px solid var(--focus);<br /> outline-offset: 2px;<br /> }<br /> #simpleSearch {<br /> background: transparent !important;<br /> border: none !important;<br /> width: 100% !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> #searchInput {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> font-family: var(--font-sans);<br /> font-size: 14px !important;<br /> padding: 8px 0 !important;<br /> color: var(--ink) !important;<br /> width: 100% !important;<br /> outline: none;<br /> }<br /> #searchInput::placeholder { color: var(--ink-muted); }<br /> <br /> /* === 5. Logo === */<br /> #p-logo, .mw-portlet-logo {<br /> display: flex !important;<br /> justify-content: center;<br /> align-items: center;<br /> padding: 20px 0 !important;<br /> margin-bottom: 10px;<br /> }<br /> #p-logo img {<br /> border-radius: var(--radius-none);<br /> box-shadow: none;<br /> }<br /> <br /> /* === 6. Left and right sidebars === */<br /> .sidebar-chunk {<br /> background-color: var(--paper-raised);<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-none);<br /> box-shadow: none;<br /> margin-bottom: var(--space-4);<br /> padding: var(--space-4);<br /> }<br /> .sidebar-chunk h2,<br /> .sidebar-chunk h3,<br /> .mw-portlet h3 {<br /> /* Group names (Navigation / Hubs / Setting Zone / Page tools…): Source Serif / Noto Serif SC */<br /> font-family: var(--font-serif) !important;<br /> font-size: 15px !important;<br /> font-weight: 600 !important;<br /> letter-spacing: 0.1em;<br /> text-transform: none;<br /> color: var(--ink) !important;<br /> border: none !important;<br /> border-bottom: 2px solid var(--heading-bar) !important;<br /> padding-bottom: 6px;<br /> margin-bottom: var(--space-3);<br /> }<br /> .sidebar-chunk li a,<br /> .sidebar-chunk li a span,<br /> .mw-portlet-body li a,<br /> .mw-portlet-body li a span {<br /> /* Nav links: Zhuque Fangsong, matching the body text */<br /> color: var(--ink) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.04em;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .mw-portlet-body li a:hover {<br /> color: var(--accent) !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* === 7. Content card === */<br /> #mw-content-wrapper {<br /> background: transparent;<br /> padding-top: 0;<br /> box-shadow: none;<br /> }<br /> #mw-content {<br /> background-color: var(--paper-raised);<br /> /* dot pattern: 1px dots on a 20px grid */<br /> background-image: radial-gradient(var(--dot) 0px, transparent 1px);<br /> background-size: 20px 20px;<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-none);<br /> box-shadow: none;<br /> padding: var(--space-6) var(--space-8);<br /> }<br /> <br /> /* Page tabs (Read / Edit / History / Discussion): the selected tab uses Huijia Green instead of pink */<br /> #mw-content-block .mw-portlet li a,<br /> #mw-content-block .mw-portlet li a .mw-ui-icon::before {<br /> color: var(--ink-muted) !important;<br /> }<br /> /* Page tab labels (Template / Discussion / Read / Edit / History): Zhuque Fangsong */<br /> #mw-content-block .mw-portlet li a,<br /> #mw-content-block .mw-portlet li a span {<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.06em;<br /> }<br /> #mw-content-block .mw-portlet li.selected a,<br /> #mw-content-block .mw-portlet li.selected a .mw-ui-icon::before {<br /> color: var(--accent) !important;<br /> }<br /> #mw-content-block .mw-portlet li.selected a {<br /> border-bottom: 2px solid var(--accent) !important;<br /> box-shadow: none !important;<br /> }<br /> #mw-content-block .mw-portlet li a:hover { color: var(--ink) !important; }<br /> <br /> /* Tabber (e.g. the Main Page &quot;Site info / Create a page&quot; tabs) */<br /> .tabber__tab { color: var(--ink-muted) !important; font-family: var(--font-body) !important; font-size: 15.5px; letter-spacing: 0.06em; }<br /> .tabber__tab[aria-selected=&quot;true&quot;] { color: var(--accent) !important; }<br /> .tabber__indicator { background: var(--accent) !important; }<br /> .tabber .tabbernav li a { color: var(--ink-muted) !important; font-family: var(--font-body) !important; letter-spacing: 0.06em; }<br /> .tabber .tabbernav li.tabberactive a {<br /> color: var(--accent) !important;<br /> border-bottom-color: var(--accent) !important;<br /> }<br /> <br /> /* === 8. Headings === */<br /> h1.firstHeading {<br /> font-family: var(--font-serif);<br /> font-size: 30px;<br /> font-weight: 600;<br /> line-height: 1.3;<br /> color: var(--ink) !important;<br /> letter-spacing: 0;<br /> border-bottom: 4px solid var(--heading-bar);<br /> padding-bottom: var(--space-2);<br /> margin-bottom: var(--space-6);<br /> text-wrap: balance;<br /> }<br /> <br /> .mw-parser-output h1,<br /> .mw-parser-output h2,<br /> .mw-parser-output h3,<br /> .mw-parser-output h4,<br /> .mw-parser-output h5,<br /> .mw-parser-output h6 {<br /> font-family: var(--font-serif) !important;<br /> font-weight: 600;<br /> color: var(--ink) !important;<br /> letter-spacing: 0;<br /> text-wrap: balance;<br /> padding-bottom: var(--space-2);<br /> overflow: hidden;<br /> }<br /> <br /> /* Graded rules: full width under h1 and h2; from h3 down, shorter and fainter at each level */<br /> .mw-parser-output h1 {<br /> font-size: 26px;<br /> line-height: 1.3;<br /> border-bottom: 4px solid var(--heading-bar) !important;<br /> margin: var(--space-8) 0 var(--space-3);<br /> }<br /> .mw-parser-output h2 {<br /> font-size: 23px;<br /> line-height: 1.35;<br /> border: none !important;<br /> border-bottom: 4px solid var(--heading-bar) !important;<br /> margin: var(--space-8) 0 var(--space-3);<br /> }<br /> .mw-parser-output h3 {<br /> font-size: 19px;<br /> line-height: 1.45;<br /> margin: var(--space-6) 0 var(--space-2);<br /> }<br /> .mw-parser-output h4 {<br /> font-size: 17px;<br /> line-height: 1.5;<br /> margin: var(--space-4) 0 var(--space-2);<br /> }<br /> .mw-parser-output h5 {<br /> font-size: 15px;<br /> line-height: 1.5;<br /> margin: var(--space-4) 0 var(--space-1);<br /> }<br /> .mw-parser-output h6 {<br /> font-family: var(--font-sans) !important;<br /> font-size: 13px;<br /> font-weight: 500;<br /> letter-spacing: 0.08em;<br /> color: var(--ink-muted) !important;<br /> margin: var(--space-4) 0 var(--space-1);<br /> }<br /> .mw-parser-output h3,<br /> .mw-parser-output h4,<br /> .mw-parser-output h5,<br /> .mw-parser-output h6 {<br /> border: none !important;<br /> position: relative;<br /> }<br /> .mw-parser-output h3::after,<br /> .mw-parser-output h4::after,<br /> .mw-parser-output h5::after,<br /> .mw-parser-output h6::after {<br /> content: &quot;&quot;;<br /> display: block;<br /> position: absolute;<br /> left: 0;<br /> bottom: 0;<br /> height: 4px;<br /> background-color: var(--heading-bar);<br /> border-radius: 2px;<br /> }<br /> .mw-parser-output h3::after { width: 80%; opacity: 1; }<br /> .mw-parser-output h4::after { width: 60%; opacity: 0.8; }<br /> .mw-parser-output h5::after { width: 40%; opacity: 0.6; }<br /> .mw-parser-output h6::after { width: 20%; opacity: 0.4; }<br /> <br /> #personal h2,<br /> #personal .header-avatar { overflow: visible; }<br /> <br /> /* === 9. Links === */<br /> .mw-parser-output a,<br /> #catlinks a { color: var(--link); text-decoration: none; }<br /> .mw-parser-output a:visited { color: var(--link); }<br /> .mw-parser-output a:hover { text-decoration: underline; text-underline-offset: 3px; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: var(--link-new); }<br /> <br /> /* === 10. Code === */<br /> code {<br /> background-color: var(--paper-sunk);<br /> color: var(--ink);<br /> padding: 2px 6px;<br /> border-radius: var(--radius-xs);<br /> font-family: var(--font-mono);<br /> font-size: 13px;<br /> }<br /> pre {<br /> position: relative;<br /> background-color: var(--paper-sunk) !important;<br /> color: var(--ink);<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius-none);<br /> padding: var(--space-4) !important;<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> line-height: 1.6;<br /> overflow-x: auto;<br /> }<br /> <br /> /* === 11. Tables (override Common.css's solid deep-green header row and zebra striping) === */<br /> .mw-parser-output table.wikitable {<br /> width: auto;<br /> background: var(--paper-raised);<br /> color: var(--ink);<br /> border: none;<br /> border-top: 2px solid var(--accent);<br /> border-bottom: 1px solid var(--rule-strong);<br /> border-collapse: collapse;<br /> border-radius: var(--radius-none);<br /> box-shadow: none;<br /> overflow: visible;<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> }<br /> .mw-parser-output table.wikitable &gt; * &gt; tr &gt; th,<br /> .mw-parser-output table.wikitable &gt; tr &gt; th {<br /> background: transparent;<br /> color: var(--accent);<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 700;<br /> letter-spacing: 0.08em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule-strong);<br /> }<br /> .mw-parser-output table.wikitable &gt; * &gt; tr &gt; td,<br /> .mw-parser-output table.wikitable &gt; tr &gt; td {<br /> color: var(--ink);<br /> padding: 9px 12px;<br /> border: none;<br /> border-bottom: 1px solid var(--rule);<br /> vertical-align: top;<br /> }<br /> .mw-parser-output table.wikitable &gt; tbody &gt; tr:nth-of-type(even) { background: transparent; }<br /> .mw-parser-output table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> .mw-parser-output table.wikitable &gt; tbody &gt; tr:hover td { background: var(--accent-tint); color: var(--ink); }<br /> <br /> /* === 12. Category bar and footer === */<br /> #catlinks {<br /> background-color: var(--paper-sunk);<br /> border: 1px solid var(--rule);<br /> border-radius: var(--radius-none);<br /> padding: var(--space-3) var(--space-4);<br /> font-size: 13px;<br /> color: var(--ink-muted);<br /> }<br /> .mw-footer {<br /> background-color: var(--paper-sunk);<br /> color: var(--ink-muted);<br /> border-top: 1px solid var(--rule);<br /> border-radius: var(--radius-none);<br /> margin-top: var(--space-12);<br /> padding: var(--space-6) var(--space-8);<br /> font-size: 13px;<br /> }<br /> .mw-footer a { color: var(--ink-muted); }<br /> .mw-footer-container { background: transparent; }<br /> <br /> /* === 13. Pink from Common.css (temporary override; better to fix Common.css itself later) === */<br /> textarea:hover,<br /> textarea:focus-visible { border-color: var(--accent) !important; box-shadow: none !important; }<br /> .navbox th, .navbox-title { background: var(--accent-tint) !important; color: var(--ink); }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk) !important; }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper) !important; }<br /> .navbox-even { background: var(--paper) !important; }<br /> .repost-circle, .repost-circle a.external { color: var(--accent) !important; border-color: var(--accent) !important; }<br /> <br /> /* === 14. Mobile (≤850px) === */<br /> @media screen and (max-width: 850px) {<br /> #mw-content { padding: var(--space-4); }<br /> <br /> /* Restore Timeless mobile nav (in case global rules interfere) */<br /> #mw-mf-page-left, .dropdown, .dropdown-active,<br /> #mw-related-navigation,<br /> #site-tools, #personal {<br /> height: auto !important;<br /> max-height: none !important;<br /> overflow: visible !important;<br /> }<br /> <br /> /* Cap the logo size so it can't blow up when the sidebar renders incorrectly */<br /> #p-logo img {<br /> max-width: 180px !important;<br /> width: auto !important;<br /> height: auto !important;<br /> }<br /> <br /> .dropdown .mw-portlet-body,<br /> .dropdown.dropdown-active .mw-portlet-body {<br /> display: block !important;<br /> height: auto !important;<br /> max-height: 70vh !important;<br /> overflow-y: auto !important;<br /> background-color: var(--paper-raised) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius-none) !important;<br /> box-shadow: none !important;<br /> z-index: 9999 !important;<br /> position: relative !important;<br /> }<br /> <br /> .dropdown-toggle, #ca-more, .mw-ui-icon {<br /> position: relative !important;<br /> z-index: 9999 !important;<br /> }<br /> <br /> /* Hide the empty sidebar/portlet shells */<br /> .sidebar-chunk:empty,<br /> .mw-portlet:empty,<br /> .mw-portlet:not(:has(li)):not(:has(a)) {<br /> display: none !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> background: none !important;<br /> }<br /> <br /> #mw-content-block .sidebar-chunk {<br /> border: none !important;<br /> box-shadow: none !important;<br /> background: transparent !important;<br /> padding: 0 !important;<br /> }<br /> <br /> #mw-content-block { background: transparent !important; }<br /> <br /> .mw-parser-output table.wikitable {<br /> display: block;<br /> overflow-x: auto;<br /> white-space: normal;<br /> }<br /> }<br /> <br /> /* === 15. Reading progress bar and copy button === */<br /> #reading-progress-container {<br /> position: fixed;<br /> left: 0;<br /> bottom: 0;<br /> width: 100%;<br /> height: 3px;<br /> background: var(--rule);<br /> z-index: 9999;<br /> pointer-events: none;<br /> }<br /> #reading-progress-bar {<br /> height: 100%;<br /> width: 0;<br /> background: var(--accent-fill);<br /> }<br /> .code-copy-btn {<br /> position: absolute;<br /> top: 8px;<br /> right: 8px;<br /> font-family: var(--font-sans);<br /> font-size: 12px;<br /> font-weight: 500;<br /> letter-spacing: 0.04em;<br /> padding: 4px 10px;<br /> color: var(--on-accent);<br /> background: var(--accent-fill);<br /> border: none;<br /> border-radius: var(--radius-sm);<br /> cursor: pointer;<br /> opacity: 0;<br /> transition: opacity 0.2s ease;<br /> }<br /> pre:hover .code-copy-btn,<br /> .code-copy-btn:focus-visible { opacity: 1; }<br /> <br /> @media (prefers-reduced-motion: reduce) {<br /> * { transition: none !important; animation: none !important; }<br /> }<br /> &lt;/style&gt;<br /> &lt;script&gt;<br /> /**<br /> * HUIJIA FUN - UI ENHANCEMENTS (v5.0)<br /> * Kept: bottom reading progress bar, code copy button<br /> * Removed: scroll fade-ins (headings started transparent and vanished if the script failed)<br /> */<br /> (function () {<br /> &quot;use strict&quot;;<br /> if (window.__hjThemeLoaded) return; /* don't run twice when a page includes the template twice */<br /> window.__hjThemeLoaded = true;<br /> <br /> var isZh = (document.documentElement.lang || &quot;&quot;).toLowerCase().indexOf(&quot;zh&quot;) === 0;<br /> var LABEL = isZh ? { copy: &quot;复制&quot;, done: &quot;已复制&quot;, fail: &quot;请手动复制&quot; }<br /> : { copy: &quot;Copy&quot;, done: &quot;Copied&quot;, fail: &quot;Copy failed&quot; };<br /> <br /> function initProgressBar() {<br /> if (document.getElementById(&quot;reading-progress-container&quot;)) return;<br /> var container = document.createElement(&quot;div&quot;);<br /> container.id = &quot;reading-progress-container&quot;;<br /> var bar = document.createElement(&quot;div&quot;);<br /> bar.id = &quot;reading-progress-bar&quot;;<br /> container.appendChild(bar);<br /> document.body.appendChild(container);<br /> <br /> var ticking = false;<br /> function update() {<br /> var top = window.pageYOffset || document.documentElement.scrollTop;<br /> var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;<br /> bar.style.width = (height &gt; 0 ? (top / height) * 100 : 0) + &quot;%&quot;;<br /> ticking = false;<br /> }<br /> window.addEventListener(&quot;scroll&quot;, function () {<br /> if (!ticking) { ticking = true; window.requestAnimationFrame(update); }<br /> }, { passive: true });<br /> update();<br /> }<br /> <br /> function initCopyButtons() {<br /> document.querySelectorAll(&quot;#mw-content pre&quot;).forEach(function (block) {<br /> if (block.querySelector(&quot;.code-copy-btn&quot;)) return;<br /> var btn = document.createElement(&quot;button&quot;);<br /> btn.type = &quot;button&quot;;<br /> btn.className = &quot;code-copy-btn&quot;;<br /> btn.textContent = LABEL.copy;<br /> btn.addEventListener(&quot;click&quot;, function () {<br /> var clone = block.cloneNode(true);<br /> var own = clone.querySelector(&quot;.code-copy-btn&quot;);<br /> if (own) own.remove();<br /> var text = clone.textContent.trim();<br /> var done = function (label) {<br /> btn.textContent = label;<br /> setTimeout(function () { btn.textContent = LABEL.copy; }, 2000);<br /> };<br /> if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) {<br /> navigator.clipboard.writeText(text).then(<br /> function () { done(LABEL.done); },<br /> function () { done(LABEL.fail); }<br /> );<br /> } else {<br /> done(LABEL.fail);<br /> }<br /> });<br /> block.appendChild(btn);<br /> });<br /> }<br /> <br /> function init() {<br /> initProgressBar();<br /> initCopyButtons();<br /> }<br /> <br /> if (document.readyState === &quot;loading&quot;) {<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, init);<br /> } else {<br /> init();<br /> }<br /> })();<br /> &lt;/script&gt;<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;&lt;noinclude&gt;{{Theme-HJ}}<br /> ==Description==<br /> '''Theme-HJ''' is the theme for HUIJIA FUN's Archive Zone and the site-wide default pages, built strictly on the VGR Design System. Its features: a cool, green-tinted grey paper ground, a &quot;Huijia Green&quot; accent, square corners and no shadows; the content card carries a dot pattern, and headings sit on rules that get shorter and fainter at each level.<br /> <br /> ==Origin==<br /> Author: [[User:PlurimodSU|Marina Malinti]]<br /> <br /> ===Note===<br /> To use this theme on a page, simply add the following code directly to the page's source code:<br /> &lt;pre&gt;{{Theme-HJ}}&lt;/pre&gt;<br /> <br /> ==Test==<br /> A body paragraph with an [[Main Page|internal link]], a [[Nonexistent Page|red link]] and some &lt;code&gt;inline code&lt;/code&gt;. ''English italic stays italic; 中文不会被压斜。''<br /> <br /> ===Subheading 3===<br /> ====Subheading 4====<br /> =====Subheading 5=====<br /> ======Subheading 6======<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! Event !! S.C. !! O.<br /> |-<br /> | Sample event A || 1999 || 0<br /> |-<br /> | Sample event B || 2021 || 22<br /> |}<br /> <br /> &lt;pre&gt;{{Theme-HJ}}&lt;/pre&gt;<br /> <br /> ==Test 2==<br /> ===Subheading 3===<br /> ====Subheading 4====<br /> =====Subheading 5=====<br /> ======Subheading 6======<br /> [[Category:Template-Theme]]<br /> &lt;/noinclude&gt;</div> PlurimodSU https://en.huijia.fun/index.php?title=File:Marina_Malinti_Avatar_2.jpg&diff=173 File:Marina Malinti Avatar 2.jpg 2026-10-03T09:03:04Z <p>PlurimodSU: </p> <hr /> <div></div> PlurimodSU https://en.huijia.fun/index.php?title=Template:Theme-STR&diff=172 Template:Theme-STR 2026-10-03T09:00:43Z <p>PlurimodSU: Code updated to V3.0 version</p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> &lt;style&gt;<br /> /**<br /> * HUIJIA FUN · Theme-STR (Setting Zone theme)<br /> * S.T.R. OFFICE — TIMELESS THEME v3.0<br /> * Design language: VGR Design System · Setting Zone (night)<br /> *<br /> * Sub-Utopia: a city that came close to an ideal and never arrived.<br /> * Order → 40px grid on the content card, scanlines, corner markers<br /> * Warmth of the ideal → old-style serif body text (LXGW Neo ZhiSong)<br /> * Dipfield → violet-black ground + Plurimod light-green headings<br /> * + green-leaning sidebar links + pale Dipfield violet accent<br /> *<br /> * v3.0: Strictly follows the VGR Design language; search box, site name and personal menu<br /> * share one height, width and corner radius;<br /> * removed the full-screen flicker layer (photosensitivity risk), scroll fade-ins<br /> * (headings could stay hidden) and the ambient pulse;<br /> * no longer force-recolors every span in the content (inline colors work again);<br /> * all motion respects prefers-reduced-motion.<br /> */<br /> <br /> /* === 1. Fonts === */<br /> @import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&amp;family=Noto+Serif+SC:wght@400;600&amp;family=Noto+Sans+SC:wght@400;500&amp;family=Source+Serif+4:wght@400;600&amp;family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Share+Tech+Mono&amp;display=swap');<br /> /* LXGW Neo ZhiSong: body text. Full package is ~4.4MB; Noto Serif SC shows while it loads on first visit. SIL OFL 1.1 */<br /> @import url('https://cdn.jsdelivr.net/npm/lxgw-neo-zhisong-webfont@1.0.0/style.css');<br /> @import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');<br /> <br /> /* === 2. Tokens === */<br /> :root,<br /> html.skin-theme-clientpref-night {<br /> /* Source colors */<br /> --src-huijia-green: #025F32;<br /> --src-dragon-green: #3B7E3D;<br /> --src-plurimod-light: #C1E1A6;<br /> --src-dipfield-violet: #3F3954;<br /> <br /> /* Paper: Dipfield violet-black */<br /> --paper: #0D0D12;<br /> --paper-raised: #101018;<br /> --paper-sunk: #08080F;<br /> --paper-alt: #161622;<br /> <br /> /* Ink */<br /> --ink: #E8E8F4; /* body text 15.6:1 */<br /> --ink-bright: #F5F5FF;<br /> --ink-muted: #A9A6BF; /* captions 8.0:1 */<br /> --heading: #C1E1A6; /* headings: Plurimod light green 13.2:1 */<br /> --nav-ink: #22CC66; /* sidebar: green-leaning nav text 9.1:1 */<br /> <br /> /* Rules */<br /> --rule: #28284A; /* decorative lines */<br /> --rule-strong: #5A5A8A; /* borders that carry information, e.g. inputs 3.0:1 */<br /> --grid-line: rgba(193, 225, 166, 0.03);<br /> --heading-bar: #025F32;<br /> <br /> /* Accent */<br /> --accent: #B9B2D6; /* Setting Zone accent: pale Dipfield violet 9.4:1 */<br /> --accent-fill: #025F32;<br /> --accent-fill-hover: #3B7E3D;<br /> --on-accent: #FFFFFF; /* 7.8:1 / 4.96:1 */<br /> --accent-tint: rgba(185, 178, 214, 0.08);<br /> --green-tint: rgba(2, 95, 50, 0.18);<br /> --link: #66EEBB;<br /> --link-visited: #55CCAA;<br /> --link-hover: #C1E1A6;<br /> --link-new: #EE7766;<br /> --focus: #8FB0FF;<br /> <br /> /* Type */<br /> --font-body: &quot;LXGW Neo ZhiSong&quot;, &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-serif: &quot;Source Serif 4&quot;, &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-display: &quot;Noto Serif SC&quot;, &quot;Source Han Serif SC&quot;, serif;<br /> --font-sans: &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-latin: &quot;Cormorant Garamond&quot;, &quot;EB Garamond&quot;, Georgia, serif;<br /> --font-mono: &quot;JetBrains Mono&quot;, ui-monospace, Menlo, monospace;<br /> --font-hud: &quot;Share Tech Mono&quot;, &quot;JetBrains Mono&quot;, monospace;<br /> --font-banner: &quot;ZCOOL XiaoWei&quot;, &quot;Noto Serif SC&quot;, serif;<br /> --font-scripture: &quot;LXGW WenKai Screen&quot;, &quot;Kaiti SC&quot;, STKaiti, KaiTi, serif;<br /> <br /> /* Spacing */<br /> --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;<br /> --space-6: 24px; --space-8: 32px; --space-12: 48px;<br /> <br /> /* Shape: shared by header controls, cards, sidebars and the personal menu */<br /> --radius: 6px;<br /> --radius-sm: 4px;<br /> --radius-xs: 2px;<br /> --radius-none: 0;<br /> --radius-pill: 999px;<br /> --control-h: 40px;<br /> --control-w: 320px;<br /> <br /> /* Variables read by the skin and extensions */<br /> --color-primary: var(--accent-fill);<br /> --color-progressive: var(--link);<br /> --background-color-progressive: var(--accent-fill);<br /> --border-color-progressive: var(--accent);<br /> /* The skin's surface levels (white and light grey by default), replaced with five shades of Dipfield violet-black */<br /> --color-surface-0: #0D0D12; /* = paper, bottom layer */<br /> --color-surface-1: #101018; /* = paper-raised, cards and menus */<br /> --color-surface-2: #161622; /* = paper-alt, toolbars and overlays */<br /> --color-surface-3: #1E1E2E; /* hover and selected items */<br /> --color-surface-4: #2A2A40; /* lightest layer: dividers and pressed states */<br /> <br /> /* Matching text, border and interaction variables, also switched to dark */<br /> --color-base: var(--ink);<br /> --color-base--subtle: var(--ink-muted);<br /> --color-emphasized: var(--ink-bright);<br /> --color-subtle: var(--ink-muted);<br /> --background-color-base: var(--paper-raised);<br /> --background-color-interactive: var(--color-surface-3);<br /> --background-color-interactive-subtle: var(--color-surface-2);<br /> --background-color-quiet--hover: rgba(185, 178, 214, 0.08);<br /> --border-color-base: var(--rule);<br /> --border-color-base--darker: var(--rule-strong);<br /> --border-color-subtle: var(--rule);<br /> --background-color-warning-subtle: #2A2440;<br /> <br /> /* Legacy variable names, kept for other templates */<br /> --str-deep: var(--src-dipfield-violet);<br /> --str-green: var(--src-huijia-green);<br /> --str-accent: var(--heading);<br /> --str-bg-body: var(--paper);<br /> --str-bg-card: var(--paper-raised);<br /> --str-bg-card-alt: var(--paper-alt);<br /> --str-border: var(--rule);<br /> --str-text: var(--ink);<br /> --str-link: var(--link);<br /> --str-heading: var(--heading);<br /> --mw-primary: var(--accent-fill);<br /> --mw-border: var(--rule-strong);<br /> --font-heading: var(--font-serif);<br /> --font-code: var(--font-mono);<br /> <br /> color-scheme: dark;<br /> }<br /> <br /> /* === 3. Page base: scanlines and drifting glow === */<br /> body {<br /> background-color: var(--paper) !important;<br /> color: var(--ink) !important;<br /> font-family: var(--font-sans) !important;<br /> font-size: 16px;<br /> line-height: 1.8;<br /> -webkit-font-smoothing: antialiased;<br /> position: relative;<br /> }<br /> <br /> body::before { /* static scanlines */<br /> content: &quot;&quot;;<br /> position: fixed;<br /> inset: 0;<br /> pointer-events: none;<br /> z-index: 9990;<br /> background: repeating-linear-gradient(<br /> 0deg, transparent, transparent 2px,<br /> rgba(0, 0, 0, 0.035) 2px, rgba(0, 0, 0, 0.035) 4px);<br /> }<br /> <br /> body::after { /* drifting glow: deep green and Dipfield violet */<br /> content: &quot;&quot;;<br /> position: fixed;<br /> top: 0;<br /> left: 0;<br /> width: 200%;<br /> height: 200%;<br /> pointer-events: none;<br /> z-index: 9988;<br /> background:<br /> radial-gradient(ellipse at 15% 40%, rgba(2, 95, 50, 0.07) 0%, transparent 55%),<br /> radial-gradient(ellipse at 75% 15%, rgba(63, 57, 84, 0.14) 0%, transparent 45%),<br /> radial-gradient(ellipse at 55% 75%, rgba(193, 225, 166, 0.04) 0%, transparent 50%),<br /> radial-gradient(circle at 90% 85%, rgba(2, 95, 50, 0.05) 0%, transparent 35%);<br /> animation: str-luminance-drift 30s ease-in-out infinite alternate;<br /> }<br /> <br /> @keyframes str-luminance-drift {<br /> 0% { transform: translate(0%, 0%); }<br /> 25% { transform: translate(-5%, -3%); }<br /> 50% { transform: translate(-8%, -6%); }<br /> 75% { transform: translate(-3%, -8%); }<br /> 100% { transform: translate(-10%, -4%); }<br /> }<br /> <br /> ::selection { background-color: var(--accent-fill) !important; color: var(--on-accent) !important; }<br /> <br /> :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }<br /> <br /> .kawaii-header-background { display: none !important; }<br /> <br /> /* === 4. Header<br /> Stacking: above #mw-content-container (skin z-index: 100) at every width, so the avatar menu is never covered by the content.<br /> Position: the sticky header is disabled on desktop widths only; mobile keeps Timeless's own positioning. === */<br /> #mw-header-container,<br /> #mw-header-hack,<br /> .mw-header-container {<br /> background-color: var(--paper) !important;<br /> border-bottom: 1px solid var(--rule) !important;<br /> z-index: 1000 !important;<br /> }<br /> @media screen and (min-width: 851px) {<br /> #mw-header-container,<br /> #mw-header-hack,<br /> .mw-header-container,<br /> .ts-container,<br /> #mw-header-container.ts-sticky,<br /> .mw-header-container[style*=&quot;position&quot;] {<br /> position: relative !important;<br /> top: auto !important;<br /> }<br /> #mw-header-container::after { display: none !important; }<br /> }<br /> .mw-header-content,<br /> #mw-header { background: transparent !important; }<br /> <br /> /* === 5. Site name S.T.R. OFFICE (wordmark and glitch kept, at a lower frequency) === */<br /> #p-banner {<br /> color: transparent !important;<br /> font-size: 0 !important;<br /> position: relative;<br /> display: flex !important;<br /> align-items: center;<br /> height: var(--control-h);<br /> }<br /> #p-banner a,<br /> #p-banner span {<br /> color: transparent !important;<br /> font-size: 0 !important;<br /> }<br /> #p-banner::after {<br /> content: &quot;S.T.R. OFFICE&quot;;<br /> font-family: var(--font-banner) !important;<br /> font-size: 22px;<br /> font-weight: 700;<br /> line-height: var(--control-h);<br /> color: var(--heading) !important;<br /> letter-spacing: 4px;<br /> text-transform: uppercase;<br /> text-shadow: 0 0 8px rgba(193, 225, 166, 0.5), 0 0 24px rgba(2, 95, 50, 0.4);<br /> position: relative;<br /> display: inline-block;<br /> animation: str-glitch-subtle 9s infinite;<br /> }<br /> @keyframes str-glitch-subtle {<br /> 0%, 93%, 100% {<br /> text-shadow: 0 0 8px rgba(193, 225, 166, 0.5), 0 0 24px rgba(2, 95, 50, 0.4);<br /> transform: translate(0, 0) skewX(0deg);<br /> opacity: 1;<br /> }<br /> 94% { text-shadow: -3px 0 #C1E1A6, 3px 0 #025F32; transform: translate(-2px, 0) skewX(-1deg); opacity: 0.88; }<br /> 95% { text-shadow: 3px 0 #C1E1A6, -3px 0 #3F3954; transform: translate(2px, 0) skewX(1deg); opacity: 0.92; }<br /> 96% { text-shadow: 0 0 8px rgba(193, 225, 166, 0.5); transform: translate(0, 0); opacity: 1; }<br /> }<br /> <br /> /* === 6. Search box (shared height, width and corner radius) === */<br /> #p-search {<br /> margin: 0 20px !important;<br /> display: flex;<br /> align-items: center;<br /> }<br /> #searchform {<br /> background: var(--paper-alt) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius) !important;<br /> display: flex !important;<br /> flex-direction: row !important;<br /> align-items: center !important;<br /> height: var(--control-h);<br /> box-sizing: border-box;<br /> padding: 0 6px 0 14px !important;<br /> width: 100%;<br /> max-width: var(--control-w);<br /> overflow: hidden;<br /> transition: border-color 0.2s ease, box-shadow 0.2s ease;<br /> }<br /> #searchform:focus-within {<br /> border-color: var(--accent) !important;<br /> box-shadow: 0 0 0 3px rgba(185, 178, 214, 0.18) !important;<br /> }<br /> #simpleSearch {<br /> background: transparent !important;<br /> border: none !important;<br /> width: 100% !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> #searchInput {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> font-family: var(--font-sans);<br /> font-size: 14px !important;<br /> padding: 0 !important;<br /> height: calc(var(--control-h) - 2px);<br /> color: var(--heading) !important;<br /> width: 100% !important;<br /> outline: none;<br /> }<br /> #searchInput::placeholder { color: var(--ink-muted); }<br /> <br /> /* === 7. Personal menu (avatar): original code, do not modify === */<br /> #personal-inner.dropdown {<br /> background-color: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> padding: 0 !important;<br /> }<br /> <br /> #personal-inner #p-personal {<br /> background-color: #1a1a1a !important;<br /> border: 1px solid var(--str-accent) !important;<br /> border-radius: 8px !important;<br /> padding: 10px !important;<br /> box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 8px var(--str-accent) !important;<br /> }<br /> <br /> #p-personal .mw-portlet-body {<br /> background-color: transparent !important;<br /> border: none !important;<br /> }<br /> <br /> #p-personal-label {<br /> background-color: transparent !important;<br /> color: var(--str-accent) !important;<br /> text-align: center;<br /> font-weight: bold;<br /> letter-spacing: 0.05em;<br /> margin-bottom: 10px;<br /> padding-bottom: 6px;<br /> border-bottom: 1px solid var(--str-accent) !important;<br /> }<br /> <br /> #p-personal .mw-portlet-body ul li {<br /> background-color: transparent !important;<br /> transition: background-color 0.15s ease;<br /> }<br /> <br /> #p-personal .mw-portlet-body ul li:hover {<br /> background-color: rgba(0, 255, 100, 0.1) !important;<br /> border-radius: 4px;<br /> }<br /> <br /> #personal .dropdown span {<br /> color: #22CC66 !important;<br /> text-decoration: none !important;<br /> }<br /> <br /> /* Personal menu items: original fonts, padding and hover effect */<br /> #p-personal h3 {<br /> font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif !important;<br /> text-transform: uppercase;<br /> }<br /> #p-personal .mw-portlet-body li a {<br /> color: #F5F5FF !important;<br /> font-family: 'LXGW WenKai Screen', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;<br /> transition: color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> #p-personal .mw-portlet-body li a:hover {<br /> color: #C1E1A6 !important;<br /> padding-left: 5px;<br /> text-decoration: none !important;<br /> text-shadow: 0 0 6px rgba(102, 238, 187, 0.3);<br /> }<br /> <br /> /* === 8. Left and right sidebars === */<br /> .sidebar-chunk {<br /> background-color: rgba(16, 16, 24, 0.6) !important;<br /> border-radius: var(--radius);<br /> border: 1px solid var(--rule) !important;<br /> margin-bottom: 16px;<br /> padding: 14px;<br /> box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);<br /> transition: border-color 0.3s ease;<br /> }<br /> .sidebar-chunk:hover { border-color: var(--src-huijia-green) !important; }<br /> <br /> /* Group names: HUD monospace, Plurimod light green */<br /> .sidebar-chunk h2,<br /> .sidebar-chunk h3,<br /> .sidebar-chunk .sidebar-name,<br /> .mw-portlet:not(#p-personal) h3 {<br /> font-family: var(--font-hud) !important;<br /> font-size: 13px !important;<br /> font-weight: 400 !important;<br /> color: var(--heading) !important;<br /> letter-spacing: 0.16em;<br /> text-transform: uppercase;<br /> border-bottom: 1px solid var(--rule) !important;<br /> padding-bottom: 8px;<br /> margin-bottom: 10px;<br /> }<br /> .sidebar-chunk h2::before,<br /> .mw-portlet:not(#p-personal) h3::before {<br /> content: &quot;◈ &quot;;<br /> color: var(--accent);<br /> font-size: 0.85em;<br /> }<br /> <br /> /* Nav links: green-leaning */<br /> .sidebar-chunk li a,<br /> .sidebar-chunk li a span,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a span,<br /> #mw-site-navigation li a span,<br /> #mw-related-navigation li a span,<br /> #p-normal-catlinks a,<br /> #p-variants-desktop a {<br /> color: var(--nav-ink) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.03em;<br /> text-decoration: none !important;<br /> }<br /> .sidebar-chunk li a,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a {<br /> transition: color 0.2s ease, padding-left 0.2s ease;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .sidebar-chunk li a:hover span,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover span {<br /> color: var(--heading) !important;<br /> text-decoration: none !important;<br /> }<br /> .sidebar-chunk li a:hover,<br /> .mw-portlet:not(#p-personal) .mw-portlet-body li a:hover { padding-left: 14px; }<br /> <br /> .sidebar-inner li a:before { color: var(--heading) !important; }<br /> .sidebar-inner li a:hover:before { color: #FFFFFF !important; }<br /> .sidebar-chunk .mw-ui-icon::before,<br /> .sidebar-chunk .mw-ui-icon svg,<br /> .sidebar-chunk img {<br /> filter: brightness(2.2) !important;<br /> opacity: 0.85 !important;<br /> }<br /> .mw-portlet:not(#p-personal) { background-color: transparent !important; padding: 0; }<br /> <br /> /* === 9. Content card: grid lines + corner markers === */<br /> /* 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 */<br /> #mw-content-wrapper {<br /> background: transparent !important;<br /> padding-top: 0;<br /> box-shadow: none !important;<br /> border: none !important;<br /> border-radius: 0 !important;<br /> }<br /> <br /> #mw-content {<br /> position: relative;<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink) !important;<br /> padding: 28px 32px;<br /> border-radius: var(--radius);<br /> border: 1px solid var(--rule);<br /> box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);<br /> background-image:<br /> /* corner markers: one horizontal and one vertical line per corner */<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> linear-gradient(var(--heading), var(--heading)),<br /> /* 40px grid */<br /> linear-gradient(var(--grid-line) 1px, transparent 1px),<br /> linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;<br /> background-size:<br /> 14px 1px, 1px 14px,<br /> 14px 1px, 1px 14px,<br /> 14px 1px, 1px 14px,<br /> 14px 1px, 1px 14px,<br /> 40px 40px, 40px 40px !important;<br /> background-position:<br /> 10px 10px, 10px 10px,<br /> calc(100% - 10px) 10px, calc(100% - 10px) 10px,<br /> 10px calc(100% - 10px), 10px calc(100% - 10px),<br /> calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),<br /> 0 0, 0 0 !important;<br /> background-repeat:<br /> no-repeat, no-repeat, no-repeat, no-repeat,<br /> no-repeat, no-repeat, no-repeat, no-repeat,<br /> repeat, repeat !important;<br /> }<br /> <br /> /* Body text: old-style serif. Color is set only on containers and text blocks, so inline colors in the page are not overridden */<br /> .mw-parser-output {<br /> font-family: var(--font-body);<br /> font-size: 16px;<br /> line-height: 1.9;<br /> letter-spacing: 0.02em;<br /> color: var(--ink);<br /> }<br /> #mw-content p, #mw-content li, #mw-content dd, #mw-content dt,<br /> .mw-body-content p, .mw-body-content li {<br /> color: var(--ink);<br /> }<br /> .mw-parser-output b,<br /> .mw-parser-output strong { font-family: var(--font-serif); font-weight: 600; color: var(--ink-bright); letter-spacing: 0; }<br /> i, em, cite { font-synthesis: none; }<br /> <br /> @media screen and (min-width: 1100px) {<br /> #mw-content-container { margin-top: 25px; }<br /> }<br /> <br /> @media screen and (min-width: 851px) {<br /> #p-variants-desktop h3 {<br /> padding: 0;<br /> margin: 0;<br /> display: flex;<br /> align-items: center;<br /> }<br /> }<br /> <br /> /* === 10. Page tabs (Template / Discussion / Read / Edit / History) === */<br /> .mw-portlet-views li a,<br /> .mw-portlet-namespaces li a,<br /> .mw-portlet-variants li a,<br /> .mw-portlet-views li a span,<br /> .mw-portlet-namespaces li a span {<br /> color: var(--ink-muted) !important;<br /> font-family: var(--font-body) !important;<br /> font-size: 15.5px;<br /> letter-spacing: 0.06em;<br /> }<br /> .mw-portlet-views li.selected a,<br /> .mw-portlet-namespaces li.selected a,<br /> .mw-portlet-views li.selected a span,<br /> .mw-portlet-namespaces li.selected a span {<br /> color: var(--heading) !important;<br /> }<br /> .mw-portlet-views li.selected a,<br /> .mw-portlet-namespaces li.selected a {<br /> border-bottom: 2px solid var(--src-huijia-green) !important;<br /> box-shadow: none !important;<br /> }<br /> .tabber__tab { color: var(--ink-muted) !important; font-family: var(--font-body) !important; }<br /> .tabber__tab[aria-selected=&quot;true&quot;] { color: var(--heading) !important; }<br /> .tabber__indicator { background: var(--src-huijia-green) !important; }<br /> <br /> /* === 11. Headings: Plurimod light green, with a deep-green underline that shortens by level === */<br /> .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,<br /> .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {<br /> font-family: var(--font-serif) !important;<br /> color: var(--heading) !important;<br /> font-weight: 600;<br /> letter-spacing: 0.08em;<br /> padding-bottom: 8px;<br /> margin-bottom: 0.8em;<br /> overflow: hidden;<br /> display: block;<br /> text-wrap: balance;<br /> }<br /> .mw-parser-output h1 { font-size: 26px; border-bottom: 2px solid var(--heading-bar) !important; }<br /> .mw-parser-output h2 { font-size: 23px; border-bottom: 2px solid rgba(2, 95, 50, 0.6) !important; margin-top: 1.6em; }<br /> .mw-parser-output h3 { font-size: 19px; }<br /> .mw-parser-output h4 { font-size: 17px; }<br /> .mw-parser-output h5 { font-size: 15px; }<br /> .mw-parser-output h6 { font-family: var(--font-hud) !important; font-size: 13px; letter-spacing: 0.14em; }<br /> <br /> /* Setting Zone mark: ◈ before h2 */<br /> .mw-parser-output h2::before {<br /> content: &quot;◈&quot;;<br /> color: var(--accent);<br /> font-size: 0.6em;<br /> margin-right: 10px;<br /> vertical-align: 0.2em;<br /> }<br /> .toc h2::before, #toc h2::before, .mw-parser-output .toctitle h2::before { content: none; }<br /> <br /> .mw-parser-output h3, .mw-parser-output h4,<br /> .mw-parser-output h5, .mw-parser-output h6 {<br /> border-bottom: none !important;<br /> position: relative;<br /> }<br /> .mw-parser-output h3::after, .mw-parser-output h4::after,<br /> .mw-parser-output h5::after, .mw-parser-output h6::after {<br /> content: &quot;&quot;;<br /> display: block;<br /> position: absolute;<br /> bottom: 0;<br /> left: 0;<br /> height: 2px;<br /> background: linear-gradient(90deg, var(--src-huijia-green), transparent);<br /> border-radius: 1px;<br /> }<br /> .mw-parser-output h3::after { width: 75%; }<br /> .mw-parser-output h4::after { width: 55%; opacity: 0.7; }<br /> .mw-parser-output h5::after { width: 35%; opacity: 0.5; }<br /> .mw-parser-output h6::after { width: 20%; opacity: 0.3; }<br /> <br /> h1.firstHeading {<br /> font-family: var(--font-serif) !important;<br /> color: var(--heading) !important;<br /> font-size: 30px;<br /> font-weight: 600;<br /> letter-spacing: 0.1em;<br /> border-bottom: 2px solid var(--heading-bar) !important;<br /> padding-bottom: 10px;<br /> margin: 0.25em 0 1em;<br /> }<br /> h1.firstHeading::before {<br /> content: &quot;▹&quot;;<br /> color: var(--nav-ink);<br /> margin-right: 10px;<br /> }<br /> <br /> <br /> /* === 12. Code and editors === */<br /> code {<br /> background-color: #1A1A30 !important;<br /> color: #88FFB8 !important;<br /> padding: 2px 6px;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> border: 1px solid var(--rule);<br /> }<br /> pre {<br /> position: relative;<br /> background-color: var(--paper-sunk) !important;<br /> color: var(--ink) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-left: 2px solid var(--src-huijia-green) !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-mono) !important;<br /> font-size: 13px;<br /> }<br /> .mw-editfont-monospace, #wpTextbox1, textarea.mw-editfont-monospace,<br /> .ace_editor, .ace_editor .ace_content, .ace_editor .ace_text-layer,<br /> .ace_editor .ace_line,<br /> .CodeMirror, .CodeMirror pre, .CodeMirror-code,<br /> .CodeMirror-line, .CodeMirror-line span,<br /> .mw-editfont-default, textarea {<br /> background-color: #0C0C18 !important;<br /> color: #E8FFE8 !important;<br /> font-family: var(--font-mono) !important;<br /> caret-color: var(--nav-ink) !important;<br /> }<br /> .CodeMirror-gutters {<br /> background-color: #08080F !important;<br /> border-right: 1px solid var(--rule) !important;<br /> }<br /> .CodeMirror-linenumber { color: var(--ink-muted) !important; }<br /> .ace_cursor {<br /> color: var(--nav-ink) !important;<br /> border-left-color: var(--nav-ink) !important;<br /> }<br /> <br /> /* === 13. Links === */<br /> a {<br /> color: var(--link) !important;<br /> text-decoration: none;<br /> transition: color 0.2s ease;<br /> }<br /> a:visited { color: var(--link-visited) !important; }<br /> a:hover {<br /> color: var(--link-hover) !important;<br /> text-decoration: underline dotted !important;<br /> text-underline-offset: 3px;<br /> }<br /> a.new, a.new:visited { color: var(--link-new) !important; }<br /> <br /> /* === 14. Tables === */<br /> table.wikitable {<br /> border-radius: var(--radius);<br /> overflow: hidden;<br /> border: 1px solid var(--rule) !important;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> background-color: var(--paper-alt) !important;<br /> box-shadow: none;<br /> font-family: var(--font-sans);<br /> font-size: 14px;<br /> }<br /> table.wikitable &gt; * &gt; tr &gt; th,<br /> table.wikitable &gt; tr &gt; th {<br /> background-color: rgba(2, 95, 50, 0.2) !important;<br /> color: var(--heading) !important;<br /> font-family: var(--font-hud) !important;<br /> font-size: 13px;<br /> font-weight: 400;<br /> letter-spacing: 0.1em;<br /> text-align: left;<br /> padding: 10px 12px;<br /> border: none;<br /> border-bottom: 2px solid var(--src-huijia-green) !important;<br /> }<br /> table.wikitable &gt; * &gt; tr &gt; td,<br /> table.wikitable &gt; tr &gt; td {<br /> padding: 9px 12px;<br /> border: none;<br /> border-top: 1px solid var(--rule) !important;<br /> color: var(--ink-bright) !important;<br /> background: transparent;<br /> }<br /> table.wikitable &gt; tbody &gt; tr:nth-of-type(even) { background: transparent; }<br /> table.wikitable &gt; tbody &gt; tr:last-of-type &gt; td { border-bottom: none; }<br /> table.wikitable &gt; tbody &gt; tr:hover &gt; td,<br /> table.wikitable &gt; tr:hover &gt; td {<br /> background-color: rgba(2, 95, 50, 0.12) !important;<br /> color: var(--ink-bright) !important;<br /> }<br /> <br /> /* === 15. Category bar and footer === */<br /> #catlinks {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> padding: 12px 15px;<br /> color: var(--ink-muted) !important;<br /> }<br /> .mw-footer {<br /> background-color: transparent !important;<br /> padding: 25px 30px;<br /> border-radius: var(--radius) var(--radius) 0 0;<br /> margin-top: 30px;<br /> border-top: 2px solid var(--src-huijia-green) !important;<br /> color: var(--ink-muted) !important;<br /> }<br /> .mw-footer-container { background: transparent; }<br /> .mw-footer li,<br /> .mw-footer a { color: var(--ink-muted) !important; }<br /> <br /> /* === 16. Table of contents === */<br /> .toc, #toc {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> padding: 15px;<br /> color: var(--ink) !important;<br /> }<br /> .toc h2, #toc h2 {<br /> font-family: var(--font-hud) !important;<br /> color: var(--heading) !important;<br /> font-size: 13px !important;<br /> letter-spacing: 0.14em;<br /> }<br /> .toc a { color: var(--link) !important; }<br /> .toc li { color: var(--ink) !important; }<br /> <br /> /* === 17. Logo === */<br /> #p-logo, .mw-portlet-logo {<br /> display: flex !important;<br /> justify-content: center;<br /> align-items: center;<br /> padding: 15px 0 !important;<br /> margin-bottom: 8px;<br /> }<br /> <br /> /* === 18. Editor toolbar, buttons, diffs, inputs, message boxes === */<br /> .oo-ui-toolbar-bar {<br /> background-color: var(--paper-alt) !important;<br /> border-color: var(--rule) !important;<br /> }<br /> .oo-ui-buttonElement-framed.oo-ui-widget-enabled &gt; .oo-ui-buttonElement-button {<br /> background-color: var(--paper-alt) !important;<br /> color: var(--ink-bright) !important;<br /> border-color: var(--rule-strong) !important;<br /> border-radius: var(--radius-sm) !important;<br /> }<br /> .oo-ui-labelElement .oo-ui-labelElement-label { color: var(--ink) !important; }<br /> .oo-ui-textInputWidget input,<br /> .oo-ui-textInputWidget textarea {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink-bright) !important;<br /> border-color: var(--rule-strong) !important;<br /> }<br /> td.diff-context {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink) !important;<br /> }<br /> td.diff-addedline { background-color: rgba(2, 95, 50, 0.18) !important; }<br /> td.diff-deletedline { background-color: rgba(180, 50, 50, 0.18) !important; }<br /> <br /> input[type=&quot;text&quot;], input[type=&quot;search&quot;],<br /> input[type=&quot;password&quot;], select {<br /> background-color: var(--paper-raised) !important;<br /> color: var(--ink-bright) !important;<br /> border: 1px solid var(--rule-strong) !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-sans) !important;<br /> }<br /> .mw-ui-button,<br /> input[type=&quot;submit&quot;] {<br /> background-color: var(--accent-fill) !important;<br /> color: var(--on-accent) !important;<br /> border: none !important;<br /> border-radius: var(--radius-sm);<br /> font-family: var(--font-sans) !important;<br /> letter-spacing: 0.04em;<br /> transition: background-color 0.2s ease;<br /> }<br /> .mw-ui-button:hover,<br /> input[type=&quot;submit&quot;]:hover {<br /> background-color: var(--accent-fill-hover) !important;<br /> box-shadow: 0 0 16px rgba(34, 204, 102, 0.35);<br /> }<br /> .previewnote, .mw-warning-with-logexcerpt, .warningbox {<br /> background-color: rgba(63, 57, 84, 0.3) !important;<br /> border-color: var(--rule) !important;<br /> color: var(--ink) !important;<br /> }<br /> .successbox {<br /> background-color: rgba(2, 95, 50, 0.2) !important;<br /> border-color: var(--src-huijia-green) !important;<br /> color: var(--ink) !important;<br /> }<br /> .errorbox {<br /> background-color: rgba(180, 50, 50, 0.2) !important;<br /> color: #FFAAAA !important;<br /> }<br /> <br /> /* === 18b. Infobox and navbox: dark version<br /> Common.css draws the infobox light (#fbfbfb background, #ddd border); the Setting Zone switches it to dark.<br /> A template's background parameter is written as an inline style, so it still takes priority. */<br /> .infoBox {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius) !important;<br /> box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;<br /> color: var(--ink) !important;<br /> overflow: hidden;<br /> }<br /> .infoBoxContent {<br /> background-color: var(--paper-raised) !important;<br /> border: none !important;<br /> border-top: 1px solid var(--rule) !important;<br /> border-radius: 0 !important;<br /> }<br /> .infoBoxTitle {<br /> color: var(--heading) !important;<br /> font-family: var(--font-serif);<br /> letter-spacing: 0.08em;<br /> }<br /> .infoBoxText,<br /> .infoBoxBelow { color: var(--ink) !important; }<br /> .infoBoxIcon { color: var(--accent) !important; }<br /> .infoBox a { color: var(--link) !important; }<br /> <br /> table.infobox {<br /> background-color: var(--paper-alt) !important;<br /> color: var(--ink) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius);<br /> }<br /> table.infobox th { color: var(--heading) !important; background-color: rgba(2, 95, 50, 0.2) !important; }<br /> <br /> .navbox,<br /> .navbox-subgroup,<br /> .navbox-list { background-color: var(--paper-alt) !important; border-color: var(--rule) !important; color: var(--ink) !important; }<br /> .navbox th, .navbox-title { background-color: rgba(2, 95, 50, 0.25) !important; color: var(--heading) !important; }<br /> .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background-color: rgba(63, 57, 84, 0.35) !important; color: var(--ink) !important; }<br /> .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background-color: var(--paper-raised) !important; }<br /> .navbox-even { background-color: rgba(255, 255, 255, 0.02) !important; }<br /> .navbox-odd { background-color: transparent !important; }<br /> <br /> /* === 18c. White background at low resolutions<br /> On narrow screens Timeless changes its layout; html and several wrapper containers have a white background that shows through.<br /> The canvas is set to violet-black here, and all wrappers are transparent. */<br /> html { background-color: var(--paper) !important; }<br /> #mw-wrapper,<br /> #mw-header-hack,<br /> #mw-header-nav-hack,<br /> #mw-content-container,<br /> #mw-content-block,<br /> #mw-site-navigation,<br /> #mw-related-navigation,<br /> #mw-footer-container,<br /> #mw-footer,<br /> .ts-inner {<br /> background-color: transparent !important;<br /> }<br /> <br /> /* === 19. Scrollbar === */<br /> ::-webkit-scrollbar { width: 8px; height: 8px; }<br /> ::-webkit-scrollbar-track { background: var(--paper); }<br /> ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }<br /> ::-webkit-scrollbar-thumb:hover { background: var(--src-huijia-green); }<br /> <br /> /* === 20. Reading progress bar, scanline sweep, copy button === */<br /> #str-progress-container {<br /> position: fixed; bottom: 0; left: 0;<br /> width: 100%; height: 3px;<br /> background: rgba(0, 0, 0, 0.6);<br /> z-index: 99999;<br /> pointer-events: none;<br /> }<br /> #str-progress-bar {<br /> height: 100%; width: 0;<br /> background: linear-gradient(90deg, #025F32, #22CC66, #C1E1A6);<br /> box-shadow: 0 0 8px rgba(34, 204, 102, 0.6);<br /> }<br /> #str-scanline-sweep {<br /> position: fixed; inset: 0; pointer-events: none;<br /> z-index: 9991; overflow: hidden;<br /> }<br /> #str-scanline-sweep::after {<br /> content: &quot;&quot;; position: absolute; left: 0;<br /> width: 100%; height: 4px;<br /> background: linear-gradient(90deg,<br /> transparent 0%, rgba(193, 225, 166, 0.05) 15%,<br /> rgba(2, 95, 50, 0.10) 40%, rgba(34, 204, 102, 0.06) 60%,<br /> rgba(193, 225, 166, 0.05) 85%, transparent 100%);<br /> animation: str-sweep-down 9s linear infinite;<br /> }<br /> @keyframes str-sweep-down { 0% { top: -10px; } 100% { top: 100%; } }<br /> <br /> .str-copy-btn {<br /> position: absolute; top: 8px; right: 8px;<br /> background: rgba(2, 95, 50, 0.85); color: #FFFFFF;<br /> border: 1px solid rgba(193, 225, 166, 0.25);<br /> border-radius: var(--radius-sm);<br /> padding: 4px 10px; font-size: 11px;<br /> font-family: var(--font-hud);<br /> letter-spacing: 0.1em; text-transform: uppercase;<br /> cursor: pointer; opacity: 0;<br /> transition: opacity 0.2s ease; z-index: 50;<br /> }<br /> pre:hover .str-copy-btn,<br /> .str-copy-btn:focus-visible { opacity: 1; }<br /> <br /> /* === 21. Reduced motion === */<br /> @media (prefers-reduced-motion: reduce) {<br /> body::after,<br /> #p-banner::after,<br /> #str-scanline-sweep::after { animation: none !important; }<br /> #str-scanline-sweep { display: none; }<br /> * { transition: none !important; }<br /> }<br /> <br /> /* === 22. Mobile (≤850px) === */<br /> @media screen and (max-width: 850px) {<br /> #mw-content { padding: 18px 16px; }<br /> .sidebar-chunk {<br /> transform: none !important;<br /> opacity: 1 !important;<br /> background: none !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> .sidebar-chunk h2 {<br /> font-size: 0 !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> }<br /> .sidebar-chunk h2::before { content: none; }<br /> #mw-content-block { background: transparent !important; }<br /> .sidebar-chunk:empty,<br /> .mw-portlet:empty,<br /> .mw-portlet:not(:has(li)):not(:has(a)) {<br /> display: none !important;<br /> border: none !important;<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> background: none !important;<br /> }<br /> #mw-content-block .sidebar-chunk {<br /> border: none !important;<br /> box-shadow: none !important;<br /> background: transparent !important;<br /> padding: 0 !important;<br /> }<br /> table.wikitable { display: block; overflow-x: auto; white-space: normal; }<br /> <br /> /* On narrow screens the sidebars become dropdown menus; their panels go dark so no white shows through */<br /> #mw-site-navigation .sidebar-inner,<br /> #mw-related-navigation .sidebar-inner,<br /> #site-tools .sidebar-inner,<br /> #mw-site-navigation .dropdown .mw-portlet-body,<br /> #mw-related-navigation .dropdown .mw-portlet-body {<br /> background-color: var(--paper-alt) !important;<br /> border: 1px solid var(--rule) !important;<br /> border-radius: var(--radius) !important;<br /> box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;<br /> color: var(--ink) !important;<br /> }<br /> <br /> /* Cap the logo size so it can't blow up when the sidebar renders incorrectly */<br /> #p-logo img {<br /> max-width: 180px !important;<br /> width: auto !important;<br /> height: auto !important;<br /> }<br /> }<br /> &lt;/style&gt;<br /> <br /> &lt;script&gt;<br /> /**<br /> * S.T.R. OFFICE — UI ENHANCEMENTS (v3.0)<br /> * Kept: reading progress bar, code copy button, scanline sweep, non-sticky header<br /> * Removed: full-screen flicker layer, scroll fade-ins, ambient pulse<br /> */<br /> (function () {<br /> &quot;use strict&quot;;<br /> if (window.__strThemeLoaded) return;<br /> window.__strThemeLoaded = true;<br /> <br /> var reduceMotion = window.matchMedia &amp;&amp; window.matchMedia(&quot;(prefers-reduced-motion: reduce)&quot;).matches;<br /> var isZh = (document.documentElement.lang || &quot;&quot;).toLowerCase().indexOf(&quot;zh&quot;) === 0;<br /> var LABEL = isZh ? { copy: &quot;复制&quot;, done: &quot;已复制&quot;, fail: &quot;请手动复制&quot; }<br /> : { copy: &quot;COPY&quot;, done: &quot;COPIED&quot;, fail: &quot;FAILED&quot; };<br /> <br /> function killStickyHeader() {<br /> /* Mobile keeps Timeless's own header positioning */<br /> if (window.matchMedia &amp;&amp; window.matchMedia(&quot;(max-width: 850px)&quot;).matches) return;<br /> var hdr = document.getElementById(&quot;mw-header-container&quot;);<br /> if (!hdr || !window.MutationObserver) return;<br /> var pin = function () {<br /> hdr.style.setProperty(&quot;position&quot;, &quot;relative&quot;, &quot;important&quot;);<br /> hdr.style.setProperty(&quot;top&quot;, &quot;auto&quot;, &quot;important&quot;);<br /> };<br /> pin();<br /> new MutationObserver(pin).observe(hdr, { attributes: true, attributeFilter: [&quot;class&quot;, &quot;style&quot;] });<br /> }<br /> <br /> function initProgress() {<br /> if (document.getElementById(&quot;str-progress-container&quot;)) return;<br /> var c = document.createElement(&quot;div&quot;);<br /> c.id = &quot;str-progress-container&quot;;<br /> var b = document.createElement(&quot;div&quot;);<br /> b.id = &quot;str-progress-bar&quot;;<br /> c.appendChild(b);<br /> document.body.appendChild(c);<br /> var ticking = false;<br /> function update() {<br /> var st = window.pageYOffset || document.documentElement.scrollTop;<br /> var dh = document.documentElement.scrollHeight - document.documentElement.clientHeight;<br /> b.style.width = (dh &gt; 0 ? (st / dh) * 100 : 0) + &quot;%&quot;;<br /> ticking = false;<br /> }<br /> window.addEventListener(&quot;scroll&quot;, function () {<br /> if (!ticking) { ticking = true; window.requestAnimationFrame(update); }<br /> }, { passive: true });<br /> update();<br /> }<br /> <br /> function initCopy() {<br /> document.querySelectorAll(&quot;#mw-content pre&quot;).forEach(function (block) {<br /> if (block.querySelector(&quot;.str-copy-btn&quot;)) return;<br /> var btn = document.createElement(&quot;button&quot;);<br /> btn.type = &quot;button&quot;;<br /> btn.className = &quot;str-copy-btn&quot;;<br /> btn.textContent = LABEL.copy;<br /> btn.addEventListener(&quot;click&quot;, function (e) {<br /> e.preventDefault();<br /> e.stopPropagation();<br /> var clone = block.cloneNode(true);<br /> var own = clone.querySelector(&quot;.str-copy-btn&quot;);<br /> if (own) own.remove();<br /> var text = clone.textContent.trim();<br /> var done = function (label) {<br /> btn.textContent = label;<br /> setTimeout(function () { btn.textContent = LABEL.copy; }, 2000);<br /> };<br /> if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) {<br /> navigator.clipboard.writeText(text).then(<br /> function () { done(LABEL.done); },<br /> function () { done(LABEL.fail); }<br /> );<br /> } else {<br /> done(LABEL.fail);<br /> }<br /> });<br /> block.appendChild(btn);<br /> });<br /> }<br /> <br /> function initSweep() {<br /> if (reduceMotion || document.getElementById(&quot;str-scanline-sweep&quot;)) return;<br /> var div = document.createElement(&quot;div&quot;);<br /> div.id = &quot;str-scanline-sweep&quot;;<br /> div.setAttribute(&quot;aria-hidden&quot;, &quot;true&quot;);<br /> document.body.appendChild(div);<br /> }<br /> <br /> function init() {<br /> killStickyHeader();<br /> initProgress();<br /> initCopy();<br /> initSweep();<br /> }<br /> <br /> if (document.readyState === &quot;loading&quot;) {<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, init);<br /> } else {<br /> init();<br /> }<br /> })();<br /> &lt;/script&gt;<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;&lt;noinclude&gt;{{Theme-STR}}<br /> ==Description==<br /> '''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.<br /> <br /> 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.<br /> <br /> ==Origin==<br /> Author: [[User:PlurimodSU|Marina Malinti]]<br /> <br /> ===Note===<br /> To use this theme on a page, simply add the following code directly to the page's source code:<br /> &lt;pre&gt;{{Theme-STR}}&lt;/pre&gt;<br /> <br /> ==Test==<br /> A body paragraph with an [[Main Page|internal link]], a [[Nonexistent Page|red link]], some &lt;code&gt;inline code&lt;/code&gt; and '''bold text'''. &lt;span style=&quot;color:#FFD700;&quot;&gt;This inline color should stay gold.&lt;/span&gt;<br /> <br /> ===Subheading 3===<br /> ====Subheading 4====<br /> =====Subheading 5=====<br /> ======Subheading 6======<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! Event !! S.C. !! O.<br /> |-<br /> | Sample event A || 1999 || 0<br /> |-<br /> | Sample event B || 2021.05.14 || 22.05.14<br /> |}<br /> <br /> [[Category:Template-Theme]]<br /> &lt;/noinclude&gt;</div> PlurimodSU https://en.huijia.fun/index.php?title=MM&diff=171 MM 2026-09-01T06:00:35Z <p>PlurimodSU: Create the page: Redirect</p> <hr /> <div>#Redirect [[User:PlurimodSU]]</div> PlurimodSU https://en.huijia.fun/index.php?title=User:PlurimodSU&diff=170 User:PlurimodSU 2026-08-28T03:38:12Z <p>PlurimodSU: Grammer mistake refixed</p> <hr /> <div>{{Theme-HJ}}<br /> {{Info<br /> |title = &lt;span style=&quot;font-family: 'Huiwen'; color: #555555;&quot;&gt;✧ Marina Malinti ✧&lt;/span&gt;<br /> |file = Marina Malinti Avatar.jpg<br /> |size=150px<br /> |description=&lt;big&gt;&lt;div style=&quot;text-shadow: 0 0 15px #9ADCFF; font-family: 'Huiwen'; color: #556B2F;&quot;&gt;· Marina Malinti ·&lt;/div&gt;&lt;/big&gt;<br /> |1 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Penname&lt;/span&gt;<br /> |T1 = Marina Malinti（Malint）<br /> |2 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Sponsorship&lt;/span&gt;<br /> |T2 = Plurimod Student Union<br /> |3 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Alias&lt;/span&gt;<br /> |T3 = Gesamtkunstwerk Creator&lt;br&gt;HUIJIA FUN Founder &amp; Organizer<br /> |4 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Creative Fields&lt;/span&gt;<br /> |T4 = World Building · Fiction · Music · Constructed Language · Website Design · Archive Collection<br /> |5 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Academy&lt;/span&gt;<br /> |T5 = 2021–2024: [[Huijia Academy]]&lt;br&gt;2024-Now: University of Utah<br /> |6 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Find me&lt;/span&gt;<br /> |T6 = [mailto:a@huijia.fun a@huijia.fun]<br /> |7 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Site&lt;/span&gt;<br /> |T7 = [https://en.huijia.fun en.huijia.fun]&lt;br&gt;[https://huijia.fun huijia.fun] (Chinese Branch)<br /> }}<br /> <br /> Nice to meet you, this is '''Marina Malinti''', the creator of this website, HUIJIA FUN, also the creator behind &quot;[[Verdant Green Revelation]]&quot; (VGR) Series.<br /> <br /> This account sometimes appears under the sponsorship of the '''Plurimod Student Union''' -- within VGR's setting, the governing body of the continental system. It's one face of my creative work, or you might say a channel through which Plurimod speaks through me -- but behind the page, it's mostly just me.<br /> <br /> I identify myself as a '''world-building Gesamtkunstwerk (total artwork) creator'''. I'm fascinated by building a world from a single idea -- letting it grow the way that a seed grows into a tree. First comes the point of origin: those jokes we passed around at [[Huijia Academy]], anecdotes that came from who-knows-where, fragments of legend. From there grows a faith, and from that faith grow the world carried by the fictions, the music, the language, the visuals -- each confirming the others, each part of one whole. Writing a chapter, playing a phrase of music, designing a grammar rule, or writing a line of code for this site -- all of it is my contribution to VGR, a way of turning the intimate, abstract shapes in my head into something that can be recorded. They're all different facets of the same world.<br /> <br /> What I want, when I look at my own body of work, is for it to feel '''designed''' -- like different trunks grown from the same seed. Even if those trunks sprawl in every direction, tangled and dizzying to look at, you'll find that every leaf, wherever it grows, shares the same genetic logic.<br /> <br /> == ✦ What I Do ==<br /> &lt;small&gt;For VGR's entry, see [[Verdant Green Revelation]]; for VGR's creative works, see [[Canon Area]]; for VGR's settings, see [[Worldview Area]]&lt;/small&gt;<br /> <br /> On June 7, 2023, I had the whim to start designing the Huijia-themed world with a few friends. We wrote several early pieces that now look laughably crude, yet they laid the groundwork for the entire VGR system, shaping it in ways that are still felt today. In November 2023, I finally settled on a name for the entire system, &quot;Verdant Green Revelation,&quot; and started taking it seriously as my own Gesamtkunstwerk project. In January 2024, I designed and built the first version of HUIJIA FUN, which is the website you're looking at now. Even back then, it looked much like it does today. On September 19, 2025, I began building the English branch of the HUIJIA FUN website and translating my work into English.<br /> <br /> '''Verdant Green Revelation''' is the core work I've been creating since 2023 and continue to work on today -- a parallel world of Huijia Academy, a Gesamtkunstwerk project under my direction. It's a soft sci-fi total artwork series set in a parallel world, the novel component of which I began writing in 2025.<br /> <br /> === ✦ Creative Fields ===<br /> * '''World-Building''': I began systematic world-building in June 2023. The earliest version of the world had no settled name and leaned toward humor and metaphor, existing purely for entertainment. Later, once I started taking my literature classes seriously, I went back and reexamined my earlier work -- tore it down, and rebuilt it into what exists today.<br /> * '''Fiction''': Starting in 2025, I began writing literary works such as [[GRA|''Master Marinaqua, Not Laid to Rest'']] -- my debut piece of prose fiction. It isn't part of VGR's &quot;thread&quot;, but stands as one of its &quot;apocrypha&quot; (side-novel) series.<br /> * '''Music''': Since July 2026, I've been composing VGR-related music in Cubase -- mainly orchestral music blending Celtic, epic, and rock elements. I'm currently working on my first VGR album, ''Aqueous Palingenesis''. I made several orchestral practice pieces in late 2025, though most were never publicly or formally released.<br /> * '''Constructed Language''': I began designing Pre-Diphic (YoDiPiKa) in late 2025.<br /> * '''Visual Design''': I was already working in visual design and VFX back in 2021, before VGR even existed as a concept. Today, I handle this site's logo, visual design, and interaction design. There are also dozens of video-editing works I've created as VGR spinoffs.<br /> * '''MediaWiki''': To give VGR a home, I started learning MediaWiki's design, development, and maintenance on June 7, 2023, when HUIJIA FUN's predecessor site was first created. By early 2024, that work had grown into the earliest form of HUIJIA FUN.<br /> <br /> === ✦ Skills ===<br /> * Visual: Adobe After Effects, Adobe Premiere Pro, Adobe Illustrator, Cinema 4D, Blender<br /> * Audio: Cubase, FL Studio, East West<br /> * Web Development: PHP, MediaWiki<br /> <br /> == ✦ About Me &amp; Why Huijia ==<br /> ''Huijia Academy was the three most indispensable years of my life. To me, it's no longer a school -- it's history.''<br /> <br /> If I'm going to tell the story of how I started creating, it has to begin when I was 14. It was in August 2021 that I first enrolled at Huijia Academy and started exploring all these hobbies. Even now, realizing just how many sprawling, unrelated fields I somehow found the spare energy for, I still can't help scoffing a little.<br /> <br /> Honestly, let me tell you about something pointless that happened right after: &quot;whether sound and image could be mismatched on purpose and still land a joke&quot;. Step one -- pick a few of our more well-known teachers, then, with a couple of accomplices, sneak a camera into class and quietly record the lesson. Step two -- cut the footage into short clips, score them with music, deliberately mistime everything, and somehow end up with something absurdly funny. And so, one after another, these little &quot;works&quot; -- built from raw classroom footage, made purely for laughs -- came into being. Step three -- I lost all sense of proportion. It wasn't just my beloved teachers anymore, and I started doing the same thing to my dear roommates and friends. They might just casually send over a staged joke video, or even a mock &quot;threat&quot; video, and to me, all of it became raw videos to be recut, rescored, reinterpreted from scratch. Even elevated to the status of a kind of founding text, the sort of thing I'd want to annotate with a hundred lines of commentary explaining exactly why it was funny. Fueled by more creative drive than I knew what to do with, I churned out countless clips -- mediocre, most of them -- that somehow got passed around as &quot;comedy&quot; for a very long time.<br /> <br /> That's the earliest, roughest chapter of my creative history.<br /> <br /> This is where I have to thank Bululu, the person who, early on, showed the most interest in my rough little creations and did the most to keep me going. We first got to know each other through nothing more than gossip about the gaming world; and he was mostly just listening at first. But talk led to more talk, and eventually we grew close. Later, during a stretch when I didn't have enough equipment, he lent me his iPad so I could keep editing whenever I wanted. In return, I helped him past a problem that had been bothering him for a while (he was stuck on a rhythm-game level he couldn't clear).<br /> <br /> That's how the friendship really began, and it grew into something more.<br /> <br /> Honestly, this game -- half prank, half genuine creation -- was ridiculous and unpolished, but it did real work building up my confidence and my eye as an artist, at least to some degree. Around that time I set myself a whole code of &quot;rules,&quot; the way a knight is bound by a code of chivalry. Mine went something like this: which footage was usable, what made a cut funny, exactly which frame a beat had to land on, what counted as a genuinely good piece of work, and how to reproduce that quality on gear and software far below what the &quot;real&quot; creators used. All of it worked out by trial and error, then forced into practice, copying the best examples I could find into cruder versions of my own. I believed in those rules the way people believe in scripture, and let them bleed into how I dealt with people and thought about things in real life. Because I was convinced that this kind of high-minded creative work was simply the truth, and that anyone who found my thinking strange just had terrible and appalling taste. That's how far gone I was. It all feels like a dream now, long since over. Then, my instinct to synchronize music and images has shaped who I am now, as the underlying logic I used to think with has influenced the design of everything I create, to some extent.<br /> <br /> Later, when that same impulse landed on the entire school, things escalated on their own.<br /> <br /> It's a laughable thing to admit. Four hundred years ago, Don Quixote imagined himself a knight, mistook windmills for giants, and rode off to fight for the woman he loved. Four hundred years later, I imagined Huijia Academy as a fantastical continent sent down by the gods, imagined myself an adventurer, and declared myself a disciple of &quot;the Creator Hua.&quot; The half-finished, off-limits sections of campus became a wasteland I explored at my own risk; the whole school became a disaster zone under siege by the evil-dog-god &quot;Modom&quot;. Switching to a new campus building got recast as an adventurer's journey to a foreign land. I wrote my own school into the &quot;scripture&quot; as a place blessed by the gods, drawing in a motley crowd of outsiders. And, as a believer, I had to choose a &quot;Great Reverend of Hua&quot; towards whom I can be reverent. I imagined the unfortunate one of my classmates as the &quot;creator reincarnated&quot;, and reimagined the one friend easiest to tease as a terrorist in need of redemption. Then, alone, across these few hundred thousand square meters of campus -- carved up like warring fiefdoms, crawling with magic and fantasy -- I played the role of an aimless wandering adventurer: cutting through thorns, punishing evil, eulogizing my god &quot;Hua&quot; and the unfortunate reverend I'd chosen to follow him, walking a path of devotion for no reason but to earn my place in the faith, a hero descended from my own god, for that god and that faith I fought, relentlessly I walked, toward the edge of the world. In between conquests, whenever I had spare time and too much to say, I'd turn myself into a wandering troubadour, preaching the greatness of Hua to others, recounting my own legend and my list of heroic deeds -- the notebook I'd just grabbed off my desk after class became a harp in my left hand, and the bag on my back was reimagined as an adventurer's packed pack. The handful of people around me, who I could never quite tell were laughing at the story or wherever, got promoted to &quot;the faithful.&quot; Anyone who actually seemed to be listening got made a deacon. If they were devoted enough, they could work their way up to the marshal and even grand prior in the Ordre du Temple I'd invented. By the end, I had an entire sect of commilitones, complete with a congregation. All the while I was writing up these fantastical Huijia documents, I was also fully in character -- treating the gods I'd invented, and the classmates unlucky enough to be &quot;possessed&quot; by them, as if they were real. I was genuinely convinced and obsessed, believing hard enough to kneel and weep. After school, before evening study hall, I'd skip my homework entirely and stay in the classroom losing myself on paper -- and look up to find the sun had already set, with evening study about to start... In short, this pitiable scholar got so carried away by their own overheated prose that they nearly forgot their actual job as a student, and almost forgot they still had a TOEFL exam to take and a diploma to earn.<br /> <br /> But then again, that's the skill of forcing fun out of boring days at school -- or so I'd like to think. That whole stretch of time was still worth every minute.<br /> <br /> To sum up, first I imagined a world, and then I lived inside it, following its rules, its narrative, its mythology to the letter. I kept up the act for a long time -- long enough that I genuinely couldn't tell anymore whether I was an adventurer or just a student.<br /> <br /> Then, one day I flipped open an old math notebook -- not to review math, but because most of the pages meant for math had already been overrun by my own &quot;prophecies&quot; and &quot;legends&quot; -- and it hit me that all this preaching and adventuring, absurd as it clearly was, amounted to nothing more than daydreaming out of boredom. But more important than finding it funny was this: I suddenly realized the material actually held together. None of these stories were random -- every one of them had grown out of some real internal logic. And I thought, maybe this is actually worth taking seriously.<br /> <br /> So, I gathered up all those scattered fragments -- the improvised, wandering-bard version of the story -- piece by piece, cut out whatever existed purely for a laugh, and kept and straightened out whatever still held its shape. In November 2023, I gave this world its first real name: '''Verdant Green Revelation'''. Huijia's signature color is a deep, near-black green -- the exact shade every alumnus can picture with their eyes closed -- so when it came time to name it, I barely hesitated.<br /> <br /> Now, it's no longer just some ordinary teenager's daydream. It's something I truly love, and something I'm willing to spend many serious years on.<br /> <br /> == ✦ Find Me ==<br /> Feel free to reach out about VGR, world-building, music, or this site itself.<br /> <br /> * '''Email''': [mailto:a@huijia.fun a@huijia.fun]<br /> * '''Chinese Site''': [https://huijia.fun huijia.fun]<br /> * '''English Site''': [https://en.huijia.fun en.huijia.fun]</div> PlurimodSU https://en.huijia.fun/index.php?title=Main_Page&diff=169 Main Page 2026-08-27T18:04:40Z <p>PlurimodSU: Edit</p> <hr /> <div>&lt;html&gt;&lt;style&gt;<br /> .mini-block-portfolio {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-portfolio:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-portfolio .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-portfolio .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-portfolio .mini-block-title,<br /> .mini-block-portfolio .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-portfolio .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> <br /> .mini-block-canon {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-canon:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-canon .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-canon .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-canon .mini-block-title,<br /> .mini-block-canon .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-canon .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> &lt;/style&gt;&lt;/html&gt;<br /> {{Theme-HJ}}<br /> &lt;div style=&quot;font-size: 26px;margin-top: 6px;text-align: center;&quot;&gt;'''Welcome to「HUIJIA FUN - Rooted in Huijia School」'''&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 18px;margin-bottom: 6px;text-align: center;&quot;&gt;''The Parallel Universe Rooted in [[Beijing Huijia Private School|Huijia Academy]]'' - A Gesamtkunstwerk Work by [[Marina Malinti]]&lt;/div&gt;<br /> &lt;div style=&quot;font-family:Huiwen;text-align: center;&quot;&gt;TIP: THE ENGLISH BRANCH WEBSITE IS STILL UNDER THE BASIC CONSTRUCTION. PLEASE FORGIVE THE LOW COMPLETION RATE.&lt;br&gt;· Chinese Branch: https://huijia.fun&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;tabber&gt;<br /> |-|Website Information=<br /> &lt;br&gt;<br /> [[File:HUIJIA LOGO.png|150px|frameless|right]]<br /> &lt;span class=&quot;mini-block-title&quot;&gt;Welcome to HUIJIA FUN&lt;/span&gt;<br /> <br /> HUIJIA FUN began as a fan wiki dedicated to Beijing Huijia Private School and has since grown into something more. Today it serves as the '''official archive and Intellectual Property''' of [[Marina Malinti]] built upon the culture of Huijia as its spiritual origin and also get recognized by Huijia's principal.<br /> <br /> Whatever, This site is home to the '''[[Verdant Green Revelation]]''': A Gesamtkunstwerk (Total Art) IP encompassing novel series, music albums, constructed language [[Pre-Diphic]], OtoMAD works and even a speculative worldview rooted in Huijia Academy.<br /> <br /> This website is '''non-profit''' '''non-advertisement''' and '''non-membership'''. It is largely created and maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]]. For questions or consultation please contact me directly through: a@huijia.fun<br /> <br /> |-|Create a Page=<br /> &lt;br&gt;<br /> &lt;div style=&quot;text-align:center&quot;&gt; '''Remember! This website is publicly accessible on the internet!'''<br /> <br /> I fully support and actively encourage fan editing. To ensure resource reliability information neutrality and compliance with the '''Creative Commons''' license and copyright, please make sure you have read the [[Guideline]] and understand the community and editing rules. Before writing a page, please be aware that this site follows the '''CC BY-SA''' license and maintains relatively rigorous content standards.<br /> <br /> Ready? Create a page through the section below!<br /> {{#createpage:}}<br /> &lt;/div&gt;<br /> &lt;/tabber&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block mini-block-canon&quot; style=&quot;border-left: 4px solid #025F32;&quot;&gt;<br /> &lt;div class=&quot;mini-block-fulllink&quot;&gt;[[Canon Area]]&lt;/div&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Canon&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;center&gt;<br /> &lt;div style=&quot;font-family: 'Noto Serif SC', serif; margin: 1.6em 1em 1.2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 28px; font-weight: 600; letter-spacing: 0.06em; color: #025F32; text-shadow: 0 1px 3px rgba(2,95,50,0.15);&quot;&gt;墨绿色的启示录&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8fa896; margin-top: 4px;&quot;&gt;Verdant Green Revelation&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 15px; opacity: 0.75; margin-top: 0.8em; font-style: italic;&quot;&gt;VGR Portfolio：Everything is still unfolding&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/center&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Worldview&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Worldview Area]]&lt;/span&gt;<br /> <br /> ''The fictional universe of VGR - myths, mankind, and canons.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Mythos|Mythos]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Entity|Entity]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Cosmology|Cosmology]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Archive&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Archive Area]]&lt;/span&gt;<br /> <br /> ''The real Huijia - documents, footage, and the origin of it all.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Record|Record]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Origin|Origin]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Tangent|Tangent]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Quick Guide&lt;/big&gt;<br /> <br /> ''[[Quick Guide|Click here to jump to the Quick Guide]]''.<br /> <br /> Welcome - whether you arrived from [[Dipfield City]] or the Eartho.<br /> <br /> HUIJIA FUN is the web centers on the Gesamtkunstwerk IP [[Verdant Green Revelation]], derived from the culture of [[Beijing Huijia Private School|Huijia Academy]]. It's organized into three areas. The '''[[Portfolio Area]]''' collects the creative output: novels, music albums and more - if it was made, it lives here. The '''[[Worldview Area]]''' documents the fictional universe: its myths ('''Mythos''') groups and places ('''Entity''') and canonical settings ('''Lore'''). The '''[[Archive Area]]''' preserves the real Huijia: historical documents ('''Record''') original footage and campus materials ('''Origin''') and other derivative works ('''Tangent''').<br /> <br /> The real Huijia Academy is the root. The VGR universe is what grew from it.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Side Guide&lt;/big&gt;<br /> <br /> [[Portfolio Area|'''''I want to explore the creative works of Verdant Green Revelation!''''']]<br /> <br /> [[:Category:Novel|''I want to read the '''VGR novel series'''!'']]<br /> <br /> [[:Category:Album|''I want to listen to the '''Green Revelation''' music albums!'']]<br /> <br /> [[:Category:OtoMAD|''I want to watch the '''DipfieldMAD''' works!'']]<br /> <br /> [[Worldview Area|''What is the '''VGR or Huijia Worldview''' - where do I start?'']]<br /> <br /> [[Trinitarian Laws of Huashael Practice|''What is the most iconic church with the mysterious ''' hexagrams'''?'']]<br /> <br /> [[Wang Zhize|''Who is the '''actual founder and absolute origin''' of Huijia Group?'']]<br /> <br /> [[Color Code|''How can I '''design''' like Huijia and Plurimod? (Color Code)'']]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Guidelines&lt;/big&gt;<br /> <br /> ''[[Guidelines|Click here to jump to the Guidelines]]''.<br /> <br /> It's not a big deal temporarily but I do believe this is necessary. To foster a harmonious non-harassment community environment we have established the following rules.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Special Thanks &amp; Tributes&lt;/big&gt;<br /> <br /> Thanks to these previous tributers:<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:LastW!sh LastW!sh] and [https://huijia.fandom.com/zh/wiki/User:Trooperr9863625badun Trooperr9863625badun] for writing the text for this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:Akatsuki0702 Akatsuki0702] for planning the framework of this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:YunxinBululu.Li YunxinBululu.Li] and [https://huijia.fandom.com/zh/wiki/User:JohnDing2023 JohnDing] for refining the world-building;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:1S0d1uM1 1S0d1uM1] and [https://huijia.fandom.com/zh/wiki/User:Hewu888 Hewu888] for contributing articles.<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> [[Category:Hub]]</div> PlurimodSU https://en.huijia.fun/index.php?title=Main_Page&diff=168 Main Page 2026-08-27T18:03:26Z <p>PlurimodSU: Edit</p> <hr /> <div>&lt;html&gt;&lt;style&gt;<br /> .mini-block-portfolio {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-portfolio:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-portfolio .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-portfolio .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-portfolio .mini-block-title,<br /> .mini-block-portfolio .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-portfolio .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> <br /> .mini-block-canon {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-canon:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-canon .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-canon .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-canon .mini-block-title,<br /> .mini-block-canon .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-canon .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> &lt;/style&gt;&lt;/html&gt;<br /> {{Theme-HJ}}<br /> &lt;div style=&quot;font-size: 26px;margin-top: 6px;text-align: center;&quot;&gt;'''Welcome to「HUIJIA FUN - Rooted in Huijia School」'''&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 18px;margin-bottom: 6px;text-align: center;&quot;&gt;''The Parallel Universe Rooted in [[Beijing Huijia Private School|Huijia Academy]]'' - A Gesamtkunstwerk Work by [[Marina Malinti]]&lt;/div&gt;<br /> &lt;div style=&quot;font-family:Huiwen;text-align: center;&quot;&gt;TIP: THE ENGLISH BRANCH WEBSITE IS STILL UNDER THE BASIC CONSTRUCTION. PLEASE FORGIVE THE LOW COMPLETION RATE.&lt;br&gt;· Chinese Branch: https://huijia.fun&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;tabber&gt;<br /> |-|Website Information=<br /> &lt;br&gt;<br /> [[File:HUIJIA LOGO.png|150px|frameless|right]]<br /> &lt;span class=&quot;mini-block-title&quot;&gt;Welcome to HUIJIA FUN&lt;/span&gt;<br /> <br /> HUIJIA FUN began as a fan wiki dedicated to Beijing Huijia Private School and has since grown into something more. Today it serves as the '''official archive and Intellectual Property''' of [[Marina Malinti]] built upon the culture of Huijia as its spiritual origin and also get recognized by Huijia's principal.<br /> <br /> Whatever, This site is home to the '''[[Verdant Green Revelation]]''': A Gesamtkunstwerk (Total Art) IP encompassing novel series, music albums, constructed language [[Pre-Diphic]], OtoMAD works and even a speculative worldview rooted in Huijia Academy.<br /> <br /> This website is '''non-profit''' '''non-advertisement''' and '''non-membership'''. It is largely created and maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]]. For questions or consultation please contact me directly through: a@huijia.fun<br /> <br /> |-|Create a Page=<br /> &lt;br&gt;<br /> &lt;div style=&quot;text-align:center&quot;&gt; '''Remember! This website is publicly accessible on the internet!'''<br /> <br /> I fully support and actively encourage fan editing. To ensure resource reliability information neutrality, and compliance with the '''Creative Commons''' license and copyright, please make sure you have read the [[Guideline]] and understand the community and editing rules. Before writing a page, please be aware that this site follows the '''CC BY-SA''' license and maintains relatively rigorous content standards.<br /> <br /> Ready? Create a page through the section below!<br /> {{#createpage:}}<br /> &lt;/div&gt;<br /> <br /> |-|Recent Events=<br /> &lt;br&gt;<br /> &lt;div style=&quot;font-size: 70px; font-weight: 200; text-align: right; height: 0; color: #f1f1f1; user-select: none; margin-bottom: 0&quot;&gt;{{{background|Recent events}}}&lt;/div&gt;<br /> {{Section<br /> |file=[[File:Bittersweet Memories.jpg]]<br /> |title=Release of Huijia Class of 2024 Graduation Song – Bittersweet Memories<br /> |content=&quot;Bittersweet Memories&quot; is the graduation song for Huijia's Class of 2024. It is a song that expresses mixed feelings about past beautiful memories in Huijia and future farewells.&lt;br&gt;Upon the song's release, the graduation ceremony for Huijia School's Class of 2024 would be also witnessed. This song would become a lasting memento, serving as a precious gift upon the graduation.<br /> |link=https://youtu.be/BbaEMZn9psQ<br /> }}<br /> &lt;/tabber&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block mini-block-canon&quot; style=&quot;border-left: 4px solid #025F32;&quot;&gt;<br /> &lt;div class=&quot;mini-block-fulllink&quot;&gt;[[Canon Area]]&lt;/div&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Canon&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;center&gt;<br /> &lt;div style=&quot;font-family: 'Noto Serif SC', serif; margin: 1.6em 1em 1.2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 28px; font-weight: 600; letter-spacing: 0.06em; color: #025F32; text-shadow: 0 1px 3px rgba(2,95,50,0.15);&quot;&gt;墨绿色的启示录&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8fa896; margin-top: 4px;&quot;&gt;Verdant Green Revelation&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 15px; opacity: 0.75; margin-top: 0.8em; font-style: italic;&quot;&gt;VGR Portfolio：Everything is still unfolding&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/center&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Worldview&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Worldview Area]]&lt;/span&gt;<br /> <br /> ''The fictional universe of VGR - myths, mankind, and canons.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Mythos|Mythos]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Entity|Entity]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Cosmology|Cosmology]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Archive&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Archive Area]]&lt;/span&gt;<br /> <br /> ''The real Huijia - documents, footage, and the origin of it all.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Record|Record]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Origin|Origin]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Tangent|Tangent]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Quick Guide&lt;/big&gt;<br /> <br /> ''[[Quick Guide|Click here to jump to the Quick Guide]]''.<br /> <br /> Welcome - whether you arrived from [[Dipfield City]] or the Eartho.<br /> <br /> HUIJIA FUN is the web centers on the Gesamtkunstwerk IP [[Verdant Green Revelation]], derived from the culture of [[Beijing Huijia Private School|Huijia Academy]]. It's organized into three areas. The '''[[Portfolio Area]]''' collects the creative output: novels, music albums and more - if it was made, it lives here. The '''[[Worldview Area]]''' documents the fictional universe: its myths ('''Mythos''') groups and places ('''Entity''') and canonical settings ('''Lore'''). The '''[[Archive Area]]''' preserves the real Huijia: historical documents ('''Record''') original footage and campus materials ('''Origin''') and other derivative works ('''Tangent''').<br /> <br /> The real Huijia Academy is the root. The VGR universe is what grew from it.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Side Guide&lt;/big&gt;<br /> <br /> [[Portfolio Area|'''''I want to explore the creative works of Verdant Green Revelation!''''']]<br /> <br /> [[:Category:Novel|''I want to read the '''VGR novel series'''!'']]<br /> <br /> [[:Category:Album|''I want to listen to the '''Green Revelation''' music albums!'']]<br /> <br /> [[:Category:OtoMAD|''I want to watch the '''DipfieldMAD''' works!'']]<br /> <br /> [[Worldview Area|''What is the '''VGR or Huijia Worldview''' - where do I start?'']]<br /> <br /> [[Trinitarian Laws of Huashael Practice|''What is the most iconic church with the mysterious ''' hexagrams'''?'']]<br /> <br /> [[Wang Zhize|''Who is the '''actual founder and absolute origin''' of Huijia Group?'']]<br /> <br /> [[Color Code|''How can I '''design''' like Huijia and Plurimod? (Color Code)'']]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Guidelines&lt;/big&gt;<br /> <br /> ''[[Guidelines|Click here to jump to the Guidelines]]''.<br /> <br /> It's not a big deal temporarily but I do believe this is necessary. To foster a harmonious non-harassment community environment we have established the following rules.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Special Thanks &amp; Tributes&lt;/big&gt;<br /> <br /> Thanks to these previous tributers:<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:LastW!sh LastW!sh] and [https://huijia.fandom.com/zh/wiki/User:Trooperr9863625badun Trooperr9863625badun] for writing the text for this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:Akatsuki0702 Akatsuki0702] for planning the framework of this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:YunxinBululu.Li YunxinBululu.Li] and [https://huijia.fandom.com/zh/wiki/User:JohnDing2023 JohnDing] for refining the world-building;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:1S0d1uM1 1S0d1uM1] and [https://huijia.fandom.com/zh/wiki/User:Hewu888 Hewu888] for contributing articles.<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> [[Category:Hub]]</div> PlurimodSU https://en.huijia.fun/index.php?title=User:PlurimodSU&diff=167 User:PlurimodSU 2026-08-27T17:59:15Z <p>PlurimodSU: /* ✦ Creative Fields */</p> <hr /> <div>{{Theme-HJ}}<br /> {{Info<br /> |title = &lt;span style=&quot;font-family: 'Huiwen'; color: #555555;&quot;&gt;✧ Marina Malinti ✧&lt;/span&gt;<br /> |file = Marina Malinti Avatar.jpg<br /> |size=150px<br /> |description=&lt;big&gt;&lt;div style=&quot;text-shadow: 0 0 15px #9ADCFF; font-family: 'Huiwen'; color: #556B2F;&quot;&gt;· Marina Malinti ·&lt;/div&gt;&lt;/big&gt;<br /> |1 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Penname&lt;/span&gt;<br /> |T1 = Marina Malinti（Malint）<br /> |2 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Sponsorship&lt;/span&gt;<br /> |T2 = Plurimod Student Union<br /> |3 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Alias&lt;/span&gt;<br /> |T3 = Gesamtkunstwerk Creator&lt;br&gt;HUIJIA FUN Founder &amp; Organizer<br /> |4 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Creative Fields&lt;/span&gt;<br /> |T4 = World Building · Fiction · Music · Constructed Language · Website Design · Archive Collection<br /> |5 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Academy&lt;/span&gt;<br /> |T5 = 2021–2024: [[Huijia Academy]]&lt;br&gt;2024-Now: University of Utah<br /> |6 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Find me&lt;/span&gt;<br /> |T6 = [mailto:a@huijia.fun a@huijia.fun]<br /> |7 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Site&lt;/span&gt;<br /> |T7 = [https://en.huijia.fun en.huijia.fun]&lt;br&gt;[https://huijia.fun huijia.fun] (Chinese Branch)<br /> }}<br /> <br /> Nice to meet you, this is '''Marina Malinti''', the creator of this website, HUIJIA FUN, also the creator behind &quot;[[Verdant Green Revelation]]&quot; (VGR) Series.<br /> <br /> This account sometimes appears under the sponsorship of the '''Plurimod Student Union''' -- within VGR's setting, the governing body of the continental system. It's one face of my creative work, or you might say a channel through which Plurimod speaks through me -- but behind the page, it's mostly just me.<br /> <br /> I identify myself as a '''world-building Gesamtkunstwerk (total artwork) creator'''. I'm fascinated by building a world from a single idea -- letting it grow the way that a seed grows into a tree. First comes the point of origin: those jokes we passed around at [[Huijia Academy]], anecdotes that came from who-knows-where, fragments of legend. From there grows a faith, and from that faith grow the world carried by the fictions, the music, the language, the visuals -- each confirming the others, each part of one whole. Writing a chapter, playing a phrase of music, designing a grammar rule, or writing a line of code for this site -- all of it is my contribution to VGR, a way of turning the intimate, abstract shapes in my head into something that can be recorded. They're all different facets of the same world.<br /> <br /> What I want, when I look at my own body of work, is for it to feel '''designed''' -- like different trunks grown from the same seed. Even if those trunks sprawl in every direction, tangled and dizzying to look at, you'll find that every leaf, wherever it grows, shares the same genetic logic.<br /> <br /> == ✦ What I Do ==<br /> &lt;small&gt;For VGR's entry, see [[Verdant Green Revelation]]; for VGR's creative works, see [[Canon Area]]; for VGR's settings, see [[Worldview Area]]&lt;/small&gt;<br /> <br /> On June 7, 2023, I had the whim to start designing the Huijia-themed world with a few friends. We wrote several early pieces that now look laughably crude, yet they laid the groundwork for the entire VGR system, shaping it in ways that are still felt today. In November 2023, I finally settled on a name for the entire system, &quot;Verdant Green Revelation,&quot; and started taking it seriously as my own Gesamtkunstwerk project. In January 2024, I designed and built the first version of HUIJIA FUN, which is the website you're looking at now. Even back then, it looked much like it does today. On September 19, 2025, I began building the English branch of the HUIJIA FUN website and translating my work into English.<br /> <br /> '''Verdant Green Revelation''' is the core work I've been creating since 2023 and continue to work on today -- a parallel world of Huijia Academy, a Gesamtkunstwerk project under my direction. It's a soft sci-fi total artwork series set in a parallel world, the novel component of which I began writing in 2025.<br /> <br /> === ✦ Creative Fields ===<br /> * '''World-Building''': I began systematic world-building in June 2023. The earliest version of the world had no settled name and leaned toward humor and metaphor, existing purely for entertainment. Later, once I started taking my literature classes seriously, I went back and reexamined my earlier work -- tore it down, and rebuilt it into what exists today.<br /> * '''Fiction''': Starting in 2025, I began writing literary works such as [[GRA|''Master Marinaqua, Not Laid to Rest'']] -- my debut piece of prose fiction. It isn't part of VGR's &quot;thread&quot;, but stands as one of its &quot;apocrypha&quot; (side-novel) series.<br /> * '''Music''': Since July 2026, I've been composing VGR-related music in Cubase -- mainly orchestral music blending Celtic, epic, and rock elements. I'm currently working on my first VGR album, ''Aqueous Palingenesis''. I made several orchestral practice pieces in late 2025, though most were never publicly or formally released.<br /> * '''Constructed Language''': I began designing Pre-Diphic (YoDiPiKa) in late 2025.<br /> * '''Visual Design''': I was already working in visual design and VFX back in 2021, before VGR even existed as a concept. Today, I handle this site's logo, visual design, and interaction design. There are also dozens of video-editing works I've created as VGR spinoffs.<br /> * '''MediaWiki''': To give VGR a home, I started learning MediaWiki's design, development, and maintenance on June 7, 2023, when HUIJIA FUN's predecessor site was first created. By early 2024, that work had grown into the earliest form of HUIJIA FUN.<br /> <br /> === ✦ Skills ===<br /> * Visual: Adobe After Effects, Adobe Premiere Pro, Adobe Illustrator, Cinema 4D, Blender<br /> * Audio: Cubase, FL Studio, East West<br /> * Web Development: PHP, MediaWiki<br /> <br /> == ✦ About Me &amp; Why Huijia ==<br /> ''Huijia Academy was the three most indispensable years of my life. To me, it's no longer a school -- it's history.''<br /> <br /> If I'm going to tell the story of how I started creating, it has to begin when I was 14. It was in August 2021 that I first enrolled at Huijia Academy and started exploring all these hobbies. Even now, realizing just how many sprawling, unrelated fields I somehow found the spare energy for, I still can't help scoffing a little.<br /> <br /> Honestly, let me tell you about something pointless that happened right after: &quot;whether sound and image could be mismatched on purpose and still land a joke&quot;. Step one -- pick a few of our more well-known teachers, then, with a couple of accomplices, sneak a camera into class and quietly record the lesson. Step two -- cut the footage into short clips, score them with music, deliberately mistime everything, and somehow end up with something absurdly funny. And so, one after another, these little &quot;works&quot; -- built from raw classroom footage, made purely for laughs -- came into being. Step three -- I lost all sense of proportion. It wasn't just my beloved teachers anymore, and I started doing the same thing to my dear roommates and friends. They might just casually send over a staged joke video, or even a mock &quot;threat&quot; video, and to me, all of it became raw videos to be recut, rescored, reinterpreted from scratch. Even elevated to the status of a kind of founding text, the sort of thing I'd want to annotate with a hundred lines of commentary explaining exactly why it was funny. Fueled by more creative drive than I knew what to do with, I churned out countless clips -- mediocre, most of them -- that somehow got passed around as &quot;comedy&quot; for a very long time.<br /> <br /> That's the earliest, roughest chapter of my creative history.<br /> <br /> This is where I have to thank Bululu, the person who, early on, showed the most interest in my rough little creations and did the most to keep me going. We first got to know each other through nothing more than gossip about the gaming world; and he was mostly just listening at first. But talk led to more talk, and eventually we grew close. Later, during a stretch when I didn't have enough equipment, he lent me his iPad so I could keep editing whenever I wanted. In return, I helped him past a problem that had been bothering him for a while (he was stuck on a rhythm-game level he couldn't clear).<br /> <br /> That's how the friendship really began, and it grew into something more that we got totally understood.<br /> <br /> Honestly, this game -- half prank, half genuine creation -- was ridiculous and unpolished, but it did real work building up my confidence and my eye as an artist, at least to some degree. Around that time I set myself a whole code of &quot;rules,&quot; the way a knight is bound by a code of chivalry. Mine went something like this: which footage was usable, what made a cut funny, exactly which frame a beat had to land on, what counted as a genuinely good piece of work, and how to reproduce that quality on gear and software far below what the &quot;real&quot; creators used. All of it worked out by trial and error, then forced into practice, copying the best examples I could find into cruder versions of my own. I believed in those rules the way people believe in scripture, and let them bleed into how I dealt with people and thought about things in real life. Because I was convinced that this kind of high-minded creative work was simply the truth, and that anyone who found my thinking strange just had terrible and appalling taste. That's how far gone I was. It all feels like a dream now, long since over. Then, my instinct to synchronize music and images has shaped who I am now, as the underlying logic I used to think with has influenced the design of everything I create, to some extent.<br /> <br /> Later, when that same impulse landed on the entire school, things escalated on their own.<br /> <br /> It's a laughable thing to admit. Four hundred years ago, Don Quixote imagined himself a knight, mistook windmills for giants, and rode off to fight for the woman he loved. Four hundred years later, I imagined Huijia Academy as a fantastical continent sent down by the gods, imagined myself an adventurer, and declared myself a disciple of &quot;the Creator Hua.&quot; The half-finished, off-limits sections of campus became a wasteland I explored at my own risk; the whole school became a disaster zone under siege by the evil-dog-god &quot;Modom&quot;. Switching to a new campus building got recast as an adventurer's journey to a foreign land. I wrote my own school into the &quot;scripture&quot; as a place blessed by the gods, drawing in a motley crowd of outsiders; And, as a believer, I have to choose a &quot;Great Reverend of Hua&quot; towards whom I can be reverent. I imagined the unfortunate one of my classmates as the &quot;creator reincarnated&quot;, and reimagined the one friend easiest to tease as a terrorist in need of redemption. Then, alone, across these few hundred thousand square meters of campus -- carved up like warring fiefdoms, crawling with magic and fantasy -- I played the role of an aimless wandering adventurer: cutting through thorns, punishing evil, eulogizing my god &quot;Hua&quot; and following his unfortunate reverend I identified, walking a path of devotion for no reason but to earn my place in the faith, a hero descended from my own god, for that god and that faith I fought, relentlessly I walked, toward the edge of the world. In between conquests, whenever I had spare time and too much to say, I'd turn myself into a wandering troubadour, preaching the greatness of Hua to others, recounting my own legend and my list of heroic deeds -- the notebook I'd just grabbed off my desk after class became a harp in my left hand, and the bag on my back was reimagined as an adventurer's packed pack. The handful of people around me, who I could never quite tell were laughing at the story or wherever, got promoted to &quot;the faithful.&quot; Anyone who actually seemed to be listening got made a deacon. If they were devoted enough, they could work their way up to the marshal and even grand prior in the Ordre du Temple I'd invented. By the end, I had an entire sect of commilitones, complete with a congregation. All the while I was writing up these fantastical Huijia documents, I was also fully in character -- treating the gods I'd invented, and the classmates unlucky enough to be &quot;possessed&quot; by them, as if they were real. I was genuinely convinced and obsessed, believing hard enough to kneel and weep. After school, before evening study hall, I'd skip my homework entirely and stay in the classroom losing myself on paper -- and look up to find the sun had already set, with evening study about to start... In short, this pitiable scholar got so carried away by his own overheated prose that he nearly forgot his actual job as a student. He nearly forgot he still had a TOEFL exam to take and a diploma to earn...<br /> <br /> But then again, that's the skill of forcing fun out of boring days at school -- or so I'd like to think. That whole stretch of time was still worth every minute.<br /> <br /> To sum up, first I imagined a world, and then I lived inside it, following its rules, its narrative, its mythology to the letter. I kept up the act for a long time -- long enough that I genuinely couldn't tell anymore whether I was an adventurer or just a student.<br /> <br /> Then, one day I flipped open an old math notebook -- not to review math, but because most of the pages meant for math had already been overrun by my own &quot;prophecies&quot; and &quot;legends&quot; -- and it hit me that all this preaching and adventuring, absurd as it clearly was, amounted to nothing more than daydreaming out of boredom. But more important than finding it funny was this: I suddenly realized the material actually held together. None of these stories were random -- every one of them had grown out of some real internal logic. And I thought, maybe this is actually worth taking seriously.<br /> <br /> So, I gathered up all those scattered fragments -- the improvised, wandering-bard version of the story -- piece by piece, cut out whatever existed purely for a laugh, and kept and straightened out whatever still held its shape. In November 2023, I gave this world its first real name: '''Verdant Green Revelation'''. Since Huijia's signature color is a deep, near-black green -- the exact shade every alumnus can picture with their eyes closed -- and when it came time to name it, I barely hesitated.<br /> <br /> Now, it's no longer just some ordinary teenager's daydream. It's something I truly love, and something I'm willing to spend many serious years on.<br /> <br /> == ✦ Find Me ==<br /> Feel free to reach out about VGR, world-building, music, or this site itself.<br /> <br /> * '''Email''': [mailto:a@huijia.fun a@huijia.fun]<br /> * '''Chinese Site''': [https://huijia.fun huijia.fun]<br /> * '''English Site''': [https://en.huijia.fun en.huijia.fun]</div> PlurimodSU https://en.huijia.fun/index.php?title=User:PlurimodSU&diff=166 User:PlurimodSU 2026-08-27T05:05:03Z <p>PlurimodSU: Refine</p> <hr /> <div>{{Theme-HJ}}<br /> {{Info<br /> |title = &lt;span style=&quot;font-family: 'Huiwen'; color: #555555;&quot;&gt;✧ Marina Malinti ✧&lt;/span&gt;<br /> |file = Marina Malinti Avatar.jpg<br /> |size=150px<br /> |description=&lt;big&gt;&lt;div style=&quot;text-shadow: 0 0 15px #9ADCFF; font-family: 'Huiwen'; color: #556B2F;&quot;&gt;· Marina Malinti ·&lt;/div&gt;&lt;/big&gt;<br /> |1 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Penname&lt;/span&gt;<br /> |T1 = Marina Malinti（Malint）<br /> |2 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Sponsorship&lt;/span&gt;<br /> |T2 = Plurimod Student Union<br /> |3 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Alias&lt;/span&gt;<br /> |T3 = Gesamtkunstwerk Creator&lt;br&gt;HUIJIA FUN Founder &amp; Organizer<br /> |4 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Creative Fields&lt;/span&gt;<br /> |T4 = World Building · Fiction · Music · Constructed Language · Website Design · Archive Collection<br /> |5 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Academy&lt;/span&gt;<br /> |T5 = 2021–2024: [[Huijia Academy]]&lt;br&gt;2024-Now: University of Utah<br /> |6 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Find me&lt;/span&gt;<br /> |T6 = [mailto:a@huijia.fun a@huijia.fun]<br /> |7 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Site&lt;/span&gt;<br /> |T7 = [https://en.huijia.fun en.huijia.fun]&lt;br&gt;[https://huijia.fun huijia.fun] (Chinese Branch)<br /> }}<br /> <br /> Nice to meet you, this is '''Marina Malinti''', the creator of this website, HUIJIA FUN, also the creator behind &quot;[[Verdant Green Revelation]]&quot; (VGR) Series.<br /> <br /> This account sometimes appears under the sponsorship of the '''Plurimod Student Union''' -- within VGR's setting, the governing body of the continental system. It's one face of my creative work, or you might say a channel through which Plurimod speaks through me -- but behind the page, it's mostly just me.<br /> <br /> I identify myself as a '''world-building Gesamtkunstwerk (total artwork) creator'''. I'm fascinated by building a world from a single idea -- letting it grow the way that a seed grows into a tree. First comes the point of origin: those jokes we passed around at [[Huijia Academy]], anecdotes that came from who-knows-where, fragments of legend. From there grows a faith, and from that faith grow the world carried by the fictions, the music, the language, the visuals -- each confirming the others, each part of one whole. Writing a chapter, playing a phrase of music, designing a grammar rule, or writing a line of code for this site -- all of it is my contribution to VGR, a way of turning the intimate, abstract shapes in my head into something that can be recorded. They're all different facets of the same world.<br /> <br /> What I want, when I look at my own body of work, is for it to feel '''designed''' -- like different trunks grown from the same seed. Even if those trunks sprawl in every direction, tangled and dizzying to look at, you'll find that every leaf, wherever it grows, shares the same genetic logic.<br /> <br /> == ✦ What I Do ==<br /> &lt;small&gt;For VGR's entry, see [[Verdant Green Revelation]]; for VGR's creative works, see [[Canon Area]]; for VGR's settings, see [[Worldview Area]]&lt;/small&gt;<br /> <br /> On June 7, 2023, I had the whim to start designing the Huijia-themed world with a few friends. We wrote several early pieces that now look laughably crude, yet they laid the groundwork for the entire VGR system, shaping it in ways that are still felt today. In November 2023, I finally settled on a name for the entire system, &quot;Verdant Green Revelation,&quot; and started taking it seriously as my own Gesamtkunstwerk project. In January 2024, I designed and built the first version of HUIJIA FUN, which is the website you're looking at now. Even back then, it looked much like it does today. On September 19, 2025, I began building the English branch of the HUIJIA FUN website and translating my work into English.<br /> <br /> '''Verdant Green Revelation''' is the core work I've been creating since 2023 and continue to work on today -- a parallel world of Huijia Academy, a Gesamtkunstwerk project under my direction. It's a soft sci-fi total artwork series set in a parallel world, the novel component of which I began writing in 2025.<br /> <br /> === ✦ Creative Fields ===<br /> * '''World-Building''': I began systematic world-building in June 2023. The earliest version of the world had no settled name and leaned toward humor and metaphor, existing purely for entertainment. Later, once I started taking my literature classes seriously, I went back and reexamined my earlier work -- tore it down, and rebuilt it into what exists today.<br /> * '''Fiction''': Starting in 2025, I began writing literary works such as [[GRA|''Master Marinaqua, Not Laid to Rest'']] -- my debut piece of prose fiction. It isn't part of VGR's &quot;thread&quot;, but stands as one of its &quot;apocrypha&quot; (side-novel) series.<br /> * '''Music''': Since July 2026, I've been composing VGR-related music in Cubase -- mainly orchestral music blending Celtic, epic, and rock elements. I'm currently working on my first VGR album, ''Aqueous Palingenesis''. I made several orchestral practice pieces in late 2025, though most were never publicly or formally released.<br /> * '''Constructed Language''': I began designing Pre-Diphic (古迪普语) in late 2025.<br /> * '''Visual Design''': I was already working in visual design and VFX back in 2021, before VGR even existed as a concept. Today, I handle this site's logo, visual design, and interaction design. There are also dozens of video-editing works I've created as VGR spinoffs.<br /> * '''MediaWiki''': To give VGR a home, I started learning MediaWiki's design, development, and maintenance on June 7, 2023, when HUIJIA FUN's predecessor site was first created. By early 2024, that work had grown into the earliest form of HUIJIA FUN.<br /> <br /> === ✦ Skills ===<br /> * Visual: Adobe After Effects, Adobe Premiere Pro, Adobe Illustrator, Cinema 4D, Blender<br /> * Audio: Cubase, FL Studio, East West<br /> * Web Development: PHP, MediaWiki<br /> <br /> == ✦ About Me &amp; Why Huijia ==<br /> ''Huijia Academy was the three most indispensable years of my life. To me, it's no longer a school -- it's history.''<br /> <br /> If I'm going to tell the story of how I started creating, it has to begin when I was 14. It was in August 2021 that I first enrolled at Huijia Academy and started exploring all these hobbies. Even now, realizing just how many sprawling, unrelated fields I somehow found the spare energy for, I still can't help scoffing a little.<br /> <br /> Honestly, let me tell you about something pointless that happened right after: &quot;whether sound and image could be mismatched on purpose and still land a joke&quot;. Step one -- pick a few of our more well-known teachers, then, with a couple of accomplices, sneak a camera into class and quietly record the lesson. Step two -- cut the footage into short clips, score them with music, deliberately mistime everything, and somehow end up with something absurdly funny. And so, one after another, these little &quot;works&quot; -- built from raw classroom footage, made purely for laughs -- came into being. Step three -- I lost all sense of proportion. It wasn't just my beloved teachers anymore, and I started doing the same thing to my dear roommates and friends. They might just casually send over a staged joke video, or even a mock &quot;threat&quot; video, and to me, all of it became raw videos to be recut, rescored, reinterpreted from scratch. Even elevated to the status of a kind of founding text, the sort of thing I'd want to annotate with a hundred lines of commentary explaining exactly why it was funny. Fueled by more creative drive than I knew what to do with, I churned out countless clips -- mediocre, most of them -- that somehow got passed around as &quot;comedy&quot; for a very long time.<br /> <br /> That's the earliest, roughest chapter of my creative history.<br /> <br /> This is where I have to thank Bululu, the person who, early on, showed the most interest in my rough little creations and did the most to keep me going. We first got to know each other through nothing more than gossip about the gaming world; and he was mostly just listening at first. But talk led to more talk, and eventually we grew close. Later, during a stretch when I didn't have enough equipment, he lent me his iPad so I could keep editing whenever I wanted. In return, I helped him past a problem that had been bothering him for a while (he was stuck on a rhythm-game level he couldn't clear).<br /> <br /> That's how the friendship really began, and it grew into something more that we got totally understood.<br /> <br /> Honestly, this game -- half prank, half genuine creation -- was ridiculous and unpolished, but it did real work building up my confidence and my eye as an artist, at least to some degree. Around that time I set myself a whole code of &quot;rules,&quot; the way a knight is bound by a code of chivalry. Mine went something like this: which footage was usable, what made a cut funny, exactly which frame a beat had to land on, what counted as a genuinely good piece of work, and how to reproduce that quality on gear and software far below what the &quot;real&quot; creators used. All of it worked out by trial and error, then forced into practice, copying the best examples I could find into cruder versions of my own. I believed in those rules the way people believe in scripture, and let them bleed into how I dealt with people and thought about things in real life. Because I was convinced that this kind of high-minded creative work was simply the truth, and that anyone who found my thinking strange just had terrible and appalling taste. That's how far gone I was. It all feels like a dream now, long since over. Then, my instinct to synchronize music and images has shaped who I am now, as the underlying logic I used to think with has influenced the design of everything I create, to some extent.<br /> <br /> Later, when that same impulse landed on the entire school, things escalated on their own.<br /> <br /> It's a laughable thing to admit. Four hundred years ago, Don Quixote imagined himself a knight, mistook windmills for giants, and rode off to fight for the woman he loved. Four hundred years later, I imagined Huijia Academy as a fantastical continent sent down by the gods, imagined myself an adventurer, and declared myself a disciple of &quot;the Creator Hua.&quot; The half-finished, off-limits sections of campus became a wasteland I explored at my own risk; the whole school became a disaster zone under siege by the evil-dog-god &quot;Modom&quot;. Switching to a new campus building got recast as an adventurer's journey to a foreign land. I wrote my own school into the &quot;scripture&quot; as a place blessed by the gods, drawing in a motley crowd of outsiders; And, as a believer, I have to choose a &quot;Great Reverend of Hua&quot; towards whom I can be reverent. I imagined the unfortunate one of my classmates as the &quot;creator reincarnated&quot;, and reimagined the one friend easiest to tease as a terrorist in need of redemption. Then, alone, across these few hundred thousand square meters of campus -- carved up like warring fiefdoms, crawling with magic and fantasy -- I played the role of an aimless wandering adventurer: cutting through thorns, punishing evil, eulogizing my god &quot;Hua&quot; and following his unfortunate reverend I identified, walking a path of devotion for no reason but to earn my place in the faith, a hero descended from my own god, for that god and that faith I fought, relentlessly I walked, toward the edge of the world. In between conquests, whenever I had spare time and too much to say, I'd turn myself into a wandering troubadour, preaching the greatness of Hua to others, recounting my own legend and my list of heroic deeds -- the notebook I'd just grabbed off my desk after class became a harp in my left hand, and the bag on my back was reimagined as an adventurer's packed pack. The handful of people around me, who I could never quite tell were laughing at the story or wherever, got promoted to &quot;the faithful.&quot; Anyone who actually seemed to be listening got made a deacon. If they were devoted enough, they could work their way up to the marshal and even grand prior in the Ordre du Temple I'd invented. By the end, I had an entire sect of commilitones, complete with a congregation. All the while I was writing up these fantastical Huijia documents, I was also fully in character -- treating the gods I'd invented, and the classmates unlucky enough to be &quot;possessed&quot; by them, as if they were real. I was genuinely convinced and obsessed, believing hard enough to kneel and weep. After school, before evening study hall, I'd skip my homework entirely and stay in the classroom losing myself on paper -- and look up to find the sun had already set, with evening study about to start... In short, this pitiable scholar got so carried away by his own overheated prose that he nearly forgot his actual job as a student. He nearly forgot he still had a TOEFL exam to take and a diploma to earn...<br /> <br /> But then again, that's the skill of forcing fun out of boring days at school -- or so I'd like to think. That whole stretch of time was still worth every minute.<br /> <br /> To sum up, first I imagined a world, and then I lived inside it, following its rules, its narrative, its mythology to the letter. I kept up the act for a long time -- long enough that I genuinely couldn't tell anymore whether I was an adventurer or just a student.<br /> <br /> Then, one day I flipped open an old math notebook -- not to review math, but because most of the pages meant for math had already been overrun by my own &quot;prophecies&quot; and &quot;legends&quot; -- and it hit me that all this preaching and adventuring, absurd as it clearly was, amounted to nothing more than daydreaming out of boredom. But more important than finding it funny was this: I suddenly realized the material actually held together. None of these stories were random -- every one of them had grown out of some real internal logic. And I thought, maybe this is actually worth taking seriously.<br /> <br /> So, I gathered up all those scattered fragments -- the improvised, wandering-bard version of the story -- piece by piece, cut out whatever existed purely for a laugh, and kept and straightened out whatever still held its shape. In November 2023, I gave this world its first real name: '''Verdant Green Revelation'''. Since Huijia's signature color is a deep, near-black green -- the exact shade every alumnus can picture with their eyes closed -- and when it came time to name it, I barely hesitated.<br /> <br /> Now, it's no longer just some ordinary teenager's daydream. It's something I truly love, and something I'm willing to spend many serious years on.<br /> <br /> == ✦ Find Me ==<br /> Feel free to reach out about VGR, world-building, music, or this site itself.<br /> <br /> * '''Email''': [mailto:a@huijia.fun a@huijia.fun]<br /> * '''Chinese Site''': [https://huijia.fun huijia.fun]<br /> * '''English Site''': [https://en.huijia.fun en.huijia.fun]</div> PlurimodSU https://en.huijia.fun/index.php?title=User:PlurimodSU&diff=165 User:PlurimodSU 2026-08-27T04:54:14Z <p>PlurimodSU: Finalize</p> <hr /> <div>{{Theme-HJ}}<br /> {{Info<br /> |title = &lt;span style=&quot;font-family: 'Huiwen'; color: #555555;&quot;&gt;✧ Marina Malinti ✧&lt;/span&gt;<br /> |file = Marina Malinti Avatar.jpg<br /> |size=150px<br /> |description=&lt;big&gt;&lt;div style=&quot;text-shadow: 0 0 15px #9ADCFF; font-family: 'Huiwen'; color: #556B2F;&quot;&gt;· Marina Malinti ·&lt;/div&gt;&lt;/big&gt;<br /> |1 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Penname&lt;/span&gt;<br /> |T1 = Marina Malinti（Malint）<br /> |2 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Sponsorship&lt;/span&gt;<br /> |T2 = Plurimod Student Union<br /> |3 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Alias&lt;/span&gt;<br /> |T3 = Gesamtkunstwerk Creator&lt;br&gt;HUIJIA FUN Founder &amp; Organizer<br /> |4 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Creative Fields&lt;/span&gt;<br /> |T4 = World Building · Fiction · Music · Constructed Language · Website Design · Archive Collection<br /> |5 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Academy&lt;/span&gt;<br /> |T5 = 2021–2024: [[Huijia Academy]]&lt;br&gt;2024-Now: University of Utah<br /> |6 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Find me&lt;/span&gt;<br /> |T6 = [mailto:a@huijia.fun a@huijia.fun]<br /> |7 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Site&lt;/span&gt;<br /> |T7 = [https://en.huijia.fun en.huijia.fun]&lt;br&gt;[https://huijia.fun huijia.fun] (Chinese Branch)<br /> }}<br /> <br /> Nice to meet you, this is '''Marina Malinti''', the creator of this website, HUIJIA FUN, also the creator behind &quot;[[Verdant Green Revelation]]&quot; (VGR) Series.<br /> <br /> This account sometimes appears under the sponsorship of the '''Plurimod Student Union''' -- within VGR's setting, the governing body of the continental system. It's one face of my creative work, or you might say a channel through which Plurimod speaks through me -- but behind the page, it's mostly just me.<br /> <br /> I identify myself a '''world-building Gesamtkunstwerk (total artwork) creator'''. I'm fascinated by building a world from a single idea -- letting it grow the way that a seed grows into a tree. First comes the point of origin: those jokes we passed around at [[Huijia Academy]], anecdotes that came from who-knows-where, fragments of legend. From there grows a faith, and from that faith grow the world carried by the fictions, the music, the language, the visuals -- each confirming the others, each part of one whole. Writing a chapter, playing a phrase of music, designing a grammar rule, or writing a line of code for this site -- all of it is my contribution to VGR, a way of turning the intimate, abstract shapes in my head into something that can be recorded. They're all different facets of the same world.<br /> <br /> What I want, when I look at my own body of work, is for it to feel '''designed''' -- like different trunks grown from the same seed. Even if those trunks sprawl in every direction, tangled and dizzying to look at, you'll find that every leaf, wherever it grows, shares the same genetic logic.<br /> <br /> == ✦ What I Do ==<br /> &lt;small&gt;For VGR's entry, see [[Verdant Green Revelation]]; for VGR's creative works, see [[Canon Area]]; for VGR's settings, see [[Worldview Area]]&lt;/small&gt;<br /> <br /> On June 7, 2023, I had the whim to start designing the Huijia-themed world with a few friends. We wrote several early pieces that now look laughably crude, yet they laid the groundwork for the entire VGR system, shaping it in ways that are still felt today. In November 2023, I finally settled on a name for the entire system, &quot;Verdant Green Revelation,&quot; and started taking it seriously as my own Gesamtkunstwerk project. In January 2024, I designed and built the first version of HUIJIA FUN, which is the website you're looking at now. Even back then, it looked much like it does today. On September 19, 2025, I began building the English branch of the HUIJIA FUN website and translating my work into English.<br /> <br /> '''Verdant Green Revelation''' is the core work I've been creating since 2023 and continue to work on today -- a parallel world of Huijia Academy, a Gesamtkunstwerk project under my direction. It's a soft sci-fi total artwork series set in a parallel world, the novel component of which I began writing in 2025.<br /> <br /> === ✦ Creative Fields ===<br /> * '''World-Building''': I began systematic world-building in June 2023. The earliest version of the world had no settled name and leaned toward humor and metaphor, existing purely for entertainment. Later, once I started taking my literature classes seriously, I went back and reexamined my earlier work -- tore it down, and rebuilt it into what exists today.<br /> * '''Fiction''': Starting in 2025, I began writing literary works such as [[GRA|''Master Marinaqua, Not Laid to Rest'']] -- my debut piece of prose fiction. It isn't part of VGR's &quot;thread&quot;, but stands as one of its &quot;apocrypha&quot; (side-novel) series.<br /> * '''Music''': Since July 2026, I've been composing VGR-related music in Cubase -- mainly orchestral music blending Celtic, epic, and rock elements. I'm currently working on my first VGR album, ''Aqueous Palingenesis''. I made several orchestral practice pieces in late 2025, though most were never publicly or formally released.<br /> * '''Constructed Language''': I began designing Pre-Diphic (古迪普语) in late 2025.<br /> * '''Visual Design''': I was already working in visual design and VFX back in 2021, before VGR even existed as a concept. Today, I handle this site's logo, visual design, and interaction design. There are also dozens of video-editing works I've created as VGR spinoffs.<br /> * '''MediaWiki''': To give VGR a home, I started learning MediaWiki's design, development, and maintenance on June 7, 2023, when HUIJIA FUN's predecessor site was first created. By early 2024, that work had grown into the earliest form of HUIJIA FUN.<br /> <br /> === ✦ Skills ===<br /> * Visual: Adobe After Effects, Adobe Premiere Pro, Adobe Illustrator, Cinema 4D, Blender<br /> * Audio: Cubase, FL Studio, East West<br /> * Web Development: PHP, MediaWiki<br /> <br /> == ✦ About Me &amp; Why Huijia ==<br /> ''Huijia Academy was the three most indispensable years of my life. To me, it's no longer a school -- it's history.''<br /> <br /> If I'm going to tell the story of how I started creating, it has to begin when I was 14. That time, in August 2021, my path into all these hobbies starts in -- the same month I first enrolled at Huijia Academy. Even now, realizing just how many sprawling, unrelated fields I somehow found the spare energy for, I still can't help scoffing a little.<br /> <br /> Honestly, let me tell you about something pointless that happened right after: &quot;whether sound and image could be mismatched on purpose and still land a joke&quot;. Step one -- pick a few of our more well-known teachers, then, with a couple of accomplices, sneak a camera into class and quietly record the lesson. Step two -- cut the footage into short clips, score them with music, deliberately mistime everything, and somehow end up with something absurdly funny. And so, one after another, these little &quot;works&quot; -- built from raw classroom footage, made purely for laughs -- came into being. Step three -- I lost all sense of proportion. It wasn't just my beloved teachers anymore, and I started doing the same thing to my dear roommates and friends. They might just casually send over a staged joke video, or even a mock &quot;threat&quot; video, and to me, all of it became raw videos to be recut, rescored, reinterpreted from scratch. Even elevated to the status of a kind of founding text, the sort of thing I'd want to annotate with a hundred lines of commentary explaining exactly why it was funny. Fueled by more creative drive than I knew what to do with, I churned out countless clips -- mediocre, most of them -- that somehow got passed around as &quot;comedy&quot; for a very long time.<br /> <br /> That's the earliest, roughest chapter of my creative history.<br /> <br /> This is where I have to thank Bululu, the person who, early on, showed the most interest in my rough little creations and did the most to keep me going. We first got to know each other through nothing more than gossip about the gaming world; and he was mostly just listening at first. But talk led to more talk, and eventually ended up with getting close. Later, during a stretch when I didn't have enough equipment, he lent me his iPad so I could keep editing whenever I wanted. In return, I helped him past a problem that had been bothering him for a while (he was stuck on a rhythm-game level he couldn't clear).<br /> <br /> That's how the friendship really began, and it grew into something more that we got totally understood.<br /> <br /> Honestly, this game -- half prank, half genuine creation -- was ridiculous and unpolished, but it did real work building up my confidence and my eye as an artist, at least to some degree. Around that time I set myself a whole code of &quot;rules,&quot; the way a knight is bound by a code of chivalry. Mine went something like this: which footage was usable, what made a cut funny, exactly which frame a beat had to land on, what counted as a genuinely good piece of work, and how to reproduce that quality on gear and software far below what the &quot;real&quot; creators used. All of it worked out by trial and error, then forced into practice, copying the best examples I could find into cruder versions of my own. I believed in those rules the way people believe in scripture, and let them bleed into how I dealt with people and thought about things in real life. Because I was convinced that this kind of high-minded creative work was simply the truth, and that anyone who found my thinking strange just had terrible and stained taste. That's how far gone I was. It all feels like a dream now, long since over. Then, my instinct to synchronize music and images has completely shaped who I am now, as the underlying logic I used to think with has influenced the design of everything I create, to some extent.<br /> <br /> Later, when that same impulse landed on the entire school, things escalated on their own.<br /> <br /> It's a laughable thing to admit. Four hundred years ago, Don Quixote imagined himself a knight, mistook windmills for giants, and rode off to fight for the woman he loved. Four hundred years later, I imagined Huijia Academy as a fantastical continent sent down by the gods, imagined myself an adventurer, and declared myself a disciple of &quot;the Creator Hua.&quot; The half-finished, off-limits sections of campus became a wasteland I explored at my own risk; the whole school became a disaster zone under siege by the evil-dog-god &quot;Modom&quot;. Switching to a new campus building got recast as an adventurer's journey to a foreign land. I wrote my own school into the &quot;scripture&quot; as a place blessed by the gods, drawing in a motley crowd of outsiders; And, as a believer, I have to choose a &quot;Great Reverend of Hua&quot; towards whom I can be reverent. I imagined one my misfortunate classmate as the &quot;creators reincarnated&quot;, and reimagined the one friend easiest to tease as a terrorist in need of redemption. Then, alone, across these few hundred thousand square meters of campus -- carved up like warring fiefdoms, crawling with magic and fantasy -- I played the role of an aimless wandering adventurer: cutting through thorns, punishing evil, eulogizing my god &quot;Hua&quot; and his misfortunate reverend I identified, walking a path of devotion for no reason but to earn my place in the faith, a hero descended from my own god, for that god and that faith I fought, relentlessly I walked, toward the edge of the world. In between conquests, whenever I had spare time and too much to say, I'd turn myself into a wandering troubadour, preaching the greatness of Hua to others, recounting my own legend and my list of heroic deeds -- the notebook I'd just grabbed off my desk after class became a harp in my left hand, and the bag on my back was reimagined as an adventurer's packed pack. The handful of people around me, who I could never quite tell were laughing at the story or wherever, got promoted to &quot;the faithful.&quot; Anyone who actually seemed to be listening got made a deacon. If they were devoted enough, they could work their way up to the marshal and even grand prior in the Ordre du Temple of mine. By the end, I had an entire sect of commilitones, complete with a congregation. All the while I was writing up these fantastical Huijia documents, I was also fully in character -- treating the gods I'd invented, and the classmates unlucky enough to be &quot;possessed&quot; by them, as if they were real. I was genuinely convinced, persuaded and obsessed, believing hard enough to kneel and weep. After school, before evening study hall, I'd skip my homework entirely and stay in the classroom losing myself on paper -- and look up to find the sun had already set, with evening study about to start... In short, this pitiable scholar got so carried away by his own overheated prose that he nearly forgot his actual job as a student. He nearly forgot he still had a TOEFL exam to take and a diploma to earn...<br /> <br /> But then again, at least I said, that's the skill of forcing fun out of boring days at school. That whole stretch of time was still worth every minute.<br /> <br /> To sum up, so, first I imagined a world, and then I lived inside it, following its rules, its narrative, its mythology to the letter. I kept up the act for a long time -- long enough that I genuinely couldn't tell anymore whether I was an adventurer or just a student.<br /> <br /> Then, one day I flipped open an old math notebook -- not to review math, but because most of the pages meant for math had already been overrun by my own &quot;prophecies&quot; and &quot;legends&quot; -- and it hit me that all this preaching and adventuring, absurd as it clearly was, amounted to nothing more than daydreaming out of boredom. But more important than finding it funny was this: I suddenly realized the material actually held together. None of these stories were random -- every one of them had grown out of some real internal logic. And I thought, maybe this is actually worth taking seriously.<br /> <br /> So, I gathered up all those scattered fragments -- the improvised, wandering-bard version of the story -- piece by piece, cut out whatever existed purely for a laugh, and kept and straightened out whatever still held its shape. In November 2023, I gave this world its first real name: '''Verdant Green Revelation'''. Since, Huijia's signature color is a deep, near-black green -- the exact shade every alumnus can picture with their eyes closed -- and when it came time to name it, I barely hesitated.<br /> <br /> Now, it's no longer just some ordinary teenager's daydream. It's something I truly love, and something I'm willing to spend many serious years on.<br /> <br /> == ✦ Find Me ==<br /> Feel free to reach out about VGR, world-building, music, or this site itself.<br /> <br /> * '''Email''': [mailto:a@huijia.fun a@huijia.fun]<br /> * '''Chinese Site''': [https://huijia.fun huijia.fun]<br /> * '''English Site''': [https://en.huijia.fun en.huijia.fun]</div> PlurimodSU https://en.huijia.fun/index.php?title=Template:Info&diff=164 Template:Info 2026-08-27T04:23:06Z <p>PlurimodSU: Index size of the image</p> <hr /> <div>{| class=&quot;infobox&quot; style=&quot;font-size:85%; float:right; background-color:#f8f9fb; color:#000000; padding:5px; border-radius: 10px; box-shadow:0 1px 8px 0 rgba(248,259,251,.8)&quot;<br /> <br /> |-<br /> ! colspan=&quot;2&quot; style=&quot;background-color:#d4f0e0; color:#1f1f1f; font-size:120%; padding:0.7em;&quot; | {{{title|HUIJIA FUN}}}<br /> |-<br /> | colspan=&quot;2&quot; style=&quot;text-align:center; padding:0.7em&quot; | {{#if:{{{file|}}}|[[File:{{{file}}}|{{{size|250px}}}]]}}{{#if:{{{file2|}}}|{{{file2}}}}}&lt;br&gt;&lt;div style=&quot;margin-top: 8px;margin-bottom: 1px;&quot;&gt;{{{description|}}}&lt;/div&gt;<br /> |-<br /> ! colspan=&quot;2&quot; style=&quot;background-color:#d4f0e0; color:#1f1f1f; font-size:110%;&quot; | {{{title1|}}}<br /> |{{#if:{{{1|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{1}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T1}}}&lt;/p&gt;}} {{#if:{{{2|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{2}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T2}}}&lt;/p&gt;}} {{#if:{{{3|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{3}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T3}}}&lt;/p&gt;}} {{#if:{{{4|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{4}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T4}}}&lt;/p&gt;}} {{#if:{{{5|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{5}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T5}}}&lt;/p&gt;}} {{#if:{{{6|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{6}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T6}}}&lt;/p&gt;}} {{#if:{{{7|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{7}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T7}}}&lt;/p&gt;}} {{#if:{{{8|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{8}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T8}}}&lt;/p&gt;}} {{#if:{{{9|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{9}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T9}}}&lt;/p&gt;}} {{#if:{{{10|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{10}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T10}}}&lt;/p&gt;}} {{#if:{{{11|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{11}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T11}}}&lt;/p&gt;}} {{#if:{{{12|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{12}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T12}}}&lt;/p&gt;}} {{#if:{{{13|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{13}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T13}}}&lt;/p&gt;}} {{#if:{{{14|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{14}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T14}}}&lt;/p&gt;}} {{#if:{{{15|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{15}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T15}}}&lt;/p&gt;}} {{#if:{{{16|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{16}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T16}}}&lt;/p&gt;}} {{#if:{{{17|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{17}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T17}}}&lt;/p&gt;}} {{#if:{{{18|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{18}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T18}}}&lt;/p&gt;}} {{#if:{{{19|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{19}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T19}}}&lt;/p&gt;}} {{#if:{{{20|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{20}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T20}}}&lt;/p&gt;}}<br /> |-<br /> ! colspan=&quot;2&quot; style=&quot;background-color:#d4f0e0; color:#1f1f1f; font-size:110%;&quot; | {{{title2|}}}<br /> |{{#if:{{{21|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{21}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T21}}}&lt;/p&gt;}} {{#if:{{{22|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{22}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T22}}}&lt;/p&gt;}} {{#if:{{{23|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{23}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T23}}}&lt;/p&gt;}} {{#if:{{{24|}}}|&lt;nowiki&gt;&lt;/nowiki&gt;<br /> {{!}}-<br /> {{!}}&lt;p&gt;&lt;b&gt;{{{24}}}&lt;/b&gt;&lt;/p&gt;<br /> {{!}}<br /> &lt;p&gt;{{{T24}}}&lt;/p&gt;}}<br /> |}<br /> &lt;noinclude&gt;<br /> ==Description==<br /> ===Origin===<br /> This template was rewritten from https://otomad.wiki/Template:%E4%BA%BA%E7%89%A9%E4%BF%A1%E6%81%AF<br /> <br /> ===Note===<br /> This template is used to present basic information about any subject.<br /> <br /> It can define up to 20+5 properties. You can use this template in articles to achieve the effect of listing information about an item in a sidebar.<br /> <br /> Here is an example:<br /> &lt;pre&gt;<br /> {{info<br /> |title=Plurimod Student Union<br /> |file=PSU.jpg<br /> |description=The LOGO of Plurimod Student Union <br /> |title1=Information<br /> |1=Alias<br /> |T1=Chinese: Plurimod学生会<br /> |2=Scale<br /> |T2=Over ten members<br /> |3=Leader<br /> |T3=[[User:PlurimodSU|Marina Malinti (PlurimodSU account operator)]]<br /> |4=Founder<br /> |T4=[[User:PlurimodSU|Marina Malinti]]、Akatsuki0702<br /> |5=Date of Found<br /> |T5=2023-06-07<br /> |title2=Relation<br /> |21=Friendship Group<br /> |T21=[[Huijia Group]]<br /> }}<br /> &lt;/pre&gt;<br /> The achieved effect is as follows:<br /> {{info<br /> |title=Plurimod Student Union<br /> |file=PSU.jpg<br /> |description=The LOGO of Plurimod Student Union <br /> |title1=Information<br /> |1=Alias<br /> |T1=Chinese: Plurimod学生会<br /> |2=Scale<br /> |T2=Over ten members<br /> |3=Leader<br /> |T3=[[User:PlurimodSU|Marina Malinti (PlurimodSU account operator)]]<br /> |4=Founder<br /> |T4=[[User:PlurimodSU|Marina Malinti]]、Akatsuki0702<br /> |5=Date of Found<br /> |T5=2023-06-07<br /> |title2=Relation<br /> |21=Friendship Group<br /> |T21=[[Huijia Group]]<br /> }}<br /> &lt;/noinclude&gt;</div> PlurimodSU https://en.huijia.fun/index.php?title=File:Marina_Malinti_Avatar.jpg&diff=163 File:Marina Malinti Avatar.jpg 2026-08-27T04:20:35Z <p>PlurimodSU: </p> <hr /> <div></div> PlurimodSU https://en.huijia.fun/index.php?title=User:PlurimodSU&diff=162 User:PlurimodSU 2026-08-26T20:51:37Z <p>PlurimodSU: Add more contents</p> <hr /> <div>{{Theme-HJ}}<br /> {{Info<br /> |title = &lt;span style=&quot;font-family: 'Huiwen'; color: #555555;&quot;&gt;✧ Marina Malinti ✧&lt;/span&gt;<br /> |file = PSU.jpg<br /> |description=&lt;big&gt;&lt;div style=&quot;text-shadow: 0 0 15px #9ADCFF; font-family: 'Huiwen'; color: #556B2F;&quot;&gt;· Marina Malinti ·&lt;/div&gt;&lt;/big&gt;<br /> |1 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Penname&lt;/span&gt;<br /> |T1 = Marina Malinti（Malint）<br /> |2 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Sponsorship&lt;/span&gt;<br /> |T2 = Plurimod Student Union<br /> |3 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Alias&lt;/span&gt;<br /> |T3 = Gesamtkunstwerk Creator&lt;br&gt;HUIJIA FUN Founder &amp; Organizer<br /> |4 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Creative Fields&lt;/span&gt;<br /> |T4 = World Building · Fiction · Music · Constructed Language · Website Design · Archive Collection<br /> |5 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Academy&lt;/span&gt;<br /> |T5 = 2021–2024: [[Huijia Academy]]&lt;br&gt;2024-Now: University of Utah<br /> |6 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Find me&lt;/span&gt;<br /> |T6 = [mailto:a@huijia.fun a@huijia.fun]<br /> |7 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Site&lt;/span&gt;<br /> |T7 = [https://en.huijia.fun en.huijia.fun]&lt;br&gt;[https://huijia.fun huijia.fun] (Chinese Branch)<br /> }}<br /> <br /> Nice to meet you, this is '''Marina Malinti''', the creator of this website, HUIJIA FUN, also the creator behind &quot;[[Verdant Green Revelation]]&quot; (VGR) Series.<br /> <br /> This account sometimes appears under the sponsorship of the '''Plurimod Student Union''' -- within VGR's setting, the governing body of the continental system. It's one face of my creative work, or you might say a channel through which Plurimod speaks through me -- but behind the page, it's mostly just me.<br /> <br /> I identify myself a '''world-building Gesamtkunstwerk (total artwork) creator'''. I'm fascinated by building a world from a single idea -- letting it grow the way that a seed grows into a tree. First comes the point of origin: those jokes we passed around at [[Huijia Academy]], anecdotes that came from who-knows-where, fragments of legend. From there grows a faith, and from that faith grow the world carried by the fictions, the music, the language, the visuals -- each confirming the others, each part of one whole. Writing a chapter, playing a phrase of music, designing a grammar rule, or writing a line of code for this site -- all of it is my contribution to VGR, a way of turning the intimate, abstract shapes in my head into something that can be recorded. They're all different facets of the same world.<br /> <br /> What I want, when I look at my own body of work, is for it to feel '''designed''' -- like different trunks grown from the same seed. Even if those trunks sprawl in every direction, tangled and dizzying to look at, you'll find that every leaf, wherever it grows, shares the same genetic logic.<br /> <br /> == ✦ What I Do ==<br /> &lt;small&gt;For VGR's full entry, see [[Verdant Green Revelation]]; for VGR's creative works, see [[Canon Area]] and [[Worldview Area]]&lt;/small&gt;<br /> <br /> Comming Soon.</div> PlurimodSU https://en.huijia.fun/index.php?title=User:PlurimodSU&diff=161 User:PlurimodSU 2026-08-26T20:26:56Z <p>PlurimodSU: Updating the contents</p> <hr /> <div>{{Theme-HJ}}<br /> {{Info<br /> |title = &lt;span style=&quot;font-family: 'Huiwen'; color: #555555;&quot;&gt;✧ Marina Malinti ✧&lt;/span&gt;<br /> |file = PSU.jpg<br /> |description=&lt;big&gt;&lt;div style=&quot;text-shadow: 0 0 15px #9ADCFF; font-family: 'Huiwen'; color: #556B2F;&quot;&gt;· Marina Malinti ·&lt;/div&gt;&lt;/big&gt;<br /> |1 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Penname&lt;/span&gt;<br /> |T1 = Marina Malinti（Malint）<br /> |2 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Sponsorship&lt;/span&gt;<br /> |T2 = Plurimod Student Union<br /> |3 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Alias&lt;/span&gt;<br /> |T3 = Gesamtkunstwerk Creator&lt;br&gt;HUIJIA FUN Founder &amp; Organizer<br /> |4 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Creative Fields&lt;/span&gt;<br /> |T4 = World Building · Fiction · Music · Constructed Language · Website Design · Archive Collection<br /> |5 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Academy&lt;/span&gt;<br /> |T5 = 2021–2024: [[Huijia Academy]]&lt;br&gt;2024-Now: University of Utah<br /> |6 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Find me&lt;/span&gt;<br /> |T6 = [mailto:a@huijia.fun a@huijia.fun]<br /> |7 = &lt;span style=&quot;color: #556B2F;&quot;&gt;Site&lt;/span&gt;<br /> |T7 = [https://en.huijia.fun en.huijia.fun] (English)&lt;br&gt;[https://huijia.fun huijia.fun] (Chinese)<br /> }}<br /> <br /> Nice to meet you, this is '''Marina Malinti''', the creator of this website, HUIJIA FUN, also the creator behind &quot;[[Verdant Green Revelation]]&quot; (VGR) Series.<br /> <br /> 这个账号有时以冠名'''“Plurimod学生会”'''出现，即VGR设定里掌管汇佳学园所在大陆系统的政府[[魔万学生会社]](Plurimod Student Union)——它是我创作活动的一张面孔、也可以说是Plurimod借我之口发布信息的渠道——但页面背后，大多是我一个人。<br /> <br /> 我自认为是一位'''世界建构型Gesamtkunstwerk（总体艺术）创作者'''。我着迷于把一个世界从无到有地搭建起来——从一个简单的点子、想法出发，像种子长成大树般，先有它的原点——即从前在[[汇佳学校]]和好友们口口相传的那些笑话、或不知从何处得来的趣闻轶事、传说叙事——再成长出它的信仰，然后让小说、音乐、语言、视觉一层层长出来。彼此印证，彼此一体。写一章文字、弹一段乐器、设计一段语法、或是为这个站点写一行代码，都是我为VGR做出的贡献，是将脑中那些亲切而抽象的想法转化为可记录的信息的方式。它们都是同一个世界的不同切面。<br /> <br /> 我希望看到自己创作出的作品集，是被“设计”过的，像是同一颗种子长出的树各处的树干——即便这些树干看上去横七竖八，眼花缭乱，但是无论在哪一片叶子上，您可以发现其在基因上共享一套逻辑。<br /> <br /> == ✦ 我做的事 ==<br /> &lt;small&gt;关于VGR的详情页：[[墨绿色的启示录]]；关于VGR的创作作品请见[[创作区]]及[[设定区]]&lt;/small&gt;<br /> <br /> 我从2023年06月07日开始第一次设计与汇佳主题相关的写作世界观，并与一些朋友着手写了数篇如今看似可笑却对如今整部VGR体系垫底且影响重大的写作。直至2023年11月，我才正式确定《墨绿色的启示录》这一体系命名，并开始认真将其作为自己的Gesamtkunstwerk项目进行设计。后来，2024年01月时，我设计并建立了HUIJIA FUN的雏形，即您现在看到的这些网站与内容的由来——在那时，这个网站就和现在它看起来的样子差不多了。<br /> <br /> '''墨绿色的启示录'''是我自2023年起持续创作至今的核心作品，是[[汇佳学校]]衍生的平行宇宙，由我主导的一部Gesamtkunstwerk式作品集——一部平行世界软科幻总体艺术作品体系，其小说体系自2025年正式动笔。<br /> <br /> === ✦ 创作领域 ===<br /> * '''世界构建'''：自2023年06月时开始系统化世界构建创作。最原始版本的世界观未有确认的命名，且侧重于幽默及隐喻，仅以娱乐为目的。再后来，等到我真的对待文学课认真时，我便重新审视了我从前的创作——一番推倒重来后，才有了当今的创作。<br /> * '''文学'''：2025年开始，在文学领域创作如[[GRA|《水淼未灭》]]的作品，作为本人处女作，且非VGR主线故事内容，仅作为支线小说系列之一。<br /> * '''音乐'''：自2026年07月起用Cubase进行与VGR系列相关的作曲，主要为Celtic、Epic、Rock &amp; Roll等风格融合的Orchestral Music，目前正在创作自己的首个VGR音乐专辑《水归》。曾在2025年末做过数个Orchestral Music练习作，但大多未公开或正式发布。<br /> * '''人造语言'''：自2025年末开始设计Pre-Diphic（古迪普语）构语。<br /> * '''视觉设计'''：在VGR这一概念未诞生的2021年时，我就开始接触与视觉设计和VFX设计相关的领域了。如今，我同时负责这一站点的LOGO、视觉设计、交互设计。此外，也存在数十部我本人由VGR衍生的视频剪辑创作作品。<br /> * '''MediaWiki'''：为了有承载VGR的介质，我从2023年06月07日HUIJIA FUN前身网站开创的时候，便着手学习MediaWiki站点的架构、开发与维护。最终在2024年初，搭建出HUIJIA FUN的雏形。<br /> <br /> === ✦ 技能 ===<br /> * 视觉：Adobe After Effects、Adobe Premiere Pro、Adobe Illustrator、Cinema 4D、Blender<br /> * 听觉：Cubase、FL Studio、East West<br /> * 网站设计：PHP、MediaWiki<br /> <br /> == ✦ 关于我 &amp; 为何是汇佳 ==<br /> ''汇佳学校是我人生中最为不可或缺的三年。对我而言，它已经不是学校，而是历史了。''<br /> <br /> 要是说到我的创作史，就得从我14岁那年说起了。我接触各类爱好的道路要从2021年08月说起，同时是我最初入学汇佳学校的时间。如今意识到自己用余力接触了这么多这些包罗万象的领域，仍会“嗤之以鼻”。<br /> <br /> 实话说，说那些刚入学时发生过的、挺无聊的事：声音和画面能不能对不上，还讲出一个笑话来。第一步——找几位我们当中数位知名的老师，然后再在上课时，勾结一些好友，偷偷在旁边放摄像头，录下这些课堂。<br /> <br /> 第二步，把它们剪成一段段配了乐、错了位，却出奇好笑的影片。于是乎，这些以讲课视频为原素材的用于取乐的“作品”一部接一部地诞生了。<br /> <br /> 第三步——走火入魔，不仅是针对敬爱的教师们做这样的创作，也开始对自己亲爱的室友朋友们如此创作。他们可能只是随手发了一段摆拍的搞笑视频，还是“威胁”视频。这些视频落到我眼里，就成了可以被重新剪、重新配、重新解释一遍的素材，还能够被封成原点素源，恨不得用一百条视频上的弹幕去解释烘托这些素材。当时，十分有创作欲的我，做了数不尽的质量一般，但被当作“喜剧”至久的影片。这便是我最早、最粗糙的创作简史。<br /> <br /> 在这我就不得不感谢Bululu了——他是我早期时，对我这些粗糙创作表现出最大兴趣、也最能激励我的人。最开始结缘无非是一同在聊游戏圈八卦，他是被动接收说话的。聊着聊着就熟了。后来，我这设备紧缺那阵，他把自己的iPad借给我，让我随时能剪能做。我则想办法帮他解决了一件他一直头疼的小麻烦——他音游卡关，打不过——作为回报。因这件事彻底结缘，才开启了后面这段知己知彼的友情。<br /> <br /> 实话说，这种一半恶作剧、一半创作的游戏，虽然搞怪抽象，但实际上增强了不少我的创作信心和艺术审美——多少是这样。那阵子，我给自己定了不少“规矩”，就像是骑士要恪守自身的骑士道法一样，在我这，它是：什么素材能用、怎么剪才好笑、节奏该卡在哪一帧、什么作品算优秀以及如何用自己不那么高级的软件和设备照着做出来——全靠自己一条条摸索、再逼自己照做，按照那些优秀的、成功的作品案例，自己模仿着做个更低质量的版本。我就信仰着这些纪律，任由其影响自己现实的社交及处事法则及思维逻辑——我相信这些高大上的创作是真理，谁觉得我想法怪就是谁没有好的审美。我当时就那么疯魔了。虽然这些就像梦一样，且都是过去时了。但是，直到现在，这套怎么让音乐和视频卡上的技术的直觉，已经成为了我思考一个作品创作设计等方面的底层逻辑。<br /> <br /> 于是，再后来，同样的冲动落到整座校园身上时，事情自然而然升级了。<br /> <br /> 说来也可笑。四百年前，堂吉诃德幻想自己是骑士，把风车看成巨人，为心上女人而战；四百年后，我把汇佳学校想象成神明降下的奇幻冒险大陆，把自己想象成冒险家，自封“创世华”门下子弟，把学校半完工未开放的区域当成危机废土探索，把学校幻想成被邪犬神“魔多”侵蚀的重灾区，还把新的校区想象成冒险家的异国远征。我把自己的学校写成神明眷顾的魔法之地，吸引外土鱼龙混杂之人到来，又把自己的同学想象成创世者转世，再把自己最容易开得玩笑的朋友想象成“恐怖分子”，需要感化。然后一个人要在这几十万平米、藩镇割据、魔法与奇幻横飞的校园里，当个没有最终目的冒险者，要披荆斩棘，惩恶扬善，一路修行，只为修得华之信仰之道，当自己神明的下凡冒险家，为我的神明与信仰而战，去到世界的边界。打天下的同时，若有些闲工夫和口舌无处发泄，我就化身吟游诗人，向师友布道华的伟大、又讲述我的冒险传奇，讲我的立功立名史，把左手因上节课物理课刚下课顺手拿的笔记本想象成竖琴，背上的包里装的是探索者的行囊，还把身边不知是在笑故事还是笑什么的几位想成信众，把真听进去自己想法的人一律算作自己的执事。若足够认真，别说是执事，神父和主教都能当上。最后，我就有了一个庞大的教派及听众。我一边写着奇幻化的汇佳文档，一边入戏，把自己笔下的那些神以及不幸被神附身的同学们当成了真，着了魔，信得磕头跪拜、痛哭流涕。每次放学后，晚自习前，都不做作业，而是留在教室，在纸笔上，写得自己神游，一抬头就发现太阳早落了山，晚自习马上开始……总而言之，这位可怜的学者被自己激昂的文字弄得头脑是翻来覆去，以至于差点全部忘了自己的本业，记不得自己还得考托福、拿毕业证……<br /> <br /> 话说回来，这就是在无聊日子里硬找乐子的本事。现在想想，那段经历依然值回票价。<br /> <br /> 所以，我先想象了一个世界，然后我活在那，严格按照自己世界的规矩、叙事和神话观行事。后来，我演了很久，久到自己分不清自己本身是冒险家，还是学生。<br /> <br /> 有一天，我翻到旧数学笔记本——不是为了复习数学，是因为自己本来要去记数学的本子大部分区域已经被自己的那些“神谕”“传说”侵占——才意识到，这些所谓的布道、冒险，那些本身足够荒唐的行为，不过顶多是无聊时的走神。但是，比觉得可笑更重要的是：我忽然发现，这些东西都立得住——这些故事，无不是顺着某种逻辑，一路长出来的。我觉得，这事儿好像值得认真对待。<br /> <br /> 我把那些散落各处、四处吟游即兴的叙事，一条条捡回来，删掉纯粹图一乐的部分，把剩下能立住的留下、理顺。2023年11月，我第一次给这个世界正式起了名字——《墨绿色的启示录》，因为汇佳的主色调是一种偏向墨绿的深绿色，是所有校友一闭眼都能想起的那种绿——命名的时候，我几乎没犹豫。<br /> <br /> 现在，它不再只是一个平凡中学生的白日梦，而是一件我热爱且愿意认真花很多年去做的事。<br /> <br /> == ✦ 找我 ==<br /> 欢迎就VGR、世界建构、音乐或这个站点本身与我交流。<br /> <br /> * '''邮箱'''：[mailto:a@huijia.fun a@huijia.fun]<br /> * '''中文站'''：[https://huijia.fun huijia.fun]<br /> * '''英文站'''：[https://en.huijia.fun en.huijia.fun]</div> PlurimodSU https://en.huijia.fun/index.php?title=Main_Page&diff=160 Main Page 2026-08-24T06:50:21Z <p>PlurimodSU: Edit</p> <hr /> <div>&lt;html&gt;&lt;style&gt;<br /> .mini-block-portfolio {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-portfolio:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-portfolio .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-portfolio .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-portfolio .mini-block-title,<br /> .mini-block-portfolio .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-portfolio .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> <br /> .mini-block-canon {<br /> position: relative;<br /> background: linear-gradient(105deg, rgba(150,150,130,0.2), rgba(0,0,0,0), rgba(0,0,0,0)) !important;<br /> box-shadow: 0 4px 18px rgba(2,95,50,0.22);<br /> transform: scale(1.015);<br /> transition: transform .18s ease, box-shadow .18s ease;<br /> z-index: 0;<br /> }<br /> .mini-block-canon:hover {<br /> transform: scale(1.03);<br /> box-shadow: 0 8px 28px rgba(2,95,50,0.32);<br /> }<br /> <br /> .mini-block-canon .mini-block-fulllink {<br /> position: absolute;<br /> inset: 0;<br /> z-index: 1;<br /> margin: 0;<br /> }<br /> .mini-block-canon .mini-block-fulllink a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> font-size: 0;<br /> text-indent: -9999px;<br /> }<br /> <br /> .mini-block-canon .mini-block-title,<br /> .mini-block-canon .mdui-ripple {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .mini-block-watermark {<br /> font-size: 50px;<br /> font-weight: 200;<br /> text-align: right;<br /> height: 0;<br /> margin-bottom: 0;<br /> user-select: none;<br /> pointer-events: none;<br /> }<br /> .mini-block-canon .mini-block-watermark {<br /> opacity: 0.55;<br /> }<br /> &lt;/style&gt;&lt;/html&gt;<br /> {{Theme-HJ}}<br /> &lt;div style=&quot;font-size: 26px;margin-top: 6px;text-align: center;&quot;&gt;'''Welcome to「HUIJIA FUN - Rooted in Huijia School」'''&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 18px;margin-bottom: 6px;text-align: center;&quot;&gt;''The Parallel Universe Rooted in [[Beijing Huijia Private School|Huijia Academy]]'' - A Gesamtkunstwerk Work by [[Marina Malinti]]&lt;/div&gt;<br /> &lt;div style=&quot;font-family:Huiwen;text-align: center;&quot;&gt;· Chinese Branch Website: https://huijia.fun&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;tabber&gt;<br /> |-|Website Information=<br /> &lt;br&gt;<br /> [[File:HUIJIA LOGO.png|150px|frameless|right]]<br /> &lt;span class=&quot;mini-block-title&quot;&gt;Welcome to HUIJIA FUN&lt;/span&gt;<br /> <br /> HUIJIA FUN began as a fan wiki dedicated to Beijing Huijia Private School and has since grown into something more. Today it serves as the '''official archive and Intellectual Property''' of [[Marina Malinti]] built upon the culture of Huijia as its spiritual origin and also get recognized by Huijia's principal.<br /> <br /> Whatever, This site is home to the '''[[Verdant Green Revelation]]''': A Gesamtkunstwerk (Total Art) IP encompassing novel series, music albums, constructed language [[Pre-Diphic]], OtoMAD works and even a speculative worldview rooted in Huijia Academy.<br /> <br /> This website is '''non-profit''' '''non-advertisement''', and '''non-membership'''. It is largely created and maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]]. For questions or consultation, please contact me directly through: a@huijia.fun<br /> <br /> |-|Create a Page=<br /> &lt;br&gt;<br /> &lt;div style=&quot;text-align:center&quot;&gt; '''Remember! This website is publicly accessible on the internet!'''<br /> <br /> I fully support and actively encourage fan editing. To ensure resource reliability, information neutrality, and compliance with the '''Creative Commons''' license and copyright, please make sure you have read the [[Guideline]] and understand the community and editing rules. Before writing a page, please be aware that this site follows the '''CC BY-SA''' license and maintains relatively rigorous content standards.<br /> <br /> Ready? Create a page through the section below!<br /> {{#createpage:}}<br /> &lt;/div&gt;<br /> <br /> |-|Recent Events=<br /> &lt;br&gt;<br /> &lt;div style=&quot;font-size: 70px; font-weight: 200; text-align: right; height: 0; color: #f1f1f1; user-select: none; margin-bottom: 0&quot;&gt;{{{background|Recent events}}}&lt;/div&gt;<br /> {{Section<br /> |file=[[File:Bittersweet Memories.jpg]]<br /> |title=Release of Huijia Class of 2024 Graduation Song – Bittersweet Memories<br /> |content=&quot;Bittersweet Memories&quot; is the graduation song for Huijia's Class of 2024. It is a song that expresses mixed feelings about past beautiful memories in Huijia and future farewells.&lt;br&gt;Upon the song's release, the graduation ceremony for Huijia School's Class of 2024 would be also witnessed. This song would become a lasting memento, serving as a precious gift upon the graduation.<br /> |link=https://youtu.be/BbaEMZn9psQ<br /> }}<br /> &lt;/tabber&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block mini-block-canon&quot; style=&quot;border-left: 4px solid #025F32;&quot;&gt;<br /> &lt;div class=&quot;mini-block-fulllink&quot;&gt;[[Canon Area]]&lt;/div&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Canon&lt;/div&gt;<br /> &lt;br&gt;<br /> &lt;center&gt;<br /> &lt;div style=&quot;font-family: 'Noto Serif SC', serif; margin: 1.6em 1em 1.2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 28px; font-weight: 600; letter-spacing: 0.06em; color: #025F32; text-shadow: 0 1px 3px rgba(2,95,50,0.15);&quot;&gt;墨绿色的启示录&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8fa896; margin-top: 4px;&quot;&gt;Verdant Green Revelation&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 15px; opacity: 0.75; margin-top: 0.8em; font-style: italic;&quot;&gt;VGR Portfolio：Everything is still unfolding&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/center&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Worldview&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Worldview Area]]&lt;/span&gt;<br /> <br /> ''The fictional universe of VGR - myths, mankind, and canons.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Mythos|Mythos]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Entity|Entity]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Cosmology|Cosmology]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;div class=&quot;mini-block-watermark&quot; style=&quot;color: #f1f1f1;&quot;&gt;Archive&lt;/div&gt;<br /> &lt;span class=&quot;mini-block-title&quot;&gt;[[Archive Area]]&lt;/span&gt;<br /> <br /> ''The real Huijia - documents, footage, and the origin of it all.''<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Record|Record]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Origin|Origin]]&lt;/li&gt;<br /> &lt;li class=&quot;mdui-ripple&quot;&gt;[[:Category:Tangent|Tangent]]&lt;/li&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Quick Guide&lt;/big&gt;<br /> <br /> ''[[Quick Guide|Click here to jump to the Quick Guide]]''.<br /> <br /> Welcome - whether you arrived from [[Dipfield City]] or the Eartho.<br /> <br /> HUIJIA FUN is the web centers on the Gesamtkunstwerk IP [[Verdant Green Revelation]], derived from the culture of [[Beijing Huijia Private School|Huijia Academy]]. It's organized into three areas. The '''[[Portfolio Area]]''' collects the creative output: novels, music albums and more - if it was made, it lives here. The '''[[Worldview Area]]''' documents the fictional universe: its myths ('''Mythos''') groups and places ('''Entity''') and canonical settings ('''Lore'''). The '''[[Archive Area]]''' preserves the real Huijia: historical documents ('''Record''') original footage and campus materials ('''Origin''') and other derivative works ('''Tangent''').<br /> <br /> The real Huijia Academy is the root. The VGR universe is what grew from it.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Side Guide&lt;/big&gt;<br /> <br /> [[Portfolio Area|'''''I want to explore the creative works of Verdant Green Revelation!''''']]<br /> <br /> [[:Category:Novel|''I want to read the '''VGR novel series'''!'']]<br /> <br /> [[:Category:Album|''I want to listen to the '''Green Revelation''' music albums!'']]<br /> <br /> [[:Category:OtoMAD|''I want to watch the '''DipfieldMAD''' works!'']]<br /> <br /> [[Worldview Area|''What is the '''VGR or Huijia Worldview''' - where do I start?'']]<br /> <br /> [[Trinitarian Laws of Huashael Practice|''What is the most iconic church with the mysterious ''' hexagrams'''?'']]<br /> <br /> [[Wang Zhize|''Who is the '''actual founder and absolute origin''' of Huijia Group?'']]<br /> <br /> [[Color Code|''How can I '''design''' like Huijia and Plurimod? (Color Code)'']]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block-container mini-block-list&quot;&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Guidelines&lt;/big&gt;<br /> <br /> ''[[Guidelines|Click here to jump to the Guidelines]]''.<br /> <br /> It's not a big deal temporarily but I do believe this is necessary. To foster a harmonious non-harassment community environment we have established the following rules.<br /> &lt;/div&gt;<br /> &lt;div class=&quot;mini-block&quot;&gt;<br /> &lt;big&gt;Special Thanks &amp; Tributes&lt;/big&gt;<br /> <br /> Thanks to these previous tributers:<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:LastW!sh LastW!sh] and [https://huijia.fandom.com/zh/wiki/User:Trooperr9863625badun Trooperr9863625badun] for writing the text for this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:Akatsuki0702 Akatsuki0702] for planning the framework of this wiki;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:YunxinBululu.Li YunxinBululu.Li] and [https://huijia.fandom.com/zh/wiki/User:JohnDing2023 JohnDing] for refining the world-building;<br /> &lt;br&gt;<br /> [https://huijia.fandom.com/zh/wiki/User:1S0d1uM1 1S0d1uM1] and [https://huijia.fandom.com/zh/wiki/User:Hewu888 Hewu888] for contributing articles.<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> [[Category:Hub]]</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Timeless.css&diff=159 MediaWiki:Timeless.css 2026-08-24T06:44:09Z <p>PlurimodSU: Edit</p> <hr /> <div>/* <br /> 源自音MAD维基 https://otomad.wiki/MediaWiki:Timeless.css<br /> 版权协定：知识共享 署名 3.0<br /> 开源地址https://github.com/OtomadWiki/Kawaii-Timeless/<br /> */<br /> <br /> .mw-body h6{<br /> color: #212121;<br /> font-weight: bold;<br /> }<br /> /*平板页面导航字体修改*/<br /> #mw-site-navigation h2, #mw-related-navigation h2{<br /> font-weight: 500;<br /> }<br /> /*body修改及修复line-height修改后的bug*/<br /> body.ns-1 .mw-body h1.firstHeading, body.ns-3 .mw-body h1.firstHeading{<br /> margin-bottom: .5em;<br /> }<br /> li{<br /> margin-bottom: 10px;<br /> }<br /> /*顶栏*/<br /> .oo-ui-clippableElement-clippable.oo-ui-popupWidget-body{<br /> max-width: unset !important;<br /> }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child{<br /> border-left: none;<br /> }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-footer{<br /> border-top: none;<br /> }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-head{<br /> border-bottom: none;<br /> box-shadow: 0 0px 9px rgb(0 0 0 / 9%);<br /> }<br /> .oo-ui-popupWidget-popup{<br /> border: none;<br /> }<br /> .oo-ui-popupWidget{<br /> filter: drop-shadow(0 15px 20px rgb(0 0 0 / 20%));<br /> }<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before{<br /> border-bottom-color: #fff;<br /> }<br /> div.mw-echo-ui-overlay{<br /> z-index: 600;<br /> }<br /> #mw-header-nav-hack, #mw-header-hack{<br /> box-shadow: unset;<br /> }<br /> /*现代化搜索框*/<br /> #simpleSearch{<br /> opacity: 100;<br /> }<br /> /*目录卡片*/<br /> ul#filetoc, .toc, .mw-warning{<br /> border: unset;<br /> box-shadow: 0 2px 5px 0px rgb(0 0 0 / 0.2);<br /> background: #fff;<br /> border-radius: 4px;<br /> }<br /> /*移动端菜单*/<br /> #menus-cover{<br /> background: #000;<br /> opacity: 0.15;<br /> }<br /> #site-navigation .sidebar-inner{<br /> border: unset;<br /> }<br /> .sidebar-inner, .dropdown{<br /> border: unset;<br /> border-radius: 6px;<br /> }<br /> @media screen and (max-width: 1099px) and (min-width: 851px){<br /> .sidebar-inner, .dropdown{<br /> border: unset !important;<br /> box-shadow: 0 2px 30px 1px rgb(0 0 0 / 0.2) !important;<br /> }<br /> #mw-site-navigation .sidebar-inner{<br /> border: unset !important;<br /> box-shadow: 0 2px 30px 1px rgb(0 0 0 / 0.2) !important;<br /> }<br /> }<br /> @media screen and (max-width: 850px){<br /> .sidebar-inner, .dropdown{<br /> box-shadow: 0 2px 30px 1px rgb(0 0 0 / 0.2) !important;<br /> z-index: 501;<br /> }<br /> }<br /> @media screen and (max-width: 1099px) and (min-width: 851px){<br /> #mw-related-navigation .sidebar-inner{<br /> border: unset !important;<br /> box-shadow: 0 2px 30px 1px rgb(0 0 0 / 0.2) !important;<br /> }<br /> }<br /> /*个人资料设置页*/<br /> .profile-tab{<br /> background-color: unset;<br /> padding: 9px 10px 10px;<br /> font-size: 16px;<br /> }<br /> .profile-tab a:visited, .profile-tab a {<br /> color: #000 !important;<br /> }<br /> .profile-tab-on a:visited, .profile-tab-on a {<br /> color: var(--color-primary) !important;<br /> }<br /> .profile-tab-on{<br /> background-color: unset;<br /> padding: 9px 10px 10px;<br /> font-size: 16px;<br /> border-bottom: solid 2px var(--color-primary);<br /> }<br /> .eye-container .title{<br /> color: #000;<br /> font-size: 14px;<br /> }<br /> .eye-container{<br /> box-shadow: none;<br /> opacity: 1.0;<br /> }<br /> /*按钮*/<br /> button, html input[type=&quot;button&quot;], input[type=&quot;reset&quot;], input[type=&quot;submit&quot;]{<br /> background-color: var(--color-primary);<br /> border: none;<br /> outline-color: #000;<br /> border-color: #000;<br /> border-radius: 2px;<br /> color: #fff;<br /> padding: 5px 12px;<br /> margin-right: 5px;<br /> font-weight: bold;<br /> transition: background-color 100ms,color 100ms,border-color 100ms,box-shadow 150ms,transform 150ms;<br /> box-shadow: 0 4px 4px rgb(0 0 0 / 15%);<br /> }<br /> button:hover, html input[type=&quot;button&quot;]:hover, input[type=&quot;submit&quot;]:hover {<br /> background-color: var(--color-hover);<br /> box-shadow: 0 9px 9px rgb(0 0 0 / 15%);<br /> }<br /> button:active, html input[type=&quot;button&quot;]:active, input[type=&quot;submit&quot;]:active {<br /> background-color: var(--color-dark);<br /> box-shadow: 0 0 0 rgb(0 0 0 / 15%) !important;<br /> transform: scale(.95);<br /> }<br /> button:focus, html input[type=&quot;button&quot;]:focus, input[type=&quot;submit&quot;]:focus {<br /> box-shadow: 0 0 0 4px rgb(251 114 153 / 25%);<br /> outline: 1px solid transparent;<br /> }<br /> .mw-ui-button:not(:disabled){<br /> transition: background-color 100ms,color 100ms,border-color 100ms,box-shadow 150ms,transform 150ms;<br /> }<br /> .mw-echo-ui-notificationBadgeButtonPopupWidget-popup &gt; .oo-ui-popupWidget-popup &gt; .oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement &gt; .oo-ui-buttonElement-button{<br /> box-shadow: none;<br /> }<br /> .mw-ui-button{<br /> border: none;<br /> border-color: #000;<br /> outline-color: #000;<br /> }<br /> .mw-ui-button:focus{<br /> border-color: var(--color-primary);<br /> box-shadow: inset 0 0 0 1px var(--color-primary), inset 0 0 0 2px #ffffff;<br /> }<br /> /*播放器*/<br /> .oo-ui-windowManager-modal.oo-ui-windowManager-floating &gt; .oo-ui-dialog &gt; .oo-ui-window-frame{<br /> border: none;<br /> box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3);<br /> border-radius: 4px;<br /> }<br /> /*修改图标颜色*/<br /> .oo-ui-image-progressive.oo-ui-icon-edit, .mw-ui-icon-edit-progressive:before{<br /> background-image: linear-gradient(transparent,transparent),url(&quot;data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eedit%3C/title%3E%3Cg fill=%22%23fb7299%22%3E%3Cpath d=%22M16.77 8l1.94-2a1 1 0 000-1.41l-3.34-3.3a1 1 0 00-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z%22/%3E%3C/g%3E%3C/svg%3E&quot;);<br /> }<br /> .oo-ui-image-progressive.oo-ui-icon-settings, .mw-ui-icon-settings-progressive:before{<br /> background-image: linear-gradient(transparent,transparent),url(&quot;data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Esettings%3C/title%3E%3Cg fill=%22%23fb7299%22%3E%3Cg xmlns:xlink=%22http://www.w3.org/1999/xlink%22 transform=%22translate%2810 10%29%22%3E%3Cpath id=%22a%22 d=%22M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3%22/%3E%3Cuse transform=%22rotate%2845%29%22 xlink:href=%22%23a%22/%3E%3Cuse transform=%22rotate%2890%29%22 xlink:href=%22%23a%22/%3E%3Cuse transform=%22rotate%28135%29%22 xlink:href=%22%23a%22/%3E%3C/g%3E%3Cpath d=%22M10 2.5a7.5 7.5 0 000 15 7.5 7.5 0 000-15v4a3.5 3.5 0 010 7 3.5 3.5 0 010-7%22/%3E%3C/g%3E%3C/svg%3E&quot;);<br /> }<br /> /*媒体查看器*/<br /> .mw-ui-button.mw-ui-progressive{<br /> border-radius: 2px;<br /> }<br /> .mw-mmv-close,.mw-mmv-options-button{<br /> transition: transform 300ms;<br /> }<br /> .mw-mmv-close:hover{<br /> transform: rotate(-180deg);<br /> }<br /> .mw-mmv-options-button:hover{<br /> transform: rotate(-90deg);<br /> }<br /> .mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-options-button, .mw-mmv-close, .mw-mmv-fullscreen, .mw-mmv-next-image, .mw-mmv-prev-image{<br /> box-shadow: none !important;<br /> background-color: transparent !important;<br /> border: none !important;<br /> }<br /> .mw-mmv-download-button.mw-mmv-dialog-open, .mw-mmv-reuse-button.mw-mmv-dialog-open, .mw-mmv-options-button.mw-mmv-dialog-open, .mw-mmv-close.mw-mmv-dialog-open, .mw-mmv-fullscreen.mw-mmv-dialog-open, .mw-mmv-next-image.mw-mmv-dialog-open, .mw-mmv-prev-image.mw-mmv-dialog-open, .mw-mmv-download-button:hover, .mw-mmv-reuse-button:hover, .mw-mmv-options-button:hover, .mw-mmv-close:hover, .mw-mmv-fullscreen:hover, .mw-mmv-next-image:hover, .mw-mmv-prev-image:hover{<br /> background-color: unset !important;<br /> border: none !important;<br /> }<br /> /*SocialProfile*/<br /> .relationship-item{<br /> box-shadow: 0 3px 6px rgb(0 0 0 / 4%), 0 3px 6px rgb(0 0 0 / 6%);<br /> border: 1px solid;<br /> border-color: rgba(0,0,0,0.05);<br /> border-radius: 8px;<br /> }<br /> .relationship-item img{<br /> border-radius: 2em;<br /> }<br /> .relationship-action img{<br /> border-radius: 2em;<br /> }<br /> #profile-title-container {<br /> padding: 19px 0 6px 6px;<br /> }<br /> #profile-top{<br /> border-bottom: none;<br /> }<br /> .user-section-heading{<br /> line-height: 34px;<br /> }<br /> /*警告卡片*/<br /> div.mw-warning-with-logexcerpt{<br /> padding: 4px 16px !important;<br /> margin-bottom: 10px !important;<br /> border: unset !important;<br /> clear: both !important;<br /> border-radius: var(--border-radius--medium) !important;<br /> }<br /> /*去掉平板端奇怪的阴影*/<br /> @media screen and (min-width: 851px) and (max-width: 1099px){<br /> #mw-related-navigation .sidebar-chunk{<br /> box-shadow: none;<br /> }<br /> }<br /> @media screen and (min-width: 851px) and (max-width: 1099px){<br /> #mw-site-navigation .sidebar-chunk{<br /> box-shadow: none;<br /> }<br /> }<br /> /*通知*/<br /> .mw-echo-ui-notificationItemWidget{<br /> background-color: unset;<br /> border:1px solid #f9f9f9;<br /> }<br /> .mw-echo-ui-notificationItemWidget:hover{<br /> background-color: unset;<br /> }<br /> .mw-echo-ui-notificationItemWidget:focus{<br /> box-shadow: inset 0 0 0 1px var(--color-primary);<br /> }<br /> @media screen and (max-width: 850px){<br /> .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor{<br /> display: none;<br /> }}<br /> /*隐藏帮助*/<br /> body #mw-wrapper .mw-helplink, body #mw-wrapper #mw-indicator-mw-helplink{<br /> display: none;<br /> }<br /> <br /> /*针对移动端用户页的竖向排列*/<br /> @media screen and (max-width: 850px){<br /> #user-page-left {<br /> width: 100%;<br /> float: none;}<br /> #user-page-right {<br /> width: 100%;<br /> float: none;<br /> }<br /> }<br /> <br /> #wpUploadFile::file-selector-button {<br /> display: none !important;<br /> }<br /> <br /> /* Icon */<br /> #n-The-VGR-Canon a:before{content: 'public';}<br /> #n-Archive-Area a:before{content: 'archive';}<br /> #n-Worldview-Area a:before{content: 'travel_explore';}<br /> <br /> #n-Record a:before{content: 'folder_open';}<br /> #n-Origin a:before{content: 'movie';}<br /> #n-Tangent a:before{content: 'ondemand_video';}<br /> <br /> #n-Mythology a:before{content: 'article';}<br /> #n-Entity a:before{content: 'group';}<br /> #n-Ontology a:before{content: 'public';}<br /> <br /> #n-Search-Page a:before{content: 'pageview';}<br /> #n-Guideline a:before{content: 'format_list_bulleted';}<br /> #n-Quick-Guide a:before{content: 'book';}<br /> #n-Test-Page a:before{content: 'science';}<br /> #n-Task-List a:before{content: 'event_note';}<br /> #n-Help-Page a:before{content: 'help';}<br /> <br /> /* More */</div> PlurimodSU https://en.huijia.fun/index.php?title=MediaWiki:Sidebar&diff=158 MediaWiki:Sidebar 2026-08-24T06:42:59Z <p>PlurimodSU: Edit</p> <hr /> <div>* navigation<br /> ** mainpage|mainpage-description<br /> ** recentchanges-url|recentchanges<br /> ** randompage-url|randompage<br /> * Hubs<br /> ** Canon Area|The VGR Canon<br /> ** Worldview Area|Worldview Area<br /> ** Archive Area|Archive Area<br /> * Worldview Area<br /> ** Category:Mythology|Mythology<br /> ** Category:Entity|Entity<br /> ** Category:Ontology|Ontology<br /> * Archive Area<br /> ** Category:Record|Record<br /> ** Category:Origin|Origin<br /> ** Category:Tangent|Tangent<br /> * Edit Help<br /> ** Special:AllPages|Search Page<br /> ** Guideline|Guideline<br /> ** The Quick Guide of Huijia|Quick Guide<br /> ** Test Page|Test Page<br /> ** Task List|Task List<br /> ** helppage|Help Page</div> PlurimodSU https://en.huijia.fun/index.php?title=GRA1&diff=157 GRA1 2026-07-05T15:49:54Z <p>PlurimodSU: sup</p> <hr /> <div>{{Theme-HJ}}<br /> {{#CSS:<br /> .mw-body h1.firstHeading { display: none !important; }<br /> .mqc-phase {<br /> text-align: center;<br /> font-family: 'JetBrains Mono', 'Consolas', monospace;<br /> font-size: 0.8em; letter-spacing: 0.3em; text-transform: uppercase;<br /> opacity: 0.7; margin: 28px 0 6px;<br /> }<br /> .mqc-title {<br /> text-align: center;<br /> font-family: 'Huiwen', 'Lora', serif;<br /> font-size: 2em; line-height: 1.2; font-weight: 700; margin: 0 0 4px;<br /> }<br /> .mqc-title-zh {<br /> display: block; font-size: 0.5em; letter-spacing: 0.12em;<br /> opacity: 0.65; font-weight: 400; margin-top: 8px;<br /> }<br /> .mqc-meta {<br /> text-align: center; margin: 22px 0 0;<br /> font-family: 'JetBrains Mono', monospace;<br /> font-size: 0.72em; letter-spacing: 0.08em; opacity: 0.7;<br /> }<br /> .mqc-rule {<br /> border: 0; height: 1px; margin: 30px auto; width: 70%;<br /> background: linear-gradient(90deg, transparent, currentColor, transparent);<br /> opacity: 0.25;<br /> }<br /> .mqc-epigraph {<br /> margin: 26px auto; padding: 16px 24px; max-width: 75%;<br /> border-left: 2px solid currentColor;<br /> font-style: italic; font-size: 1.05em; opacity: 0.85;<br /> }<br /> .mqc-epigraph .mqc-cite {<br /> display: block; margin-top: 10px; font-style: normal;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.62em;<br /> letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7;<br /> }<br /> .mqc-synopsis {<br /> margin: 24px 0; padding: 18px 22px;<br /> border: 1px solid rgba(0,0,0,0.12); border-radius: 10px;<br /> background: rgba(255,255,255,0.04); font-size: 0.96em; opacity: 0.92;<br /> }<br /> .mqc-synopsis .mqc-label {<br /> display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62em;<br /> letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.65; margin-bottom: 8px;<br /> }<br /> .mqc-body { line-height: 1.85; }<br /> .mqc-body p { text-align: justify; margin: 0 0 1.4em; }<br /> .mqc-body p:first-of-type::first-letter {<br /> float: left; font-size: 3.2em; line-height: 0.8; font-weight: 700;<br /> margin: 0.05em 0.1em 0 0;<br /> }<br /> .mqc-scenebreak {<br /> text-align: center; margin: 28px 0; letter-spacing: 0.4em; opacity: 0.5;<br /> }<br /> .mqc-tlnote {<br /> margin: 24px 0; padding: 14px 18px;<br /> border: 1px dashed rgba(0,0,0,0.18); border-radius: 8px;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.78em; opacity: 0.8;<br /> }<br /> .mqc-tlnote .mqc-tllabel { letter-spacing: 0.2em; opacity: 0.7; }<br /> .mqc-adj .mqc-dir {<br /> display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.6em;<br /> letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.65; margin-bottom: 6px;<br /> }<br /> .mqc-adj-cell {<br /> padding: 16px 20px;<br /> border: 1px solid rgba(0,0,0,0.15); border-radius: 10px;<br /> transition: border-color 0.3s, transform 0.3s;<br /> }<br /> .mqc-adj-cell:hover { transform: translateY(-2px); border-color: currentColor; }<br /> .mqc-adj-cell.is-disabled { opacity: 0.3; }<br /> .mqc-index-link {<br /> text-align: center;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.7em;<br /> letter-spacing: 0.2em; text-transform: uppercase;<br /> }<br /> }}<br /> &lt;div class=&quot;mqc-phase&quot;&gt;VERDANT GREEN REVELATION · The Apocrypha&lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-title&quot;&gt;Master Marinaqua, Not Laid to Rest: Silence of His Sect<br /> <br /> &lt;span class=&quot;mqc-title-zh&quot;&gt;VOLUME I · Phase 1 · Marinaqua's Practice&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-meta&quot;&gt;'''Author''' Marina Malinti&lt;/div&gt;<br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> &lt;div class=&quot;mqc-epigraph&quot;&gt;<br /> ''&quot;Water does not contend, yet nothing in the world can overcome it.&quot;&lt;br&gt;-- The Hallmod Scripture, Chapter of Six Altars''<br /> &lt;span class=&quot;mqc-cite&quot;&gt;Phase 1 opening&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> &lt;div class=&quot;mqc-body&quot;&gt;<br /> <br /> This story, slowly unfolds in a society from over 300 years ago. It was a time of turbulent change and upheaval. As society shifted, religions also emerged one after another in an endless stream.<br /> <br /> The story centers on the Marinaqua Scripture Hall, a newly emerging scripture hall at the time. The doctrine of its lectures was slightly contrary to mainstream religions and underwent a baptism of controversy and challenge at its inception.<br /> <br /> The founder of this sect was a monk known as Marinaqua. He was born into a maritime family that was neither wealthy nor impoverished. &quot;Marinaqua&quot; was not his birth name; rather, it was a religious pseudonym he chose for himself after reading the religious classics of the Hua Sect, combining them with his own experiences and thoughts. From a young age, he showed a strong interest in various religious cultures and read through many religious classics. By chance, he discovered a representative scripture of the Hua Sect—the Hallmod Scripture, belonging to the Green Revelation doctrinal series (abbreviated as &quot;the GR Series&quot;, a collective term for the doctrinal scriptures of the &quot;Hua Sect&quot; religious system. The naming of the Hallmod Scripture is an ancient event. Thousands of years ago, when the Pre-Diphic language was popular, the word &quot;Mo&quot; referred to magic. The word &quot;mod&quot; emerged and came to refer to magic).<br /> <br /> For him, this doctrine was unlike other religious classics; its worldview system and philosophy were incredibly novel and revelatory to him at the time. Unlike other scriptures, although the Hallmod Scripture was a religious book, it largely aimed to delve into philosophical concepts.<br /> <br /> Marinaqua interpreted it this way: &quot;The wisdom of the Hallmod Scripture originates from the most primitive Hua Sect, the 'Proto-Hua Sect'. As a religious system that had existed for thousands of years, during the 'Second Creation Era' when it was prophesied that the world would restart, various branches of the Proto-Hua Sect jointly compiled this comprehensive scripture, which became the origin of the Hallmod Scripture. This scripture, in the end, traces the source of 'Mod (magic)' — the most primitive and pure mysterious power contained in all things. The wild power acting upon the Primordial World is the 'Modclaw'... as well as the respective functions of the six types of holy water — namely, the 'Six Altars Water Law'. In short, it uses water to explain the fundamental philosophy of Mod — The Three Virtues: 'Gentleness, Change, and Constancy'.&quot;<br /> <br /> Because of this, the religious system, Hua Sect, became the religious system he recognized most, and the Hallmod Scripture became the supreme religious classic in his heart.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> During his journey of following the scriptural revelations, Marinaqua’s academic experience was filled with bumps in this unpredictable society. The year S.C.1619 (Second Creation Era 1619) was when Marinaqua prepared to enter the &quot;Senior Departmental Academy,&quot; a degree level that was once considered difficult to attain on the continent. However, a revolution that swept across the entire continent exploded with a crash—the &quot;Dipfield Landing&quot; revolution. In other words, it is a kind of urban enlightenment revolution.&quot;<br /> <br /> In the revolution, this continent named &quot;Dipfietos,&quot; originally divided among six confronting regimes, underwent a fierce game of power. Eventually, the old systems were abolished, and a brand-new order was built upon their ruins, unifying the 6 scattered nations into just 1 massive city — Dipfield Metropolis. The year of the city's unification, S.C.1619, became the start of a new calendar—D.L.0, which refers to the year 0 of the Dipfield Landing revolution.<br /> <br /> Because the torrent of the times was so rapid, the academic landscape was completely reshaped. The low efficiency of the former academic system clearly could not meet the demand for talent in the future following the Dipfield Landing revolution. Old colleges and institutions were either forced to transform or gradually died out. Meanwhile, the concept of the &quot;Independent Academy&quot; began to rise on the continent, viewed as the beacon of wisdom for the future metropolis.<br /> <br /> Fortunately, Marinaqua was very diligent in his studies and became an outstanding scholar. After weighing his options, he applied to the first institution in the metropolis centered on academic autonomy — Dulwich College — and was successfully admitted.<br /> <br /> Dulwich College was located in the southern region of the new &quot;Dipfield Metropolis,&quot; thousands of miles away from Marinaqua’s hometown in the Mount Gya at the easternmost end of the metropolis. This journey of thousands of miles became the first harsh practice of Marinaqua’s life. Over the next month, carrying a book chest filled with academic texts and the complete volume of the Hallmod Scripture, Marinaqua crossed ranges of mountains and passed through dozens of living districts that served as transit stations, finally stepping into the academic heart of this metropolis — the Dulwich Independent Academy Area.<br /> <br /> Marinaqua was shocked by the torrent of the new era — the magnificient towers of the Dulwich Independent Academy Area pierced the clouds, newly invented steam locomotives darted through the streets, and concrete skyscrapers stood in rows like scales. Marinaqua felt a sudden openness, as if he had arrived in a new world.<br /> <br /> Over time, however, while absorbing new knowledge, Marinaqua felt lost and anxious. The exaggerated speed of the city’s transformation was hard for Marinaqua and the masses of the urban society to accept. Any sudden political or technological change felt like a giant palm striking down on the urban society, stirring panic in people's hearts. Marinaqua, as a student, initially harbored a desire to conform to the new era, but he worried anxiously about his major and career direction, almost unable to decide... Amidst the revolution and beneath the prosperity, the individual was only conscious of their own insignificance and incompetence within the great metropolis, terrified of being rejected by the times and ultimately becoming the price of so-called &quot;humanity progress.&quot;<br /> <br /> To cope with negative emotions and cleanse himself, hoping to remain untainted by external negativity, Marinaqua tried to use the wisdom of the Hallmod Scripture to soothe himself and to examine this society full of change. His shock at the city was washed by time into profound contemplation —<br /> <br /> &quot;The rapidness of the urban transformation does not create confusion; confusion stems from forgetting the &quot;''Dorolal'' &lt;sup&gt;1&lt;/sup&gt;&quot; of why one came...&quot;<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> 8 years later, in the 8th Year of Dipfield Landing Era...<br /> <br /> The 8 years of academic life passed in a flash. Marinaqua obtained his Final Department Degree in Management, completing his studies at the age of 24, becoming a young intellectual. Seeking opportunities for his own development, he stumbled his way into a port management company, spending his days at the harbor accompanied by waves and ship horns.<br /> <br /> For several years, he devoted himself almost entirely to the port, rarely leaving the area. In moments of leisure amidst his busy schedule, he did not forget to make notes and annotations in the Hallmod Scripture he carried, attempting to gain new revelations from it. This job allowed him to meet many people from different backgrounds — he met captains running across the world, merchants skilled in making money, immigrants longing to integrate into the core of the new era, and ordinary sailors forced to work for a livelihood...<br /> <br /> He saw that in the feverish pursuit of ultimate wealth, people became selfish, and relationships with kin became indifferent; he saw more and more high-rises and high-tech facilities appearing in the city, yet as workers' hours grew longer, their welfare was inversely proportional; he saw the elite class talking eloquently about &quot;revolution,&quot; &quot;progress,&quot; and &quot;future,&quot; while often revealing a look of emptiness and anxiety; he also saw monks who were once full of faith and persistent in their practice, lose themselves in the era, unable to suppress the noise in their hearts, stepping onto the path of seeking fame and profit, forgetting the original intention of their practice.<br /> <br /> Marinaqua said, &quot;The Hallmod Scripture states: 'If the practice of the Law collapses, the human heart loses order!' The city at the time expresses the peak of material abundance but can not satisfy the emptiness above, causing an imbalance of the Dorolal! Just like a sturdy ship that knows not its course and destination...&quot;<br /> <br /> Marinaqua realized that the noise of the urban transformation contained questions about where the era was heading. Harboring a sense of his own mission in his heart, he believed deep down that he had determined his direction...<br /> <br /> After more than twenty years of grueling work, around D.L.30, Marinaqua finally saved up a certain amount of capital at the port through frugality. He resigned from his job, moved to the edge of the city, and decided to return to society.<br /> <br /> Decades of time were as rough as the sea breeze, eroding Marinaqua’s body and making him much thinner. Having worked at the port for years, his hands — once agile and good at turning pages and holding pens—were now calloused and cracked from abrasion by cables; the spine of the young man who once stood straight in lecture halls, on podiums, and at interview tables was now increasingly hunched from years of unloading cargo. As for his Final Department Graduate Degree in Management from the academy? In fact, it was rarely put to use — except for leaving a trace of ink on the employment form. The operational suggestions designed for the port by &quot;Scholar&quot; Marinaqua, who had furthered his studies in management, were somehow sealed away at the bottom of a yellowing file bag along with that yellowing degree certificate, unasked for by anyone. His ideas were pale and powerless, ultimately failing to stir even a ripple for this massive port; what remained was only pure hard labor and sweat...<br /> <br /> Goodbye, port! Now, all this pain is over.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> Returning to society, Marinaqua first hoped to find a place where he could silently study and comprehend philosophy. Thus, his first act was to visit the various Hua Sect temples in the city. At that time, most Hua Sect temples belonged to a massive mainstream branch of the Hua Sect — the Chotone Sect.<br /> <br /> Speaking of the Chotone Sect, this faction was like a surging tide in the long history of the Hua Sect. Its founding traces back to the end of the thirteenth century of the Second Creation Era. In that period, the thought of the Proto-Hua Sect was already prevalent in the religious world. However, even the Hua factions considered new at the time had research thoughts largely identical to the Proto-Hua Sect. On this vast land rich in faith, the Chotone Sect was like a new sprout breaking through the soil, born quietly. Its founder fused ancient wisdom with modern views of that era, creating a masterpiece that adhered to the times and shone with the light of the age in the history of the Hua Sect — the Unified Sphere Revelation, which was born as the core doctrine of the Chotone Sect. It inherited the essence of the Proto-Hua Sect while integrating the sparks of thought from the new era.<br /> <br /> Marinaqua was attracted by this tide that had once led religion. Therefore, after deliberation, he chose to become a monk converted to the Chotone Sect. within a very short time, he read through almost all the doctrinal works of the Unified Sphere Revelation in detail, his inner self resonating with the influence of the Chotone Sect trend — the more he studied it, the more he could feel its charm.<br /> <br /> However, over years of time again, Marinaqua always felt something was missing in his heart...<br /> <br /> Marinaqua believed that although the Chotone Sect was inclusive, it failed to carry forward the fundamental philosophy of &quot;Gentleness, Change, and Constancy&quot; contained in the &quot;Six Altars Water Law&quot; that is pointed in the Hallmod Scripture of GR Series of Hua Sect. It placed too much emphasis on the changes and evolution of the times, but neglecting the gentle side of all things.<br /> <br /> Marinaqua said: &quot;The core philosophy of the Hallmod Scripture, in the end, is — Gentleness, Change, and Constancy. This coincides perfectly with the imagery of 'Water'.&quot;<br /> <br /> &quot;The imagery of water really fascinates me, yet the people seem not to have glimpsed the philosophy of water... Water, like a clear breeze brushing over a wasteland, washes away dust and filth, reviving spirituality... In the baptism of water, I am reborn, transforming into spring returning to the earth, like the melting of ice and snow in March, finally returning to water, like the cycle of life repeating, never exhausted...&quot;<br /> <br /> Whether practicing in the temples of the Chotone Sect or working at the port in the past, Marinaqua often saw the great rivers rushing below the mountains. This sound had lingered in his mind for years. He heard the low chant of waves slapping the shore, feeling the fluctuations of nature and his own rhythm at every moment. He heard the whispers of nature, and this sound became more and more shocking in his heart as his practice and cultivation deepened... Marinaqua knew that what he was feeling was the most primitive and pure rhythm of life... It was the root that nourishes all things, transforming everything with rolling waves of the gentle water.<br /> <br /> Marinaqua's path of practice was laden with the marks of ups and downs and nirvana... For years, Marinaqua walked between the mountains and the great rivers. He often stood alone by the riverbank at the first light of dawn, gazing at the ceaselessly rushing water, realizing the mystery of water's philosophy from it—both soft and resilient, encompassing all phenomena yet hiding profound mysteries.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> Years passed, and the world changed. In decades of life and practice, Marinaqua experienced countless tests of body and soul. Once, on a night that seemed like spring but was suddenly struck by a violent storm, Marinaqua faced the spring tempest alone, realizing the power of life and death changes between sky and eartho; in moments of silence, Marinaqua stood by the water of secluded valleys, listening closely to the low chanting, experiencing the purity of water washing the dust from the heart and reshaping the soul.<br /> <br /> In the decades-long struggle against a harsh fate, on a certain day in D.L.34, fate quietly opened a brand-new phase for Marinaqua...<br /> <br /> That day, the weather changed drastically. Amidst swirling clouds and mist, Marinaqua was meditating and contemplating alone in a secluded practice ground. Just as Marinaqua was fully focused on the exploration of his own soul, suddenly, a strange and powerful force surged toward the direction of his practice, as if coming from the depths of the universe.<br /> <br /> Marinaqua felt uneasy inside. In an instant, stars danced before his eyes, and his mind frantically flashed back to the past — he had worked at the port for 22 years and had practiced cultivation for another 5. Right now, Marinaqua’s practice had entered a bottleneck phase. Past experiences flew at him like sparks, leaving scorching marks on his body and spirit, the stinging pain hitting his nerves directly. &quot;No reconciled... I am not reconciled to stop here!&quot;<br /> <br /> His body, on the verge of collapse, produced a violent rejection reaction. An inexplicable despair irrationally devoured this body that had delved into philosophy and Dorolal for years, pushing him near the edge of breakdown.<br /> <br /> Finally, he was instantly knocked to the ground by this force, falling into a deep coma.<br /> <br /> In his coma, Marinaqua entered a long and mysterious illusion. He seemed to have entered an otherworld beyond the mortal realm — in the boundless waters, lights flowed and colors burst, waves rose and fell, and time and space seemed to freeze. Above his head, a 6-pointed star formed by two inverted triangles overlapping each other rotated ceaselessly, seeming to foreshadow that Marinaqua’s destiny was about to undergo a great change... In the hazy phantoms, a green light gradually emerged before Marinaqua’s eyes, and a human figure slowly revealed itself within the light. That was the Creator God in the Hua Sect faith, also known as the Sole God — &quot;Hua&quot;.<br /> <br /> In human form, Hua approached Marinaqua from the front of his kneeling body. Hua's voice echoed for a long time in the field of Marinaqua’s heart:<br /> <br /> &quot;...Water is birth, death, and reincarnation, changing and impermanent. Only by following the Way of Water can one lead sleeping souls toward regeneration.&quot;<br /> <br /> This revelation pierced Marinaqua’s soul like lightning, cleaving open the spiritual confusion, self-loss, and sense of existential void accumulated in his heart for years. At this moment, he was no longer that struggling and hardworking port worker, nor was he the cultivator trapped in a bottleneck.<br /> <br /> When Marinaqua slowly woke from the illusion, he was no longer his former self... Through this mysterious revelation, Marinaqua felt as if his inner heart had become clearer. He believed he had gained enlightenment and realized where his mission lay. He was determined and willing to devote his life's effort to this.<br /> <br /> Marinaqua decided that he would establish a scripture hall with a doctrine that combined the Hua Sect faith system with the torrent of the new era. Unlike Hua Sect factions such as the Chotone Sect, Marinaqua was going to integrate the mysterious vision he received and the revelations about water from the Hallmod Scripture into his scripture lectures.<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-tlnote&quot;&gt;&lt;span class=&quot;mqc-tllabel&quot;&gt;Terminology ·&lt;/span&gt;<br /> 1. Dorolal: A word from the Pre-Diphic language about the GR series doctrine. It refers to the collective invocation of dao and law.<br /> &lt;/div&gt;<br /> <br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:14px 0;&quot;<br /> |- style=&quot;vertical-align:top;&quot;<br /> | class=&quot;mqc-adj-cell is-disabled&quot; style=&quot;width:40%;&quot; | &lt;span class=&quot;mqc-dir&quot;&gt;← Previous&lt;/span&gt; '''No preceding phase'''<br /> | class=&quot;mqc-index-link&quot; style=&quot;width:20%; vertical-align:middle;&quot; | [[Marinaqua|◈ Index]]<br /> | class=&quot;mqc-adj-cell&quot; style=&quot;width:40%; text-align:right;&quot; | &lt;span class=&quot;mqc-dir&quot;&gt;Next →&lt;/span&gt; '''[[GRA2|Phase 02 · The Scripture Hall]]'''<br /> |}<br /> [[Category:Portfolio Area-Apocrypha-Master Marinaqua, Not Laid to Rest]]</div> PlurimodSU https://en.huijia.fun/index.php?title=Category:Portfolio_Area-Apocrypha&diff=156 Category:Portfolio Area-Apocrypha 2026-07-05T15:43:29Z <p>PlurimodSU: Create the page</p> <hr /> <div>{{Theme-STR}}<br /> This category collects works under [[Portfolio Area]]'s The Apocrypha branch —— the side-story novels within the Verdant Green Revelation series. The Apocrypha works share the same worldview settings as The Thread but employ independent narrative perspectives and prose styles, and can be read independently.<br /> [[Category:Portfolio Area]]</div> PlurimodSU https://en.huijia.fun/index.php?title=Category:Portfolio_Area-Apocrypha-Master_Marinaqua,_Not_Laid_to_Rest&diff=155 Category:Portfolio Area-Apocrypha-Master Marinaqua, Not Laid to Rest 2026-07-05T15:37:36Z <p>PlurimodSU: Create the page</p> <hr /> <div>{{Theme-STR}}<br /> This category collects pages for ''Master Marinaqua, Not Laid to Rest: Silence of His Sect'', a work under the Apocrypha branch of the [[Portfolio Area]].<br /> <br /> Portfolio ID: GRA; Portfolio Hub Page: [[GRA|''Master Marinaqua, Not Laid to Rest'']]<br /> [[Category:Portfolio Area-Apocrypha]]</div> PlurimodSU https://en.huijia.fun/index.php?title=GRA1&diff=154 GRA1 2026-07-05T15:29:50Z <p>PlurimodSU: Edit: Category</p> <hr /> <div>{{Theme-HJ}}<br /> {{#CSS:<br /> .mw-body h1.firstHeading { display: none !important; }<br /> .mqc-phase {<br /> text-align: center;<br /> font-family: 'JetBrains Mono', 'Consolas', monospace;<br /> font-size: 0.8em; letter-spacing: 0.3em; text-transform: uppercase;<br /> opacity: 0.7; margin: 28px 0 6px;<br /> }<br /> .mqc-title {<br /> text-align: center;<br /> font-family: 'Huiwen', 'Lora', serif;<br /> font-size: 2em; line-height: 1.2; font-weight: 700; margin: 0 0 4px;<br /> }<br /> .mqc-title-zh {<br /> display: block; font-size: 0.5em; letter-spacing: 0.12em;<br /> opacity: 0.65; font-weight: 400; margin-top: 8px;<br /> }<br /> .mqc-meta {<br /> text-align: center; margin: 22px 0 0;<br /> font-family: 'JetBrains Mono', monospace;<br /> font-size: 0.72em; letter-spacing: 0.08em; opacity: 0.7;<br /> }<br /> .mqc-rule {<br /> border: 0; height: 1px; margin: 30px auto; width: 70%;<br /> background: linear-gradient(90deg, transparent, currentColor, transparent);<br /> opacity: 0.25;<br /> }<br /> .mqc-epigraph {<br /> margin: 26px auto; padding: 16px 24px; max-width: 75%;<br /> border-left: 2px solid currentColor;<br /> font-style: italic; font-size: 1.05em; opacity: 0.85;<br /> }<br /> .mqc-epigraph .mqc-cite {<br /> display: block; margin-top: 10px; font-style: normal;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.62em;<br /> letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7;<br /> }<br /> .mqc-synopsis {<br /> margin: 24px 0; padding: 18px 22px;<br /> border: 1px solid rgba(0,0,0,0.12); border-radius: 10px;<br /> background: rgba(255,255,255,0.04); font-size: 0.96em; opacity: 0.92;<br /> }<br /> .mqc-synopsis .mqc-label {<br /> display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62em;<br /> letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.65; margin-bottom: 8px;<br /> }<br /> .mqc-body { line-height: 1.85; }<br /> .mqc-body p { text-align: justify; margin: 0 0 1.4em; }<br /> .mqc-body p:first-of-type::first-letter {<br /> float: left; font-size: 3.2em; line-height: 0.8; font-weight: 700;<br /> margin: 0.05em 0.1em 0 0;<br /> }<br /> .mqc-scenebreak {<br /> text-align: center; margin: 28px 0; letter-spacing: 0.4em; opacity: 0.5;<br /> }<br /> .mqc-tlnote {<br /> margin: 24px 0; padding: 14px 18px;<br /> border: 1px dashed rgba(0,0,0,0.18); border-radius: 8px;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.78em; opacity: 0.8;<br /> }<br /> .mqc-tlnote .mqc-tllabel { letter-spacing: 0.2em; opacity: 0.7; }<br /> .mqc-adj .mqc-dir {<br /> display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.6em;<br /> letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.65; margin-bottom: 6px;<br /> }<br /> .mqc-adj-cell {<br /> padding: 16px 20px;<br /> border: 1px solid rgba(0,0,0,0.15); border-radius: 10px;<br /> transition: border-color 0.3s, transform 0.3s;<br /> }<br /> .mqc-adj-cell:hover { transform: translateY(-2px); border-color: currentColor; }<br /> .mqc-adj-cell.is-disabled { opacity: 0.3; }<br /> .mqc-index-link {<br /> text-align: center;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.7em;<br /> letter-spacing: 0.2em; text-transform: uppercase;<br /> }<br /> }}<br /> &lt;div class=&quot;mqc-phase&quot;&gt;VERDANT GREEN REVELATION · The Apocrypha&lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-title&quot;&gt;Master Marinaqua, Not Laid to Rest: Silence of His Sect<br /> <br /> &lt;span class=&quot;mqc-title-zh&quot;&gt;VOLUME I · Phase 1 · Marinaqua's Practice&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-meta&quot;&gt;'''Author''' Marina Malinti&lt;/div&gt;<br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> &lt;div class=&quot;mqc-epigraph&quot;&gt;<br /> ''&quot;Water does not contend, yet nothing in the world can overcome it.&quot;&lt;br&gt;-- The Hallmod Scripture, Chapter of Six Altars''<br /> &lt;span class=&quot;mqc-cite&quot;&gt;Phase 1 opening&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> &lt;div class=&quot;mqc-body&quot;&gt;<br /> <br /> This story, slowly unfolds in a society from over 300 years ago. It was a time of turbulent change and upheaval. As society shifted, religions also emerged one after another in an endless stream.<br /> <br /> The story centers on the Marinaqua Scripture Hall, a newly emerging scripture hall at the time. The doctrine of its lectures was slightly contrary to mainstream religions and underwent a baptism of controversy and challenge at its inception.<br /> <br /> The founder of this sect was a monk known as Marinaqua. He was born into a maritime family that was neither wealthy nor impoverished. &quot;Marinaqua&quot; was not his birth name; rather, it was a religious pseudonym he chose for himself after reading the religious classics of the Hua Sect, combining them with his own experiences and thoughts. From a young age, he showed a strong interest in various religious cultures and read through many religious classics. By chance, he discovered a representative scripture of the Hua Sect—the Hallmod Scripture, belonging to the Green Revelation doctrinal series (abbreviated as &quot;the GR Series&quot;, a collective term for the doctrinal scriptures of the &quot;Hua Sect&quot; religious system. The naming of the Hallmod Scripture is an ancient event. Thousands of years ago, when the Pre-Diphic language was popular, the word &quot;Mo&quot; referred to magic. The word &quot;mod&quot; emerged and came to refer to magic).<br /> <br /> For him, this doctrine was unlike other religious classics; its worldview system and philosophy were incredibly novel and revelatory to him at the time. Unlike other scriptures, although the Hallmod Scripture was a religious book, it largely aimed to delve into philosophical concepts.<br /> <br /> Marinaqua interpreted it this way: &quot;The wisdom of the Hallmod Scripture originates from the most primitive Hua Sect, the 'Proto-Hua Sect'. As a religious system that had existed for thousands of years, during the 'Second Creation Era' when it was prophesied that the world would restart, various branches of the Proto-Hua Sect jointly compiled this comprehensive scripture, which became the origin of the Hallmod Scripture. This scripture, in the end, traces the source of 'Mod (magic)' — the most primitive and pure mysterious power contained in all things. The wild power acting upon the Primordial World is the 'Modclaw'... as well as the respective functions of the six types of holy water — namely, the 'Six Altars Water Law'. In short, it uses water to explain the fundamental philosophy of Mod — The Three Virtues: 'Gentleness, Change, and Constancy'.&quot;<br /> <br /> Because of this, the religious system, Hua Sect, became the religious system he recognized most, and the Hallmod Scripture became the supreme religious classic in his heart.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> During his journey of following the scriptural revelations, Marinaqua’s academic experience was filled with bumps in this unpredictable society. The year S.C.1619 (Second Creation Era 1619) was when Marinaqua prepared to enter the &quot;Senior Departmental Academy,&quot; a degree level that was once considered difficult to attain on the continent. However, a revolution that swept across the entire continent exploded with a crash—the &quot;Dipfield Landing&quot; revolution. In other words, it is a kind of urban enlightenment revolution.&quot;<br /> <br /> In the revolution, this continent named &quot;Dipfietos,&quot; originally divided among six confronting regimes, underwent a fierce game of power. Eventually, the old systems were abolished, and a brand-new order was built upon their ruins, unifying the 6 scattered nations into just 1 massive city — Dipfield Metropolis. The year of the city's unification, S.C.1619, became the start of a new calendar—D.L.0, which refers to the year 0 of the Dipfield Landing revolution.<br /> <br /> Because the torrent of the times was so rapid, the academic landscape was completely reshaped. The low efficiency of the former academic system clearly could not meet the demand for talent in the future following the Dipfield Landing revolution. Old colleges and institutions were either forced to transform or gradually died out. Meanwhile, the concept of the &quot;Independent Academy&quot; began to rise on the continent, viewed as the beacon of wisdom for the future metropolis.<br /> <br /> Fortunately, Marinaqua was very diligent in his studies and became an outstanding scholar. After weighing his options, he applied to the first institution in the metropolis centered on academic autonomy — Dulwich College — and was successfully admitted.<br /> <br /> Dulwich College was located in the southern region of the new &quot;Dipfield Metropolis,&quot; thousands of miles away from Marinaqua’s hometown in the Mount Gya at the easternmost end of the metropolis. This journey of thousands of miles became the first harsh practice of Marinaqua’s life. Over the next month, carrying a book chest filled with academic texts and the complete volume of the Hallmod Scripture, Marinaqua crossed ranges of mountains and passed through dozens of living districts that served as transit stations, finally stepping into the academic heart of this metropolis — the Dulwich Independent Academy Area.<br /> <br /> Marinaqua was shocked by the torrent of the new era — the magnificient towers of the Dulwich Independent Academy Area pierced the clouds, newly invented steam locomotives darted through the streets, and concrete skyscrapers stood in rows like scales. Marinaqua felt a sudden openness, as if he had arrived in a new world.<br /> <br /> Over time, however, while absorbing new knowledge, Marinaqua felt lost and anxious. The exaggerated speed of the city’s transformation was hard for Marinaqua and the masses of the urban society to accept. Any sudden political or technological change felt like a giant palm striking down on the urban society, stirring panic in people's hearts. Marinaqua, as a student, initially harbored a desire to conform to the new era, but he worried anxiously about his major and career direction, almost unable to decide... Amidst the revolution and beneath the prosperity, the individual was only conscious of their own insignificance and incompetence within the great metropolis, terrified of being rejected by the times and ultimately becoming the price of so-called &quot;humanity progress.&quot;<br /> <br /> To cope with negative emotions and cleanse himself, hoping to remain untainted by external negativity, Marinaqua tried to use the wisdom of the Hallmod Scripture to soothe himself and to examine this society full of change. His shock at the city was washed by time into profound contemplation —<br /> <br /> &quot;The rapidness of the urban transformation does not create confusion; confusion stems from forgetting the &quot;''Dorolal''&quot; of why one came...&quot;<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> 8 years later, in the 8th Year of Dipfield Landing Era...<br /> <br /> The 8 years of academic life passed in a flash. Marinaqua obtained his Final Department Degree in Management, completing his studies at the age of 24, becoming a young intellectual. Seeking opportunities for his own development, he stumbled his way into a port management company, spending his days at the harbor accompanied by waves and ship horns.<br /> <br /> For several years, he devoted himself almost entirely to the port, rarely leaving the area. In moments of leisure amidst his busy schedule, he did not forget to make notes and annotations in the Hallmod Scripture he carried, attempting to gain new revelations from it. This job allowed him to meet many people from different backgrounds — he met captains running across the world, merchants skilled in making money, immigrants longing to integrate into the core of the new era, and ordinary sailors forced to work for a livelihood...<br /> <br /> He saw that in the feverish pursuit of ultimate wealth, people became selfish, and relationships with kin became indifferent; he saw more and more high-rises and high-tech facilities appearing in the city, yet as workers' hours grew longer, their welfare was inversely proportional; he saw the elite class talking eloquently about &quot;revolution,&quot; &quot;progress,&quot; and &quot;future,&quot; while often revealing a look of emptiness and anxiety; he also saw monks who were once full of faith and persistent in their practice, lose themselves in the era, unable to suppress the noise in their hearts, stepping onto the path of seeking fame and profit, forgetting the original intention of their practice.<br /> <br /> Marinaqua said, &quot;The Hallmod Scripture states: 'If the practice of the Law collapses, the human heart loses order!' The city at the time expresses the peak of material abundance but can not satisfy the emptiness above, causing an imbalance of the Dorolal! Just like a sturdy ship that knows not its course and destination...&quot;<br /> <br /> Marinaqua realized that the noise of the urban transformation contained questions about where the era was heading. Harboring a sense of his own mission in his heart, he believed deep down that he had determined his direction...<br /> <br /> After more than twenty years of grueling work, around D.L.30, Marinaqua finally saved up a certain amount of capital at the port through frugality. He resigned from his job, moved to the edge of the city, and decided to return to society.<br /> <br /> Decades of time were as rough as the sea breeze, eroding Marinaqua’s body and making him much thinner. Having worked at the port for years, his hands — once agile and good at turning pages and holding pens—were now calloused and cracked from abrasion by cables; the spine of the young man who once stood straight in lecture halls, on podiums, and at interview tables was now increasingly hunched from years of unloading cargo. As for his Final Department Graduate Degree in Management from the academy? In fact, it was rarely put to use — except for leaving a trace of ink on the employment form. The operational suggestions designed for the port by &quot;Scholar&quot; Marinaqua, who had furthered his studies in management, were somehow sealed away at the bottom of a yellowing file bag along with that yellowing degree certificate, unasked for by anyone. His ideas were pale and powerless, ultimately failing to stir even a ripple for this massive port; what remained was only pure hard labor and sweat...<br /> <br /> Goodbye, port! Now, all this pain is over.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> Returning to society, Marinaqua first hoped to find a place where he could silently study and comprehend philosophy. Thus, his first act was to visit the various Hua Sect temples in the city. At that time, most Hua Sect temples belonged to a massive mainstream branch of the Hua Sect — the Chotone Sect.<br /> <br /> Speaking of the Chotone Sect, this faction was like a surging tide in the long history of the Hua Sect. Its founding traces back to the end of the thirteenth century of the Second Creation Era. In that period, the thought of the Proto-Hua Sect was already prevalent in the religious world. However, even the Hua factions considered new at the time had research thoughts largely identical to the Proto-Hua Sect. On this vast land rich in faith, the Chotone Sect was like a new sprout breaking through the soil, born quietly. Its founder fused ancient wisdom with modern views of that era, creating a masterpiece that adhered to the times and shone with the light of the age in the history of the Hua Sect — the Unified Sphere Revelation, which was born as the core doctrine of the Chotone Sect. It inherited the essence of the Proto-Hua Sect while integrating the sparks of thought from the new era.<br /> <br /> Marinaqua was attracted by this tide that had once led religion. Therefore, after deliberation, he chose to become a monk converted to the Chotone Sect. within a very short time, he read through almost all the doctrinal works of the Unified Sphere Revelation in detail, his inner self resonating with the influence of the Chotone Sect trend — the more he studied it, the more he could feel its charm.<br /> <br /> However, over years of time again, Marinaqua always felt something was missing in his heart...<br /> <br /> Marinaqua believed that although the Chotone Sect was inclusive, it failed to carry forward the fundamental philosophy of &quot;Gentleness, Change, and Constancy&quot; contained in the &quot;Six Altars Water Law&quot; that is pointed in the Hallmod Scripture of GR Series of Hua Sect. It placed too much emphasis on the changes and evolution of the times, but neglecting the gentle side of all things.<br /> <br /> Marinaqua said: &quot;The core philosophy of the Hallmod Scripture, in the end, is — Gentleness, Change, and Constancy. This coincides perfectly with the imagery of 'Water'.&quot;<br /> <br /> &quot;The imagery of water really fascinates me, yet the people seem not to have glimpsed the philosophy of water... Water, like a clear breeze brushing over a wasteland, washes away dust and filth, reviving spirituality... In the baptism of water, I am reborn, transforming into spring returning to the earth, like the melting of ice and snow in March, finally returning to water, like the cycle of life repeating, never exhausted...&quot;<br /> <br /> Whether practicing in the temples of the Chotone Sect or working at the port in the past, Marinaqua often saw the great rivers rushing below the mountains. This sound had lingered in his mind for years. He heard the low chant of waves slapping the shore, feeling the fluctuations of nature and his own rhythm at every moment. He heard the whispers of nature, and this sound became more and more shocking in his heart as his practice and cultivation deepened... Marinaqua knew that what he was feeling was the most primitive and pure rhythm of life... It was the root that nourishes all things, transforming everything with rolling waves of the gentle water.<br /> <br /> Marinaqua's path of practice was laden with the marks of ups and downs and nirvana... For years, Marinaqua walked between the mountains and the great rivers. He often stood alone by the riverbank at the first light of dawn, gazing at the ceaselessly rushing water, realizing the mystery of water's philosophy from it—both soft and resilient, encompassing all phenomena yet hiding profound mysteries.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> Years passed, and the world changed. In decades of life and practice, Marinaqua experienced countless tests of body and soul. Once, on a night that seemed like spring but was suddenly struck by a violent storm, Marinaqua faced the spring tempest alone, realizing the power of life and death changes between sky and eartho; in moments of silence, Marinaqua stood by the water of secluded valleys, listening closely to the low chanting, experiencing the purity of water washing the dust from the heart and reshaping the soul.<br /> <br /> In the decades-long struggle against a harsh fate, on a certain day in D.L.34, fate quietly opened a brand-new phase for Marinaqua...<br /> <br /> That day, the weather changed drastically. Amidst swirling clouds and mist, Marinaqua was meditating and contemplating alone in a secluded practice ground. Just as Marinaqua was fully focused on the exploration of his own soul, suddenly, a strange and powerful force surged toward the direction of his practice, as if coming from the depths of the universe.<br /> <br /> Marinaqua felt uneasy inside. In an instant, stars danced before his eyes, and his mind frantically flashed back to the past — he had worked at the port for 22 years and had practiced cultivation for another 5. Right now, Marinaqua’s practice had entered a bottleneck phase. Past experiences flew at him like sparks, leaving scorching marks on his body and spirit, the stinging pain hitting his nerves directly. &quot;No reconciled... I am not reconciled to stop here!&quot;<br /> <br /> His body, on the verge of collapse, produced a violent rejection reaction. An inexplicable despair irrationally devoured this body that had delved into philosophy and Dorolal for years, pushing him near the edge of breakdown.<br /> <br /> Finally, he was instantly knocked to the ground by this force, falling into a deep coma.<br /> <br /> In his coma, Marinaqua entered a long and mysterious illusion. He seemed to have entered an otherworld beyond the mortal realm — in the boundless waters, lights flowed and colors burst, waves rose and fell, and time and space seemed to freeze. Above his head, a 6-pointed star formed by two inverted triangles overlapping each other rotated ceaselessly, seeming to foreshadow that Marinaqua’s destiny was about to undergo a great change... In the hazy phantoms, a green light gradually emerged before Marinaqua’s eyes, and a human figure slowly revealed itself within the light. That was the Creator God in the Hua Sect faith, also known as the Sole God — &quot;Hua&quot;.<br /> <br /> In human form, Hua approached Marinaqua from the front of his kneeling body. Hua's voice echoed for a long time in the field of Marinaqua’s heart:<br /> <br /> &quot;...Water is birth, death, and reincarnation, changing and impermanent. Only by following the Way of Water can one lead sleeping souls toward regeneration.&quot;<br /> <br /> This revelation pierced Marinaqua’s soul like lightning, cleaving open the spiritual confusion, self-loss, and sense of existential void accumulated in his heart for years. At this moment, he was no longer that struggling and hardworking port worker, nor was he the cultivator trapped in a bottleneck.<br /> <br /> When Marinaqua slowly woke from the illusion, he was no longer his former self... Through this mysterious revelation, Marinaqua felt as if his inner heart had become clearer. He believed he had gained enlightenment and realized where his mission lay. He was determined and willing to devote his life's effort to this.<br /> <br /> Marinaqua decided that he would establish a scripture hall with a doctrine that combined the Hua Sect faith system with the torrent of the new era. Unlike Hua Sect factions such as the Chotone Sect, Marinaqua was going to integrate the mysterious vision he received and the revelations about water from the Hallmod Scripture into his scripture lectures.<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-tlnote&quot;&gt;&lt;span class=&quot;mqc-tllabel&quot;&gt;Terminology ·&lt;/span&gt;<br /> 1. Dorolal: A word from the Pre-Diphic language about the GR series doctrine. It refers to the collective invocation of dao and law.<br /> &lt;/div&gt;<br /> <br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:14px 0;&quot;<br /> |- style=&quot;vertical-align:top;&quot;<br /> | class=&quot;mqc-adj-cell is-disabled&quot; style=&quot;width:40%;&quot; | &lt;span class=&quot;mqc-dir&quot;&gt;← Previous&lt;/span&gt; '''No preceding phase'''<br /> | class=&quot;mqc-index-link&quot; style=&quot;width:20%; vertical-align:middle;&quot; | [[Marinaqua|◈ Index]]<br /> | class=&quot;mqc-adj-cell&quot; style=&quot;width:40%; text-align:right;&quot; | &lt;span class=&quot;mqc-dir&quot;&gt;Next →&lt;/span&gt; '''[[GRA2|Phase 02 · The Scripture Hall]]'''<br /> |}<br /> [[Category:Portfolio Area-Apocrypha-Master Marinaqua, Not Laid to Rest]]</div> PlurimodSU https://en.huijia.fun/index.php?title=GRA&diff=153 GRA 2026-07-05T15:29:26Z <p>PlurimodSU: Category</p> <hr /> <div>&lt;!-- ============================================================ --&gt;<br /> &lt;!-- MASTER MARINAQUA, NOT LAID TO REST: SILENCE OF HIS SECT --&gt;<br /> &lt;!-- Chapter-Navigation Hub · EN HUIJIA FUN --&gt;<br /> &lt;!-- (A) Timeless skin overrides (B) #vgr-marinaqua-nav --&gt;<br /> &lt;!-- ============================================================ --&gt;<br /> <br /> &lt;html&gt;<br /> &lt;div id=&quot;vgr-marinaqua-nav&quot;&gt;<br /> <br /> &lt;style&gt;<br /> @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&amp;family=Lora:ital,wght@0,400;0,700;1,400&amp;family=Montserrat:wght@600;800&amp;display=swap');<br /> <br /> :root {<br /> --mq-abyss:#03171f; --mq-deep:#07303a; --mq-tide:#0d4f5c;<br /> --mq-blue:#98C1C0; --mq-jade:#2fb89a; --mq-jade-dim:#1c7d6e;<br /> --mq-mist:#98C1C0; --mq-pale:#e7f6f3; --mq-locked:#426a72;<br /> --mq-radius:14px;<br /> --mq-serif:'Lora',serif; --mq-display:'Montserrat',sans-serif; --mq-mono:'JetBrains Mono',monospace;<br /> }<br /> <br /> /* ===== (A) SKIN OVERRIDES ===== */<br /> <br /> /* canvas */<br /> html, body, #mw-content-block, #mw-content-wrapper, .mw-body,<br /> .mw-wiki-logo, #mw-header-container {<br /> background-color: var(--mq-abyss) !important;<br /> }<br /> html, body {<br /> background-image:<br /> radial-gradient(140% 90% at 50% -10%, #0a3a45 0%, transparent 55%),<br /> linear-gradient(180deg, var(--mq-abyss) 0%, #062731 50%, var(--mq-abyss) 100%) !important;<br /> color: var(--mq-mist) !important;<br /> }<br /> <br /> /* top bar */<br /> #mw-header-container, .mw-header, #mw-header-nav-hack, #mw-header {<br /> background: linear-gradient(180deg, #062b34 0%, var(--mq-abyss) 100%) !important;<br /> border-bottom: 1px solid rgba(47,184,154,0.22) !important;<br /> color: var(--mq-mist) !important;<br /> }<br /> @media screen and (min-width: 1100px) {<br /> #mw-content-container { margin-top: 48px !important; }<br /> }<br /> <br /> /* site title + icons */<br /> .mw-wiki-logo, #p-logo-text a, .mw-logo-container, #mw-header .mw-portlet-logo a, h1#firstHeading {<br /> color: var(--mq-jade) !important;<br /> }<br /> #mw-header .mw-ui-icon::before, #personal .mw-ui-icon::before {<br /> filter: invert(0.9) hue-rotate(120deg) saturate(0.6) !important;<br /> }<br /> <br /> /* sidebar font */<br /> #mw-related-navigation span, #mw-site-navigation span, .sidebar-inner li a:before { color: var(--mq-mist) !important; }<br /> <br /> /* left sidebar */<br /> #mw-site-navigation, #mw-related-navigation, .sidebar-chunk, .mw-portlet, #site-navigation, #site-tools {<br /> background-color: transparent !important;<br /> color: var(--mq-mist) !important;<br /> }<br /> .sidebar-chunk {<br /> background-color: rgba(7,48,58,0.45) !important;<br /> border: 1px solid rgba(47,184,154,0.18) !important;<br /> border-radius: var(--mq-radius) !important;<br /> }<br /> #mw-panel a, .sidebar-chunk a, #mw-site-navigation a, #mw-related-navigation a, .mw-portlet a {<br /> color: var(--mq-mist) !important;<br /> }<br /> #mw-panel a:hover, .sidebar-chunk a:hover, .mw-portlet a:hover { color: var(--mq-jade) !important; }<br /> #mw-panel .mw-ui-icon::before, .sidebar-chunk .mw-ui-icon::before {<br /> filter: invert(0.85) sepia(1) hue-rotate(120deg) saturate(2.2) !important;<br /> }<br /> .sidebar-chunk h2, #mw-panel h3, .portal h3, .vector-menu-heading, .mw-portlet h3 {<br /> color: var(--mq-jade) !important;<br /> border-bottom: 1px solid rgba(47,184,154,0.22) !important;<br /> }<br /> <br /> /* right rail */<br /> #mw-related-navigation, .mw-body-after-content, #right-navigation, .page-tools, .mw-portlet-tb {<br /> background-color: transparent !important;<br /> }<br /> .mw-body-after-content .sidebar-chunk, #mw-related-navigation .sidebar-chunk {<br /> background-color: rgba(7,48,58,0.45) !important;<br /> }<br /> <br /> /* content card */<br /> #mw-content {<br /> background-color: #03171F !important;<br /> background-image: none !important;<br /> border: 1px solid rgba(47,184,154,0.20) !important;<br /> box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important;<br /> backdrop-filter: blur(3px);<br /> color: var(--mq-mist) !important;<br /> }<br /> #mw-content h1, #mw-content h2, #mw-content .firstHeading, .mw-body h1.firstHeading {<br /> color: var(--mq-jade) !important;<br /> border-bottom-color: rgba(47,184,154,0.25) !important;<br /> }<br /> #mw-content h1.firstHeading::before { color: var(--mq-blue) !important; }<br /> #mw-content a { color: var(--mq-blue) !important; }<br /> #mw-content a:hover { color: var(--mq-jade) !important; }<br /> #mw-content .previewnote, #mw-content .mw-message-box, #mw-content div[class*=&quot;preview&quot;] {<br /> background-color: rgba(31,143,176,0.10) !important;<br /> border: 1px solid rgba(47,184,154,0.30) !important;<br /> color: var(--mq-mist) !important;<br /> border-radius: var(--mq-radius) !important;<br /> }<br /> .mw-body h1.firstHeading { display: none !important; }<br /> <br /> /* footer */<br /> .mw-footer-container { background-color: var(--mq-abyss) !important; }<br /> .mw-footer-container a { color: var(--mq-mist) !important; }<br /> <br /> /* ===== (B) COMPONENT ===== */<br /> <br /> #vgr-marinaqua-nav {<br /> position: relative; margin: -25px -30px 0 -30px; padding: 0;<br /> color: var(--mq-mist); font-family: var(--mq-serif); line-height: 1.75;<br /> border-radius: var(--mq-radius); overflow: hidden;<br /> background:<br /> radial-gradient(120% 80% at 50% -8%, #0d5260 0%, transparent 55%),<br /> linear-gradient(180deg, var(--mq-abyss) 0%, #073039 42%, var(--mq-abyss) 100%);<br /> box-shadow: inset 0 0 140px rgba(0,0,0,0.7);<br /> }<br /> <br /> #vgr-marinaqua-nav .mq-ripple {<br /> position: absolute; inset: 0; pointer-events: none; opacity: 0.4;<br /> background:<br /> repeating-radial-gradient(circle at 38% 14%, rgba(31,143,176,0.06) 0px, rgba(31,143,176,0.06) 2px, transparent 3px, transparent 64px),<br /> repeating-radial-gradient(circle at 66% 20%, rgba(47,184,154,0.05) 0px, rgba(47,184,154,0.05) 2px, transparent 3px, transparent 80px);<br /> animation: mq-breathe 16s ease-in-out infinite;<br /> }<br /> @keyframes mq-breathe { 0%,100%{transform:scale(1);opacity:.32} 50%{transform:scale(1.07);opacity:.5} }<br /> <br /> /* header */<br /> #vgr-marinaqua-nav .mq-header { position: relative; z-index: 2; text-align: center; padding: 72px 28px 50px; }<br /> #vgr-marinaqua-nav .mq-eyebrow {<br /> font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.45em;<br /> text-transform: uppercase; color: var(--mq-jade); opacity: 0.85; margin: 0 0 18px; padding-left: 0.45em;<br /> }<br /> #vgr-marinaqua-nav .mq-title {<br /> font-family: var(--mq-display); font-weight: 800; font-size: clamp(1.8em,4.4vw,3em);<br /> line-height: 1.1; letter-spacing: -0.01em; margin: 0;<br /> background: linear-gradient(110deg, var(--mq-pale) 10%, var(--mq-jade) 55%, var(--mq-blue) 100%);<br /> -webkit-background-clip: text; background-clip: text; color: transparent;<br /> text-shadow: 0 0 34px rgba(47,184,154,0.25);<br /> }<br /> #vgr-marinaqua-nav .mq-title .mq-sub {<br /> display: block; font-weight: 600; font-size: 0.46em; letter-spacing: 0.06em; margin-top: 16px;<br /> color: var(--mq-mist); -webkit-text-fill-color: var(--mq-mist); opacity: 0.92;<br /> }<br /> #vgr-marinaqua-nav .mq-glyph {<br /> display: block; margin: 28px auto 0; width: 72px; height: 1px; position: relative;<br /> background: linear-gradient(90deg, transparent, var(--mq-jade), transparent);<br /> }<br /> #vgr-marinaqua-nav .mq-glyph::after {<br /> content: &quot;◈&quot;; position: absolute; top: -0.8em; left: 50%; transform: translateX(-50%);<br /> color: var(--mq-jade); padding: 0 10px; font-size: 0.9em;<br /> }<br /> <br /> /* epigraph */<br /> #vgr-marinaqua-nav .mq-epigraph {<br /> position: relative; z-index: 2; max-width: 580px; margin: 0 auto 46px; padding: 0 32px;<br /> text-align: center; font-style: italic; font-size: 1.05em; color: var(--mq-mist); opacity: 0.8;<br /> }<br /> <br /> /* progress meter */<br /> #vgr-marinaqua-nav .mq-meter {<br /> position: relative; z-index: 2; max-width: 620px; margin: 0 auto 58px; padding: 0 32px;<br /> font-family: var(--mq-mono); font-size: 0.74em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mq-jade);<br /> }<br /> #vgr-marinaqua-nav .mq-meter-label { display: flex; justify-content: space-between; margin-bottom: 8px; opacity: 0.85; }<br /> #vgr-marinaqua-nav .mq-meter-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }<br /> #vgr-marinaqua-nav .mq-meter-fill {<br /> height: 100%; width: 0; border-radius: 4px;<br /> background: linear-gradient(90deg, var(--mq-blue), var(--mq-jade));<br /> box-shadow: 0 0 12px var(--mq-jade); transition: width 1.7s cubic-bezier(0.16,1,0.3,1);<br /> }<br /> <br /> /* list + volume groups */<br /> #vgr-marinaqua-nav .mq-list {<br /> position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px;<br /> max-width: 880px; margin: 0 auto; padding: 0 28px 16px;<br /> }<br /> #vgr-marinaqua-nav .mq-volume {<br /> display: flex; align-items: center; gap: 16px; margin: 26px 4px 6px;<br /> font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mq-jade);<br /> }<br /> #vgr-marinaqua-nav .mq-volume:first-child { margin-top: 4px; }<br /> #vgr-marinaqua-nav .mq-volume::before { content: &quot;❖&quot;; color: var(--mq-blue); font-size: 1.1em; }<br /> #vgr-marinaqua-nav .mq-volume::after { content: &quot;&quot;; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(47,184,154,0.4), transparent); }<br /> #vgr-marinaqua-nav .mq-volume .mq-vol-sub { letter-spacing: 0.12em; color: var(--mq-jade-dim); margin-left: -6px; }<br /> <br /> #vgr-marinaqua-nav .mq-row {<br /> position: relative; display: flex; align-items: center; gap: 22px; padding: 20px 26px;<br /> border-radius: var(--mq-radius); border: 1px solid rgba(47,184,154,0.18);<br /> background: linear-gradient(100deg, rgba(13,79,92,0.5), rgba(3,23,31,0.55));<br /> backdrop-filter: blur(2px); text-decoration: none !important; color: inherit; overflow: hidden;<br /> transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.4s ease;<br /> }<br /> #vgr-marinaqua-nav .mq-row .mq-index {<br /> flex: 0 0 auto; width: 58px; text-align: center; line-height: 1;<br /> font-family: var(--mq-mono); font-weight: 700; font-size: 1.4em; color: var(--mq-blue);<br /> border-right: 1px solid rgba(47,184,154,0.18); padding-right: 18px;<br /> }<br /> #vgr-marinaqua-nav .mq-row .mq-body { flex: 1 1 auto; min-width: 0; }<br /> #vgr-marinaqua-nav .mq-row .mq-phase {<br /> font-family: var(--mq-mono); font-size: 0.64em; letter-spacing: 0.22em;<br /> text-transform: uppercase; color: var(--mq-jade-dim); display: block; margin-bottom: 6px;<br /> }<br /> #vgr-marinaqua-nav .mq-row .mq-name {<br /> font-family: var(--mq-display); font-weight: 600; font-size: 1.12em; color: var(--mq-pale);<br /> line-height: 1.3; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;<br /> }<br /> #vgr-marinaqua-nav .mq-row .mq-status {<br /> flex: 0 0 auto; font-family: var(--mq-mono); font-size: 0.64em; letter-spacing: 0.16em;<br /> text-transform: uppercase; opacity: 0.72; white-space: nowrap;<br /> }<br /> #vgr-marinaqua-nav .mq-row.is-open:hover {<br /> transform: translateX(6px); border-color: var(--mq-jade);<br /> box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 22px rgba(47,184,154,0.25);<br /> }<br /> #vgr-marinaqua-nav .mq-row.is-open::before {<br /> content: &quot;&quot;; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;<br /> background: linear-gradient(100deg, transparent, rgba(47,184,154,0.10), transparent); transition: left 0.7s ease;<br /> }<br /> #vgr-marinaqua-nav .mq-row.is-open:hover::before { left: 160%; }<br /> #vgr-marinaqua-nav .mq-row.is-open .mq-index, #vgr-marinaqua-nav .mq-row.is-open .mq-status { color: var(--mq-jade); }<br /> #vgr-marinaqua-nav .mq-row.is-locked {<br /> border-color: rgba(66,106,114,0.22);<br /> background: linear-gradient(100deg, rgba(7,48,58,0.3), rgba(3,23,31,0.42)); cursor: default;<br /> }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-index { color: var(--mq-locked); border-right-color: rgba(66,106,114,0.18); }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-name { color: var(--mq-locked); filter: blur(0.4px); }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-phase { color: var(--mq-jade-dim); opacity: 0.5; }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-status { color: var(--mq-locked); }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-status::after { content: &quot; 🌊&quot;; opacity: 0.3; filter: grayscale(0.4); }<br /> <br /> /* coming soon */<br /> #vgr-marinaqua-nav .mq-comingsoon {<br /> position: relative; z-index: 2; margin: 44px 0 0; padding: 96px 28px 116px; text-align: center;<br /> background:<br /> radial-gradient(120% 140% at 50% 120%, #05242c 0%, transparent 60%),<br /> linear-gradient(180deg, transparent, var(--mq-abyss) 70%);<br /> }<br /> #vgr-marinaqua-nav .mq-cs-word {<br /> font-family: var(--mq-display); font-weight: 800; font-size: clamp(2em,7vw,4.6em);<br /> letter-spacing: 0.18em; text-transform: uppercase; margin: 0; color: transparent;<br /> background: linear-gradient(180deg, var(--mq-jade) 0%, var(--mq-blue) 60%, var(--mq-deep) 130%);<br /> -webkit-background-clip: text; background-clip: text; opacity: 0.55; animation: mq-fade 7s ease-in-out infinite;<br /> }<br /> @keyframes mq-fade { 0%,100%{opacity:.35;letter-spacing:.18em} 50%{opacity:.7;letter-spacing:.24em} }<br /> #vgr-marinaqua-nav .mq-cs-note {<br /> margin-top: 22px; font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.3em;<br /> text-transform: uppercase; color: var(--mq-jade-dim); opacity: 0.8;<br /> }<br /> <br /> /* reveal */<br /> #vgr-marinaqua-nav .mq-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }<br /> #vgr-marinaqua-nav .mq-reveal.is-visible { opacity: 1; transform: translateY(0); }<br /> <br /> /* mobile */<br /> @media screen and (max-width: 850px) {<br /> #vgr-marinaqua-nav { margin: -15px -15px 0 -15px; }<br /> #vgr-marinaqua-nav .mq-header { padding: 48px 20px 34px; }<br /> #vgr-marinaqua-nav .mq-list { padding: 0 16px 12px; }<br /> #vgr-marinaqua-nav .mq-row { gap: 14px; padding: 16px 18px; }<br /> #vgr-marinaqua-nav .mq-row .mq-index { width: 38px; font-size: 1.1em; padding-right: 12px; }<br /> #vgr-marinaqua-nav .mq-row .mq-status { display: none; }<br /> #vgr-marinaqua-nav .mq-comingsoon { padding: 64px 18px 84px; }<br /> }<br /> @media (prefers-reduced-motion: reduce) {<br /> #vgr-marinaqua-nav .mq-ripple, #vgr-marinaqua-nav .mq-cs-word { animation: none; }<br /> #vgr-marinaqua-nav .mq-reveal { opacity: 1; transform: none; transition: none; }<br /> }<br /> &lt;/style&gt;<br /> <br /> &lt;!-- markup --&gt;<br /> &lt;div class=&quot;mq-ripple&quot;&gt;&lt;/div&gt;<br /> <br /> &lt;header class=&quot;mq-header&quot;&gt;<br /> &lt;p class=&quot;mq-eyebrow&quot;&gt;Verdant Green Revelation · The Apocrypha&lt;/p&gt;<br /> &lt;h1 class=&quot;mq-title&quot;&gt;<br /> Master Marinaqua, Not Laid to Rest<br /> &lt;span class=&quot;mq-sub&quot;&gt;Silence of His Sect&lt;/span&gt;<br /> &lt;/h1&gt;<br /> &lt;/header&gt;<br /> &lt;span class=&quot;mq-glyph&quot;&gt;&lt;/span&gt;<br /> &lt;blockquote class=&quot;mq-epigraph&quot;&gt;<br /> He did not die so much as fall quiet - and the quiet, in turn, became a doctrine.<br /> &lt;/blockquote&gt;<br /> <br /> &lt;div class=&quot;mq-meter mq-reveal&quot;&gt;<br /> &lt;div class=&quot;mq-meter-label&quot;&gt;&lt;span&gt;Translation Progress&lt;/span&gt;&lt;span&gt;3 / 16&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;mq-meter-track&quot;&gt;&lt;div class=&quot;mq-meter-fill&quot; data-fill=&quot;18.75&quot;&gt;&lt;/div&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;nav class=&quot;mq-list&quot;&gt;<br /> <br /> &lt;!-- Volume I · Phases 1–5 --&gt;<br /> &lt;div class=&quot;mq-volume mq-reveal&quot;&gt;Volume I &lt;span class=&quot;mq-vol-sub&quot;&gt;· Phases 1–5&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;a class=&quot;mq-row is-open mq-reveal&quot; href=&quot;/GRA1&quot;&gt;<br /> &lt;span class=&quot;mq-index&quot;&gt;01&lt;/span&gt;<br /> &lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 1&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;Marinaqua's Practice&lt;/p&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-status&quot;&gt;▸ Read now&lt;/span&gt;<br /> &lt;/a&gt;<br /> &lt;a class=&quot;mq-row is-open mq-reveal&quot; href=&quot;/GRA2&quot;&gt;<br /> &lt;span class=&quot;mq-index&quot;&gt;02&lt;/span&gt;<br /> &lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 2&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;The Scripture Hall&lt;/p&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-status&quot;&gt;▸ Read now&lt;/span&gt;<br /> &lt;/a&gt;<br /> &lt;a class=&quot;mq-row is-open mq-reveal&quot; href=&quot;/GRA3&quot;&gt;<br /> &lt;span class=&quot;mq-index&quot;&gt;03&lt;/span&gt;<br /> &lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 3&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;The Hallmod Temple&lt;/p&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-status&quot;&gt;▸ Read now&lt;/span&gt;<br /> &lt;/a&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;04&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 4&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;05&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 5&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;!-- Volume II · Phases 6–14 --&gt;<br /> &lt;div class=&quot;mq-volume mq-reveal&quot;&gt;Volume II &lt;span class=&quot;mq-vol-sub&quot;&gt;· Phases 6–14&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;06&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 6&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;07&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 7&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;08&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 8&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;09&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 9&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 10&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;11&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 11&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;12&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 12&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;13&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 13&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;14&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 14&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;!-- Volume III · Phases 15–16 --&gt;<br /> &lt;div class=&quot;mq-volume mq-reveal&quot;&gt;Volume III &lt;span class=&quot;mq-vol-sub&quot;&gt;· Phases 15–16&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;15&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 15&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;16&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 16&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;/nav&gt;<br /> <br /> &lt;section class=&quot;mq-comingsoon&quot;&gt;<br /> &lt;p class=&quot;mq-cs-word&quot;&gt;Coming Soon&lt;/p&gt;<br /> &lt;p class=&quot;mq-cs-note&quot;&gt;Marina Malinti · a@huijia.fun&lt;/p&gt;<br /> &lt;/section&gt;<br /> <br /> &lt;script&gt;<br /> (function(){<br /> &quot;use strict&quot;;<br /> var root = document.getElementById(&quot;vgr-marinaqua-nav&quot;);<br /> if(!root) return;<br /> function run(){<br /> var reveals = root.querySelectorAll(&quot;.mq-reveal&quot;);<br /> if(&quot;IntersectionObserver&quot; in window){<br /> var io = new IntersectionObserver(function(es){<br /> es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(&quot;is-visible&quot;); io.unobserve(e.target); } });<br /> }, {threshold:0.08});<br /> reveals.forEach(function(el){ io.observe(el); });<br /> } else {<br /> reveals.forEach(function(el){ el.classList.add(&quot;is-visible&quot;); });<br /> }<br /> var fill = root.querySelector(&quot;.mq-meter-fill&quot;);<br /> if(fill){ setTimeout(function(){ fill.style.width = (fill.getAttribute(&quot;data-fill&quot;)||&quot;0&quot;) + &quot;%&quot;; }, 400); }<br /> }<br /> if(document.readyState === &quot;loading&quot;){ document.addEventListener(&quot;DOMContentLoaded&quot;, run); }<br /> else { run(); }<br /> })();<br /> &lt;/script&gt;<br /> <br /> &lt;/div&gt;<br /> &lt;/html&gt;<br /> [[Category:Portfolio Area-Apocrypha]]</div> PlurimodSU https://en.huijia.fun/index.php?title=GRA1&diff=152 GRA1 2026-07-05T05:09:02Z <p>PlurimodSU: Edit</p> <hr /> <div>{{Theme-HJ}}<br /> {{#CSS:<br /> .mw-body h1.firstHeading { display: none !important; }<br /> .mqc-phase {<br /> text-align: center;<br /> font-family: 'JetBrains Mono', 'Consolas', monospace;<br /> font-size: 0.8em; letter-spacing: 0.3em; text-transform: uppercase;<br /> opacity: 0.7; margin: 28px 0 6px;<br /> }<br /> .mqc-title {<br /> text-align: center;<br /> font-family: 'Huiwen', 'Lora', serif;<br /> font-size: 2em; line-height: 1.2; font-weight: 700; margin: 0 0 4px;<br /> }<br /> .mqc-title-zh {<br /> display: block; font-size: 0.5em; letter-spacing: 0.12em;<br /> opacity: 0.65; font-weight: 400; margin-top: 8px;<br /> }<br /> .mqc-meta {<br /> text-align: center; margin: 22px 0 0;<br /> font-family: 'JetBrains Mono', monospace;<br /> font-size: 0.72em; letter-spacing: 0.08em; opacity: 0.7;<br /> }<br /> .mqc-rule {<br /> border: 0; height: 1px; margin: 30px auto; width: 70%;<br /> background: linear-gradient(90deg, transparent, currentColor, transparent);<br /> opacity: 0.25;<br /> }<br /> .mqc-epigraph {<br /> margin: 26px auto; padding: 16px 24px; max-width: 75%;<br /> border-left: 2px solid currentColor;<br /> font-style: italic; font-size: 1.05em; opacity: 0.85;<br /> }<br /> .mqc-epigraph .mqc-cite {<br /> display: block; margin-top: 10px; font-style: normal;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.62em;<br /> letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7;<br /> }<br /> .mqc-synopsis {<br /> margin: 24px 0; padding: 18px 22px;<br /> border: 1px solid rgba(0,0,0,0.12); border-radius: 10px;<br /> background: rgba(255,255,255,0.04); font-size: 0.96em; opacity: 0.92;<br /> }<br /> .mqc-synopsis .mqc-label {<br /> display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62em;<br /> letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.65; margin-bottom: 8px;<br /> }<br /> .mqc-body { line-height: 1.85; }<br /> .mqc-body p { text-align: justify; margin: 0 0 1.4em; }<br /> .mqc-body p:first-of-type::first-letter {<br /> float: left; font-size: 3.2em; line-height: 0.8; font-weight: 700;<br /> margin: 0.05em 0.1em 0 0;<br /> }<br /> .mqc-scenebreak {<br /> text-align: center; margin: 28px 0; letter-spacing: 0.4em; opacity: 0.5;<br /> }<br /> .mqc-tlnote {<br /> margin: 24px 0; padding: 14px 18px;<br /> border: 1px dashed rgba(0,0,0,0.18); border-radius: 8px;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.78em; opacity: 0.8;<br /> }<br /> .mqc-tlnote .mqc-tllabel { letter-spacing: 0.2em; opacity: 0.7; }<br /> .mqc-adj .mqc-dir {<br /> display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.6em;<br /> letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.65; margin-bottom: 6px;<br /> }<br /> .mqc-adj-cell {<br /> padding: 16px 20px;<br /> border: 1px solid rgba(0,0,0,0.15); border-radius: 10px;<br /> transition: border-color 0.3s, transform 0.3s;<br /> }<br /> .mqc-adj-cell:hover { transform: translateY(-2px); border-color: currentColor; }<br /> .mqc-adj-cell.is-disabled { opacity: 0.3; }<br /> .mqc-index-link {<br /> text-align: center;<br /> font-family: 'JetBrains Mono', monospace; font-size: 0.7em;<br /> letter-spacing: 0.2em; text-transform: uppercase;<br /> }<br /> }}<br /> &lt;div class=&quot;mqc-phase&quot;&gt;VERDANT GREEN REVELATION · The Apocrypha&lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-title&quot;&gt;Master Marinaqua, Not Laid to Rest: Silence of His Sect<br /> <br /> &lt;span class=&quot;mqc-title-zh&quot;&gt;VOLUME I · Phase 1 · Marinaqua's Practice&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-meta&quot;&gt;'''Author''' Marina Malinti&lt;/div&gt;<br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> &lt;div class=&quot;mqc-epigraph&quot;&gt;<br /> ''&quot;Water does not contend, yet nothing in the world can overcome it.&quot;&lt;br&gt;-- The Hallmod Scripture, Chapter of Six Altars''<br /> &lt;span class=&quot;mqc-cite&quot;&gt;Phase 1 opening&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> &lt;div class=&quot;mqc-body&quot;&gt;<br /> <br /> This story, slowly unfolds in a society from over 300 years ago. It was a time of turbulent change and upheaval. As society shifted, religions also emerged one after another in an endless stream.<br /> <br /> The story centers on the Marinaqua Scripture Hall, a newly emerging scripture hall at the time. The doctrine of its lectures was slightly contrary to mainstream religions and underwent a baptism of controversy and challenge at its inception.<br /> <br /> The founder of this sect was a monk known as Marinaqua. He was born into a maritime family that was neither wealthy nor impoverished. &quot;Marinaqua&quot; was not his birth name; rather, it was a religious pseudonym he chose for himself after reading the religious classics of the Hua Sect, combining them with his own experiences and thoughts. From a young age, he showed a strong interest in various religious cultures and read through many religious classics. By chance, he discovered a representative scripture of the Hua Sect—the Hallmod Scripture, belonging to the Green Revelation doctrinal series (abbreviated as &quot;the GR Series&quot;, a collective term for the doctrinal scriptures of the &quot;Hua Sect&quot; religious system. The naming of the Hallmod Scripture is an ancient event. Thousands of years ago, when the Pre-Diphic language was popular, the word &quot;Mo&quot; referred to magic. The word &quot;mod&quot; emerged and came to refer to magic).<br /> <br /> For him, this doctrine was unlike other religious classics; its worldview system and philosophy were incredibly novel and revelatory to him at the time. Unlike other scriptures, although the Hallmod Scripture was a religious book, it largely aimed to delve into philosophical concepts.<br /> <br /> Marinaqua interpreted it this way: &quot;The wisdom of the Hallmod Scripture originates from the most primitive Hua Sect, the 'Proto-Hua Sect'. As a religious system that had existed for thousands of years, during the 'Second Creation Era' when it was prophesied that the world would restart, various branches of the Proto-Hua Sect jointly compiled this comprehensive scripture, which became the origin of the Hallmod Scripture. This scripture, in the end, traces the source of 'Mod (magic)' — the most primitive and pure mysterious power contained in all things. The wild power acting upon the Primordial World is the 'Modclaw'... as well as the respective functions of the six types of holy water — namely, the 'Six Altars Water Law'. In short, it uses water to explain the fundamental philosophy of Mod — The Three Virtues: 'Gentleness, Change, and Constancy'.&quot;<br /> <br /> Because of this, the religious system, Hua Sect, became the religious system he recognized most, and the Hallmod Scripture became the supreme religious classic in his heart.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> During his journey of following the scriptural revelations, Marinaqua’s academic experience was filled with bumps in this unpredictable society. The year S.C.1619 (Second Creation Era 1619) was when Marinaqua prepared to enter the &quot;Senior Departmental Academy,&quot; a degree level that was once considered difficult to attain on the continent. However, a revolution that swept across the entire continent exploded with a crash—the &quot;Dipfield Landing&quot; revolution. In other words, it is a kind of urban enlightenment revolution.&quot;<br /> <br /> In the revolution, this continent named &quot;Dipfietos,&quot; originally divided among six confronting regimes, underwent a fierce game of power. Eventually, the old systems were abolished, and a brand-new order was built upon their ruins, unifying the 6 scattered nations into just 1 massive city — Dipfield Metropolis. The year of the city's unification, S.C.1619, became the start of a new calendar—D.L.0, which refers to the year 0 of the Dipfield Landing revolution.<br /> <br /> Because the torrent of the times was so rapid, the academic landscape was completely reshaped. The low efficiency of the former academic system clearly could not meet the demand for talent in the future following the Dipfield Landing revolution. Old colleges and institutions were either forced to transform or gradually died out. Meanwhile, the concept of the &quot;Independent Academy&quot; began to rise on the continent, viewed as the beacon of wisdom for the future metropolis.<br /> <br /> Fortunately, Marinaqua was very diligent in his studies and became an outstanding scholar. After weighing his options, he applied to the first institution in the metropolis centered on academic autonomy — Dulwich College — and was successfully admitted.<br /> <br /> Dulwich College was located in the southern region of the new &quot;Dipfield Metropolis,&quot; thousands of miles away from Marinaqua’s hometown in the Mount Gya at the easternmost end of the metropolis. This journey of thousands of miles became the first harsh practice of Marinaqua’s life. Over the next month, carrying a book chest filled with academic texts and the complete volume of the Hallmod Scripture, Marinaqua crossed ranges of mountains and passed through dozens of living districts that served as transit stations, finally stepping into the academic heart of this metropolis — the Dulwich Independent Academy Area.<br /> <br /> Marinaqua was shocked by the torrent of the new era — the magnificient towers of the Dulwich Independent Academy Area pierced the clouds, newly invented steam locomotives darted through the streets, and concrete skyscrapers stood in rows like scales. Marinaqua felt a sudden openness, as if he had arrived in a new world.<br /> <br /> Over time, however, while absorbing new knowledge, Marinaqua felt lost and anxious. The exaggerated speed of the city’s transformation was hard for Marinaqua and the masses of the urban society to accept. Any sudden political or technological change felt like a giant palm striking down on the urban society, stirring panic in people's hearts. Marinaqua, as a student, initially harbored a desire to conform to the new era, but he worried anxiously about his major and career direction, almost unable to decide... Amidst the revolution and beneath the prosperity, the individual was only conscious of their own insignificance and incompetence within the great metropolis, terrified of being rejected by the times and ultimately becoming the price of so-called &quot;humanity progress.&quot;<br /> <br /> To cope with negative emotions and cleanse himself, hoping to remain untainted by external negativity, Marinaqua tried to use the wisdom of the Hallmod Scripture to soothe himself and to examine this society full of change. His shock at the city was washed by time into profound contemplation —<br /> <br /> &quot;The rapidness of the urban transformation does not create confusion; confusion stems from forgetting the &quot;''Dorolal''&quot; of why one came...&quot;<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> 8 years later, in the 8th Year of Dipfield Landing Era...<br /> <br /> The 8 years of academic life passed in a flash. Marinaqua obtained his Final Department Degree in Management, completing his studies at the age of 24, becoming a young intellectual. Seeking opportunities for his own development, he stumbled his way into a port management company, spending his days at the harbor accompanied by waves and ship horns.<br /> <br /> For several years, he devoted himself almost entirely to the port, rarely leaving the area. In moments of leisure amidst his busy schedule, he did not forget to make notes and annotations in the Hallmod Scripture he carried, attempting to gain new revelations from it. This job allowed him to meet many people from different backgrounds — he met captains running across the world, merchants skilled in making money, immigrants longing to integrate into the core of the new era, and ordinary sailors forced to work for a livelihood...<br /> <br /> He saw that in the feverish pursuit of ultimate wealth, people became selfish, and relationships with kin became indifferent; he saw more and more high-rises and high-tech facilities appearing in the city, yet as workers' hours grew longer, their welfare was inversely proportional; he saw the elite class talking eloquently about &quot;revolution,&quot; &quot;progress,&quot; and &quot;future,&quot; while often revealing a look of emptiness and anxiety; he also saw monks who were once full of faith and persistent in their practice, lose themselves in the era, unable to suppress the noise in their hearts, stepping onto the path of seeking fame and profit, forgetting the original intention of their practice.<br /> <br /> Marinaqua said, &quot;The Hallmod Scripture states: 'If the practice of the Law collapses, the human heart loses order!' The city at the time expresses the peak of material abundance but can not satisfy the emptiness above, causing an imbalance of the Dorolal! Just like a sturdy ship that knows not its course and destination...&quot;<br /> <br /> Marinaqua realized that the noise of the urban transformation contained questions about where the era was heading. Harboring a sense of his own mission in his heart, he believed deep down that he had determined his direction...<br /> <br /> After more than twenty years of grueling work, around D.L.30, Marinaqua finally saved up a certain amount of capital at the port through frugality. He resigned from his job, moved to the edge of the city, and decided to return to society.<br /> <br /> Decades of time were as rough as the sea breeze, eroding Marinaqua’s body and making him much thinner. Having worked at the port for years, his hands — once agile and good at turning pages and holding pens—were now calloused and cracked from abrasion by cables; the spine of the young man who once stood straight in lecture halls, on podiums, and at interview tables was now increasingly hunched from years of unloading cargo. As for his Final Department Graduate Degree in Management from the academy? In fact, it was rarely put to use — except for leaving a trace of ink on the employment form. The operational suggestions designed for the port by &quot;Scholar&quot; Marinaqua, who had furthered his studies in management, were somehow sealed away at the bottom of a yellowing file bag along with that yellowing degree certificate, unasked for by anyone. His ideas were pale and powerless, ultimately failing to stir even a ripple for this massive port; what remained was only pure hard labor and sweat...<br /> <br /> Goodbye, port! Now, all this pain is over.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> Returning to society, Marinaqua first hoped to find a place where he could silently study and comprehend philosophy. Thus, his first act was to visit the various Hua Sect temples in the city. At that time, most Hua Sect temples belonged to a massive mainstream branch of the Hua Sect — the Chotone Sect.<br /> <br /> Speaking of the Chotone Sect, this faction was like a surging tide in the long history of the Hua Sect. Its founding traces back to the end of the thirteenth century of the Second Creation Era. In that period, the thought of the Proto-Hua Sect was already prevalent in the religious world. However, even the Hua factions considered new at the time had research thoughts largely identical to the Proto-Hua Sect. On this vast land rich in faith, the Chotone Sect was like a new sprout breaking through the soil, born quietly. Its founder fused ancient wisdom with modern views of that era, creating a masterpiece that adhered to the times and shone with the light of the age in the history of the Hua Sect — the Unified Sphere Revelation, which was born as the core doctrine of the Chotone Sect. It inherited the essence of the Proto-Hua Sect while integrating the sparks of thought from the new era.<br /> <br /> Marinaqua was attracted by this tide that had once led religion. Therefore, after deliberation, he chose to become a monk converted to the Chotone Sect. within a very short time, he read through almost all the doctrinal works of the Unified Sphere Revelation in detail, his inner self resonating with the influence of the Chotone Sect trend — the more he studied it, the more he could feel its charm.<br /> <br /> However, over years of time again, Marinaqua always felt something was missing in his heart...<br /> <br /> Marinaqua believed that although the Chotone Sect was inclusive, it failed to carry forward the fundamental philosophy of &quot;Gentleness, Change, and Constancy&quot; contained in the &quot;Six Altars Water Law&quot; that is pointed in the Hallmod Scripture of GR Series of Hua Sect. It placed too much emphasis on the changes and evolution of the times, but neglecting the gentle side of all things.<br /> <br /> Marinaqua said: &quot;The core philosophy of the Hallmod Scripture, in the end, is — Gentleness, Change, and Constancy. This coincides perfectly with the imagery of 'Water'.&quot;<br /> <br /> &quot;The imagery of water really fascinates me, yet the people seem not to have glimpsed the philosophy of water... Water, like a clear breeze brushing over a wasteland, washes away dust and filth, reviving spirituality... In the baptism of water, I am reborn, transforming into spring returning to the earth, like the melting of ice and snow in March, finally returning to water, like the cycle of life repeating, never exhausted...&quot;<br /> <br /> Whether practicing in the temples of the Chotone Sect or working at the port in the past, Marinaqua often saw the great rivers rushing below the mountains. This sound had lingered in his mind for years. He heard the low chant of waves slapping the shore, feeling the fluctuations of nature and his own rhythm at every moment. He heard the whispers of nature, and this sound became more and more shocking in his heart as his practice and cultivation deepened... Marinaqua knew that what he was feeling was the most primitive and pure rhythm of life... It was the root that nourishes all things, transforming everything with rolling waves of the gentle water.<br /> <br /> Marinaqua's path of practice was laden with the marks of ups and downs and nirvana... For years, Marinaqua walked between the mountains and the great rivers. He often stood alone by the riverbank at the first light of dawn, gazing at the ceaselessly rushing water, realizing the mystery of water's philosophy from it—both soft and resilient, encompassing all phenomena yet hiding profound mysteries.<br /> <br /> &lt;div class=&quot;mqc-scenebreak&quot;&gt;❖ ❖ ❖&lt;/div&gt;<br /> <br /> Years passed, and the world changed. In decades of life and practice, Marinaqua experienced countless tests of body and soul. Once, on a night that seemed like spring but was suddenly struck by a violent storm, Marinaqua faced the spring tempest alone, realizing the power of life and death changes between sky and eartho; in moments of silence, Marinaqua stood by the water of secluded valleys, listening closely to the low chanting, experiencing the purity of water washing the dust from the heart and reshaping the soul.<br /> <br /> In the decades-long struggle against a harsh fate, on a certain day in D.L.34, fate quietly opened a brand-new phase for Marinaqua...<br /> <br /> That day, the weather changed drastically. Amidst swirling clouds and mist, Marinaqua was meditating and contemplating alone in a secluded practice ground. Just as Marinaqua was fully focused on the exploration of his own soul, suddenly, a strange and powerful force surged toward the direction of his practice, as if coming from the depths of the universe.<br /> <br /> Marinaqua felt uneasy inside. In an instant, stars danced before his eyes, and his mind frantically flashed back to the past — he had worked at the port for 22 years and had practiced cultivation for another 5. Right now, Marinaqua’s practice had entered a bottleneck phase. Past experiences flew at him like sparks, leaving scorching marks on his body and spirit, the stinging pain hitting his nerves directly. &quot;No reconciled... I am not reconciled to stop here!&quot;<br /> <br /> His body, on the verge of collapse, produced a violent rejection reaction. An inexplicable despair irrationally devoured this body that had delved into philosophy and Dorolal for years, pushing him near the edge of breakdown.<br /> <br /> Finally, he was instantly knocked to the ground by this force, falling into a deep coma.<br /> <br /> In his coma, Marinaqua entered a long and mysterious illusion. He seemed to have entered an otherworld beyond the mortal realm — in the boundless waters, lights flowed and colors burst, waves rose and fell, and time and space seemed to freeze. Above his head, a 6-pointed star formed by two inverted triangles overlapping each other rotated ceaselessly, seeming to foreshadow that Marinaqua’s destiny was about to undergo a great change... In the hazy phantoms, a green light gradually emerged before Marinaqua’s eyes, and a human figure slowly revealed itself within the light. That was the Creator God in the Hua Sect faith, also known as the Sole God — &quot;Hua&quot;.<br /> <br /> In human form, Hua approached Marinaqua from the front of his kneeling body. Hua's voice echoed for a long time in the field of Marinaqua’s heart:<br /> <br /> &quot;...Water is birth, death, and reincarnation, changing and impermanent. Only by following the Way of Water can one lead sleeping souls toward regeneration.&quot;<br /> <br /> This revelation pierced Marinaqua’s soul like lightning, cleaving open the spiritual confusion, self-loss, and sense of existential void accumulated in his heart for years. At this moment, he was no longer that struggling and hardworking port worker, nor was he the cultivator trapped in a bottleneck.<br /> <br /> When Marinaqua slowly woke from the illusion, he was no longer his former self... Through this mysterious revelation, Marinaqua felt as if his inner heart had become clearer. He believed he had gained enlightenment and realized where his mission lay. He was determined and willing to devote his life's effort to this.<br /> <br /> Marinaqua decided that he would establish a scripture hall with a doctrine that combined the Hua Sect faith system with the torrent of the new era. Unlike Hua Sect factions such as the Chotone Sect, Marinaqua was going to integrate the mysterious vision he received and the revelations about water from the Hallmod Scripture into his scripture lectures.<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;mqc-tlnote&quot;&gt;&lt;span class=&quot;mqc-tllabel&quot;&gt;Terminology ·&lt;/span&gt;<br /> 1. Dorolal: A word from the Pre-Diphic language about the GR series doctrine. It refers to the collective invocation of dao and law.<br /> &lt;/div&gt;<br /> <br /> <br /> &lt;hr class=&quot;mqc-rule&quot;&gt;<br /> <br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:14px 0;&quot;<br /> |- style=&quot;vertical-align:top;&quot;<br /> | class=&quot;mqc-adj-cell is-disabled&quot; style=&quot;width:40%;&quot; | &lt;span class=&quot;mqc-dir&quot;&gt;← Previous&lt;/span&gt; '''No preceding phase'''<br /> | class=&quot;mqc-index-link&quot; style=&quot;width:20%; vertical-align:middle;&quot; | [[Marinaqua|◈ Index]]<br /> | class=&quot;mqc-adj-cell&quot; style=&quot;width:40%; text-align:right;&quot; | &lt;span class=&quot;mqc-dir&quot;&gt;Next →&lt;/span&gt; '''[[GRA2|Phase 02 · The Scripture Hall]]'''<br /> |}<br /> [[Category:Master Marinaqua, Not Laid to Rest]]</div> PlurimodSU https://en.huijia.fun/index.php?title=GRA&diff=151 GRA 2026-07-05T05:08:08Z <p>PlurimodSU: Category</p> <hr /> <div>&lt;!-- ============================================================ --&gt;<br /> &lt;!-- MASTER MARINAQUA, NOT LAID TO REST: SILENCE OF HIS SECT --&gt;<br /> &lt;!-- Chapter-Navigation Hub · EN HUIJIA FUN --&gt;<br /> &lt;!-- (A) Timeless skin overrides (B) #vgr-marinaqua-nav --&gt;<br /> &lt;!-- ============================================================ --&gt;<br /> <br /> &lt;html&gt;<br /> &lt;div id=&quot;vgr-marinaqua-nav&quot;&gt;<br /> <br /> &lt;style&gt;<br /> @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&amp;family=Lora:ital,wght@0,400;0,700;1,400&amp;family=Montserrat:wght@600;800&amp;display=swap');<br /> <br /> :root {<br /> --mq-abyss:#03171f; --mq-deep:#07303a; --mq-tide:#0d4f5c;<br /> --mq-blue:#98C1C0; --mq-jade:#2fb89a; --mq-jade-dim:#1c7d6e;<br /> --mq-mist:#98C1C0; --mq-pale:#e7f6f3; --mq-locked:#426a72;<br /> --mq-radius:14px;<br /> --mq-serif:'Lora',serif; --mq-display:'Montserrat',sans-serif; --mq-mono:'JetBrains Mono',monospace;<br /> }<br /> <br /> /* ===== (A) SKIN OVERRIDES ===== */<br /> <br /> /* canvas */<br /> html, body, #mw-content-block, #mw-content-wrapper, .mw-body,<br /> .mw-wiki-logo, #mw-header-container {<br /> background-color: var(--mq-abyss) !important;<br /> }<br /> html, body {<br /> background-image:<br /> radial-gradient(140% 90% at 50% -10%, #0a3a45 0%, transparent 55%),<br /> linear-gradient(180deg, var(--mq-abyss) 0%, #062731 50%, var(--mq-abyss) 100%) !important;<br /> color: var(--mq-mist) !important;<br /> }<br /> <br /> /* top bar */<br /> #mw-header-container, .mw-header, #mw-header-nav-hack, #mw-header {<br /> background: linear-gradient(180deg, #062b34 0%, var(--mq-abyss) 100%) !important;<br /> border-bottom: 1px solid rgba(47,184,154,0.22) !important;<br /> color: var(--mq-mist) !important;<br /> }<br /> @media screen and (min-width: 1100px) {<br /> #mw-content-container { margin-top: 48px !important; }<br /> }<br /> <br /> /* site title + icons */<br /> .mw-wiki-logo, #p-logo-text a, .mw-logo-container, #mw-header .mw-portlet-logo a, h1#firstHeading {<br /> color: var(--mq-jade) !important;<br /> }<br /> #mw-header .mw-ui-icon::before, #personal .mw-ui-icon::before {<br /> filter: invert(0.9) hue-rotate(120deg) saturate(0.6) !important;<br /> }<br /> <br /> /* sidebar font */<br /> #mw-related-navigation span, #mw-site-navigation span, .sidebar-inner li a:before { color: var(--mq-mist) !important; }<br /> <br /> /* left sidebar */<br /> #mw-site-navigation, #mw-related-navigation, .sidebar-chunk, .mw-portlet, #site-navigation, #site-tools {<br /> background-color: transparent !important;<br /> color: var(--mq-mist) !important;<br /> }<br /> .sidebar-chunk {<br /> background-color: rgba(7,48,58,0.45) !important;<br /> border: 1px solid rgba(47,184,154,0.18) !important;<br /> border-radius: var(--mq-radius) !important;<br /> }<br /> #mw-panel a, .sidebar-chunk a, #mw-site-navigation a, #mw-related-navigation a, .mw-portlet a {<br /> color: var(--mq-mist) !important;<br /> }<br /> #mw-panel a:hover, .sidebar-chunk a:hover, .mw-portlet a:hover { color: var(--mq-jade) !important; }<br /> #mw-panel .mw-ui-icon::before, .sidebar-chunk .mw-ui-icon::before {<br /> filter: invert(0.85) sepia(1) hue-rotate(120deg) saturate(2.2) !important;<br /> }<br /> .sidebar-chunk h2, #mw-panel h3, .portal h3, .vector-menu-heading, .mw-portlet h3 {<br /> color: var(--mq-jade) !important;<br /> border-bottom: 1px solid rgba(47,184,154,0.22) !important;<br /> }<br /> <br /> /* right rail */<br /> #mw-related-navigation, .mw-body-after-content, #right-navigation, .page-tools, .mw-portlet-tb {<br /> background-color: transparent !important;<br /> }<br /> .mw-body-after-content .sidebar-chunk, #mw-related-navigation .sidebar-chunk {<br /> background-color: rgba(7,48,58,0.45) !important;<br /> }<br /> <br /> /* content card */<br /> #mw-content {<br /> background-color: #03171F !important;<br /> background-image: none !important;<br /> border: 1px solid rgba(47,184,154,0.20) !important;<br /> box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important;<br /> backdrop-filter: blur(3px);<br /> color: var(--mq-mist) !important;<br /> }<br /> #mw-content h1, #mw-content h2, #mw-content .firstHeading, .mw-body h1.firstHeading {<br /> color: var(--mq-jade) !important;<br /> border-bottom-color: rgba(47,184,154,0.25) !important;<br /> }<br /> #mw-content h1.firstHeading::before { color: var(--mq-blue) !important; }<br /> #mw-content a { color: var(--mq-blue) !important; }<br /> #mw-content a:hover { color: var(--mq-jade) !important; }<br /> #mw-content .previewnote, #mw-content .mw-message-box, #mw-content div[class*=&quot;preview&quot;] {<br /> background-color: rgba(31,143,176,0.10) !important;<br /> border: 1px solid rgba(47,184,154,0.30) !important;<br /> color: var(--mq-mist) !important;<br /> border-radius: var(--mq-radius) !important;<br /> }<br /> .mw-body h1.firstHeading { display: none !important; }<br /> <br /> /* footer */<br /> .mw-footer-container { background-color: var(--mq-abyss) !important; }<br /> .mw-footer-container a { color: var(--mq-mist) !important; }<br /> <br /> /* ===== (B) COMPONENT ===== */<br /> <br /> #vgr-marinaqua-nav {<br /> position: relative; margin: -25px -30px 0 -30px; padding: 0;<br /> color: var(--mq-mist); font-family: var(--mq-serif); line-height: 1.75;<br /> border-radius: var(--mq-radius); overflow: hidden;<br /> background:<br /> radial-gradient(120% 80% at 50% -8%, #0d5260 0%, transparent 55%),<br /> linear-gradient(180deg, var(--mq-abyss) 0%, #073039 42%, var(--mq-abyss) 100%);<br /> box-shadow: inset 0 0 140px rgba(0,0,0,0.7);<br /> }<br /> <br /> #vgr-marinaqua-nav .mq-ripple {<br /> position: absolute; inset: 0; pointer-events: none; opacity: 0.4;<br /> background:<br /> repeating-radial-gradient(circle at 38% 14%, rgba(31,143,176,0.06) 0px, rgba(31,143,176,0.06) 2px, transparent 3px, transparent 64px),<br /> repeating-radial-gradient(circle at 66% 20%, rgba(47,184,154,0.05) 0px, rgba(47,184,154,0.05) 2px, transparent 3px, transparent 80px);<br /> animation: mq-breathe 16s ease-in-out infinite;<br /> }<br /> @keyframes mq-breathe { 0%,100%{transform:scale(1);opacity:.32} 50%{transform:scale(1.07);opacity:.5} }<br /> <br /> /* header */<br /> #vgr-marinaqua-nav .mq-header { position: relative; z-index: 2; text-align: center; padding: 72px 28px 50px; }<br /> #vgr-marinaqua-nav .mq-eyebrow {<br /> font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.45em;<br /> text-transform: uppercase; color: var(--mq-jade); opacity: 0.85; margin: 0 0 18px; padding-left: 0.45em;<br /> }<br /> #vgr-marinaqua-nav .mq-title {<br /> font-family: var(--mq-display); font-weight: 800; font-size: clamp(1.8em,4.4vw,3em);<br /> line-height: 1.1; letter-spacing: -0.01em; margin: 0;<br /> background: linear-gradient(110deg, var(--mq-pale) 10%, var(--mq-jade) 55%, var(--mq-blue) 100%);<br /> -webkit-background-clip: text; background-clip: text; color: transparent;<br /> text-shadow: 0 0 34px rgba(47,184,154,0.25);<br /> }<br /> #vgr-marinaqua-nav .mq-title .mq-sub {<br /> display: block; font-weight: 600; font-size: 0.46em; letter-spacing: 0.06em; margin-top: 16px;<br /> color: var(--mq-mist); -webkit-text-fill-color: var(--mq-mist); opacity: 0.92;<br /> }<br /> #vgr-marinaqua-nav .mq-glyph {<br /> display: block; margin: 28px auto 0; width: 72px; height: 1px; position: relative;<br /> background: linear-gradient(90deg, transparent, var(--mq-jade), transparent);<br /> }<br /> #vgr-marinaqua-nav .mq-glyph::after {<br /> content: &quot;◈&quot;; position: absolute; top: -0.8em; left: 50%; transform: translateX(-50%);<br /> color: var(--mq-jade); padding: 0 10px; font-size: 0.9em;<br /> }<br /> <br /> /* epigraph */<br /> #vgr-marinaqua-nav .mq-epigraph {<br /> position: relative; z-index: 2; max-width: 580px; margin: 0 auto 46px; padding: 0 32px;<br /> text-align: center; font-style: italic; font-size: 1.05em; color: var(--mq-mist); opacity: 0.8;<br /> }<br /> <br /> /* progress meter */<br /> #vgr-marinaqua-nav .mq-meter {<br /> position: relative; z-index: 2; max-width: 620px; margin: 0 auto 58px; padding: 0 32px;<br /> font-family: var(--mq-mono); font-size: 0.74em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mq-jade);<br /> }<br /> #vgr-marinaqua-nav .mq-meter-label { display: flex; justify-content: space-between; margin-bottom: 8px; opacity: 0.85; }<br /> #vgr-marinaqua-nav .mq-meter-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }<br /> #vgr-marinaqua-nav .mq-meter-fill {<br /> height: 100%; width: 0; border-radius: 4px;<br /> background: linear-gradient(90deg, var(--mq-blue), var(--mq-jade));<br /> box-shadow: 0 0 12px var(--mq-jade); transition: width 1.7s cubic-bezier(0.16,1,0.3,1);<br /> }<br /> <br /> /* list + volume groups */<br /> #vgr-marinaqua-nav .mq-list {<br /> position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px;<br /> max-width: 880px; margin: 0 auto; padding: 0 28px 16px;<br /> }<br /> #vgr-marinaqua-nav .mq-volume {<br /> display: flex; align-items: center; gap: 16px; margin: 26px 4px 6px;<br /> font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mq-jade);<br /> }<br /> #vgr-marinaqua-nav .mq-volume:first-child { margin-top: 4px; }<br /> #vgr-marinaqua-nav .mq-volume::before { content: &quot;❖&quot;; color: var(--mq-blue); font-size: 1.1em; }<br /> #vgr-marinaqua-nav .mq-volume::after { content: &quot;&quot;; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(47,184,154,0.4), transparent); }<br /> #vgr-marinaqua-nav .mq-volume .mq-vol-sub { letter-spacing: 0.12em; color: var(--mq-jade-dim); margin-left: -6px; }<br /> <br /> #vgr-marinaqua-nav .mq-row {<br /> position: relative; display: flex; align-items: center; gap: 22px; padding: 20px 26px;<br /> border-radius: var(--mq-radius); border: 1px solid rgba(47,184,154,0.18);<br /> background: linear-gradient(100deg, rgba(13,79,92,0.5), rgba(3,23,31,0.55));<br /> backdrop-filter: blur(2px); text-decoration: none !important; color: inherit; overflow: hidden;<br /> transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.4s ease;<br /> }<br /> #vgr-marinaqua-nav .mq-row .mq-index {<br /> flex: 0 0 auto; width: 58px; text-align: center; line-height: 1;<br /> font-family: var(--mq-mono); font-weight: 700; font-size: 1.4em; color: var(--mq-blue);<br /> border-right: 1px solid rgba(47,184,154,0.18); padding-right: 18px;<br /> }<br /> #vgr-marinaqua-nav .mq-row .mq-body { flex: 1 1 auto; min-width: 0; }<br /> #vgr-marinaqua-nav .mq-row .mq-phase {<br /> font-family: var(--mq-mono); font-size: 0.64em; letter-spacing: 0.22em;<br /> text-transform: uppercase; color: var(--mq-jade-dim); display: block; margin-bottom: 6px;<br /> }<br /> #vgr-marinaqua-nav .mq-row .mq-name {<br /> font-family: var(--mq-display); font-weight: 600; font-size: 1.12em; color: var(--mq-pale);<br /> line-height: 1.3; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;<br /> }<br /> #vgr-marinaqua-nav .mq-row .mq-status {<br /> flex: 0 0 auto; font-family: var(--mq-mono); font-size: 0.64em; letter-spacing: 0.16em;<br /> text-transform: uppercase; opacity: 0.72; white-space: nowrap;<br /> }<br /> #vgr-marinaqua-nav .mq-row.is-open:hover {<br /> transform: translateX(6px); border-color: var(--mq-jade);<br /> box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 22px rgba(47,184,154,0.25);<br /> }<br /> #vgr-marinaqua-nav .mq-row.is-open::before {<br /> content: &quot;&quot;; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;<br /> background: linear-gradient(100deg, transparent, rgba(47,184,154,0.10), transparent); transition: left 0.7s ease;<br /> }<br /> #vgr-marinaqua-nav .mq-row.is-open:hover::before { left: 160%; }<br /> #vgr-marinaqua-nav .mq-row.is-open .mq-index, #vgr-marinaqua-nav .mq-row.is-open .mq-status { color: var(--mq-jade); }<br /> #vgr-marinaqua-nav .mq-row.is-locked {<br /> border-color: rgba(66,106,114,0.22);<br /> background: linear-gradient(100deg, rgba(7,48,58,0.3), rgba(3,23,31,0.42)); cursor: default;<br /> }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-index { color: var(--mq-locked); border-right-color: rgba(66,106,114,0.18); }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-name { color: var(--mq-locked); filter: blur(0.4px); }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-phase { color: var(--mq-jade-dim); opacity: 0.5; }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-status { color: var(--mq-locked); }<br /> #vgr-marinaqua-nav .mq-row.is-locked .mq-status::after { content: &quot; 🌊&quot;; opacity: 0.3; filter: grayscale(0.4); }<br /> <br /> /* coming soon */<br /> #vgr-marinaqua-nav .mq-comingsoon {<br /> position: relative; z-index: 2; margin: 44px 0 0; padding: 96px 28px 116px; text-align: center;<br /> background:<br /> radial-gradient(120% 140% at 50% 120%, #05242c 0%, transparent 60%),<br /> linear-gradient(180deg, transparent, var(--mq-abyss) 70%);<br /> }<br /> #vgr-marinaqua-nav .mq-cs-word {<br /> font-family: var(--mq-display); font-weight: 800; font-size: clamp(2em,7vw,4.6em);<br /> letter-spacing: 0.18em; text-transform: uppercase; margin: 0; color: transparent;<br /> background: linear-gradient(180deg, var(--mq-jade) 0%, var(--mq-blue) 60%, var(--mq-deep) 130%);<br /> -webkit-background-clip: text; background-clip: text; opacity: 0.55; animation: mq-fade 7s ease-in-out infinite;<br /> }<br /> @keyframes mq-fade { 0%,100%{opacity:.35;letter-spacing:.18em} 50%{opacity:.7;letter-spacing:.24em} }<br /> #vgr-marinaqua-nav .mq-cs-note {<br /> margin-top: 22px; font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.3em;<br /> text-transform: uppercase; color: var(--mq-jade-dim); opacity: 0.8;<br /> }<br /> <br /> /* reveal */<br /> #vgr-marinaqua-nav .mq-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }<br /> #vgr-marinaqua-nav .mq-reveal.is-visible { opacity: 1; transform: translateY(0); }<br /> <br /> /* mobile */<br /> @media screen and (max-width: 850px) {<br /> #vgr-marinaqua-nav { margin: -15px -15px 0 -15px; }<br /> #vgr-marinaqua-nav .mq-header { padding: 48px 20px 34px; }<br /> #vgr-marinaqua-nav .mq-list { padding: 0 16px 12px; }<br /> #vgr-marinaqua-nav .mq-row { gap: 14px; padding: 16px 18px; }<br /> #vgr-marinaqua-nav .mq-row .mq-index { width: 38px; font-size: 1.1em; padding-right: 12px; }<br /> #vgr-marinaqua-nav .mq-row .mq-status { display: none; }<br /> #vgr-marinaqua-nav .mq-comingsoon { padding: 64px 18px 84px; }<br /> }<br /> @media (prefers-reduced-motion: reduce) {<br /> #vgr-marinaqua-nav .mq-ripple, #vgr-marinaqua-nav .mq-cs-word { animation: none; }<br /> #vgr-marinaqua-nav .mq-reveal { opacity: 1; transform: none; transition: none; }<br /> }<br /> &lt;/style&gt;<br /> <br /> &lt;!-- markup --&gt;<br /> &lt;div class=&quot;mq-ripple&quot;&gt;&lt;/div&gt;<br /> <br /> &lt;header class=&quot;mq-header&quot;&gt;<br /> &lt;p class=&quot;mq-eyebrow&quot;&gt;Verdant Green Revelation · The Apocrypha&lt;/p&gt;<br /> &lt;h1 class=&quot;mq-title&quot;&gt;<br /> Master Marinaqua, Not Laid to Rest<br /> &lt;span class=&quot;mq-sub&quot;&gt;Silence of His Sect&lt;/span&gt;<br /> &lt;/h1&gt;<br /> &lt;/header&gt;<br /> &lt;span class=&quot;mq-glyph&quot;&gt;&lt;/span&gt;<br /> &lt;blockquote class=&quot;mq-epigraph&quot;&gt;<br /> He did not die so much as fall quiet - and the quiet, in turn, became a doctrine.<br /> &lt;/blockquote&gt;<br /> <br /> &lt;div class=&quot;mq-meter mq-reveal&quot;&gt;<br /> &lt;div class=&quot;mq-meter-label&quot;&gt;&lt;span&gt;Translation Progress&lt;/span&gt;&lt;span&gt;3 / 16&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;mq-meter-track&quot;&gt;&lt;div class=&quot;mq-meter-fill&quot; data-fill=&quot;18.75&quot;&gt;&lt;/div&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;nav class=&quot;mq-list&quot;&gt;<br /> <br /> &lt;!-- Volume I · Phases 1–5 --&gt;<br /> &lt;div class=&quot;mq-volume mq-reveal&quot;&gt;Volume I &lt;span class=&quot;mq-vol-sub&quot;&gt;· Phases 1–5&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;a class=&quot;mq-row is-open mq-reveal&quot; href=&quot;/GRA1&quot;&gt;<br /> &lt;span class=&quot;mq-index&quot;&gt;01&lt;/span&gt;<br /> &lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 1&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;Marinaqua's Practice&lt;/p&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-status&quot;&gt;▸ Read now&lt;/span&gt;<br /> &lt;/a&gt;<br /> &lt;a class=&quot;mq-row is-open mq-reveal&quot; href=&quot;/GRA2&quot;&gt;<br /> &lt;span class=&quot;mq-index&quot;&gt;02&lt;/span&gt;<br /> &lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 2&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;The Scripture Hall&lt;/p&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-status&quot;&gt;▸ Read now&lt;/span&gt;<br /> &lt;/a&gt;<br /> &lt;a class=&quot;mq-row is-open mq-reveal&quot; href=&quot;/GRA3&quot;&gt;<br /> &lt;span class=&quot;mq-index&quot;&gt;03&lt;/span&gt;<br /> &lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 3&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;The Hallmod Temple&lt;/p&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-status&quot;&gt;▸ Read now&lt;/span&gt;<br /> &lt;/a&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;04&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 4&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;05&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 5&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;!-- Volume II · Phases 6–14 --&gt;<br /> &lt;div class=&quot;mq-volume mq-reveal&quot;&gt;Volume II &lt;span class=&quot;mq-vol-sub&quot;&gt;· Phases 6–14&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;06&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 6&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;07&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 7&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;08&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 8&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;09&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 9&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 10&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;11&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 11&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;12&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 12&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;13&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 13&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;14&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 14&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;!-- Volume III · Phases 15–16 --&gt;<br /> &lt;div class=&quot;mq-volume mq-reveal&quot;&gt;Volume III &lt;span class=&quot;mq-vol-sub&quot;&gt;· Phases 15–16&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;15&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 15&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;mq-row is-locked mq-reveal&quot;&gt;&lt;span class=&quot;mq-index&quot;&gt;16&lt;/span&gt;&lt;span class=&quot;mq-body&quot;&gt;&lt;span class=&quot;mq-phase&quot;&gt;Phase 16&lt;/span&gt;&lt;p class=&quot;mq-name&quot;&gt;[Chapter Title]&lt;/p&gt;&lt;/span&gt;&lt;span class=&quot;mq-status&quot;&gt;Beneath the surface&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;/nav&gt;<br /> <br /> &lt;section class=&quot;mq-comingsoon&quot;&gt;<br /> &lt;p class=&quot;mq-cs-word&quot;&gt;Coming Soon&lt;/p&gt;<br /> &lt;p class=&quot;mq-cs-note&quot;&gt;Marina Malinti · a@huijia.fun&lt;/p&gt;<br /> &lt;/section&gt;<br /> <br /> &lt;script&gt;<br /> (function(){<br /> &quot;use strict&quot;;<br /> var root = document.getElementById(&quot;vgr-marinaqua-nav&quot;);<br /> if(!root) return;<br /> function run(){<br /> var reveals = root.querySelectorAll(&quot;.mq-reveal&quot;);<br /> if(&quot;IntersectionObserver&quot; in window){<br /> var io = new IntersectionObserver(function(es){<br /> es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(&quot;is-visible&quot;); io.unobserve(e.target); } });<br /> }, {threshold:0.08});<br /> reveals.forEach(function(el){ io.observe(el); });<br /> } else {<br /> reveals.forEach(function(el){ el.classList.add(&quot;is-visible&quot;); });<br /> }<br /> var fill = root.querySelector(&quot;.mq-meter-fill&quot;);<br /> if(fill){ setTimeout(function(){ fill.style.width = (fill.getAttribute(&quot;data-fill&quot;)||&quot;0&quot;) + &quot;%&quot;; }, 400); }<br /> }<br /> if(document.readyState === &quot;loading&quot;){ document.addEventListener(&quot;DOMContentLoaded&quot;, run); }<br /> else { run(); }<br /> })();<br /> &lt;/script&gt;<br /> <br /> &lt;/div&gt;<br /> &lt;/html&gt;<br /> <br /> [[Category:Portfolio Area]]<br /> [[Category:Portfolio Area-Apocrypha]]<br /> [[Category:Master Marinaqua, Not Laid to Rest]]</div> PlurimodSU