Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-08-05 23:00:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add loading skeleton components and styles for improved UI experience

Browse Source
This commit is contained in:
shuaiplus
2026-06-11 21:00:16 +08:00
parent 9adb24d4bb
commit e9aef72df7
9 changed files with 403 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/styles/shell.css
+39 -13
View File
@@ -3,10 +3,15 @@
}
.app-shell {
@apply relative mx-auto flex max-w-[1600px] flex-col overflow-hidden border bg-panel-soft shadow-elevated;
@apply relative mx-auto flex max-w-[1600px] flex-col overflow-hidden border bg-panel-soft;
height: calc(100vh - 40px);
border-color: var(--line);
@apply rounded-3xl;
box-shadow:
0 20px 60px rgba(15, 23, 42, 0.12),
0 8px 24px rgba(15, 23, 42, 0.08),
0 0 0 1px rgba(15, 23, 42, 0.04);
transition: box-shadow var(--dur-medium) var(--ease-smooth);
}
.topbar {
@@ -104,7 +109,7 @@
}
.theme-switch-slider::before {
@apply absolute h-[26px] w-[26px] rounded-full;
@apply absolute h-[23px] w-[26px] rounded-full;
content: '';
left: 2px;
bottom: 2px;
@@ -119,8 +124,8 @@
.theme-switch .sun svg {
@apply absolute h-[18px] w-[18px];
top: 6px;
left: 32px;
top: 5px;
left: 29px;
z-index: 1;
opacity: 0.95;
transition: transform var(--dur-medium) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
@@ -193,7 +198,13 @@
}
.side-link {
@apply flex items-center gap-2.5 rounded-xl border border-transparent px-3 py-2.5 text-sm font-semibold text-muted-strong no-underline transition;
@apply flex items-center rounded-xl border border-transparent px-3 py-2.5 no-underline transition;
gap: var(--space-2);
font-size: var(--font-sm);
font-weight: 500;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
color: var(--muted-strong);
}
.side-link span,
@@ -213,24 +224,33 @@
}
.side-group-trigger {
@apply flex w-full cursor-pointer items-center gap-2.5 rounded-xl border border-transparent px-3 py-2.5 text-left text-sm font-semibold text-muted-strong transition;
@apply flex w-full cursor-pointer items-center rounded-xl border border-transparent px-3 py-2.5 text-left transition;
gap: var(--space-2);
background: transparent;
font-size: var(--font-sm);
font-weight: 500;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
color: var(--muted-strong);
}
.side-link:hover,
.side-group-trigger:hover {
background: #fff;
border-color: rgba(128, 152, 192, 0.18);
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
border-color: rgba(128, 152, 192, 0.20);
color: var(--text);
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
transform: translateX(2px);
}
.side-link.active,
.side-group-trigger.active {
background: rgba(37, 99, 235, 0.11);
border-color: rgba(37, 99, 235, 0.28);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
border-color: rgba(37, 99, 235, 0.32);
color: var(--primary-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 2px 8px rgba(37, 99, 235, 0.15);
}
.side-group-chevron {
@@ -264,7 +284,13 @@
}
.side-sub-link {
@apply flex items-center gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-semibold text-muted no-underline transition;
@apply flex items-center rounded-lg border border-transparent px-2.5 py-2 no-underline transition;
gap: var(--space-2);
font-size: var(--font-sm);
font-weight: 500;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
color: var(--muted);
}
.side-sub-link:hover {