跳转到内容

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

来自槌基百科
Remove flex override; keep viewer-mode rules
Redesign: header pill styles + theme variants
第1行: 第1行:
/* ViewerMode gadget styles */
/* ViewerMode gadget — reader/editor toggle pill */


/* === Viewer mode: hide editing UI === */
/* ── Viewer mode: hide all editing UI ───────────────────────────── */
html.viewer-mode .mw-editsection {
html.viewer-mode .mw-editsection,
    display: none !important;
}
html.viewer-mode #ca-edit,
html.viewer-mode #ca-edit,
html.viewer-mode #ca-ve-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 #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;
}
}
html.viewer-mode #p-cactions {
 
     display: none !important;
/* Dark theme */
html.theme-dark .vm-toggle {
    background: #252836;
    border-color: #4a5568;
     color: #e2e8f0;
}
}
html.viewer-mode #ca-watch,
html.theme-dark .vm-toggle:hover {
html.viewer-mode #ca-unwatch {
    background: #2d3748;
     display: none !important;
    border-color: #63b3ed;
     color: #90cdf4;
}
}
html.viewer-mode .vector-sticky-header-edit-icons {
html.theme-dark .vm-toggle.vm-active {
     display: none !important;
    background: #4a9edd;
    border-color: #4a9edd;
     color: #fff;
}
}


/* Highlight toggle button when reader view is active */
/* Warm theme */
html.viewer-mode #pt-viewer-mode a {
html.theme-warm .vm-toggle {
     color: #f0a500;
    border-color: #c8922a;
     font-weight: bold;
    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;
}
}

2026年3月12日 (四) 13:21的版本

/* 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;
}