打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Citizen.css:修订间差异

MediaWiki界面页面
Lemon留言 | 贡献
无编辑摘要
Lemon留言 | 贡献
无编辑摘要
第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;
     }
}
}



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

/* 全局背景与文字 */
body {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

/* 内容区域背景 */
.mw-body {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
}

/* 链接颜色 - 使用 Minecraft 风格的绿色 */
a {
    color: #7cb518;
}
a:visited {
    color: #5a8f12;
}
a:hover {
    color: #9fd633;
}

/* 头部导航栏 */
.citizen-header {
    background-color: #252525;
    border-bottom: 1px solid #3a3a3a;
}

/* 侧边栏菜单 */
.citizen-sidebar .citizen-menu__heading {
    color: #7cb518;
    border-left-color: #7cb518;
}
.citizen-sidebar ul li a:hover {
    background-color: #3a3a3a;
}

/* 页脚 */
.citizen-footer {
    background-color: #0d0d0d;
    color: #a0a0a0;
}
.citizen-footer a {
    color: #7cb518;
}

/* 搜索框 */
.citizen-search-box input {
    background-color: #333333;
    border-color: #4a4a4a;
    color: #ffffff;
}

/* 表格样式 - 游戏化风格 */
.wikitable {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
}
.wikitable th {
    background-color: #3a3a3a;
    color: #7cb518;
}

: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;
}