feat: node info, build info and acrylic web theme
Squash of recent dev work: return_session login, backend switcher, line detail timeline, overview strips, node platform/country/ISP info with flags and icons, build info (version, tag, time) behind site.show_build, and the acrylic display theme.
This commit is contained in:
justme committed
1 parent
10634bdd80
commit
14b0de3544
95 files changed
+5524
-528
No files matched your search
+374
-2
@@ -451,7 +451,8 @@ textarea {
|
||||
.scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: color-mix(in srgb, var(--app-scrim), transparent 60%);
|
||||
background: color-mix(in srgb, var(--app-scrim), transparent 55%);
|
||||
backdrop-filter: blur(3px);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 50;
|
||||
@@ -465,7 +466,11 @@ textarea {
|
||||
width: min(560px, 100%);
|
||||
max-height: calc(100vh - 32px);
|
||||
overflow: auto;
|
||||
box-shadow: 0 8px 32px color-mix(in srgb, var(--app-shadow), transparent 80%);
|
||||
border: 1px solid var(--app-outline-soft);
|
||||
/* 近处一圈细的、远处一大片柔的：边缘清楚，又不会糊成一团 */
|
||||
box-shadow:
|
||||
0 1px 2px color-mix(in srgb, var(--app-shadow), transparent 80%),
|
||||
0 12px 40px color-mix(in srgb, var(--app-shadow), transparent 72%);
|
||||
}
|
||||
|
||||
.dialog h2 {
|
||||
@@ -635,3 +640,370 @@ pre.code {
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ── 组件上的加载进度条：贴着卡片的上边缘，流动的渐变 ── */
|
||||
.has-loading {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading-bar i {
|
||||
display: block;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: var(--chart-1);
|
||||
animation: loading-bar-slide 1.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-bar-slide {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(250%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 还没有数据时的占位 */
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 72px;
|
||||
border-radius: var(--r-card);
|
||||
background: var(--app-card);
|
||||
}
|
||||
|
||||
.skeleton.chart {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 16px 16px auto;
|
||||
height: 12px;
|
||||
width: 40%;
|
||||
border-radius: 6px;
|
||||
background: var(--app-card-inset);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.loading-bar i {
|
||||
animation: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 带标签切换的命令框 ── */
|
||||
.cmd-tabs {
|
||||
border-radius: var(--r-control);
|
||||
background: var(--app-card-inset);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cmd-tablist {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid var(--app-outline);
|
||||
}
|
||||
|
||||
.cmd-tablist button {
|
||||
position: relative;
|
||||
padding: 10px 10px 9px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--app-ink-faint);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cmd-tablist button:hover {
|
||||
color: var(--app-ink);
|
||||
}
|
||||
|
||||
.cmd-tablist button.on {
|
||||
color: var(--app-ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cmd-tablist button.on::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: -1px;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
background: var(--app-ink);
|
||||
}
|
||||
|
||||
.cmd-body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 12px 12px 12px 14px;
|
||||
}
|
||||
|
||||
.cmd-body code {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-family: var(--font-mono, ui-monospace, monospace);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.cmd-copy {
|
||||
flex: none;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--app-ink-faint);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cmd-copy:hover {
|
||||
background: var(--app-card-hover);
|
||||
color: var(--app-ink);
|
||||
}
|
||||
|
||||
/* ── 数据源列表：连接中的高亮，点一行就切换 ── */
|
||||
.src-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.src-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.src-pick {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--app-outline-soft);
|
||||
border-radius: var(--r-control);
|
||||
background: var(--app-card-inset);
|
||||
color: var(--app-ink);
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.src-pick:hover {
|
||||
background: var(--app-card-hover);
|
||||
}
|
||||
|
||||
.src-row.on .src-pick,
|
||||
.src-pick.on {
|
||||
border-color: var(--app-accent);
|
||||
background: var(--app-accent-container);
|
||||
color: var(--app-on-accent-container);
|
||||
}
|
||||
|
||||
.src-dot {
|
||||
flex: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid var(--app-ink-faint);
|
||||
}
|
||||
|
||||
.src-row.on .src-dot,
|
||||
.src-pick.on .src-dot {
|
||||
border-color: var(--app-accent);
|
||||
background: var(--app-accent);
|
||||
}
|
||||
|
||||
.src-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.src-text b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.src-text small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--app-ink-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ── 数据源状态条：放在用户信息上方，一眼看到连的是哪个后端、连得上没有 ── */
|
||||
.src-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--app-outline-soft);
|
||||
border-radius: var(--r-control);
|
||||
background: var(--app-card);
|
||||
color: var(--app-ink);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.src-status:hover {
|
||||
background: var(--app-card-hover);
|
||||
}
|
||||
|
||||
.src-status .st-dot {
|
||||
flex: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--app-idle);
|
||||
}
|
||||
|
||||
.src-status.ok .st-dot {
|
||||
background: var(--app-ok);
|
||||
}
|
||||
|
||||
.src-status.bad .st-dot {
|
||||
background: var(--app-bad);
|
||||
}
|
||||
|
||||
.src-status .st-host {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.src-status .st {
|
||||
flex: none;
|
||||
color: var(--app-ink-muted);
|
||||
}
|
||||
|
||||
.src-status.bad .st {
|
||||
color: var(--app-bad);
|
||||
}
|
||||
|
||||
/* ── 节点的国旗、运营商图标、系统和架构 ── */
|
||||
.node-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.node-tag .flag {
|
||||
flex: none;
|
||||
width: 18px;
|
||||
height: 13.5px;
|
||||
border-radius: 2px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 0 0 1px var(--app-outline-soft);
|
||||
}
|
||||
|
||||
.node-tag .flag.ph {
|
||||
display: inline-block;
|
||||
background: var(--app-card-inset);
|
||||
}
|
||||
|
||||
.node-tag .isp {
|
||||
flex: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
/* 三大运营商的标志：留出一点空，比例保持 */
|
||||
.node-tag .isp.logo {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.node-tag .isp rect {
|
||||
fill: var(--app-ink-faint);
|
||||
}
|
||||
|
||||
.node-tag .isp text {
|
||||
fill: var(--isp-ink);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.node-tag .isp-mobile rect {
|
||||
fill: var(--isp-mobile);
|
||||
}
|
||||
|
||||
.node-tag .isp-telecom rect {
|
||||
fill: var(--isp-telecom);
|
||||
}
|
||||
|
||||
.node-tag .isp-unicom rect {
|
||||
fill: var(--isp-unicom);
|
||||
}
|
||||
|
||||
.node-tag .isp-broadnet rect {
|
||||
fill: var(--isp-broadnet);
|
||||
}
|
||||
|
||||
.node-tag .isp-name,
|
||||
.node-tag .plat {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
color: var(--app-ink-faint);
|
||||
}
|
||||
|
||||
/* 系统的小图标：有品牌色的用品牌色（和文字色混一点，亮暗两个主题里都看得清），没有的跟文字走 */
|
||||
.os-icon {
|
||||
flex: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.os-icon path.brand {
|
||||
fill: color-mix(in srgb, var(--os-c) 72%, var(--app-ink));
|
||||
}
|
||||
|
||||
.os-icon path.plain {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.node-tag .plat {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
@@ -3,6 +3,13 @@
|
||||
* 颜色只在这个文件里出现；其他样式一律引用令牌（stylelint 会拦住 hex / rgb / 具名色）。
|
||||
*/
|
||||
:root {
|
||||
/* 运营商小图标的底色（自己画的简化图标，不是官方 Logo） */
|
||||
--isp-mobile: #1c9be0;
|
||||
--isp-telecom: #1459a8;
|
||||
--isp-unicom: #d8261f;
|
||||
--isp-broadnet: #de6a1b;
|
||||
--isp-ink: #ffffff;
|
||||
|
||||
color-scheme: light;
|
||||
|
||||
--app-bg: #f4f2ed;
|
||||
@@ -59,6 +66,10 @@
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
|
||||
/* 暗色下的阴影和遮罩要用纯黑，不然和深色背景差不多，看不出层次 */
|
||||
--app-shadow: #000000;
|
||||
--app-scrim: #000000;
|
||||
|
||||
--app-bg: #181714;
|
||||
--app-card: #211f1b;
|
||||
--app-card-inset: #2b2924;
|
||||
|
||||
Reference in new issue
Block a user