MediaWiki:Common.css：修订间差异

2026年8月19日 (三) 02:40的版本

/* ====================================================
   MediaWiki 美化样式表 - 基于主题色设计
   主题色: #0a1518, #01faec, #3d839b, #488ab1, #ffffff
   包含悬停 (hover) 效果
   ==================================================== */

/* ---------- 全局基础色调 ---------- */
body {
    background-color: #f4f7f9;
    color: #0a1518;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
}

/* 主容器轻微内阴影，更立体 */
#mw-page-base {
    background: transparent;
}

#mw-head-base {
    background: #0a1518;
    border-bottom: 3px solid #01faec;
}

/* ---------- 顶部导航栏 (个人工具/通知) ---------- */
#mw-head {
    background: #0a1518;
    color: #ffffff;
}

#mw-head a {
    color: #ffffff;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

#mw-head a:hover {
    color: #01faec;
    text-shadow: 0 0 8px rgba(1, 250, 236, 0.5);
}

/* 顶部导航按钮/标签悬停 */
#mw-head .mw-portlet li a {
    background: transparent;
    padding: 0.5em 0.8em;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

#mw-head .mw-portlet li a:hover {
    background: rgba(1, 250, 236, 0.15);
    color: #01faec;
    box-shadow: inset 0 -2px 0 #01faec;
}

/* ---------- 左侧导航栏 (侧边栏) ---------- */
#mw-panel {
    background: #0a1518;
    border-right: 1px solid #3d839b;
}

#mw-panel .mw-portlet h3 {
    color: #01faec;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #3d839b;
    padding-bottom: 0.3em;
}

#mw-panel .mw-portlet li a {
    color: #d0e4ed;
    transition: color 0.2s, background 0.2s, padding-left 0.2s, border-color 0.2s;
    display: block;
    padding: 0.4em 0.4em 0.4em 0.8em;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
}

#mw-panel .mw-portlet li a:hover {
    color: #ffffff;
    background: rgba(1, 250, 236, 0.12);
    padding-left: 1.2em;
    border-left-color: #01faec;
    text-decoration: none;
}

/* ---------- 页面主内容 ---------- */
#content {
    background: #ffffff;
    border: 1px solid #d0dce3;
    border-top: 3px solid #488ab1;
    box-shadow: 0 2px 12px rgba(10, 21, 24, 0.08);
    border-radius: 0 0 8px 8px;
    padding: 1.5em 2em;
    color: #0a1518;
}

/* 内容区域标题 */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    color: #0a1518;
    border-bottom: 1px solid #d0e4ed;
    padding-bottom: 0.2em;
}

#content h1 {
    color: #0a1518;
    border-bottom: 2px solid #488ab1;
}

#content h2 {
    border-bottom: 1px solid #3d839b;
}

/* ---------- 链接样式 (正文中的链接) ---------- */
#content a {
    color: #3d839b;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s, text-shadow 0.2s;
    text-decoration: none;
    border-radius: 2px;
}

#content a:hover {
    color: #0a1518;
    background: rgba(1, 250, 236, 0.18);
    box-shadow: 0 0 0 2px rgba(1, 250, 236, 0.2);
    text-shadow: 0 0 12px rgba(1, 250, 236, 0.15);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: #01faec;
}

/* 已访问链接 */
#content a:visited {
    color: #488ab1;
}

#content a:visited:hover {
    color: #0a1518;
    background: rgba(72, 138, 177, 0.15);
}

/* 外部链接 */
#content a.external {
    background: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233d839b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E) right center no-repeat;
    padding-right: 16px;
    background-size: 12px;
}

#content a.external:hover {
    background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2301faec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E);
}

/* ---------- 按钮样式 (如编辑、查看历史等) ---------- */
#content .mw-ui-button,
#content input[type="submit"],
#content input[type="button"],
#content .oo-ui-buttonElement-button {
    background: #ffffff;
    border: 1px solid #3d839b;
    color: #0a1518;
    transition: all 0.25s ease;
    border-radius: 4px;
    padding: 0.4em 1.2em;
    font-weight: 500;
}

#content .mw-ui-button:hover,
#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content .oo-ui-buttonElement-button:hover {
    background: #01faec;
    border-color: #0a1518;
    color: #0a1518;
    box-shadow: 0 4px 12px rgba(1, 250, 236, 0.3);
    transform: translateY(-1px);
}

#content .mw-ui-button:active,
#content input[type="submit"]:active {
    background: #488ab1;
    border-color: #3d839b;
    transform: scale(0.97);
}

/* ---------- 特殊: 主要操作按钮 (如保存) ---------- */
#content .mw-ui-progressive {
    background: #488ab1;
    border-color: #3d839b;
    color: #ffffff;
}

#content .mw-ui-progressive:hover {
    background: #3d839b;
    border-color: #0a1518;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(72, 138, 177, 0.4);
}

/* ---------- 目录 (TOC) 美化 ---------- */
#toc {
    background: #f8fafc;
    border: 1px solid #d0e4ed;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(10, 21, 24, 0.06);
    padding: 0.8em 1.2em;
}

#toc ul {
    margin: 0.3em 0;
}

#toc li a {
    color: #3d839b;
    transition: all 0.2s;
    display: inline-block;
    padding: 0.1em 0.3em;
    border-radius: 4px;
}

#toc li a:hover {
    color: #0a1518;
    background: rgba(1, 250, 236, 0.2);
    padding-left: 0.8em;
    text-decoration: none;
}

#toc .toctitle {
    color: #0a1518;
    border-bottom: 1px solid #01faec;
}

/* ---------- 信息框/消息盒子 (如系统消息) ---------- */
.mw-message-box {
    border-left: 6px solid #488ab1;
    background: #f0f7fa;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(10, 21, 24, 0.06);
}

.mw-message-box:hover {
    border-left-color: #01faec;
    background: #ffffff;
    transition: background 0.3s, border-color 0.3s;
}

/* ---------- 搜索框 ---------- */
#searchInput {
    border: 1px solid #3d839b;
    border-radius: 20px;
    padding: 0.4em 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: #ffffff;
}

#searchInput:focus {
    border-color: #01faec;
    box-shadow: 0 0 0 3px rgba(1, 250, 236, 0.25);
    outline: none;
}

#searchButton,
#mw-searchButton {
    background: #488ab1;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 0.4em 1.2em;
    transition: all 0.25s ease;
    font-weight: 500;
}

#searchButton:hover,
#mw-searchButton:hover {
    background: #01faec;
    color: #0a1518;
    box-shadow: 0 2px 12px rgba(1, 250, 236, 0.3);
    transform: scale(1.02);
}

/* ---------- 页脚 ---------- */
#footer {
    background: #0a1518;
    color: #d0e4ed;
    border-top: 2px solid #01faec;
    padding: 1.2em 0;
}

#footer a {
    color: #01faec;
    transition: color 0.2s, text-shadow 0.2s;
}

#footer a:hover {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(1, 250, 236, 0.4);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ---------- 表格美化 (wikitable) ---------- */
.wikitable {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d0e4ed;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(10, 21, 24, 0.05);
}

.wikitable th {
    background: #0a1518;
    color: #ffffff;
    padding: 0.6em 1em;
    border-bottom: 2px solid #01faec;
}

.wikitable td {
    padding: 0.5em 1em;
    border-bottom: 1px solid #e8f0f5;
    transition: background 0.2s;
}

.wikitable tr:hover td {
    background: rgba(1, 250, 236, 0.08);
}

.wikitable tr:last-child td {
    border-bottom: none;
}

/* ---------- 缩略图/图片边框 ---------- */
.thumbinner {
    border: 1px solid #d0e4ed;
    background: #ffffff;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 2px 10px rgba(10, 21, 24, 0.06);
    transition: box-shadow 0.25s, transform 0.2s;
}

.thumbinner:hover {
    box-shadow: 0 6px 20px rgba(1, 250, 236, 0.15);
    transform: scale(1.01);
}

/* ---------- 代码块/预格式化 ---------- */
pre,
.mw-code {
    background: #f0f4f7;
    border: 1px solid #d0e4ed;
    border-left: 4px solid #488ab1;
    border-radius: 6px;
    padding: 0.8em 1.2em;
    color: #0a1518;
    transition: border-color 0.25s, background 0.25s;
}

pre:hover,
.mw-code:hover {
    border-left-color: #01faec;
    background: #f8fbfd;
}

/* ---------- 分类链接 ---------- */
#catlinks {
    border: 1px solid #d0e4ed;
    background: #f8fafc;
    border-radius: 6px;
    padding: 0.3em 0.8em;
    margin-top: 1.2em;
}

#catlinks a {
    color: #3d839b;
    transition: color 0.2s, background 0.2s;
    padding: 0.1em 0.4em;
    border-radius: 4px;
}

#catlinks a:hover {
    color: #0a1518;
    background: rgba(1, 250, 236, 0.2);
    text-decoration: none;
}

/* ---------- 编辑工具栏 (WikiEditor) ---------- */
.wikiEditor-ui-toolbar {
    background: #f0f7fa;
    border: 1px solid #d0e4ed;
    border-radius: 6px 6px 0 0;
}

.wikiEditor-ui-toolbar .section-main .group {
    border-right: 1px solid #d0e4ed;
}

.wikiEditor-ui-toolbar .tool {
    transition: background 0.2s, box-shadow 0.2s;
    border-radius: 4px;
}

.wikiEditor-ui-toolbar .tool:hover {
    background: rgba(1, 250, 236, 0.2);
    box-shadow: 0 0 0 2px rgba(1, 250, 236, 0.15);
}

/* ---------- 高亮/选中效果 ---------- */
::selection {
    background: #01faec;
    color: #0a1518;
}

::-moz-selection {
    background: #01faec;
    color: #0a1518;
}

/* ---------- 滚动条美化 (可选) ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #e8eff3;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #488ab1;
    border-radius: 10px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: #01faec;
}

/* ---------- 响应式小调整 ---------- */
@media (max-width: 768px) {
    #content {
        padding: 1em;
    }
    #mw-panel {
        border-right: none;
        border-bottom: 1px solid #3d839b;
    }
}