MediaWiki:Gadget-ViewerMode.css
外观
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* ViewerMode gadget — reader/editor toggle pill */
/* ── Viewer mode: hide all editing UI ───────────────────────────── */
html.viewer-mode .mw-editsection,
html.viewer-mode #ca-edit,
html.viewer-mode #ca-ve-edit,
html.viewer-mode #ca-viewsource,
html.viewer-mode #p-cactions,
html.viewer-mode #ca-watch,
html.viewer-mode #ca-unwatch,
html.viewer-mode .vector-sticky-header-edit-icons { display: none !important; }
/* ── Toggle pill ─────────────────────────────────────────────────── */
.vm-toggle {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.75em;
border: 1.5px solid #c8ccd1;
border-radius: 20px;
background: #fff;
color: #3a3a3a;
font-size: 0.82em;
font-weight: 500;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s, color 0.15s;
margin-right: 0.5em;
vertical-align: middle;
line-height: 1.4;
}
.vm-toggle:hover {
background: #eaf3fb;
border-color: #4a7fa5;
color: #2c3a4a;
}
/* Active state = currently in reader view */
.vm-toggle.vm-active {
background: #2c3a4a;
border-color: #2c3a4a;
color: #fff;
}
.vm-toggle.vm-active:hover {
background: #3d4f63;
border-color: #3d4f63;
}
/* Dark theme */
html.theme-dark .vm-toggle {
background: #252836;
border-color: #4a5568;
color: #e2e8f0;
}
html.theme-dark .vm-toggle:hover {
background: #2d3748;
border-color: #63b3ed;
color: #90cdf4;
}
html.theme-dark .vm-toggle.vm-active {
background: #4a9edd;
border-color: #4a9edd;
color: #fff;
}
/* Warm theme */
html.theme-warm .vm-toggle {
border-color: #c8922a;
color: #5c3d11;
}
html.theme-warm .vm-toggle:hover {
background: #f5ede0;
border-color: #9c6b1e;
}
html.theme-warm .vm-toggle.vm-active {
background: #7a4f1d;
border-color: #7a4f1d;
color: #fff;
}