mirror of
http://172.20.10.11:3000/gitadmin/INSIGHT-MVP.git
synced 2026-06-25 03:06:39 +02:00
- Add Light/Dark/System theme toggle with ThemeContext and CSS variables - Sidebar fully collapsible (icons-only mode, persisted in localStorage) - Anwendungen section collapsible with chevron toggle - Admin "Anpassungen" page: logo upload, sidebar color picker with presets - Backend branding endpoints (GET/POST /settings/branding) stored in Redis - Optional custom icon upload for external links (click icon field) - Backend favicon proxy with HTML parsing for reliable icon loading - Dark mode CSS variables for all components - Login page SSO button and error styles use CSS variables Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
98 lines
2 KiB
CSS
98 lines
2 KiB
CSS
/* ============================================================
|
|
INSIGHT MVP - Globale Styles
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* Farben - Corporate Design */
|
|
--color-primary: #1a56db;
|
|
--color-primary-hover: #1e40af;
|
|
--color-primary-light: #dbeafe;
|
|
--color-secondary: #6b7280;
|
|
--color-success: #059669;
|
|
--color-warning: #d97706;
|
|
--color-error: #dc2626;
|
|
|
|
/* Graustufen */
|
|
--color-bg: #f9fafb;
|
|
--color-bg-card: #ffffff;
|
|
--color-border: #e5e7eb;
|
|
--color-text: #111827;
|
|
--color-text-secondary: #6b7280;
|
|
--color-text-muted: #9ca3af;
|
|
|
|
/* Layout */
|
|
--sidebar-width: 240px;
|
|
--header-height: 56px;
|
|
|
|
/* Schatten */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
|
|
/* Radien */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
'Helvetica Neue', Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
color: var(--color-text);
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
/* ===== Dark Mode ===== */
|
|
:root[data-theme='dark'] {
|
|
--color-primary: #3b82f6;
|
|
--color-primary-hover: #2563eb;
|
|
--color-primary-light: #1e3a5f;
|
|
--color-secondary: #9ca3af;
|
|
--color-success: #10b981;
|
|
--color-warning: #f59e0b;
|
|
--color-error: #ef4444;
|
|
|
|
--color-bg: #0f172a;
|
|
--color-bg-card: #1e293b;
|
|
--color-border: #334155;
|
|
--color-text: #f1f5f9;
|
|
--color-text-secondary: #94a3b8;
|
|
--color-text-muted: #64748b;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
|
|
|
--sidebar-bg: #0f172a;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|