MediaWiki:Common.css：修订间差异

来自帝鹰维基
跳转到导航 跳转到搜索
（v13）
（v14）
标签：替换
第1行： 第1行：
/* =====================================================================
  帝鹰维基 · 全站样式 v13（红色导航 + 暗色功能面板 + 军装绿侧栏
                        + 电台/聊天室模块 + 链接小卡片 + 用户链接外移）
  皮肤：不更换，直接在原版 Vector 皮肤上叠加本样式
  =====================================================================
  ★ 所有可改参数都集中在下面 :root 里，只改冒号后的数值/色值即可。
  ===================================================================== */
:root{
  /* ---- ① 顶部红色导航区 ---- */
  --dy-nav-bg:#8e1a12;        /* ★★ 顶部导航栏红色基准（改这里全局换色） ★★ */
  --dy-nav-height:52px;      /* 顶部主导航栏高度 */
  --dy-nav-line:#0d0d0d;      /* 导航栏下方那条细黑线的颜色 */
  --dy-nav-line-w:2px;        /* 细黑线粗细 */
  /* ---- ② 功能面板（页面/讨论/阅读/编辑/源代码/查看历史/星标/搜索框/更多 所在条） ---- */
  --dy-tabstrip:62px;        /* 功能面板高度 */
  --dy-panel-bg:rgba(26,28,22,.84); /* ★★ 面板底色：低透明度浅黑（压在白色页面上呈暗灰黑） ★★ */
  --dy-panel-decor:rgba(255,255,255,.05); /* 面板装饰（艺术文字/几何线）透明度，越调小越低调 */
  --dy-nav-ink:#ffffff;      /* 面板内文字颜色（白） */
  --dy-nav-hover:#f5d9a8;    /* 悬浮/选中高亮文字色（浅金） */
  --dy-nav-hover-bg:rgba(255,255,255,.16); /* 悬浮高亮底色 */
  /* ---- ③ 侧边栏：深暗军装橄榄绿 ---- */
  --dy-side-olive:#2c3226;    /* ★★ 侧边栏整体背景色（军装橄榄绿，可自行调） ★★ */
  --dy-side-ink:#eceada;      /* 侧边栏链接文字颜色（米白，保证可读） */
  --dy-side-head:#c6cbae;    /* 侧边栏分组标题颜色（浅橄榄） */
  --dy-side-hover:#e6d290;    /* 侧边栏链接悬浮颜色（金） */
  /* ---- ④ 全局 ---- */
  --dy-bg:#ffffff;            /* ★★ 右侧主内容区/全站闲置背景：纯白 ★★ */
  --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-inner:#f0f0ed;    /* ★★ 公告框/成员名片 内容区底色（本次改为浅灰） ★★ */
  --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:#0d0d0d; /* ★★ 分隔线颜色（黑色） ★★ */
  --dy-divider-width:8px;    /* ★★ 分隔线粗细：8px 厚实黑线 ★★ */
}


/* =====================================================================
  0. 顶部红色导航栏（#dy-topnav 由 Common.js 注入）+ 底部细黑线
  ===================================================================== */
#dy-topnav{position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--dy-nav-height);background:var(--dy-nav-bg);
  border-bottom:var(--dy-nav-line-w) solid var(--dy-nav-line); /* ★ 导航下方细黑线 */
  box-sizing:content-box;                            /* 黑线画在 52px 高度之外，不挤内容 */
  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. 功能面板：红色导航下方的暗色横条（原生按钮 + 搜索框 + 更多 全在里面）
      ★ 底色 = 低透明度浅黑 --dy-panel-bg；空白处有低调装饰：
        ::before = 居中艺术文字水印；::after = 右侧鹰翼状几何细线纹样。
        装饰层 pointer-events:none 且透明度极低，绝不遮挡按钮/搜索框/文字。
  ===================================================================== */
#mw-page-base{height:var(--dy-tabstrip) !important;
  background:var(--dy-panel-bg) !important;          /* ★ 面板暗色底（原纯红改暗黑） */
  position:relative;overflow:hidden;}
#mw-page-base::before{content:'IMPERIAL EAGLE · 帝鹰网联 · IEW';
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:19px;letter-spacing:14px;white-space:nowrap;
  color:var(--dy-panel-decor);pointer-events:none;}  /* 艺术文字水印（透明度 :root 可调） */
#mw-page-base::after{content:'';position:absolute;right:10px;top:50%;
  width:150px;height:40px;transform:translateY(-50%);
  background:repeating-linear-gradient(118deg,var(--dy-panel-decor) 0 1px,transparent 1px 8px);
  -webkit-mask:radial-gradient(ellipse 100% 100% at 100% 50%,#000 30%,transparent 78%);
          mask:radial-gradient(ellipse 100% 100% at 100% 50%,#000 30%,transparent 78%);
  pointer-events:none;}                              /* 鹰翼状几何细线（右端渐隐） */
/* 面板占位等高 + 负边距抵消 → 内容区紧贴面板底部，无多余留白 */
#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;
  position:absolute;left:0;right:0;z-index:2;}      /* 按钮层压在装饰层之上 */
/* 左右两组（含搜索框）flex 垂直居中，与面板同高严丝合缝 */
#left-navigation,#right-navigation{margin-top:0 !important;
  height:var(--dy-tabstrip);box-sizing:border-box;
  display:flex;align-items:center;}
#left-navigation > *,#right-navigation > *{margin-top:0 !important;}
/* —— 原生按钮（1.39 类名 .vector-menu-tabs）：白字适配暗底 —— */
.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-search form{margin:0;}
#p-search input[type="search"],#simpleSearch{border-radius:6px;}
/* =====================================================================
  2. 右上角用户登录信息外移（用户名/讨论/参数设置/监视列表/贡献/退出）
      ★ 从红色导航内部移到：红色导航下方、白色主内容区右上空白处。
        内容区顶部同步加内边距，保证不压正文、卡片、搜索框。
  ===================================================================== */
#p-personal{top:calc(var(--dy-nav-height) + var(--dy-tabstrip) + 10px) !important;
  right:26px !important;z-index:220;}
#p-personal li a{color:#5a5548;font-size:12.5px;}    /* 深灰字，白底上清晰可点 */
#p-personal li a:hover{color:var(--dy-nav-bg);}      /* 悬浮变红，呼应顶栏 */
/* =====================================================================
  3. 侧边栏：深暗军装橄榄绿整体背景 + 顶部红色旗帜块 + 厚黑分隔线
      ★ 背景实现：body::before 画一条固定全高的橄榄绿竖列（宽度=侧栏宽），
        菜单滚动时绿色始终铺满左列；文字色米白保证可读。
  ===================================================================== */
body::before{content:'';position:fixed;left:0;top:var(--dy-nav-height);bottom:0;
  width:calc(var(--dy-sidebar-width));background:var(--dy-side-olive);z-index:0;}
#mw-panel{top:calc(var(--dy-nav-height) + var(--dy-nav-line-w)) !important;
  width:var(--dy-sidebar-width);padding-left:0;
  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:2px solid var(--dy-nav-line);}
#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;}
/* 侧边栏文字配色：深底上米白可读、悬浮变金 */
#mw-panel h3{font-size:12.5px;letter-spacing:2px;color:var(--dy-side-head);}
#mw-panel .vector-menu-portal{margin:0;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);}
#mw-panel .vector-menu-content-list a,
#mw-panel .vector-menu-content-list a:visited{color:var(--dy-side-ink);}
#mw-panel .vector-menu-content-list a:hover{color:var(--dy-side-hover);}
#mw-panel .vector-menu-content-list a.new,
#mw-panel .vector-menu-content-list a.new:visited{color:#f2b3a4;} /* 未创建词条浅红 */
/* =====================================================================
  4. 黑色厚分隔线：侧边栏 ↔ 主内容区（#content 左边框实现，不压内容）
  ===================================================================== */
#content{border-left:var(--dy-divider-width) solid var(--dy-divider-color) !important;
  margin-left:var(--dy-sidebar-width) !important;
  padding-top:3.4em !important;      /* 顶部加高：给外移的用户链接让位，不压正文 */
  background:transparent;border-top:0;border-right:0;border-bottom:0;box-shadow:none;}
/* =====================================================================
  5. 全局布局（纯白底）+ 侧边栏菜单
  ===================================================================== */
body{padding-top:calc(var(--dy-nav-height) + var(--dy-nav-line-w));
  background:var(--dy-bg);color:var(--dy-ink);font-size:var(--dy-font-size);}
.mw-body-content{max-width:var(--dy-content-max);}
/* =====================================================================
  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;background:var(--dy-card-inner);} /* ★ 公告内容区浅灰 */
.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:10px 14px;}
.dy-lines2 .dy-line a{display:block;background:#f6f6f4;
  border:1px solid #ddd9cc;border-radius:8px;padding:9px 14px;
  color:#3a3a35;font-size:14px;text-align:center;
  transition:background .15s,color .15s,box-shadow .15s,transform .15s;}
.dy-lines2 .dy-line a:visited{color:#3a3a35;}
.dy-lines2 .dy-line a:hover{background:#ffffff;border-color:var(--dy-nav-bg);
  color:var(--dy-nav-bg);box-shadow:0 2px 10px rgba(0,0,0,.08);transform:translateY(-1px);}
.dy-lines2 .dy-line a.new,.dy-lines2 .dy-line a.new:visited{color:#b3261e;} /* 未创建词条保持红名 */
/* =====================================================================
  9. 人物档案横卡：内容区底色浅灰（其余样式不动）
  ===================================================================== */
.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:var(--dy-card-inner);} /* ★ 浅灰 */
.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. 侧边栏模块：♪ 帝鹰电台 + 💬 帝鹰聊天室（Common.js 注入，军装绿主题）
  ===================================================================== */
#dy-radio,#dy-chat{margin:10px 10px 2px;background:#232819;
  border:1px solid rgba(230,210,144,.28);border-radius:10px;
  padding:10px 10px 11px;color:var(--dy-gold);}
#dy-radio .dy-mod-h,#dy-chat .dy-mod-h{font-size:12.5px;letter-spacing:2px;
  font-weight:700;margin-bottom:7px;}
#dy-r-title{font-size:12px;color:#f2f1e4;min-height:18px;margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#dy-r-ctl{display:flex;gap:5px;}
#dy-r-ctl button,#dy-chat-open{background:#3a4232;color:var(--dy-gold);
  border:1px solid rgba(230,210,144,.35);border-radius:6px;
  padding:3px 10px;font-size:13px;cursor:pointer;font-family:inherit;}
#dy-chat-open{display:block;width:100%;padding:6px 0;text-align:center;}
#dy-r-ctl button:hover,#dy-chat-open:hover{background:#4a5440;color:#f5e6b8;}
/* 聊天室弹层（点击「进入聊天室」出现，内置 /chat/ 页面 iframe） */
#dy-chat-ov{position:fixed;inset:0;z-index:500;background:rgba(10,12,8,.72);
  display:flex;align-items:center;justify-content:center;}
#dy-chat-ov[hidden]{display:none;}
.dy-chat-frame{width:min(960px,96vw);height:88vh;background:#fff;
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 40px rgba(0,0,0,.5);}
.dy-chat-bar{background:var(--dy-green);color:var(--dy-gold);
  padding:6px 12px;font-size:13px;display:flex;
  justify-content:space-between;align-items:center;letter-spacing:2px;}
#dy-chat-close{background:none;border:1px solid rgba(230,210,144,.4);
  color:var(--dy-gold);border-radius:6px;padding:2px 10px;cursor:pointer;font-size:12.5px;}
#dy-chat-close:hover{background:#3a4232;}
.dy-chat-frame iframe{flex:1;border:0;width:100%;}
/* =====================================================================
  11. 管理入口 + 管理员专用浮动上传按钮
  ===================================================================== */
.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);}
/* =====================================================================
  12. 手机端适配
  ===================================================================== */
@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;}
  #mw-page-base::before{letter-spacing:6px;font-size:14px;}  /* 装饰水印缩小 */
  .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;}
  #content{border-left-width:4px !important;padding-top:3.6em !important;}
  /* 手机端：固定绿列改为跟随面板自身的绿色背景 */
  body::before{display:none;}
  #mw-panel{width:auto;background:var(--dy-side-olive);}
}

2026年10月22日 (四) 17:31的版本
检索自“http://www.diyingw.wiki/index.php?title=MediaWiki:Common.css&oldid=82”