/* Copyright (c) 2026 dsy4567, view license at <https://github.com/dsy4567/dsy4567.github.io/blob/main/LICENSE.md> */

@charset "utf-8";

/*

Ctrl + F 导航

@keyframes
@media
::*
html/body/通用元素
通用工具类 class
导航栏、左右栏
导航栏和进度条
main、左右栏
左栏
页脚
侧边按钮-通用
侧边按钮-关闭侧边按钮
侧边按钮-关闭侧边按钮、回到顶部
侧边按钮-网易云音乐
侧边按钮-主题
首页
博客
友链

*/
/* ==================== @keyframes ==================== */
@keyframes 标记 {
	0% {
		background-color: mark;
		color: marktext;
	}
	75% {
		background-color: mark;
		color: marktext;
	}
	100% {
		background-color: inherit;
		color: inherit;
	}
}

/* ==================== @media ==================== */
/*
主题背景变量：浅色为缺省（含无偏好）。
深色由两处决定：@media（无 JS 时的兜底）与 html.深色 / html.浅色 类（global.js 写入，
自动模式也会被解析为具体类，保证 hljs 等只依赖类即可跟随）。
*/
:root {
	--bg-color: #eeeeee;
	--surface-1: #f7f7f7;
	--surface-2: #ffffff;
	--text-color: #222;
	--overlay: #8885;
	--overlay-strong: #888;
	--selection-bg: #0006;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #18171c;
		--surface-1: #222027;
		--surface-2: #2a2931;
		--text-color: #ccc;
		--overlay: #fff2;
		--overlay-strong: #888;
		--selection-bg: #fff5;
		color-scheme: dark;
	}
}
:root.深色 {
	--bg-color: #18171c;
	--surface-1: #222027;
	--surface-2: #2a2931;
	--text-color: #ccc;
	--overlay: #fff2;
	--overlay-strong: #888;
	--selection-bg: #fff5;
	color-scheme: dark;
}
:root.浅色 {
	--bg-color: #eeeeee;
	--surface-1: #f7f7f7;
	--surface-2: #ffffff;
	--text-color: #222;
	--overlay: #8885;
	--overlay-strong: #888;
	--selection-bg: #0006;
	color-scheme: light;
}
@media (forced-colors: active) {
	a:hover {
		outline: 2px solid #0000ff;
	}
	svg.fill {
		fill: #0000ff !important;
	}
	svg.stroke {
		stroke: #0000ff !important;
	}
}
@media (prefers-color-scheme: light) {
	@media (forced-colors: active) {
		a:hover {
			outline: 2px solid #0000ff;
		}
		svg.fill {
			fill: #0000ff !important;
		}
		svg.stroke {
			stroke: #0000ff !important;
		}
	}
}
@media (prefers-color-scheme: dark) {
	@media (forced-colors: active) {
		a:hover {
			outline: 2px solid #ffff00;
		}
		svg.fill {
			fill: #ffff00 !important;
		}
		svg.stroke {
			stroke: #ffff00 !important;
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::after {
		animation-duration: 0s !important;
		transition: none !important;
	}
	html {
		scroll-behavior: auto !important;
	}
}

/* ==================== ::* ==================== */
::selection {
	background-color: var(--selection-bg);
}

::-webkit-scrollbar {
	background-color: transparent;
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-thumb {
	background-color: var(--overlay);
	border-radius: var(--border-radius);
}
::-webkit-scrollbar-thumb:active {
	background-color: var(--overlay-strong);
}

/* ==================== html/body/通用元素 ==================== */
*:disabled {
	cursor: not-allowed;
}
*:focus-visible {
	outline: 2px dashed var(--link-color) !important;
}

html {
	/* 强调色缺省（中性）：未设置时回退为文字色/叠层色，自动跟随背景深浅 */
	--accent-color: var(--text-color);
	--accent-color-transparent: var(--overlay);
	--accent-text-color: var(--bg-color);
	--link-color: var(--text-color);
	--border-radius: 8px;
	--hostname: "dsy4567.icu";
	scroll-behavior: smooth;
}
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "Noto Sans SC", sans-serif;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

a,
svg {
	color: var(--link-color);
}
a {
	/* opacity: 0.9; */
	text-decoration: none;
}
a.无滤镜,
a.无滤镜:hover,
a.无滤镜:focus-visible {
	opacity: 1;
	text-decoration: none;
}
a:hover,
a:focus-visible {
	/* opacity: 1; */
	text-decoration: 1px underline var(--link-color);
	text-underline-offset: 0.2em;
}
a.外链::after {
	content: "";
}
a.外链:has(img, svg)::after {
	content: "";
}
a[title]::after {
	content: "" !important;
}

abbr {
	cursor: help;
	text-decoration: dashed underline var(--accent-color);
}

img,
video {
	background-color: var(--bg-color);
	border-radius: var(--border-radius);
}

spoiler {
	background-color: #000;
	color: #000;
	transition: 0.3s color;
}
/* 鼠标悬停，或检测到键盘导航（页面任意元素获得可见焦点）时显示内容 */
spoiler:hover,
body:has(:focus-visible) spoiler {
	color: #fff !important;
}

svg[data-icon] {
	background-color: var(--bg-color);
	border-radius: 50%;
}

section {
	background-color: var(--surface-1);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 16px 0px;
	margin: 8px;
	padding: 12px;
	word-break: break-word;
}
section section {
	background-color: var(--surface-2);
}
section h2 {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
}
section h2 svg {
	margin-right: 8px;
}
section img,
section video {
	max-width: 100%;
	height: auto;
}

blockquote {
	background-color: var(--surface-2);
	border: 1px solid var(--accent-color-transparent);
	border-left: 8px solid var(--accent-color-transparent);
	border-radius: var(--border-radius);
	margin: 4px 0;
	padding: 4px;
}
code {
	background-color: var(--overlay);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	font-family: "Source Code Pro", monospace;
	padding: 1px;
}
pre {
	background-color: transparent;
	color: var(--text-color);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	overflow: auto;
	padding: 4px;
}
pre > code {
	background-color: transparent;
	border: none;
	margin: 0;
	padding: 0;
}

hr {
	border: 1px solid var(--overlay);
}

/* ==================== 通用工具类 class ==================== */
.隐藏链接 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	overflow: hidden;
}
.隐藏链接:focus-visible {
	width: auto;
	height: auto;
	opacity: 1;
	z-index: 999;
}

.标记 {
	animation-duration: 3s;
	animation-name: 标记;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	transition:
		0.3s color,
		0.3s background-color;
}

.淡化 {
	opacity: 0.7;
}

.元数据 {
	display: block;
	width: 100%;
	border-top: 1px solid var(--overlay);
	font-style: italic;
	margin-top: 8px;
	padding-top: 8px;
}

.头像 {
	border-radius: 50%;
}

.特小尺寸 {
	width: 24px;
	height: 24px;
}
.小尺寸 {
	width: 32px;
	height: 32px;
}
.中尺寸 {
	width: 48px;
	height: 48px;
}
.大尺寸 {
	width: 128px;
	height: 128px;
}

.组 {
	display: flex;
	max-width: 100%;
	overflow: auto;
	padding: 16px;
}
.组 > section {
	max-width: 256px;
	min-width: 256px;
}

.横幅 {
	background-color: var(--surface-2);
	font-size: larger;
	padding: 2px;
	position: fixed;
	bottom: 0;
	text-align: center;
	width: 100%;
	z-index: 996;
}

div.通知 {
	background-color: var(--surface-1);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	box-shadow:
		rgba(0, 0, 0, 0.3) 0px 8px 16px 0px,
		rgba(0, 0, 0, 0.3) 0px 16px 64px 0px;
	opacity: 0;
	margin: 16px;
	padding: 8px;
	pointer-events: none;
	position: fixed;
	bottom: 32px;
	word-break: break-all;
	z-index: 1008;
}

.fill {
	fill: var(--link-color);
}
.stroke {
	stroke: var(--link-color);
}

/* ==================== 导航栏、左右栏 ==================== */
@media only screen and (max-width: 1000px) {
	#导航栏 > .右 > a svg {
		display: none;
	}
	main {
		flex-direction: column;
		padding-left: 0;
		padding-right: 0;
		width: 100% !important;
	}
	main > .左 {
		transform: translateY(48px) !important;
		max-height: 420px !important;
		scrollbar-width: none;
	}
	main > .左::after {
		/* border-top: 1px solid rgba(0,0,0,0.10); */
		content: "";
		display: block;
		position: sticky;
		width: calc(100% - 14px);
		bottom: 0;
		/* height: 16px; */
		margin-left: 7px;
		/* height: 1px; */
		margin-top: 0px;
		/* background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent); */
		pointer-events: none;
		box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 16px 4px;
	}
	main > .左::webkit-scrollbar {
		display: none;
	}
	main > .左,
	main > .右 {
		display: block !important;
		padding: 0 !important;
		position: unset !important;
		width: 100% !important;
	}
	main > #分界线 {
		display: none !important;
	}

	section {
		margin-top: unset;
		padding: 8px;
	}
	.左 > section,
	.右 > section {
		width: unset;
	}

	.标签 > div {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		overflow: auto;
		padding: 4px;
	}
	.标签 > div > * {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* ==================== 导航栏和进度条 ==================== */
#导航栏 {
	background-color: var(--surface-1);
	border-bottom: 1px solid transparent;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 16px 0px;
	color: var(--text-color);
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	position: sticky;
	top: 0;
	transition:
		0.3s background-color,
		0.3s transform,
		0.3s box-shadow;
	transform: translateY(0);
	width: 100%;
	height: 48px;
	z-index: 998;
}
body.顶部 #导航栏 {
	box-shadow: none;
}
body.隐藏导航栏 #导航栏 {
	transform: translateY(-49px);
	box-shadow: none;
}
#导航栏 > .左,
#导航栏 > .右 {
	display: flex;
}
#导航栏 > .左 > a,
#导航栏 > .右 > a {
	margin-left: 8px;
	margin-right: 8px;
}
#导航栏 a {
	color: var(--text-color);
	display: flex;
	text-decoration: none;
	align-items: center;
}
#导航栏 > .左 > .标题 {
	font-size: x-large;
	font-weight: 600;
}

.进度条外面 {
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1009;
}

/* ==================== main、左右栏 ==================== */
main {
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	width: calc(100vw - 90px);
	max-width: 1600px;
}
main > .左,
main > .右 {
	padding: 4px;
}

main > .左 {
	border-radius: var(--border-radius);
	overflow-y: auto;
	position: sticky;
	top: 0;
	transform: translateY(48px);
	width: calc(25% - 5px);
	max-height: calc(100vh - 69px);
}
body.隐藏导航栏 > main > .左 {
	transform: translateY(0);
	max-height: calc(100vh - 21px);
}

main > .右 {
	margin-top: 48px;
	width: calc(75% - 5px);
	min-height: 100vh;
}

main > #分界线 {
	background-color: var(--surface-1);
	border: 8px solid var(--bg-color);
	border-radius: var(--border-radius);
	margin-top: 96px;
	position: sticky;
	top: 0;
	width: 4px;
	height: calc(100vh - 16px);
}

main > .右 > section:nth-child(1),
main > .分界线 {
	margin-top: 64px;
}

/* ==================== 左栏 ==================== */

section#我 {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin-top: 64px;
}
section#我 > img {
	margin-bottom: -64px;
	position: relative;
	top: -64px;
}
section#我 > img:hover {
	transform: rotateY(180deg);
}

span#联系方式 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
span#联系方式 > * {
	margin-left: 4px;
	margin-right: 4px;
}
.rss {
	transform: translate(-4px, 2px) rotate(45deg);
}

#关注被关注码龄 {
	font-size: smaller;
}

#一言 {
	height: 3em;
	overflow-y: auto;
}

.标签 > div > * {
	color: var(--text-color);
	background-color: var(--accent-color-transparent);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	line-height: 3;
	margin-left: 8px;
	padding: 8px;
	white-space: nowrap;
}

/* ==================== 页脚 ==================== */

#copyright {
	background-color: var(--surface-1);
	border-top: 1px solid transparent;
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	padding-top: 16px;
	padding-bottom: 16px;
	margin-top: 32px;
	margin-bottom: 0;
	text-align: center;
	width: 100%;
}

/* ==================== 侧边按钮-通用 ==================== */
div#侧边按钮容器 {
	position: fixed;
	right: 0;
	z-index: 1007;
	top: calc(75vh - 33px * 4);
	transition-delay: 0;
}
div#侧边按钮容器 > * {
	background-color: var(--surface-2);
	box-shadow:
		rgba(0, 0, 0, 0.3) 0px 8px 16px 0px,
		rgba(0, 0, 0, 0.3) 0px 16px 64px 0px;
	border: 1px solid transparent;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	display: flex;
	opacity: 0.5;
	margin-top: 5px;
	padding: 4px;
	position: relative;
	transform: translateX(-4px);
}

div#侧边按钮容器 > .拥有更多选项 > .更多选项 {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	height: 32px;
}

/* ==================== 侧边按钮-关闭侧边按钮 ==================== */

/* ==================== 侧边按钮-关闭侧边按钮、回到顶部 ==================== */

body.顶部 div#侧边按钮容器 > #回到顶部,
div#侧边按钮容器 > #关闭侧边按钮 {
	animation-name: 延迟不可见;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
	pointer-events: none;
}

/* ==================== 侧边按钮-网易云音乐 ==================== */
div#侧边按钮容器 > .拥有更多选项#网易云音乐 #网易云音乐封面 {
	border-radius: 50%;
	display: none;
}

/* ==================== 侧边按钮-主题 ==================== */

/* ==================== 首页 ==================== */

/* ==================== 博客 ==================== */

article#main > .骨架屏占位 {
	display: none;
}
article#main:has(.骨架屏占位#正在加载文章提示) > .骨架屏占位 {
	display: flex;
	height: 25vh;
	justify-content: center;
	align-items: center;
}

/* ==================== 友链 ==================== */

#友链 > div > section > span {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#友链 > div > section > span > * {
	margin: 4px;
}

#友链 > div > section > span > img {
	border-radius: 50%;
	width: 16px;
	height: 16px;
}