MediaWiki:Citizen.css：修订间差异

2026年2月14日 (六) 12:28的版本

/* 这里所有CSS都会加载给Citizen皮肤的用户 */
/* ===== Citizen皮肤 春节特别版 ===== */
/* 适配：代码块、表格、弹窗、深色模式文字变白、链接不变 */

/* ---------- 1. 基础变量 ---------- */
:root {
    /* 主色：红色调（春节） */
    --color-primary__h: 350;
    --color-primary__s: 80%;
    --color-primary__l: 55%;
    
    /* 链接颜色固定，不受深色模式影响 */
    --color-link-fixed: #b03a2e;
    --color-link-visited-fixed: #884538;
    --color-link-hover-fixed: #e67e22;
}


/* ---------- 4. 代码块 ---------- */
/* 浅色模式代码块保持原样 */
/* 深色模式代码块优化 */
.skin-citizen-dark .mw-highlight,
.skin-citizen-dark pre,
.skin-citizen-dark .mw-code {
    background-color: #1e1e1e !important;
    color: #d4d4d4 !important;
    border-color: #444 !important;
}

/* SyntaxHighlight 扩展适配 */
.skin-citizen-dark .mw-highlight .k,      /* 关键字 */
.skin-citizen-dark .mw-highlight .kd,     /* 关键字声明 */
.skin-citizen-dark .mw-highlight .kn,     /* 关键字（命名空间） */
.skin-citizen-dark .mw-highlight .kt {    /* 类型 */
    color: #569cd6 !important;
}

.skin-citizen-dark .mw-highlight .s,      /* 字符串 */
.skin-citizen-dark .mw-highlight .s2 {    /* 双引号字符串 */
    color: #ce9178 !important;
}

.skin-citizen-dark .mw-highlight .c,      /* 注释 */
.skin-citizen-dark .mw-highlight .c1 {    /* 单行注释 */
    color: #6a9955 !important;
}

.skin-citizen-dark .mw-highlight .m,      /* 数字 */
.skin-citizen-dark .mw-highlight .mi {    /* 整数 */
    color: #b5cea8 !important;
}

.skin-citizen-dark .mw-highlight .nt {    /* HTML标签 */
    color: #F8C555 !important;
}

.skin-citizen-dark .mw-highlight .na {    /* HTML属性名 */
    color: #9cdcfe !important;
}

.skin-citizen-dark .mw-highlight .kc {    /* 常量 */
    color: #F08D49 !important;
}

.skin-citizen-dark .mw-highlight .hll {   /* 高亮行 */
    background-color: #3f4439 !important;
}

.skin-citizen-dark .mw-highlight span.linenos {
    color: #898989 !important;
    background-color: transparent !important;
}

/* ---------- 5. 表格 ---------- */
/* 基础表格样式 */
.wikitable {
    width: 100%;
    margin: 1em 0;
}

/* 浅色模式表格 - 保持原样，略加美化 */
.skin-citizen-light .wikitable {
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
}

.skin-citizen-light .wikitable th,
.skin-citizen-light .wikitable td {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em;
}

.skin-citizen-light .wikitable th {
    background-color: #eaecf0;
}

/* 深色模式表格 */
.skin-citizen-dark .wikitable {
    background-color: #1e1e1e !important;
    border: 1px solid #444 !important;
}

.skin-citizen-dark .wikitable th,
.skin-citizen-dark .wikitable td {
    border: 1px solid #444 !important;
    padding: 0.2em 0.4em;
    color: #fff !important;  /* 表格内文字变白 */
}

.skin-citizen-dark .wikitable th {
    background-color: #2d2d2d !important;
    font-weight: bold;
}

.skin-citizen-dark .wikitable tr:nth-child(even) {
    background-color: #2a2a2a !important;
}

.skin-citizen-dark .wikitable tr:hover {
    background-color: #3a3a3a !important;
}

/* 可排序表格表头 */
.skin-citizen-dark .wikitable .headerSort {
    background-color: #2d2d2d !important;
    color: #fff !important;
}

/* ---------- 6. 弹窗/提示框 ---------- */
/* Citizen 搜索建议弹窗 */
.skin-citizen-dark .citizen-search__card {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #fff !important;
}

.skin-citizen-dark .citizen-search__description {
    color: #ccc !important;
}

/* Echo 通知弹窗 */
.skin-citizen-dark .mw-echo-ui-notificationBadgeButtonPopupWidget-popup,
.skin-citizen-dark .mw-echo-ui-notificationItemWidget {
    background-color: #2d2d2d !important;
    color: #fff !important;
    border-color: #444 !important;
}

.skin-citizen-dark .mw-echo-ui-notificationItemWidget-content-message-header {
    color: #fff !important;
}

.skin-citizen-dark .mw-echo-ui-notificationItemWidget-content-message-body {
    color: #ccc !important;
}

/* OOUI 弹窗/对话框 */
.skin-citizen-dark .oo-ui-popupWidget-popup,
.skin-citizen-dark .oo-ui-dialog-content {
    background-color: #2d2d2d !important;
    color: #fff !important;
    border-color: #444 !important;
}

.skin-citizen-dark .oo-ui-labelWidget {
    color: #fff !important;
}

/* MultimediaViewer 图片查看器 */
.skin-citizen-dark .mw-mmv-wrapper {
    background-color: #1e1e1e !important;
    color: #fff !important;
}

.skin-citizen-dark .mw-mmv-title {
    color: #fff !important;
}

.skin-citizen-dark .mw-mmv-credit {
    color: #ccc !important;
}

/* 页面工具弹窗 */
.skin-citizen-dark .citizen-menu__card {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #fff !important;
}

/* ---------- 7. 福字背景（只在浅色模式显示） ---------- */
/* ===== B站弹幕风格背景 ===== */
:root:not(.skin-citizen-dark) .mw-body {
    /* 清除之前的背景图片 */
    background-image: none;
    position: relative;
    overflow: hidden;
}

/* 创建弹幕容器 */
:root:not(.skin-citizen-dark) .mw-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;  /* 让弹幕不干扰点击 */
    z-index: 0;
    overflow: hidden;
}

/* 弹幕文字样式 - 归零 */
:root:not(.skin-citizen-dark) .mw-body::after {
    content: '归零 归零 归零 归零 归零 归零 归零 归零 归零 归零';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: rgba(176, 58, 46, 0.15);  /* 半透明红色 */
    font-size: 24px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    animation: danmaku-1 30s linear infinite;
}

/* 第二条弹幕 - 乡间的小路 */
:root:not(.skin-citizen-dark) .mw-body .mw-body-content::before {
    content: '🎵 乡间的小路 🎵 走在乡间的小路上 🎵 暮归的老牛是我同伴 🎵';
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    color: rgba(52, 152, 219, 0.15);  /* 半透明蓝色 */
    font-size: 28px;
    font-style: italic;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    animation: danmaku-2 25s linear infinite;
    transform: translateX(100%);
}

/* 第三条弹幕 - 更多归零 */
:root:not(.skin-citizen-dark) .mw-body .mw-body-content::after {
    content: '归归归归归零 归归归归归零 归归归归归零 归归归归归零';
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    color: rgba(46, 204, 113, 0.15);  /* 半透明绿色 */
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    animation: danmaku-3 20s linear infinite;
    transform: translateX(100%);
}

/* 第四条弹幕 - 更多乡间小路 */
:root:not(.skin-citizen-dark) .mw-body .catlinks::before {
    content: '🎵 还有一支短笛也在吹响 🎵 笑意写在脸上 🎵 哼一曲乡居小唱 🎵';
    position: absolute;
    bottom: 150px;
    left: 0;
    right: 0;
    color: rgba(241, 196, 15, 0.15);  /* 半透明金色 */
    font-size: 26px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    animation: danmaku-4 35s linear infinite;
    transform: translateX(100%);
}

/* 第五条弹幕 - 最后一波归零 */
:root:not(.skin-citizen-dark) .mw-body #footer::before {
    content: '归零 归零 归零 归零 归零 归零 归零 归零 归零 归零 归零 归零';
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    color: rgba(155, 89, 182, 0.15);  /* 半透明紫色 */
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    animation: danmaku-5 28s linear infinite;
    transform: translateX(100%);
}

/* 弹幕动画 - 从左向右滚动 */
@keyframes danmaku-1 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes danmaku-2 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes danmaku-3 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes danmaku-4 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes danmaku-5 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 为了让弹幕有层次感，调整不同弹幕的速度和起始位置 */
@keyframes danmaku-1 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes danmaku-2 { 0% { transform: translateX(-80%); } 100% { transform: translateX(120%); } }
@keyframes danmaku-3 { 0% { transform: translateX(-120%); } 100% { transform: translateX(80%); } }
@keyframes danmaku-4 { 0% { transform: translateX(-90%); } 100% { transform: translateX(110%); } }
@keyframes danmaku-5 { 0% { transform: translateX(-110%); } 100% { transform: translateX(90%); } }

/* ---------- 8. 灯笼（可选，只在浅色模式显示） ---------- */
:root:not(.skin-citizen-dark) #p-logo:after {
    content: "🏮";
    font-size: 48px;
    position: absolute;
    top: -10px;
    right: 20px;
    transform: rotate(15deg);
    text-shadow: 0 0 10px orange;
    pointer-events: none;
}

:root:not(.skin-citizen-dark) #footer:before {
    content: "🏮";
    font-size: 40px;
    position: relative;
    bottom: -10px;
    left: 10px;
    float: left;
    margin-right: 20px;
    pointer-events: none;
}

/* ---------- 9. 深色模式其他微调 ---------- */
.skin-citizen-dark .catlinks {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #fff !important;
}

.skin-citizen-dark .mw-parser-output .infobox {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
    color: #fff !important;
}

.skin-citizen-dark .mw-parser-output .infobox th,
.skin-citizen-dark .mw-parser-output .infobox td {
    border-color: #444 !important;
}

/* 确保编辑区域的文字在深色模式下可读 */
.skin-citizen-dark textarea,
.skin-citizen-dark .mw-editfont-monospace,
.skin-citizen-dark .mw-editfont-sans-serif,
.skin-citizen-dark .mw-editfont-serif {
    background-color: #1e1e1e !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* ---------- 10. 清除缓存提示 ---------- */
/* 修改后请按 Ctrl+F5 强制刷新 */

/* ---------- 11. 源代码编辑器边框 ---------- */
/* 普通源代码编辑框 */
.wikiEditor-ui textarea,
#wpTextbox1,
.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
    border: 2px solid var(--color-primary, #b03a2e) !important;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

/* 获得焦点时的效果（可选） */
.wikiEditor-ui textarea:focus,
#wpTextbox1:focus,
.mw-editfont-monospace:focus,
.mw-editfont-sans-serif:focus,
.mw-editfont-serif:focus {
    border-color: var(--color-link-hover-fixed, #e67e22) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(176, 58, 46, 0.1);
}

/* 深色模式下稍微调整 */
.skin-citizen-dark .wikiEditor-ui textarea,
.skin-citizen-dark #wpTextbox1,
.skin-citizen-dark .mw-editfont-monospace,
.skin-citizen-dark .mw-editfont-sans-serif,
.skin-citizen-dark .mw-editfont-serif {
    border-color: var(--color-link-fixed, #b03a2e) !important;
    background-color: #1e1e1e;
    color: #fff;
}

.skin-citizen-dark .wikiEditor-ui textarea:focus,
.skin-citizen-dark #wpTextbox1:focus,
.skin-citizen-dark .mw-editfont-monospace:focus,
.skin-citizen-dark .mw-editfont-sans-serif:focus,
.skin-citizen-dark .mw-editfont-serif:focus {
    border-color: var(--color-link-hover-fixed, #e67e22) !important;
    box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}