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

MediaWiki:Common.css:修订间差异

MediaWiki界面页面
Rockman留言 | 贡献
无编辑摘要
标签已被回退
Rockman留言 | 贡献
无编辑摘要
标签已被回退
第1行: 第1行:
 
/* ===================================================
 
* 【方案一】 琉璃幻紫 (现代极简悬浮风)
/* --- 1. 全局色彩引擎与背景环境 --- */
* =================================================== */
:root {
:root {
     --brand-primary: #0284c7;     /* 核心青蓝色:明亮且具科技感 */
     --brand-purple: #7e22ce;       /* 核心主题紫 */
     --brand-secondary: #0ea5e9;   /* 辅助高光色 */
     --brand-purple-light: #f3e8ff; /* 极浅呼吸紫(用于高亮底色) */
     --brand-bg: #f4f7f9;           /* 极浅灰蓝底色,减轻视觉疲劳 */
     --brand-purple-shadow: rgba(126, 34, 206, 0.08); /* 紫色弥散阴影 */
     --text-main: #2c3e50;         /* 深黛蓝色正文,替代纯黑 */
     --brand-bg: #fafafa;           /* 全局网页背景色(极浅灰) */
}
}


body {
body { background-color: var(--brand-bg) !important; }
    background-color: var(--brand-bg) !important;
.mw-parser-output a { color: var(--brand-purple); text-decoration: none; font-weight: 500; }
    color: var(--text-main) !important;
.mw-parser-output a:hover { color: #9333ea; text-decoration: underline; }
}


/* --- 2. 收束页面宽度,聚焦阅读视线 --- */
/* --- 1. 顶部导航 (Header) --- */
/* 将全站最大承载宽度强行收束至 1150px,模拟萌娘百科的紧凑阅读体验 */
/* 纯白背景,底部带有极微弱的紫边和阴影 */
.citizen-page-container {
.citizen-header {
     max-width: 1150px !important;
     background-color: #ffffff !important;
     margin: 0 auto !important;
     border-bottom: 1px solid var(--brand-purple-light) !important;
     padding: 0 24px !important;
     box-shadow: 0 4px 24px var(--brand-purple-shadow) !important;
}
}
.citizen-search-box { background-color: var(--brand-bg) !important; border-radius: 20px !important; }
.citizen-search-box:focus-within { background-color: #ffffff !important; border: 1px solid var(--brand-purple) !important; box-shadow: 0 0 0 3px var(--brand-purple-light) !important; }


/* --- 3. 核心内容卡片化与阴影重塑 --- */
/* --- 2. 侧边信息框 (Infobox) --- */
.citizen-section {
/* 无边框设计,大圆角,悬浮阴影,极度干净 */
.mw-parser-output table.infobox {
     background-color: #ffffff !important;
     background-color: #ffffff !important;
     border-radius: 8px !important;
     border: none !important;
     padding: 30px 35px !important;
     border-radius: 16px !important;
     margin-bottom: 24px !important;
     padding: 20px !important;
     box-shadow: 0 2px 12px rgba(2, 132, 199, 0.06) !important;
     box-shadow: 0 8px 32px var(--brand-purple-shadow) !important;
    border: 1px solid rgba(2, 132, 199, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
}
.mw-parser-output table.infobox th { background-color: var(--brand-purple-light) !important; color: var(--brand-purple) !important; border-radius: 8px !important; }
.mw-parser-output table.infobox th.infobox-header { background-color: var(--brand-purple) !important; color: #ffffff !important; border-radius: 8px 8px 0 0 !important; }
.mw-parser-output table.infobox td { border-bottom: 1px dashed #eaeaea !important; }


.citizen-section:hover {
/* --- 3. 底部导航栏 (Navbox) --- */
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12) !important;
.mw-parser-output table.navbox {
}
     background-color: #ffffff !important;
 
     border: none !important;
/* 章节标题装潢:底部加入青蓝色进度条式点缀 */
     border-radius: 16px !important;
.citizen-section-heading {
     box-shadow: 0 8px 32px var(--brand-purple-shadow) !important;
     position: relative;
     overflow: hidden !important;
    color: var(--brand-primary) !important;
     border-bottom: 2px solid rgba(2, 132, 199, 0.1) !important;
     padding-bottom: 12px !important;
     margin-bottom: 20px !important;
    font-weight: 700 !important;
}
.citizen-section-heading::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--brand-secondary) !important;
     border-radius: 3px;
}
}
.mw-parser-output table.navbox th.navbox-title { background-color: var(--brand-purple) !important; color: #ffffff !important; }
.mw-parser-output table.navbox td.navbox-group { background-color: var(--brand-purple-light) !important; color: var(--brand-purple) !important; }
.mw-parser-output table.navbox td.navbox-list { border-bottom: 1px solid var(--brand-purple-light) !important; }


/* --- 4. 按钮与核心链接:双圆弧线悬浮特效 --- */
/* --- 4. 底部页脚 (Footer) --- */
/* 恢复并强化交互质感:鼠标悬停时两侧展开双圆弧线 */
/* 极简白底,链接为主题紫 */
.cdx-button,
.citizen-footer { background-color: #ffffff !important; border-top: 1px solid var(--brand-purple-light) !important; padding: 40px 0 !important; }
.citizen-menu__content-list a,
#footer-places a { color: var(--brand-purple) !important; font-weight: bold !important; }
.navbox a {
    position: relative;
    transition: color 0.3s ease;
    overflow: visible !important;
}
 
.cdx-button::before, .cdx-button::after,
.citizen-menu__content-list a::before, .citizen-menu__content-list a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 80%;
    border: 2px solid transparent;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}
 
.cdx-button::before, .citizen-menu__content-list a::before {
    left: 0;
    border-left-color: var(--brand-secondary);  
}
.cdx-button::after, .citizen-menu__content-list a::after {
    right: 0;  
    border-right-color: var(--brand-secondary);
}
 
.cdx-button:hover::before, .citizen-menu__content-list a:hover::before {  
    left: -8px;
    opacity: 1;
}
.cdx-button:hover::after, .citizen-menu__content-list a:hover::after {
    right: -8px;
    opacity: 1;
}
 
/* --- 5. 链接颜色与高亮策略 --- */
.mw-parser-output a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}
.mw-parser-output a:hover {
    color: var(--brand-secondary);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4px;
}
 
/* --- 6. 侧边栏与目录 (TOC) 的清爽化处理 --- */
.citizen-page-sidebar {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.citizen-toc-card {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(2, 132, 199, 0.06) !important;
    border: 1px solid rgba(2, 132, 199, 0.1) !important;
    border-left: 4px solid var(--brand-secondary) !important; /* 左侧高亮边框指示 */
}

2026年6月3日 (三) 16:58的版本

/* ===================================================
 * 【方案一】 琉璃幻紫 (现代极简悬浮风)
 * =================================================== */
:root {
    --brand-purple: #7e22ce;       /* 核心主题紫 */
    --brand-purple-light: #f3e8ff; /* 极浅呼吸紫(用于高亮底色) */
    --brand-purple-shadow: rgba(126, 34, 206, 0.08); /* 紫色弥散阴影 */
    --brand-bg: #fafafa;           /* 全局网页背景色(极浅灰) */
}

body { background-color: var(--brand-bg) !important; }
.mw-parser-output a { color: var(--brand-purple); text-decoration: none; font-weight: 500; }
.mw-parser-output a:hover { color: #9333ea; text-decoration: underline; }

/* --- 1. 顶部导航 (Header) --- */
/* 纯白背景,底部带有极微弱的紫边和阴影 */
.citizen-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--brand-purple-light) !important;
    box-shadow: 0 4px 24px var(--brand-purple-shadow) !important;
}
.citizen-search-box { background-color: var(--brand-bg) !important; border-radius: 20px !important; }
.citizen-search-box:focus-within { background-color: #ffffff !important; border: 1px solid var(--brand-purple) !important; box-shadow: 0 0 0 3px var(--brand-purple-light) !important; }

/* --- 2. 侧边信息框 (Infobox) --- */
/* 无边框设计,大圆角,悬浮阴影,极度干净 */
.mw-parser-output table.infobox {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 8px 32px var(--brand-purple-shadow) !important;
}
.mw-parser-output table.infobox th { background-color: var(--brand-purple-light) !important; color: var(--brand-purple) !important; border-radius: 8px !important; }
.mw-parser-output table.infobox th.infobox-header { background-color: var(--brand-purple) !important; color: #ffffff !important; border-radius: 8px 8px 0 0 !important; }
.mw-parser-output table.infobox td { border-bottom: 1px dashed #eaeaea !important; }

/* --- 3. 底部导航栏 (Navbox) --- */
.mw-parser-output table.navbox {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px var(--brand-purple-shadow) !important;
    overflow: hidden !important;
}
.mw-parser-output table.navbox th.navbox-title { background-color: var(--brand-purple) !important; color: #ffffff !important; }
.mw-parser-output table.navbox td.navbox-group { background-color: var(--brand-purple-light) !important; color: var(--brand-purple) !important; }
.mw-parser-output table.navbox td.navbox-list { border-bottom: 1px solid var(--brand-purple-light) !important; }

/* --- 4. 底部页脚 (Footer) --- */
/* 极简白底,链接为主题紫 */
.citizen-footer { background-color: #ffffff !important; border-top: 1px solid var(--brand-purple-light) !important; padding: 40px 0 !important; }
#footer-places a { color: var(--brand-purple) !important; font-weight: bold !important; }