mirror of
https://github.com/imgfloat/server.git
synced 2026-05-08 10:19:35 +00:00
refactor: redesign CSS with flat dark-grey theme and unified token system
- Introduce :root color token block (--color-bg, --color-surface-1..4, --color-border-*, --color-text-*, --color-accent-*, semantic danger/success/ warning/info tokens) — all hard-coded colors removed from both files - Remove all decorative gradients and box-shadows; flat borders replace them - Unify header classes: landing-header / settings-header / error-header share one rule; dashboard-topbar and audit-topbar aligned to same padding and radius - Add CSS for report page components, copyright report table/pagination/radio controls, and broadcaster copyright-notices panel - customAssets.css fully rewritten to use tokens (modal, code editor, marketplace)
This commit is contained in:
@@ -7,16 +7,16 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background-color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.modal .modal-inner {
|
||||
width: 1024px;
|
||||
background-color: #0a0e1a;
|
||||
background-color: var(--color-surface-2);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
color: white;
|
||||
border: 1px solid #504768;
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
@@ -79,8 +79,8 @@
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
background: rgba(15, 23, 42, 0.75);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface-3);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
@@ -91,14 +91,14 @@
|
||||
|
||||
.modal .modal-inner .launch-tile:hover,
|
||||
.modal .modal-inner .launch-tile:focus-visible {
|
||||
border-color: rgba(226, 232, 240, 0.7);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-color: var(--color-border-strong);
|
||||
background: var(--color-surface-4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.modal .modal-inner .launch-tile .tile-icon {
|
||||
font-size: 1.4rem;
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
.modal .modal-inner .launch-tile .tile-title {
|
||||
@@ -106,7 +106,7 @@
|
||||
}
|
||||
|
||||
.modal .modal-inner .launch-tile .tile-subtitle {
|
||||
color: rgba(226, 232, 240, 0.7);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -124,19 +124,19 @@
|
||||
.modal .modal-inner .code-editor.CodeMirror {
|
||||
height: 420px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #1f2937;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface-3);
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modal .modal-inner .code-editor.CodeMirror-focused {
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px var(--color-focus-ring);
|
||||
}
|
||||
|
||||
.modal .modal-inner .code-editor .CodeMirror-cursor {
|
||||
border-left: 2px solid #e2e8f0;
|
||||
border-left: 2px solid var(--color-text);
|
||||
}
|
||||
|
||||
.modal .modal-inner .code-editor .CodeMirror-selected {
|
||||
@@ -144,28 +144,29 @@
|
||||
}
|
||||
|
||||
.modal .modal-inner .code-editor .CodeMirror-gutters {
|
||||
background: #0b1220;
|
||||
border-right: 1px solid #1f2937;
|
||||
background: var(--color-surface-2);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.modal .modal-inner .code-editor .CodeMirror-linenumber {
|
||||
color: rgba(148, 163, 184, 0.8);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.modal .modal-inner .code-editor.CodeMirror-disabled {
|
||||
background: #020617;
|
||||
color: #64748b;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.modal .modal-inner .code-editor .CodeMirror-placeholder {
|
||||
color: #475569;
|
||||
color: var(--color-text-placeholder);
|
||||
}
|
||||
|
||||
.modal .modal-inner .form-error {
|
||||
padding: 8px;
|
||||
background-color: rgba(200, 0, 0, 0.3);
|
||||
border: 1px solid #a00;
|
||||
background-color: rgba(127, 29, 29, 0.3);
|
||||
border: 1px solid var(--color-danger-border);
|
||||
border-radius: 4px;
|
||||
color: var(--color-danger-text);
|
||||
}
|
||||
|
||||
.modal .modal-inner .attachment-actions {
|
||||
@@ -193,9 +194,9 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background-color: rgba(15, 23, 42, 0.6);
|
||||
background-color: var(--color-surface-3);
|
||||
}
|
||||
|
||||
.modal .modal-inner .attachment-meta {
|
||||
@@ -206,7 +207,7 @@
|
||||
|
||||
.modal .modal-inner .attachment-meta span {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(226, 232, 240, 0.8);
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
.modal .modal-inner .attachment-actions-row {
|
||||
@@ -216,7 +217,7 @@
|
||||
}
|
||||
|
||||
.modal .modal-inner .attachment-empty {
|
||||
color: rgba(226, 232, 240, 0.7);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -224,7 +225,7 @@
|
||||
margin-top: 8px;
|
||||
min-height: 60px;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed rgba(148, 163, 184, 0.35);
|
||||
border: 1px dashed var(--color-border);
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -254,9 +255,9 @@
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(15, 23, 42, 0.6);
|
||||
background-color: var(--color-surface-3);
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
@@ -265,15 +266,15 @@
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 12px;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
background: var(--color-surface-2);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.modal .modal-inner .marketplace-logo.placeholder {
|
||||
color: rgba(226, 232, 240, 0.7);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@@ -294,7 +295,7 @@
|
||||
|
||||
.modal .modal-inner .marketplace-content p {
|
||||
margin: 0;
|
||||
color: rgba(226, 232, 240, 0.8);
|
||||
color: var(--color-text-2);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
@@ -372,7 +373,7 @@
|
||||
.modal .modal-inner .marketplace-loading {
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px dashed rgba(148, 163, 184, 0.3);
|
||||
color: rgba(226, 232, 240, 0.8);
|
||||
background: var(--color-surface-3);
|
||||
border: 1px dashed var(--color-border);
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user