|
|
| 第1行: |
第1行: |
| /* ============================================= | | /* 全局背景与文字 */ |
| LTS 品牌风格 for Citizen Skin (基于VI规范)
| |
| 自然感 · 社交感 · 年轻化 · 游戏社区风
| |
| ============================================= */
| |
| | |
| /* ---------------------------------------------
| |
| 1. 全局 CSS 变量(品牌色系)
| |
| --------------------------------------------- */
| |
| | |
| | |
| :root {
| |
| /* LTS Green 主色 */
| |
| --color-primary__h: 158;
| |
| --color-primary__s: 70;
| |
| --color-primary__l: 40;
| |
| | |
| /* Lemon Yellow 强调色 */
| |
| --color-progressive__h: 53;
| |
| --color-progressive__s: 95;
| |
| --color-progressive__l: 53;
| |
| | |
| /* Orange Social 社交互动色 */
| |
| --color-destructive__h: 30;
| |
| --color-destructive__s: 100;
| |
| --color-destructive__l: 49;
| |
| | |
| /* 辅助色 */
| |
| --color-mint: #6FCF97;
| |
| --color-deep-green: #059669;
| |
| --color-warm-white: #F8FAFC;
| |
| --color-soft-gray: #E5E7EB;
| |
| --color-dark-gray: #1F2937;
| |
| | |
| /* 圆角规范 */
| |
| --border-radius-small: 8px;
| |
| --border-radius-card: 16px;
| |
| --border-radius-large: 24px;
| |
| --border-radius-pill: 999px;
| |
| | |
| /* 阴影规范 */
| |
| --box-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08);
| |
| --box-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
| |
| }
| |
| | |
| /* ---------------------------------------------
| |
| 2. 全局基础样式
| |
| --------------------------------------------- */
| |
| body { | | body { |
| background-color: var(--color-warm-white); | | background-color: #1a1a1a; |
| color: var(--color-dark-gray); | | color: #e0e0e0; |
| font-family: 'Inter', 'HarmonyOS Sans SC', '思源黑体', system-ui, -apple-system, sans-serif;
| |
| } | | } |
|
| |
|
| /* 所有链接默认使用 LTS Green */ | | /* 内容区域背景 */ |
| a {
| |
| color: #10B981;
| |
| transition: color 0.2s ease;
| |
| }
| |
| a:hover {
| |
| color: #059669;
| |
| text-decoration: none;
| |
| }
| |
| | |
| /* 按钮风格(主要按钮、次要按钮) */
| |
| .oo-ui-buttonElement-button,
| |
| .citizen-button,
| |
| button,
| |
| input[type="submit"] {
| |
| border-radius: var(--border-radius-pill) !important;
| |
| font-weight: 600;
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| .oo-ui-buttonElement-button:hover,
| |
| .citizen-button:hover,
| |
| button:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: var(--box-shadow-hover);
| |
| }
| |
| | |
| /* 主要按钮使用 LTS Green */
| |
| .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button {
| |
| background-color: #10B981 !important;
| |
| border-color: #10B981 !important;
| |
| }
| |
| .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover {
| |
| background-color: #059669 !important;
| |
| }
| |
| | |
| /* ---------------------------------------------
| |
| 3. 卡片式布局(全局通用)
| |
| --------------------------------------------- */
| |
| .citizen-body-container .card,
| |
| .mw-body-content .card,
| |
| #mw-content-text > div:not(.no-card) {
| |
| border-radius: var(--border-radius-card);
| |
| background-color: white;
| |
| box-shadow: var(--box-shadow-card);
| |
| padding: 20px;
| |
| margin-bottom: 24px;
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| .citizen-body-container .card:hover,
| |
| .mw-body-content .card:hover {
| |
| transform: translateY(-4px);
| |
| box-shadow: var(--box-shadow-hover);
| |
| }
| |
| | |
| /* 内容区域背景微调 */
| |
| .mw-body { | | .mw-body { |
| background-color: transparent; | | background-color: #2a2a2a; |
| | border: 1px solid #3a3a3a; |
| } | | } |
|
| |
|
| /* --------------------------------------------- | | /* 链接颜色 - 使用 Minecraft 风格的绿色 */ |
| 4. 首页专用样式(配合之前提供的首页代码)
| | a { |
| --------------------------------------------- */
| | color: #7cb518; |
| /* 横幅区 */
| |
| .home-banner {
| |
| background: linear-gradient(135deg, #10B98110 0%, #FACC1520 100%); | |
| border-radius: var(--border-radius-large);
| |
| padding: 2rem;
| |
| margin-bottom: 2rem;
| |
| text-align: center;
| |
| } | | } |
| | | a:visited { |
| /* 两栏卡片 */
| | color: #5a8f12; |
| .home-left-col > div,
| |
| .home-right-col > div {
| |
| background: white; | |
| border-radius: var(--border-radius-card);
| |
| box-shadow: var(--box-shadow-card);
| |
| padding: 1.2rem;
| |
| margin-bottom: 1.5rem;
| |
| } | | } |
| | | a:hover { |
| /* 导航列表样式 */
| | color: #9fd633; |
| .home-nav-list {
| |
| list-style: none;
| |
| padding-left: 0;
| |
| }
| |
| .home-nav-list li {
| |
| margin: 12px 0;
| |
| padding: 8px 12px;
| |
| border-radius: var(--border-radius-small);
| |
| transition: background 0.2s ease;
| |
| }
| |
| .home-nav-list li:hover {
| |
| background-color: #10B98110; | |
| }
| |
| .home-nav-list li a {
| |
| font-weight: 500;
| |
| } | | } |
|
| |
|
| /* 动态信息区的标签 */ | | /* 头部导航栏 */ |
| .home-dynamic-tag {
| |
| display: inline-block;
| |
| background-color: #FB8C00;
| |
| color: white;
| |
| font-size: 0.75rem;
| |
| border-radius: var(--border-radius-pill);
| |
| padding: 2px 8px;
| |
| margin-right: 8px;
| |
| }
| |
| | |
| /* 底部功能区 */
| |
| .home-footer-links {
| |
| background: white;
| |
| border-radius: var(--border-radius-card);
| |
| padding: 1rem;
| |
| text-align: center;
| |
| margin-top: 1rem;
| |
| box-shadow: var(--box-shadow-card);
| |
| }
| |
| .home-footer-links a {
| |
| margin: 0 12px;
| |
| font-weight: 500;
| |
| }
| |
| | |
| /* ---------------------------------------------
| |
| 5. 品牌图形装饰(叶片 / 柠檬切片 / S曲线)
| |
| --------------------------------------------- */
| |
| /* 给 body 增加一个淡淡的叶片背景纹理(可选) */
| |
| body::before {
| |
| content: '';
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| pointer-events: none;
| |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="%2310B98108" d="M100,20 L120,60 L160,70 L130,100 L140,140 L100,120 L60,140 L70,100 L40,70 L80,60 Z"/><circle fill="%23FACC1508" cx="170" cy="30" r="15"/><path fill="%236FCF9708" d="M30,170 Q50,150 70,170 Q50,190 30,170Z"/></svg>');
| |
| background-repeat: repeat;
| |
| background-size: 80px;
| |
| opacity: 0.4;
| |
| z-index: -1;
| |
| }
| |
| | |
| /* 柠檬切片装饰(用于 specific 元素,比如首页 banner) */
| |
| .home-banner::after {
| |
| content: '🍋';
| |
| font-size: 4rem;
| |
| position: absolute;
| |
| right: 20px;
| |
| bottom: 10px;
| |
| opacity: 0.2;
| |
| pointer-events: none;
| |
| }
| |
| | |
| /* ---------------------------------------------
| |
| 6. 导航栏 & 头部定制
| |
| --------------------------------------------- */
| |
| .citizen-header { | | .citizen-header { |
| background-color: rgba(255,255,255,0.9); | | background-color: #252525; |
| backdrop-filter: blur(8px);
| | border-bottom: 1px solid #3a3a3a; |
| border-bottom: 2px solid #10B98120; | |
| }
| |
| | |
| /* Logo 区域文字 */
| |
| .citizen-wordmark {
| |
| font-weight: 700;
| |
| color: #10B981;
| |
| }
| |
| | |
| /* 搜索框圆角 */
| |
| .citizen-search-box input {
| |
| border-radius: var(--border-radius-pill);
| |
| border: 1px solid var(--color-soft-gray);
| |
| background-color: white;
| |
| } | | } |
|
| |
|
| /* --------------------------------------------- | | /* 侧边栏菜单 */ |
| 7. 侧边栏菜单(Citizen 左侧导航)
| |
| --------------------------------------------- */
| |
| .citizen-sidebar .citizen-menu__heading { | | .citizen-sidebar .citizen-menu__heading { |
| color: #10B981; | | color: #7cb518; |
| font-weight: 600;
| | border-left-color: #7cb518; |
| border-left: 3px solid #10B981; | |
| padding-left: 8px;
| |
| }
| |
| .citizen-sidebar ul li a {
| |
| border-radius: var(--border-radius-small);
| |
| transition: background 0.2s ease;
| |
| } | | } |
| .citizen-sidebar ul li a:hover { | | .citizen-sidebar ul li a:hover { |
| background-color: #10B98110; | | background-color: #3a3a3a; |
| transform: translateX(4px);
| |
| } | | } |
|
| |
|
| /* --------------------------------------------- | | /* 页脚 */ |
| 8. 页脚
| |
| --------------------------------------------- */
| |
| .citizen-footer { | | .citizen-footer { |
| background-color: #1F2937; | | background-color: #0d0d0d; |
| color: #E5E7EB; | | color: #a0a0a0; |
| border-top: none;
| |
| } | | } |
| .citizen-footer a { | | .citizen-footer a { |
| color: #6FCF97; | | color: #7cb518; |
| | } |
| | |
| | /* 搜索框 */ |
| | .citizen-search-box input { |
| | background-color: #333333; |
| | border-color: #4a4a4a; |
| | color: #ffffff; |
| } | | } |
|
| |
|
| /* --------------------------------------------- | | /* 表格样式 - 游戏化风格 */ |
| 9. 响应式微调
| | .wikitable { |
| --------------------------------------------- */
| | background-color: #2a2a2a; |
| @media (max-width: 768px) {
| | border: 1px solid #3a3a3a; |
| .home-banner::after { | | } |
| font-size: 2rem;
| | .wikitable th { |
| }
| | background-color: #3a3a3a; |
| .card, .mw-body-content .card {
| | color: #7cb518; |
| padding: 12px;
| |
| } | |
| } | | } |
|
| |
|