171 lines
9.4 KiB
CSS
171 lines
9.4 KiB
CSS
/* ============ 基础与主题变量 ============ */
|
|
* { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; }
|
|
input, textarea, [contenteditable] { -webkit-user-select:text; user-select:text; }
|
|
html, body { width:100%; height:100%; overflow:hidden; }
|
|
body {
|
|
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
|
|
font-size:13px; color:var(--text); background:#000;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
button { font-family:inherit; font-size:inherit; color:inherit; background:none; border:none; cursor:pointer; }
|
|
button:disabled { cursor:default; opacity:.45; }
|
|
input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
|
|
img { -webkit-user-drag:none; }
|
|
::-webkit-scrollbar { width:8px; height:8px; }
|
|
::-webkit-scrollbar-thumb { background:rgba(128,128,128,.45); border-radius:4px; }
|
|
::-webkit-scrollbar-track { background:transparent; }
|
|
|
|
:root {
|
|
--accent:#0a84ff;
|
|
--danger:#ff453a;
|
|
--warning:#ff9f0a;
|
|
--success:#32d74b;
|
|
/* 浅色 */
|
|
--text:#1d1d1f; --text2:#6e6e73; --text3:#aeaeb2;
|
|
--window-bg:rgba(246,246,248,.86); --window-bg-solid:#f6f6f8;
|
|
--content-bg:#ffffff; --sidebar-bg:rgba(240,240,245,.72);
|
|
--card-bg:rgba(255,255,255,.72); --card-border:rgba(0,0,0,.08);
|
|
--border:rgba(0,0,0,.12); --separator:rgba(0,0,0,.09);
|
|
--hover:rgba(0,0,0,.055); --active:rgba(0,0,0,.1);
|
|
--selection:rgba(10,132,255,.28);
|
|
--menubar-bg:rgba(255,255,255,.5);
|
|
--dock-bg:rgba(255,255,255,.42);
|
|
--input-bg:#ffffff;
|
|
--shadow-win:0 22px 70px rgba(0,0,0,.34), 0 0 0 .5px rgba(0,0,0,.16);
|
|
--shadow-pop:0 10px 34px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.1);
|
|
--blur:blur(28px) saturate(180%);
|
|
--glass-blur:blur(20px) saturate(160%);
|
|
}
|
|
body.dark {
|
|
--text:#f5f5f7; --text2:#98989d; --text3:#636366;
|
|
--window-bg:rgba(38,38,42,.84); --window-bg-solid:#26262a;
|
|
--content-bg:#1e1e20; --sidebar-bg:rgba(34,34,38,.72);
|
|
--card-bg:rgba(44,44,48,.72); --card-border:rgba(255,255,255,.1);
|
|
--border:rgba(255,255,255,.16); --separator:rgba(255,255,255,.1);
|
|
--hover:rgba(255,255,255,.08); --active:rgba(255,255,255,.14);
|
|
--selection:rgba(10,132,255,.42);
|
|
--menubar-bg:rgba(28,28,30,.5);
|
|
--dock-bg:rgba(40,40,44,.44);
|
|
--input-bg:#2c2c2e;
|
|
--shadow-win:0 22px 70px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.14);
|
|
--shadow-pop:0 10px 34px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.12);
|
|
}
|
|
body.reduce-transparency {
|
|
--window-bg:var(--window-bg-solid); --menubar-bg:var(--window-bg-solid);
|
|
--dock-bg:var(--window-bg-solid); --sidebar-bg:var(--window-bg-solid);
|
|
--card-bg:var(--window-bg-solid); --blur:none; --glass-blur:none;
|
|
}
|
|
body.increase-contrast { --border:rgba(0,0,0,.4); --separator:rgba(0,0,0,.3); }
|
|
body.increase-contrast.dark { --border:rgba(255,255,255,.45); --separator:rgba(255,255,255,.35); }
|
|
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
|
|
animation-duration:.001s !important; transition-duration:.06s !important;
|
|
}
|
|
|
|
.hidden { display:none !important; }
|
|
|
|
/* ============ 全局遮罩（亮度/夜览） ============ */
|
|
#overlay-brightness, #overlay-nightshift {
|
|
position:fixed; inset:0; pointer-events:none; z-index:9000;
|
|
}
|
|
#overlay-brightness { background:#000; opacity:0; transition:opacity .25s; }
|
|
#overlay-nightshift { background:#ff9f0a; opacity:0; mix-blend-mode:multiply; transition:opacity .4s; }
|
|
|
|
/* ============ 开机画面 ============ */
|
|
#bootscreen {
|
|
position:fixed; inset:0; background:#000; z-index:10000;
|
|
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:64px;
|
|
}
|
|
#boot-apple { opacity:0; animation:bootFade .9s ease .15s forwards; }
|
|
@keyframes bootFade { to { opacity:1; } }
|
|
#boot-progress { width:220px; height:5px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden; opacity:0; animation:bootFade .5s ease .5s forwards; }
|
|
#boot-progress-fill { width:0%; height:100%; border-radius:3px; background:#e8e8ea; }
|
|
|
|
/* ============ 关机画面 ============ */
|
|
#poweroff {
|
|
position:fixed; inset:0; background:#000; z-index:10000; cursor:pointer;
|
|
display:flex; align-items:center; justify-content:center;
|
|
}
|
|
#poweroff-text { color:#8e8e93; font-size:22px; text-align:center; line-height:2; }
|
|
#poweroff-text span { font-size:14px; color:#48484a; }
|
|
|
|
/* ============ 锁屏 ============ */
|
|
#lockscreen { position:fixed; inset:0; z-index:9500; overflow:hidden; cursor:pointer; }
|
|
#lockscreen-bg {
|
|
position:absolute; inset:-40px; background-size:cover; background-position:center;
|
|
filter:blur(38px) brightness(.62) saturate(1.15);
|
|
transform:scale(1.05);
|
|
}
|
|
#lockscreen-main { position:absolute; top:9%; width:100%; text-align:center; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); }
|
|
#lock-date { font-size:22px; font-weight:600; letter-spacing:.5px; }
|
|
#lock-time { font-size:96px; font-weight:700; letter-spacing:-2px; margin-top:2px; font-variant-numeric:tabular-nums; }
|
|
#lockscreen-user {
|
|
position:absolute; bottom:10%; width:100%; display:flex; flex-direction:column; align-items:center; gap:10px;
|
|
color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.4);
|
|
}
|
|
#lock-avatar { width:88px; height:88px; border-radius:50%; object-fit:cover; box-shadow:0 4px 22px rgba(0,0,0,.4); background:#666; }
|
|
#lock-username { font-size:17px; font-weight:600; }
|
|
#lock-hint { font-size:12.5px; color:rgba(255,255,255,.82); }
|
|
#lock-error { font-size:12.5px; color:#ffd2cf; background:rgba(255,69,58,.35); padding:4px 12px; border-radius:10px; }
|
|
#lock-password-row input {
|
|
width:190px; padding:7px 14px; border-radius:16px; border:none; outline:none; text-align:center;
|
|
background:rgba(255,255,255,.32); color:#fff; font-size:13px; backdrop-filter:blur(8px);
|
|
}
|
|
#lock-password-row input::placeholder { color:rgba(255,255,255,.75); }
|
|
#lockscreen.unlocking { animation:lockOut .45s ease forwards; }
|
|
@keyframes lockOut { to { opacity:0; transform:scale(1.04); } }
|
|
#lockscreen.shake #lockscreen-user { animation:shake .4s; }
|
|
@keyframes shake { 20%{transform:translateX(-10px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }
|
|
|
|
/* ============ 屏保 ============ */
|
|
#screensaver { position:fixed; inset:0; z-index:9600; background:#000; cursor:none; }
|
|
#screensaver .ss-clock {
|
|
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;
|
|
}
|
|
#screensaver .ss-clock .t { font-size:130px; font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:-3px; }
|
|
#screensaver .ss-clock .d { font-size:22px; color:#bbb; margin-top:8px; }
|
|
#screensaver .ss-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; }
|
|
|
|
/* ============ 通用控件 ============ */
|
|
.btn {
|
|
display:inline-flex; align-items:center; justify-content:center; gap:6px;
|
|
padding:4px 14px; border-radius:6px; font-size:13px;
|
|
background:var(--card-bg); border:.5px solid var(--card-border); box-shadow:0 .5px 2px rgba(0,0,0,.08);
|
|
}
|
|
.btn:hover { background:var(--hover); }
|
|
.btn:active { background:var(--active); }
|
|
.btn.primary { background:var(--accent); color:#fff; border-color:transparent; }
|
|
.btn.primary:hover { filter:brightness(1.08); }
|
|
.btn.danger { background:var(--danger); color:#fff; border-color:transparent; }
|
|
|
|
.switch { position:relative; width:42px; height:25px; border-radius:13px; background:rgba(120,120,128,.32); transition:background .22s; cursor:pointer; flex:none; }
|
|
.switch::after { content:""; position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:transform .22s; }
|
|
.switch.on { background:var(--success); }
|
|
.switch.on::after { transform:translateX(17px); }
|
|
.switch.disabled { opacity:.4; pointer-events:none; }
|
|
|
|
input[type="range"].slider { -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:pointer; }
|
|
input[type="range"].slider::-webkit-slider-runnable-track { height:5px; border-radius:3px; background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,50%), rgba(120,120,128,.28) var(--fill,50%)); }
|
|
input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance:none; width:19px; height:19px; border-radius:50%; background:#fff; margin-top:-7px; box-shadow:0 1px 5px rgba(0,0,0,.3), 0 0 0 .5px rgba(0,0,0,.08); }
|
|
|
|
.text-input, select.text-input {
|
|
padding:5px 9px; border-radius:6px; border:.5px solid var(--border);
|
|
background:var(--input-bg); color:var(--text); outline:none; font-size:13px;
|
|
}
|
|
.text-input:focus { border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(10,132,255,.3); }
|
|
|
|
/* 分段控件 */
|
|
.segmented { display:inline-flex; background:rgba(120,120,128,.16); border-radius:8px; padding:2px; gap:2px; }
|
|
.segmented button { padding:3px 12px; border-radius:6px; font-size:12.5px; color:var(--text); white-space:nowrap; }
|
|
.segmented button.on { background:var(--content-bg); box-shadow:0 1px 4px rgba(0,0,0,.18), 0 0 0 .5px var(--card-border); }
|
|
|
|
/* 徽标 */
|
|
.badge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
|
|
|
|
/* 空状态 */
|
|
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; color:var(--text2); font-size:13px; padding:24px; text-align:center; }
|
|
.empty-state .es-icon { font-size:44px; opacity:.55; }
|
|
|
|
@media (max-width:1100px) {
|
|
#lock-time { font-size:76px; }
|
|
}
|