“MediaWiki:Common.css”的版本间差异

2026年10月18日 (日) 18:57:31的最新版本

/* 这里放置的CSS将应用于所有皮肤 */

/* BA光标 */
#myCanvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}


/* 美化 fandom-table 类表格（含强化表头） */
table.fandom-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 1000px;
    margin: 1em 0;
    border: 1px solid #aaa;
}

/* 表头单元格（th）强化样式 */
table.fandom-table th {
    border: 1px solid #999; /* 表头边框加深，与内容区区分 */
    border-bottom: 2px solid #666; /* 表头底部加粗边框，明确分隔表头与内容 */
    padding: 10px 12px; /* 内边距略大于内容区，增加空间感 */
    background-color: #e0e0e0; /* 表头背景色加深，比之前更明显 */
    font-weight: bold; /* 保持粗体，可改为 bolder 进一步加粗 */
    font-size: 1.05em; /* 字号比内容区稍大 */
    color: #333; /* 文字颜色加深，提升对比度 */
    text-align: left;
}

/* 内容单元格（td）样式（保持不变，突出表头） */
table.fandom-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    background-color: white;
}

/* 鼠标悬停行高亮 */
table.fandom-table tr:hover td {
    background-color: #f9f9f9;
}


/* 美化外部图片框体 */
.external-image-container {
  border: 1px solid #cccccc; /* 灰色边框 */
  background-color: #f9f9f9; /* 浅灰背景 */
  padding: 0.5em; /* 内边距 */
  display: inline-block; /* 让容器适应图片宽度 */
  margin: 0.5em; /* 外边距 */
}


/* 信息框整体样式 */
.rmzas-infobox {
    border: 1px solid #ccc; /* 外边框 */
    margin: 0 0 1em 1em; /* 右侧和下方留白 */
    float: right; /* 右浮动（靠页面右侧显示） */
    table-layout: auto; /* 宽度自动分配（根据内容自适应） */
    min-width: 300px; /* 最小宽度，避免过窄 */
    max-width: 500px; /* 最大宽度，避免过宽 */
    border-collapse: collapse; /* 边框合并，避免双边框 */
}

/* 标题行（整个信息框的大标题） */
.rmzas-infobox caption {
    font-size: 1.3em;
    font-weight: bold;
    padding: 10px;
    background-color: #e6f2ff; /* 浅蓝背景 */
    border-bottom: 1px solid #ccc; /* 标题下方分隔线 */
    text-align: left; /* 左对齐 */
    width: 100%; /* 占满整行 */
    box-sizing: border-box; /* 确保padding不撑大宽度 */
}

/* 分组标题（如“虚拟角色设定”“在现实中”等跨列标题） */
.rmzas-infobox .infobox-header {
    background-color: #99ccff; /* 中蓝色背景（区分普通项目名） */
    color: #333; /* 深灰文字 */
    font-size: 1.1em;
    padding: 8px 10px;
    text-align: left;
}

/* 项目名（标签，如“性别”“年龄”） */
.rmzas-infobox th {
    background-color: #4da6ff; /* 蓝色背景（项目名） */
    color: white; /* 白色文字，对比清晰 */
    padding: 6px 10px;
    text-align: left;
    font-weight: bold;
    border: 1px solid #ccc; /* 单元格边框 */
    white-space: nowrap; /* 项目名不换行 */
}

/* 项目内容（值，如“男性”“30岁”） */
.rmzas-infobox td {
    background-color: white; /* 白色背景（内容） */
    padding: 6px 10px;
    border: 1px solid #ccc; /* 单元格边框 */
}

/* 3列数据行的单元格宽度自动分配 */
.rmzas-infobox tr:nth-child(8) td { /* 第三组数据行（性别+年龄+种族） */
    width: 33.33%;
}



/* ==========================================================================
   黑幕（剧透与隐藏文字遮盖样式）
   ========================================================================== */

/* 默认黑幕：与背景同色的深色文字，鼠标悬浮时变为白色 */
.heimu,
.heimu a,
.heimu a.new,
.heimu a:visited {
    background-color: #252525 !important;
    color: #252525 !important;
    text-shadow: none !important;
    transition: color 0.15s ease-out;
}

/* 鼠标悬停（Hover）与移动端点击激活（Active）时显示白色文字 */
.heimu:hover,
.heimu:active {
    color: #ffffff !important;
}

/* 内部链接在悬停时呈现淡蓝色，便于点击识别 */
.heimu:hover a,
.heimu:hover a:visited {
    color: #99ccff !important;
}

.heimu:hover a.new {
    color: #ff9999 !important;
}

/* 划词选中文本时显示反色 */
.heimu::selection {
    background-color: #252525 !important;
    color: #ffffff !important;
}

/* 阅读主题控件：保留原生 select 的键盘操作与移动端选择器。 */
.rmzas-theme-control label {
    margin-right: 0.4em;
}

.rmzas-theme-control select {
    font: inherit;
    color: #202122;
    background: #fff;
    border: 1px solid #a2a9b1;
    border-radius: 3px;
    padding: 1px 3px;
    max-width: 9em;
}

.rmzas-theme-control select:focus-visible {
    outline: 2px solid #36c;
    outline-offset: 2px;
}

.rmzas-theme-control-floating {
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 1000;
    padding: 0.5em 0.75em;
    background: #fff;
    color: #202122;
    border: 1px solid #a2a9b1;
    border-radius: 4px;
    font-size: 0.875em;
}

.rmzas-recent-time {
    color: #666;
}

/* 仅屏幕使用深色配色；打印继续沿用原站点的浅色样式。
   Common.js 负责设置根元素类名；颜色不通过图片反色滤镜实现。 */
@media screen {
    html.rmzas-theme-dark {
        color-scheme: dark;
        --rmzas-bg: #15191f;
        --rmzas-surface: #20262f;
        --rmzas-raised: #2b3441;
        --rmzas-text: #e4e9ef;
        --rmzas-muted: #aeb8c4;
        --rmzas-border: #4c5969;
        --rmzas-link: #8abaff;
        --rmzas-visited: #c6a8f5;
        --rmzas-redlink: #ffa8a8;
        background: var(--rmzas-bg);
    }

    html.rmzas-theme-dark body,
    html.rmzas-theme-dark #mw-page-base,
    html.rmzas-theme-dark #mw-head-base,
    html.rmzas-theme-dark #mw-head,
    html.rmzas-theme-dark #mw-panel,
    html.rmzas-theme-dark #footer,
    html.rmzas-theme-dark #mw-content-container,
    html.rmzas-theme-dark #mw-footer-container,
    html.rmzas-theme-dark #mw-footer,
    html.rmzas-theme-dark #mw_header,
    html.rmzas-theme-dark #mw-site-navigation,
    html.rmzas-theme-dark #mw-related-navigation {
        background: var(--rmzas-bg);
        color: var(--rmzas-text);
    }

    html.rmzas-theme-dark #content,
    html.rmzas-theme-dark #mw-content,
    html.rmzas-theme-dark #mw-header-container,
    html.rmzas-theme-dark .mw-body {
        background: var(--rmzas-surface);
        color: var(--rmzas-text);
        border-color: var(--rmzas-border);
    }

    /* 本站可选的 MonoBook / Timeless 皮肤也共用这组阅读配色。 */
    html.rmzas-theme-dark .pBody,
    html.rmzas-theme-dark #p-cactions li,
    html.rmzas-theme-dark #p-cactions li a,
    html.rmzas-theme-dark #p-cactions li.selected,
    html.rmzas-theme-dark #mw-site-navigation .sidebar-chunk,
    html.rmzas-theme-dark #mw-related-navigation .sidebar-chunk,
    html.rmzas-theme-dark .tools-inline .dropdown {
        background-color: var(--rmzas-surface);
        color: var(--rmzas-text);
        border-color: var(--rmzas-border);
    }

    html.rmzas-theme-dark h1,
    html.rmzas-theme-dark h2,
    html.rmzas-theme-dark h3,
    html.rmzas-theme-dark h4,
    html.rmzas-theme-dark h5,
    html.rmzas-theme-dark h6 {
        color: var(--rmzas-text);
        border-color: var(--rmzas-border);
        background-color: transparent;
    }

    html.rmzas-theme-dark a {
        color: var(--rmzas-link) !important;
    }

    html.rmzas-theme-dark a:visited {
        color: var(--rmzas-visited) !important;
    }

    html.rmzas-theme-dark a.new,
    html.rmzas-theme-dark a.new:visited {
        color: var(--rmzas-redlink) !important;
    }

    html.rmzas-theme-dark a.mw-selflink {
        color: inherit !important;
    }

    html.rmzas-theme-dark hr,
    html.rmzas-theme-dark fieldset {
        border-color: var(--rmzas-border);
    }

    /* Vector 旧版导航的渐变需要连同背景图片一起移除。 */
    html.rmzas-theme-dark .vectorTabs,
    html.rmzas-theme-dark .vectorTabs ul,
    html.rmzas-theme-dark .vectorTabs li,
    html.rmzas-theme-dark .vectorTabs span,
    html.rmzas-theme-dark .vectorTabs li a,
    html.rmzas-theme-dark .vectorMenu h3,
    html.rmzas-theme-dark .vectorMenu h3 span {
        background-image: none;
        background-color: var(--rmzas-bg);
        color: var(--rmzas-muted);
        border-color: var(--rmzas-border);
    }

    html.rmzas-theme-dark .vectorTabs li.selected,
    html.rmzas-theme-dark .vectorTabs li.selected a {
        background-color: var(--rmzas-surface);
        color: var(--rmzas-text) !important;
    }

    html.rmzas-theme-dark #mw-panel .portal h3,
    html.rmzas-theme-dark #p-personal,
    html.rmzas-theme-dark #footer li,
    html.rmzas-theme-dark #siteSub,
    html.rmzas-theme-dark #contentSub,
    html.rmzas-theme-dark .tocnumber,
    html.rmzas-theme-dark .toctogglelabel,
    html.rmzas-theme-dark .results-info,
    html.rmzas-theme-dark .mw-search-result-data,
    html.rmzas-theme-dark .mw-plusminus-null,
    html.rmzas-theme-dark .mw-changeslist-date,
    html.rmzas-theme-dark .rmzas-recent-time {
        color: var(--rmzas-muted);
    }

    html.rmzas-theme-dark .mw-plusminus-pos {
        color: #8ed5ac;
    }

    html.rmzas-theme-dark .mw-plusminus-neg {
        color: var(--rmzas-redlink);
    }

    html.rmzas-theme-dark #pagehistory li.selected,
    html.rmzas-theme-dark #pagehistory li:hover {
        background-color: var(--rmzas-raised);
        color: var(--rmzas-text);
        border-color: var(--rmzas-border);
    }

    html.rmzas-theme-dark .vectorMenu .menu,
    html.rmzas-theme-dark #catlinks,
    html.rmzas-theme-dark .toc,
    html.rmzas-theme-dark .mw-warning,
    html.rmzas-theme-dark .mw-message-box,
    html.rmzas-theme-dark .mw-search-profile-tabs,
    html.rmzas-theme-dark .mw-search-visualclear,
    html.rmzas-theme-dark .oo-ui-popupWidget-popup,
    html.rmzas-theme-dark .oo-ui-menuSelectWidget,
    html.rmzas-theme-dark .oo-ui-window-frame {
        color: var(--rmzas-text);
        background: var(--rmzas-raised);
        border-color: var(--rmzas-border);
    }

    html.rmzas-theme-dark #simpleSearch {
        background: var(--rmzas-bg);
        border-color: var(--rmzas-border);
    }

    html.rmzas-theme-dark #searchInput,
    html.rmzas-theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    html.rmzas-theme-dark textarea,
    html.rmzas-theme-dark select,
    html.rmzas-theme-dark button,
    html.rmzas-theme-dark .oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
        color: var(--rmzas-text);
        background-color: var(--rmzas-bg);
        border-color: var(--rmzas-border);
    }

    html.rmzas-theme-dark input::placeholder,
    html.rmzas-theme-dark textarea::placeholder {
        color: var(--rmzas-muted);
        opacity: 1;
    }

    html.rmzas-theme-dark :focus-visible {
        outline-color: var(--rmzas-link);
    }

    html.rmzas-theme-dark .suggestions-results,
    html.rmzas-theme-dark .suggestions-special {
        color: var(--rmzas-text);
        background: var(--rmzas-raised);
        border-color: var(--rmzas-border);
    }

    html.rmzas-theme-dark .suggestions-result,
    html.rmzas-theme-dark .suggestions-special .special-label,
    html.rmzas-theme-dark .suggestions-special .special-query {
        color: var(--rmzas-text);
    }

    html.rmzas-theme-dark .suggestions-result-current,
    html.rmzas-theme-dark .oo-ui-optionWidget-highlighted,
    html.rmzas-theme-dark .oo-ui-optionWidget-selected {
        background-color: #324b70;
        color: #fff;
    }

    /* 表格与信息框覆盖已有的浅色背景，包括模板内联样式。 */
    html.rmzas-theme-dark table.wikitable,
    html.rmzas-theme-dark table.fandom-table,
    html.rmzas-theme-dark .rmzas-infobox {
        background-color: var(--rmzas-surface) !important;
        color: var(--rmzas-text) !important;
        border-color: var(--rmzas-border) !important;
    }

    html.rmzas-theme-dark table.wikitable > tr > th,
    html.rmzas-theme-dark table.wikitable > * > tr > th,
    html.rmzas-theme-dark table.fandom-table th {
        background-color: var(--rmzas-raised) !important;
        color: var(--rmzas-text) !important;
        border-color: var(--rmzas-border) !important;
    }

    html.rmzas-theme-dark table.wikitable > tr > td,
    html.rmzas-theme-dark table.wikitable > * > tr > td,
    html.rmzas-theme-dark table.fandom-table td,
    html.rmzas-theme-dark .rmzas-infobox td {
        background-color: var(--rmzas-surface) !important;
        color: var(--rmzas-text) !important;
        border-color: var(--rmzas-border) !important;
    }

    html.rmzas-theme-dark table.fandom-table tr:hover td {
        background-color: var(--rmzas-raised) !important;
    }

    html.rmzas-theme-dark .rmzas-infobox caption {
        background-color: #203c58 !important;
        color: #e0efff !important;
        border-color: var(--rmzas-border) !important;
    }

    html.rmzas-theme-dark .rmzas-infobox th {
        background-color: #26537e !important;
        color: #fff !important;
        border-color: var(--rmzas-border) !important;
    }

    html.rmzas-theme-dark .rmzas-infobox .infobox-header {
        background-color: #244563 !important;
        color: #e0efff !important;
    }

    html.rmzas-theme-dark pre,
    html.rmzas-theme-dark code,
    html.rmzas-theme-dark .mw-code,
    html.rmzas-theme-dark .thumbinner,
    html.rmzas-theme-dark .thumbimage,
    html.rmzas-theme-dark .external-image-container {
        background-color: var(--rmzas-raised);
        color: var(--rmzas-text);
        border-color: var(--rmzas-border);
    }

    /* 差异页保留增删语义，避免只剩一片相同的背景色。 */
    html.rmzas-theme-dark .diff-context,
    html.rmzas-theme-dark .diff-empty,
    html.rmzas-theme-dark .diff-multi,
    html.rmzas-theme-dark .diff-lineno {
        background-color: var(--rmzas-surface);
        color: var(--rmzas-text);
        border-color: var(--rmzas-border);
    }

    html.rmzas-theme-dark .diff-deletedline {
        background-color: #482d33;
        color: #ffe1e1;
        border-color: #96606b;
    }

    html.rmzas-theme-dark .diff-addedline {
        background-color: #203e35;
        color: #ddffeb;
        border-color: #497d64;
    }

    html.rmzas-theme-dark .diff-deletedline .diffchange {
        background-color: #743c49;
        color: #fff;
    }

    html.rmzas-theme-dark .diff-addedline .diffchange {
        background-color: #2c634c;
        color: #fff;
    }

    html.rmzas-theme-dark .diff-marker {
        color: var(--rmzas-text);
    }

    html.rmzas-theme-dark .rmzas-theme-control-floating {
        background-color: var(--rmzas-surface);
        color: var(--rmzas-text);
        border-color: var(--rmzas-border);
    }

    /* 全局链接配色不能穿透黑幕；悬停、触屏按住或键盘聚焦后再揭示。 */
    html.rmzas-theme-dark .heimu,
    html.rmzas-theme-dark .heimu a,
    html.rmzas-theme-dark .heimu a:visited,
    html.rmzas-theme-dark .heimu a.new,
    html.rmzas-theme-dark .heimu a.new:visited {
        background-color: #101419 !important;
        color: #101419 !important;
    }

    html.rmzas-theme-dark .heimu * {
        background-color: #101419 !important;
        color: inherit !important;
    }

    html.rmzas-theme-dark .heimu:hover,
    html.rmzas-theme-dark .heimu:active,
    html.rmzas-theme-dark .heimu:focus-within {
        color: #fff !important;
    }

    html.rmzas-theme-dark .heimu:hover a,
    html.rmzas-theme-dark .heimu:hover a:visited,
    html.rmzas-theme-dark .heimu:active a,
    html.rmzas-theme-dark .heimu:active a:visited,
    html.rmzas-theme-dark .heimu:focus-within a,
    html.rmzas-theme-dark .heimu:focus-within a:visited {
        color: var(--rmzas-link) !important;
    }

    html.rmzas-theme-dark .heimu:hover a.new,
    html.rmzas-theme-dark .heimu:hover a.new:visited,
    html.rmzas-theme-dark .heimu:active a.new,
    html.rmzas-theme-dark .heimu:active a.new:visited,
    html.rmzas-theme-dark .heimu:focus-within a.new,
    html.rmzas-theme-dark .heimu:focus-within a.new:visited {
        color: var(--rmzas-redlink) !important;
    }

    html.rmzas-theme-dark .heimu::selection,
    html.rmzas-theme-dark .heimu *::selection {
        background-color: #101419 !important;
        color: #fff !important;
    }
}

@media print {
    .rmzas-theme-control {
        display: none !important;
    }
}