内保持粗体 */
.blog--article .docs-layout strong code {
font-weight: 600;
}
/* ---- 列表 — 现代博客风格 ---- */
/* 无序列表：去除默认样式、32dp 左缩进、6dp 上下内边距 */
.blog--article .docs-layout ul {
list-style: none;
margin: 8px 0 20px 32px;
padding: 6px 0 6px 0;
}
/* 列表项：20dp 左 padding 给圆点留空间、15sp / 1.75 行高 */
.blog--article .docs-layout ul > li {
position: relative;
padding-left: 20px;
font-size: 15px;
line-height: 1.75;
margin-bottom: 8px;
color: rgba(0,0,0,0.76);
}
/* 无序列表圆点：7x7dp 实心圆、绝对定位左侧、40% 黑 */
.blog--article .docs-layout ul > li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(0,0,0,0.4);
}
/* 有序列表：CSS counter 自增编号、32dp 左缩进 */
.blog--article .docs-layout ol {
list-style: none;
margin: 8px 0 20px 32px;
padding: 6px 0 6px 0;
counter-reset: ol-counter;
}
/* 有序列表项：26dp 左 padding 给编号留空间、counter 自增 */
.blog--article .docs-layout ol > li {
position: relative;
padding-left: 26px;
font-size: 15px;
line-height: 1.75;
margin-bottom: 8px;
color: rgba(0,0,0,0.76);
counter-increment: ol-counter;
}
/* 有序列表编号：counter + "." 格式、绝对定位、14sp semibold、48% 黑 */
.blog--article .docs-layout ol > li::before {
content: counter(ol-counter) '.';
position: absolute;
left: 0;
top: 0;
font-size: 14px;
font-weight: 600;
color: rgba(0,0,0,0.48);
}
/* 通用 li 样式兜底 */
.blog--article .docs-layout li {
font-size: 15px;
line-height: 1.75;
color: rgba(0,0,0,0.76);
}
/* 嵌套列表更紧凑：4dp 顶部 / 2dp 底部、8dp 左缩进 */
.blog--article .docs-layout li > ul,
.blog--article .docs-layout li > ol {
margin: 4px 0 2px 8px;
padding: 2px 0;
}
/* 嵌套无序列表圆点更小：5x5dp、24% 黑 */
.blog--article .docs-layout li > ul > li::before {
width: 5px;
height: 5px;
top: 11px;
background: rgba(0,0,0,0.24);
}
/* ---- 链接 ---- */
/* 靛蓝色文字、下划线半透明、hover 下划线变实 */
.blog--article .docs-layout a {
color: #3f51b5;
text-decoration: none;
border-bottom: 1px solid rgba(63,81,181,0.3);
transition: border-color 0.2s;
}
.blog--article .docs-layout a:hover {
border-bottom-color: #3f51b5;
}
/* ---- 引用块 ---- */
/* 覆盖 MDL 全局 blockquote 样式 (material.min.css):
* MDL 默认: 24px/italic + 装饰引号 :before/:after
* 博客正文: 15px/normal + 左边线, 无装饰引号
*/
.blog--article .docs-layout blockquote {
margin: 0 0 16px 0;
padding: 12px 16px 12px 20px;
border-left: 3px solid #3f51b5;
background: rgba(63,81,181,0.04);
color: rgba(0,0,0,0.66);
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.75;
letter-spacing: normal;
position: relative;
}
/* 隐藏 MDL 全局装饰引号 */
.blog--article .docs-layout blockquote:before,
.blog--article .docs-layout blockquote:after {
display: none;
}
/* 引用块内段落：8dp 底部间距 */
.blog--article .docs-layout blockquote p {
margin: 0 0 8px 0;
}
/* 引用块末段无底部间距 */
.blog--article .docs-layout blockquote p:last-child {
margin-bottom: 0;
}
/* ---- 图片 ---- */
/* 全宽上限、自适应高度、4dp 圆角、居中显示、8dp 上下间距 */
.blog--article .docs-layout img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 8px auto;
display: block;
}
/* ---- 表格 ---- */
/* 全宽、边框合并、14sp */
.blog--article .docs-layout table {
width: 100%;
border-collapse: collapse;
margin: 0 0 16px 0;
font-size: 14px;
}
/* 表头/单元格：8+12dp 内边距、1dp 边框、左对齐 */
.blog--article .docs-layout th,
.blog--article .docs-layout td {
padding: 8px 12px;
border: 1px solid rgba(0,0,0,0.1);
text-align: left;
}
/* 表头：3% 黑背景、粗体 */
.blog--article .docs-layout th {
background: rgba(0,0,0,0.03);
font-weight: 600;
}
/* 偶数行：2% 黑背景斑马纹 */
.blog--article .docs-layout tr:nth-child(even) {
background: rgba(0,0,0,0.02);
}
/* ---- 水平分割线 ---- */
/* 1dp 灰色顶边框、24dp 上下间距 */
.blog--article .docs-layout hr {
border: none;
border-top: 1px solid rgba(0,0,0,0.08);
margin: 24px 0;
}
/* ---- code-with-text 代码块排版 ---- */
/* 居中显示、最大 85% 宽、等宽字体、8dp 上 + 15dp 左右内边距、13sp */
.blog--article .docs-layout .code-with-text {
margin: 12px auto 20px;
max-width: 85%;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Monaco, monospace;
padding: 8px 15px 0;
font-size: 13px;
}
/* 代码区 与标题文字左对齐 — 负 margin 消除容器 padding */
.blog--article .docs-layout .code-with-text pre {
margin: 6px -15px 0;
}
/* 代码内容内边距 — 与标题文字对齐（15dp） */
.blog--article .docs-layout .code-with-text pre[class*=language-] code {
padding: 12px 15px;
}
/* 文章首个标题不需要上边距 */
.blog--article .docs-layout > h1:first-child,
.blog--article .docs-layout > h2:first-child,
.blog--article .docs-layout > h3:first-child,
.blog--article .docs-layout > h4:first-child {
margin-top: 0;
}
/* ==============================================================
暗黑模式 — MD1 Dark Theme 规范
==============================================================
触发方式:
html[data-mode="dark"] — 手动暗黑模式
html[data-mode="auto"] + @media (prefers-color-scheme: dark) — 跟随系统
MD1 调色板:
背景 #303030, 卡片 #424242
白文字: primary 100%, secondary 70%, hint 50%, divider 12%
============================================================== */
/* ---- 手动暗黑模式 ---- */
/* 背景 → #303030 纯色，去除背景图
暗色模式下全屏背景图过于明亮，直接用纯色深灰替代 */
html[data-mode="dark"] body::before {
background-image: none !important;
background-color: #303030;
}
/* 卡片 → #424242 */
html[data-mode="dark"] .mdl-card {
background: #424242;
}
/* 卡片封面灰色文字 → 100% 白 */
html[data-mode="dark"] .mdl-card__media.mdl-color-text--grey-50 {
color: rgba(255,255,255,1);
}
/* 卡片封面白色背景 → #424242 */
html[data-mode="dark"] .mdl-card__media.mdl-color--white {
background: #424242 !important;
}
/* 侧边栏封面区灰色文字 (如 "发现生活中的美") → 87% 白
MDL .mdl-color-text--grey-600 强制设置 #757575，需 !important 覆盖
原值 70% 在 #424242 背景上对比度不足，提高至 87% */
html[data-mode="dark"] .mdl-card__media.mdl-color-text--grey-600 {
color: rgba(255,255,255,0.87) !important;
}
/* 卡片支撑文本/摘要 → 80% 白
MDL .mdl-color-text--grey-600 强制设置 #757575，需 !important 覆盖
同时覆盖 .blog:not(.blog--article) 下的首页卡片摘要和 meta 区
原值 70% 在 #424242 背景上对比度不足，提高至 80% */
html[data-mode="dark"] .mdl-card__supporting-text,
html[data-mode="dark"] .mdl-card__supporting-text.meta,
html[data-mode="dark"] .mdl-card__supporting-text.meta.mdl-color-text--grey-600,
html[data-mode="dark"] .mdl-card__supporting-text.mdl-color-text--grey-600 {
color: rgba(255,255,255,0.80) !important;
}
/* 侧边栏导航菜单 → 暗色模式适配 */
html[data-mode="dark"] .sidebar-card .mdl-menu {
background-color: #424242;
}
html[data-mode="dark"] .sidebar-card .mdl-menu__item {
color: rgba(255,255,255,0.87);
}
html[data-mode="dark"] .sidebar-card .mdl-menu__item:hover {
background-color: rgba(255,255,255,0.08);
}
html[data-mode="dark"] .sidebar-card .mdl-menu__item .mdl-menu__item::after {
background-color: rgba(255,255,255,0.06);
}
/* 首页卡片摘要区之间的分割线 → 12% 白 */
html[data-mode="dark"] .blog:not(.blog--article) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
border-top-color: rgba(255,255,255,0.12);
}
/* 侧边栏底部支撑区背景 → 深色 */
html[data-mode="dark"] .blog .sidebar-card .mdl-card__supporting-text {
background-color: #353535;
}
/* 迷你 logo 底色 → 深色 */
html[data-mode="dark"] .blog .minilogo {
background-color: #353535;
}
/* 文章 meta → 50% 白 */
html[data-mode="dark"] .blog--article .meta {
color: rgba(255,255,255,0.50);
}
/* 文章正文区 → 100% 白 */
html[data-mode="dark"] .blog--article .docs-layout {
color: rgba(255,255,255,1);
}
/* 文章段落 → 87% 白 */
html[data-mode="dark"] .blog--article .docs-layout p {
color: rgba(255,255,255,0.87);
}
/* 文章标题 h1-h6 → 白色系 */
html[data-mode="dark"] .blog--article .docs-layout h1,
html[data-mode="dark"] .blog--article .docs-layout h2,
html[data-mode="dark"] .blog--article .docs-layout h3,
html[data-mode="dark"] .blog--article .docs-layout h4 {
color: rgba(255,255,255,1);
}
html[data-mode="dark"] .blog--article .docs-layout h5 {
color: rgba(255,255,255,0.80);
}
html[data-mode="dark"] .blog--article .docs-layout h6 {
color: rgba(255,255,255,0.65);
}
/* h1 底部分割线 → 12% 白 */
html[data-mode="dark"] .blog--article .docs-layout h1 {
border-bottom-color: rgba(255,255,255,0.12);
}
/* 文章链接 → MD1 dark 链接蓝色 #82b1ff + 半透明下划线 */
html[data-mode="dark"] .blog--article .docs-layout a {
color: #82b1ff;
border-bottom-color: rgba(130,177,255,0.3);
}
/* 行内 code → 深色背景 + 浅红色文字 */
html[data-mode="dark"] .blog--article .docs-layout code {
background: rgba(255,255,255,0.10);
color: #f97583;
}
/* 列表项文字 → 80% 白 */
html[data-mode="dark"] .blog--article .docs-layout li {
color: rgba(255,255,255,0.80);
}
html[data-mode="dark"] .blog--article .docs-layout ul > li,
html[data-mode="dark"] .blog--article .docs-layout ol > li {
color: rgba(255,255,255,0.80);
}
/* 无序列表圆点 → 40% 白 / 嵌套 24% 白 */
html[data-mode="dark"] .blog--article .docs-layout ul > li::before {
background: rgba(255,255,255,0.40);
}
html[data-mode="dark"] .blog--article .docs-layout li > ul > li::before {
background: rgba(255,255,255,0.24);
}
/* 有序列表编号 → 50% 白 */
html[data-mode="dark"] .blog--article .docs-layout ol > li::before {
color: rgba(255,255,255,0.50);
}
/* 引用块 → 加强背景 + 30% 白左边框、70% 白文字 */
html[data-mode="dark"] .blog--article blockquote {
border-left-color: rgba(255,255,255,0.30);
background: rgba(63,81,181,0.12);
color: rgba(255,255,255,0.70);
}
/* 表格 → 12% 白边框、5% 白表头、3% 白斑马纹 */
html[data-mode="dark"] .blog--article .docs-layout th,
html[data-mode="dark"] .blog--article .docs-layout td {
border-color: rgba(255,255,255,0.12);
}
html[data-mode="dark"] .blog--article .docs-layout th {
background: rgba(255,255,255,0.05);
}
html[data-mode="dark"] .blog--article .docs-layout tr:nth-child(even) {
background: rgba(255,255,255,0.03);
}
/* 水平分割线 → 12% 白 */
html[data-mode="dark"] .blog--article .docs-layout hr {
border-top-color: rgba(255,255,255,0.12);
}
/* code-with-text 代码块：#1e1e1e 背景、87% 白文字、12% 白边框 */
html[data-mode="dark"] .blog--article .code-with-text {
background: #1e1e1e;
color: rgba(255,255,255,0.87);
border-color: rgba(255,255,255,0.12);
}
/* 代码标签：54% 白、12% 白底部分割线 */
html[data-mode="dark"] .blog--article .code-with-text .code-label {
color: rgba(255,255,255,0.54);
border-bottom-color: rgba(255,255,255,0.12);
}
/* 代码区 pre：#1e1e1e 背景 */
html[data-mode="dark"] .blog--article .code-with-text pre {
background: #1e1e1e;
}
/* 文章导航按钮：70% 白 / hover 95% 白 */
html[data-mode="dark"] .article-nav__btn {
color: rgba(255,255,255,0.70);
}
html[data-mode="dark"] .article-nav__btn:hover {
color: rgba(255,255,255,0.95);
}
/* 返回按钮：纯白 */
html[data-mode="dark"] .back-btn {
color: #fff;
}
/* 页脚：#212121 深灰背景 + 70% 白文字 */
html[data-mode="dark"] .mdl-mini-footer {
background: #212121;
color: rgba(255,255,255,0.70);
}
}
/* 侧边栏头像：85% 不透明度 */
html[data-mode="dark"] .sidebar-card img {
opacity: 0.85;
}
/* 文章卡片封面：保持 #37474f 背景色 */
html[data-mode="dark"] .card-article .mdl-card__media {
background-color: #37474f;
}
/* 封面标题链接：95% 白 */
html[data-mode="dark"] .card-article .mdl-card__media h3 a {
color: rgba(255,255,255,0.95);
}
/* ---- 跟随系统自动暗黑模式 ---- */
/* 与手动暗黑相同的样式，选择器改为 html[data-mode="auto"] */
@media (prefers-color-scheme: dark) {
html[data-mode="auto"] body::before {
background-image: none !important;
background-color: #303030;
}
html[data-mode="auto"] .mdl-card {
background: #424242;
}
html[data-mode="auto"] .mdl-card__media.mdl-color-text--grey-50 {
color: rgba(255,255,255,1);
}
html[data-mode="auto"] .mdl-card__media.mdl-color--white {
background: #424242 !important;
}
html[data-mode="auto"] .mdl-card__media.mdl-color-text--grey-600 {
color: rgba(255,255,255,0.87) !important;
}
html[data-mode="auto"] .mdl-card__supporting-text,
html[data-mode="auto"] .mdl-card__supporting-text.meta,
html[data-mode="auto"] .mdl-card__supporting-text.meta.mdl-color-text--grey-600,
html[data-mode="auto"] .mdl-card__supporting-text.mdl-color-text--grey-600 {
color: rgba(255,255,255,0.80) !important;
}
html[data-mode="auto"] .blog:not(.blog--article) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
border-top-color: rgba(255,255,255,0.12);
}
/* 侧边栏导航菜单暗色适配 */
html[data-mode="auto"] .sidebar-card .mdl-menu {
background-color: #424242;
}
html[data-mode="auto"] .sidebar-card .mdl-menu__item {
color: rgba(255,255,255,0.87);
}
html[data-mode="auto"] .sidebar-card .mdl-menu__item:hover {
background-color: rgba(255,255,255,0.08);
}
html[data-mode="auto"] .blog .sidebar-card .mdl-card__supporting-text {
background-color: #353535;
}
html[data-mode="auto"] .blog .minilogo {
background-color: #353535;
}
html[data-mode="auto"] .blog--article .meta {
color: rgba(255,255,255,0.50);
}
html[data-mode="auto"] .blog--article .docs-layout {
color: rgba(255,255,255,1);
}
html[data-mode="auto"] .blog--article .docs-layout p {
color: rgba(255,255,255,0.87);
}
html[data-mode="auto"] .blog--article .docs-layout h1,
html[data-mode="auto"] .blog--article .docs-layout h2,
html[data-mode="auto"] .blog--article .docs-layout h3,
html[data-mode="auto"] .blog--article .docs-layout h4 {
color: rgba(255,255,255,1);
}
html[data-mode="auto"] .blog--article .docs-layout h5 {
color: rgba(255,255,255,0.80);
}
html[data-mode="auto"] .blog--article .docs-layout h6 {
color: rgba(255,255,255,0.65);
}
html[data-mode="auto"] .blog--article .docs-layout h1 {
border-bottom-color: rgba(255,255,255,0.12);
}
html[data-mode="auto"] .blog--article .docs-layout a {
color: #82b1ff;
border-bottom-color: rgba(130,177,255,0.3);
}
html[data-mode="auto"] .blog--article .docs-layout code {
background: rgba(255,255,255,0.10);
color: #f97583;
}
html[data-mode="auto"] .blog--article .docs-layout li {
color: rgba(255,255,255,0.80);
}
html[data-mode="auto"] .blog--article .docs-layout ul > li,
html[data-mode="auto"] .blog--article .docs-layout ol > li {
color: rgba(255,255,255,0.80);
}
html[data-mode="auto"] .blog--article .docs-layout ul > li::before {
background: rgba(255,255,255,0.40);
}
html[data-mode="auto"] .blog--article .docs-layout li > ul > li::before {
background: rgba(255,255,255,0.24);
}
html[data-mode="auto"] .blog--article .docs-layout ol > li::before {
color: rgba(255,255,255,0.50);
}
html[data-mode="auto"] .blog--article blockquote {
border-left-color: rgba(255,255,255,0.30);
background: rgba(63,81,181,0.12);
color: rgba(255,255,255,0.70);
}
html[data-mode="auto"] .blog--article .docs-layout th,
html[data-mode="auto"] .blog--article .docs-layout td {
border-color: rgba(255,255,255,0.12);
}
html[data-mode="auto"] .blog--article .docs-layout th {
background: rgba(255,255,255,0.05);
}
html[data-mode="auto"] .blog--article .docs-layout tr:nth-child(even) {
background: rgba(255,255,255,0.03);
}
html[data-mode="auto"] .blog--article .docs-layout hr {
border-top-color: rgba(255,255,255,0.12);
}
html[data-mode="auto"] .blog--article .code-with-text {
background: #1e1e1e;
color: rgba(255,255,255,0.87);
border-color: rgba(255,255,255,0.12);
}
html[data-mode="auto"] .blog--article .code-with-text .code-label {
color: rgba(255,255,255,0.54);
border-bottom-color: rgba(255,255,255,0.12);
}
html[data-mode="auto"] .blog--article .code-with-text pre {
background: #1e1e1e;
}
html[data-mode="auto"] .article-nav__btn {
color: rgba(255,255,255,0.70);
}
html[data-mode="auto"] .article-nav__btn:hover {
color: rgba(255,255,255,0.95);
}
html[data-mode="auto"] .back-btn {
color: #fff;
}
html[data-mode="auto"] .mdl-mini-footer {
background: #212121;
color: rgba(255,255,255,0.70);
}
html[data-mode="auto"] .sidebar-card img {
opacity: 0.85;
}
html[data-mode="auto"] .card-article .mdl-card__media {
background-color: #37474f;
}
html[data-mode="auto"] .card-article .mdl-card__media h3 a {
color: rgba(255,255,255,0.95);
}
}
/* ==============================================================
MD1 Switch — 页脚暗色模式切换
==============================================================
规范: MD1 Light Switch
Thumb On: Swatch 500 100%; Track On: Swatch 500 50%
Thumb Off: #FAFAFA + 2dp border; Track Off: #000 38% opacity
颜色跟随 --md-primary 变量，随主题切换动态调整
============================================================== */
/* Switch 外层容器 — 与 footer-icon-btn 同高 36dp，垂直居中 */
.blog-dark-switch {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
height: 36px;
padding: 0 8px;
border-radius: 18px;
transition: background 0.15s ease;
}
.blog-dark-switch:hover {
background: rgba(0,0,0,0.04);
}
/* Switch 标签文字 — 12sp 54% 黑 */
.blog-dark-switch__label {
font-size: 12px;
color: rgba(0,0,0,0.54);
line-height: 1;
letter-spacing: 0.4px;
white-space: nowrap;
}
/* Switch 轨道 — MD1 spec: 36×14dp、7dp 圆角 */
.blog-dark-switch__track {
position: relative;
width: 36px;
height: 14px;
border-radius: 7px;
background: rgba(0,0,0,0.38);
transition: background 0.15s ease;
flex-shrink: 0;
}
/* Switch 滑块 (thumb) — MD1 spec: Off/On resting 20dp, 无 border
定位：left=0 贴 track 左边缘, top=-3dp 垂直居中于 14dp track
travel 距离 = 36 - 20 = 16dp */
.blog-dark-switch__thumb {
position: absolute;
top: -3px;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fafafa;
box-shadow: 0 1px 3px rgba(0,0,0,0.26);
transition: transform 0.15s ease, background 0.15s ease;
}
/* === On 状态 — MD1 spec: thumb 20dp 右移 16dp 到 track 右端 === */
.blog-dark-switch input:checked + .blog-dark-switch__track {
background: color-mix(in srgb, var(--md-primary) 50%, transparent); /* Swatch 500 × 50% */
}
.blog-dark-switch input:checked + .blog-dark-switch__track .blog-dark-switch__thumb {
transform: translateX(16px);
background: var(--md-primary); /* Swatch 500 100% */
}
/* === Ripple 容器 — MDL 规范：48x48dp 圆形，跟随 thumb 位置 === */
/* Off: 以 thumb 中心为圆心 (thumb left=0, width=20, 中心=10)
48dp 圆的 top = thumb中心(10-3) - 24 = -17dp, left = 10-24 = -14dp */
.blog-dark-switch__ripple-container {
position: absolute;
z-index: 2;
top: -17px;
left: -14px;
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
-webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000);
transition: left 0.4s step-end;
}
/* On: ripple 跟随 thumb 右移 — thumb 中心 = 16+10=26dp, 26-24=2dp */
.blog-dark-switch input:checked + .blog-dark-switch__track .blog-dark-switch__ripple-container {
left: 2px;
}
/* Ripple 背景色跟随主题 */
.blog-dark-switch__ripple-container .mdl-ripple {
background: var(--md-primary);
}
/* 隐藏原生 checkbox */
.blog-dark-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* === 暗色模式下的 Switch + 图标按钮适配 === */
/* Switch Off 文字 → 70% 白 */
html[data-mode="dark"] .blog-dark-switch__label {
color: rgba(255,255,255,0.70);
}
.blog-dark-switch:hover {
background: rgba(255,255,255,0.04);
}
/* Switch Off Track → 30% 白（仅 unchecked） */
html[data-mode="dark"] .blog-dark-switch:not(:has(input:checked)) .blog-dark-switch__track {
background: rgba(255,255,255,0.30);
}
/* Switch Off Thumb → #bdbdbd（仅 unchecked，MD1 无 border） */
html[data-mode="dark"] .blog-dark-switch:not(:has(input:checked)) .blog-dark-switch__thumb {
background: #bdbdbd;
}
/* Switch On Track 暗色模式 — primary 50%（覆盖 Off 规则） */
html[data-mode="dark"] .blog-dark-switch:has(input:checked) .blog-dark-switch__track {
background: color-mix(in srgb, var(--md-primary) 50%, transparent);
}
/* Switch On Thumb 暗色模式 — primary 100% */
html[data-mode="dark"] .blog-dark-switch:has(input:checked) .blog-dark-switch__thumb {
background: var(--md-primary);
}
/* 图标按钮暗色适配 */
html[data-mode="dark"] .footer-icon-btn {
color: rgba(255,255,255,0.70);
}
html[data-mode="dark"] .footer-icon-btn:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.95);
}
/* === auto 模式 — 同 dark 逻辑 === */
html[data-mode="auto"] .blog-dark-switch__label {
color: rgba(255,255,255,0.70);
}
html[data-mode="auto"] .blog-dark-switch:not(:has(input:checked)) .blog-dark-switch__track {
background: rgba(255,255,255,0.30);
}
html[data-mode="auto"] .blog-dark-switch:not(:has(input:checked)) .blog-dark-switch__thumb {
background: #bdbdbd;
}
/* Switch On Track/Thumb auto 模式 — primary 色跟随 */
html[data-mode="auto"] .blog-dark-switch:has(input:checked) .blog-dark-switch__track {
background: color-mix(in srgb, var(--md-primary) 50%, transparent);
}
html[data-mode="auto"] .blog-dark-switch:has(input:checked) .blog-dark-switch__thumb {
background: var(--md-primary);
}
html[data-mode="auto"] .footer-icon-btn {
color: rgba(255,255,255,0.70);
}
html[data-mode="auto"] .footer-icon-btn:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.95);
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"] .blog-dark-switch__label {
color: rgba(255,255,255,0.70);
}
html[data-mode="auto"] .blog-dark-switch:not(:has(input:checked)) .blog-dark-switch__track {
background: rgba(255,255,255,0.30);
}
html[data-mode="auto"] .blog-dark-switch:not(:has(input:checked)) .blog-dark-switch__thumb {
background: #bdbdbd;
}
/* Switch On Track/Thumb auto 模式 @media dark — primary 色跟随 */
html[data-mode="auto"] .blog-dark-switch:has(input:checked) .blog-dark-switch__track {
background: color-mix(in srgb, var(--md-primary) 50%, transparent);
}
html[data-mode="auto"] .blog-dark-switch:has(input:checked) .blog-dark-switch__thumb {
background: var(--md-primary);
}
html[data-mode="auto"] .footer-icon-btn {
color: rgba(255,255,255,0.70);
}
html[data-mode="auto"] .footer-icon-btn:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.95);
}
}