MediaWiki:Common.css：修订间差异

←上一编辑下一编辑→

@@ 第18行： / 第18行： @@
 /* 赛季首页专用样式 v2.0 (2025-04-13) */
-/* MediaWiki:Common.css */
+/* == 基础样式模块 == */
 .season-block {
      position: relative;
@@ 第27行： / 第27行： @@
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);
      transition: transform 0.2s ease;
+    overflow: hidden; /* 新增属性合并 */
+    will-change: transform; /* 预声明变化属性 */
 }
@@ 第37行： / 第39行： @@
      height: 90%;
      border-radius: 2px;
-     background: #E67E22;
+    transition: transform 0.4s ease, height 0.4s ease; /* 精准控制动画属性 */
+     background: linear-gradient(180deg,
+        transparent 0%,
+        currentColor 30%,
+        currentColor 70%,
+        transparent 100%
+    );
 }
-.color-system-1 .decorative-line { background: #E67E22; } /* 物品系统橙色 */
+/* == 颜色系统定义 == */
-.color-system-2 .decorative-line { background: #3498DB; } /* 游戏机制蓝色 */
+.color-system-1 .decorative-line { --deco-color: #E67E22; }
-.color-system-3 .decorative-line { background: #2ECC71; } /* 职业体系绿色 */
+.color-system-2 .decorative-line { --deco-color: #3498DB; }
-.color-system-4 .decorative-line { background: #9B59B6; } /* 终局内容紫色 */
+.color-system-3 .decorative-line { --deco-color: #2ECC71; }
+.color-system-4 .decorative-line { --deco-color: #9B59B6; }
-.season-block:hover {
-    transform: translateX(5px);
-}
+/* == 动态效果模块 == */
+/* 标题渐变与悬停 */
 .season-block h3 {
      margin: 0 0 12px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-/* 添加文字渐变色与悬停放大 */
-.season-block h3 {
      background: linear-gradient(120deg, #2c3e50 30%, #3498db 70%);
      -webkit-background-clip: text;
@@ 第61行： / 第65行： @@
      -webkit-text-fill-color: transparent;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
-    display: inline-block;
      transform-origin: left center;
 }
-/* 悬停文字放大+投影 */
 .season-block:hover h3 {
      transform: scale(1.05);
      text-shadow: 0 2px 8px rgba(52,152,219,0.2);
-}
-/* 新增装饰线动画 */
-.decorative-line {
-    transition: all 0.4s ease;
-    background: linear-gradient(180deg,
-        transparent 0%,
-        currentColor 30%,
-        currentColor 70%,
-        transparent 100%
-    ) !important;
 }
-/* 悬停时线条生长动画 */
+/* 装饰线动画 */
 .season-block:hover .decorative-line {
      height: 100%;
      opacity: 0.8;
-    background-size: 100% 200%;
      animation: lineFlow 1.2s infinite linear;
 }
@@ 第92行： / 第83行： @@
 % { background-position: 0 0; }
 % { background-position: 0 200%; }
-}
-/* 列表项悬停效果 */
-.season-block li {
-    position: relative;
-    padding-left: 12px;
-    transition: transform 0.2s;
-}
-.season-block li::before {
-    content: "▶";
-    position: absolute;
-    left: -15px;
-    color: currentColor;
-    opacity: 0;
-    transition: all 0.3s;
-}
-/* 悬停时项目符号显现与位移 */
-.season-block li:hover {
-    transform: translateX(8px);
-}
-.season-block li:hover::before {
-    opacity: 0.6;
-    left: -12px;
-}
-/* 新增悬浮光影效果 */
-.season-block {
-    position: relative;
-    overflow: hidden;
 }
+/* 悬浮光影效果 */
 .season-block::after {
      content: "";
@@ 第135行： / 第97行： @@
          rgba(255,255,255,0) 70%
      );
-     transform: translate(var(--mouse-x), var(--mouse-y));
+     transform: translate(var(--mouse-x), var(--mouse-y)) translateZ(0);
      pointer-events: none;
      opacity: 0;
@@ 第144行： / 第106行： @@
      opacity: 0.4;
 }
 /* 链接动态下划线 */
 .season-nav a {
@@ 第164行： / 第127行： @@
      left: 0;
      width: 100%;
+}
+/* == 性能优化模块 == */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+/* == 响应式适配 == */
+@media (max-width: 768px) {
+    .season-block {
+        padding: 12px 15px;
+        margin-bottom: 20px;
+    }
+    .season-block h3 {
+        font-size: 1.2em;
+    }
 }