.
This commit is contained in:
Debian
+81
-41
@@ -1,23 +1,23 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
color-scheme: dark;
|
||||
font-family: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(183, 198, 211, 0.22), transparent 28%),
|
||||
linear-gradient(180deg, #f6f7f5 0%, #eceeea 100%);
|
||||
color: #17202a;
|
||||
--surface: rgba(255, 255, 255, 0.86);
|
||||
--surface-strong: #ffffff;
|
||||
--surface-muted: #eef1ed;
|
||||
--border: rgba(23, 32, 42, 0.12);
|
||||
--border-strong: rgba(23, 32, 42, 0.18);
|
||||
--text-muted: #5d6772;
|
||||
--accent: #22384c;
|
||||
--accent-soft: #d8e1e8;
|
||||
--danger: #8f3b32;
|
||||
--success: #255c44;
|
||||
--shadow: 0 24px 60px rgba(21, 27, 34, 0.08);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0, transparent 180px),
|
||||
linear-gradient(180deg, #0b0d10 0%, #111418 100%);
|
||||
color: #e7eaee;
|
||||
--surface: #14181d;
|
||||
--surface-strong: #1a1f25;
|
||||
--surface-muted: #111418;
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
--border-strong: rgba(255, 255, 255, 0.14);
|
||||
--text-muted: #949da7;
|
||||
--accent: #d7dde3;
|
||||
--accent-soft: #252b33;
|
||||
--danger: #d2766b;
|
||||
--success: #7db796;
|
||||
--shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -29,6 +29,7 @@ body {
|
||||
min-height: 100vh;
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -56,15 +57,26 @@ button {
|
||||
.table-card,
|
||||
.modal-card {
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(18px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 24px;
|
||||
border-radius: 2px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: min(100%, 460px);
|
||||
padding: 32px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-card::before,
|
||||
.toolbar-card::before,
|
||||
.table-card::before,
|
||||
.modal-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.03);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
@@ -88,11 +100,11 @@ button {
|
||||
}
|
||||
|
||||
.admin-pill {
|
||||
background: rgba(34, 56, 76, 0.08);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(34, 56, 76, 0.12);
|
||||
background: #0f1216;
|
||||
color: #c8d0d7;
|
||||
border: 1px solid var(--border);
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@@ -113,11 +125,13 @@ h1 {
|
||||
font-size: clamp(2rem, 3vw, 2.8rem);
|
||||
line-height: 1.05;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.auth-copy,
|
||||
@@ -134,6 +148,7 @@ h2 {
|
||||
align-items: end;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
@@ -160,47 +175,62 @@ h2 {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 13px 14px;
|
||||
border-radius: 14px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--surface-strong);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 2px solid rgba(34, 56, 76, 0.18);
|
||||
border-color: rgba(34, 56, 76, 0.35);
|
||||
outline: none;
|
||||
border-color: #7d8892;
|
||||
box-shadow: inset 0 0 0 1px #7d8892;
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.ghost-button,
|
||||
.danger-button {
|
||||
border-radius: 14px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--border);
|
||||
padding: 12px 16px;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.78rem;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
background: #d9dee3;
|
||||
color: #0c0f12;
|
||||
border-color: #d9dee3;
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
background: var(--surface-strong);
|
||||
color: var(--accent);
|
||||
background: #171b20;
|
||||
color: #d0d6dc;
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
background: rgba(143, 59, 50, 0.08);
|
||||
background: rgba(210, 118, 107, 0.08);
|
||||
color: var(--danger);
|
||||
border-color: rgba(143, 59, 50, 0.18);
|
||||
border-color: rgba(210, 118, 107, 0.22);
|
||||
}
|
||||
|
||||
.primary-button:hover,
|
||||
.ghost-button:hover,
|
||||
.danger-button:hover {
|
||||
transform: translateY(-1px);
|
||||
background-color: #20262d;
|
||||
}
|
||||
|
||||
.primary-button:hover {
|
||||
background: #eef2f5;
|
||||
border-color: #eef2f5;
|
||||
color: #0c0f12;
|
||||
}
|
||||
|
||||
.danger-button:hover {
|
||||
background: rgba(210, 118, 107, 0.14);
|
||||
}
|
||||
|
||||
.primary-button:disabled,
|
||||
@@ -212,22 +242,22 @@ input:focus {
|
||||
}
|
||||
|
||||
.notice {
|
||||
border-radius: 18px;
|
||||
border-radius: 2px;
|
||||
padding: 14px 16px;
|
||||
margin: 0 0 16px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.notice.success {
|
||||
background: rgba(37, 92, 68, 0.08);
|
||||
background: rgba(125, 183, 150, 0.08);
|
||||
color: var(--success);
|
||||
border-color: rgba(37, 92, 68, 0.15);
|
||||
border-color: rgba(125, 183, 150, 0.16);
|
||||
}
|
||||
|
||||
.notice.error {
|
||||
background: rgba(143, 59, 50, 0.08);
|
||||
background: rgba(210, 118, 107, 0.08);
|
||||
color: var(--danger);
|
||||
border-color: rgba(143, 59, 50, 0.15);
|
||||
border-color: rgba(210, 118, 107, 0.16);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
@@ -237,6 +267,7 @@ input:focus {
|
||||
|
||||
.table-card {
|
||||
padding: 22px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@@ -254,6 +285,7 @@ input:focus {
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
th,
|
||||
@@ -268,6 +300,13 @@ th {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
background: #101419;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
@@ -287,13 +326,14 @@ th {
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(18, 25, 33, 0.36);
|
||||
background: rgba(5, 7, 10, 0.72);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: min(100%, 520px);
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
|
||||
Reference in New Issue
Block a user