MediaWiki:Common.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* =========================================================
* CSS 变量定义（主题无关设计）
* ======================================================= */
:root {
/* 滚动条颜色 */
--otto-scrollbar-thumb: rgba(0,0,0,0.2);
--otto-scrollbar-track: transparent;
/* 导航框配色 */
--otto-navbox-title-bg: #a5e4a5;
--otto-navbox-subtitle-bg: #c0ecc0;
--otto-navbox-subgroup-bg: #e6f6e6;
--otto-navbox-even-bg: #f5fcf5;
--otto-navbox-odd-bg: #fdfdfd;
/* 通用间距 */
--otto-spacing-xs: 4px;
--otto-spacing-sm: 6px;
--otto-spacing-md: 10px;
--otto-spacing-lg: 1rem;
}
/* =========================================================
* 字体声明
* ======================================================= */
@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;
}
@font-face {
font-family: "Merriweather";
src: url("/resources/assets/Merriweather-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/resources/assets/JetBrainsMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@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: var(--otto-spacing-sm);
height: var(--otto-spacing-sm);
}
::-webkit-scrollbar-thumb {
background: var(--otto-scrollbar-thumb);
border-radius: calc(var(--otto-spacing-sm) / 2);
}
::-webkit-scrollbar-track {
background: var(--otto-scrollbar-track);
}
* {
scrollbar-width: thin;
scrollbar-color: var(--otto-scrollbar-thumb) var(--otto-scrollbar-track);
}
/* =========================================================
* 编辑器样式
* ======================================================= */
.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: var(--otto-spacing-md);
border-radius: var(--otto-spacing-sm);
overflow: auto;
tab-size: 4;
white-space: pre;
font-variant-ligatures: none;
}
/* =========================================================
* 代码块样式
* ======================================================= */
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: var(--otto-spacing-xs) var(--otto-spacing-sm);
border-radius: var(--otto-spacing-xs);
overflow-x: auto;
}
/* =========================================================
* 加载动画
* ======================================================= */
#loadingIndicator img {
animation: fadePulse 1s ease-in-out infinite;
will-change: opacity;
}
@keyframes fadePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* =========================================================
* 扩展组件样式
* ======================================================= */
/* 社交扩展 */
.visualClear {
clear: both;
}
/* 子页面扩展 */
.subpageNavigation {
background-color: color-mix(in srgb, var(--color-surface-2) 60%, transparent) !important;
}
/* 跨wiki链接 */
a.extiw:not([href*="wiki.ottohub.cn"]) {
color: #00AF89 !important;
}
a.extiw:not([href*="wiki.ottohub.cn"]):hover {
color: #00D7A8 !important;
}
/* 黑幕效果 */
body:not(.skin-citizen) .heimu,
body:not(.skin-citizen) .heimu rt {
background-color: #252525;
transition: color 0.13s linear;
color: #252525;
text-shadow: none;
}
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.extiw,
body:not(.skin-citizen) span.heimu a.mw-disambig,
body:not(.skin-citizen) span.heimu a.mw-redirect {
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;
}
/* =========================================================
* 导航盒子 (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;
}
table.navbox th,
table.navbox .navbox-title,
table.navbox .navbox-abovebelow {
padding: 0 1em;
text-align: center;
}
table.navbox .navbox-group {
font-weight: 700;
white-space: nowrap;
}
.navbox, .navbox-subgroup {
background: var(--otto-navbox-odd-bg);
}
.navbox-title, table.navbox th {
background: var(--otto-navbox-title-bg);
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: var(--otto-navbox-subtitle-bg);
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: var(--otto-navbox-subgroup-bg);
}
.navbox-even {
background: var(--otto-navbox-even-bg);
}
/* =========================================================
* 信息盒子 (Infobox)
* ======================================================= */
.infoBox, .infoTop {
margin: 0 auto;
width: 80%;
box-sizing: border-box;
}
.infoBox-Title, .infoTop-Title {
margin: 3px auto;
padding: 0;
text-align: center;
font-weight: 700;
}
.infoBox-Icon, .infoTop-Icon {
display: table-cell;
padding: 2px 0 2px 0.5em;
vertical-align: middle;
}
.infoBox-Text, .infoTop-Text {
display: table-cell;
padding: 0.25em 0.5em 0.25em 1.3em;
width: 100%;
vertical-align: middle;
}
.infoBox-Below, .infoTop-Below {
margin: 0 auto;
padding: 0;
text-align: center;
}
.infoBoxContent {
border: 1px solid var(--color-surface-1);
border-left-width: 0;
background: var(--color-surface-0);
}
.infoTopContent {
border: 1px solid var(--color-surface-0);
border-left-width: 0;
background: var(--color-surface-2);
}
/* =========================================================
* 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;
}
table.infobox2 .infobox2-header {
background-color: var(--color-surface-4);
color: var(--color-base);
margin: 3px auto;
padding: 0;
text-align: center;
font-weight: 700;
}
table.infobox2 .infobox2-subtitle {
background-color: var(--color-surface-3);
color: var(--color-base);
}
table.infobox2 .infobox2-row {
width: 80px;
background-color: var(--color-surface-2);
color: var(--color-base);
}
/* =========================================================
* 响应式设计
* ======================================================= */
/* 设备差异显示 */
@media (max-width: 1119px) {
.only-desktop {
display: none !important;
}
}
@media (min-width: 1120px) {
.only-mobile {
display: none !important;
}
}
/* 移动端信息盒子适配 */
@media (max-width: 576px) {
.mw-parser-output > * {
float: unset !important;
}
.infotemplatebox,
table.infobox,
table.infobox2,
table.infoboxSpecial,
.infoTop {
width: 100% !important;
float: unset !important;
margin: var(--otto-spacing-lg) 0 !important;
}
}