MediaWiki:Gadget-ViewerMode.css:修订间差异
外观
LocalAdmin(留言 | 贡献) Remove flex override; keep viewer-mode rules |
LocalAdmin(留言 | 贡献) Redesign: header pill styles + theme variants |
||
| 第1行: | 第1行: | ||
/* ViewerMode gadget | /* ViewerMode gadget — reader/editor toggle pill */ | ||
/* | /* ── Viewer mode: hide all editing UI ───────────────────────────── */ | ||
html.viewer-mode .mw-editsection | html.viewer-mode .mw-editsection, | ||
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, | ||
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. | |||
/* Dark theme */ | |||
html.theme-dark .vm-toggle { | |||
background: #252836; | |||
border-color: #4a5568; | |||
color: #e2e8f0; | |||
} | } | ||
html. | html.theme-dark .vm-toggle:hover { | ||
background: #2d3748; | |||
border-color: #63b3ed; | |||
color: #90cdf4; | |||
} | } | ||
html. | html.theme-dark .vm-toggle.vm-active { | ||
background: #4a9edd; | |||
border-color: #4a9edd; | |||
color: #fff; | |||
} | } | ||
/* | /* Warm theme */ | ||
html. | html.theme-warm .vm-toggle { | ||
color: # | 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; | |||
} | } | ||
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;
}