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

5
website/index.html
View File

@ -4,8 +4,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light"> <meta name="color-scheme" content="light">
<meta name="theme-color" content="#eef2f7"> <meta name="theme-color" content="#f4f5f8">
<title>BW Sch&uuml;tzt - NAT-AS</title> <title>BW Sch&uuml;tzt - NAT-AS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>