MediaWiki:Citizen.css - 版本历史

2026年9月27日 (日) 17:55 Ancimen

2026-09-27T17:55:55Z

@@ 第689行： / 第689行： @@
          padding-right: 0 !important;
+     }
+}

2026年9月27日 (日) 17:26 Ancimen

2026-09-27T17:26:53Z

←上一版本		2026年9月28日 (一) 01:26的版本
第603行：		第603行：
	.citizen-page-actions #citizen-page-actions-more__card {		.citizen-page-actions #citizen-page-actions-more__card {
	position: absolute !important;		position: absolute !important;
	~~right~~: calc(100% + 0.5rem) !important;		left: calc(100% + 0.5rem) !important;
	~~left~~: auto !important;		right: auto !important;
	top: 0 !important;		top: 0 !important;
	min-width: 12rem !important;		min-width: 12rem !important;
			max-width: calc(100vw - 8rem) !important;
	background: #fff !important;		background: #fff !important;
	border-radius: 0.5rem !important;		border-radius: 0.5rem !important;

2026年9月27日 (日) 17:22 Ancimen

2026-09-27T17:22:17Z

显示更改

2026年9月27日 (日) 17:20 Ancimen

2026-09-27T17:20:01Z

显示更改

2026年9月27日 (日) 17:15 Ancimen

2026-09-27T17:15:30Z

←上一版本		2026年9月28日 (一) 01:15的版本
第481行：		第481行：
	7. 页面操作工具栏（嵌入标题行右侧）		7. 页面操作工具栏（嵌入标题行右侧）
	============================================ */		============================================ */

			/* 7.0 主内容：flex 布局，header 强制置顶 */
			.mw-body {
			display: flex;
			flex-direction: column;
			}
			.mw-body > .citizen-page-header {
			order: -1;
			}
			.mw-body > .citizen-body-container {
			order: 0;
			}

	/* 7.1 header 内部：左标题 + 右按钮 */		/* 7.1 header 内部：左标题 + 右按钮 */
第496行：		第508行：
	}		}

	/* 7.2 ~~按钮容器：右侧竖排~~ */		/* 7.2 按钮容器：右侧竖排，右对齐 */
	.citizen-page-actions {		.citizen-page-actions {
	flex: 0 0 auto;		flex: 0 0 auto;
第510行：		第522行：
	}		}

	/* 7.4 每一层 nav 竖排 */		/* 7.4 每一层 nav 竖排 + 右对齐 */
	.citizen-page-actions .citizen-menu,		.citizen-page-actions .citizen-menu,
	.citizen-page-actions .citizen-menu__content,		.citizen-page-actions .citizen-menu__content,
第516行：		第528行：
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
			align-items: flex-end; /* 关键：每一层都右对齐 */
	gap: 0.4rem;		gap: 0.4rem;
	margin: 0;		margin: 0;
	padding: 0;		padding: 0;
	list-style: none;		list-style: none;
			}

			/* 7.4.1 每个 li 不拉伸，宽度按内容 */
			.citizen-page-actions .mw-list-item,
			.citizen-page-actions .citizen-share-trigger,
			.citizen-page-actions .citizen-dropdown-details {
			flex: 0 0 auto;
			width: auto;
	}		}

第532行：		第553行：
	.citizen-page-actions #citizen-page-more-dropdown { order: 7; }		.citizen-page-actions #citizen-page-more-dropdown { order: 7; }

	/* 7.6 ~~按钮外观：暗红圆角小方块（彻底 reset Codex 样式）~~ */		/* 7.6 按钮外观：暗红圆角小方块 */
	.citizen-page-actions .mw-list-item > a,		.citizen-page-actions .mw-list-item > a,
	.citizen-page-actions .citizen-share,		.citizen-page-actions .citizen-share,
第541行：		第562行：
	justify-content: center !important;		justify-content: center !important;
	width: 2.5rem !important;		width: 2.5rem !important;
			min-width: 2.5rem !important;
			max-width: 2.5rem !important;
	height: 2.5rem !important;		height: 2.5rem !important;
			min-height: 2.5rem !important;
			max-height: 2.5rem !important;
			padding: 0 !important;
			margin: 0 !important;
			border: none !important;
	border-radius: 0.75rem !important;		border-radius: 0.75rem !important;
	background: #56000d !important;		background: #56000d !important;
第572行：		第600行：
	}		}

	/* 7.9 "更多"~~下拉卡片：向右展开~~ */		/* 7.9 "更多"下拉：向右展开 */
	.citizen-page-actions .citizen-share-trigger,		.citizen-page-actions .citizen-share-trigger,
	.citizen-page-actions .citizen-dropdown-details {		.citizen-page-actions .citizen-dropdown-details {
第591行：		第619行：
	}		}

	/* 7.10 ~~下拉卡片内的菜单项样式~~ */		/* 7.10 下拉卡片内的菜单项 */
	.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a {		.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a {
	all: unset !important;		all: unset !important;
第635行：		第663行：
	}		}

	/* 7.12 ~~移动端：按钮横排放在标题下方~~ */		/* 7.12 移动端 */
	@media (max-width: 900px) {		@media (max-width: 900px) {
	.citizen-page-header-inner {		.citizen-page-header-inner {

2026年9月27日 (日) 17:11 Ancimen

2026-09-27T17:11:42Z

←上一版本		2026年9月28日 (一) 01:11的版本
第55行：		第55行：
	/* 2.3 主内容卡片 */		/* 2.3 主内容卡片 */
	.mw-body {		.mw-body {
	~~position: relative; /* 页面操作工具栏的定位参考 */~~
	border-radius: 1rem;		border-radius: 1rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
第478行：		第477行：
	}		}
	}		}


	/* ============================================		/* ============================================
	7. ~~页面操作工具栏（主内容右上角竖排）~~		7. 页面操作工具栏（嵌入标题行右侧）
	============================================ */		============================================ */

	/* 7.1 ~~主内容右侧留出按钮空间~~ */		/* 7.1 header 内部：左标题 + 右按钮 */
	.mw-~~body~~ {		.citizen-page-header-inner {
	~~padding~~-~~right~~: ~~5rem~~;		display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 1rem;
	}		}

	/* 7.~~2 主容器：绝对定位到~~ .mw-~~body 右上角~~ */		/* 7.1.1 标题区：占据剩余空间 */
			.citizen-page-heading {
			flex: 1 1 auto;
			min-width: 0;
			}

			/* 7.2 按钮容器：右侧竖排 */
	.citizen-page-actions {		.citizen-page-actions {
	~~position~~: ~~absolute;~~		flex: 0 0 auto;
	~~top: 2rem;~~
	~~right: 2rem;~~
	~~z-index: 10~~;
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	align-items: flex-end;		align-items: flex-end;
	gap: 0.~~5rem;~~		gap: 0.4rem;
	~~pointer-events: auto~~;
	}		}

第529行：		第532行：
	.citizen-page-actions #citizen-page-more-dropdown { order: 7; }		.citizen-page-actions #citizen-page-more-dropdown { order: 7; }

	/* 7.6 ~~所有按钮默认外观：暗红圆角小方块（彻底~~ reset Codex 样式） */		/* 7.6 按钮外观：暗红圆角小方块（彻底 reset Codex 样式） */
	.citizen-page-actions .mw-list-item > a,		.citizen-page-actions .mw-list-item > a,
	.citizen-page-actions .citizen-share,		.citizen-page-actions .citizen-share,
第551行：		第554行：
	gap: 0 !important;		gap: 0 !important;
	}		}

	/* 7.7 悬停 */		/* 7.7 悬停 */
	.citizen-page-actions .mw-list-item > a:hover,		.citizen-page-actions .mw-list-item > a:hover,
第559行：		第563行：
	}		}

	/* 7.8 ~~主按钮只显示图标，隐藏文字和快捷键提示~~ */		/* 7.8 主按钮只显示图标 */
	.citizen-page-actions .mw-list-item > a > span:not(.citizen-ui-icon),		.citizen-page-actions .mw-list-item > a > span:not(.citizen-ui-icon),
	.citizen-page-actions .citizen-share > span:not(.citizen-ui-icon),		.citizen-page-actions .citizen-share > span:not(.citizen-ui-icon),
第587行：		第591行：
	}		}

	/* 7.10 ~~下拉卡片内的按钮：恢复菜单样式~~ */		/* 7.10 下拉卡片内的菜单项样式 */
	.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a {		.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a {
			all: unset !important;
			display: flex !important;
			align-items: center !important;
			justify-content: flex-start !important;
			gap: 0.6rem !important;
	width: 100% !important;		width: 100% !important;
	~~height: auto !important;~~
	~~min-height: 2rem !important;~~
	padding: 0.5rem 0.75rem !important;		padding: 0.5rem 0.75rem !important;
	~~background~~: ~~transparent~~ !important;		border-radius: 0.4rem !important;
	color: #333 !important;		color: #333 !important;
	~~box-shadow: none !important;~~
	~~border-radius: 0.4rem !important;~~
	~~justify-content: flex-start !important;~~
	~~gap: 0.6rem !important;~~
	font-size: 0.9rem !important;		font-size: 0.9rem !important;
	~~transform~~: none !important;		cursor: pointer !important;
			text-decoration: none !important;
			box-sizing: border-box !important;
	}		}
	.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a:hover {		.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a:hover {
	background: rgba(86, 0, 13, 0.08) !important;		background: rgba(86, 0, 13, 0.08) !important;
	color: #56000d !important;		color: #56000d !important;
	~~transform: none !important;~~
	}		}
	.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a > span:not(.citizen-ui-icon),		.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a > span:not(.citizen-ui-icon),
第631行：		第635行：
	}		}

	/* 7.12 ~~移动端：回到横向排列~~ */		/* 7.12 移动端：按钮横排放在标题下方 */
	@media (max-width: 900px) {		@media (max-width: 900px) {
			.citizen-page-header-inner {
			flex-direction: column;
			}
	.citizen-page-actions {		.citizen-page-actions {
	~~position: static;~~
	flex-direction: row;		flex-direction: row;
	align-items: center;		align-items: center;
第650行：		第656行：
	.citizen-page-actions .citizen-dropdown-summary:hover {		.citizen-page-actions .citizen-dropdown-summary:hover {
	transform: none;		transform: none;
	}
	~~.mw-body {~~
	~~padding-right: 1.25rem;~~
	}		}
	}		}

2026年9月27日 (日) 17:08 Ancimen

2026-09-27T17:08:08Z

←上一版本		2026年9月28日 (一) 01:08的版本
第529行：		第529行：
	.citizen-page-actions #citizen-page-more-dropdown { order: 7; }		.citizen-page-actions #citizen-page-more-dropdown { order: 7; }

	/* 7.6 ~~所有按钮默认外观：暗红圆角小方块~~ */		/* 7.6 所有按钮默认外观：暗红圆角小方块（彻底 reset Codex 样式） */
	.citizen-page-actions .mw-list-item > a,		.citizen-page-actions .mw-list-item > a,
	.citizen-page-actions .citizen-share,		.citizen-page-actions .citizen-share,
	.citizen-page-actions .citizen-dropdown-summary {		.citizen-page-actions .citizen-dropdown-summary {
			all: unset !important;
	display: flex !important;		display: flex !important;
	align-items: center !important;		align-items: center !important;
第538行：		第539行：
	width: 2.5rem !important;		width: 2.5rem !important;
	height: 2.5rem !important;		height: 2.5rem !important;
	~~padding: 0 !important;~~
	~~margin: 0 !important;~~
	~~border: none !important;~~
	border-radius: 0.75rem !important;		border-radius: 0.75rem !important;
	background: #56000d !important;		background: #56000d !important;
	color: #fff !important;		color: #fff !important;
	~~text-decoration: none !important;~~
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
	box-sizing: border-box !important;		box-sizing: border-box !important;
	font-size: 1rem !important;		font-size: 1rem !important;
	line-height: 1 !important;		line-height: 1 !important;
			cursor: pointer !important;
			text-decoration: none !important;
	transition: background 0.2s, transform 0.2s;		transition: background 0.2s, transform 0.2s;
			gap: 0 !important;
	}		}

	/* 7.7 悬停 */		/* 7.7 悬停 */
	.citizen-page-actions .mw-list-item > a:hover,		.citizen-page-actions .mw-list-item > a:hover,

2026年9月27日 (日) 17:01 Ancimen

2026-09-27T17:01:41Z

←上一版本		2026年9月28日 (一) 01:01的版本
第38行：		第38行：
	}		}

	/* ~~夜间模式下的背景~~ */		/* 2.1.1 夜间模式背景 */
	html.skin-theme-clientpref-night body,		html.skin-theme-clientpref-night body,
	html.skin-theme-clientpref-pureblack body {		html.skin-theme-clientpref-pureblack body {
第55行：		第55行：
	/* 2.3 主内容卡片 */		/* 2.3 主内容卡片 */
	.mw-body {		.mw-body {
			position: relative; /* 页面操作工具栏的定位参考 */
	border-radius: 1rem;		border-radius: 1rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
第68行：		第69行：
	}		}

	/* 夜间模式 */		/* 2.3.1 夜间模式 */
	html.skin-theme-clientpref-night .mw-body {		html.skin-theme-clientpref-night .mw-body {
	background: rgba(30, 22, 24, 0.95);		background: rgba(30, 22, 24, 0.95);
第74行：		第75行：
	}		}

	/* 纯黑模式 */		/* 2.3.2 纯黑模式 */
	html.skin-theme-clientpref-pureblack .mw-body {		html.skin-theme-clientpref-pureblack .mw-body {
	background: rgba(0, 0, 0, 0.95);		background: rgba(0, 0, 0, 0.95);
第93行：		第94行：
	max-width: 100% !important;		max-width: 100% !important;
	}		}

	/* 2.5 移动端 */		/* 2.5 移动端 */
	@media (max-width: 700px) {		@media (max-width: 700px) {
第223行：		第225行：
	}		}

	/* 面板打开时，按钮整体往左平移面板宽度 */		/* 5.1.1 面板打开时，按钮整体往左平移面板宽度 */
	body.rail-open .rail-container {		body.rail-open .rail-container {
	transform: translateX(-19.5rem);		transform: translateX(-19.5rem);
第476行：		第478行：
	}		}
	}		}


	/* ============================================		/* ============================================
	~~页面操作工具栏：主内容右上角，竖排~~		7. 页面操作工具栏（主内容右上角竖排）
	============================================ */		============================================ */

	/* 1~~. 定位参考~~ */		/* 7.1 主内容右侧留出按钮空间 */
	.mw-body {		.mw-body {
	~~position: relative;~~
	padding-right: 5rem;		padding-right: 5rem;
	}		}

	/* 2. 主容器：绝对定位到 .mw-body 右上角 */		/* 7.2 主容器：绝对定位到 .mw-body 右上角 */
	.citizen-page-actions {		.citizen-page-actions {
	position: absolute;		position: absolute;
第499行：		第502行：
	}		}

	/* 3. 隐藏区块标题 */		/* 7.3 隐藏区块标题 */
	.citizen-page-actions .citizen-menu__heading {		.citizen-page-actions .citizen-menu__heading {
	display: none;		display: none;
	}		}

	/* 4. 每一层 nav 竖排 */		/* 7.4 每一层 nav 竖排 */
	.citizen-page-actions .citizen-menu,		.citizen-page-actions .citizen-menu,
	.citizen-page-actions .citizen-menu__content,		.citizen-page-actions .citizen-menu__content,
第516行：		第519行：
	}		}

	/* 5. 强制按钮顺序 */		/* 7.5 强制按钮顺序 */
	.citizen-page-actions .citizen-share-trigger { order: 0; }		.citizen-page-actions .citizen-share-trigger { order: 0; }
	.citizen-page-actions #ca-view { order: 1; }		.citizen-page-actions #ca-view { order: 1; }
第526行：		第529行：
	.citizen-page-actions #citizen-page-more-dropdown { order: 7; }		.citizen-page-actions #citizen-page-more-dropdown { order: 7; }

	/* 6. 所有按钮默认外观：暗红圆角小方块 */		/* 7.6 所有按钮默认外观：暗红圆角小方块 */
	.citizen-page-actions .mw-list-item > a,		.citizen-page-actions .mw-list-item > a,
	.citizen-page-actions .citizen-share,		.citizen-page-actions .citizen-share,
第549行：		第552行：
	}		}

	/* 7. 悬停 */		/* 7.7 悬停 */
	.citizen-page-actions .mw-list-item > a:hover,		.citizen-page-actions .mw-list-item > a:hover,
	.citizen-page-actions .citizen-share:hover,		.citizen-page-actions .citizen-share:hover,
第557行：		第560行：
	}		}

	/* 8. 主按钮只显示图标，隐藏文字和快捷键提示 */		/* 7.8 主按钮只显示图标，隐藏文字和快捷键提示 */
	.citizen-page-actions .mw-list-item > a > span:not(.citizen-ui-icon),		.citizen-page-actions .mw-list-item > a > span:not(.citizen-ui-icon),
	.citizen-page-actions .citizen-share > span:not(.citizen-ui-icon),		.citizen-page-actions .citizen-share > span:not(.citizen-ui-icon),
第566行：		第569行：
	}		}

	/* 9. "更多"~~下拉卡片：恢复文字，左对齐~~ */		/* 7.9 "更多"下拉卡片：向右展开 */
	.citizen-page-actions .citizen-share-trigger,		.citizen-page-actions .citizen-share-trigger,
	.citizen-page-actions .citizen-dropdown-details {		.citizen-page-actions .citizen-dropdown-details {
第573行：		第576行：
	.citizen-page-actions #citizen-page-actions-more__card {		.citizen-page-actions #citizen-page-actions-more__card {
	position: absolute;		position: absolute;
	~~right~~: calc(100% + 0.5rem);		left: calc(100% + 0.5rem);
			right: auto;
	top: 0;		top: 0;
	~~left: auto;~~
	min-width: 12rem;		min-width: 12rem;
			max-width: calc(100vw - 8rem);
	background: #fff;		background: #fff;
	border-radius: 0.5rem;		border-radius: 0.5rem;
第584行：		第588行：
	}		}

	/* ~~下拉卡片内的按钮：恢复原本菜单样式~~ */		/* 7.10 下拉卡片内的按钮：恢复菜单样式 */
	.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a {		.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a {
	width: 100% !important;		width: 100% !important;
第604行：		第608行：
	transform: none !important;		transform: none !important;
	}		}

	~~/* 恢复下拉卡片内的文字 */~~
	.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a > span:not(.citizen-ui-icon),		.citizen-page-actions #citizen-page-actions-more__card .mw-list-item > a > span:not(.citizen-ui-icon),
	.citizen-page-actions #citizen-page-actions-more__card .citizen-keyboard-hint-keys,		.citizen-page-actions #citizen-page-actions-more__card .citizen-keyboard-hint-keys,
第612行：		第614行：
	}		}

	/* 10. 夜间模式 */		/* 7.11 夜间模式 */
	html.skin-theme-clientpref-night .citizen-page-actions .mw-list-item > a,		html.skin-theme-clientpref-night .citizen-page-actions .mw-list-item > a,
	html.skin-theme-clientpref-night .citizen-page-actions .citizen-share,		html.skin-theme-clientpref-night .citizen-page-actions .citizen-share,
第630行：		第632行：
	}		}

	/* 11. ~~移动端~~ */		/* 7.12 移动端：回到横向排列 */
	@media (max-width: 900px) {		@media (max-width: 900px) {
	.citizen-page-actions {		.citizen-page-actions {

2026年9月27日 (日) 16:56 Ancimen

2026-09-27T16:56:18Z

显示更改

2026年9月27日 (日) 16:53 Ancimen

2026-09-27T16:53:44Z

@@ 第612行： / 第612行： @@
          transform: none;
+     }
+}