Eduard Wisch
24e05680f9
- Svelte 5 + SvelteKit + Tailwind 4 (VDE Katalog Template-Stil, AWL Dark Theme) - Fastify + Drizzle + MariaDB Backend (DB: leckerbuch auf 192.168.155.11) - Dual-Barcode-Scanner (ZXing + zbar-wasm parallel, aus HandyBarcodeScanner portiert) - Open Food Facts API-Proxy mit automatischer Laktose-Erkennung (Allergen-Flags + Schätztabelle) - Lactase-Dosisrechner (konfigurierbarer FCC/g-Faktor) - Produkt-CRUD, Laden-Verwaltung, Tags, Einstellungen - Docker-Setup (Dockerfile + docker-compose.yml) - Mobile-first PWA mit Bottom-Navigation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
152 lines
3.8 KiB
CSS
152 lines
3.8 KiB
CSS
@import 'tailwindcss';
|
|
|
|
:root {
|
|
--bg-primary: #1d1e20;
|
|
--bg-secondary: #2b2c2e;
|
|
--bg-panel: #3b3c3e;
|
|
--bg-card: #38393d;
|
|
--bg-input: #464646;
|
|
--bg-hover: #2b2d2f;
|
|
--bg-menu: #3d3e40;
|
|
--text-primary: #dcdcdc;
|
|
--text-secondary: #aaaaaa;
|
|
--text-muted: #777777;
|
|
--accent: #4390dc;
|
|
--accent-hover: #5ba3e8;
|
|
--accent-light: rgba(67, 144, 220, 0.15);
|
|
--border: #555555;
|
|
--border-light: #666666;
|
|
--success: #65b84d;
|
|
--warning: #f2b81e;
|
|
--danger: #fc545b;
|
|
--info: #4390dc;
|
|
--radius: 6px;
|
|
--radius-lg: 10px;
|
|
--lactose-warn: #e8a045;
|
|
--lactose-free: #65b84d;
|
|
--lactose-high: #fc545b;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
font-size: 0.92em;
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
-webkit-tap-highlight-color: transparent;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg-secondary); }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
|
|
|
|
.panel {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 16px;
|
|
}
|
|
|
|
.panel-header {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 12px 16px;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
}
|
|
.card:hover, .card:active {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-light);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border: none;
|
|
border-radius: var(--radius);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s, opacity 0.15s;
|
|
color: white;
|
|
}
|
|
.btn-primary { background: var(--accent); }
|
|
.btn-primary:hover { background: var(--accent-hover); }
|
|
.btn-success { background: var(--success); }
|
|
.btn-danger { background: var(--danger); }
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
}
|
|
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
|
|
.btn-lg { height: 44px; padding: 0 20px; font-size: 0.95rem; border-radius: var(--radius-lg); }
|
|
.btn-block { width: 100%; }
|
|
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
input, select, textarea {
|
|
background: var(--bg-input);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 8px 12px;
|
|
font-size: 0.9rem;
|
|
width: 100%;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-light);
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
.badge-accent { background: var(--accent-light); color: var(--accent); }
|
|
.badge-success { background: rgba(101, 184, 77, 0.15); color: var(--success); }
|
|
.badge-warning { background: rgba(242, 184, 30, 0.15); color: var(--warning); }
|
|
.badge-danger { background: rgba(252, 84, 91, 0.15); color: var(--danger); }
|
|
|
|
.lactose-free { color: var(--lactose-free); }
|
|
.lactose-warn { color: var(--lactose-warn); }
|
|
.lactose-high { color: var(--lactose-high); }
|
|
|
|
@media (min-width: 768px) {
|
|
.mobile-only { display: none !important; }
|
|
}
|
|
@media (max-width: 767px) {
|
|
.desktop-only { display: none !important; }
|
|
}
|