跳转到内容

MediaWiki:Gadget-ViewerMode.css

来自槌基百科
LocalAdmin留言 | 贡献2026年3月12日 (四) 13:21的版本 (Redesign: header pill styles + theme variants)

注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-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;
}