feat: refine app-shell styles for improved layout and dark mode consistency

This commit is contained in:
shuaiplus
2026-06-26 19:12:20 +08:00
parent e9272ec29a
commit 1bfb9a647d
3 changed files with 4 additions and 34 deletions
-20
View File
@@ -14,7 +14,6 @@
/* Unified product polish: refined, smooth, comfortable surfaces across desktop, mobile, and dark mode. */
/* ── surface consistency ── */
.app-shell,
.auth-card,
.dialog-card,
.card,
@@ -36,12 +35,6 @@
box-shadow: var(--shadow-sm);
}
.app-shell {
background: var(--panel-soft);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.topbar,
.mobile-tabbar,
.app-side {
@@ -104,7 +97,6 @@
}
/* ── dark mode surface resets ── */
:root[data-theme='dark'] .app-shell,
:root[data-theme='dark'] .auth-card,
:root[data-theme='dark'] .dialog-card,
:root[data-theme='dark'] .card,
@@ -259,17 +251,6 @@ h4 {
letter-spacing: 0;
}
.app-page {
padding: 18px;
}
.app-shell {
border-radius: var(--radius-xl);
border: 1px solid var(--line);
background: var(--panel);
box-shadow: var(--shadow-lg);
}
.topbar {
height: 56px;
padding-inline: 16px;
@@ -916,7 +897,6 @@ textarea {
background: var(--bg-accent);
}
:root[data-theme='dark'] .app-shell,
:root[data-theme='dark'] .topbar,
:root[data-theme='dark'] .app-side,
:root[data-theme='dark'] .mobile-tabbar,
-4
View File
@@ -200,10 +200,6 @@
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.16);
}
:root[data-theme='dark'] .app-shell {
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.30);
}
:root[data-theme='dark'] .list-item:hover {
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(139, 184, 255, 0.12);
}
+4 -10
View File
@@ -1,17 +1,11 @@
.app-page {
@apply relative min-h-full bg-transparent p-5;
@apply relative min-h-full bg-transparent;
}
.app-shell {
@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);
@apply relative flex flex-col;
height: 100vh;
background: var(--bg-accent);
}
.topbar {