MediaWiki:Gadget-ViewerMode.css：修订间差异

←上一编辑

@@ 第1行： / 第1行： @@
-/* ViewerMode gadget styles */
+/* ─── ViewerMode gadget ──────────────────────────────────────────── */
-/* === Viewer mode: hide editing UI === */
+/* ══ READER VIEW: hide all editor-only UI ══════════════════════════ */
-html.viewer-mode .mw-editsection {
+html.viewer-mode .mw-editsection,
-    display: none !important;
-}
 html.viewer-mode #ca-edit,
 html.viewer-mode #ca-ve-edit,
-html.viewer-mode #ca-viewsource {
+html.viewer-mode #ca-viewsource,
-    display: none !important;
+html.viewer-mode #p-cactions,
-}
-html.viewer-mode #p-cactions {
-    display: none !important;
-}
 html.viewer-mode #ca-watch,
-html.viewer-mode #ca-unwatch {
+html.viewer-mode #ca-unwatch,
-    display: none !important;
+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;
 }
-html.viewer-mode .vector-sticky-header-edit-icons {
+.vm-toggle:hover       { background: #eaf3fb; border-color: #4a7fa5; color: #2c3a4a; }
-     display: none !important;
+.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); }
-/* Highlight toggle button when reader view is active */
+html.theme-warm .vm-toggle            { border-color: #c8922a; color: #5c3d11; }
-html.viewer-mode #pt-viewer-mode a {
+html.theme-warm .vm-toggle:hover      { background: #f5ede0; border-color: #9c6b1e; }
-    color: #f0a500;
+html.theme-warm .vm-toggle.vm-active  { background: #7a4f1d; border-color: #7a4f1d; color: #fff; }
-    font-weight: bold;
+html.theme-warm #vm-exit              { background: rgba(122,79,29,0.9); }
-}