|
|
| 第18行： |
第18行： |
|
| |
|
| /* 赛季首页专用样式 v2.0 (2025-04-13) */ | | /* 赛季首页专用样式 v2.0 (2025-04-13) */ |
| | | /* MediaWiki:Common.css */ |
| :root {
| |
| --system-orange: #E67E22;
| |
| --system-blue: #3498DB; /* 补全#前缀和6位色值 */
| |
| --system-green: #2ECC71;
| |
| --system-purple: #9B59B6;
| |
| }
| |
| | |
| .season-homepage {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| padding: 20px;
| |
| color: #2c3e50;
| |
| }
| |
| | |
| /* 修正后的导航栏样式 */
| |
| .season-nav {
| |
| font-size: 0.9em; /* 添加分号分隔 */
| |
| margin-bottom: 2em; /* 独立声明属性 */
| |
| color: #7f8c8d;
| |
| border-bottom: 1px solid #eee;
| |
| padding-bottom: 1em;
| |
| }
| |
| | |
| .season-container {
| |
| display: flex;
| |
| gap: 30px;
| |
| flex-wrap: wrap;
| |
| }
| |
| | |
| .season-column {
| |
| flex: 1;
| |
| min-width: 300px;
| |
| }
| |
| | |
| .season-block { | | .season-block { |
| position: relative; | | position: relative; |
| margin-bottom: 2em;
| | padding: 15px 20px 15px 35px; |
| padding: 20px 25px; | | margin-bottom: 25px; |
| background: rgba(255,255,255,0); | |
| border-radius: 4px; | | border-radius: 4px; |
| box-shadow: 0 2px 8px rgba(0,0,0,0.06); | | background: rgba(255,255,255,0.95); |
| | box-shadow: 0 2px 5px rgba(0,0,0,0.08); |
| | transition: transform 0.2s ease; |
| } | | } |
|
| |
|
| .season-block::before { | | .decorative-line { |
| content: "";
| |
| position: absolute; | | position: absolute; |
| left: 0; | | left: 0; |
| 第71行： |
第37行： |
| height: 90%; | | height: 90%; |
| border-radius: 2px; | | border-radius: 2px; |
| | background: #E67E22; |
| } | | } |
|
| |
|
| .color-system-1::before { background: var(--system-orange); } | | .color-system-1 .decorative-line { background: #E67E22; } /* 物品系统橙色 */ |
| .color-system-2::before { background: var(--system-blue); } | | .color-system-2 .decorative-line { background: #3498DB; } /* 游戏机制蓝色 */ |
| .color-system-3::before { background: var(--system-green); } | | .color-system-3 .decorative-line { background: #2ECC71; } /* 职业体系绿色 */ |
| .color-system-4::before { background: var(--system-purple); } | | .color-system-4 .decorative-line { background: #9B59B6; } /* 终局内容紫色 */ |
| | |
| .season-block h3 {
| |
| margin-top: 0;
| |
| padding-bottom: 10px;
| |
| border-bottom: 1px solid rgba(0,0,0,0.1);
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .season-container {
| |
| flex-direction: column;
| |
| }
| |
| .season-block::before {
| |
| width: 3px;
| |
| height: 95%;
| |
| }
| |
| }
| |
| /* 导航链接悬停效果 */ | |
| .season-nav a { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
| |
| position: relative;
| |
| color: #7f8c8d;
| |
| }
| |
| | |
| .season-nav a:hover {
| |
| color: var(--system-orange);
| |
| transform: translateY(-2px);
| |
| }
| |
| | |
| .season-nav a::after { | |
| content: '';
| |
| position: absolute;
| |
| bottom: -3px;
| |
| left: 0;
| |
| width: 0;
| |
| height: 2px;
| |
| background: var(--system-orange);
| |
| transition: width 0.3s ease;
| |
| }
| |
| | |
| .season-nav a:hover::after {
| |
| width: 100%;
| |
| } | |
| | |
| /* 模块卡片悬停效果 */ | |
| .season-block {
| |
| transition:
| |
| transform 0.25s ease,
| |
| box-shadow 0.3s ease,
| |
| border-color 0.2s ease;
| |
| border: 1px solid rgba(0,0,0,0.05);
| |
| }
| |
|
| |
|
| .season-block:hover { | | .season-block:hover { |
| transform: translateY(-4px); | | transform: translateX(5px); |
| box-shadow: 0 8px 24px rgba(0,0,0,0.12);
| |
| border-color: rgba(0,0,0,0.15);
| |
| } | | } |
|
| |
|
| /* 颜色系统动态增强 */
| | .season-block h3 { |
| .color-system-1:hover::before {
| | margin: 0 0 12px 0; |
| filter: brightness(1.2);
| | padding-bottom: 8px; |
| }
| | border-bottom: 1px solid rgba(0,0,0,0.1); |
| | |
| .color-system-2:hover::before {
| |
| filter: saturate(1.5);
| |
| }
| |
| | |
| /* 列表项微交互 */
| |
| .season-block li {
| |
| transition: transform 0.2s ease;
| |
| transform-origin: left;
| |
| }
| |
| | |
| .season-block li:hover {
| |
| transform: translateX(8px);
| |
| }
| |
| /* ================= 增强版悬停系统 v3.2 (2025-04-13) ================= */
| |
| /* 动态单词悬停 (网页6原理) */
| |
| .season-block :where(li, p):not(strong) > :not(strong) { | |
| --hover-color: var(--system-orange); | |
| display: inline-block;
| |
| position: relative;
| |
| transition:
| |
| color 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55),
| |
| -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
| |
| transition: | |
| color 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55),
| |
| transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
| |
| will-change: transform, color;
| |
| transform: translateZ(0); /* 强制GPU加速 (网页5) */ | |
| }
| |
| | |
| /* 下划线生长动画 (网页7关键帧逻辑) */
| |
| .season-block :where(li, p):not(strong) > :not(strong)::after {
| |
| content: '';
| |
| position: absolute;
| |
| left: 0;
| |
| bottom: -2px;
| |
| width: 0;
| |
| height: 2px;
| |
| background: currentColor;
| |
| -webkit-transition:
| |
| width 0.3s ease,
| |
| opacity 0.2s linear;
| |
| transition:
| |
| width 0.3s ease,
| |
| opacity 0.2s linear;
| |
| }
| |
| | |
| /* 悬停状态 (网页1颜色过渡) */
| |
| .season-block :where(li, p):not(strong) > :not(strong):hover {
| |
| color: var(--hover-color);
| |
| -webkit-transform: translateY(-1px);
| |
| transform: translateY(-1px);
| |
| cursor: pointer;
| |
| }
| |
| | |
| .season-block :where(li, p):not(strong) > :not(strong):hover::after {
| |
| width: 100%;
| |
| opacity: 0.8;
| |
| }
| |
| | |
| /* 粗体标签保护机制 (网页4兼容性处理) */
| |
| .season-block strong,
| |
| .season-block strong * {
| |
| color: inherit !important;
| |
| -webkit-transform: none !important;
| |
| transform: none !important;
| |
| cursor: default;
| |
| pointer-events: none;
| |
| transition: none !important;
| |
| }
| |
| | |
| /* ================= 现有样式优化 ================= */
| |
| /* 模块卡片悬停层级优化 */
| |
| .season-block {
| |
| position: relative;
| |
| z-index: 1;
| |
| transition:
| |
| transform 0.25s ease,
| |
| box-shadow 0.3s ease,
| |
| border-color 0.2s ease;
| |
| }
| |
| | |
| .season-block:hover {
| |
| z-index: 2; /* 确保悬停卡片覆盖下层元素 */
| |
| }
| |
| | |
| /* 导航链接动效增强 */
| |
| .season-nav a::after {
| |
| bottom: -4px; /* 增加下划线间距 */
| |
| height: 3px; /* 加粗下划线 */
| |
| background: linear-gradient(90deg, var(--system-orange) 70%, transparent);
| |
| } | | } |