MediaWiki:Common.css：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

删除的内容添加的内容

行内

@@ 第1行： / 第1行： @@
 /* ===========================
-   全局字体设置
+   字体与基础设置
 =========================== */
 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", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP", "Noto Sans KR",
-               "Noto Sans KR", sans-serif, "PingFang SC", "Hiragino Sans GB",
+               "PingFang SC", "Microsoft YaHei", sans-serif;
+  background-color: #ffffff;
-               "Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei",
+  line-height: 1.7;
-               "Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic";
+  color: #333;
 }
 /* ===========================
-   横幅标语样式
+   顶部横幅
 =========================== */
 .banner {
-  height: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(to right, #a50000, #e64545);
+  background: linear-gradient(90deg, #b30000, #e64545);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  color: white;
-  font-weight: bold;
   border-radius: 12px;
-  padding: 12px 24px;
+  color: white;
+  padding: 24px 20px;
+  margin-bottom: 25px;
   text-align: center;
+  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
 }
+.banner .chinese-text { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
+.banner .english-text { font-size: 16px; opacity: 0.9; }
+/* ===========================
-.banner-text {
+   主分类模块
-  margin: 0;
+=========================== */
-  line-height: 1.4;
+.main-category {
-}
+  background: #fafafa;
+  border-left: 6px solid #b30000;
-.banner .chinese-text {
-  font-size: 24px;
-  font-weight: 700;
-}
-.banner .english-text {
-  font-size: 16px;
-  font-weight: 500;
-  opacity: 0.9;
 }
 /* ===========================
-   内容块样式
+   内容卡片
 =========================== */
 .content-box {
-  margin: 10px;
+  background: #ffffff;
-  padding: 20px;
+  border-radius: 12px;
-  border-radius: 10px;
   border: 1px solid #e0e0e0;
+  padding: 22px;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  margin: 10px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  transition: all 0.3s ease;
 }
-.content-box h2 {
+.content-box:hover {
+  transform: translateY(-6px);
-  position: relative;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-  border-bottom: 2px solid #b30000;
-  font-size: 1.25rem;
 }
-.content-box p {
+.content-box h2 {
-  line-height: 1.6;
+  font-size: 1.25rem;
-  font-size: 0.95rem;
+  margin-bottom: 12px;
+  border-left: 5px solid #b30000;
+  padding-left: 10px;
   color: #333;
 }
+/* ===========================
-.content-box:hover {
+   区块分色
-  transform: translateY(-5px);
+=========================== */
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+.section-think { background: #f7f6f4; padding: 30px 20px; border-radius: 12px; }
-}
+.section-engineering { background: #f4f8fb; padding: 30px 20px; border-radius: 12px; }
+.section-growth { background: #f6faf6; padding: 30px 20px; border-radius: 12px; }
+.section-structure { background: #ffffff; padding: 30px 20px; border-radius: 12px; }
 /* ===========================
@@ 第79行： / 第77行： @@
 .flex-container {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  gap: 24px;
+  gap: 18px;
 }
 .flex-container .content-box {
-  flex: 1;
+  flex: 1 1 calc(33% - 18px);
-  max-width: 33.33%;
+  min-width: 280px;
   box-sizing: border-box;
 }
+/* 让每个部分首卡更突出 */
-/* ===========================
+.flex-container .content-box:first-child {
-   特殊样式
+  flex: 2 1 calc(66% - 12px);
-=========================== */
+  background: linear-gradient(135deg, #fff8f8, #ffeaea);
-/* 让重定向的内链变成绿色 */
-.mw-redirect {
-  color: #009944;
 }
@@ 第100行： / 第96行： @@
    响应式设计
 =========================== */
-/* 平板和大屏幕设备 */
-@media screen and (min-width: 768px) {
-  .banner .chinese-text {
-    font-size: 28px;
-  }
-  .banner .english-text {
-    font-size: 18px;
-  }
-}
-/* 手机设备 */
 @media screen and (max-width: 768px) {
-  .flex-container {
+  .flex-container { flex-direction: column; }
+  .flex-container .content-box { flex: 1 1 100%; }
-    flex-direction: column;
+  .banner .chinese-text { font-size: 22px; }
-  }
+  .banner .english-text { font-size: 14px; }
-  .flex-container .content-box {
-    max-width: 100%;
-    margin-bottom: 20px;
-  }
-  .banner .chinese-text,
-  .banner .english-text {
-    text-align: center;
-  }
-}
-/* 小屏手机设备 */
-@media screen and (max-width: 480px) {
-  .banner .chinese-text {
-    font-size: 20px;
-  }
-  .banner .english-text {
-    font-size: 14px;
-  }
 }