MediaWiki:Gadget-edit0.css
外观
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* [[en:MediaWiki:Gadget-edittop.css]] */
/* Optimized for MediaWiki 1.35+ | Supports RTL | Last updated: 2024-06-25 */
/**
* ================
* 1. CSS Variables
* ================
* 集中管理颜色和尺寸,方便主题切换和黑暗模式支持
*/
:root {
--edit-btn-color: #007bff; /* 主色调 (Vector 2022蓝) */
--edit-btn-hover: #0056b3; /* 悬停深色 */
--edit-btn-brackets: #6b7280; /* 括号中性灰 */
--edit-btn-margin: 0.75em; /* 基础外边距 */
--edit-btn-font-size: 0.875rem; /* 桌面端字号 */
}
/**
* ==================
* 2. 核心按钮样式
* ==================
* 保持与原生编辑按钮的视觉一致性
*/
.cloned-top-edit-button {
margin-left: var(--edit-btn-margin);
padding: 0;
line-height: 1.25; /* 更友好的文本垂直居中 */
display: inline-flex; /* 更好的RTL和间距控制 */
align-items: center;
gap: 0.25em; /* 替代部分margin,更现代的方式 */
vertical-align: middle;
}
.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,
text-decoration 0.1s ease; /* 平滑的下划线动画 */
min-width: 44px; /* WCAG 2.1 AA触摸目标标准 */
padding: 0.15em 0; /* 更精确的垂直间距 */
}
.cloned-top-edit-button a:hover {
color: var(--edit-btn-hover);
text-decoration: underline;
text-decoration-thickness: 1.1px; /* 更精致的下划线 */
}
/* 括号样式(兼容所有皮肤) */
.cloned-top-edit-button .mw-editsection-bracket {
color: var(--edit-btn-brackets);
font-weight: normal; /* 重置可能继承的粗体 */
}
/**
* ==================
* 3. 皮肤特定适配
* ==================
*/
/* Vector 2022+ */
#mw-page-title-main .cloned-top-edit-button a {
font-weight: 450; /* 半粗体,匹配Vector 2022风格 */
}
/* Legacy Vector (1.35前) */
h1.firstHeading .cloned-top-edit-button a {
color: #0645ad; /* 保持传统蓝色 */
}
/* Minerva (移动端) */
.page-heading .cloned-top-edit-button a {
font-size: 1rem;
margin-left: 0.5em;
min-width: 48px; /* 移动端更大的触摸区域 */
}
/* Timeless皮肤兼容 */
.mw-first-heading .cloned-top-edit-button {
margin-top: 0.15em; /* 微调垂直对齐 */
}
/**
* ==================
* 4. 特殊场景处理
* ==================
*/
/* RTL语言支持 (阿拉伯语/希伯来语等) */
html[dir="rtl"] .cloned-top-edit-button {
margin-left: 0;
margin-right: var(--edit-btn-margin);
}
/* 打印隐藏 */
@media print {
.cloned-top-edit-button {
display: none !important;
}
}
/* 高对比度模式支持 */
@media (forced-colors: active) {
.cloned-top-edit-button a {
color: linkText !important;
text-decoration: underline !important;
}
}