imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-05-08 10:19:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: redesign CSS with flat dark-grey theme and unified token system

Browse Source 
- 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:
Andreas Krühlmann
2026-04-28 14:47:25 +02:00
parent 89ad58cb54
commit f5ffbb99dd
2 changed files with 811 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/customAssets.css
+39 -38
View File
@@ -7,16 +7,16 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.55);
} }
.modal .modal-inner { .modal .modal-inner {
width: 1024px; width: 1024px;
background-color: #0a0e1a; background-color: var(--color-surface-2);
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 12px;
color: white; color: var(--color-text);
border: 1px solid #504768; border: 1px solid var(--color-border);
max-height: 90vh; max-height: 90vh;
overflow: auto; overflow: auto;
display: flex; display: flex;
@@ -79,8 +79,8 @@
align-items: flex-start; align-items: flex-start;
padding: 16px; padding: 16px;
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.35); border: 1px solid var(--color-border);
background: rgba(15, 23, 42, 0.75); background: var(--color-surface-3);
color: inherit; color: inherit;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@@ -91,14 +91,14 @@
.modal .modal-inner .launch-tile:hover, .modal .modal-inner .launch-tile:hover,
.modal .modal-inner .launch-tile:focus-visible { .modal .modal-inner .launch-tile:focus-visible {
border-color: rgba(226, 232, 240, 0.7); border-color: var(--color-border-strong);
background: rgba(30, 41, 59, 0.8); background: var(--color-surface-4);
transform: translateY(-1px); transform: translateY(-1px);
} }
.modal .modal-inner .launch-tile .tile-icon { .modal .modal-inner .launch-tile .tile-icon {
font-size: 1.4rem; font-size: 1.4rem;
color: rgba(226, 232, 240, 0.9); color: var(--color-text-2);
} }
.modal .modal-inner .launch-tile .tile-title { .modal .modal-inner .launch-tile .tile-title {
@@ -106,7 +106,7 @@
} }
.modal .modal-inner .launch-tile .tile-subtitle { .modal .modal-inner .launch-tile .tile-subtitle {
color: rgba(226, 232, 240, 0.7); color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -124,19 +124,19 @@
.modal .modal-inner .code-editor.CodeMirror { .modal .modal-inner .code-editor.CodeMirror {
height: 420px; height: 420px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #1f2937; border: 1px solid var(--color-border);
background: #0f172a; background: var(--color-surface-3);
color: #e2e8f0; color: var(--color-text);
font-size: 14px; font-size: 14px;
} }
.modal .modal-inner .code-editor.CodeMirror-focused { .modal .modal-inner .code-editor.CodeMirror-focused {
border-color: #7c3aed; border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25); box-shadow: 0 0 0 3px var(--color-focus-ring);
} }
.modal .modal-inner .code-editor .CodeMirror-cursor { .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 { .modal .modal-inner .code-editor .CodeMirror-selected {
@@ -144,28 +144,29 @@
} }
.modal .modal-inner .code-editor .CodeMirror-gutters { .modal .modal-inner .code-editor .CodeMirror-gutters {
background: #0b1220; background: var(--color-surface-2);
border-right: 1px solid #1f2937; border-right: 1px solid var(--color-border);
} }
.modal .modal-inner .code-editor .CodeMirror-linenumber { .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 { .modal .modal-inner .code-editor.CodeMirror-disabled {
background: #020617; background: var(--color-bg);
color: #64748b; color: var(--color-text-faint);
} }
.modal .modal-inner .code-editor .CodeMirror-placeholder { .modal .modal-inner .code-editor .CodeMirror-placeholder {
color: #475569; color: var(--color-text-placeholder);
} }
.modal .modal-inner .form-error { .modal .modal-inner .form-error {
padding: 8px; padding: 8px;
background-color: rgba(200, 0, 0, 0.3); background-color: rgba(127, 29, 29, 0.3);
border: 1px solid #a00; border: 1px solid var(--color-danger-border);
border-radius: 4px; border-radius: 4px;
color: var(--color-danger-text);
} }
.modal .modal-inner .attachment-actions { .modal .modal-inner .attachment-actions {
@@ -193,9 +194,9 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid rgba(148, 163, 184, 0.3); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
background-color: rgba(15, 23, 42, 0.6); background-color: var(--color-surface-3);
} }
.modal .modal-inner .attachment-meta { .modal .modal-inner .attachment-meta {
@@ -206,7 +207,7 @@
.modal .modal-inner .attachment-meta span { .modal .modal-inner .attachment-meta span {
font-size: 0.85rem; font-size: 0.85rem;
color: rgba(226, 232, 240, 0.8); color: var(--color-text-2);
} }
.modal .modal-inner .attachment-actions-row { .modal .modal-inner .attachment-actions-row {
@@ -216,7 +217,7 @@
} }
.modal .modal-inner .attachment-empty { .modal .modal-inner .attachment-empty {
color: rgba(226, 232, 240, 0.7); color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -224,7 +225,7 @@
margin-top: 8px; margin-top: 8px;
min-height: 60px; min-height: 60px;
border-radius: 8px; border-radius: 8px;
border: 1px dashed rgba(148, 163, 184, 0.35); border: 1px dashed var(--color-border);
padding: 8px; padding: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -254,9 +255,9 @@
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
padding: 16px; padding: 16px;
border: 1px solid rgba(148, 163, 184, 0.3); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: 10px;
background-color: rgba(15, 23, 42, 0.6); background-color: var(--color-surface-3);
width: 240px; width: 240px;
height: 240px; height: 240px;
} }
@@ -265,15 +266,15 @@
width: 72px; width: 72px;
height: 72px; height: 72px;
border-radius: 12px; border-radius: 12px;
background: rgba(15, 23, 42, 0.8); background: var(--color-surface-2);
display: grid; display: grid;
place-items: center; place-items: center;
object-fit: cover; object-fit: cover;
border: 1px solid rgba(148, 163, 184, 0.3); border: 1px solid var(--color-border);
} }
.modal .modal-inner .marketplace-logo.placeholder { .modal .modal-inner .marketplace-logo.placeholder {
color: rgba(226, 232, 240, 0.7); color: var(--color-text-muted);
font-size: 24px; font-size: 24px;
} }
@@ -294,7 +295,7 @@
.modal .modal-inner .marketplace-content p { .modal .modal-inner .marketplace-content p {
margin: 0; margin: 0;
color: rgba(226, 232, 240, 0.8); color: var(--color-text-2);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
@@ -372,7 +373,7 @@
.modal .modal-inner .marketplace-loading { .modal .modal-inner .marketplace-loading {
padding: 14px; padding: 14px;
border-radius: 8px; border-radius: 8px;
background: rgba(15, 23, 42, 0.6); background: var(--color-surface-3);
border: 1px dashed rgba(148, 163, 184, 0.3); border: 1px dashed var(--color-border);
color: rgba(226, 232, 240, 0.8); color: var(--color-text-2);
} }
src/main/resources/static/css/styles.css
+772 -325
View File
File diff suppressed because it is too large Load Diff