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

MediaWiki:Citizen.css:修订间差异

MediaWiki界面页面
Lemon留言 | 贡献
无编辑摘要
Lemon留言 | 贡献
无编辑摘要
第1行: 第1行:
/* =============================================
/* =============================================
   Minecraft Wiki 风格样式 (Citizen 皮肤定制)
   Minecraft Wiki 浅色主题 (基于 Citizen 皮肤)
   ============================================= */
   ============================================= */


/* 1. 深色基础主题 */
:root {
:root {
     --color-primary__h: 120;
    /* 基础文字颜色 */
     --color-primary__s: 50;
    --color-base: #202122;
     --color-primary__l: 35;
    --color-base--hover: #404244;
    --color-emphasized: #101418;
    --color-subtle: #54595d;
     --color-placeholder: #72777d;
     --color-disabled: #a2a9b1;
     --color-inverted: #fff;


     --color-surface__bg--light: #1a1a1a;
    /* 链接色(Minecraft 风格的绿色系) */
     --color-surface__bg--dark: #0d0d0d;
    --color-progressive: #3a971e;
     --color-progressive--hover: #2d7316;
     --color-progressive--active: #1f4f0e;
    --color-visited: #6a60b0;


     --color-base--light: #e0e0e0;
    /* 强调色(橙红色,用于警告等) */
     --color-base--dark: #ffffff;
    --color-destructive: #bf3c2c;
     --color-destructive--hover: #9f3526;
     --color-error: #bf3c2c;
    --color-warning: #886425;
    --color-success: #177860;


    /* 背景色 - 浅色主题核心 */
    --background-color-base: #fcfcfc;
    --background-color-neutral: #eaecf0;
    --background-color-neutral-subtle: #f8f9fa;
    --background-color-interactive: #eaecf0;
    --background-color-interactive--hover: #dadde3;
    --background-color-disabled: #dadde3;
    --background-color-progressive: #3a971e;
    --background-color-progressive--hover: #2d7316;
    --background-color-progressive-subtle: #e8f5e9;
    --background-color-destructive-subtle: #ffe9e5;
    /* 边框颜色 */
    --border-color-base: #a2a9b1;
    --border-color-subtle: #c8ccd1;
    --border-color-interactive: #72777d;
    --border-color-progressive: #3a971e;
    /* 阴影 - 浅色下更柔和 */
    --box-shadow-color-base: rgba(0,0,0,0.1);
    --box-shadow-color-progressive--focus: #3a971e;
    /* 圆角保持方形感(Minecraft 风格) */
     --border-radius-base: 2px;
     --border-radius-base: 2px;
     --border-radius-medium: 4px;
     --border-radius-medium: 4px;
     --border-radius-large: 8px;
     --border-radius-large: 8px;
    /* 字体大小(保持可读) */
    --font-size-small: 0.875rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.125rem;
}
}


/* 全局基础样式 */
body {
body {
     background-color: #1a1a1a;
     background-color: var(--background-color-base);
     color: #e0e0e0;
     color: var(--color-base);
}
}


.mw-body {
.mw-body {
     background-color: #2a2a2a;
     background-color: #ffffff;
     border: 1px solid #3a3a3a;
     border: 1px solid var(--border-color-subtle);
}
}


/* 链接颜色 */
a {
a {
     color: #7cb518;
     color: var(--color-progressive);
}
}
a:visited {
a:visited {
     color: #5a8f12;
     color: var(--color-visited);
}
}
a:hover {
a:hover {
     color: #9fd633;
     color: var(--color-progressive--hover);
}
}


/* 头部导航栏(浅色版) */
.citizen-header {
.citizen-header {
     background-color: #252525;
     background-color: #ffffff;
     border-bottom: 1px solid #3a3a3a;
     border-bottom: 1px solid var(--border-color-subtle);
}
}


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


/* 页脚 */
.citizen-footer {
.citizen-footer {
     background-color: #0d0d0d;
     background-color: var(--background-color-neutral);
     color: #a0a0a0;
     color: var(--color-subtle);
    border-top: none;
}
}
.citizen-footer a {
.citizen-footer a {
     color: #7cb518;
     color: var(--color-progressive);
}
}


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


/* 表格(游戏数据表风格) */
.wikitable {
.wikitable {
     background-color: #2a2a2a;
     background-color: #ffffff;
     border: 1px solid #3a3a3a;
     border: 1px solid var(--border-color-subtle);
}
}
.wikitable th {
.wikitable th {
     background-color: #3a3a3a;
     background-color: var(--background-color-neutral);
     color: #7cb518;
     color: var(--color-progressive);
}
}
 
.wikitable tr:nth-child(even) {
/* 2. 草方块背景纹理 */
     background-color: var(--background-color-neutral-subtle);
body::before {
     content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 15px,
        rgba(100, 100, 100, 0.05) 15px,
        rgba(100, 100, 100, 0.05) 16px
    ), repeating-linear-gradient(
        90deg,
        transparent,
        transparent 15px,
        rgba(100, 100, 100, 0.05) 15px,
        rgba(100, 100, 100, 0.05) 16px
    );
    z-index: -1;
}
}


/* 3. 游戏化 UI 元素 */
/* Minecraft 风格按钮(浅色版) */
.mc-button {
.mc-button {
     background-color: #3a3a3a;
     background-color: #ebebeb;
     border: 2px solid #5a5a5a;
     border: 2px solid var(--border-color-base);
     color: #e0e0e0;
     color: var(--color-base);
    padding: 6px 12px;
     font-weight: bold;
     font-weight: bold;
     text-transform: uppercase;
     text-transform: uppercase;
     transition: all 0.1s ease;
     transition: all 0.1s ease;
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--border-radius-base);
}
}
.mc-button:hover {
.mc-button:hover {
     background-color: #4a4a4a;
     background-color: #e0e0e0;
     border-color: #7cb518;
     border-color: var(--color-progressive);
     transform: translateY(-1px);
     transform: translateY(-1px);
}
}


/* 区块边框效果 */
/* 区块边框效果(浅色版) */
.mw-parser-output .block-border {
.mw-parser-output .block-border {
     border: 2px solid #5a5a5a;
     border: 2px solid var(--border-color-subtle);
     background-color: #2a2a2a;
     background-color: var(--background-color-neutral-subtle);
     padding: 8px;
     padding: 8px;
     margin: 8px 0;
     margin: 8px 0;
第132行: 第159行:
     right: -4px;
     right: -4px;
     bottom: -4px;
     bottom: -4px;
     border: 1px dashed #7cb518;
     border: 1px dashed var(--color-progressive);
     pointer-events: none;
     pointer-events: none;
}
}


/* Minecraft 风格工具提示 */
/* 工具提示(浅色版) */
.mc-tooltip {
.mc-tooltip {
     position: relative;
     position: relative;
第143行: 第170行:
.mc-tooltip .tooltip-text {
.mc-tooltip .tooltip-text {
     visibility: hidden;
     visibility: hidden;
     background-color: #1a1a1a;
     background-color: var(--background-color-base);
     color: #e0e0e0;
     color: var(--color-base);
     border: 1px solid #7cb518;
     border: 1px solid var(--color-progressive);
     text-align: center;
     text-align: center;
     padding: 4px 8px;
     padding: 4px 8px;
     border-radius: 2px;
     border-radius: var(--border-radius-base);
     position: absolute;
     position: absolute;
     z-index: 1;
     z-index: 1;
第158行: 第185行:
.mc-tooltip:hover .tooltip-text {
.mc-tooltip:hover .tooltip-text {
     visibility: visible;
     visibility: visible;
}
/* 可选:添加一个淡淡的草方块纹理背景(非常浅) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 15px,
        rgba(0, 0, 0, 0.02) 15px,
        rgba(0, 0, 0, 0.02) 16px
    ), repeating-linear-gradient(
        90deg,
        transparent,
        transparent 15px,
        rgba(0, 0, 0, 0.02) 15px,
        rgba(0, 0, 0, 0.02) 16px
    );
    z-index: -1;
}
}

2026年5月9日 (六) 15:58的版本

/* =============================================
   Minecraft Wiki 浅色主题 (基于 Citizen 皮肤)
   ============================================= */

:root {
    /* 基础文字颜色 */
    --color-base: #202122;
    --color-base--hover: #404244;
    --color-emphasized: #101418;
    --color-subtle: #54595d;
    --color-placeholder: #72777d;
    --color-disabled: #a2a9b1;
    --color-inverted: #fff;

    /* 链接色(Minecraft 风格的绿色系) */
    --color-progressive: #3a971e;
    --color-progressive--hover: #2d7316;
    --color-progressive--active: #1f4f0e;
    --color-visited: #6a60b0;

    /* 强调色(橙红色,用于警告等) */
    --color-destructive: #bf3c2c;
    --color-destructive--hover: #9f3526;
    --color-error: #bf3c2c;
    --color-warning: #886425;
    --color-success: #177860;

    /* 背景色 - 浅色主题核心 */
    --background-color-base: #fcfcfc;
    --background-color-neutral: #eaecf0;
    --background-color-neutral-subtle: #f8f9fa;
    --background-color-interactive: #eaecf0;
    --background-color-interactive--hover: #dadde3;
    --background-color-disabled: #dadde3;
    --background-color-progressive: #3a971e;
    --background-color-progressive--hover: #2d7316;
    --background-color-progressive-subtle: #e8f5e9;
    --background-color-destructive-subtle: #ffe9e5;

    /* 边框颜色 */
    --border-color-base: #a2a9b1;
    --border-color-subtle: #c8ccd1;
    --border-color-interactive: #72777d;
    --border-color-progressive: #3a971e;

    /* 阴影 - 浅色下更柔和 */
    --box-shadow-color-base: rgba(0,0,0,0.1);
    --box-shadow-color-progressive--focus: #3a971e;

    /* 圆角保持方形感(Minecraft 风格) */
    --border-radius-base: 2px;
    --border-radius-medium: 4px;
    --border-radius-large: 8px;

    /* 字体大小(保持可读) */
    --font-size-small: 0.875rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.125rem;
}

/* 全局基础样式 */
body {
    background-color: var(--background-color-base);
    color: var(--color-base);
}

.mw-body {
    background-color: #ffffff;
    border: 1px solid var(--border-color-subtle);
}

/* 链接颜色 */
a {
    color: var(--color-progressive);
}
a:visited {
    color: var(--color-visited);
}
a:hover {
    color: var(--color-progressive--hover);
}

/* 头部导航栏(浅色版) */
.citizen-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color-subtle);
}

/* 侧边栏菜单 */
.citizen-sidebar .citizen-menu__heading {
    color: var(--color-progressive);
    border-left-color: var(--color-progressive);
}
.citizen-sidebar ul li a:hover {
    background-color: var(--background-color-neutral-subtle);
}

/* 页脚 */
.citizen-footer {
    background-color: var(--background-color-neutral);
    color: var(--color-subtle);
    border-top: none;
}
.citizen-footer a {
    color: var(--color-progressive);
}

/* 搜索框 */
.citizen-search-box input {
    background-color: #ffffff;
    border-color: var(--border-color-subtle);
    color: var(--color-base);
}

/* 表格(游戏数据表风格) */
.wikitable {
    background-color: #ffffff;
    border: 1px solid var(--border-color-subtle);
}
.wikitable th {
    background-color: var(--background-color-neutral);
    color: var(--color-progressive);
}
.wikitable tr:nth-child(even) {
    background-color: var(--background-color-neutral-subtle);
}

/* Minecraft 风格按钮(浅色版) */
.mc-button {
    background-color: #ebebeb;
    border: 2px solid var(--border-color-base);
    color: var(--color-base);
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.1s ease;
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--border-radius-base);
}
.mc-button:hover {
    background-color: #e0e0e0;
    border-color: var(--color-progressive);
    transform: translateY(-1px);
}

/* 区块边框效果(浅色版) */
.mw-parser-output .block-border {
    border: 2px solid var(--border-color-subtle);
    background-color: var(--background-color-neutral-subtle);
    padding: 8px;
    margin: 8px 0;
    position: relative;
}
.mw-parser-output .block-border::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 1px dashed var(--color-progressive);
    pointer-events: none;
}

/* 工具提示(浅色版) */
.mc-tooltip {
    position: relative;
    display: inline-block;
}
.mc-tooltip .tooltip-text {
    visibility: hidden;
    background-color: var(--background-color-base);
    color: var(--color-base);
    border: 1px solid var(--color-progressive);
    text-align: center;
    padding: 4px 8px;
    border-radius: var(--border-radius-base);
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.mc-tooltip:hover .tooltip-text {
    visibility: visible;
}

/* 可选:添加一个淡淡的草方块纹理背景(非常浅) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 15px,
        rgba(0, 0, 0, 0.02) 15px,
        rgba(0, 0, 0, 0.02) 16px
    ), repeating-linear-gradient(
        90deg,
        transparent,
        transparent 15px,
        rgba(0, 0, 0, 0.02) 15px,
        rgba(0, 0, 0, 0.02) 16px
    );
    z-index: -1;
}