|
|
| 第1行： |
第1行： |
| /* 这里所有CSS都会加载给Citizen皮肤的用户 */ | | /* 这里所有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;
| |
| }
| |
| */
| |
| /* ===== 第1条：归零军团（红色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body::after {
| |
| content: '归零 归零 归归归归归零 归零 归零 归归归归归零 归零 归零 归归归归归零 新年快乐 万事如意';
| |
| position: absolute;
| |
| top: 30px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(230, 70, 70, 0.18);
| |
| font-size: 24px;
| |
| font-weight: bold;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-1 35s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第2条：走在乡间的小路上（蓝色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .mw-body-content::before {
| |
| content: '🎵 走在乡间的小路上 暮归的老牛是我同伴 🎵';
| |
| position: absolute;
| |
| top: 80px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(70, 130, 200, 0.18);
| |
| font-size: 26px;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-2 28s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第3条：蓝天配朵夕阳（绿色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .mw-body-content::after {
| |
| content: '蓝天配朵夕阳在胸膛 缤纷的云彩是晚霞的衣裳';
| |
| position: absolute;
| |
| top: 130px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(60, 180, 100, 0.18);
| |
| font-size: 25px;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-3 32s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第4条：荷把锄头（金色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .catlinks::before {
| |
| content: '荷把锄头在肩上 牧童的歌声在荡漾 喔呜喔呜喔喔他们唱';
| |
| position: absolute;
| |
| top: 180px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(230, 180, 40, 0.18);
| |
| font-size: 26px;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-4 30s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第5条：短笛（紫色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .catlinks::after {
| |
| content: '还有一支短笛隐约在吹响 还有一支短笛隐约在吹响 还有一支短笛隐约在吹响';
| |
| position: absolute;
| |
| top: 230px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(180, 100, 200, 0.18);
| |
| font-size: 27px;
| |
| font-weight: 500;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-5 38s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第6条：笑意写在脸上（粉色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .firstHeading::before {
| |
| content: '笑意写在脸上 哼一曲乡居小唱 任思绪在晚风中飞扬';
| |
| position: absolute;
| |
| top: 280px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(240, 120, 160, 0.18);
| |
| font-size: 26px;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-6 29s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第7条：多少落寞惆怅（青色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .firstHeading::after {
| |
| content: '多少落寞惆怅 都随晚风飘散 遗忘在乡间的小路上';
| |
| position: absolute;
| |
| top: 330px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(50, 190, 190, 0.18);
| |
| font-size: 26px;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-7 31s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第8条：副歌重复1（橙色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body #footer::before {
| |
| content: '🎵 走在乡间的小路上 暮归的老牛是我同伴 🎵 蓝天配朵夕阳在胸膛 缤纷的云彩是晚霞的衣裳 🎵';
| |
| position: absolute;
| |
| bottom: 280px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(240, 140, 40, 0.18);
| |
| font-size: 25px;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-8 36s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第9条：副歌重复2（深红）=====
| |
| :root:not(.skin-citizen-dark) .mw-body #footer::after {
| |
| content: '笑意写在脸上 哼一曲乡居小唱 任思绪在晚风中飞扬 多少落寞惆怅 都随晚风飘散';
| |
| position: absolute;
| |
| bottom: 230px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(200, 60, 60, 0.18);
| |
| font-size: 26px;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-9 33s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| */
| |
| /* ===== 第10条：牧童歌声（深绿）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .printfooter::before {
| |
| content: '牧童的歌声在荡漾 喔呜喔呜喔喔他们唱 还有一支短笛隐约在吹响';
| |
| position: absolute;
| |
| bottom: 180px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(40, 150, 70, 0.18);
| |
| font-size: 27px;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-10 34s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| *;
| |
| /* ===== 第11条：过年词汇（金色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .printfooter::after {
| |
| content: '🧧 新年快乐 恭喜发财 万事如意 阖家欢乐 年年有余 岁岁平安 🧨';
| |
| position: absolute;
| |
| bottom: 130px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(220, 180, 20, 0.2);
| |
| font-size: 28px;
| |
| font-weight: bold;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-11 25s linear infinite;
| |
| transform: translateX(-100%);
| |
| }
| |
| *;
| |
| /* ===== 第12条：更多过年祝福（红色）=====
| |
| :root:not(.skin-citizen-dark) .mw-body .siteNotice::before {
| |
| content: '🏮 新春大吉 福气满满 招财进宝 五福临门 金玉满堂 龙马精神 🎋';
| |
| position: absolute;
| |
| bottom: 80px;
| |
| left: 0;
| |
| right: 0;
| |
| color: rgba(220, 70, 70, 0.2);
| |
| font-size: 26px;
| |
| font-weight: bold;
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| animation: danmaku-12 27s 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-6 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
| |
| @keyframes danmaku-7 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
| |
| @keyframes danmaku-8 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
| |
| @keyframes danmaku-9 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
| |
| @keyframes danmaku-10 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
| |
| @keyframes danmaku-11 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
| |
| @keyframes danmaku-12 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
| |
| */
| |
| /* ---------- 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);
| |
| }
| |
