打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.css:修订间差异

MediaWiki界面页面
删除的内容 添加的内容
XP-jia留言 | 贡献
测试新版样式
标签已被回退
XP-jia留言 | 贡献
回退
标签手工回退
第1行: 第1行:
/* 全局字体设置,覆盖东亚语言 */
/* =========================================================
✅ 全局字体设置(增强中日韩支持 + 系统一致性)
========================================================= */
body {
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP",
"Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP",
"Noto Sans KR", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Noto Sans KR", sans-serif, "PingFang SC", "Hiragino Sans GB",
"WenQuanYi Micro Hei", "SimSun", "SimHei", "Songti SC", "KaiTi",
"Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei",
"MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic", sans-serif;
"Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic";
color: #222; /* 全站文字颜色微调 */
line-height: 1.6;
}
}


/* 横幅标语 */
/* =========================================================
.banner {
🟥 Banner 横幅区(首页头部标语)
height: auto;
========================================================= */
.hero-banner {
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
justify-content: center;
justify-content: center;
align-items: center;
align-items: center; /* 居中对齐 */
background: linear-gradient(to right, #a50000, #e64545); /* ★ 柔和渐变色,替换原#b30000→#e64545 */
background: linear-gradient(to right, #b30000, #cc3300); /* 渐变背景 */
color: white;
color: white; /* 白色字体,提升对比度 */
font-weight: bold;
font-weight: bold;
border-radius: 12px;
border-radius: 12px; /* 圆角优化 */
padding: 16px 28px;
padding: 12px 24px; /* 增加上下 padding */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 更柔和的阴影 */
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 阴影改淡,更符合 Citizen 扁平风格 */
text-align: center;
text-align: center;
}
}


.hero-banner .chinese-text {
.banner-text {
font-size: 28px;
margin: 0;
line-height: 1.4; /* 让文本更易读 */
}

.banner .chinese-text {
font-size: 24px; /* 默认大小 */
font-weight: 700;
font-weight: 700;
margin-bottom: 6px;
}
}


.hero-banner .english-text {
.banner .english-text {
font-size: 16px;
font-size: 16px; /* 默认大小 */
font-weight: 500;
font-weight: 500;
opacity: 0.9;
opacity: 0.9;
letter-spacing: 0.5px;
}
}


/* 当屏幕宽度大于 768px(如平板和大屏幕设备) */
/* 副标题(可选项) */
@media screen and (min-width: 768px) {
.hero-banner .subtitle {
.banner .chinese-text {
font-size: 14px;
font-size: 28px;
color: rgba(255,255,255,0.85);
}
margin-top: 4px;
letter-spacing: 0.5px;
}


.banner .english-text {
/* 响应式调整 */
font-size: 18px;
@media screen and (max-width: 768px) {
}
.hero-banner .chinese-text { font-size: 22px; }
.hero-banner .english-text { font-size: 14px; }
}
}


/* 当屏幕宽度小于 480px(如手机设备) */
/* =========================================================
@media screen and (max-width: 480px) {
🧩 Section 模块容器(可重复使用)
.banner .chinese-text {
========================================================= */
font-size: 20px;
.homepage-section {
}
margin: 30px 0;

.banner .english-text {
font-size: 14px;
}
}
}


/* 内容块样式 */
/* =========================================================
📦 内容块(卡片样式)
========================================================= */
.content-box {
.content-box {
margin: 10px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
border-radius: 10px;
border: 1px solid #e0e0e0;
border: 1px solid #e0e0e0;
padding: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
}
第77行: 第73行:
.content-box:hover {
.content-box:hover {
transform: translateY(-5px);
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
}


/* 标题样式 */
.content-box h2 {
.content-box h2 {
position: relative;
position: relative;
padding-bottom: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
margin-bottom: 10px;
border-bottom: 2px solid #b30000; /* ★ 颜色与 banner 主色统一 */
border-bottom: 2px solid red;
font-size: 1.25rem;
}
}


/* 段落样式 */
.content-box p {
.content-box p {
font-size: 0.95rem;
line-height: 1.6;
color: #333;
line-height: 1.7;
}
}


/* Flex 容器 */
/* =========================================================
🧱 Flex 布局容器(多列展示)
========================================================= */
.flex-container {
.flex-container {
display: flex;
display: flex;
justify-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
gap: 24px; /* ★ 原 gap:20px → 改为 24px,空间更舒适 */
}
}


.flex-container .content-box {
.flex-container .content-box {
flex: 1 1 calc(33.33% - 24px);
flex: 1;
max-width: 33.33%;
box-sizing: border-box;
box-sizing: border-box;
min-width: 250px; /* 避免在窄屏下压缩过头 */
}
}


/* 移动端改为单列 */
/* 移动端优化 */
@media (max-width: 768px) {
@media (max-width: 768px) {
.flex-container {
.flex-container {
flex-direction: column;
flex-direction: column;
}
}

.flex-container .content-box {
.flex-container .content-box {
max-width: 100%;
max-width: 100%;
margin-bottom: 20px;
margin-bottom: 20px;
}
}
}


.banner .chinese-text,
/* =========================================================
.banner .english-text {
🌿 细节增强:重定向、页脚说明等
text-align: center;
========================================================= */
font-size: 18px;
.mw-redirect {
}
color: #009944; /* ★ 深绿色,较柔和 */

.banner .english-text {
font-size: 14px;
}
}
}


/* 让重定向的内链变成绿色 */
/* 页脚标注(可在首页底部添加) */
.footer-note {
.mw-redirect {
text-align: center;
color: green;
font-size: 13px;
color: #777;
margin-top: 40px;
border-top: 1px solid #eee;
padding-top: 12px;
letter-spacing: 0.3px;
}
}

2025年10月9日 (四) 13:07的版本

/* 全局字体设置,覆盖东亚语言 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 
               "Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP", 
               "Noto Sans KR", sans-serif, "PingFang SC", "Hiragino Sans GB", 
               "Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei", 
               "Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic";
}

/* 横幅标语 */
.banner {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 居中对齐 */
  background: linear-gradient(to right, #b30000, #cc3300); /* 渐变背景 */
  color: white; /* 白色字体,提升对比度 */
  font-weight: bold;
  border-radius: 12px; /* 圆角优化 */
  padding: 12px 24px; /* 增加上下 padding */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 更柔和的阴影 */
  text-align: center;
}

.banner-text {
  margin: 0;
  line-height: 1.4; /* 让文本更易读 */
}

.banner .chinese-text {
  font-size: 24px; /* 默认大小 */
  font-weight: 700;
}

.banner .english-text {
  font-size: 16px; /* 默认大小 */
  font-weight: 500;
  opacity: 0.9;
}

/* 当屏幕宽度大于 768px(如平板和大屏幕设备) */
@media screen and (min-width: 768px) {
  .banner .chinese-text {
    font-size: 28px;
  }

  .banner .english-text {
    font-size: 18px;
  }
}

/* 当屏幕宽度小于 480px(如手机设备) */
@media screen and (max-width: 480px) {
  .banner .chinese-text {
    font-size: 20px;
  }

  .banner .english-text {
    font-size: 14px;
  }
}

/* 内容块样式 */
.content-box {
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.content-box h2 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid red;
}

.content-box p {
  line-height: 1.6;
}

/* Flex 容器 */
.flex-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.flex-container .content-box {
  flex: 1;
  max-width: 33.33%;
  box-sizing: border-box;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }

  .flex-container .content-box {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .banner .chinese-text,
  .banner .english-text {
    text-align: center;
    font-size: 18px;
  }

  .banner .english-text {
    font-size: 14px;
  }
}

/* 让重定向的内链变成绿色 */
.mw-redirect {
    color: green;
}