MediaWiki:Common.css
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* vector 定义citizen变量 */
/* 1. 默认浅色变量，针对 Vector 皮肤 */
.skin-vector {
--color-surface-0: #eef2f9;
--color-surface-1: #e6ebf6;
--color-surface-2: #dde5f2;
--color-surface-3: #d3dff3;
--color-surface-4: #c9d8f3;
}
/* 2. 手动浅色模式，优先级最高 */
.skin-vector.theme-light {
--color-surface-0: #eef2f9;
--color-surface-1: #e6ebf6;
--color-surface-2: #dde5f2;
--color-surface-3: #d3dff3;
--color-surface-4: #c9d8f3;
}
/* 3. 手动深色模式，优先级最高 */
.skin-vector.theme-dark {
--color-surface-0: #07090d;
--color-surface-1: #0a0d14;
--color-surface-2: #0d121b;
--color-surface-3: #0f1624;
--color-surface-4: #101a2d;
}
/* 4. 系统自动深浅色，仅在无手动类时生效 */
.skin-vector:not(.theme-light):not(.theme-dark) {
/* 默认浅色，已在第1条定义，这里可省略或写补充 */
/* 深色模式系统 */
@media (prefers-color-scheme: dark) {
--color-surface-0: #07090d;
--color-surface-1: #0a0d14;
--color-surface-2: #0d121b;
--color-surface-3: #0f1624;
--color-surface-4: #101a2d;
}
}
/* =========================================================
* @font-face – 字体声明
* ======================================================= */
/* FOT-Rodin Pro（站点 Logo / 标题）*/
@font-face {
font-family: "FOT-Rodin Pro";
src: url("/resources/assets/FOT-Rodin Pro DB.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* 霞鹜文楷 – 正文字体（中文）*/
@font-face {
font-family: "WenKai";
src: url("/resources/assets/LXGWWenKai-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Merriweather – 英文衬线 */
@font-face {
font-family: "Merriweather";
src: url("/resources/assets/Merriweather-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* JetBrains Mono – 等宽英文 */
@font-face {
font-family: "JetBrains Mono";
src: url("/resources/assets/JetBrainsMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* 霞鹜文楷 Mono – 等宽中文 */
@font-face {
font-family: "WenKai Mono";
src: url("/resources/assets/LXGWWenKaiMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* 全局细线滚动条样式 */
::-webkit-scrollbar {
width: 6px; /* 纵向滚动条宽度 */
height: 6px; /* 横向滚动条高度 */
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2); /* 滚动条滑块颜色 */
border-radius: 3px; /* 滚动条滑块圆角 */
}
::-webkit-scrollbar-track {
background: transparent; /* 滚动条轨道背景 */
}
/* Firefox 支持 */
* {
scrollbar-width: thin; /* 滚动条宽度 */
scrollbar-color: rgba(0,0,0,0.2) transparent;/* 滚动条颜色 */
}
/* =========================================================
* 编辑器（WikiEditor / CodeMirror）
* ======================================================= */
.wikiEditor-ui {
font-family: "WenKai Mono", "JetBrains Mono", monospace !important;
font-size: 14px;
line-height: 1.6;
color: var(--color-base,#1f1f1f);
background-color: var(--background-color-neutral-subtle,#f9f9f9);
border: 1px solid #ccc;
padding: 10px;
border-radius: 6px;
overflow: auto;
tab-size: 4;
white-space: pre;
font-variant-ligatures: none;
}
/* =========================================================
* <pre> / <code> / .mw-code
* ======================================================= */
pre,
code,
.mw-code {
font-family: "JetBrains Mono", monospace;
font-size: 0.95em;
background-color: var(--background-color-neutral-subtle,#f9f9f9);
color: var(--color-emphasized,#222);
padding: 4px 6px;
border-radius: 4px;
overflow-x: auto;
}
/* =========================================================
* 加载动画
* ======================================================= */
#loadingIndicator img {
animation: fadePulse 1s ease-in-out infinite;
will-change: opacity;
}
@keyframes fadePulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
/* 设置非本站的跨 Wiki 链接颜色 */
a.extiw:not([href*="wiki.ottohub.cn"]),
a.extiw:not([href*="wiki.ottohub.cn"]):visited {
color: #00AF89;
}
/* 设置非本站的跨 Wiki 链接在悬停时的颜色 */
a.extiw:not([href*="wiki.ottohub.cn"]):hover,
a.extiw:not([href*="wiki.ottohub.cn"]):hover:visited {
color: #00D7A8;
}
/* 黑幕相关 - 非 Citizen 皮肤适用 */
body:not(.skin-citizen) .heimu,
body:not(.skin-citizen) .heimu rt {
background-color: #252525;
}
body:not(.skin-citizen) .heimu,
body:not(.skin-citizen) .heimu a,
body:not(.skin-citizen) a .heimu,
body:not(.skin-citizen) a.new .heimu,
body:not(.skin-citizen) span.heimu a.new,
body:not(.skin-citizen) span.heimu a.external,
body:not(.skin-citizen) span.heimu a.external:visited,
body:not(.skin-citizen) span.heimu a.extiw,
body:not(.skin-citizen) span.heimu a.extiw:visited,
body:not(.skin-citizen) span.heimu a.mw-disambig,
body:not(.skin-citizen) span.heimu a.mw-redirect {
transition: color 0.13s linear;
color: #252525;
text-shadow: none;
}
body:not(.skin-citizen) span.heimu:hover,
body:not(.skin-citizen) span.heimu:active {
color: white;
}
body:not(.skin-citizen) span.heimu:hover a,
body:not(.skin-citizen) a:hover span.heimu {
color: lightblue;
}
body:not(.skin-citizen) span.heimu:hover a:visited,
body:not(.skin-citizen) a:visited:hover span.heimu {
color: #C5CAE9;
}
body:not(.skin-citizen) span.heimu:hover a.new,
body:not(.skin-citizen) a.new:hover span.heimu {
color: #FCC;
}
body:not(.skin-citizen) span.heimu a.new:hover:visited,
body:not(.skin-citizen) a.new:hover:visited span.heimu {
color: #EF9A9A;
}
body:not(.skin-citizen) span.heimu:hover a.extiw:visited,
body:not(.skin-citizen) a.extiw:visited:hover span.heimu {
color: #D1C4E9;
}
/* navbox */
table.navbox{
border:1px solid #aaa;
clear:both;
margin:auto;
padding:1px;
text-align:center;
width:100%;
}
table.navbox + table.navbox{
margin-top:-1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th{
padding-left:1em;
padding-right:1em;
text-align:center;
}
.navbox-group{
font-weight:700;
white-space:nowrap;
}
.navbox,
.navbox-subgroup{
background:none repeat scroll 0 0 var(--theme-card-background-color, #fdfdfd);
}
.navbox-list{
border-color:#fdfdfd;
}
.navbox-title,
table.navbox th{
background:none repeat scroll 0 0 #a5e4a5;
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title{
background:none repeat scroll 0 0 #c0ecc0;
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow{
background:none repeat scroll 0 0 #e6f6e6;
}
.navbox-even{
background:none repeat scroll 0 0 #f5fcf5;
}
.navbox-odd{
background:none repeat scroll 0 0 #fdfdfd;
}
/* infobox */
.infoBox{
margin:0 auto;
width:80%;
box-sizing:border-box;
}
.infoBoxTitle{
margin:3px auto;
padding:0;
text-align:center;
font-weight:700;
}
.infoBoxIcon{
display:table-cell;
padding:2px 0 2px 0.5em;
vertical-align:middle;
}
.infoBoxText{
display:table-cell;
padding:0.25em 0.5em 0.25em 1.3em;
width:100%;
vertical-align:middle;
}
.infoBoxContent{
border:1px solid var(--color-surface-1);
border-left-width:0;
background:var(--color-surface-0);
}
.infoBoxBelow{
margin:0 auto;
padding:0;
text-align:center;
}
.audio-trigger { cursor: pointer; }
/* 设备差异显示 */
@media screen and (max-width: 768px) {
/* 手机端显示 */
.only-desktop { display: none !important; }
}
@media screen and (min-width: 769px) {
/* 桌面端显示 */
.only-mobile { display: none !important; }
}
/* Infobox2 基础结构 */
table.infobox2 {
font-size: 89%;
text-align: center;
width: 280px;
max-width: 100%;
float: right;
background-color: var(--color-surface-1);
color: var(--color-base);
border-collapse: separate;
border-spacing: 2px;
}
/* 顶部标题栏 */
.infobox2-header {
background-color: var(--color-surface-4);
color: var(--color-base);
margin:3px auto;
padding:0;
text-align:center;
font-weight:700;
}
/* 横栏标题（如-=） */
.infobox2-subtitle {
background-color: var(--color-surface-3);
color: var(--color-base);
}
/* 信息栏每项左侧字段 */
.infobox2-row {
width: 80px;
background-color: var(--color-surface-2);
color: var(--color-base);
}
/* infobox2结束 */
/* infobox移动设备 */
@media (max-width: 576px) {
.mw-parser-output > * {
float: unset !important;
}
.infotemplatebox,
table.infobox,
table.infobox2,
table.infoboxSpecial {
width: 100% !important;
float: unset !important;
margin: 1rem 0 !important;
}
}