MediaWiki:Gadget-edit0.css

/* [[en:MediaWiki:Gadget-edittop.css]] */
/* Optimized for MediaWiki 1.35+, last updated: 2024-03-20 */
/* Compatible with Vector 2022/Legacy Vector/Minerva and LTR/RTL languages */

/* ==============================================
   1. 基础变量定义（统一管理样式，方便全局调整）
============================================== */
:root {
    --edit-btn-color: #007bff; /* 默认链接色（Vector 2022） */
    --edit-btn-hover: #0056b3; /* 默认hover色 */
    --edit-btn-brackets: #6b7280; /* 括号颜色（中性灰） */
    --edit-btn-legacy-vector: #0645ad; /* 旧版Vector链接色 */
    --edit-btn-minerva: #0066cc; /* Minerva皮肤链接色 */
    --edit-btn-spacing: 0.75em; /* 按钮与标题间距 */
    --edit-btn-font-size: 0.875rem; /* 按钮字号 */
    --edit-btn-bracket-margin: 0 0.25em; /* 括号默认边距 */
}

/* ==============================================
   2. 核心按钮样式（通用基础规则）
============================================== */
.cloned-top-edit-button {
    /* 位置与布局 */
    margin-left: var(--edit-btn-spacing);
    padding: 0;
    display: inline-block;
    vertical-align: middle; /* 与标题文字垂直居中 */
    line-height: 1; /* 匹配标题行高，避免错位 */

    /* 无障碍增强：确保按钮整体可点击区域足够大 */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* 按钮链接样式 */
.cloned-top-edit-button a {
    font-size: var(--edit-btn-font-size);
    color: var(--edit-btn-color);
    text-decoration: none;
    transition: color 0.2s ease; /* 平滑hover过渡 */

    /* 无障碍点击区域扩展 */
    min-width: 44px;
    padding: 4px 0;
    margin: -4px 0; /* 负边距扩展点击区域，不影响视觉 */
}

/* 链接hover状态 */
.cloned-top-edit-button a:hover,
.cloned-top-edit-button a:focus {
    color: var(--edit-btn-hover);
    text-decoration: underline;
    outline: none; /* 移除默认焦点轮廓，用颜色变化提示 */
}

/* 括号样式 */
.cloned-top-edit-button .mw-editsection-bracket {
    margin: var(--edit-btn-bracket-margin);
    color: var(--edit-btn-brackets);
    user-select: none; /* 括号不可选中，优化复制体验 */
}

/* ==============================================
   3. 多皮肤适配（匹配不同皮肤的默认风格）
============================================== */
/* 3.1 Vector 2022 皮肤（1.35+ 默认） */
#mw-page-title-main .cloned-top-edit-button a {
    color: var(--edit-btn-color);
}
#mw-page-title-main .cloned-top-edit-button a:hover {
    color: var(--edit-btn-hover);
}

/* 3.2 旧版Vector 皮肤 */
h1.firstHeading .cloned-top-edit-button a {
    color: var(--edit-btn-legacy-vector);
}
h1.firstHeading .cloned-top-edit-button a:hover {
    color: #0b0080; /* 旧Vector经典hover色 */
}

/* 3.3 Minerva 皮肤（移动版/桌面版） */
.page-heading .cloned-top-edit-button {
    --edit-btn-spacing: 0.5em; /* 调整与标题间距，适配紧凑布局 */
    --edit-btn-font-size: 1rem; /* 移动版字号稍大，提升可读性 */
}
.page-heading .cloned-top-edit-button a {
    color: var(--edit-btn-minerva);
}
.page-heading .cloned-top-edit-button a:hover {
    color: #004499; /* Minerva hover色 */
}

/* 3.4 其他皮肤兜底（如MonoBook） */
.mw-first-heading .cloned-top-edit-button a {
    color: var(--edit-btn-minerva); /* 复用Minerva色值，通用性强 */
}

/* ==============================================
   4. 多语言适配（LTR/RTL 语言兼容）
============================================== */
/* RTL语言（阿拉伯语、希伯来语等）调整 */
body.rtl .cloned-top-edit-button {
    margin-left: 0;
    margin-right: var(--edit-btn-spacing); /* 间距方向反转 */
}
body.rtl .cloned-top-edit-button .mw-editsection-bracket {
    /* 括号间距微调，适配RTL阅读习惯 */
    --edit-btn-bracket-margin: 0 0.15em;
}

/* ==============================================
   5. 特殊场景处理
============================================== */
/* 打印时隐藏按钮（打印页面无需编辑功能） */
@media print {
    .cloned-top-edit-button {
        display: none !important;
    }
}

/* 标题容器有内边距时的适配 */
#firstHeading.has-padding .cloned-top-edit-button,
.mw-first-heading.has-padding .cloned-top-edit-button {
    --edit-btn-spacing: 0.5em; /* 减少间距，避免超出容器 */
}