用户:汐际/签名/style.css - 版本历史

2026年10月25日 (日) 04:15 汐际

2026-10-25T04:15:31Z

←上一版本		2026年10月25日 (日) 12:15的版本
第102行：		第102行：
	}		}

	/* ~~编辑模式下隐藏~~ */		/* 编辑模式下隐藏卡片 */
	body.action-edit .sf-wrapper,		body.action-edit .sf-wrapper,
	body.action-history .sf-wrapper {		body.action-history .sf-wrapper {
第108行：		第108行：
	}		}

	/* ~~基础卡片：固定尺寸，不依赖绝对定位，永不塌陷~~ */		/* 被点击激活的页面，强制设为 flex 并显示 */
	.sf-~~card {~~		#sf-p4:target,
	~~display: grid;~~		#sf-p3:target {
	~~grid-template-areas: "main";~~		display: flex !important;
	~~width: 100%;~~
	~~max-width: 340px;~~
	~~height~~: ~~480px;~~
	~~margin: 0 auto;~~
	~~background:~~ #~~1a1a1a;~~
	~~border: 2px solid #4B0082;~~
	~~box~~-~~sizing~~: ~~border-box;~~
	~~overflow: hidden;~~
	~~position~~: ~~relative~~;
	}		}

	/* ~~页面通用样式：全部叠在同一个格子里 */~~		/* 加载页的 3 秒自动隐藏动画 */
	~~.sf-page {~~
	~~grid-area: main;~~
	~~display: none;~~
	~~flex-direction: column;~~
	~~justify-content: center;~~
	~~align-items: center;~~
	~~width: 100%; height: 100%;~~
	~~box-sizing: border-box;~~
	}

	~~/* 默认显示欢迎页 p2 */~~
	~~#sf-p2 { display: flex; z-index: 1; }~~

	~~/* 加载页 p1：盖在欢迎页上层，3秒后淡出~~ */
	#sf-p1 {		#sf-p1 {
	~~display: flex;~~
	~~z-index: 10;~~
	animation: sf-hide 0.1s 3s forwards;		animation: sf-hide 0.1s 3s forwards;
	}		}
第147行：		第122行：
	}		}

	/* ~~授权页 p4 激活~~ */		/* 如果用户点击了任何跳转，立刻强行干掉加载页，防止它挡路 */
	#sf-p4:target {		#sf-p2:target ~ #sf-p1,
	~~display~~: ~~flex~~ !important;		#sf-p4:target ~ #sf-p1,
	~~z-index~~: ~~20;~~		#sf-p3:target ~ #sf-p1 {
	~~background: rgba(26,26,26,0.85)~~;		animation: none !important;
			display: none !important;
	}		}

	/* ~~如果激活了 p4，顺便强制干掉 p1（防止加载动画卡住）~~ */		/* 正文控制 */
	#sf-~~p4:target ~ #sf-p1 { display: none !important; animation: none !important; }~~		#sf-doc { display: none; }
			#sf-p3:target ~ #sf-doc { display: block; }
	~~/* 成功页 p3 默认隐藏 */~~
	~~#sf-p3~~ { display: none~~; }~~

	~~/* 成功页 p3 激活时，显示自己，并隐藏兄弟节点中的主卡片 */~~
	~~#sf-p3:target { display: block~~; }
	#sf-p3:target ~ ~~.sf-card { display: none !important; }~~

	~~/* 正文样式：随成功页一起出现，自然排在下面 */~~
	#sf-doc {
	~~max-width~~: ~~340px;~~
	~~margin: 20px auto 0~~;
	~~text-align: left;~~
	~~line-height: 1.6;~~
	~~font-size: 14px;~~
	~~color: #202122;~~
	}

2026年10月25日 (日) 04:13 汐际

2026-10-25T04:13:34Z

←上一版本		2026年10月25日 (日) 12:13的版本
第108行：		第108行：
	}		}

	/* ~~所有页面的基础设置：默认隐藏，且不带黑底（黑底用内联写在外面）~~ */		/* 基础卡片：固定尺寸，不依赖绝对定位，永不塌陷 */
	.sf-~~screen~~ {		.sf-card {
			display: grid;
			grid-template-areas: "main";
			width: 100%;
			max-width: 340px;
			height: 480px;
			margin: 0 auto;
			background: #1a1a1a;
			border: 2px solid #4B0082;
			box-sizing: border-box;
			overflow: hidden;
			position: relative;
			}

			/* 页面通用样式：全部叠在同一个格子里 */
			.sf-page {
			grid-area: main;
	display: none;		display: none;
	~~position: absolute;~~
	~~top: 0; left: 0;~~
	~~width: 100%; height: 100%;~~
	flex-direction: column;		flex-direction: column;
	justify-content: center;		justify-content: center;
	align-items: center;		align-items: center;
			width: 100%; height: 100%;
	box-sizing: border-box;		box-sizing: border-box;
	~~z-index: 1;~~
	}		}

	/* ~~======= 核心跳转逻辑 =======~~ */		/* 默认显示欢迎页 p2 */
	~~/* 被点击激活的页面，强制显示在最上层 */~~		#sf-p2 { display: flex; z-index: 1; }
	~~#sf-load:target,~~
	~~#sf-welcome:target,~~
	~~#sf-auth:target,~~
	#sf-~~success:target~~ {
	display: flex ~~!important~~;
	z-index: ~~50 !important~~;
	}

	/* ~~弹窗需要深色背景 */~~		/* 加载页 p1：盖在欢迎页上层，3秒后淡出 */
	~~#sf-auth:target { background: rgba(26,26,26,0.85); }~~		#sf-p1 {

	~~/* =======~~ 加载页 ~~3 秒自动跳转 ======= */~~
	~~/* 默认状态：加载页铺在最下面，并在3秒后消失~~ */
	#sf-~~load~~ {
	display: flex;		display: flex;
	z-index: 10;		z-index: 10;
	animation: sf~~-auto~~-hide 0.1s 3s forwards;		animation: sf-hide 0.1s 3s forwards;
	}		}
	@keyframes sf~~-auto~~-hide {		@keyframes sf-hide {
	to { opacity: 0; visibility: hidden; }		to { opacity: 0; visibility: hidden; }
	}		}

	/* ~~如果用户点击了其他页面，立刻干掉还没结束的加载页~~ */		/* 授权页 p4 激活 */
	#sf-~~welcome~~:target ~~~ #sf-load,~~		#sf-p4:target {
	~~#sf-auth:target ~ #sf-load,~~		display: flex !important;
	~~#sf-success:target ~ #sf-load~~ {		z-index: 20;
	~~animation~~: ~~none~~ !important;		background: rgba(26,26,26,0.85);
	~~display~~: ~~none !important~~;
	}		}

	/* ~~======= 欢迎页底层逻辑 ======= */~~		/* 如果激活了 p4，顺便强制干掉 p1（防止加载动画卡住） */
	~~/* 如果没有任何锚点，默认显示欢迎页~~ */		#sf-p4:target ~ #sf-p1 { display: none !important; animation: none !important; }
	#sf-~~welcome~~ {
	display: ~~flex~~;		/* 成功页 p3 默认隐藏 */
	~~z-index~~: 5;		#sf-p3 { display: none; }
	}
	/* ~~如果其他页面被激活，隐藏欢迎页~~ */
	#sf-~~auth:target ~ #sf-welcome,~~
	~~#sf-success:target ~ #sf-welcome~~ {
	display: none ~~!important~~;
	}

	/* ~~======= 正文控制 =======~~ */		/* 成功页 p3 激活时，显示自己，并隐藏兄弟节点中的主卡片 */
	#sf-~~doc~~ { display: ~~none~~; }		#sf-p3:target { display: block; }
	#sf-~~success~~:target ~ #sf-~~doc~~ { display: ~~block~~; }		#sf-p3:target ~ .sf-card { display: none !important; }

	/* ~~加载圈旋转~~ */		/* 正文样式：随成功页一起出现，自然排在下面 */
	~~@keyframes~~ sf-~~spin~~ { ~~100% { transform~~: ~~rotate(360deg)~~; } }		#sf-doc {
			max-width: 340px;
			margin: 20px auto 0;
			text-align: left;
			line-height: 1.6;
			font-size: 14px;
			color: #202122;
			}

2026年10月25日 (日) 04:09 汐际

2026-10-25T04:09:54Z

←上一版本		2026年10月25日 (日) 12:09的版本
第102行：		第102行：
	}		}

	/* ~~编辑模式下隐藏卡片~~ */		/* 编辑模式下隐藏 */
	body.action-edit .sf-wrapper,		body.action-edit .sf-wrapper,
	body.action-history .sf-wrapper {		body.action-history .sf-wrapper {
第108行：		第108行：
	}		}

	/* ~~所有页面的基础设置：默认隐藏~~ */		/* 所有页面的基础设置：默认隐藏，且不带黑底（黑底用内联写在外面） */
	.sf-screen {		.sf-screen {
	display: none;		display: none;
第118行：		第118行：
	align-items: center;		align-items: center;
	box-sizing: border-box;		box-sizing: border-box;
	~~background: #1a1a1a;~~
	~~border: 2px solid #4B0082;~~
	z-index: 1;		z-index: 1;
	}		}

	/* ~~根据选中的 Radio 来显示对应的页面~~ */		/* ======= 核心跳转逻辑 ======= */
	#~~nav~~-load:~~checked ~ .sf-wrapper~~ #sf-~~p1 { display~~: ~~flex; z-index: 100; }~~		/* 被点击激活的页面，强制显示在最上层 */
	#~~nav-welcome:checked ~ .~~sf-~~wrapper #sf-p2 { display~~: ~~flex; }~~		#sf-load:target,
	#~~nav~~-~~auth~~:~~checked ~ .sf-wrapper #sf-p4~~ { display: flex; z-index: 50; ~~background: rgba(26,26,26,0.85); }~~		#sf-welcome:target,
	~~#nav-success:checked ~ .sf-wrapper #sf-p3 { display: flex;~~ }		#sf-auth:target,
			#sf-success:target {
			display: flex !important;
			z-index: 50 !important;
			}

	/* ~~成功页激活时，显示下方的正文~~ */		/* 弹窗需要深色背景 */
	#~~nav~~-~~success~~:~~checked ~ .sf-wrapper #sf-doc~~ { ~~display~~: ~~block~~; }		#sf-auth:target { background: rgba(26,26,26,0.85); }

	/* ~~3秒视觉淡出动画（使用 visibility 替代 pointer-events）~~ */		/* ======= 加载页 3 秒自动跳转 ======= */
	#~~nav~~-load:~~checked ~ .sf~~-~~wrapper #sf-p1 {~~		/* 默认状态：加载页铺在最下面，并在3秒后消失 */
	animation: sf-~~fade~~-~~out~~ 0.3s 3s forwards;		#sf-load {
			display: flex;
			z-index: 10;
			animation: sf-auto-hide 0.1s 3s forwards;
	}		}
	@keyframes sf-~~fade~~-~~out~~ {		@keyframes sf-auto-hide {
	to { opacity: 0; visibility: hidden~~; z-index: -1~~; }		to { opacity: 0; visibility: hidden; }
	}		}

	/* ~~加载圈的旋转动画~~ */		/* 如果用户点击了其他页面，立刻干掉还没结束的加载页 */
	~~@keyframes~~ sf-~~spin~~ {		#sf-welcome:target ~ #sf-load,
	~~100% { transform~~: ~~rotate(360deg)~~; }		#sf-auth:target ~ #sf-load,
			#sf-success:target ~ #sf-load {
			animation: none !important;
			display: none !important;
	}		}

	/* ~~按钮文字穿透~~ */		/* ======= 欢迎页底层逻辑 ======= */
	.sf-~~btn a~~ { ~~color~~: ~~inherit~~ !important; ~~text~~-~~decoration~~: none ~~!important~~; display: block; ~~width:~~ 100%~~; height~~: ~~100%~~; }		/* 如果没有任何锚点，默认显示欢迎页 */
			#sf-welcome {
			display: flex;
			z-index: 5;
			}
			/* 如果其他页面被激活，隐藏欢迎页 */
			#sf-auth:target ~ #sf-welcome,
			#sf-success:target ~ #sf-welcome {
			display: none !important;
			}

			/* ======= 正文控制 ======= */
			#sf-doc { display: none; }
			#sf-success:target ~ #sf-doc { display: block; }

			/* 加载圈旋转 */
			@keyframes sf-spin { 100% { transform: rotate(360deg); } }

2026年10月25日 (日) 04:04 汐际

2026-10-25T04:04:11Z

←上一版本		2026年10月25日 (日) 12:04的版本
第102行：		第102行：
	}		}

	/* ~~=========================================~~		/* 编辑模式下隐藏卡片 */
	~~1. 外壳与防遮挡~~		body.action-edit .sf-wrapper,
	~~=========================================~~ */		body.action-history .sf-wrapper {
	.sf-~~container {~~		display: none !important;
	~~position: relative; width: 100%; max~~-~~width: 340px; height: 480px;~~
	~~margin: 2em auto; background: #1a1a1a; border: 2px solid #4B0082;~~
	~~box-sizing: border-box; overflow: hidden; font-family: sans-serif; isolation~~: ~~isolate~~;
	}		}

	~~body.action-edit .sf-container,~~		/* 所有页面的基础设置：默认隐藏 */
	~~body.action-history .sf-container { display: none !important; }~~

	/* ~~=========================================~~
	~~2. 页面基础状态~~
	~~=========================================~~ */
	.sf-screen {		.sf-screen {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;		display: none;
	~~display: none;~~ flex-direction: column; justify-content: center; align-items: center;		position: absolute;
	box-sizing: border-box; ~~z-index: 1;~~		top: 0; left: 0;
	}		width: 100%; height: 100%;
			flex-direction: column;
	~~/* 底层欢迎页：默认始终铺开 */~~		justify-content: center;
	~~#sf-p2 { display: flex; }~~		align-items: center;
			box-sizing: border-box;
	~~/* =========================================~~		background: #1a1a1a;
	~~3. 加载页 3 秒自动跳转（借鉴 Wikidot 思路）~~		border: 2px solid #4B0082;
	~~========================================= */~~		z-index: 1;
	~~#sf-p1 {~~
	~~display: flex; z-index: 100;~~ background: #1a1a1a;
	~~/* 关键：强制在 3 秒后瞬间触发 display~~: ~~none */~~
	~~animation~~: ~~sf-auto-hide 0.1s 3s forwards~~;
	}		}

	~~@keyframes~~ sf-~~auto~~-~~hide~~ {		/* 根据选中的 Radio 来显示对应的页面 */
	to { display: ~~none~~; }		#nav-load:checked ~ .sf-wrapper #sf-p1 { display: flex; z-index: 100; }
	}		#nav-welcome:checked ~ .sf-wrapper #sf-p2 { display: flex; }
			#nav-auth:checked ~ .sf-wrapper #sf-p4 { display: flex; z-index: 50; background: rgba(26,26,26,0.85); }
			#nav-success:checked ~ .sf-wrapper #sf-p3 { display: flex; }

	/* ~~动态省略号特效~~ */		/* 成功页激活时，显示下方的正文 */
	.sf-~~dots::after~~ {		#nav-success:checked ~ .sf-wrapper #sf-doc { display: block; }
	~~content: '';~~
	display: ~~inline-~~block;
	~~width: 1.5em;~~
	~~text-align: left;~~
	~~animation: sf-dot-typing 1.5s infinite;~~
	}

	~~@keyframes sf~~-~~dot~~-~~typing {~~		/* 3秒视觉淡出动画（使用 visibility 替代 pointer-events） */
	~~0% { content: ''; }~~		#nav-load:checked ~ .sf-wrapper #sf-p1 {
	~~25% { content~~: '.~~'; }~~		animation: sf-fade-out 0.3s 3s forwards;
	~~50%~~ { ~~content: '..'; }~~
	~~75% { content~~: ~~'..~~.~~'; }~~
	~~100% { content: ''~~; }
	}		}
			@keyframes sf-fade-out {
	~~/* 旋转特效 */~~		to { opacity: 0; visibility: hidden; z-index: -1; }
	@keyframes sf-~~spin~~ { ~~100%~~ { ~~transform~~: ~~rotate(360deg)~~; ~~} }~~

	~~/* =========================================~~
	~~4. 点击 Target 切换页面~~
	~~========================================= */~~
	~~/* 只要被 Target 激活，强制显示并置顶 */~~
	~~#sf-p2:target, #sf-p3~~:~~target, #sf-p4:target {~~
	~~display: flex !important~~; z-index: ~~50 !important~~;
	}		}

	/* ~~如果被激活，立刻干掉还没结束倒计时的加载页~~ */		/* 加载圈的旋转动画 */
	#sf-~~p2:target ~ #sf-p1,~~		@keyframes sf-spin {
	~~#sf-p3:target ~ #sf-p1,~~		100% { transform: rotate(360deg); }
	~~#sf-p4:target ~ #sf-p1~~ {
	~~animation: none !important;~~
	~~display~~: ~~none !important~~;
	}		}

	~~#sf-p4 { background: rgba(0,0,0,0.75); }~~		/* 按钮文字穿透 */

	/* ~~=========================================~~
	~~5. 正文显示~~
	~~========================================= */~~
	~~#sf-doc { display: none; }~~
	~~#sf-p3:target ~ #sf-doc { display: block; }~~

	~~/* 按钮穿透~~ */
	.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }		.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }

2026年10月25日 (日) 03:55 汐际

2026-10-25T03:55:49Z

←上一版本		2026年10月25日 (日) 11:55的版本
第100行：		第100行：
	50% { transform: translate(7px, -5px) skew(-7deg, 7deg); opacity: 0.95; }		50% { transform: translate(7px, -5px) skew(-7deg, 7deg); opacity: 0.95; }
	100% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.5; }		100% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.5; }
			}

			/* =========================================
			1. 外壳与防遮挡
			========================================= */
			.sf-container {
			position: relative; width: 100%; max-width: 340px; height: 480px;
			margin: 2em auto; background: #1a1a1a; border: 2px solid #4B0082;
			box-sizing: border-box; overflow: hidden; font-family: sans-serif; isolation: isolate;
	}		}

	body.action-edit .sf-container,		body.action-edit .sf-container,
	body.action-history .sf-container {		body.action-history .sf-container { display: none !important; }
	display: none ~~!important~~;
			/* =========================================
			2. 页面基础状态
			========================================= */
			.sf-screen {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%;
			display: none; flex-direction: column; justify-content: center; align-items: center;
			box-sizing: border-box; z-index: 1;
			}

			/* 底层欢迎页：默认始终铺开 */
			#sf-p2 { display: flex; }

			/* =========================================
			3. 加载页 3 秒自动跳转（借鉴 Wikidot 思路）
			========================================= */
			#sf-p1 {
			display: flex; z-index: 100; background: #1a1a1a;
			/* 关键：强制在 3 秒后瞬间触发 display: none */
			animation: sf-auto-hide 0.1s 3s forwards;
	}		}

	~~/* 默认隐藏所有页面 */~~		@keyframes sf-auto-hide {
	.sf-~~screen~~ {		to { display: none; }
	~~opacity: 0;~~
	~~visibility: hidden;~~
	~~z-index~~: 1;
	}		}

	/* ~~p2 (欢迎页) 作为底层，默认可见~~ */		/* 动态省略号特效 */
	#sf-p2 {		.sf-dots::after {
	~~opacity~~: 1;		content: '';
	~~visibility~~: ~~visible~~;		display: inline-block;
			width: 1.5em;
			text-align: left;
			animation: sf-dot-typing 1.5s infinite;
	}		}

	~~/* p1 (加载页) 盖在最上方，3秒后消失 */~~		@keyframes sf-dot-typing {
	#sf-p1 {		0% { content: ''; }
	~~opacity~~: 1;		25% { content: '.'; }
	~~visibility~~: ~~visible~~;		50% { content: '..'; }
	~~z-index~~: ~~100~~;		75% { content: '...'; }
	~~animation~~: ~~sf-auto-hide 0~~.~~1s 3s forwards~~;		100% { content: ''; }
	}		}

	@keyframes sf-~~auto~~-~~hide~~ {		/* 旋转特效 */
	~~to { opacity: 0; visibility~~: ~~hidden~~; z-index: -1; }		@keyframes sf-spin { 100% { transform: rotate(360deg); } }

			/* =========================================
			4. 点击 Target 切换页面
			========================================= */
			/* 只要被 Target 激活，强制显示并置顶 */
			#sf-p2:target, #sf-p3:target, #sf-p4:target {
			display: flex !important; z-index: 50 !important;
	}		}

	/* ~~只要被点击跳转，立刻干掉 p1~~ */		/* 如果被激活，立刻干掉还没结束倒计时的加载页 */
	#sf-p2:target ~ #sf-p1,		#sf-p2:target ~ #sf-p1,
	#sf-p4:target ~ #sf-p1,		#sf-p3:target ~ #sf-p1,
	#sf-p3:target ~ #sf-p1 {		#sf-p4:target ~ #sf-p1 {
	animation: none !important;		animation: none !important;
	~~opacity~~: ~~0 !important;~~		display: none !important;
	~~visibility: hidden !important;~~
	~~z-index: -1~~ !important;
	}		}

	~~/* 被激活的页面强制显示并置顶 */~~		#sf-p4 { background: rgba(0,0,0,0.75); }
	#sf-p2:~~target~~,
	~~#sf-p4:target~~,
	~~#sf-p3:target {~~
	~~opacity: 1 !important;~~
	~~visibility: visible !important;~~
	~~z-index: 50 !important~~;
	}

	/* ~~正文显隐~~ */		/* =========================================
			5. 正文显示
			========================================= */
	#sf-doc { display: none; }		#sf-doc { display: none; }
	#sf-p3:target ~ #sf-doc { display: block; }		#sf-p3:target ~ #sf-doc { display: block; }

	/* ~~链接穿透~~ */		/* 按钮穿透 */
	.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }		.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }

2026年10月25日 (日) 03:41 汐际

2026-10-25T03:41:35Z

←上一版本		2026年10月25日 (日) 11:41的版本
第102行：		第102行：
	}		}

	~~/* 核心：只在编辑/历史记录时隐藏 */~~
	body.action-edit .sf-container,		body.action-edit .sf-container,
	body.action-history .sf-container {		body.action-history .sf-container {
第108行：		第107行：
	}		}

	/* ~~页面显隐基础状态与过渡~~ */		/* 默认隐藏所有页面 */
	.sf-screen {		.sf-screen {
	opacity: 0;		opacity: 0;
	visibility: hidden;		visibility: hidden;
	z-index: 1;		z-index: 1;
	~~transition: opacity 0.3s, visibility 0.3s;~~
	}		}

	/* ~~默认显示~~ p2 */		/* p2 (欢迎页) 作为底层，默认可见 */
	#sf-p2 {		#sf-p2 {
	opacity: 1;		opacity: 1;
第122行：		第120行：
	}		}

	/* 加载页 p1 盖在最上方，3秒后消失 */		/* p1 (加载页) 盖在最上方，3秒后消失 */
	#sf-p1 {		#sf-p1 {
	opacity: 1;		opacity: 1;
	visibility: visible;		visibility: visible;
	z-index: 100;		z-index: 100;
	animation: sf-auto-hide 0s 3s forwards;		animation: sf-auto-hide 0.1s 3s forwards;
	}		}

第134行：		第132行：
	}		}

	/* ~~被点击跳转时，强制干掉~~ p1 */		/* 只要被点击跳转，立刻干掉 p1 */
	#sf-p2:target ~ #sf-p1,		#sf-p2:target ~ #sf-p1,
	#sf-p4:target ~ #sf-p1,		#sf-p4:target ~ #sf-p1,
第144行：		第142行：
	}		}

	/* ~~被激活的页面显示~~ */		/* 被激活的页面强制显示并置顶 */
	#sf-p2:target,		#sf-p2:target,
	#sf-p4:target,		#sf-p4:target,
第155行：		第153行：
	/* 正文显隐 */		/* 正文显隐 */
	#sf-doc { display: none; }		#sf-doc { display: none; }
	#sf-p3:target ~ #sf-doc {		#sf-p3:target ~ #sf-doc { display: block; }
	display: block;
	~~animation: sf-fade-in 0.4s ease;~~
	}

	/* ~~动画与链接穿透~~ */		/* 链接穿透 */
	~~@keyframes sf-spin { 100% { transform: rotate(360deg); } }~~
	~~@keyframes sf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }~~
	.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }		.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }

2026年10月25日 (日) 03:36 汐际

2026-10-25T03:36:52Z

←上一版本		2026年10月25日 (日) 11:36的版本
第102行：		第102行：
	}		}

	/* ~~=========================================~~		/* 核心：只在编辑/历史记录时隐藏 */
	~~1. 外壳限制与防遮挡（新增）~~
	========================================= */
	~~.sf-container {~~
	~~position: relative;~~
	~~width: 100%;~~
	~~max-width: 340px; /* 稍微变窄一点 */~~
	~~height: 480px; /* 高度缩短，避免太长 */~~
	~~margin: 2em auto;~~
	~~background: #1a1a1a;~~
	~~border: 2px solid #4B0082;~~
	~~box-sizing: border-box;~~
	~~overflow: hidden;~~
	~~font-family: sans-serif;~~
	~~isolation: isolate; /* 防止内部高 z-index 跑到外面去 */~~
	~~z-index: 10;~~
	}

	~~/* 核心修复：当用户点击编辑，或者处于历史记录等页面时，直接隐藏卡片~~ */
	body.action-edit .sf-container,		body.action-edit .sf-container,
	body.action-history .sf-container {		body.action-history .sf-container {
第126行：		第108行：
	}		}

	/* ~~=========================================~~		/* 页面显隐基础状态与过渡 */
	~~2. 页面默认隐藏与 3 秒跳转逻辑~~		.sf-screen {
	~~=========================================~~ */		opacity: 0;
	.sf-screen {		visibility: hidden;
	~~position: absolute; top: 0; left~~: 0~~; width: 100%; height: 100%~~;		z-index: 1;
	~~display~~: ~~flex; flex-direction: column; justify-content: center; align-items: center~~;		transition: opacity 0.3s, visibility 0.3s;
	~~opacity: 0; visibility: hidden;~~ z-index: 1; transition: opacity 0.3s, visibility 0.3s;
	}		}

	/* ~~欢迎页 (~~p2~~)：在底层默认铺开~~ */		/* 默认显示 p2 */
	#sf-p2 {		#sf-p2 {
	opacity: 1;		opacity: 1;
第141行：		第122行：
	}		}

	/* 加载页 (p1~~)：盖在最顶层，3秒后变透明且层级降到底部~~ */		/* 加载页 p1 盖在最上方，3秒后消失 */
	#sf-p1 {		#sf-p1 {
	opacity: 1;		opacity: 1;
	visibility: visible;		visibility: visible;
	z-index: 100;		z-index: 100;
	~~background: #1a1a1a;~~
	animation: sf-auto-hide 0s 3s forwards;		animation: sf-auto-hide 0s 3s forwards;
	}		}
第154行：		第134行：
	}		}

	/* ~~=========================================~~		/* 被点击跳转时，强制干掉 p1 */
	~~3. 点击后的显隐控制~~
	~~========================================= */~~

	~~/* 当其他页面被点击（target）时，强制立刻隐藏~~ p1 */
	#sf-p2:target ~ #sf-p1,		#sf-p2:target ~ #sf-p1,
	#sf-p4:target ~ #sf-p1,		#sf-p4:target ~ #sf-p1,
第168行：		第144行：
	}		}

	/* ~~如果 p4 (授权弹窗) 被激活~~ */		/* 被激活的页面显示 */
	#sf-p4:target {		#sf-p2:target,
			#sf-p4:target,
			#sf-p3:target {
	opacity: 1 !important;		opacity: 1 !important;
	visibility: visible !important;		visibility: visible !important;
	z-index: 50 !important;		z-index: 50 !important;
	~~background: rgba(0,0,0,0.75);~~
	}		}

	/* ~~如果 p3 (成功页) 被激活~~ */		/* 正文显隐 */
	#sf-p3:target {		#sf-doc { display: none; }
	~~opacity~~: ~~1 !important~~;		#sf-p3:target ~ #sf-doc {
	~~visibility~~: ~~visible !important;~~		display: block;
	z-~~index: 50 !important~~;		animation: sf-fade-in 0.4s ease;
	}		}

	/* ~~正文显示控制（使用基础兄弟选择器） */~~		/* 动画与链接穿透 */
	~~#sf-doc { display: none; }~~
	~~#sf-p3:target ~ #sf-doc { display: block; animation: sf-fade-in 0.4s ease; }~~
	~~/* =========================================~~
	~~4. 动画与穿透~~
	~~=========================================~~ */
	@keyframes sf-spin { 100% { transform: rotate(360deg); } }		@keyframes sf-spin { 100% { transform: rotate(360deg); } }
	@keyframes sf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }		@keyframes sf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
	.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }		.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }

2026年10月25日 (日) 03:33 汐际

2026-10-25T03:33:59Z

←上一版本		2026年10月25日 (日) 11:33的版本
第183行：		第183行：
	}		}

	/* ~~正文显示控制~~ */		/* 正文显示控制（使用基础兄弟选择器） */
	#sf-doc { display: none; }		#sf-doc { display: none; }
	#sf-p3:target ~ #sf-doc { display: block; animation: sf-fade-in 0.4s ease; }		#sf-p3:target ~ #sf-doc { display: block; animation: sf-fade-in 0.4s ease; }

	/* =========================================		/* =========================================
	4. 动画与穿透		4. 动画与穿透

2026年10月25日 (日) 03:22 汐际

2026-10-25T03:22:51Z

←上一版本		2026年10月25日 (日) 11:22的版本
第102行：		第102行：
	}		}

	/* ~~默认所有页面隐藏~~ */		/* =========================================
			1. 外壳限制与防遮挡（新增）
			========================================= */
			.sf-container {
			position: relative;
			width: 100%;
			max-width: 340px; /* 稍微变窄一点 */
			height: 480px; /* 高度缩短，避免太长 */
			margin: 2em auto;
			background: #1a1a1a;
			border: 2px solid #4B0082;
			box-sizing: border-box;
			overflow: hidden;
			font-family: sans-serif;
			isolation: isolate; /* 防止内部高 z-index 跑到外面去 */
			z-index: 10;
			}

			/* 核心修复：当用户点击编辑，或者处于历史记录等页面时，直接隐藏卡片 */
			body.action-edit .sf-container,
			body.action-history .sf-container {
			display: none !important;
			}

			/* =========================================
			2. 页面默认隐藏与 3 秒跳转逻辑
			========================================= */
	.sf-screen {		.sf-screen {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;		position: absolute; top: 0; left: 0; width: 100%; height: 100%;
第109行：		第135行：
	}		}

	/* 欢迎页 (p2)~~：在底层默认铺开，等待加载页消失~~ */		/* 欢迎页 (p2)：在底层默认铺开 */
	#sf-p2 {		#sf-p2 {
	opacity: 1;		opacity: 1;
第128行：		第154行：
	}		}

	/* ===== 点击后的显隐控制 ===== */		/* =========================================
			3. 点击后的显隐控制
			========================================= */

	/* 当其他页面被点击（target）时，强制立刻隐藏 p1 */		/* 当其他页面被点击（target）时，强制立刻隐藏 p1 */
第159行：		第187行：
	#sf-p3:target ~ #sf-doc { display: block; animation: sf-fade-in 0.4s ease; }		#sf-p3:target ~ #sf-doc { display: block; animation: sf-fade-in 0.4s ease; }

	/* 动画与穿透 */		/* =========================================
			4. 动画与穿透
			========================================= */
	@keyframes sf-spin { 100% { transform: rotate(360deg); } }		@keyframes sf-spin { 100% { transform: rotate(360deg); } }
	@keyframes sf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }		@keyframes sf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
	.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }		.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }

2026年10月25日 (日) 03:19 汐际

2026-10-25T03:19:32Z

←上一版本		2026年10月25日 (日) 11:19的版本
第102行：		第102行：
	}		}

	/* ~~外壳 */~~		/* 默认所有页面隐藏 */
	~~.sf-container {~~
	~~position: relative;~~
	~~width: 100%;~~
	~~max-width: 360px;~~
	~~height: 640px;~~
	~~margin: 2em auto;~~
	~~background: #1a1a1a;~~
	~~border: 2px solid #4B0082;~~
	~~box-sizing: border-box;~~
	~~overflow: hidden;~~
	~~font-family: sans-serif;~~
	}

	~~/* 默认所有页面隐藏！~~ */
	.sf-screen {		.sf-screen {
	position: absolute;		position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	top: 0; left: 0;		display: flex; flex-direction: column; justify-content: center; align-items: center;
	width: 100%; height: 100%;		opacity: 0; visibility: hidden; z-index: 1; transition: opacity 0.3s, visibility 0.3s;
	display: ~~none~~;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	~~box-sizing~~: ~~border-box~~;
	z-index: 1;
	}		}

	/* 欢迎页 (p2)：在底层默认铺开，等待加载页消失 */		/* 欢迎页 (p2)：在底层默认铺开，等待加载页消失 */
	#sf-p2 { ~~display~~: ~~flex~~; }		#sf-p2 {
			opacity: 1;
			visibility: visible;
			}

	/* 加载页 (p1)~~：盖在最顶层，3秒后消失~~ */		/* 加载页 (p1)：盖在最顶层，3秒后变透明且层级降到底部 */
	#sf-p1 {		#sf-p1 {
	~~display~~: ~~flex~~;		opacity: 1;
			visibility: visible;
	z-index: 100;		z-index: 100;
	background: #1a1a1a;		background: #1a1a1a;
	animation: sf-hide~~-p1~~ 0s 3s forwards;		animation: sf-auto-hide 0s 3s forwards;
	}		}
	@keyframes sf-hide~~-p1~~ {
	to { ~~display~~: ~~none~~; }		@keyframes sf-auto-hide {
			to { opacity: 0; visibility: hidden; z-index: -1; }
	}		}

	/* ===== 点击后的显隐控制 ===== */		/* ===== 点击后的显隐控制 ===== */

	/* ~~如果 p2 被激活，强制干掉~~ p1 */		/* 当其他页面被点击（target）时，强制立刻隐藏 p1 */
	#sf-p2:target ~ #sf-p1 { ~~display~~: none !important; ~~animation~~: ~~none~~ !important; }		#sf-p2:target ~ #sf-p1,
			#sf-p4:target ~ #sf-p1,
			#sf-p3:target ~ #sf-p1 {
			animation: none !important;
			opacity: 0 !important;
			visibility: hidden !important;
			z-index: -1 !important;
			}

	/* 如果 p4 (授权弹窗) ~~被激活：显示 p4，干掉 p1 和 p2~~ */		/* 如果 p4 (授权弹窗) 被激活 */
	#sf-p4:target { ~~display~~: ~~flex~~ !important; z-index: 50; background: rgba(0,0,0,0.75); }		#sf-p4:target {
	~~#sf-p4:target ~ #sf-p2, #sf-p4:target ~ #sf-p1 { display: none !important; animation: none !important;~~ }		opacity: 1 !important;
			visibility: visible !important;
			z-index: 50 !important;
			background: rgba(0,0,0,0.75);
			}

	/* 如果 p3 (成功页) ~~被激活：显示 p3，干掉 p1, p2, p4~~ */		/* 如果 p3 (成功页) 被激活 */
	#sf-p3:target { ~~display~~: ~~flex~~ !important; ~~z-index: 50; }~~		#sf-p3:target {
	~~#sf-p3~~:~~target ~ #sf-p2, #sf-p3:target ~ #sf-p4, #sf-p3:target ~ #sf-p1 { display: none~~ !important; ~~animation~~: ~~none~~ !important; }		opacity: 1 !important;
			visibility: visible !important;
			z-index: 50 !important;
			}

	/* 正文显示控制 */		/* 正文显示控制 */
第160行：		第159行：
	#sf-p3:target ~ #sf-doc { display: block; animation: sf-fade-in 0.4s ease; }		#sf-p3:target ~ #sf-doc { display: block; animation: sf-fade-in 0.4s ease; }

	/* ~~动画与按钮~~ */		/* 动画与穿透 */
	@keyframes sf-spin { 100% { transform: rotate(360deg); } }		@keyframes sf-spin { 100% { transform: rotate(360deg); } }
	@keyframes sf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }		@keyframes sf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

	~~/* 穿透链接颜色 */~~
	.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }		.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }