Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-20 21:00:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor frontend styles toward Tailwind utilities and unified design system

Browse Source
This commit is contained in:
shuaiplus
2026-04-25 02:23:10 +08:00
parent 514889adfc
commit e4bc1b9bbe
20 changed files with 632 additions and 1177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/styles/shell.css
+15 -39
View File
@@ -6,7 +6,7 @@
@apply relative mx-auto flex max-w-[1600px] flex-col overflow-hidden border bg-panel-soft shadow-elevated;
height: calc(100vh - 40px);
border-color: var(--line);
border-radius: 24px;
@apply rounded-3xl;
}
.topbar {
@@ -20,10 +20,8 @@
}
.brand-wordmark {
display: block;
height: auto;
@apply block h-auto max-w-full;
width: clamp(210px, 20vw, 290px);
max-width: 100%;
filter: drop-shadow(0 12px 24px rgba(43, 102, 217, 0.12));
}
@@ -42,19 +40,19 @@
}
.mobile-tabbar {
display: none;
@apply hidden;
}
.mobile-sidebar-toggle {
display: none;
@apply hidden;
}
.mobile-lock-btn {
display: none;
@apply hidden;
}
.mobile-theme-btn {
display: none;
@apply hidden;
}
.theme-switch-wrap {
@@ -62,16 +60,11 @@
}
.theme-switch {
position: relative;
display: inline-block;
width: 56px;
height: 32px;
@apply relative inline-block h-8 w-14;
}
.theme-switch-input {
opacity: 0;
width: 0;
height: 0;
@apply h-0 w-0 opacity-0;
}
.theme-switch-slider {
@@ -81,11 +74,8 @@
}
.theme-switch-slider::before {
position: absolute;
@apply absolute h-[26px] w-[26px] rounded-full;
content: '';
height: 26px;
width: 26px;
border-radius: 999px;
left: 2px;
bottom: 2px;
z-index: 2;
@@ -98,24 +88,20 @@
}
.theme-switch .sun svg {
position: absolute;
@apply absolute h-[18px] w-[18px];
top: 6px;
left: 32px;
z-index: 1;
width: 18px;
height: 18px;
opacity: 0.95;
transition: transform var(--dur-medium) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
}
.theme-switch .moon svg {
fill: #5b86d6;
position: absolute;
@apply absolute h-4 w-4;
top: 7px;
left: 7px;
z-index: 1;
width: 16px;
height: 16px;
opacity: 0.88;
transition: transform var(--dur-medium) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
}
@@ -143,11 +129,7 @@
}
.topbar-actions .btn {
height: 34px;
border-radius: 12px;
padding: 0 12px;
font-size: 13px;
font-weight: 600;
@apply h-[34px] rounded-xl px-3 text-[13px] font-semibold;
transition-duration: 220ms;
}
@@ -203,24 +185,18 @@
}
.mobile-sidebar-mask {
position: fixed;
inset: 0;
@apply pointer-events-none invisible fixed inset-0 opacity-0;
background: rgba(15, 23, 42, 0.36);
z-index: 54;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 220ms var(--ease-smooth),
visibility 220ms var(--ease-smooth);
}
.mobile-sidebar-mask.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
@apply pointer-events-auto visible opacity-100;
}
.mobile-sidebar-head {
display: none;
@apply hidden;
}