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

switched to light mode
Some checks failed
PHPUnit / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Tom Hempel
2026-06-15 10:18:51 +02:00
parent b06c4bf3ee
commit 5dd0ee28c0
4 changed files with 122 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
website/css/style.css
View File

@ -1,98 +1,99 @@
:root {
color-scheme: dark;
--bg: #0f1218;
--surface: rgba(26, 31, 42, 0.94);
--surface-raised: rgba(34, 40, 54, 0.9);
--surface-hover: rgba(42, 49, 64, 0.92);
--surface-muted: rgba(22, 27, 36, 0.82);
--surface-input: rgba(34, 40, 54, 0.88);
--primary: #3b82f6;
--primary-hover: #60a5fa;
--primary-subtle: rgba(59, 130, 246, 0.14);
--primary-border: rgba(59, 130, 246, 0.35);
--primary-text: #93c5fd;
--danger: #f87171;
--danger-hover: #fca5a5;
--danger-subtle: rgba(248, 113, 113, 0.12);
--danger-subtle-hover: rgba(248, 113, 113, 0.22);
--danger-border: rgba(248, 113, 113, 0.45);
--danger-text: #fca5a5;
--danger-focus-ring: rgba(248, 113, 113, 0.35);
--success: #4ade80;
--warning: #fbbf24;
--text: #e8edf4;
--text-secondary: #94a3b8;
--text-on-primary: #fff;
--border: #2e3648;
color-scheme: light;
--bg: #eef2f7;
--surface: #ffffff;
--surface-raised: #f8fafc;
--surface-hover: #f1f5f9;
--surface-muted: #f8fafc;
--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);
--success: #16a34a;
--warning: #d97706;
--text: #0f172a;
--text-secondary: #64748b;
--text-on-primary: #ffffff;
--border: #e2e8f0;
--radius: 8px;
--radius-lg: 12px;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
--focus-ring: rgba(59, 130, 246, 0.28);
--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-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);
--focus-ring: rgba(37, 99, 235, 0.22);
--sidebar-width: 240px;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--table-header-bg: rgba(30, 36, 48, 0.97);
--table-stripe-bg: rgba(30, 36, 48, 0.45);
--row-hover-bg: rgba(37, 44, 58, 0.85);
--sticky-shadow: rgba(0, 0, 0, 0.35);
--atmosphere-blue: rgba(59, 130, 246, 0.11);
--atmosphere-indigo: rgba(99, 102, 241, 0.07);
--grid-line: rgba(148, 163, 184, 0.035);
--accent-gradient: linear-gradient(135deg, #3b82f6 0%, #4f6ef7 45%, #6366f1 100%);
--accent-gradient-soft: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(99, 102, 241, 0.35));
--accent-glow: 0 4px 20px rgba(59, 130, 246, 0.22);
--shine-line: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.12), transparent);
--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);
--shine-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
/* Incomplete translation highlight */
--trans-missing-bg: #1c222d;
--trans-missing-bg-hover: #242b38;
--trans-missing-border: #3d4a5c;
--trans-missing-accent: #64748b;
--trans-missing-placeholder: #64748b;
--trans-missing-bg: #fffbeb;
--trans-missing-bg-hover: #fef3c7;
--trans-missing-border: #fcd34d;
--trans-missing-accent: #d97706;
--trans-missing-placeholder: #92400e;
/* Status badges */
--badge-draft-bg: #2a3140;
--badge-draft-fg: #94a3b8;
--badge-active-bg: rgba(74, 222, 128, 0.15);
--badge-active-fg: #4ade80;
--badge-archived-bg: rgba(251, 191, 36, 0.15);
--badge-archived-fg: #fbbf24;
--badge-draft-bg: #f1f5f9;
--badge-draft-fg: #64748b;
--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-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(167, 139, 250, 0.18);
--badge-admin-fg: #c4b5fd;
--badge-supervisor-bg: rgba(244, 114, 182, 0.15);
--badge-supervisor-fg: #f9a8d4;
--badge-coach-bg: rgba(74, 222, 128, 0.12);
--badge-coach-fg: #86efac;
--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-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(251, 191, 36, 0.15);
--badge-warn-fg: #fcd34d;
--badge-warn-bg: rgba(217, 119, 6, 0.12);
--badge-warn-fg: #b45309;
--badge-q-bg: var(--primary-subtle);
--badge-q-fg: var(--primary-text);
--badge-opt-bg: #2a3140;
--badge-opt-fg: #cbd5e1;
--badge-app-bg: rgba(74, 222, 128, 0.12);
--badge-app-fg: #86efac;
--badge-str-bg: rgba(167, 139, 250, 0.15);
--badge-str-fg: #c4b5fd;
--badge-branch-bg: rgba(167, 139, 250, 0.18);
--badge-branch-fg: #c4b5fd;
--badge-opt-bg: #f1f5f9;
--badge-opt-fg: #475569;
--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;
--lang-chip-fixed-bg: var(--primary-subtle);
--lang-chip-fixed-border: var(--primary-border);
--toast-success-bg: #1a2e22;
--toast-success-fg: #bbf7d0;
--toast-success-border: #3d6b4f;
--toast-error-bg: #2e1a1a;
--toast-error-fg: #fecaca;
--toast-error-border: #7f3f3f;
--toast-info-bg: #1a2438;
--toast-info-fg: #bfdbfe;
--toast-info-border: #3b5a8a;
--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;
--save-flash-bg: var(--primary-subtle);
--progress-track: #2e3648;
--progress-track: #e2e8f0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@ -164,7 +165,7 @@ body.logged-in:not(.login-active) .layout::after {
/* Sidebar */
.sidebar {
width: var(--sidebar-width);
background: color-mix(in srgb, var(--surface) 88%, transparent);
background: var(--surface);
backdrop-filter: blur(14px);
border-right: 1px solid var(--border);
display: flex;
@ -174,7 +175,7 @@ body.logged-in:not(.login-active) .layout::after {
left: 0;
bottom: 0;
z-index: 100;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
box-shadow: 2px 0 16px rgba(15, 23, 42, 0.06);
}
.sidebar-brand {
position: relative;
@ -184,7 +185,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(59, 130, 246, 0.08) 0%, transparent 100%);
background: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, transparent 100%);
}
.sidebar-brand::before {
content: '';
@ -195,7 +196,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 12px rgba(59, 130, 246, 0.45);
box-shadow: 0 0 8px rgba(37, 99, 235, 0.25);
}
.sidebar-brand small {
display: block;
@ -240,13 +241,13 @@ body.logged-in:not(.login-active) .layout::after {
}
.sidebar-nav a.active svg {
color: var(--primary);
filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.35));
filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.2));
}
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid var(--border);
font-size: .85rem;
background: rgba(15, 18, 24, 0.35);
background: var(--surface-muted);
}
.sidebar-footer .user-info {
color: var(--text-secondary);
@ -388,13 +389,13 @@ body.logged-in .btn-home:hover svg {
.btn-primary {
background: var(--accent-gradient);
color: var(--text-on-primary);
border-color: rgba(99, 102, 241, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
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);
}
.btn-primary:hover {
background: linear-gradient(135deg, #60a5fa 0%, #6d8ef8 45%, #818cf8 100%);
border-color: rgba(129, 140, 248, 0.6);
box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
background: linear-gradient(135deg, #2563eb 0%, #4338ca 45%, #4f46e5 100%);
border-color: rgba(67, 56, 202, 0.45);
box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-danger {
background: var(--danger-subtle);
@ -479,7 +480,7 @@ body.logged-in .btn-home:hover svg {
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .03em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.badge-draft { background: var(--badge-draft-bg); color: var(--badge-draft-fg); }
.badge-active { background: var(--badge-active-bg); color: var(--badge-active-fg); }
@ -653,7 +654,7 @@ body.logged-in .page-header-titles::before {
width: 3px;
border-radius: 2px;
background: var(--accent-gradient);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
}
.page-header h1 {
font-size: 1.5rem;
@ -909,7 +910,7 @@ table.data-table tbody tr:nth-child(even) td {
background: var(--table-stripe-bg);
}
table.data-table tbody tr:nth-child(even) td.sticky-col {
background: color-mix(in srgb, var(--table-stripe-bg) 70%, var(--surface));
background: color-mix(in srgb, var(--table-stripe-bg) 80%, var(--surface));
}
table.data-table tr:hover td {
background: var(--row-hover-bg);
@ -924,7 +925,7 @@ table.data-table .sticky-col {
position: sticky;
left: 0;
z-index: 1;
background: color-mix(in srgb, var(--surface) 98%, var(--bg));
background: var(--surface);
box-shadow: 2px 0 4px var(--sticky-shadow);
}
table.data-table thead th.sticky-col {
@ -1100,8 +1101,8 @@ body.login-active .main-content {
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 60% at 30% 40%, rgba(59, 130, 246, 0.16), transparent 65%),
radial-gradient(ellipse 55% 45% at 75% 65%, rgba(99, 102, 241, 0.1), transparent 55%),
radial-gradient(ellipse 80% 60% at 30% 40%, rgba(37, 99, 235, 0.12), transparent 65%),
radial-gradient(ellipse 55% 45% at 75% 65%, rgba(79, 70, 229, 0.08), transparent 55%),
var(--bg);
}
@ -1119,20 +1120,20 @@ body.login-active .main-content {
position: absolute;
border-radius: 50%;
filter: blur(72px);
opacity: 0.45;
opacity: 0.35;
animation: login-orb-drift 22s ease-in-out infinite;
}
.login-orb--a {
width: 420px;
height: 420px;
background: rgba(59, 130, 246, 0.26);
background: rgba(37, 99, 235, 0.15);
top: 10%;
left: 15%;
}
.login-orb--b {
width: 300px;
height: 300px;
background: rgba(99, 102, 241, 0.16);
background: rgba(79, 70, 229, 0.1);
bottom: 10%;
right: 20%;
animation-delay: -9s;
@ -1256,7 +1257,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(0, 0, 0, 0.35);
box-shadow: var(--shadow-lg), 0 8px 24px rgba(15, 23, 42, 0.1);
opacity: 0;
transform: translateX(40px);
transition: opacity .3s, transform .3s;
@ -1373,10 +1374,10 @@ body.login-active .main-content {
height: 26px;
border: 2px solid var(--border);
border-top-color: var(--primary);
border-right-color: #6366f1;
border-right-color: #4f46e5;
border-radius: 50%;
animation: spin .7s linear infinite;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
box-shadow: 0 0 10px rgba(37, 99, 235, 0.12);
}
#app > .spinner,
.main-content > .spinner,
@ -1485,7 +1486,7 @@ table.data-table tbody tr.row-orphan-category td {
flex-shrink: 0;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
background: rgba(34, 40, 54, 0.5);
background: var(--surface-muted);
}
.assign-panel-header h3 {
@ -1693,7 +1694,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(59, 130, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Tabs */
@ -1726,7 +1727,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 4px rgba(59, 130, 246, 0.12);
box-shadow: inset 0 0 0 1px var(--primary-border), 0 1px 3px rgba(37, 99, 235, 0.08);
}
/* Metadata form in editor */
@ -1799,8 +1800,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(59, 130, 246, 0.08), transparent 70%),
color-mix(in srgb, var(--bg) 25%, rgba(0, 0, 0, 0.7));
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));
backdrop-filter: blur(4px);
}
.modal-overlay[hidden] {
@ -1814,7 +1815,7 @@ body.modal-open {
max-width: 460px;
max-height: calc(100vh - 32px);
overflow: auto;
background: color-mix(in srgb, var(--surface) 98%, var(--bg));
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg), var(--shadow-inset);
@ -2295,7 +2296,7 @@ body.modal-open {
.trans-input-missing {
border-color: var(--trans-missing-border) !important;
background: var(--surface) !important;
box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.12);
box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.18);
}
.trans-input-missing::placeholder {
color: var(--trans-missing-placeholder);
@ -2711,7 +2712,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 20px rgba(59, 130, 246, 0.08);
box-shadow: var(--shadow-lg), 0 0 16px rgba(37, 99, 235, 0.06);
}
.insights-chart-hint {
margin: 0 0 14px;
@ -3650,10 +3651,10 @@ select:disabled {
font-weight: 600;
letter-spacing: .02em;
}
.band-badge.band-green { background: #14532d; color: #bbf7d0; border: 1px solid #166534; }
.band-badge.band-yellow { background: #713f12; color: #fef08a; border: 1px solid #854d0e; }
.band-badge.band-red { background: #7f1d1d; color: #fecaca; border: 1px solid #991b1b; }
.band-badge.band-none { background: #334155; color: #cbd5e1; border: 1px solid #475569; }
.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; }
/* Client list — scoring profiles */
.client-scoring-legend {
@ -3661,7 +3662,7 @@ select:disabled {
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
background: var(--surface-elevated);
}
.client-scoring-legend-title {
margin: 0 0 6px;
@ -3705,7 +3706,7 @@ select:disabled {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
background: var(--surface-elevated);
font-size: .8125rem;
line-height: 1.35;
}
@ -3776,7 +3777,7 @@ select:disabled {
}
.coach-band-trigger:hover {
border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
background: var(--surface-hover, rgba(0, 0, 0, 0.03));
background: var(--surface-hover);
}
.coach-band-picker.is-open .coach-band-trigger,
.coach-band-trigger:focus-visible {
@ -3834,7 +3835,7 @@ select:disabled {
transition: background 0.12s, border-color 0.12s;
}
.coach-band-option:hover {
background: var(--surface-hover, rgba(0, 0, 0, 0.04));
background: var(--surface-hover);
}
.coach-band-option.is-selected {
border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
@ -3861,7 +3862,7 @@ select:disabled {
padding: 16px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
background: var(--surface-elevated);
}
.coach-band-confirm-col {
display: flex;