feat: establish admin visual foundation
This commit is contained in:
@@ -1,6 +1,19 @@
|
||||
:root {
|
||||
--color-primary: #E96B6B;
|
||||
--color-primary-hover: #D95F5F;
|
||||
--admin-sidebar-bg: #172733;
|
||||
--admin-sidebar-surface: #213542;
|
||||
--admin-sidebar-text: #D9E1E6;
|
||||
--admin-sidebar-muted: #8FA1AC;
|
||||
--admin-page-bg: #F7F7F5;
|
||||
--admin-primary: #EE666B;
|
||||
--admin-primary-hover: #D9545A;
|
||||
--admin-card-radius: 14px;
|
||||
--admin-header-bg: #FFFFFF;
|
||||
--admin-soft-pink: #FFF0F1;
|
||||
--admin-soft-blue: #EEF5FF;
|
||||
--admin-soft-green: #EDF8F1;
|
||||
--admin-soft-purple: #F4EFFF;
|
||||
--color-primary: var(--admin-primary);
|
||||
--color-primary-hover: var(--admin-primary-hover);
|
||||
--color-primary-light: #FFF3F2;
|
||||
--color-primary-lighter: #FFF8F7;
|
||||
--color-success: #2E9B68;
|
||||
@@ -12,13 +25,13 @@
|
||||
--color-text-tertiary: #888888;
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #FFF8F7;
|
||||
--color-bg-page: #FAFAF8;
|
||||
--color-bg-page: var(--admin-page-bg);
|
||||
--color-border: #E8E5E2;
|
||||
--color-border-light: #F0EDE9;
|
||||
--sidebar-width: 220px;
|
||||
--header-height: 64px;
|
||||
--border-radius-sm: 8px;
|
||||
--border-radius-md: 12px;
|
||||
--border-radius-md: var(--admin-card-radius);
|
||||
--border-radius-lg: 16px;
|
||||
--shadow-card: 0 8px 24px rgba(75, 55, 46, 0.06);
|
||||
--el-color-primary: var(--color-primary);
|
||||
@@ -34,6 +47,13 @@ html, body, #app {
|
||||
background-color: var(--color-bg-page);
|
||||
}
|
||||
body { min-width: 1100px; }
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
[tabindex]:focus-visible {
|
||||
outline: 3px solid rgba(238, 102, 107, 0.32);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: var(--color-primary);
|
||||
--el-button-border-color: var(--color-primary);
|
||||
@@ -45,7 +65,7 @@ body { min-width: 1100px; }
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.el-card { --el-card-border-radius: var(--border-radius-md); --el-card-border-color: var(--color-border-light); }
|
||||
.el-table { --el-table-header-bg-color: #FCFAF8; --el-table-border-color: var(--color-border-light); }
|
||||
.el-table { --el-table-header-bg-color: #FBFAF8; --el-table-border-color: var(--color-border-light); }
|
||||
.el-tag { border-radius: 999px; }
|
||||
.page-container { padding: 24px; }
|
||||
.page-shell { max-width: 1440px; margin: 0 auto; }
|
||||
@@ -64,4 +84,4 @@ body { min-width: 1100px; }
|
||||
.mb-lg { margin-bottom: 24px; }
|
||||
.flex-center { display: flex; align-items: center; justify-content: center; }
|
||||
@media (max-width: 1200px) { body { min-width: 0; } }
|
||||
@media (max-width: 900px) { .page-container { padding: 16px; } .page-heading { align-items: flex-start; flex-direction: column; } }
|
||||
@media (max-width: 900px) { .page-container { padding: 16px; } .page-heading { align-items: flex-start; flex-direction: column; } }
|
||||
|
||||
Reference in New Issue
Block a user