feat: unify 8081 dashboard design system and views
This commit is contained in:
hyunho
@@ -1,3 +1,30 @@
|
||||
:root {
|
||||
--color-bg: var(--ds-bg);
|
||||
--color-surface: var(--ds-panel);
|
||||
--color-surface-soft: var(--ds-panel-soft);
|
||||
--color-surface-strong: var(--ds-panel-strong);
|
||||
--color-text: var(--ds-ink);
|
||||
--color-text-soft: var(--ds-text-soft);
|
||||
--color-text-muted: var(--ds-text-muted);
|
||||
--color-border: var(--ds-line);
|
||||
--color-border-soft: var(--ds-line-soft);
|
||||
--color-brand: var(--ds-brand);
|
||||
--color-brand-deep: var(--ds-brand-deep);
|
||||
--color-brand-soft: var(--ds-brand-soft);
|
||||
--color-accent: var(--ds-accent);
|
||||
--color-accent-soft: var(--ds-accent-soft);
|
||||
--color-success: var(--ds-status-success);
|
||||
--color-danger: var(--ds-status-danger);
|
||||
--radius-sm: var(--ds-radius-sm);
|
||||
--radius-md: var(--ds-radius-md);
|
||||
--radius-lg: var(--ds-radius-lg);
|
||||
--radius-xl: var(--ds-radius-xl);
|
||||
--radius-pill: var(--ds-radius-pill);
|
||||
--shadow-soft: var(--ds-shadow-soft);
|
||||
--shadow-card: var(--ds-shadow-card);
|
||||
--shadow-float: var(--ds-shadow-float);
|
||||
}
|
||||
|
||||
.dashboard-shell,
|
||||
.dashboard-main,
|
||||
.main-stage,
|
||||
@@ -31,7 +58,7 @@ body {
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(15, 23, 42, 0.42), rgba(30, 41, 59, 0.18)),
|
||||
linear-gradient(135deg, rgba(10, 42, 34, 0.42), rgba(26, 86, 69, 0.18)),
|
||||
url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80")
|
||||
center center / cover no-repeat;
|
||||
}
|
||||
@@ -54,10 +81,10 @@ body {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.7fr;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border: 1px solid var(--ds-glass-line);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(71, 85, 105, 0.34);
|
||||
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
|
||||
background: var(--ds-glass-dark);
|
||||
box-shadow: var(--ds-shadow-hero);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
@@ -68,8 +95,8 @@ body {
|
||||
padding: 30px 30px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(15, 23, 42, 0.08), rgba(255, 255, 255, 0.02)),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(15, 23, 42, 0.08));
|
||||
linear-gradient(90deg, rgba(10, 42, 34, 0.08), rgba(255, 255, 255, 0.02)),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(10, 42, 34, 0.08));
|
||||
}
|
||||
|
||||
.login-brand .eyebrow {
|
||||
@@ -83,7 +110,7 @@ body {
|
||||
font-size: clamp(1.7rem, 3.2vw, 2.5rem);
|
||||
line-height: 0.96;
|
||||
letter-spacing: -0.04em;
|
||||
color: #f8fafc;
|
||||
color: #f7f0e4;
|
||||
}
|
||||
|
||||
.login-form-wrap {
|
||||
@@ -91,7 +118,7 @@ body {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
background: rgba(15, 23, 42, 0.12);
|
||||
background: var(--ds-glass-dark-soft);
|
||||
}
|
||||
|
||||
.login-card label {
|
||||
@@ -140,8 +167,8 @@ body {
|
||||
margin-top: 2px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background: rgba(31, 41, 55, 0.82);
|
||||
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
|
||||
background: rgba(10, 42, 34, 0.82);
|
||||
box-shadow: var(--shadow-float);
|
||||
min-height: 34px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
@@ -167,9 +194,9 @@ body {
|
||||
|
||||
.dashboard-header {
|
||||
min-height: 68px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
background: rgba(255, 250, 243, 0.94);
|
||||
color: var(--color-text);
|
||||
border-bottom: 1px solid #d7dee8;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -241,7 +268,7 @@ body {
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
@@ -255,7 +282,7 @@ body {
|
||||
}
|
||||
|
||||
.nav-pill.muted {
|
||||
color: #94a3b8;
|
||||
color: rgba(102, 117, 109, 0.64);
|
||||
}
|
||||
|
||||
.nav-pill:hover {
|
||||
@@ -269,7 +296,7 @@ body {
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
padding-left: 18px;
|
||||
border-left: 1px solid #dbe2ea;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.header-date-controls {
|
||||
@@ -284,7 +311,7 @@ body {
|
||||
.header-date-label {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: #64748b;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.header-date-field {
|
||||
@@ -292,9 +319,9 @@ body {
|
||||
align-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe2ea;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.header-date-field input {
|
||||
@@ -318,15 +345,15 @@ body {
|
||||
}
|
||||
|
||||
.header-date-sep {
|
||||
color: #94a3b8;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
min-height: 34px;
|
||||
border: 1px solid #dbe2ea;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
@@ -342,12 +369,12 @@ body {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background: #f1f5f9;
|
||||
border-color: #cbd5e1;
|
||||
background: var(--ds-bg-soft);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
@@ -363,7 +390,7 @@ body {
|
||||
}
|
||||
|
||||
.ghost-button-soft {
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
@@ -381,8 +408,8 @@ body {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
background: var(--color-surface-strong);
|
||||
color: var(--color-text-soft);
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
flex: 0 0 auto;
|
||||
@@ -421,10 +448,10 @@ body {
|
||||
right: 0;
|
||||
min-width: 220px;
|
||||
padding: 14px;
|
||||
border: 1px solid #dbe2ea;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
|
||||
background: rgba(255, 250, 243, 0.96);
|
||||
box-shadow: var(--shadow-float);
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: 30;
|
||||
}
|
||||
@@ -440,7 +467,7 @@ body {
|
||||
}
|
||||
|
||||
.user-popover-row + .user-popover-row {
|
||||
border-top: 1px solid #eef2f7;
|
||||
border-top: 1px solid rgba(217, 197, 168, 0.4);
|
||||
}
|
||||
|
||||
.user-popover-label {
|
||||
@@ -454,7 +481,7 @@ body {
|
||||
min-height: 38px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #0f172a;
|
||||
background: var(--color-brand);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
@@ -485,7 +512,7 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.stage-empty {
|
||||
@@ -502,9 +529,7 @@ body {
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(241, 245, 249, 0.92)),
|
||||
radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 32%);
|
||||
background: var(--ds-bg-gradient);
|
||||
}
|
||||
|
||||
.seatmap-topbar {
|
||||
@@ -561,6 +586,54 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.seatmap-actions .ghost-button {
|
||||
min-height: 40px;
|
||||
padding: 0 16px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 12px;
|
||||
letter-spacing: -0.01em;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
#seatmap-admin-save-btn {
|
||||
border-color: var(--color-brand-soft);
|
||||
background: var(--color-brand-soft);
|
||||
color: #fffaf3;
|
||||
}
|
||||
|
||||
#seatmap-admin-save-btn:hover:not(:disabled) {
|
||||
background: var(--color-brand);
|
||||
border-color: var(--color-brand);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-float);
|
||||
}
|
||||
|
||||
#seatmap-admin-save-btn:disabled {
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
border-color: rgba(26, 86, 69, 0.24);
|
||||
background: rgba(26, 86, 69, 0.18);
|
||||
color: rgba(16, 37, 29, 0.72);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#seatmap-admin-exit-btn,
|
||||
#seatmap-readonly-exit-btn {
|
||||
border-color: rgba(214, 138, 58, 0.48);
|
||||
background: rgba(242, 196, 132, 0.22);
|
||||
color: var(--color-brand-deep);
|
||||
}
|
||||
|
||||
#seatmap-admin-exit-btn:hover,
|
||||
#seatmap-readonly-exit-btn:hover {
|
||||
background: rgba(242, 196, 132, 0.34);
|
||||
border-color: rgba(182, 110, 34, 0.56);
|
||||
color: var(--color-brand);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.seatmap-status {
|
||||
min-height: 20px;
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user