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 VIEW: hide all editor-only 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; }

/* Hide the user avatar / personal menu dropdown */
html.viewer-mode #vector-user-links-dropdown        { display: none !important; }

/* Hide our own editor-only buttons */
html.viewer-mode #vm-toggle   { display: none !important; }
html.viewer-mode #hp-hide-btn { display: none !important; }

/* ══ HEADER TOGGLE PILL ═════════════════════════════════════════════ */
.vm-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.28em 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;
    line-height: 1.5;
}
.vm-toggle:hover       { background: #eaf3fb; border-color: #4a7fa5; color: #2c3a4a; }
.vm-toggle.vm-active   { background: #2c5282; border-color: #2c5282; color: #fff; }
.vm-toggle.vm-active:hover { background: #2a4a7f; }

/* ══ ESCAPE PILL (bottom-left, reader-view only) ════════════════════ */
#vm-exit {
    display: none;          /* hidden by default */
    position: fixed;
    bottom: 1.5rem;
    left: 1.2rem;
    z-index: 9997;
    align-items: center;
    padding: 0.4em 1em;
    border: none;
    border-radius: 20px;
    background: rgba(44, 82, 130, 0.88);
    color: #fff;
    font-size: 0.82em;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
    backdrop-filter: blur(4px);
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
}
html.viewer-mode #vm-exit { display: flex !important; }
#vm-exit:hover { background: rgba(44, 82, 130, 1); transform: scale(1.03); }

/* ══ THEME VARIANTS ═════════════════════════════════════════════════ */
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: #2b6cb0; border-color: #2b6cb0; color: #fff; }
html.theme-dark #vm-exit              { background: rgba(43,108,176,0.9); }

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; }
html.theme-warm #vm-exit              { background: rgba(122,79,29,0.9); }