|
|
| （未显示同一用户的5个中间版本） |
| 第1行： |
第1行： |
| /* =======================================
| |
| * 首页沉浸式 UI 重构 (1:1 还原 UTG Wiki)
| |
| * ======================================= */
| |
|
| |
|
| /* 1. 隐藏默认标题与内容区边距，实现头图通栏全宽 */
| |
| /* 注意：如果你的首页不叫"首页"，请将 page-首页 替换为对应的 URL 名称，如 page-Main_Page */
| |
| .page-首页 .citizen-page-heading,
| |
| .page-首页 #siteSub,
| |
| .page-首页 .citizen-page-header {
| |
| display: none !important;
| |
| }
| |
| .page-首页 .citizen-body {
| |
| padding: 0 !important;
| |
| max-width: 100% !important;
| |
| }
| |
| .page-首页 .citizen-section {
| |
| background: transparent !important;
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| padding: 0 !important;
| |
| }
| |
|
| |
| /* 2. 沉浸式全宽头图 (Hero Banner) */
| |
| .utg-hero {
| |
| position: relative;
| |
| width: 100%;
| |
| min-height: 450px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| text-align: center;
| |
| background-color: #1a1a1a; /* 头图未加载时的兜底深色 */
| |
| border-radius: 0 0 24px 24px;
| |
| overflow: hidden;
| |
| margin-bottom: 40px;
| |
| }
| |
|
| |
| /* 绝对定位的背景层 */
| |
| .utg-hero-bg {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| z-index: 1;
| |
| }
| |
| .utg-hero-bg img {
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| object-fit: cover !important;
| |
| opacity: 0.5; /* 压暗背景以突出文字 */
| |
| }
| |
|
| |
| /* 悬浮在背景之上的内容层 */
| |
| .utg-hero-content {
| |
| position: relative;
| |
| z-index: 2;
| |
| padding: 40px;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| .utg-hero-title {
| |
| font-size: 3.5em;
| |
| font-weight: 900;
| |
| letter-spacing: 1px;
| |
| text-shadow: 0 4px 16px rgba(0,0,0,0.6);
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| .utg-hero-subtitle {
| |
| font-size: 1.2em;
| |
| font-weight: 500;
| |
| opacity: 0.9;
| |
| text-shadow: 0 2px 8px rgba(0,0,0,0.5);
| |
| margin-bottom: 35px;
| |
| }
| |
|
| |
| /* 3. 毛玻璃搜索框 */
| |
| .utg-hero-search {
| |
| display: inline-block;
| |
| background: rgba(255, 255, 255, 0.1);
| |
| backdrop-filter: blur(12px);
| |
| -webkit-backdrop-filter: blur(12px);
| |
| border: 1px solid rgba(255, 255, 255, 0.2);
| |
| border-radius: 30px;
| |
| padding: 6px 24px;
| |
| box-shadow: 0 8px 32px rgba(0,0,0,0.3);
| |
| transition: all 0.3s ease;
| |
| }
| |
| .utg-hero-search:focus-within {
| |
| background: rgba(255, 255, 255, 0.2);
| |
| border-color: rgba(255, 255, 255, 0.5);
| |
| }
| |
| .utg-hero-search .searchbox {
| |
| margin: 0 !important;
| |
| }
| |
| .utg-hero-search input.mw-searchInput {
| |
| background: transparent !important;
| |
| border: none !important;
| |
| color: #ffffff !important;
| |
| font-size: 1.1em !important;
| |
| box-shadow: none !important;
| |
| outline: none !important;
| |
| min-width: 300px;
| |
| }
| |
| .utg-hero-search input.mw-searchInput::placeholder {
| |
| color: rgba(255,255,255,0.7);
| |
| }
| |
|
| |
| /* 4. 底部网格卡片 (Grid Cards) */
| |
| .utg-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
| |
| gap: 24px;
| |
| padding: 0 40px 60px 40px;
| |
| max-width: 1400px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| .utg-card {
| |
| background: var(--color-surface-1, #ffffff);
| |
| border: 1px solid var(--border-color-base, #e6e2ed);
| |
| border-radius: 16px;
| |
| padding: 24px;
| |
| display: flex;
| |
| align-items: flex-start;
| |
| gap: 20px;
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
| |
| box-shadow: 0 4px 16px rgba(26, 22, 37, 0.04);
| |
| }
| |
| .utg-card:hover {
| |
| transform: translateY(-6px);
| |
| box-shadow: 0 12px 32px rgba(26, 22, 37, 0.08);
| |
| border-color: var(--color-primary, #5e35b1);
| |
| }
| |
|
| |
| .utg-card-icon {
| |
| flex-shrink: 0;
| |
| width: 64px;
| |
| height: 64px;
| |
| border-radius: 12px;
| |
| background: var(--color-surface-2, #f4f2f7);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| overflow: hidden;
| |
| }
| |
| .utg-card-icon img {
| |
| max-width: 40px;
| |
| max-height: 40px;
| |
| }
| |
|
| |
| .utg-card-title {
| |
| font-size: 1.3em;
| |
| font-weight: 700;
| |
| margin-bottom: 8px;
| |
| line-height: 1.2;
| |
| }
| |
| .utg-card-title a {
| |
| color: var(--color-base, #1a1625);
| |
| text-decoration: none;
| |
| }
| |
| .utg-card-title a:hover {
| |
| color: var(--color-primary, #5e35b1);
| |
| }
| |
|
| |
| .utg-card-desc {
| |
| font-size: 0.95em;
| |
| color: var(--color-subtle, #666666);
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| /* 5. 日夜间模式无缝适配 (利用 Citizen 原生变量) */
| |
| html.skin-theme-clientpref-night .utg-card {
| |
| background: var(--color-surface-1, #1a1a1a);
| |
| border-color: var(--border-color-base, #333333);
| |
| }
| |
| html.skin-theme-clientpref-night .utg-card:hover {
| |
| border-color: var(--color-primary, #9c27b0);
| |
| }
| |
| html.skin-theme-clientpref-night .utg-card-title a {
| |
| color: var(--color-base, #eeeeee);
| |
| }
| |
| html.skin-theme-clientpref-night .utg-card-desc {
| |
| color: var(--color-subtle, #aaaaaa);
| |
| }
| |
