INSIGHT-MVP/packages/frontend/src/index.css
Thomas Reitz 3bedda2b9d feat: dark mode, collapsible sidebar, branding customization
- 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>
2026-03-10 11:47:51 +01:00

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;
}