MediaWiki:Common.css：修订间差异

2026年10月22日 (四) 16:53的版本

/* =====================================================================
   帝鹰维基 · 全站样式 v12（红色顶栏 + 按钮完整包裹 + 黑色分隔线 + 纯白内容底）
   皮肤：不更换，直接在原版 Vector 皮肤上叠加本样式
   =====================================================================
   ★ 所有可改参数都集中在下面 :root 里，只改冒号后的数值/色值即可。
   ★ 本版核心修复：MediaWiki 1.39 的标签按钮真实类名是 .vector-menu-tabs
     （旧版 .vectorTabs 在 1.39 里不存在），本次改用正确选择器，
     原生按钮（页面/讨论/阅读/编辑/查看历史/星标）完整纳入红色色块内。
   ===================================================================== */
:root{
  /* ---- ① 顶部红色导航区（本次核心，色值单独标注） ---- */
  --dy-nav-bg:#8e1a12;        /* ★★ 导航区基准色：顶部导航栏 + 侧边栏旗帜区块共用底色，改这一个色值即全局换红 ★★ */
  --dy-nav-height:52px;       /* 顶部主导航栏高度（改数字即调高矮） */
  --dy-tabstrip:62px;         /* 导航条下方红色横带高度：标签按钮行所在的红色区块高度 */
  --dy-nav-ink:#ffffff;       /* 导航栏文字颜色（白） */
  --dy-nav-hover:#f5d9a8;     /* 鼠标悬浮/选中高亮文字色（浅金，在红底上醒目） */
  --dy-nav-hover-bg:rgba(255,255,255,.16); /* 悬浮高亮底色（透明白罩） */
  /* ---- ② 全局 ---- */
  --dy-bg:#ffffff;            /* ★★ 全站页面背景色：本次改为纯白 #ffffff（原 #efeee7 微黄已弃用） ★★ */
  --dy-ink:#23281f;           /* 全局正文字体颜色 */
  --dy-sub:#6a6f62;           /* 次要文字颜色 */
  --dy-font-size:15px;        /* 全局字号 */
  --dy-content-max:980px;     /* 主内容区最大宽度 */
  /* ---- ③ 主题色（主页横幅/板块标题栏，沿用帝鹰绿金，不受本次换红影响） ---- */
  --dy-green:#262b21;         /* 主深绿（横幅、板块标题栏底色） */
  --dy-green-2:#3d4835;       /* 渐变辅助绿 */
  --dy-gold:#e6d290;          /* 金色（横幅文字、点缀） */
  --dy-gold-d:#b8995a;        /* 深金（边框、头像环） */
  /* ---- ④ 卡片（保持原有边框/阴影/圆角，本次一律不动） ---- */
  --dy-card-bg:#ffffff;       /* 卡片底色 */
  --dy-card-border:1px solid #ddd8c8;   /* 卡片边框 */
  --dy-card-radius:10px;      /* 卡片圆角 */
  --dy-card-shadow:0 1px 5px rgba(38,43,33,.07); /* 卡片阴影 */
  --dy-gap:14px;              /* 卡片/板块间距 */
  /* ---- ⑤ 侧边栏 ---- */
  --dy-sidebar-width:10.5em;  /* 侧边栏整体宽度 */
  /* ---- ⑥ 侧边栏旗帜区块（与顶栏红色同色、严格对齐） ---- */
  --dy-logo-size:50px;        /* 旗帜 logo 显示尺寸（正方形边长） */
  /* ---- ⑦ 左右分界分隔线（本次新增） ---- */
  --dy-divider-color:#141414; /* ★★ 侧边栏与主内容区之间的竖向分隔线颜色（纯黑近色，可改） ★★ */
  --dy-divider-width:6px;     /* ★★ 分隔线粗细：6px 粗线，清晰不若有若无；改数字即调粗细 ★★ */
}

/* =====================================================================
   0. 顶部主导航栏（红色横条，由 MediaWiki:Common.js 注入 #dy-topnav）
   ===================================================================== */
#dy-topnav{position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--dy-nav-height);background:var(--dy-nav-bg);
  display:flex;align-items:center;justify-content:center;
  gap:38px;box-shadow:0 2px 8px rgba(20,10,5,.35);}
#dy-topnav a{color:var(--dy-nav-ink);font-size:14.5px;font-weight:600;
  letter-spacing:2px;padding:5px 16px;border-radius:6px;
  transition:background .15s,color .15s;}
#dy-topnav a:hover{color:var(--dy-nav-hover);background:var(--dy-nav-hover-bg);}

/* =====================================================================
   1. 红色横带：完整包裹原生功能按钮（页面/讨论/阅读/查看源代码/查看历史/星标）
      ★ 结构说明：#mw-page-base 是这层红色底板；#mw-head 是按钮行容器。
        红带高度 = --dy-tabstrip，按钮行垂直居中 → 上下留白对称、无脱离感。
      ★ 1.39 正确类名 .vector-menu-tabs：去掉原皮肤白色凸块/渐变角，
        按钮文字改白色、选中项浅金 → 与红底严丝合缝，不再出现白色缺口。
   ===================================================================== */
/* 红色底板（页面标题下方那层背景），高度与 head-base 占位严格相等 */
#mw-page-base{height:var(--dy-tabstrip) !important;background:var(--dy-nav-bg) !important;}
/* 占位元素等高 + 负外边距抵消，保证红色横带下沿紧贴内容区顶部，不多留白 */
#mw-head-base{height:var(--dy-tabstrip) !important;
  margin-top:calc(-1 * var(--dy-tabstrip)) !important;}
/* 按钮行容器：从导航条底沿开始，高度锁死为红带高度 */
#mw-head{top:var(--dy-nav-height) !important;height:var(--dy-tabstrip);box-sizing:border-box;}
/* 左（页面/讨论/变体）与右（阅读/查看源代码/查看历史/搜索）两组整体垂直居中 */
#left-navigation,#right-navigation{margin-top:calc((var(--dy-tabstrip) - 38px) / 2);}
/* —— 1.39 真实标签类名（修复旧版 .vectorTabs 不生效的问题） —— */
.vector-menu-tabs{background-image:none !important;}                      /* 去掉标签组整体渐变 */
.vector-menu-tabs .vector-menu-content-list li{                          /* 每个标签：红底透明、无白块 */
  background-image:none !important;background-color:transparent !important;}
.vector-menu-tabs .vector-menu-content-list li a{color:#ffffff !important;} /* 普通标签白字 */
.vector-menu-tabs .vector-menu-content-list li.selected a,               /* 当前页标签：浅金高亮 */
.vector-menu-tabs .vector-menu-content-list li.selected a:visited{color:var(--dy-nav-hover) !important;}
.vector-menu-tabs .vector-menu-content-list li.new a,                    /* 不存在页（讨论等）红底配浅粉 */
.vector-menu-tabs .vector-menu-content-list li.new a:visited{color:#ffd9d0 !important;}
/* 悬浮反馈：轻微白罩，压得住红底 */
.vector-menu-tabs .vector-menu-content-list li a:hover{background:var(--dy-nav-hover-bg);border-radius:4px;}
/* 下拉菜单（变体/更多）：标题白字适配红底，展开面板恢复白底黑字不影响可读 */
.vector-menu-dropdown .vector-menu-heading{color:#ffffff;}
.vector-menu-dropdown .vector-menu-content{background:#ffffff;}
.vector-menu-dropdown .vector-menu-content li a{color:#333333 !important;}
/* 右上个人工具（登录/用户名）：白字 */
#p-personal li a{color:#f5efe6;}
#p-personal li a:hover{color:var(--dy-nav-hover);}
/* 搜索框：紧凑圆角，融进红带不突兀 */
#p-search form{margin:0;}
#p-search input[type="search"],#simpleSearch{border-radius:6px;}

/* =====================================================================
   2. 侧边栏：顶部旗帜区块与红色横带同色同高、严格对齐；菜单保持原样
      ★ 对齐原理：#mw-panel 从导航条底沿(top=导航高)开始，
        #p-logo 高度 = --dy-tabstrip（与红带完全相等），
        → 旗帜红块顶沿与红带顶沿齐平、底沿与红带底沿同处一条水平基线。
      ★ 旗帜下方菜单列表保持原版素底样式，仅宽度随 --dy-sidebar-width。
   ===================================================================== */
#mw-panel{top:var(--dy-nav-height) !important;
  width:var(--dy-sidebar-width);
  background:transparent;border:0;box-shadow:none;}
#p-logo{background:var(--dy-nav-bg);
  height:var(--dy-tabstrip);box-sizing:border-box;  /* ★ 与红带同高 = 严格对齐的关键 */
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;
  border-bottom:1px solid rgba(255,255,255,.15);}
#p-logo .mw-wiki-logo{margin:0;
  width:var(--dy-logo-size);height:var(--dy-logo-size);
  background-size:contain !important;background-position:center !important;}
/* ★ 修复 logo 重复 bug：全站只保留皮肤自带 #p-logo 这一个 logo（历史结论，勿改回）。 */

/* =====================================================================
   3. 左右分界：侧边栏与主内容区之间的粗黑色竖向分隔线（本次新增）
      ★ 实现方式：主内容区 #content 的左侧边框，固定在两区交界处。
        同时把 #content 左边距收紧到侧边栏宽度，让分隔线紧贴侧栏右缘、无缝隙。
      ★ 不压文字：#content 自带 1.5em 内边距，分隔线在内容文字左侧之外。
   ===================================================================== */
#content{border-left:var(--dy-divider-width) solid var(--dy-divider-color) !important; /* ★ 分隔线粗细/颜色都在 :root 改 */
  margin-left:var(--dy-sidebar-width) !important;      /* 内容区紧贴侧栏右缘 */
  background:transparent;border-top:0;border-right:0;border-bottom:0;box-shadow:none;}

/* =====================================================================
   4. 全局布局：纯白内容底（本次改为 #ffffff，不再是微黄/米白）
      ★ 卡片、模板、公告、人物框自带边框+阴影，在纯白底上依旧清晰，全部保留不动。
   ===================================================================== */
body{padding-top:var(--dy-nav-height);
  background:var(--dy-bg);          /* 纯白页面背景（:root --dy-bg 控制） */
  color:var(--dy-ink);font-size:var(--dy-font-size);}
.mw-body-content{max-width:var(--dy-content-max);}

/* =====================================================================
   5. 侧边栏菜单（红色旗帜块下方列表，保持原版样式）
   ===================================================================== */
#mw-panel .vector-menu-portal{margin:0;padding:10px 12px;}
#mw-panel h3{font-size:12.5px;letter-spacing:2px;}

/* =====================================================================
   6. 主页顶部横幅（帝鹰绿金，沿用不动）
   ===================================================================== */
.dy-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:linear-gradient(135deg,var(--dy-green) 0%,var(--dy-green-2) 78%,#57634b 100%);
  border-radius:var(--dy-card-radius);padding:26px 30px;
  box-shadow:0 3px 14px rgba(38,43,33,.22);margin-bottom:var(--dy-gap);}
.dy-hero-title{font-size:30px;font-weight:800;letter-spacing:6px;color:var(--dy-gold);
  font-family:"STZhongsong","SimSun",serif;margin-bottom:8px;}
.dy-hero-en{font-family:Arial,"Segoe UI",sans-serif;font-weight:400;
  letter-spacing:3px;margin-left:10px;opacity:.92;}
.dy-hero-desc{color:#d9dcc8;font-size:13.5px;line-height:1.9;max-width:640px;}
.dy-hero-desc b{color:var(--dy-gold);font-size:16px;}
.dy-hero-logo img{border-radius:12px;border:2px solid rgba(230,210,144,.55);
  box-shadow:0 2px 10px rgba(0,0,0,.3);display:block;}

/* =====================================================================
   7. 公告栏（文字由「帝鹰维基:公告」页面控制）
   ===================================================================== */
.dy-announce{background:var(--dy-card-bg);border:var(--dy-card-border);
  border-radius:var(--dy-card-radius);overflow:hidden;
  box-shadow:var(--dy-card-shadow);margin-bottom:var(--dy-gap);}
.dy-announce-h{background:var(--dy-green);color:var(--dy-gold);text-align:center;
  font-weight:700;letter-spacing:8px;padding:8px 0;font-size:15px;}
.dy-announce-b{padding:18px 22px 24px;line-height:2.0;color:var(--dy-ink);min-height:120px;}
.dy-announce-b p{margin:0 0 10px;}

/* =====================================================================
   8. 大板块容器（标题栏居中 + 内容区）
   ===================================================================== */
.dy-section{background:var(--dy-card-bg);border:var(--dy-card-border);
  border-radius:var(--dy-card-radius);overflow:hidden;
  box-shadow:var(--dy-card-shadow);margin-bottom:var(--dy-gap);}
.dy-sec-bar{background:var(--dy-green);color:var(--dy-gold);text-align:center;
  font-weight:700;letter-spacing:6px;padding:8px 0;font-size:15px;}
.dy-sec-note{font-size:12px;color:#8a8578;text-align:center;
  line-height:1.9;padding:10px 18px 0;margin:0;}
.dy-sec-more{text-align:center;color:var(--dy-sub);font-size:12.5px;padding:10px 0 14px;}
.dy-expose.dy-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--dy-gap);}
.dy-lines2{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;}

/* =====================================================================
   9. 人物档案横卡（Template:档案卡；头像左 + 文字右，自适应高度）
   ===================================================================== */
.dy-expose{padding:16px 18px 6px;display:flex;flex-direction:column;gap:var(--dy-gap);}
.dy-pcard{display:flex;gap:16px;align-items:center;padding:12px 14px;
  border:var(--dy-card-border);border-radius:8px;background:#fcfbf6;}
.dy-pcard-ava{flex:0 0 76px;width:76px;height:76px;}
.dy-pcard-ava img{width:76px;height:76px;object-fit:cover;border-radius:50%;
  border:2px solid var(--dy-gold-d);box-shadow:0 2px 6px rgba(38,43,33,.18);}
.dy-pcard-ph{display:flex;width:76px;height:76px;border-radius:50%;
  align-items:center;justify-content:center;background:var(--dy-green);
  color:var(--dy-gold);font-size:30px;font-weight:700;border:2px solid var(--dy-gold-d);}
.dy-pcard-main{flex:1;min-width:0;}
.dy-pcard-name{font-size:17px;font-weight:700;margin-bottom:4px;}
.dy-pcard-name a{color:var(--dy-green-2);}
.dy-pcard-tag{display:inline-block;background:#f1edda;color:#8a7434;
  border:1px solid #e0d6ac;border-radius:999px;padding:1px 12px;
  font-size:12px;margin-bottom:6px;}
.dy-pcard-desc{color:var(--dy-sub);font-size:13.5px;line-height:1.8;}

/* =====================================================================
   10. 管理入口 + 管理员专用浮动上传按钮
   ===================================================================== */
.dy-admin-entry{margin-top:26px;padding:10px 16px;border:1px dashed #c9c4b4;
  border-radius:8px;font-size:12.5px;color:#8a8578;text-align:center;}
.dy-admin-entry a{color:#8a8578;}
#dy-upbtn{position:fixed;right:18px;bottom:18px;z-index:210;
  background:var(--dy-green);color:var(--dy-gold);font-size:13.5px;font-weight:600;
  padding:9px 18px;border-radius:999px;border:1px solid var(--dy-gold-d);
  box-shadow:0 3px 10px rgba(38,43,33,.35);}
#dy-upbtn:hover{background:var(--dy-green-2);}

/* =====================================================================
   11. 手机端适配
   ===================================================================== */
@media(max-width:760px){
  #dy-topnav{gap:14px;overflow-x:auto;justify-content:flex-start;padding:0 10px;}
  #dy-topnav a{padding:4px 10px;font-size:13px;white-space:nowrap;}
  .dy-hero{flex-direction:column;align-items:flex-start;padding:20px;}
  .dy-hero-logo{display:none;}
  .dy-hero-title{font-size:24px;letter-spacing:4px;}
  .dy-grid2{grid-template-columns:1fr;}
  .dy-lines2{grid-template-columns:1fr;}
  .dy-pcard{flex-direction:row;}
  /* 手机端：分隔线减细为 3px，避免挤占有限宽度（粗细仍可在 :root 改） */
  #content{border-left-width:3px !important;}
  #mw-panel{width:auto;}
}