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。
/* 这里所有CSS都会加载给Citizen皮肤的用户 */
/* ----------------------------------------------------------
1. Infobox 基础样式
---------------------------------------------------------- */
.infobox {
width: 300px;
float: right;
clear: right;
margin: 0 0 1em 1.5em;
border-collapse: collapse;
border: 1px solid var(--border-color-base, #c8ccd1);
border-radius: 8px;
overflow: hidden;
background: var(--color-surface-1, #fff);
font-size: 0.88em;
line-height: 1.6;
}
/* 角色名标题 */
.infobox > caption {
background: var(--color-primary, #3366cc);
color: #fff;
font-size: 1.25em;
font-weight: 700;
padding: 12px 16px;
text-align: center;
caption-side: top;
}
/* 分组标题行 */
.infobox .infobox-header {
background: var(--color-primary, #3366cc);
color: #fff;
text-align: center;
font-weight: 600;
font-size: 0.92em;
padding: 8px 12px;
}
/* 图片行 */
.infobox .infobox-image {
text-align: center;
padding: 0;
background: var(--color-surface-2, #f8f9fa);
}
.infobox .infobox-image img {
max-width: 100%;
height: auto;
display: block;
}
/* 标签列 */
.infobox th:not(.infobox-header):not(.infobox-image) {
background: color-mix(in srgb, var(--color-primary, #3366cc) 10%, transparent);
color: var(--color-primary, #3366cc);
font-weight: 600;
padding: 6px 12px;
text-align: right;
width: 35%;
border-bottom: 1px solid var(--border-color-base, #eaecf0);
vertical-align: top;
white-space: nowrap;
}
/* 数据列 */
.infobox td {
padding: 6px 12px;
border-bottom: 1px solid var(--border-color-base, #eaecf0);
vertical-align: top;
}
/* 境界高亮 */
.realm-current {
color: var(--color-destructive, #d33);
font-weight: 700;
}
/* ----------------------------------------------------------
2. Infobox 移动端适配
---------------------------------------------------------- */
@media (max-width: 720px) {
.infobox {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 1em 0;
}
}
/* ----------------------------------------------------------
3. Navbox 底部导航
---------------------------------------------------------- */
.navbox {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--border-color-base, #c8ccd1);
border-radius: 8px;
overflow: hidden;
margin-top: 1.5em;
font-size: 0.88em;
background: var(--color-surface-1, #fff);
}
.navbox-title {
background: var(--color-primary, #3366cc);
color: #fff;
text-align: center;
font-weight: 700;
padding: 8px 14px;
font-size: 1.05em;
}
.navbox-title a { color: #fff; }
.navbox-title a:hover { opacity: 0.85; }
.navbox-group {
background: color-mix(in srgb, var(--color-primary, #3366cc) 10%, transparent);
color: var(--color-primary, #3366cc);
font-weight: 600;
padding: 6px 14px;
text-align: right;
white-space: nowrap;
width: 1%;
border-bottom: 1px solid var(--border-color-base, #eaecf0);
}
.navbox-list {
padding: 6px 14px;
border-bottom: 1px solid var(--border-color-base, #eaecf0);
line-height: 2;
}
/* ----------------------------------------------------------
4. 战绩标记
---------------------------------------------------------- */
.battle-win { color: #14866d; font-weight: 700; }
.battle-lose { color: #d33; font-weight: 700; }
.battle-draw { color: #72777d; font-weight: 700; }
/* ----------------------------------------------------------
5. 引用块（角色名言）
---------------------------------------------------------- */
blockquote {
border-left: 3px solid var(--color-primary, #3366cc);
padding: 0.8em 1.2em;
margin: 1em 0;
background: color-mix(in srgb, var(--color-primary, #3366cc) 5%, transparent);
border-radius: 0 6px 6px 0;
font-style: italic;
}
blockquote cite {
display: block;
margin-top: 0.5em;
font-style: normal;
font-size: 0.85em;
opacity: 0.7;
}
/* ----------------------------------------------------------
6. 人物关系卡片
---------------------------------------------------------- */
.relation-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
margin: 1em 0;
}
.relation-card {
background: var(--color-surface-2, #f8f9fa);
border: 1px solid var(--border-color-base, #eaecf0);
border-radius: 6px;
padding: 10px 6px;
text-align: center;
transition: border-color 0.15s, box-shadow 0.15s;
}
.relation-card:hover {
border-color: var(--color-primary, #3366cc);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.relation-label {
font-size: 0.72em;
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.relation-name {
font-weight: 700;
font-size: 0.9em;
color: var(--color-primary, #3366cc);
}
.relation-name a { color: var(--color-primary, #3366cc); }
/* ----------------------------------------------------------
7. 境界进度条
---------------------------------------------------------- */
.realm-bar {
width: 100%;
height: 6px;
background: var(--color-surface-2, #eaecf0);
border-radius: 100px;
overflow: hidden;
margin: 6px 0;
}
.realm-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary, #3366cc), #7c4dff, #d33);
border-radius: 100px;
}
/* ----------------------------------------------------------
8. 分类标签美化
---------------------------------------------------------- */
#catlinks a {
display: inline-block;
padding: 2px 10px;
border-radius: 100px;
font-size: 0.88em;
margin: 1px 2px;
background: color-mix(in srgb, var(--color-primary, #3366cc) 10%, transparent);
transition: background 0.15s;
}
#catlinks a:hover {
background: var(--color-primary, #3366cc);
color: #fff;
text-decoration: none;
}
/* ----------------------------------------------------------
9. 剧透折叠块
---------------------------------------------------------- */
.spoiler-box {
border: 1px dashed var(--color-destructive, #d33);
border-radius: 6px;
margin: 1em 0;
overflow: hidden;
}
.spoiler-box .mw-collapsible-toggle {
background: color-mix(in srgb, var(--color-destructive, #d33) 8%, transparent);
color: var(--color-destructive, #d33);
padding: 8px 14px;
font-weight: 600;
font-size: 0.88em;
cursor: pointer;
display: block;
text-align: center;
}