MediaWiki:Common.css：修订间差异

2026年10月22日 (四) 15:09的版本

/* ═══════════════════════════════════════════════════════════════
   帝鹰维基 · 全站样式 v4（简约稳重社群记录风）
   ─────────────────────────────────────────────────────────────
   ★ 修改入口：wiki 后台打开 MediaWiki:Common.css 的「编辑」页签
   ★ 全部可改参数集中在 :root{ }，每行有中文注释，只改冒号后的
     色值 / 数字，保存后浏览器 Ctrl+F5 强刷即生效
   ★ 本页就是唯一的样式修改入口，不需要碰服务器文件
   ═══════════════════════════════════════════════════════════════ */
:root {

  /* ─────────── 一、全局背景与标题栏 ─────────── */
  --dy-bg: #f3f1ea;              /* 全站页面背景色 */
  --dy-content-bg: #ffffff;      /* 内容区（正文纸面）底色 */
  --dy-top-bg: #2e352b;          /* 主页顶部标题栏底色 */
  --dy-top-bg-2: #4a5240;        /* 顶部标题栏渐变第二色 */
  --dy-top-ink: #e8dcb8;         /* 顶部标题文字色 */
  --dy-top-sub: #b9bfae;         /* 顶部副标题文字色 */
  --dy-top-border: #a08d5a;      /* 顶部标题栏左侧装饰条颜色 */
  --dy-lead-bg: #faf8f0;         /* 首页简介按语底色 */
  --dy-notice-bg: #fbf7ea;       /* 公告条底色 */
  --dy-notice-border: #b3a678;   /* 公告条左边框色 */

  /* ─────────── 二、全局文字 ─────────── */
  --dy-font: "Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
                                 /* 全站字体（换宋体改 "SimSun"） */
  --dy-font-size: 15px;          /* 全局正文字号 */
  --dy-ink: #2c2f28;             /* 全局文字主颜色 */
  --dy-ink-sub: #7d8174;         /* 次要文字颜色（简介/说明） */
  --dy-link: #6b7a4b;            /* 链接颜色 */
  --dy-link-hover: #46532c;      /* 链接悬停颜色 */

  /* ─────────── 三、卡片样式 ─────────── */
  --dy-card-bg: #fffdf8;         /* 卡片底色 */
  --dy-card-bg-hover: #fdfbf2;   /* 卡片悬停底色 */
  --dy-card-border: 1px solid #d9d3c2;
                                 /* 卡片边框（虚线例：1px dashed #b5a880；不要边框改 0） */
  --dy-card-border-hover: 1px solid #b3a678;
                                 /* 卡片悬停边框 */
  --dy-card-radius: 12px;        /* 卡片圆角（方正改 4px，直角改 0px） */
  --dy-card-shadow: 0 1px 4px rgba(60,58,45,.06);   /* 卡片阴影（不要改 none） */
  --dy-card-shadow-hover: 0 10px 20px rgba(60,58,45,.13);
                                 /* 卡片悬停阴影 */
  --dy-card-title: #33372d;      /* 卡片标题文字色 */
  --dy-card-tag-bg: #f0efe6;     /* 卡片标签底色 */
  --dy-card-tag-ink: #6b6f5c;    /* 卡片标签文字色 */
  --dy-card-avatar-ring: #d8cba0;/* 卡片头像圆环颜色 */
  --dy-card-btn-bg: #e8dcb8;     /* 卡片按钮底色 */
  --dy-card-btn-ink: #4a4a35;    /* 卡片按钮文字色 */
  --dy-card-btn-hover: #b3a678;  /* 卡片按钮悬停底色 */
  --dy-cards-min: 230px;         /* 卡片最小宽度（越小一行越多张） */
  --dy-gap: 16px;                /* 卡片间距 */
  --dy-section-gap: 30px;        /* 板块之间间距 */

  /* ─────────── 四、侧边栏样式 ─────────── */
  --dy-sidebar-width: 10em;      /* ★侧边栏宽度（写死值）：改数字即缩放，如 9em 更窄 / 12em 更宽 */
  --dy-side-bg: #ffffff;         /* 侧边栏背景色 */
  --dy-side-border: 1px solid #ddd7c6;
                                 /* 侧边栏右边框（不要改 0） */
  --dy-side-shadow: none;        /* 侧边栏阴影（想立体改 0 0 12px rgba(0,0,0,.08)） */
  --dy-side-title-ink: #7a7f6c;  /* 侧边栏分组标题文字色 */
  --dy-side-link: #6b7a4b;       /* 侧边栏链接颜色 */
  --dy-side-link-hover: #46532c; /* 侧边栏链接悬停颜色 */

  /* ─────────── 五、侧边栏顶部图标位（★换帝鹰旗帜只改这里★） ───────────
     url() 里换成你的图片地址即可（本维基文件或任意外链 URL）。
     注意：皮肤自带的旧 logo 已在下方第 6 节隐藏，不会重复显示。 */
  --dy-side-icon: url('http://85.155.184.82:9000/images/logo.jpg');
  --dy-side-icon-height: 84px;   /* 顶部图标高度 */

  /* ─────────── 六、布局 ─────────── */
  --dy-content-max: 1160px;      /* 主内容区最大宽度（与侧边栏共同决定占比） */
  --dy-line: #d9d3c2;            /* 全站分隔线颜色 */
  --dy-sec-mark: #a08d5a;        /* 板块标题小竖条颜色 */
}

/* ═══ 1. 全站基调 ═══ */
body {
  background: var(--dy-bg);
  color: var(--dy-ink);
  font-family: var(--dy-font);
  font-size: var(--dy-font-size);
}
.mw-body-content { font-size: var(--dy-font-size); }
a { color: var(--dy-link); }
a:hover { color: var(--dy-link-hover); }
a.new { color: #a35a4a; }
.mw-body h1.firstHeading { border-bottom: 1px solid var(--dy-line); letter-spacing: 2px; }
h2, h3, h4 { letter-spacing: 1px; }

/* ═══ 2. 主内容区 ═══ */
#content, .mw-body {
  max-width: var(--dy-content-max);
  background: var(--dy-content-bg);
}

/* ═══ 3. 侧边栏（内容在 MediaWiki:Sidebar 编辑） ═══ */
#mw-panel {
  width: var(--dy-sidebar-width);
  background: var(--dy-side-bg);
  border-right: var(--dy-side-border);
  box-shadow: var(--dy-side-shadow);
}
/* ★ 侧边栏顶部图标位（图片在 :root 的 --dy-side-icon 换 URL） */
#mw-panel::before {
  content: '';
  display: block;
  height: var(--dy-side-icon-height);
  margin: 8px 8px 0;
  background: var(--dy-side-icon) center / contain no-repeat;
  pointer-events: none;
}
#mw-panel .portal { margin: 0 0 4px; }
#mw-panel h3 {
  color: var(--dy-side-title-ink) !important;
  border-bottom: 1px solid var(--dy-line);
  letter-spacing: 2px;
  font-size: 12.5px !important;
}
#mw-panel ul li a { color: var(--dy-side-link) !important; font-size: 13px; }
#mw-panel ul li a:hover { color: var(--dy-side-link-hover) !important; text-decoration: none; }

/* ═══ 4. 修复「重复 logo」bug ═══
   皮肤自带的左上角 logo（#p-logo）与上面的图标位重复渲染，
   这里整只隐藏，全站只显示 --dy-side-icon 这一个图标。 */
#p-logo { display: none !important; }

/* ═══ 5. 主页顶部标题栏 / 简介 / 公告 ═══ */
/* 文字都在 Main_Page 编辑；配色用 :root 变量 */
.dy-top {
  background: linear-gradient(135deg, #262b21 0%, var(--dy-top-bg) 55%, var(--dy-top-bg-2) 100%);
  border-left: 5px solid var(--dy-top-border);
  border-radius: 12px;
  padding: 26px 30px 20px;
  margin-bottom: 14px;
}
.dy-top-title { font-size: 34px; font-weight: 800; letter-spacing: 10px; color: var(--dy-top-ink); line-height: 1.2; }
.dy-top-sub { margin-top: 6px; font-size: 13px; letter-spacing: 3px; color: var(--dy-top-sub); }

.dy-lead {
  background: var(--dy-lead-bg);
  border-left: 4px solid var(--dy-sec-mark);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: var(--dy-section-gap);
  font-size: 13.5px;
  color: var(--dy-ink-sub);
  line-height: 1.9;
}

.dy-notice {
  background: var(--dy-notice-bg);
  border-left: 4px solid var(--dy-notice-border);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
}
.dy-notice-h { font-weight: 700; color: var(--dy-card-title); letter-spacing: 2px; font-size: 14px; margin-bottom: 3px; }
.dy-notice-b { font-size: 13px; color: var(--dy-ink-sub); line-height: 1.8; }

/* ═══ 6. 板块与卡片（模板输出，样式在此调） ═══ */
.dy-section { margin-bottom: var(--dy-section-gap); }
.dy-sec-h {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 700;
  color: var(--dy-card-title);
  letter-spacing: 3px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--dy-line);
  padding-bottom: 9px;
}
.dy-sec-h-mark { display: inline-block; width: 5px; height: 20px; background: var(--dy-sec-mark); border-radius: 2px; }

.dy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--dy-cards-min), 1fr));
  gap: var(--dy-gap);
}

.dy-card {
  background: var(--dy-card-bg);
  border: var(--dy-card-border);
  border-radius: var(--dy-card-radius);
  box-shadow: var(--dy-card-shadow);
  padding: 18px 14px 15px;
  text-align: center;
  transition: all .18s ease;
  display: flex; flex-direction: column; align-items: center;
}
.dy-card:hover {
  background: var(--dy-card-bg-hover);
  border: var(--dy-card-border-hover);
  box-shadow: var(--dy-card-shadow-hover);
  transform: translateY(-3px);
}
.dy-card-media img { border-radius: 50%; border: 3px solid var(--dy-card-avatar-ring); }
.dy-card-initial {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(150deg, #3a4231, #262b21);
  color: var(--dy-top-ink);
  border: 3px solid var(--dy-card-avatar-ring);
  font-size: 40px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dy-card-icon { font-size: 26px; color: var(--dy-sec-mark); line-height: 1; margin: 14px 0 6px; }
.dy-card-title { font-size: 16.5px; font-weight: 700; color: var(--dy-card-title); margin-top: 10px; letter-spacing: 1px; }
.dy-card-title a { color: var(--dy-card-title) !important; }
.dy-card-tag {
  display: inline-block; margin-top: 5px;
  font-size: 11.5px; letter-spacing: 1px;
  color: var(--dy-card-tag-ink);
  background: var(--dy-card-tag-bg);
  border: 1px solid var(--dy-line);
  border-radius: 999px; padding: 1px 12px;
}
.dy-card-desc { flex: 1; font-size: 12.5px; color: var(--dy-ink-sub); margin: 8px 2px 12px; line-height: 1.7; }
.dy-card-go a {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  color: var(--dy-card-btn-ink) !important;
  background: var(--dy-card-btn-bg);
  border: 1px solid var(--dy-card-avatar-ring);
  border-radius: 999px; padding: 3px 16px;
}
.dy-card-go a:hover { background: var(--dy-card-btn-hover); color: #fff !important; text-decoration: none; }
.dy-card-empty { border-style: dashed; opacity: .85; }

/* ═══ 7. 手机端 ═══ */
@media (max-width: 720px) {
  .dy-top-title { font-size: 26px; letter-spacing: 5px; }
  .dy-cards { grid-template-columns: repeat(2, 1fr); }
  .dy-card { padding: 12px 10px; }
}
@media (max-width: 480px) {
  .dy-cards { grid-template-columns: 1fr; }
}