MediaWiki:Common.css: Difference between revisions

Revision as of 04:03, 12 October 2026

/* =====================================================================
 * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)
 * Design language: VGR Design System - v2
 *
 * v2: Main Page cards, comments and profile pages are written from scratch for this site;
 *     all pink is gone; no resources are loaded from other wikis, and no other site
 *     is named in these comments.
 *
 * Attribution:
 *   - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes
 *   - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton
 * ===================================================================== */


/* =====================================================================
 * 1. Fonts
 * ===================================================================== */

/* Pre-Diphic Mono: the in-world language of the VGR series.
   The font file lives on huijia.fun. Browsers only load a cross-origin font when the server
   sends an Access-Control-Allow-Origin header, so /fonts/ on huijia.fun must allow
   https://en.huijia.fun (or upload the same file under en.huijia.fun/fonts/ and point here). */
@font-face {
  font-family: "Pre-Diphic Mono";
  src: url("https://huijia.fun/fonts/PreDiphicMono-1.1.woff2") format("woff2");
  font-display: swap;
}
.pd {
  font-family: "Pre-Diphic Mono", sans-serif !important;
  font-feature-settings: "rlig" 1, "ccmp" 1;
  line-height: 1;
}

/* {{PD}} vertical text: Module:PreDiphic splits the text into fixed-length columns (.pd-col);
   columns run left to right and wrap to a new row at the right edge of the content, no scrollbar */
.pd-cols {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  vertical-align: top;
  max-width: 100%;
  column-gap: 0.25em;
  row-gap: 0.75em;
}
/* Each column stays within the visible window height (minus header and margins); the
   height parameter overrides this cap. 100svh = visible height with the mobile address bar
   shown, matching the column logic in Common.js; browsers without svh fall back to 100vh. */
.pd-col {
  writing-mode: vertical-lr;
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
}

/* Single vertical span (the typer page's "Copy as HTML" output): top-aligned, within window height */
.pd-v {
  writing-mode: vertical-lr;
  vertical-align: top;
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
}

/* Huiwen Mincho: work titles and chapter titles (--font-display).
   The file name is percent-encoded so this file stays ASCII-only. */
@font-face {
    font-family: 'Huiwen';
    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');
    font-display: swap;
}

/* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule
   never took effect. Kept now that it is fixed; delete it once no page uses it. */
@font-face {
    font-family: 'Yuesong';
    src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');
    font-display: swap;
}

/* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a
   Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System
   no longer uses. If a page still needs one, upload the font file to this site first. */

/* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.
   The loli.net mirror keeps them loading for visitors in mainland China. */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.md, .md-lg, .md-md, .md-sm, .material-icons {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    display: inline-block;
    user-select: none;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.md-lg { font-size: 60px; }
.md-md { font-size: 30px; }
.md-sm { font-size: 10px; }


/* =====================================================================
 * 2. VGR tokens (site default = Archive Zone "paper" palette)
 *    Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.
 * ===================================================================== */
:root {
    --paper: #F3F5F1;
    --paper-raised: #FFFFFF;
    --paper-sunk: #E7ECE5;
    --ink: #16211B;
    --ink-muted: #4C5A51;
    --rule: #C9D3CA;
    --rule-strong: #7E8B81;
    --heading-bar: #C8D8C8;
    --dot: #A3B1A8;
    --accent: #025F32;
    --accent-fill: #025F32;
    --on-accent: #FFFFFF;
    --accent-tint: #DCEBD9;
    --link: #0B6B3A;
    --link-new: #A8432F;
    --focus: #002F9C;

    --font-display: Huiwen, "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", serif;
    --font-serif: "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    --font-sans: "Source Sans 3", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    --radius-xs: 2px;
    --radius-sm: 4px;

    /* Primary-color variables read by the skin and extensions: all point to Huijia Green */
    --color-primary: var(--accent);
    --color-progressive: var(--accent);
    --background-color-progressive: var(--accent-fill);
    --border-color-progressive: var(--accent);
}

html.skin-theme-clientpref-night {
    --paper: #111613;
    --paper-raised: #18201B;
    --paper-sunk: #0C100E;
    --ink: #E4EBE5;
    --ink-muted: #A2B0A6;
    --rule: #2A352E;
    --rule-strong: #667A6C;
    --heading-bar: #2F4033;
    --dot: #2A352E;
    --accent: #C1E1A6;
    --accent-fill: #3B7E3D;
    --accent-tint: #1C2B21;
    --link: #8FD3A8;
    --link-new: #F0907E;
    --focus: #8FB0FF;
}

body { accent-color: var(--accent); }


/* =====================================================================
 * 3. General utilities
 * ===================================================================== */

.mw-collapsible.mw-collapsed { max-height: none; }

p { word-break: normal; }

cite { font-style: normal; }

.res-img img { max-width: 100%; height: auto; }

/* Custom link: underline on hover */
.custom-link { text-decoration: none; color: inherit; }
.custom-link:hover { text-decoration: underline; color: var(--link); }

/* Two-column layouts
   In the old #left-column-0.3 the "." was read as a class selector, so those rules never
   matched. The escaped form below matches id="left-column-0.3" without changing any page. */
#left-column        { float: left;  width: 49%; }
#right-column       { float: right; width: 49%; }
#left-column-full   { float: left;  width: 50%; }
#right-column-full  { float: right; width: 50%; }
#middle-column-full { margin: 0 auto; width: 50%; }
#left-column-0\.3   { float: left;  width: 29%; }
#left-column-0\.7   { float: left;  width: 69%; }
#right-column-0\.3  { float: right; width: 29%; }
#right-column-0\.7  { float: right; width: 69%; }

@media screen and (max-width: 850px) {
    #left-column, #right-column,
    #left-column-full, #right-column-full, #middle-column-full,
    #left-column-0\.3, #left-column-0\.7,
    #right-column-0\.3, #right-column-0\.7,
    #user-page-left, #user-page-right {
        float: none;
        width: 100%;
    }
}

/* Main Page: hide the page title, page tabs, variant menu and category bar */
body.page-Main_Page #firstHeading,
body.page-Main_Page #siteSub,
body.page-Main_Page li#ca-talk,
body.page-Main_Page li#ca-watch,
body.page-Main_Page li#ca-unwatch,
body.page-Main_Page li#ca-history,
body.page-Main_Page li#ca-nstab-main,
body.page-Main_Page li#ca-viewsource,
body.page-Main_Page li#ca-view,
body.page-Main_Page #p-variants,
body.page-Main_Page #p-variants-desktop-label,
body.page-Main_Page #catlinks-sidebar,
body.page-Main_Page #mw-normal-catlinks { display: none !important; }

/* Scroll-to-top / bottom buttons */
img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }
img#scrollUpButton:hover { transform: scale(1.1); }
img#scrollUpButton:active { transform: scale(.95); }
img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }
img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }

/* Repost badge */
.repost-circle {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
}
.repost-circle a.external {
    background: none !important;
    padding-right: 0 !important;
    color: var(--accent) !important;
}


/* =====================================================================
 * 4. Spoiler blackout (adapted from Moegirlpedia)
 * ===================================================================== */
.heimu,
.heimu rt { background-color: #252525; }
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited { color: #252525; }
.heimu,
.heimu a,
a .heimu,
.heimu a.new { color: #252525; text-shadow: none; }
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }


/* =====================================================================
 * 5. Info boxes
 * ===================================================================== */
.infoBox {
    margin: 10px auto;
    width: 80%;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    background: var(--paper-raised);
}
.infoBox a { word-break: normal; }
.infoBoxTitle {
    margin: 3px auto;
    padding: 6px 0 0;
    text-align: center;
    font-weight: 700;
    color: var(--ink);
}
.infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }
.infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }
.infoBoxContent { border: 0; background: var(--paper-sunk); }
.infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }

@media screen and (max-width: 850px) {
    .infoBox { float: unset !important; width: 100% !important; clear: both; }
    .infobox { width: 100%; margin: 0 0 2em; }
}
@media screen and (min-width: 851px) {
    .infobox { width: 300px; margin: 1em 0 30px 30px; }
}

.fieldset {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 0.35em 1.625em 0.75em;
}

/* Upload page: info box layout fix */
.mw-special-Upload i.md { display: flex; }
.mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }


/* =====================================================================
 * 6. Tables
 * ===================================================================== */
table.wikitable {
    width: 100%;
    margin: 1em 0;
    background: var(--paper-raised);
    color: var(--ink);
    border: none;
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.95em;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--rule-strong);
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
    color: var(--ink);
    padding: 9px 12px;
    line-height: 1.6;
    border: none;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
table.wikitable > tbody > tr:last-of-type > td { border-bottom: none; }
table.wikitable > tbody > tr:hover td { background: var(--accent-tint); }

/* Light green table (old class name kept, now reads the variables) */
table.wikitable-green { background: var(--accent-tint); }
.wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }
.wikitable-green td { background: var(--paper-raised); }

@media screen and (max-width: 768px) {
    table.wikitable { display: block; overflow-x: auto; }
}


/* =====================================================================
 * 7. hlist / navbox / navbar (adapted from Wikipedia)
 * ===================================================================== */
.hlist dl, .hlist ol, .hlist ul { margin: 0; }
.hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }
.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }
.hlist dt:after { content: ": "; }
.hlist dd:after, .hlist li:after { content: " \00B7 "; font-weight: bold; }
.hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }
.hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }
.hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: " ("; }
.hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: ")"; }
.hlist.hnum ol li { counter-increment: level1; }
.hlist.hnum ol li:before { content: counter(level1) " "; }
.hlist.hnum ol ol li { counter-increment: level2; }
.hlist.hnum ol ol li:before { content: counter(level2) " "; }

/* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */
.navbox {
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    background: var(--paper-raised);
}
.navbox-inner, .navbox-subgroup { width: 100%; }
.navbox-subgroup { background: var(--paper-raised); }
.navbox-list { border-color: var(--paper-raised); }
.navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }
.navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }
th.navbox-group { white-space: nowrap; text-align: right; }
.navbox-even { background: var(--paper); }
.navbox-odd { background: transparent; }
table.navbox + table.navbox { margin-top: -1px; }
.navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,
.navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }
.navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }
.navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }
ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }

.navbar { display: inline; font-weight: normal; }
.navbar ul { display: inline; white-space: nowrap; }
.navbar li { word-spacing: -0.125em; }
.navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }
.navbox .navbar { display: block; }
.navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }

.collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }
.navbox .collapseButton { width: 8em; }

@media screen and (max-width: 850px) {
    th.navbox-group { white-space: normal; }
    th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }
}


/* =====================================================================
 * 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)
 *    Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.
 * ===================================================================== */
.rec-grid {
    display: grid;
    gap: var(--space-3, 12px);
    margin: 0.8em 0 1.2em;
}
.rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rec-card {
    padding: 12px 16px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
}
.rec-card:hover { border-left-color: var(--accent); }
.rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.rec-card-title a { color: inherit; }
.rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }
.rec-link {
    padding: 8px 12px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
    transition: border-color 0.2s ease, padding-left 0.2s ease;
}
.rec-link a { color: var(--ink); }
.rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }
@media screen and (max-width: 850px) {
    .rec-grid-2 { grid-template-columns: 1fr; }
    .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Compatibility layer: the old mini-block class names. Some templates still use them
   (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those
   templates have moved to rec-card / rec-link. */
.mini-block {
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    margin-top: 8px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
}
.mini-block p { margin: 0 0 1em; }
.mini-block p:last-child { margin: 0; }
.mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }
.mini-block-container ul { margin: 0; padding: 0; }
.mini-block-container li { list-style: none; margin: 0; }
.mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }
.mini-block-container li a:hover { color: var(--accent); }
.mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }
@media screen and (max-width: 850px) {
    .mini-block-container { flex-direction: column; }
}


/* =====================================================================
 * 9. Forms, notifications, profile pages
 * ===================================================================== */
textarea {
    border-radius: var(--radius-sm);
    box-shadow: none;
    background-color: transparent;
    border: 1px solid var(--rule-strong);
    outline: none;
}
textarea:hover { border-color: var(--accent); }
textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--focus);
}

.mw-notification {
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    border-radius: 0;
    box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);
}

.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
}

/* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */
.profile-tab-on { border-bottom: 2px solid var(--accent); }
.profile-tab a, .profile-tab-on a { color: var(--ink) !important; }
#profile-toggle-button {
    background-color: var(--accent-fill);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
}
#profile-toggle-button a { color: var(--on-accent); }
#profile-toggle-button:hover { background-color: #3B7E3D; }
.profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }
#profile-image img,
.c-avatar img,
.profile-info img { border-radius: 50%; }


/* =====================================================================
 * 10. Comments (FlowThread): site colors only; layout is left to the extension
 * ===================================================================== */
#flowthread .comment-submit {
    color: var(--on-accent);
    background-color: var(--accent-fill);
    border: 0;
    text-shadow: none;
}
#flowthread .comment-submit:hover { background-color: #3B7E3D; }
#flowthread .comment-toolbar {
    background-color: var(--paper-sunk);
    border-color: var(--rule);
}
#flowthread .comment-replybox > .comment-body { border-color: var(--rule-strong); }
#flowthread .comment-user,
#flowthread .comment-user a { color: var(--ink-muted); }
#flowthread .comment-like[liked],
#flowthread .comment-report[reported] { color: var(--accent); }


/* =====================================================================
 * 11. Notice box {{Notice}}: .vgr-notice
 *     All colors read the theme variables, so it works under Theme-HJ / Theme-STR / Theme-VGR.
 *     Default = zone color; is-warning = pending / warning; is-danger = spoiler / error.
 *     There is always a text label on the left, so color is never the only signal.
 * ===================================================================== */
.vgr-notice {
    --notice-c: var(--zone-accent, var(--accent));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 16px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 1em 0;
    padding: 12px 16px;
    background: var(--paper-sunk);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--notice-c);
    border-radius: 0;
}
/* Amber: mixed with the current text color, so it darkens on light themes and lightens on dark ones */
.vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }
/* Red: each theme's red-link color */
.vgr-notice.is-danger { --notice-c: var(--link-new); }

.vgr-notice-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 3em;
    padding-top: 3px;
}
.vgr-notice-tag {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--notice-c);
}
.vgr-notice-icon { line-height: 1; color: var(--notice-c); }
.vgr-notice-icon .md,
.vgr-notice-icon .md-lg,
.vgr-notice-icon .md-md,
.vgr-notice-icon .material-icons { font-size: 26px; }
.vgr-notice-icon img { max-width: 32px; height: auto; }

.vgr-notice-main { min-width: 0; }
.vgr-notice-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ink);
}
#mw-content .vgr-notice-body,
#mw-content .vgr-notice-body p,
.vgr-notice-body,
.vgr-notice-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-muted);
}
.vgr-notice-body > p + p { margin-top: 0.5em; }
.vgr-notice-below {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-muted);
}