MediaWiki:Gadget-ViewerMode.css - 版本历史

LocalAdmin：Full visitor simulation styles + escape pill

2026-03-12T13:26:48Z

Full visitor simulation styles + escape pill

←上一版本		2026年3月12日 (四) 13:26的版本
第1行：		第1行：
	/* ViewerMode gadget ~~— reader/editor toggle pill~~ */		/* ─── ViewerMode gadget ──────────────────────────────────────────── */

	/* ~~── Viewer mode~~: hide all ~~editing~~ UI ~~─────────────────────────────~~ */		/* ══ READER VIEW: hide all editor-only UI ══════════════════════════ */
	html.viewer-mode .mw-editsection,		html.viewer-mode .mw-editsection,
	html.viewer-mode #ca-edit,		html.viewer-mode #ca-edit,
第11行：		第11行：
	html.viewer-mode .vector-sticky-header-edit-icons { display: none !important; }		html.viewer-mode .vector-sticky-header-edit-icons { display: none !important; }

	/* ~~── Toggle pill ───────────────────────────────────────────────────~~ */		/* 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 {		.vm-toggle {
	display: inline-flex;		display: inline-flex;
	align-items: center;		align-items: center;
	~~gap: 0.3em;~~		padding: 0.28em 0.75em;
	padding: 0.~~3em~~ 0.75em;
	border: 1.5px solid #c8ccd1;		border: 1.5px solid #c8ccd1;
	border-radius: 20px;		border-radius: 20px;
第28行：		第34行：
	transition: background 0.15s, border-color 0.15s, color 0.15s;		transition: background 0.15s, border-color 0.15s, color 0.15s;
	margin-right: 0.5em;		margin-right: 0.5em;
	~~vertical-align: middle;~~		line-height: 1.5;
	line-height: 1.4;
	}		}
	.vm-toggle:hover {		.vm-toggle:hover { background: #eaf3fb; border-color: #4a7fa5; color: #2c3a4a; }
	background: #eaf3fb;		.vm-toggle.vm-active { background: #2c5282; border-color: #2c5282; color: #fff; }
	border-color: #4a7fa5;		.vm-toggle.vm-active:hover { background: #2a4a7f; }
	color: #~~2c3a4a~~;
	}		/* ══ ESCAPE PILL (bottom-left, reader-view only) ════════════════════ */
	/* ~~Active state = currently in~~ reader view */		#vm-exit {
	.vm-~~toggle~~.vm-~~active {~~		display: none; /* hidden by default */
	~~background~~: ~~#2c3a4a~~;		position: fixed;
	border-~~color~~: ~~#2c3a4a~~;		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;		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;
	}		}
	.vm-~~toggle.~~vm-~~active~~:hover {		html.viewer-mode #vm-exit { display: flex !important; }
	background: ~~#3d4f63~~;		#vm-exit:hover { background: rgba(44, 82, 130, 1); transform: scale(1.03); }
	~~border-color~~: ~~#3d4f63~~;
	}

	/* ~~Dark theme~~ */		/* ══ THEME VARIANTS ═════════════════════════════════════════════════ */
	html.theme-dark .vm-toggle {		html.theme-dark .vm-toggle { background: #252836; border-color: #4a5568; color: #e2e8f0; }
	background: #252836;		html.theme-dark .vm-toggle:hover { background: #2d3748; border-color: #63b3ed; color: #90cdf4; }
	border-color: #4a5568;		html.theme-dark .vm-toggle.vm-active { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
	color: #e2e8f0;		html.theme-dark #vm-exit { background: rgba(43,108,176,0.9); }
	}
	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 {		html.theme-warm .vm-toggle:hover { background: #f5ede0; border-color: #9c6b1e; }
	border-color: #c8922a;		html.theme-warm .vm-toggle.vm-active { background: #7a4f1d; border-color: #7a4f1d; color: #fff; }
	color: #5c3d11;		html.theme-warm #vm-exit { background: rgba(122,79,29,0.9); }
	}
	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;
	}

LocalAdmin：Redesign: header pill styles + theme variants

2026-03-12T13:21:52Z

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,
 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;
+/* Dark theme */
+}
-html.viewer-mode #ca-watch,
+html.theme-dark .vm-toggle:hover {
-html.viewer-mode #ca-unwatch {
+    background: #2d3748;
-     display: none !important;
+    border-color: #63b3ed;
+}
-html.viewer-mode .vector-sticky-header-edit-icons {
+html.theme-dark .vm-toggle.vm-active {
-     display: none !important;
+    background: #4a9edd;
+}
-/* 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;
+}

LocalAdmin：Remove flex override; keep viewer-mode rules

2026-03-12T10:12:38Z

Remove flex override; keep viewer-mode rules

@@ 第21行： / 第21行： @@
+}
-/* Highlight toggle when viewer mode is active */
+/* Highlight toggle button when reader view is active */
 html.viewer-mode #pt-viewer-mode a {
-     color: #f0a500 !important;
+     color: #f0a500;
      font-weight: bold;
+}

LocalAdmin：补全我的博客图标样式及视图切换对齐

2026-03-12T10:08:40Z

补全我的博客图标样式及视图切换对齐

←上一版本		2026年3月12日 (四) 10:08的版本
第1行：		第1行：
	/* ViewerMode gadget ~~— hides editing UI in visitor view~~ */		/* ViewerMode gadget styles */

	/* ~~Section [edit] links~~ */		/* === Viewer mode: hide editing UI === */
	html.viewer-mode .mw-editsection {		html.viewer-mode .mw-editsection {
	display: none !important;		display: none !important;
	}		}

	~~/* Edit / View source / Visual edit page tabs */~~
	html.viewer-mode #ca-edit,		html.viewer-mode #ca-edit,
	html.viewer-mode #ca-ve-edit,		html.viewer-mode #ca-ve-edit,
第12行：		第10行：
	display: none !important;		display: none !important;
	}		}

	~~/* More actions menu (move, delete, protect...) */~~
	html.viewer-mode #p-cactions {		html.viewer-mode #p-cactions {
	display: none !important;		display: none !important;
	}		}

	~~/* Watch / Unwatch */~~
	html.viewer-mode #ca-watch,		html.viewer-mode #ca-watch,
	html.viewer-mode #ca-unwatch {		html.viewer-mode #ca-unwatch {
	display: none !important;		display: none !important;
	}		}

	~~/* Vector 2022 sticky header edit button */~~
	html.viewer-mode .vector-sticky-header-edit-icons {		html.viewer-mode .vector-sticky-header-edit-icons {
	display: none !important;		display: none !important;
	}		}

	/* Highlight toggle ~~button~~ when viewer mode is active */		/* Highlight toggle when viewer mode is active */
	html.viewer-mode #pt-viewer-mode a {		html.viewer-mode #pt-viewer-mode a {
	color: #f0a500 !important;		color: #f0a500 !important;
	font-weight: bold;		font-weight: bold;
			}

			/* === Fix: 我的博客 icon alignment === */
			#pt-simpleblog_myblog a {
			display: flex;
			align-items: center;
			gap: 8px;
			}
			#pt-simpleblog_myblog .vector-icon {
			flex-shrink: 0;
			}

			/* Viewer mode toggle link alignment */
			#pt-viewer-mode a {
			display: flex;
			align-items: center;
			gap: 8px;
			}
			#pt-viewer-mode .vector-icon {
			flex-shrink: 0;
	}		}

LocalAdmin：读者模式切换 CSS

2026-03-12T09:57:08Z

读者模式切换 CSS

新页面

/* ViewerMode gadget — hides editing UI in visitor view */

/* Section [edit] links */
html.viewer-mode .mw-editsection {
display: none !important;
}

/* Edit / View source / Visual edit page tabs */
html.viewer-mode #ca-edit,
html.viewer-mode #ca-ve-edit,
html.viewer-mode #ca-viewsource {
display: none !important;
}

/* More actions menu (move, delete, protect...) */
html.viewer-mode #p-cactions {
display: none !important;
}

/* Watch / Unwatch */
html.viewer-mode #ca-watch,
html.viewer-mode #ca-unwatch {
display: none !important;
}

/* Vector 2022 sticky header edit button */
html.viewer-mode .vector-sticky-header-edit-icons {
display: none !important;
}

/* Highlight toggle button when viewer mode is active */
html.viewer-mode #pt-viewer-mode a {
color: #f0a500 !important;
font-weight: bold;
}

MediaWiki:Gadget-ViewerMode.css - 版本历史

LocalAdmin：​Full visitor simulation styles + escape pill

LocalAdmin：​Redesign: header pill styles + theme variants

LocalAdmin：​Remove flex override; keep viewer-mode rules

LocalAdmin：​补全我的博客图标样式及视图切换对齐

LocalAdmin：​读者模式切换 CSS

LocalAdmin：Full visitor simulation styles + escape pill

LocalAdmin：Redesign: header pill styles + theme variants

LocalAdmin：Remove flex override; keep viewer-mode rules

LocalAdmin：补全我的博客图标样式及视图切换对齐

LocalAdmin：读者模式切换 CSS