MediaWiki:Common.css：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

删除的内容添加的内容

行内

@@ 第1行： / 第1行： @@
+/* ===========================
-/* 全局字体设置，覆盖东亚语言 */
+   全局字体设置
+=========================== */
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
@@ 第8行： / 第10行： @@
 }
+/* ===========================
-/* 横幅标语 */
+   横幅标语样式
+=========================== */
 .banner {
   height: auto;
@@ 第14行： / 第18行： @@
   flex-direction: column;
   justify-content: center;
-  align-items: center; /* 居中对齐 */
+  align-items: center;
-  background: linear-gradient(to right, #a50000, #e64545); /* 渐变背景 */
+  background: linear-gradient(to right, #a50000, #e64545);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 阴影 */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  color: white; /* 白色字体，提升对比度 */
+  color: white;
   font-weight: bold;
-  border-radius: 12px; /* 圆角优化 */
+  border-radius: 12px;
-  padding: 12px 24px; /* 增加上下 padding */
+  padding: 12px 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 更柔和的阴影 */
   text-align: center;
 }
@@ 第27行： / 第30行： @@
 .banner-text {
   margin: 0;
-  line-height: 1.4; /* 让文本更易读 */
+  line-height: 1.4;
 }
 .banner .chinese-text {
-  font-size: 24px; /* 默认大小 */
+  font-size: 24px;
   font-weight: 700;
 }
 .banner .english-text {
-  font-size: 16px; /* 默认大小 */
+  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;
@@ 第70行： / 第53行： @@
   border: 1px solid #e0e0e0;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-/* 改善阅读体验 */
-.content-box h2 { font-size: 1.25rem; }
-.content-box p { font-size: 0.95rem; color: #333; }
-.content-box:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }
@@ 第86行： / 第60行： @@
   margin-bottom: 10px;
   border-bottom: 2px solid #b30000;
+  font-size: 1.25rem;
 }
 .content-box p {
   line-height: 1.6;
+  font-size: 0.95rem;
+  color: #333;
 }
+.content-box:hover {
-/* Flex 容器 */
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+/* ===========================
+   Flex 布局
+=========================== */
 .flex-container {
   display: flex;
@@ 第106行： / 第89行： @@
 }
+/* ===========================
-/* 移动端优化 */
+   特殊样式
-@media (max-width: 768px) {
+=========================== */
+/* 让重定向的内链变成绿色 */
+.mw-redirect {
+  color: #009944;
+}
+/* ===========================
+   响应式设计
+=========================== */
+/* 平板和大屏幕设备 */
+@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-direction: column;
@@ 第120行： / 第126行： @@
   .banner .english-text {
     text-align: center;
+  }
-    font-size: 18px;
+}
+/* 小屏手机设备 */
+@media screen and (max-width: 480px) {
+  .banner .chinese-text {
+    font-size: 20px;
   }
@@ 第126行： / 第138行： @@
     font-size: 14px;
   }
-}
-/* 让重定向的内链变成绿色 */
-.mw-redirect {
-    color: #009944;
 }