tomh104/nat-as-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

adjust color palette
Some checks failed
PHPUnit / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Tom Hempel
2026-07-17 17:21:48 +02:00
parent 6b3cd0da17
commit f90d5db40a
2 changed files with 95 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
website/css/style.css
View File

@ -1,99 +1,101 @@
:root {
color-scheme: light;
--bg: #eef2f7;
/* Vivo / NAT-Trauma palette: navy #414463, crimson #D01C41 */
--bg: #f4f5f8;
--surface: #ffffff;
--surface-raised: #f8fafc;
--surface-hover: #f1f5f9;
--surface-muted: #f8fafc;
--surface-raised: #fafbfc;
--surface-hover: #e8eaf0;
--surface-muted: #fafbfc;
--surface-input: #ffffff;
--surface-elevated: #f8fafc;
--primary: #2563eb;
--primary-hover: #1d4ed8;
--primary-subtle: rgba(37, 99, 235, 0.1);
--primary-border: rgba(37, 99, 235, 0.28);
--primary-text: #1d4ed8;
--danger: #dc2626;
--danger-hover: #b91c1c;
--danger-subtle: rgba(220, 38, 38, 0.08);
--danger-subtle-hover: rgba(220, 38, 38, 0.14);
--danger-border: rgba(220, 38, 38, 0.35);
--danger-text: #b91c1c;
--danger-focus-ring: rgba(220, 38, 38, 0.25);
--surface-elevated: #fafbfc;
--primary: #414463;
--primary-hover: #343752;
--primary-subtle: rgba(65, 68, 99, 0.1);
--primary-border: rgba(65, 68, 99, 0.28);
--primary-text: #414463;
--accent: #414463;
--danger: #d01c41;
--danger-hover: #b01738;
--danger-subtle: rgba(208, 28, 65, 0.08);
--danger-subtle-hover: rgba(208, 28, 65, 0.14);
--danger-border: rgba(208, 28, 65, 0.35);
--danger-text: #d01c41;
--danger-focus-ring: rgba(208, 28, 65, 0.25);
--success: #16a34a;
--warning: #d97706;
--text: #0f172a;
--text-secondary: #64748b;
--warning: #d01c41;
--text: #414463;
--text-secondary: #6b7088;
--text-on-primary: #ffffff;
--border: #e2e8f0;
--border: #d5d8e2;
--radius: 8px;
--radius-lg: 12px;
--shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
--shadow: 0 1px 2px rgba(65, 68, 99, 0.06), 0 1px 3px rgba(65, 68, 99, 0.08);
--shadow-lg: 0 8px 24px rgba(65, 68, 99, 0.08), 0 2px 6px rgba(65, 68, 99, 0.04);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);
--focus-ring: rgba(37, 99, 235, 0.22);
--focus-ring: rgba(65, 68, 99, 0.22);
--sidebar-width: 240px;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--table-header-bg: #f1f5f9;
--table-stripe-bg: rgba(241, 245, 249, 0.85);
--row-hover-bg: #e8eef5;
--sticky-shadow: rgba(15, 23, 42, 0.08);
--atmosphere-blue: rgba(37, 99, 235, 0.09);
--atmosphere-indigo: rgba(79, 70, 229, 0.06);
--grid-line: rgba(100, 116, 139, 0.1);
--accent-gradient: linear-gradient(135deg, #2563eb 0%, #3b5bdb 45%, #4f46e5 100%);
--accent-gradient-soft: linear-gradient(90deg, rgba(37, 99, 235, 0.55), rgba(79, 70, 229, 0.4));
--accent-glow: 0 4px 18px rgba(37, 99, 235, 0.18);
--font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--table-header-bg: #e8eaf0;
--table-stripe-bg: rgba(232, 234, 240, 0.85);
--row-hover-bg: #e8eaf0;
--sticky-shadow: rgba(65, 68, 99, 0.08);
--atmosphere-blue: rgba(65, 68, 99, 0.09);
--atmosphere-indigo: rgba(65, 68, 99, 0.05);
--grid-line: rgba(107, 112, 136, 0.12);
--accent-gradient: linear-gradient(135deg, #414463 0%, #52567a 45%, #5a5e7a 100%);
--accent-gradient-soft: linear-gradient(90deg, rgba(65, 68, 99, 0.55), rgba(90, 94, 122, 0.4));
--accent-glow: 0 4px 18px rgba(65, 68, 99, 0.18);
--shine-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
/* Incomplete translation highlight */
--trans-missing-bg: #fffbeb;
--trans-missing-bg-hover: #fef3c7;
--trans-missing-border: #fcd34d;
--trans-missing-accent: #d97706;
--trans-missing-placeholder: #92400e;
/* Incomplete translation highlight — crimson reminders */
--trans-missing-bg: #fce8ed;
--trans-missing-bg-hover: #f5c5d0;
--trans-missing-border: #e85a74;
--trans-missing-accent: #d01c41;
--trans-missing-placeholder: #8a1230;
/* Status badges */
--badge-draft-bg: #f1f5f9;
--badge-draft-fg: #64748b;
--badge-draft-bg: #e8eaf0;
--badge-draft-fg: #6b7088;
--badge-active-bg: rgba(22, 163, 74, 0.12);
--badge-active-fg: #15803d;
--badge-archived-bg: rgba(217, 119, 6, 0.12);
--badge-archived-fg: #b45309;
--badge-archived-bg: rgba(208, 28, 65, 0.12);
--badge-archived-fg: #d01c41;
--badge-in-progress-bg: var(--primary-subtle);
--badge-in-progress-fg: var(--primary-text);
--badge-pending-bg: var(--badge-draft-bg);
--badge-pending-fg: var(--badge-draft-fg);
--badge-admin-bg: rgba(109, 40, 217, 0.1);
--badge-admin-fg: #6d28d9;
--badge-supervisor-bg: rgba(190, 24, 93, 0.1);
--badge-supervisor-fg: #be185d;
--badge-admin-bg: rgba(65, 68, 99, 0.12);
--badge-admin-fg: #414463;
--badge-supervisor-bg: rgba(208, 28, 65, 0.1);
--badge-supervisor-fg: #d01c41;
--badge-coach-bg: rgba(22, 163, 74, 0.1);
--badge-coach-fg: #15803d;
--badge-you-bg: var(--primary-subtle);
--badge-you-fg: var(--primary-text);
--badge-warn-bg: rgba(217, 119, 6, 0.12);
--badge-warn-fg: #b45309;
--badge-warn-bg: rgba(208, 28, 65, 0.12);
--badge-warn-fg: #d01c41;
--badge-q-bg: var(--primary-subtle);
--badge-q-fg: var(--primary-text);
--badge-opt-bg: #f1f5f9;
--badge-opt-fg: #475569;
--badge-opt-bg: #e8eaf0;
--badge-opt-fg: #52567a;
--badge-app-bg: rgba(22, 163, 74, 0.1);
--badge-app-fg: #15803d;
--badge-str-bg: rgba(109, 40, 217, 0.1);
--badge-str-fg: #6d28d9;
--badge-branch-bg: rgba(109, 40, 217, 0.1);
--badge-branch-fg: #6d28d9;
--badge-str-bg: rgba(65, 68, 99, 0.1);
--badge-str-fg: #414463;
--badge-branch-bg: rgba(65, 68, 99, 0.1);
--badge-branch-fg: #414463;
--lang-chip-fixed-bg: var(--primary-subtle);
--lang-chip-fixed-border: var(--primary-border);
--toast-success-bg: #ecfdf5;
--toast-success-fg: #166534;
--toast-success-border: #86efac;
--toast-error-bg: #fef2f2;
--toast-error-fg: #991b1b;
--toast-error-border: #fca5a5;
--toast-info-bg: #eff6ff;
--toast-info-fg: #1e40af;
--toast-info-border: #93c5fd;
--toast-error-bg: #fce8ed;
--toast-error-fg: #8a1230;
--toast-error-border: #e85a74;
--toast-info-bg: #e8eaf0;
--toast-info-fg: #414463;
--toast-info-border: #b8bcc8;
--save-flash-bg: var(--primary-subtle);
--progress-track: #e2e8f0;
--progress-track: #d5d8e2;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@ -175,7 +177,7 @@ body.logged-in:not(.login-active) .layout::after {
left: 0;
bottom: 0;
z-index: 100;
box-shadow: 2px 0 16px rgba(15, 23, 42, 0.06);
box-shadow: 2px 0 16px rgba(65, 68, 99, 0.06);
}
.sidebar-brand {
position: relative;
@ -185,7 +187,7 @@ body.logged-in:not(.login-active) .layout::after {
font-size: 1.05rem;
line-height: 1.35;
letter-spacing: -0.02em;
background: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, transparent 100%);
background: linear-gradient(180deg, rgba(65, 68, 99, 0.06) 0%, transparent 100%);
}
.sidebar-brand::before {
content: '';
@ -196,7 +198,7 @@ body.logged-in:not(.login-active) .layout::after {
width: 3px;
border-radius: 0 2px 2px 0;
background: var(--accent-gradient);
box-shadow: 0 0 8px rgba(37, 99, 235, 0.25);
box-shadow: 0 0 8px rgba(65, 68, 99, 0.25);
}
.sidebar-brand small {
display: block;
@ -241,7 +243,7 @@ body.logged-in:not(.login-active) .layout::after {
}
.sidebar-nav a.active svg {
color: var(--primary);
filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.2));
filter: drop-shadow(0 0 4px rgba(65, 68, 99, 0.2));
}
.sidebar-footer {
padding: 16px 20px;
@ -391,12 +393,12 @@ body.logged-in .btn-home:hover svg {
.btn-primary {
background: var(--accent-gradient);
color: var(--text-on-primary);
border-color: rgba(79, 70, 229, 0.35);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-color: rgba(65, 68, 99, 0.35);
box-shadow: 0 1px 2px rgba(65, 68, 99, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
background: linear-gradient(135deg, #2563eb 0%, #4338ca 45%, #4f46e5 100%);
border-color: rgba(67, 56, 202, 0.45);
background: linear-gradient(135deg, #414463 0%, #52567a 45%, #5a5e7a 100%);
border-color: rgba(52, 55, 82, 0.45);
box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-danger {
@ -656,7 +658,7 @@ body.logged-in .page-header-titles::before {
width: 3px;
border-radius: 2px;
background: var(--accent-gradient);
box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
box-shadow: 0 0 8px rgba(65, 68, 99, 0.2);
}
.page-header h1 {
font-size: 1.5rem;
@ -1149,7 +1151,7 @@ body.login-active .main-content {
border-color: rgba(148, 163, 184, 0.34);
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
box-shadow: 0 18px 50px rgba(65, 68, 99, 0.10), 0 2px 8px rgba(65, 68, 99, 0.06);
}
.login-card::before {
content: '';
@ -1235,7 +1237,7 @@ body.login-active .main-content {
.login-sso__button {
min-height: 50px;
background: #ffffff;
border-color: rgba(37, 99, 235, 0.34);
border-color: rgba(65, 68, 99, 0.34);
color: var(--primary-text);
font-weight: 600;
}
@ -1325,7 +1327,7 @@ body.login-active .main-content {
font-size: .875rem;
font-weight: 500;
line-height: 1.45;
box-shadow: var(--shadow-lg), 0 8px 24px rgba(15, 23, 42, 0.1);
box-shadow: var(--shadow-lg), 0 8px 24px rgba(65, 68, 99, 0.1);
opacity: 0;
transform: translateX(40px);
transition: opacity .3s, transform .3s;
@ -1442,10 +1444,10 @@ body.login-active .main-content {
height: 26px;
border: 2px solid var(--border);
border-top-color: var(--primary);
border-right-color: #4f46e5;
border-right-color: #5a5e7a;
border-radius: 50%;
animation: spin .7s linear infinite;
box-shadow: 0 0 10px rgba(37, 99, 235, 0.12);
box-shadow: 0 0 10px rgba(65, 68, 99, 0.12);
}
#app > .spinner,
.main-content > .spinner,
@ -1762,7 +1764,7 @@ table.data-table tbody tr.row-orphan-category td {
border-radius: var(--radius);
font-size: .875rem;
color: var(--primary-text);
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 1px rgba(65, 68, 99, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Tabs */
@ -1795,7 +1797,7 @@ table.data-table tbody tr.row-orphan-category td {
.tab-bar button.active {
color: var(--primary-text);
background: var(--primary-subtle);
box-shadow: inset 0 0 0 1px var(--primary-border), 0 1px 3px rgba(37, 99, 235, 0.08);
box-shadow: inset 0 0 0 1px var(--primary-border), 0 1px 3px rgba(65, 68, 99, 0.08);
}
/* Metadata form in editor */
@ -1923,8 +1925,8 @@ table.data-table tbody tr.row-orphan-category td {
justify-content: center;
padding: 16px;
background:
radial-gradient(ellipse 70% 50% at 50% 40%, rgba(37, 99, 235, 0.06), transparent 70%),
color-mix(in srgb, var(--bg) 50%, rgba(15, 23, 42, 0.35));
radial-gradient(ellipse 70% 50% at 50% 40%, rgba(65, 68, 99, 0.06), transparent 70%),
color-mix(in srgb, var(--bg) 50%, rgba(65, 68, 99, 0.35));
backdrop-filter: blur(4px);
}
.modal-overlay[hidden] {
@ -3223,7 +3225,7 @@ body.logged-in .insights-chart-card.card {
}
body.logged-in .insights-chart-card.card:hover {
border-color: var(--primary-border);
box-shadow: var(--shadow-lg), 0 0 16px rgba(37, 99, 235, 0.06);
box-shadow: var(--shadow-lg), 0 0 16px rgba(65, 68, 99, 0.06);
}
.insights-chart-hint {
margin: 0 0 14px;
@ -3309,7 +3311,7 @@ body.logged-in .insights-chart-card.card:hover {
background: linear-gradient(90deg, var(--primary), var(--primary-hover));
}
.insights-hchart-fill--warn {
background: linear-gradient(90deg, #d97706, var(--warning));
background: linear-gradient(90deg, #d01c41, var(--warning));
}
.insights-hchart-fill--muted {
background: var(--border);
@ -3478,12 +3480,12 @@ body.logged-in .insights-chart-card.card:hover {
}
.table-row-actions .reset-client-btn {
color: #b45309;
border-color: color-mix(in srgb, #b45309 35%, transparent);
color: #d01c41;
border-color: color-mix(in srgb, #d01c41 35%, transparent);
}
.table-row-actions .reset-client-btn:hover {
background: color-mix(in srgb, #b45309 10%, transparent);
background: color-mix(in srgb, #d01c41 10%, transparent);
}
.table-row-actions .delete-client-btn {
@ -4272,8 +4274,8 @@ select:disabled {
}
.band-badge.band-green { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.band-badge.band-yellow { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.band-badge.band-red { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.band-badge.band-none { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.band-badge.band-red { background: #fce8ed; color: #d01c41; border: 1px solid #e85a74; }
.band-badge.band-none { background: #e8eaf0; color: #6b7088; border: 1px solid #d5d8e2; }
/* Client list — scoring profiles */
.client-scoring-legend {