优化暗黑风格
This commit is contained in:
Von committed
1 parent
d06ba0f438
commit
478b39c36d
4 files changed
+110
-69
No files matched your search
@@ -25,24 +25,24 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg-page: #0b1220;
|
||||
--surface: #111b2e;
|
||||
--surface-soft: #0f1728;
|
||||
--surface-hover: #17233a;
|
||||
--text-primary: #e6edf7;
|
||||
--text-secondary: #a5b4cc;
|
||||
--text-muted: #93a4c2;
|
||||
--line: #24324c;
|
||||
--line-strong: #314665;
|
||||
--primary: #78a7d8;
|
||||
--primary-hover: #8ab4de;
|
||||
--primary-active: #6798cb;
|
||||
--danger: #e0828f;
|
||||
--danger-hover: #d46e7c;
|
||||
--success: #6ab79f;
|
||||
--focus: rgba(120, 167, 216, 0.3);
|
||||
--shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.38);
|
||||
--shadow-card: 0 4px 14px rgba(0, 0, 0, 0.32);
|
||||
--bg-page: #0d1117;
|
||||
--surface: #161b22;
|
||||
--surface-soft: #0f141b;
|
||||
--surface-hover: #1f2630;
|
||||
--text-primary: #e6edf3;
|
||||
--text-secondary: #9da7b3;
|
||||
--text-muted: #7d8590;
|
||||
--line: #30363d;
|
||||
--line-strong: #3d444d;
|
||||
--primary: #2f81f7;
|
||||
--primary-hover: #388bfd;
|
||||
--primary-active: #1f6feb;
|
||||
--danger: #f85149;
|
||||
--danger-hover: #ff7b72;
|
||||
--success: #3fb950;
|
||||
--focus: rgba(47, 129, 247, 0.32);
|
||||
--shadow-soft: 0 12px 34px rgba(1, 4, 9, 0.7);
|
||||
--shadow-card: 0 6px 18px rgba(1, 4, 9, 0.56);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -65,6 +65,13 @@ body.app-page {
|
||||
var(--bg-page);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] body.app-page {
|
||||
background:
|
||||
radial-gradient(980px 560px at -10% -15%, rgba(31, 111, 235, 0.16) 0%, transparent 64%),
|
||||
radial-gradient(880px 520px at 100% 0%, rgba(47, 129, 247, 0.11) 0%, transparent 66%),
|
||||
var(--bg-page);
|
||||
}
|
||||
|
||||
.app-page .numeric-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: "tnum" 1, "lnum" 1;
|
||||
@@ -88,7 +95,7 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .header {
|
||||
background: linear-gradient(180deg, #121d31 0%, #0f1728 100%);
|
||||
background: linear-gradient(180deg, #151b23 0%, #0f141b 100%);
|
||||
}
|
||||
|
||||
.app-page .header-title h1 {
|
||||
@@ -128,7 +135,7 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .header-user {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.app-page .header-nav {
|
||||
@@ -142,7 +149,7 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .header-nav {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.app-page .header-nav-link {
|
||||
@@ -179,8 +186,8 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .header-nav-link.header-nav-link-logout {
|
||||
background: #321b24;
|
||||
border-color: #5c2d3b;
|
||||
background: #3d1f23;
|
||||
border-color: #6e2f37;
|
||||
}
|
||||
|
||||
.app-page .header-nav-link.header-nav-link-logout:hover {
|
||||
@@ -262,7 +269,15 @@ body.app-page {
|
||||
:root[data-theme="dark"] .app-page .form-control,
|
||||
:root[data-theme="dark"] .app-page .quick-jump input,
|
||||
:root[data-theme="dark"] .app-page .page-size-controls select {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .form-group input:hover,
|
||||
:root[data-theme="dark"] .app-page .form-control:hover,
|
||||
:root[data-theme="dark"] .app-page .quick-jump input:hover,
|
||||
:root[data-theme="dark"] .app-page .page-size-controls select:hover {
|
||||
background: #111820;
|
||||
border-color: #586069;
|
||||
}
|
||||
|
||||
.app-page .form-group textarea {
|
||||
@@ -328,7 +343,12 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .custom-select-trigger {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .custom-select:hover .custom-select-trigger {
|
||||
background: #111820;
|
||||
border-color: #586069;
|
||||
}
|
||||
|
||||
.app-page .custom-select-trigger::after {
|
||||
@@ -378,7 +398,7 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .custom-select-menu {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.app-page .custom-select.open .custom-select-menu {
|
||||
@@ -423,7 +443,7 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .table-footer {
|
||||
background: #111a2c;
|
||||
background: #0f141b;
|
||||
}
|
||||
|
||||
/* Shared column semantics: numeric columns stay on one line */
|
||||
@@ -471,7 +491,7 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .page-nav-text {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.app-page .page-nav-text:hover:not(.disabled) {
|
||||
@@ -502,7 +522,7 @@ body.app-page {
|
||||
|
||||
:root[data-theme="dark"] .app-page .page-info,
|
||||
:root[data-theme="dark"] .app-page .total-count {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.app-page .theme-toggle {
|
||||
@@ -543,7 +563,15 @@ body.app-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .theme-toggle {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
border-color: #30363d;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .theme-toggle:hover {
|
||||
background: #1f2630;
|
||||
border-color: #58a6ff;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .app-page .theme-icon-sun {
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .filters-section {
|
||||
background: #0f1728;
|
||||
background: #0f141b;
|
||||
}
|
||||
|
||||
.dashboard-page .filters {
|
||||
@@ -71,13 +71,13 @@
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .filter-group input,
|
||||
:root[data-theme="dark"] .dashboard-page .filter-group select {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
border-color: var(--line-strong);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .filter-group input::placeholder {
|
||||
color: #8ea0be;
|
||||
color: #7d8590;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .filter-group input[type="date"] {
|
||||
@@ -112,7 +112,7 @@
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .stats-container,
|
||||
:root[data-theme="dark"] .dashboard-page .table-container {
|
||||
background: #111b2e;
|
||||
background: #161b22;
|
||||
}
|
||||
|
||||
.dashboard-page .stats-table,
|
||||
@@ -140,7 +140,7 @@
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .stats-table th,
|
||||
:root[data-theme="dark"] .dashboard-page th {
|
||||
background: #15233b;
|
||||
background: #0f141b;
|
||||
}
|
||||
|
||||
.dashboard-page .stats-table td,
|
||||
@@ -156,7 +156,8 @@
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .stats-table td,
|
||||
:root[data-theme="dark"] .dashboard-page td {
|
||||
background: #111b2e;
|
||||
background: #161b22;
|
||||
border-bottom-color: rgba(139, 148, 158, 0.28);
|
||||
}
|
||||
|
||||
.dashboard-page .stats-table tbody tr:nth-child(even) td,
|
||||
@@ -166,7 +167,7 @@
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .stats-table tbody tr:nth-child(even) td,
|
||||
:root[data-theme="dark"] .dashboard-page tbody tr:nth-child(even) td {
|
||||
background: #122038;
|
||||
background: #151b23;
|
||||
}
|
||||
|
||||
.dashboard-page .stats-table tbody tr:hover td,
|
||||
@@ -176,7 +177,12 @@
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .stats-table tbody tr:hover td,
|
||||
:root[data-theme="dark"] .dashboard-page tbody tr:hover td {
|
||||
background: #1a2b45;
|
||||
background: #1f2630;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .stats-container,
|
||||
:root[data-theme="dark"] .dashboard-page .table-container {
|
||||
border-color: #30363d;
|
||||
}
|
||||
|
||||
.dashboard-page .stats-total-row td {
|
||||
@@ -186,7 +192,7 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .stats-total-row td {
|
||||
background: #1a2a44;
|
||||
background: #1b2230;
|
||||
}
|
||||
|
||||
.dashboard-page .ip-address {
|
||||
@@ -206,9 +212,9 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .ip-address {
|
||||
border-color: #2b4469;
|
||||
background: linear-gradient(180deg, #112038 0%, #0d1a30 100%);
|
||||
color: #a7c8f0;
|
||||
border-color: #30363d;
|
||||
background: linear-gradient(180deg, #111723 0%, #0d1117 100%);
|
||||
color: #9ecbff;
|
||||
}
|
||||
|
||||
.dashboard-page .loading,
|
||||
@@ -226,8 +232,8 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .dashboard-page .error {
|
||||
color: #ffb4bf;
|
||||
background: #3a1f2b;
|
||||
color: #ffb8bf;
|
||||
background: #3a1f24;
|
||||
}
|
||||
|
||||
.dashboard-page .table-footer {
|
||||
|
||||
@@ -15,8 +15,8 @@ body.login-page {
|
||||
|
||||
:root[data-theme="dark"] body.login-page {
|
||||
background:
|
||||
radial-gradient(1100px 620px at -10% -15%, #111d34 0%, transparent 60%),
|
||||
radial-gradient(980px 640px at 100% 0%, #15223b 0%, transparent 62%),
|
||||
radial-gradient(1100px 620px at -10% -15%, rgba(31, 111, 235, 0.16) 0%, transparent 60%),
|
||||
radial-gradient(980px 640px at 100% 0%, rgba(47, 129, 247, 0.11) 0%, transparent 62%),
|
||||
var(--bg-page);
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ body.login-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .login-page .login-head {
|
||||
background: linear-gradient(180deg, #121d31 0%, #0f1728 100%);
|
||||
background: linear-gradient(180deg, #151b23 0%, #0f141b 100%);
|
||||
}
|
||||
|
||||
.login-page .login-head h1 {
|
||||
@@ -81,7 +81,7 @@ body.login-page {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .login-page .form-control {
|
||||
background: #0d1627;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.login-page .form-control:hover {
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .users-section {
|
||||
background: #111b2e;
|
||||
background: #161b22;
|
||||
}
|
||||
|
||||
.users-page .users-section h2 {
|
||||
@@ -100,7 +100,7 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .users-table th {
|
||||
background: #15233b;
|
||||
background: #0f141b;
|
||||
}
|
||||
|
||||
.users-page .users-table th.sortable-th {
|
||||
@@ -143,7 +143,8 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .users-table td {
|
||||
background: #111b2e;
|
||||
background: #161b22;
|
||||
border-bottom-color: rgba(139, 148, 158, 0.28);
|
||||
}
|
||||
|
||||
.users-page .users-table tbody tr:nth-child(even) td {
|
||||
@@ -151,7 +152,7 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .users-table tbody tr:nth-child(even) td {
|
||||
background: #122038;
|
||||
background: #151b23;
|
||||
}
|
||||
|
||||
.users-page .users-table tbody tr:hover td {
|
||||
@@ -159,7 +160,13 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .users-table tbody tr:hover td {
|
||||
background: #1a2b45;
|
||||
background: #1f2630;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .add-user-section,
|
||||
:root[data-theme="dark"] .users-page .users-section,
|
||||
:root[data-theme="dark"] .users-page .users-table {
|
||||
border-color: #30363d;
|
||||
}
|
||||
|
||||
.users-page .ip-address {
|
||||
@@ -179,9 +186,9 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .ip-address {
|
||||
border-color: #2b4469;
|
||||
background: linear-gradient(180deg, #112038 0%, #0d1a30 100%);
|
||||
color: #a7c8f0;
|
||||
border-color: #30363d;
|
||||
background: linear-gradient(180deg, #111723 0%, #0d1117 100%);
|
||||
color: #9ecbff;
|
||||
}
|
||||
|
||||
.users-page .action-buttons {
|
||||
@@ -208,8 +215,8 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .btn-edit {
|
||||
background: #1a2d49;
|
||||
border-color: #28466d;
|
||||
background: #1b2230;
|
||||
border-color: #30363d;
|
||||
}
|
||||
|
||||
.users-page .btn-edit:hover {
|
||||
@@ -225,8 +232,8 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .btn-delete {
|
||||
background: #3a1f2b;
|
||||
border-color: #5c2d3b;
|
||||
background: #3a1f24;
|
||||
border-color: #6e2f37;
|
||||
}
|
||||
|
||||
.users-page .btn-delete:hover {
|
||||
@@ -260,8 +267,8 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .slider {
|
||||
background: #1a2b45;
|
||||
border-color: #2d4163;
|
||||
background: #222b36;
|
||||
border-color: #30363d;
|
||||
}
|
||||
|
||||
.users-page .slider::before {
|
||||
@@ -310,7 +317,7 @@
|
||||
|
||||
:root[data-theme="dark"] .users-page .loading,
|
||||
:root[data-theme="dark"] .users-page .empty-state {
|
||||
background: #0f1728;
|
||||
background: #0f141b;
|
||||
}
|
||||
|
||||
.users-page .error {
|
||||
@@ -320,9 +327,9 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .error {
|
||||
color: #ffb4bf;
|
||||
border-color: #5c2d3b;
|
||||
background: #3a1f2b;
|
||||
color: #ffb8bf;
|
||||
border-color: #6e2f37;
|
||||
background: #3a1f24;
|
||||
}
|
||||
|
||||
.users-page .success {
|
||||
@@ -332,9 +339,9 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .users-page .success {
|
||||
background: #193229;
|
||||
border-color: #2f5e4e;
|
||||
color: #a9e2cb;
|
||||
background: #132a21;
|
||||
border-color: #2b6a53;
|
||||
color: #8ddbba;
|
||||
}
|
||||
|
||||
.users-page .table-footer {
|
||||
|
||||
Reference in new issue
Block a user