MediaWiki:Citizen.css：修订间差异

2026年5月8日 (五) 21:03的版本

/* =============================================
   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 {
    background-color: var(--color-warm-white);
    color: var(--color-dark-gray);
    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 {
    background-color: transparent;
}

/* ---------------------------------------------
   4. 首页专用样式（配合之前提供的首页代码）
   --------------------------------------------- */
/* 横幅区 */
.home-banner {
    background: linear-gradient(135deg, #10B98110 0%, #FACC1520 100%);
    border-radius: var(--border-radius-large);
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* 两栏卡片 */
.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;
}

/* 导航列表样式 */
.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 {
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    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 {
    color: #10B981;
    font-weight: 600;
    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 {
    background-color: #10B98110;
    transform: translateX(4px);
}

/* ---------------------------------------------
   8. 页脚
   --------------------------------------------- */
.citizen-footer {
    background-color: #1F2937;
    color: #E5E7EB;
    border-top: none;
}
.citizen-footer a {
    color: #6FCF97;
}

/* ---------------------------------------------
   9. 响应式微调
   --------------------------------------------- */
@media (max-width: 768px) {
    .home-banner::after {
        font-size: 2rem;
    }
    .card, .mw-body-content .card {
        padding: 12px;
    }
}

:root {
    /* 主要颜色 - 使用 Minecraft 风格的绿色 */
    --color-primary__h: 120;
    --color-primary__s: 50;
    --color-primary__l: 35;
    
    /* 背景色 - 深色主题 */
    --color-surface__bg--light: #1a1a1a;
    --color-surface__bg--dark: #0d0d0d;
    
    /* 文字颜色 */
    --color-base--light: #e0e0e0;
    --color-base--dark: #ffffff;
    
    /* UI 圆角 - 更接近 Minecraft 的方块感 */
    --border-radius-base: 2px;
    --border-radius-medium: 4px;
    --border-radius-large: 8px;
}