/* ========================================================= 深色模式样式 (Dark Mode) 切换开关：当 带有 data-theme="dark" 时生效 ========================================================= */ html[data-theme="dark"] { --page: #0f1722; --panel: #131c2b; --ink: #e5edf6; --muted: #8a95a8; --line: #243042; --header: #0d1624; --green: #31d875; --green-strong: #34e07d; --red: #f2635f; --shadow: 0 24px 68px rgba(0, 0, 0, .45); color-scheme: dark; } /* 页面主体背景 */ html[data-theme="dark"] { background: #0b111c; } html[data-theme="dark"] body { background: linear-gradient(180deg, #0d1624 0, #131c2b 240px, #0b111c 240px, #0d1420 100%); color: var(--ink); } /* 顶部装饰层 */ html[data-theme="dark"] body:before { background: linear-gradient(180deg, rgba(7, 14, 27, .98) 0, rgba(13, 22, 36, .96) 62%, rgba(13, 22, 36, .1) 100%), linear-gradient(115deg, transparent 0 55%, rgba(49, 216, 117, .14) 55.15%, rgba(56, 189, 248, .1) 66%, transparent 66.15%), repeating-linear-gradient(100deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 28px); height: 226px; } html[data-theme="dark"] body:after { background: linear-gradient(180deg, transparent 0 212px, rgba(19, 28, 43, .5) 212px, transparent 560px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 76px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 76px); } /* 头部区 */ html[data-theme="dark"] #header { color: #d9fbe7; } html[data-theme="dark"] #header .logo { color: #fff; } html[data-theme="dark"] #header .navi a { color: #dbe6f2; border-color: rgba(226, 232, 240, .22); } /* 主面板卡片 */ html[data-theme="dark"] #uptime { background: rgba(19, 28, 43, .94); border-color: rgba(148, 163, 184, .22); box-shadow: 0 24px 68px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .05) inset; } /* 概览区 */ html[data-theme="dark"] #uptime .overview { background: linear-gradient(180deg, #17202f 0, #141d2b 100%); } html[data-theme="dark"] #uptime .overview-item { border-color: var(--line); } /* 站点行分隔线 */ html[data-theme="dark"] #uptime .site { border-color: var(--line); } /* 故障状态行，更加柔和 */ html[data-theme="dark"] #uptime .site.status-down { background: linear-gradient(90deg, rgba(239, 68, 68, .12), transparent 52%); } html[data-theme="dark"] #uptime .site.status-down .name { color: #f87171; } /* 站点外链图标 */ html[data-theme="dark"] #uptime .site .meta .link { background-color: rgba(255, 255, 255, .08); border-color: rgba(148, 163, 184, .3); filter: invert(1); } html[data-theme="dark"] #uptime .site .meta .link:hover { background-color: rgba(255, 255, 255, .14); } /* 加载骨架动画 */ html[data-theme="dark"] #uptime .site.site-loading { background: linear-gradient(180deg, rgba(21, 31, 48, .98), rgba(17, 26, 41, .96)); } html[data-theme="dark"] #uptime .overview.overview-loading .overview-label, html[data-theme="dark"] #uptime .overview.overview-loading .overview-value, html[data-theme="dark"] #uptime .site.site-loading .meta .name, html[data-theme="dark"] #uptime .site.site-loading .meta .status, html[data-theme="dark"] #uptime .site.site-loading .summary span, html[data-theme="dark"] #uptime .site.site-loading .timeline i { background: linear-gradient(90deg, #1b2536 0, #28344a 46%, #1b2536 100%); background-size: 220% 100%; color: transparent; } /* 底部 */ html[data-theme="dark"] #footer a:hover { color: #34e07d; } /* ========================================================= 右下角主题切换按钮 图标采用内联 SVG，图标随主题切换显示/隐藏 按钮不透明背景，并带月/日图标 ========================================================= */ #themeToggle { align-items: center; background: rgba(19, 28, 43, .92); border: 1px solid rgba(148, 163, 184, .28); border-radius: 50%; bottom: 22px; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); cursor: pointer; display: flex; height: 46px; justify-content: center; position: fixed; right: 22px; transition: background .2s ease, border-color .2s ease, transform .15s ease; width: 46px; z-index: 9999; } #themeToggle:hover { transform: translateY(-2px); } #themeToggle svg { height: 22px; width: 22px; } #themeToggle .icon-sun { color: #fbbf24; } #themeToggle .icon-moon { color: #cbd5e1; } #themeToggle .icon-sun { display: none; } #themeToggle .icon-moon { display: block; } html[data-theme="dark"] #themeToggle { background: rgba(28, 39, 58, .95); border-color: rgba(148, 163, 184, .35); } html[data-theme="dark"] #themeToggle .icon-sun { display: block; } html[data-theme="dark"] #themeToggle .icon-moon { display: none; } @media (max-width: 600px) { #themeToggle { bottom: 16px; height: 42px; right: 16px; width: 42px; } #themeToggle svg { height: 19px; width: 19px; } }