打开/关闭搜索
打开/关闭菜单
30
8
13
1.6K
陋室
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.css：修订间差异

MediaWiki界面页面
更多操作
以互动方式浏览历史
←上一编辑
Maintenance script​（留言 | 贡献）
110次编辑
删除的内容 添加的内容
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,047次编辑
ds
标签：已被回退
Maintenance script​（留言 | 贡献）
110次编辑
首页样式小幅优化（选择器收敛与中间断点）
 
（未显示2个用户的14个中间版本）
第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", sans-serif, "PingFang SC", "Hiragino Sans GB",
"Noto Sans KR", sans-serif, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei",
"Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei",
"Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic";
"Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic";
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
}


/* 2026-01-11: load Mainpage-specific styles from dedicated page */
/* ===========================
横幅标语样式
=========================== */
.banner {
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
color: white;
font-weight: bold;
border-radius: 20px;
padding: 24px 32px;
text-align: center;
margin: 20px 0;
position: relative;
overflow: hidden;
}


.banner::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
animation: float 20s linear infinite;
}


/* 全站重定向链接样式 */
@keyframes float {
.mw-redirect {
0% { transform: translate(0, 0) rotate(0deg); }
color: #008000 !important; /* 使用 hex 颜色值，提高优先级 */
100% { transform: translate(-20px, -20px) rotate(360deg); }
}

.banner-text {
margin: 0;
line-height: 1.4;
position: relative;
z-index: 2;
}

.banner .chinese-text {
font-size: 28px;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.banner .english-text {
font-size: 18px;
font-weight: 500;
font-weight: 500;
opacity: 0.95;
margin-top: 8px;
}
}


/* 重定向链接悬停效果 */
/* ===========================
.mw-redirect:hover {
内容块样式 - 改进版
color: #006400 !important;
=========================== */
text-decoration: underline;
.content-box {
margin: 15px;
padding: 25px;
border-radius: 16px;
border: none;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
}


/* 导航框样式迁移至 Template:Navbox/styles.css */
.content-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transition: transform 0.3s ease;
}


/* 语言链接样式 */
.content-box:hover::before {
#p-lang ul {
transform: scaleX(1);
list-style: none;
padding: 0;
margin: 10px 0;
}
}


.content-box h2 {
#p-lang li {
display: inline-block;
position: relative;
padding-bottom: 12px;
margin-right: 10px;
margin-bottom: 16px;
border-bottom: 2px solid #e0e0e0;
font-size: 1.3rem;
color: #2c3e50;
display: flex;
align-items: center;
gap: 10px;
}
}
/* 2026-01-12: 首页样式从 LocalSettings.php 迁移到此处（仅首页生效） */

body.page-Main_Page .banner {
.content-box h2::before {
height: auto !important;
font-size: 1.5em;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
background: linear-gradient(135deg, #8B0000, #B22222) !important; /* 改进对比度 */
color: white !important;
font-weight: bold !important;
border-radius: 12px !important;
padding: 12px 24px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
text-align: center !important;
margin: 20px 0 !important;
}
}


body.page-Main_Page .banner-text {
.content-box p {
margin: 0 !important;
line-height: 1.7;
font-size: 0.95rem;
line-height: 1.4 !important;
color: #555;
margin-bottom: 0;
}
}


body.page-Main_Page .banner .chinese-text {
.content-box:hover {
font-size: 24px !important;
transform: translateY(-8px) scale(1.02);
font-weight: 700 !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.95);
}
}


body.page-Main_Page .banner .english-text {
/* ===========================
font-size: 16px !important;
网格布局 - 改进版
font-weight: 500 !important;
=========================== */
opacity: 0.9 !important;
.flex-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin: 25px 0;
}
}


/* 当屏幕宽度大于 768px（如平板和大屏幕设备） */
.homepage-section {
@media screen and (min-width: 768px) {
margin: 40px 0;
body.page-Main_Page .banner .chinese-text {
}
font-size: 28px !important;
}


body.page-Main_Page .banner .english-text {
/* ===========================
font-size: 18px !important;
特殊分类样式
}
=========================== */
/* 知识掌握模型区域 */
.content-box:first-of-type {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
}


/* 当屏幕宽度小于 480px（如手机设备） */
.content-box:first-of-type h2 {
@media screen and (max-width: 480px) {
color: white;
body.page-Main_Page .banner .chinese-text {
border-bottom-color: rgba(255,255,255,0.3);
font-size: 20px !important;
}
}


body.page-Main_Page .banner .english-text {
.content-box:first-of-type p {
font-size: 14px !important;
color: rgba(255,255,255,0.9);
}
}
}


/* 内容块样式 */
.content-box:first-of-type .navbox {
body.page-Main_Page .content-box {
background: rgba(255,255,255,0.1);
border-radius: 10px;
margin: 10px !important;
padding: 15px;
padding: 20px !important;
border-radius: 10px !important;
border: 1px solid #e0e0e0 !important;
-webkit-transition: -webkit-transform 0.3s ease, box-shadow 0.3s ease !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
will-change: transform !important; /* 性能优化 */
backface-visibility: hidden !important; /* 性能优化 */
}
}


body.page-Main_Page .content-box:hover {
/* 最近更改区域 */
-webkit-transform: translateY(-5px) !important;
.content-box:nth-of-type(2) {
-moz-transform: translateY(-5px) !important;
border-left: 5px solid #e74c3c;
transform: translateY(-5px) !important;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
}
}


body.page-Main_Page .content-box:focus {
/* 哲学与思想区域 */
outline: 2px solid #0066cc !important; /* 可访问性改进 */
.homepage-section:nth-child(1) .content-box:nth-child(1) {
outline-offset: 2px !important;
border-left: 5px solid #3498db;
}
}


body.page-Main_Page .content-box h2 {
/* 文学与艺术区域 */
position: relative !important;
.homepage-section:nth-child(1) .content-box:nth-child(2) {
padding-bottom: 10px !important;
border-left: 5px solid #9b59b6;
margin-bottom: 10px !important;
border-bottom: 2px solid red !important;
color: #333333 !important;
}
}


body.page-Main_Page .content-box p {
/* 技术与数据区域 */
line-height: 1.6 !important;
.homepage-section:nth-child(1) .content-box:nth-child(3) {
color: #666666 !important;
border-left: 5px solid #2ecc71;
}
}


/* 工程与实践区域 */
/* Flex 容器 */
body.page-Main_Page .flex-container {
.homepage-section:nth-child(2) .content-box:nth-child(1) {
display: flex !important;
border-left: 5px solid #e67e22;
justify-content: space-between !important;
gap: 20px !important;
flex-wrap: wrap !important;
}
}


body.page-Main_Page .flex-container .content-box {
/* 数据与智能区域 */
flex: 1 !important;
.homepage-section:nth-child(2) .content-box:nth-child(2) {
min-width: 300px !important;
border-left: 5px solid #1abc9c;
max-width: 33.33% !important;
box-sizing: border-box !important;
}
}
/* 中等屏幕优化 */

@media (max-width: 900px) {
/* 软件与系统区域 */
.homepage-section:nth-child(2) .content-box:nth-child(3) {
body.page-Main_Page .flex-container .content-box {
max-width: 50% !important;
border-left: 5px solid #34495e;
}
}
}


/* 学习与成长区域 */
.homepage-section:nth-child(3) .content-box:nth-child(1) {
border-left: 5px solid #f39c12;
}


/* 管理与人文区域 */
/* 移动端优化 */
@media (max-width: 768px) {
.homepage-section:nth-child(3) .content-box:nth-child(2) {
body.page-Main_Page .flex-container {
border-left: 5px solid #d35400;
flex-direction: column !important;
}
gap: 15px !important; /* 统一间距 */

/* 竞赛与创造区域 */
.homepage-section:nth-child(3) .content-box:nth-child(3) {
border-left: 5px solid #c0392b;
}

/* 站点与结构区域 */
.content-box:last-of-type {
border-left: 5px solid #7f8c8d;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}

.content-box:last-of-type h2 {
color: white;
border-bottom-color: rgba(255,255,255,0.3);
}

.content-box:last-of-type p {
color: rgba(255,255,255,0.9);
}

/* ===========================
导航框样式
=========================== */
.navbox {
background: transparent;
border: none;
margin: 10px 0;
}

.navbox a {
color: inherit;
text-decoration: none;
padding: 4px 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: inline-block;
}

.navbox a:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}

/* ===========================
特殊样式
=========================== */
.mw-redirect {
color: #00b894;
font-weight: 500;
}

/* ===========================
响应式设计 - 改进版
=========================== */

/* 平板和大屏幕设备 */
@media screen and (min-width: 1024px) {
.flex-container {
grid-template-columns: repeat(3, 1fr);
}
.banner .chinese-text {
font-size: 32px;
}
}


body.page-Main_Page .flex-container .content-box {
.banner .english-text {
max-width: 100% !important; /* 移除限制 */
font-size: 20px;
width: 100% !important;
margin-bottom: 0 !important; /* 统一使用 gap */
}
}
}


body.page-Main_Page .banner .chinese-text,
/* 平板设备 */
body.page-Main_Page .banner .english-text {
@media screen and (max-width: 1024px) and (min-width: 768px) {
text-align: center !important;
.flex-container {
grid-template-columns: repeat(2, 1fr);
}
}
}


body.page-Main_Page .banner .chinese-text {
/* 手机设备 */
font-size: 20px !important;
@media screen and (max-width: 768px) {
.flex-container {
grid-template-columns: 1fr;
gap: 20px;
}
}


body.page-Main_Page .banner .english-text {
.content-box {
margin: 10px 0;
font-size: 14px !important;
padding: 20px;
}
}
}


/* 为减少动画的用户提供支持 */
.banner {
@media (prefers-reduced-motion: reduce) {
padding: 20px;
body.page-Main_Page .content-box {
margin: 15px 0;
-webkit-transition: none !important;
transition: none !important;
}
}


body.page-Main_Page .content-box:hover {
.banner .chinese-text,
-webkit-transform: none !important;
.banner .english-text {
-moz-transform: none !important;
text-align: center;
transform: none !important;
}
}
}
}


/* 暗色模式覆盖（Citizen: night） */
/* 小屏手机设备 */
.skin-theme-clientpref-night body.page-Main_Page .banner {
@media screen and (max-width: 480px) {
background: linear-gradient(135deg, #3a0c0c, #5a1a1a) !important;
.banner .chinese-text {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
font-size: 22px;
}
}


.skin-theme-clientpref-night body.page-Main_Page .content-box {
.banner .english-text {
border-color: #2f2f2f !important;
font-size: 16px;
background-color: #1c1c1c !important;
}
}


.content-box {
.skin-theme-clientpref-night body.page-Main_Page .content-box:hover {
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5) !important;
padding: 18px;
}
margin: 8px 0;
}


.content-box h2 {
.skin-theme-clientpref-night body.page-Main_Page .content-box:focus {
outline-color: #5ea0ff !important;
font-size: 1.2rem;
}
}
}


.skin-theme-clientpref-night body.page-Main_Page .content-box h2 {
/* 动画增强 */
border-bottom-color: #b94a4a !important;
@keyframes fadeInUp {
color: #ffffff !important;
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}


.content-box {
.skin-theme-clientpref-night body.page-Main_Page .content-box p {
color: #cccccc !important;
animation: fadeInUp 0.6s ease-out;
}
}

/* 为不同区块设置延迟动画 */
.homepage-section:nth-child(1) .content-box:nth-child(1) { animation-delay: 0.1s; }
.homepage-section:nth-child(1) .content-box:nth-child(2) { animation-delay: 0.2s; }
.homepage-section:nth-child(1) .content-box:nth-child(3) { animation-delay: 0.3s; }
.homepage-section:nth-child(2) .content-box { animation-delay: 0.4s; }
.homepage-section:nth-child(3) .content-box { animation-delay: 0.5s; }

2026年1月12日 (一) 23:57的最新版本

/* 全局字体设置，覆盖东亚语言 */
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";
}

/* 2026-01-11: load Mainpage-specific styles from dedicated page */


/* 全站重定向链接样式 */
.mw-redirect {
  color: #008000 !important; /* 使用 hex 颜色值，提高优先级 */
  font-weight: 500;
}

/* 重定向链接悬停效果 */
.mw-redirect:hover {
  color: #006400 !important;
  text-decoration: underline;
}

/* 导航框样式迁移至 Template:Navbox/styles.css */

/* 语言链接样式 */
#p-lang ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

#p-lang li {
  display: inline-block;
  margin-right: 10px;
}
/* 2026-01-12: 首页样式从 LocalSettings.php 迁移到此处（仅首页生效） */
body.page-Main_Page .banner {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background: linear-gradient(135deg, #8B0000, #B22222) !important; /* 改进对比度 */
  color: white !important;
  font-weight: bold !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  text-align: center !important;
  margin: 20px 0 !important;
}

body.page-Main_Page .banner-text {
  margin: 0 !important;
  line-height: 1.4 !important;
}

body.page-Main_Page .banner .chinese-text {
  font-size: 24px !important;
  font-weight: 700 !important;
}

body.page-Main_Page .banner .english-text {
  font-size: 16px !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
}

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

  body.page-Main_Page .banner .english-text {
    font-size: 18px !important;
  }
}

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

  body.page-Main_Page .banner .english-text {
    font-size: 14px !important;
  }
}

/* 内容块样式 */
body.page-Main_Page .content-box {
  margin: 10px !important;
  padding: 20px !important;
  border-radius: 10px !important;
  border: 1px solid #e0e0e0 !important;
  -webkit-transition: -webkit-transform 0.3s ease, box-shadow 0.3s ease !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform !important; /* 性能优化 */
  backface-visibility: hidden !important; /* 性能优化 */
}

body.page-Main_Page .content-box:hover {
  -webkit-transform: translateY(-5px) !important;
  -moz-transform: translateY(-5px) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
}

body.page-Main_Page .content-box:focus {
  outline: 2px solid #0066cc !important; /* 可访问性改进 */
  outline-offset: 2px !important;
}

body.page-Main_Page .content-box h2 {
  position: relative !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  border-bottom: 2px solid red !important;
  color: #333333 !important;
}

body.page-Main_Page .content-box p {
  line-height: 1.6 !important;
  color: #666666 !important;
}

/* Flex 容器 */
body.page-Main_Page .flex-container {
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

body.page-Main_Page .flex-container .content-box {
  flex: 1 !important;
  min-width: 300px !important;
  max-width: 33.33% !important;
  box-sizing: border-box !important;
}
/* 中等屏幕优化 */
@media (max-width: 900px) {
  body.page-Main_Page .flex-container .content-box {
    max-width: 50% !important;
  }
}


/* 移动端优化 */
@media (max-width: 768px) {
  body.page-Main_Page .flex-container {
    flex-direction: column !important;
    gap: 15px !important; /* 统一间距 */
  }

  body.page-Main_Page .flex-container .content-box {
    max-width: 100% !important; /* 移除限制 */
    width: 100% !important;
    margin-bottom: 0 !important; /* 统一使用 gap */
  }

  body.page-Main_Page .banner .chinese-text,
  body.page-Main_Page .banner .english-text {
    text-align: center !important;
  }

  body.page-Main_Page .banner .chinese-text {
    font-size: 20px !important;
  }

  body.page-Main_Page .banner .english-text {
    font-size: 14px !important;
  }
}

/* 为减少动画的用户提供支持 */
@media (prefers-reduced-motion: reduce) {
  body.page-Main_Page .content-box {
    -webkit-transition: none !important;
    transition: none !important;
  }

  body.page-Main_Page .content-box:hover {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;
  }
}

/* 暗色模式覆盖（Citizen: night） */
.skin-theme-clientpref-night body.page-Main_Page .banner {
  background: linear-gradient(135deg, #3a0c0c, #5a1a1a) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

.skin-theme-clientpref-night body.page-Main_Page .content-box {
  border-color: #2f2f2f !important;
  background-color: #1c1c1c !important;
}

.skin-theme-clientpref-night body.page-Main_Page .content-box:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5) !important;
}

.skin-theme-clientpref-night body.page-Main_Page .content-box:focus {
  outline-color: #5ea0ff !important;
}

.skin-theme-clientpref-night body.page-Main_Page .content-box h2 {
  border-bottom-color: #b94a4a !important;
  color: #ffffff !important;
}

.skin-theme-clientpref-night body.page-Main_Page .content-box p {
  color: #cccccc !important;
}
检索自“https://learn.houjue.digital/index.php?title=MediaWiki:Common.css&oldid=1682”
作者
此页面最后编辑于2026年1月12日 (星期一) 23:57，编辑者是陋室用户Maintenance script。 基于后觉的贡献。
著作权

陋室的全部文字提供于 知识共享署名-非商业性使用-相同方式共享 4.0 协议国际版 条款之下，附加条款亦可能适用。请参阅我们的使用条款和隐私政策，使用陋室即视为同意上述条款的约束。

陋室上提及的所有公司名称、产品名称、服务名称和标识均为其各自所有者的商标或注册商标。使用这些商标仅为了识别和说明之目的，并不意味着任何形式的认可或关联。陋室与上述公司及其商标没有任何关系或隶属。

Microsoft®是Microsoft Corporation(微软公司)的商标，Google®是Google LLC的注册商标，Apple®是Apple Inc.(苹果公司)的商标。 Wikipedia®和维基百科标志是维基媒体基金会的注册商标；维基™是维基媒体基金会的商标。维基媒体基金会是按美国国内税收法501(c)(3)登记的非营利慈善机构。 所有其他商标和标识均为其各自所有者的财产。未经相应商标所有者的明确书面同意，不得以任何方式使用这些商标。