feat(display): pointer-sway background with a dark variant; acrylic glass tokens [CI]
ci/woodpecker/push/main-amd64-build Pipeline was successful
ci/woodpecker/push/main-amd64-build Pipeline was successful
This commit is contained in:
justme committed
1 parent
70f20d38d0
commit
f8e8bb8acb
7 files changed
+212
-31
No files matched your search
+73
-27
@@ -1000,37 +1000,83 @@
|
||||
|
||||
/* Agent 卡片：国旗开头，名字下面是「运营商 / 系统」两行（左边名字右边内容，和下面的流量、网速一个风格） */
|
||||
/* 亚克力：整张卡片半透明 + 背景模糊，细亮边，大一点的投影；标题栏是稍深的一条，底下垫放大模糊的国旗 */
|
||||
/* 背景图固定在最底下，自己模糊一点（边缘放大一点，免得模糊后露出白边）；上面盖一层页面底色，亮色盖得浅一点，暗色盖得深 */
|
||||
body::before {
|
||||
content: '';
|
||||
/* 背景图固定在最底下：图本身已经是预先模糊过的（web/display/scripts/prepare-bg.py），所以移动它只是搬一块贴图，不用每次让浏览器重新模糊；
|
||||
上面盖一层页面底色，亮色盖得浅一点，暗色盖得深。背景层会随鼠标移动（见 parallax.ts，直接改它的 transform），向外多留一圈边距免得露边。 */
|
||||
.bg-layer {
|
||||
position: fixed;
|
||||
inset: -24px;
|
||||
inset: -130px;
|
||||
z-index: -1;
|
||||
background-image:
|
||||
linear-gradient(color-mix(in srgb, var(--app-bg) var(--bg-veil), transparent), color-mix(in srgb, var(--app-bg) var(--bg-veil), transparent)),
|
||||
linear-gradient(color-mix(in srgb, var(--glass-veil) var(--bg-veil), transparent), color-mix(in srgb, var(--glass-veil) var(--bg-veil), transparent)),
|
||||
url('./assets/bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(var(--bg-blur));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-veil: 50%;
|
||||
--bg-blur: 10px;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg-veil: 82%;
|
||||
--bg-veil: 62%;
|
||||
}
|
||||
|
||||
/* 暗色模式换一张背景图 */
|
||||
:root[data-theme="dark"] .bg-layer {
|
||||
background-image:
|
||||
linear-gradient(color-mix(in srgb, var(--glass-veil) var(--bg-veil), transparent), color-mix(in srgb, var(--glass-veil) var(--bg-veil), transparent)),
|
||||
url('./assets/bg-dark.jpg');
|
||||
}
|
||||
|
||||
/* ── 亚克力（毛玻璃）规范：所有玻璃面（卡片、线路面板、顶部栏、时间轴）只用下面这组变量；颜色来自 tokens.css 的 --glass-*，换风格改那里 ──
|
||||
--glass-bg 玻璃底色（半透明） --glass-filter 背景模糊和饱和度
|
||||
--glass-ring 1px 的细描边 --glass-top 上沿的一条高光（玻璃边缘的反光）
|
||||
--glass-drop 投影（带一点底色的近黑，不用纯黑；暗色用一大一小两层，贴着一层细的、散开一层虚的）
|
||||
--glass-head 卡片标题栏的叠层 --glass-head-line 标题栏和身体之间的分隔线
|
||||
--glass-bar-* 顶部栏专用（更薄、更透） */
|
||||
:root {
|
||||
--glass-bg: color-mix(in srgb, var(--glass-tint) 76%, transparent);
|
||||
--glass-filter: blur(28px) saturate(1.6);
|
||||
--glass-ring: color-mix(in srgb, var(--glass-line) 9%, transparent);
|
||||
--glass-top: color-mix(in srgb, var(--glass-light) 70%, transparent);
|
||||
--glass-drop: 0 14px 32px -12px color-mix(in srgb, var(--glass-shade) 45%, transparent);
|
||||
--glass-head: color-mix(in srgb, var(--glass-line) 5%, transparent);
|
||||
--glass-head-line: color-mix(in srgb, var(--glass-line) 8%, transparent);
|
||||
--glass-bar-bg: color-mix(in srgb, var(--glass-tint) 62%, transparent);
|
||||
--glass-bar-filter: blur(20px) saturate(1.5);
|
||||
--glass-bar-line: color-mix(in srgb, var(--glass-line) 7%, transparent);
|
||||
--glass-bar-drop: 0 4px 14px -8px color-mix(in srgb, var(--glass-shade) 28%, transparent);
|
||||
}
|
||||
|
||||
/* 暗色：玻璃更透一点（58%），模糊和饱和度比亮色低（背景图本来就暗，饱和度太高会发艳）；
|
||||
边缘靠 10% 的白色细描边和 12% 的白色上沿高光撑出来；投影更深、分两层 */
|
||||
:root[data-theme="dark"] {
|
||||
/* 玻璃上的小控件（分段按钮、标签、进度条底、时间轴的格子）：用半透明的白色叠层，不再是不透明的暖灰，免得在冷色玻璃上发褐 */
|
||||
--app-card-inset: color-mix(in srgb, var(--glass-line) 7%, transparent);
|
||||
--app-card-hover: color-mix(in srgb, var(--glass-line) 11%, transparent);
|
||||
--glass-bg: color-mix(in srgb, var(--glass-tint) 58%, transparent);
|
||||
--glass-filter: blur(24px) saturate(1.35);
|
||||
--glass-ring: color-mix(in srgb, var(--glass-line) 10%, transparent);
|
||||
--glass-top: color-mix(in srgb, var(--glass-light) 12%, transparent);
|
||||
--glass-drop:
|
||||
0 18px 40px -14px color-mix(in srgb, var(--glass-shade) 60%, transparent),
|
||||
0 2px 6px -2px color-mix(in srgb, var(--glass-shade) 40%, transparent);
|
||||
--glass-head: color-mix(in srgb, var(--glass-line) 4.5%, transparent);
|
||||
--glass-head-line: color-mix(in srgb, var(--glass-line) 7%, transparent);
|
||||
--glass-bar-bg: color-mix(in srgb, var(--glass-tint) 52%, transparent);
|
||||
--glass-bar-filter: blur(20px) saturate(1.3);
|
||||
--glass-bar-line: color-mix(in srgb, var(--glass-line) 8%, transparent);
|
||||
--glass-bar-drop: 0 6px 20px -10px color-mix(in srgb, var(--glass-shade) 55%, transparent);
|
||||
}
|
||||
|
||||
.agent-card {
|
||||
background: color-mix(in srgb, var(--app-card) 76%, transparent);
|
||||
backdrop-filter: blur(28px) saturate(1.6);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-filter);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--app-ink) 9%, transparent),
|
||||
inset 0 1px 0 color-mix(in srgb, var(--app-card) 70%, transparent),
|
||||
0 14px 32px -12px color-mix(in srgb, var(--app-shadow) 45%, transparent);
|
||||
inset 0 0 0 1px var(--glass-ring),
|
||||
inset 0 1px 0 var(--glass-top),
|
||||
var(--glass-drop);
|
||||
}
|
||||
|
||||
.agent-head {
|
||||
@@ -1039,8 +1085,8 @@ body::before {
|
||||
margin: -20px -20px 0;
|
||||
padding: 16px 20px;
|
||||
border-radius: var(--r-card) var(--r-card) 0 0;
|
||||
background: color-mix(in srgb, var(--app-ink) 5%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--app-ink) 8%, transparent);
|
||||
background: var(--glass-head);
|
||||
border-bottom: 1px solid var(--glass-head-line);
|
||||
}
|
||||
|
||||
.agent-head .flag {
|
||||
@@ -1159,12 +1205,12 @@ body::before {
|
||||
.card:not(.agent-card),
|
||||
.tiles > .stat,
|
||||
.tiles > .tile {
|
||||
background: color-mix(in srgb, var(--app-card) 76%, transparent);
|
||||
backdrop-filter: blur(28px) saturate(1.6);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-filter);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--app-ink) 9%, transparent),
|
||||
inset 0 1px 0 color-mix(in srgb, var(--app-card) 70%, transparent),
|
||||
0 14px 32px -12px color-mix(in srgb, var(--app-shadow) 45%, transparent);
|
||||
inset 0 0 0 1px var(--glass-ring),
|
||||
inset 0 1px 0 var(--glass-top),
|
||||
var(--glass-drop);
|
||||
}
|
||||
|
||||
/* 小的指标块浮得低一点：阴影收小 */
|
||||
@@ -1176,19 +1222,19 @@ body::before {
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background: color-mix(in srgb, var(--app-card) 62%, transparent);
|
||||
backdrop-filter: blur(20px) saturate(1.5);
|
||||
border-bottom-color: color-mix(in srgb, var(--app-ink) 7%, transparent);
|
||||
box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--app-shadow) 28%, transparent);
|
||||
background: var(--glass-bar-bg);
|
||||
backdrop-filter: var(--glass-bar-filter);
|
||||
border-bottom-color: var(--glass-bar-line);
|
||||
box-shadow: var(--glass-bar-drop);
|
||||
}
|
||||
|
||||
/* 时间轴：同样的亚克力。有数据的段是半透明的亮底，没数据的段是淡淡的斜纹，整条有细描边和投影 */
|
||||
.minimap .track {
|
||||
background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--app-card) 55%, var(--app-idle)) 0 5px, color-mix(in srgb, var(--app-card) 70%, var(--app-idle)) 5px 10px);
|
||||
backdrop-filter: blur(20px) saturate(1.6);
|
||||
backdrop-filter: var(--glass-bar-filter);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--app-ink) 9%, transparent),
|
||||
0 10px 24px -12px color-mix(in srgb, var(--app-shadow) 45%, transparent);
|
||||
inset 0 0 0 1px var(--glass-ring),
|
||||
var(--glass-drop);
|
||||
}
|
||||
|
||||
.minimap svg rect.has {
|
||||
|
||||
Reference in new issue
Block a user