MediaWiki:Citizen.css
MediaWiki界面页面
更多操作
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* =============================================
Minecraft Wiki 浅色主题 (基于 Citizen 皮肤)
============================================= */
:root {
/* 基础文字颜色 */
--color-base: #202122;
--color-base--hover: #404244;
--color-emphasized: #101418;
--color-subtle: #54595d;
--color-placeholder: #72777d;
--color-disabled: #a2a9b1;
--color-inverted: #fff;
/* 链接色(Minecraft 风格的绿色系) */
--color-progressive: #3a971e;
--color-progressive--hover: #2d7316;
--color-progressive--active: #1f4f0e;
--color-visited: #6a60b0;
/* 强调色(橙红色,用于警告等) */
--color-destructive: #bf3c2c;
--color-destructive--hover: #9f3526;
--color-error: #bf3c2c;
--color-warning: #886425;
--color-success: #177860;
/* 背景色 - 浅色主题核心 */
--background-color-base: #fcfcfc;
--background-color-neutral: #eaecf0;
--background-color-neutral-subtle: #f8f9fa;
--background-color-interactive: #eaecf0;
--background-color-interactive--hover: #dadde3;
--background-color-disabled: #dadde3;
--background-color-progressive: #3a971e;
--background-color-progressive--hover: #2d7316;
--background-color-progressive-subtle: #e8f5e9;
--background-color-destructive-subtle: #ffe9e5;
/* 边框颜色 */
--border-color-base: #a2a9b1;
--border-color-subtle: #c8ccd1;
--border-color-interactive: #72777d;
--border-color-progressive: #3a971e;
/* 阴影 - 浅色下更柔和 */
--box-shadow-color-base: rgba(0,0,0,0.1);
--box-shadow-color-progressive--focus: #3a971e;
/* 圆角保持方形感(Minecraft 风格) */
--border-radius-base: 2px;
--border-radius-medium: 4px;
--border-radius-large: 8px;
/* 字体大小(保持可读) */
--font-size-small: 0.875rem;
--font-size-medium: 1rem;
--font-size-large: 1.125rem;
}
/* 全局基础样式 */
body {
background-color: var(--background-color-base);
color: var(--color-base);
}
.mw-body {
background-color: #ffffff;
border: 1px solid var(--border-color-subtle);
}
/* 链接颜色 */
a {
color: var(--color-progressive);
}
a:visited {
color: var(--color-visited);
}
a:hover {
color: var(--color-progressive--hover);
}
/* 头部导航栏(浅色版) */
.citizen-header {
background-color: #ffffff;
border-bottom: 1px solid var(--border-color-subtle);
}
/* 侧边栏菜单 */
.citizen-sidebar .citizen-menu__heading {
color: var(--color-progressive);
border-left-color: var(--color-progressive);
}
.citizen-sidebar ul li a:hover {
background-color: var(--background-color-neutral-subtle);
}
/* 页脚 */
.citizen-footer {
background-color: var(--background-color-neutral);
color: var(--color-subtle);
border-top: none;
}
.citizen-footer a {
color: var(--color-progressive);
}
/* 搜索框 */
.citizen-search-box input {
background-color: #ffffff;
border-color: var(--border-color-subtle);
color: var(--color-base);
}
/* 表格(游戏数据表风格) */
.wikitable {
background-color: #ffffff;
border: 1px solid var(--border-color-subtle);
}
.wikitable th {
background-color: var(--background-color-neutral);
color: var(--color-progressive);
}
.wikitable tr:nth-child(even) {
background-color: var(--background-color-neutral-subtle);
}
/* Minecraft 风格按钮(浅色版) */
.mc-button {
background-color: #ebebeb;
border: 2px solid var(--border-color-base);
color: var(--color-base);
font-weight: bold;
text-transform: uppercase;
transition: all 0.1s ease;
display: inline-block;
padding: 6px 12px;
border-radius: var(--border-radius-base);
}
.mc-button:hover {
background-color: #e0e0e0;
border-color: var(--color-progressive);
transform: translateY(-1px);
}
/* 区块边框效果(浅色版) */
.mw-parser-output .block-border {
border: 2px solid var(--border-color-subtle);
background-color: var(--background-color-neutral-subtle);
padding: 8px;
margin: 8px 0;
position: relative;
}
.mw-parser-output .block-border::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 1px dashed var(--color-progressive);
pointer-events: none;
}
/* 工具提示(浅色版) */
.mc-tooltip {
position: relative;
display: inline-block;
}
.mc-tooltip .tooltip-text {
visibility: hidden;
background-color: var(--background-color-base);
color: var(--color-base);
border: 1px solid var(--color-progressive);
text-align: center;
padding: 4px 8px;
border-radius: var(--border-radius-base);
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.mc-tooltip:hover .tooltip-text {
visibility: visible;
}
/* 可选:添加一个淡淡的草方块纹理背景(非常浅) */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 15px,
rgba(0, 0, 0, 0.02) 15px,
rgba(0, 0, 0, 0.02) 16px
), repeating-linear-gradient(
90deg,
transparent,
transparent 15px,
rgba(0, 0, 0, 0.02) 15px,
rgba(0, 0, 0, 0.02) 16px
);
z-index: -1;
}