MediaWiki:Common.css: Difference between revisions

From HUIJIA FUN
← Older editNewer edit →
m Edit
New System
Line 1: Line 1:
@import url('https://fonts.googleapis.com/css2?family=Rubik+80s+Fade&display=swap');
/* =====================================================================
* 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
* ===================================================================== */


* Copyright: CC-BY-SA


/* Some codes are from https://otomad.wiki/MediaWiki:Common.css */
/* =====================================================================
 
* 1. Fonts
/* Font */
* ===================================================================== */
@font-face {
    font-family: 'Yuesong';
    src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');
}


/* Huiwen Mincho: work titles and chapter titles (--font-display).
  The file name is percent-encoded so this file stays ASCII-only. */
@font-face {
@font-face {
     font-family: 'Huiwen';
     font-family: 'Huiwen';
     src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/汇文明朝体.woff2') format('woff2');
     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-face {
     font-family: 'GuZhangHei';
     font-family: 'Yuesong';
     src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/瀞之故障黑体H2.woff2') format('woff2');
     src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');
    font-display: swap;
}
}


@font-face {
/* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a
    font-family: 'Dianzhensong';
  Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System
    src: url('https://static.wikia.nocookie.net/backrooms/images/0/0d/%E7%82%B9%E9%98%B5%E5%AE%8B%E5%AD%97.woff2/revision/latest?cb=20230402095639&format=original&path-prefix=zh') format('woff2');
  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-face {
  font-family: '7397';
    font-family: 'Material Icons';
  src: url('https://soka.cafe/images/c/cf/7397.ttf') format('truetype');
    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 {
/* Modify the maximum height in expanded state */
    font-family: 'Material Icons';
.mw-collapsible.mw-collapsed
    font-style: normal;
{
    font-weight: normal;
     max-height: none;
    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; }


/* Mouse touch */
.custom-link
{
    text-decoration: none;
    color: none;
}


.custom-link:hover
/* =====================================================================
{
* 2. VGR tokens (site default = Archive Zone "paper" palette)
     text-decoration: underline;
*    Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.
     color: blue;
* ===================================================================== */
}
: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;


/* Word breaking */
    --font-display: Huiwen, "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", serif;
p {
    --font-serif: "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  word-break: normal;
    --font-sans: "Source Sans 3", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;


/* Column */
    --radius-xs: 2px;
#left-column
    --radius-sm: 4px;
{
  float: left;
  width: 49%;
}


#right-column
    /* Primary-color variables read by the skin and extensions: all point to Huijia Green */
{
    --color-primary: var(--accent);
  float: right;
    --color-progressive: var(--accent);
  width: 49%;
    --background-color-progressive: var(--accent-fill);
    --border-color-progressive: var(--accent);
}
}


#left-column-full
html.skin-theme-clientpref-night {
{
    --paper: #111613;
  float: left;
    --paper-raised: #18201B;
  width: 50%;
    --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;
}
}


#right-column-full
body { accent-color: var(--accent); }
{
  float: right;
  width: 50%;
}


#middle-column-full
{
  float: middle;
  width: 50%;
}


#left-column-0.3
/* =====================================================================
{
* 3. General utilities
  float: left;
* ===================================================================== */
  width: 29%;
}


#left-column-0.7
.mw-collapsible.mw-collapsed { max-height: none; }
{
  float: left;
  width: 69%;
}


#right-column-0.3
p { word-break: normal; }
{
  float: left;
  width: 29%;
}


#right-column-0.7
cite { font-style: normal; }
{
  float: left;
  width: 69%;
}


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


/* 以下代码均从https://otomad.wiki/MediaWiki:Common.css复制 */
/* Custom link: underline on hover */
.custom-link { text-decoration: none; color: inherit; }
.custom-link:hover { text-decoration: underline; color: var(--link); }


/* 加载Material icons */
/* Two-column layouts
@font-face {
  In the old #left-column-0.3 the "." was read as a class selector, so those rules never
  font-family: 'Material Icons';
  matched. The escaped form below matches id="left-column-0.3" without changing any page. */
   font-style: normal;
#left-column        { float: left;  width: 49%; }
  font-weight: 400;
#right-column      { float: right; width: 49%; }
   font-display: block;
#left-column-full   { float: left;  width: 50%; }
   src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
#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%; }


.material-icons, .md, .md-lg, .md-md, .md-sm {
@media screen and (max-width: 850px) {
  font-family: 'Material Icons';
     #left-column, #right-column,
  font-weight: normal;
    #left-column-full, #right-column-full, #middle-column-full,
  font-style: normal;
    #left-column-0\.3, #left-column-0\.7,
  font-size: 24px;  /* Preferred icon size */
     #right-column-0\.3, #right-column-0\.7,
  display: inline-block;
    #user-page-left, #user-page-right {
  line-height: 1;
        float: none;
  text-transform: none;
        width: 100%;
  letter-spacing: normal;
    }
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  user-select: none;
 
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
 
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
 
  /* Support for IE. */
  font-feature-settings: 'liga';
}
.md-lg {
    font-size: 60px;
}
.md-md {
    font-size: 30px;
}
.md-sm {
     font-size: 10px;
}
 
/* Main Page CSS */
body.page-Main_Page #firstHeading,
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 #catlinks-sidebar,  
body.page-Main_Page #mw-normal-catlinks,  
body.page-Main_Page #ca-view {
    display: none !important;
}
 
body.page-Main_Page #firstHeading {
    display: none !important;
}
 
body.page-Main_Page #siteSub {
     display: none;
}
 
.page-留言板 #mw-wrapper #flowthread {
margin-top: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
margin: 24px 0 4px;
}
 
.page-留言板 #mw-wrapper #flowthread .comment-paginator {
border: 0;
display: flex;
justify-content: flex-end;
}
 
.page-留言板 #mw-wrapper #flowthread .comment-paginator span {
display: flex;
border: 0;
width: 36px;
height: 36px;
padding: 0;
margin: 0;
text-align: center;
align-items: center;
justify-content: center;
font-size: 14px;
border-radius: 0;
background-color: #fafafa;
box-shadow: inset 0px 10px 4px -4px rgba(0, 0, 0, 0.04);
}
 
.page-留言板 #mw-wrapper #flowthread .comment-paginator span[current] {
color: white;
background-color: #fb7299;
box-shadow: 0 2px 4px rgba(240, 110, 142, 0.6);
font-weight: bold;
border-radius: 4px !important;
}
 
.page-留言板 #mw-wrapper #flowthread .comment-paginator span:first-child{
border-radius: 4px 0 0 4px;
}
}


.page-留言板 #mw-wrapper #flowthread .comment-paginator span:last-child{
/* Main Page: hide the page title, page tabs and category bar */
border-radius: 0 4px 4px 0;
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 #catlinks-sidebar,
body.page-Main_Page #mw-normal-catlinks { display: none !important; }


.res-img img {
/* Scroll-to-top / bottom buttons */
max-width:100%;
img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }
height:auto;
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{
.repost-circle {
     display: inline-block;
     display: inline-block;
     margin-left: 5px;
     margin-left: 5px;
    border: solid 1px;
     padding: 3px 6px;
    border-radius: 100px;
     padding: 3px;
     font-size: 12px;
     font-size: 12px;
     line-height: 1;
     line-height: 1;
     color: #e06386;
     color: var(--accent);
     border: 1px #e06386 solid;
     border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
}
}
.repost-circle a.external{
.repost-circle a.external {
     background: none!important;
     background: none !important;
     padding-right: 0px!important;
     padding-right: 0 !important;
     color: #e06386!important;
     color: var(--accent) !important;
    box-sizing: border-box!important;
}
}


/* 本段内容来自萌娘百科 https://zh.moegirl.org.cn/MediaWiki:Gadget-site-styles.css 感谢贡献！*/
 
/* 版权协定：知识共享 署名-非商业性使用-相同方式共享 3.0 */
/* =====================================================================
/* 黑幕模板配合CSS */
* 4. Spoiler blackout (adapted from Moegirlpedia)
/* 把这几行单独拎出来写，否则会被Firefox合并到“.heimu a”这条规则，然后又被上面的“点过外链不变色”规则override */
* ===================================================================== */
.heimu,
.heimu,
.heimu rt {
.heimu rt { background-color: #252525; }
    background-color: #252525;
}
span.heimu a.external,
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw,
span.heimu a.extiw:visited {
span.heimu a.extiw:visited { color: #252525; }
    color: #252525;
}
.heimu,
.heimu,
.heimu a,
.heimu a,
a .heimu,
a .heimu,
.heimu a.new {
.heimu a.new { color: #252525; text-shadow: none; }
    color: #252525;
    text-shadow: none;
}
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off {
body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }
    transition: color .13s linear;
    color: white;
}
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off {
body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }
    transition: color .13s linear;
    color: lightblue;
}
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu:hover .new {
body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }
    transition: color .13s linear;
 
    color: #FCC;
 
}
/* =====================================================================
/* info类模板 */
* 5. Info boxes
* ===================================================================== */
.infoBox {
.infoBox {
     margin: 10px auto;
     margin: 10px auto;
     width: 80%;
     width: 80%;
     box-shadow: 0 1px 3px 0px rgb(0 0 0 / 20%);
     border: 1px solid var(--rule);
     border-radius: 4px;
     border-top: 2px solid var(--accent);
}
     background: var(--paper-raised);
@media screen and (max-width: 850px) {
.infoBox {
float: unset !important;
     width: 100% !important;
    clear: both;
}}
.infoBox a, p{
    word-break: normal;
}
}
.infoBox a { word-break: normal; }
.infoBoxTitle {
.infoBoxTitle {
     margin: 3px auto;
     margin: 3px auto;
     padding: 6px 0 0 0;
     padding: 6px 0 0;
     text-align: center;
     text-align: center;
     font-weight: 700;
     font-weight: 700;
    color: var(--ink);
}
}
.infoBoxIcon {
.infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }
    display: table-cell;
.infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }
    padding: 2px 0 2px .5em;
.infoBoxContent { border: 0; background: var(--paper-sunk); }
    vertical-align: middle;
.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; }
}
}
.infoBoxText {
@media screen and (min-width: 851px) {
     display: table-cell;
     .infobox { width: 300px; margin: 1em 0 30px 30px; }
    padding: .25em .5em .25em 1.3em;
    width: 100%;
    vertical-align: middle;
}
}
.infoBoxContent {
 
     border: 1px solid #ddd;
.fieldset {
     border-left-width: 0;
     border: 1px solid var(--rule);
    background: #fbfbfb;
     border-radius: var(--radius-sm);
}
     padding: 0.35em 1.625em 0.75em;
.infoBoxBelow {
    margin: 0 auto;
     padding: 0;
    text-align: center;
}
/* wikitable green */
table.wikitable-green {
    background: #c9f6e1
}
.wikitable-green th {
    background: #13ec93
}
.wikitable-green td {
    background: #f3f3f3
}
}


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




/* 教程链接列表 */
/* =====================================================================
/* 目前全部移动到 https://otomad.wiki/Template:链接列表/style.css 下
* 6. Tables
.tutorial-links {
* ===================================================================== */
width: 100%;
table.wikitable {
margin-bottom: 6px;
    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;
}
}
.tutorial-links>tbody>tr>td:first-child {
table.wikitable > tr > th,
text-align: center;
table.wikitable > * > tr > th {
width: 35px;
    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);
}
}
.tutorial-links>tbody>tr>td:first-child>span {
table.wikitable > tr > td,
border: 1px #e06386 solid;
table.wikitable > * > tr > td {
border-radius: 4px;
    color: var(--ink);
color: #e06386;
    padding: 9px 12px;
font-size: 12px;
    line-height: 1.6;
height: 14px;
    border: none;
padding: 2px 4px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
}
.tutorial-links>tbody>tr>td:nth-child(2) {
table.wikitable > tbody > tr:last-of-type > td { border-bottom: none; }
padding-left: 6px;
table.wikitable > tbody > tr:hover td { background: var(--accent-tint); }
}
 
.tutorial-links>tbody>tr>td:nth-child(3) {
/* Light green table (old class name kept, now reads the variables) */
font-size: 12px;
table.wikitable-green { background: var(--accent-tint); }
color: grey;
.wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }
text-align: right;
.wikitable-green td { background: var(--paper-raised); }
 
@media screen and (max-width: 768px) {
    table.wikitable { display: block; overflow-x: auto; }
}
}
*/


/*scrollUpButton样式*/
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;
}


/* 从https://zh.wikipedia.org/wiki/MediaWiki:Common.css引入的样式 */
/* =====================================================================
/* Style for horizontal lists (separator following item) */
* 7. hlist / navbox / navbar (adapted from Wikipedia)
.hlist dl,
* ===================================================================== */
.hlist ol,
.hlist dl, .hlist ol, .hlist ul { margin: 0; }
.hlist ul {
.hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }
    margin: 0;
.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,
}
.hlist dd,
.hlist dt,
.hlist li {
    display: inline;
    margin: 0;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
.hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }
display: inline;
.hlist dt:after { content: ": "; }
}
.hlist dd:after, .hlist li:after { content: " \00B7 "; font-weight: bold; }
/* Generate interpuncts */
.hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }
.hlist dt:after {
.hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }
    content: " :";
.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 dd:after,
.hlist.hnum ol li { counter-increment: level1; }
.hlist li:after {
.hlist.hnum ol li:before { content: counter(level1) " "; }
    content: " · ";
.hlist.hnum ol ol li { counter-increment: level2; }
    font-weight: bold;
.hlist.hnum ol ol li:before { content: counter(level2) " "; }
}
 
.hlist dd:last-child:after,
/* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */
.hlist dt:last-child:after,
.navbox {
.hlist li:last-child:after {
     width: 100%;
    content: none;
}
/* for IE 8 */
.hlist dd.nopunct:after,
.hlist dt.nopunct:after,
.hlist li.nopunct:after {
    content: none;
}
/* Add parens around nested lists */
.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: "）";
}
/* Put numbers in ordered lists */
.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) " ";
}
/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
    border: 1px solid #a2a9b1;
     width: 100%;  
     margin: auto;
     margin: auto;
     clear: both;
     clear: both;
Line 467: Line 347:
     text-align: center;
     text-align: center;
     padding: 1px;
     padding: 1px;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    background: var(--paper-raised);
}
}
.navbox-inner,
.navbox-inner, .navbox-subgroup { width: 100%; }
.navbox-subgroup {
.navbox-subgroup { background: var(--paper-raised); }
    width: 100%;
.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 th, .navbox-title { background: var(--accent-tint); color: var(--ink); }
.navbox-title,
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }
.navbox-abovebelow {
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }
    text-align: center;       /* Title and above/below styles */
th.navbox-group { white-space: nowrap; text-align: right; }
    padding-left: 1em;
.navbox-even { background: var(--paper); }
    padding-right: 1em;
.navbox-odd { background: transparent; }
}
table.navbox + table.navbox { margin-top: -1px; }
th.navbox-group {            /* Group style */
.navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,
    white-space: nowrap;
.navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }
    /* @noflip */
.navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }
    text-align: right;
.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; }
.navbox,
 
.navbox-subgroup {
.navbar { display: inline; font-weight: normal; }
    background: #fdfdfd;      /* Background color */
.navbar ul { display: inline; white-space: nowrap; }
}
.navbar li { word-spacing: -0.125em; }
.navbox-list {
.navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }
    border-color: #fdfdfd;    /* Must match background color */
.navbox .navbar { display: block; }
}
.navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }
.navbox th,
 
.navbox-title {
.collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }
    background: #ccccff;     /* Level 1 color */
.navbox .collapseButton { width: 8em; }
}
 
.navbox-abovebelow,
@media screen and (max-width: 850px) {
th.navbox-group,
    th.navbox-group { white-space: normal; }
.navbox-subgroup .navbox-title {
    th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }
    background: #ddddff;     /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;     /* Level 3 color */
}
.navbox-even {
    background: #f7f7f7;     /* Even row striping */
}
.navbox-odd {
    background: transparent; /* Odd row striping */
}
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */
    margin-top: -1px;         /* (doesn't work for IE6, but that's okay)      */
}
.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;       /* Adjust hlist padding in navboxes */
}
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
    white-space: nowrap;     /* Nowrap list items in navboxes */
}
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
    white-space: normal;     /* But allow parent list items to be wrapped */
}
ol + table.navbox,
ul + table.navbox {
    margin-top: 0.5em;       /* Prevent lists from clinging to navboxes */
}
}


/* Default styling for Navbar template */
.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;
}
/* Navbar styling when nested in navbox */
.navbox .navbar {
    display: block;
}
.navbox-title .navbar {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
    /* @noflip */
    margin-right: 0.5em;
    width: 8em;
}


/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
/* =====================================================================
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
* 8. Entry cards: rec-grid / rec-card / rec-link (VGR Design System)
.collapseButton {      
*   Descriptive entries use rec-card inside rec-grid-2; short terms use rec-link inside rec-grid-4.
     /* @noflip */
* ===================================================================== */
    float: right;
.rec-grid {
     font-weight: normal;
     display: grid;
    /* @noflip */
     gap: var(--space-3, 12px);
     margin-left: 0.5em;
     margin: 0.8em 0 1.2em;
    /* @noflip */
    text-align: right;
    width: auto;
}
}
/* In navboxes, the show/hide button balances the v·d·e links
.rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  from [[Template:Navbar]], so they need to be the same width. */
.rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.navbox .collapseButton {
.rec-card {
     width: 8em;
     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); }
.profile-tab{
.rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }
background-color: unset;
.rec-card-title a { color: inherit; }
padding: 9px 10px 10px;
.rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }
font-size: 16px;
.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;
}
}
.profile-tab-on a:visited{
.rec-link a { color: var(--ink); }
color: #000 !important;
.rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }
}
@media screen and (max-width: 850px) {
.profile-tab a:visited{
    .rec-grid-2 { grid-template-columns: 1fr; }
color: #000 !important;
    .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.profile-tab-on a, .profile-tab a{
color: #000;
}
.profile-tab-on{
background-color: unset;
padding: 9px 10px 10px;
font-size: 16px;
border-bottom: solid 2px #FB7299;
}
.eye-container .title{
color: #000;
font-size: 14px;
}
.eye-container{
box-shadow: none;
opacity: 1.0;
}
/*提示框*/
.mw-notification{
border: none;
border-radius: 4px;
box-shadow: 0 0 12px rgb(0 0 0 / 15%);
}
/*修复和修改infobox*/
@media screen and (max-width: 850px){
.infobox{
width: 100%;
margin: 0em 0em 2em;
}}
@media screen and (min-width: 851px){
.infobox{
width: 300px;
margin: 1em 0 30px 30px;
}}
.infoBoxContent{
border: 0;
border-radius: 4px;
}
}


.fieldset{
/* Compatibility layer: the old mini-block class names. Some templates still use them
border: 1px solid #c7c7c7;
  (Main Page sub-templates, hub pages built on rec-grid). Delete this block once those
border-radius: 4px;
  templates have moved to rec-card / rec-link. */
padding: 0.35em 1.625em 0.75em;
}
textarea {
border-radius: 4px;
box-shadow: none;
background-color: transparent;
border: 1px solid var(--border-color-base--darker);
    outline: none;
}
textarea:hover {
border: 1px solid #fb7299;
background: transparent;
}
textarea:focus-visible {
box-shadow: inset 0 0 0 1px #fb7299;
    border: 1px solid #fb7299;
    background: transparent;
}
/*导航盒*/
.navbox th, .navbox-title {
background: #FCA6BF;
}
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title {
background: #FDBFD0;
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #FED7E2;
}
.navbox-even {
background: #FFF0F4;
}
.navbox{
border: 0;
}
/* 资料卡 */
#profile-toggle-button{
background-color: #fb7299;
border-radius: 2px;
padding: 5px 10px;
transition: box-shadow 200ms,transform 200ms;
box-shadow: 0 4px 4px rgb(251 114 153 / 30%);
}
#profile-toggle-button a {
font-weight: bold;
}
#profile-toggle-button:hover {
box-shadow: 0 9px 9px rgb(251 114 153 / 30%);
}
#profile-toggle-button:active {
box-shadow: 0 0 0 rgb(251 114 153 / 30%);
transform: scale(.95);
background-color: #bd5774;
}
#profile-toggle-button:focus, #profile-toggle-button:focus-visible, #profile-toggle-button:focus-within {
box-shadow: inset 0 0 0 1px #fb7299, inset 0 0 0 2px #fff;
outline: 1px solid transparent;
}
.profile-on{
background-color: #fff6c3;
padding: 5px 10px 5px 10px;
border-radius: 4px;
border: none;
}
/*按钮动画*/
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button{
transition: background-color 100ms,color 100ms,border-color 100ms,box-shadow 100ms,transform 200ms
}
/*圆形头像*/
#profile-image img{
    border-radius: 50%;
    padding: 4px;
    border: none;
    width: 75px;
}
.c-avatar img{
border-radius: 50%;
}
.profile-info img {
    border-radius: 50%;
}
/*解决cite定位内文字显示为斜体的问题*/
cite {
font-style: normal;
}
/* 首页dpl列表相关样式 */
.mini-block {
.mini-block {
    box-sizing: border-box;
     width: 100%;
     width: 100%;
    min-width: 20%;
     padding: 16px;
     padding: 16px;
     margin-top: 8px;
     margin-top: 8px;
     box-shadow: 0 3px 6px rgba(0,0,0,0.04);
     background: var(--paper-raised);
     border: 1px solid; border-color: rgba(0,0,0,0.05);
     border: 1px solid var(--rule);
    border-radius: 8px;
    word-break: normal;
    box-sizing: border-box;
}
.mini-block p {
margin: 0 0 1em 0;
}
.mini-block p:last-child {
margin: 0;
}
.mini-block-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
}
.mini-block-list a{
color: #212121;
}
.mini-block-list a.new{
color: #212121;
}
.mini-block-list a:hover{
color: #00aeec;
}
.mini-block-list li a:hover {
    color: #212121;
}
.mini-block-container li{
    border-radius: 4px;
    margin: 0;
    list-style: none;
    cursor: pointer;
    transition: background cubic-bezier(0.22,0.58,0.12,0.98) 0.4s;
}
.mini-block-title {
font-size: 24px;
font-weight: 500;
}
@media screen and (min-width: 851px) {
.mini-block-container li:hover {
    background: #0000000d;
}
.mini-block-container li:hover a {
transform: translateX(5px);
}
}
.mini-block-container ul {
    margin: 0;
    padding: 0;
}
.mini-block-container li a {
    padding: .5em .4em;
    display: inline-block;
    width: 100%;
    transition: transform cubic-bezier(0.22,0.58,0.12,0.98) 0.4s;
}
}
.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) {
@media screen and (max-width: 850px) {
    .mini-block {
     .mini-block-container { flex-direction: column; }
        align-self: stretch;
        width: auto;
    }
     .mini-block-container {
    flex-direction: column;
    }
}
}




/*针对移动端用户页的竖向排列*/
/* =====================================================================
@media screen and (max-width: 850px){
* 9. Forms, notifications, profile pages
#user-page-left {
* ===================================================================== */
     width: 100%;
textarea {
     float: none;}
    border-radius: var(--radius-sm);
#user-page-right {
    box-shadow: none;
     width: 100%;
    background-color: transparent;
     float: none;
     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 {
@media screen and (max-width: 850px){
    border: 1px solid var(--rule);
th.navbox-group {
     border-top: 2px solid var(--accent);
white-space: normal;
     border-radius: 0;
}
     box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);
th.navbox-group div {
     line-height: 1.3em;
     width: 10px;
     margin: 10px 0;
}
}
}


/* 留言板FlowThread隐藏热门 */
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
.page-留言板 .comment-container-top {
    transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
display: none;
}
}


/* 上传文件InfoBox排版增强修复 */
/* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */
.mw-special-Upload i.md {
.profile-tab-on { border-bottom: 2px solid var(--accent); }
display: flex;
.profile-tab a, .profile-tab-on a { color: var(--ink) !important; }
}
#profile-toggle-button {
.mw-special-Upload .infoBoxText li {
    background-color: var(--accent-fill);
margin-top: 6px;
    border-radius: var(--radius-sm);
margin-bottom: 0;
    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%; }


/* 设置原生html组件的颜色 */
body {
accent-color: #ea6b8f;
}


/* 现代化FlowThread主题 */
/* =====================================================================
* 10. Comments (FlowThread): site colors only; layout is left to the extension
* ===================================================================== */
#flowthread .comment-submit {
#flowthread .comment-submit {
font-family: inherit;
    color: var(--on-accent);
color: white;
    background-color: var(--accent-fill);
border: 0;
    border: 0;
background-color: #fb7299;
    text-shadow: none;
background-color: var(--color-primary);
text-shadow: none;
top: 0;
right: 0;
border-radius: 0 0 var(--border-radius--small) 0;
}
}
 
#flowthread .comment-submit:hover { background-color: #3B7E3D; }
#flowthread .comment-toolbar {
#flowthread .comment-toolbar {
height: 36px;
    background-color: var(--paper-sunk);
border: 0;
    border-color: var(--rule);
border-top: 1px solid var(--border-color-base--darker);
background-color: #f8f9fa;
background-color: var(--color-surface-2);
border-radius: 0 0 var(--border-radius--small) var(--border-radius--small);
margin-bottom: 0;
}
 
#flowthread .comment-thread {
border: 0;
padding: 0;
}
 
#flowthread .comment-avatar {
border-radius: 100%;
overflow: hidden;
}
 
#flowthread .comment-text {
font-size: inherit;
}
 
#flowthread .comment-user, .comment-user a {
font-size: inherit;
color: var(--color-base--subtle);
}
 
#flowthread .comment-footer {
font-size: 14px;
}
 
#flowthread .flowthread-btn-wikitext,
#flowthread .flowthread-btn-preview {
width: 36px;
height: 36px;
margin: 0;
box-shadow: none;
background-color: transparent;
border-radius: 100%;
border: 0 !important;
}
 
#flowthread .flowthread-btn-preview {
transform: translateX(-100%);
}
 
#flowthread .flowthread-btn-wikitext.on+.flowthread-btn-preview {
transform: none;
}
 
#flowthread .flowthread-btn-wikitext:hover,
#flowthread .flowthread-btn-preview:hover {
background-color: var(--background-color-quiet--hover);
}
 
#flowthread .comment-submit {
height: inherit;
}
 
#flowthread .comment-replybox > .comment-body {
border: 1px solid var(--border-color-base--darker);
border-radius: var(--border-radius--small);
padding-left: 0;
margin-left: 60px;
}
 
#flowthread .comment-replybox > .comment-body:has(textarea:focus-visible) {
border-color: var(--color-primary);
}
 
#flowthread .comment-replybox > .comment-body textarea, #flowthread .comment-preview {
background-color: transparent;
border: 0;
box-shadow: none;
}
 
#flowthread .comment-post,
#flowthread .comment-container > .comment-thread {
padding: 12px 0;
}
 
#flowthread .comment-reply::before,
#flowthread .comment-like::before,
#flowthread .comment-report::before,
#flowthread .comment-delete::before {
display: inline-block;
background-image: none;
direction: ltr;
font-family: 'Material Icons';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1;
text-align: center;
text-indent: 0;
text-rendering: optimizeLegibility;
text-transform: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
word-wrap: normal;
width: 18px;
height: 18px;
color: black;
font-size: 18px;
opacity: var(--opacity-icon-base);
border-radius: 100%;
}
 
#flowthread .comment-reply::before {
content: 'reply';
}
#flowthread .comment-like::before {
content: 'favorite';
}
#flowthread .comment-report::before {
content: 'flag';
}
#flowthread .comment-delete::before {
content: 'delete';
}
}
#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-like[liked],
#flowthread .comment-report[reported] {
#flowthread .comment-report[reported] { color: var(--accent); }
color: var(--color-primary);
}
#flowthread .comment-like[liked]::before,
#flowthread .comment-report[reported]::before {
opacity: 1;
color: var(--color-primary);
}

Revision as of 16:23, 9 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
 * ===================================================================== */

/* 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 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 #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); }
Retrieved from "https://en.huijia.fun/index.php?title=MediaWiki:Common.css&oldid=182"