/* * custom.css – gemeinsames Design-System fuer creativShare * * An das Referenz-Designsystem des Inventory-Projekts angeglichen: * - Primaerfarbe #52AD31, Signature-Radius 5px (Cards, Modals, Buttons, * Inputs, Badges, Login-Box ...) * - Schrift: Source Sans 3 * - Dark Mode ueber [data-bs-theme="dark"] auf , Umschalter im * Header, Zustand in localStorage * - Cards: kein Rahmen, weicher Schatten, gruener Akzentstrich am Titel * - Modals: gleiches Prinzip + sanfte Scale/Fade-Animation beim Oeffnen, * Ghost-Style fuer "Abbrechen" * - Formulare: Labels klein/uppercase/grau, Fokus-Zustand gruen * - Responsive: Panels/Tabellen/Modals passen sich auf Mobile an */ :root { --bs-primary: #52AD31; --radius: 5px; --card-w: 420px; --page-bg: #ffffff; --wt-bg: #ffffff; --wt-border: #eef0f2; --wt-head-bg: #f4f8f3; --wt-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); --text-secondary: #6c757d; --hover-tint: #f4f8f3; } [data-bs-theme="dark"] { --page-bg: #1a1d20; --wt-bg: #22262a; --wt-border: #33383d; --wt-head-bg: #262d24; --wt-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); --text-secondary: #9aa0a6; --hover-tint: rgba(82, 173, 49, 0.12); } html, body { height: 100%; } body { min-height: 100dvh; background: var(--page-bg); font-family: 'Source Sans 3', sans-serif; } /* ---------- Animationen ---------- */ /* Sanfter Uebergang beim Umschalten von Hell-/Dunkelmodus statt hartem Wechsel. */ body, .card, .wt-panel, .stat-tile, .siteHeader, .form-control, .form-select, .theme-toggle, .badge-pill, .login-card { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes markPulse { 0%, 100% { box-shadow: 0 6px 16px rgba(82, 173, 49, 0.35); } 50% { box-shadow: 0 6px 22px rgba(82, 173, 49, 0.55); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } [data-bs-theme="dark"] body { background: var(--page-bg); color: #e9ecef; } a { color: var(--bs-primary); } /* ---------- Header / Branding ---------- */ /* Echte Header-Leiste wie das "app-header" im Referenzprojekt: weiss, fixiert oben, weicher Schatten statt harter Trennlinie. */ .siteHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 20; background: var(--wt-bg); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05); } [data-bs-theme="dark"] .siteHeader { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } .siteHeader img { width: 240px; max-width: 50vw; height: auto; } .site-logo-link { display: inline-flex; line-height: 0; transition: opacity 0.15s ease; } @media (hover: hover) and (pointer: fine) { .site-logo-link:hover { opacity: 0.85; } } .theme-toggle { border: 1px solid var(--wt-border); background: var(--wt-bg); color: var(--text-secondary); border-radius: var(--radius); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .theme-toggle:hover { color: var(--bs-primary); border-color: var(--bs-primary); transform: translateY(-1px); } .theme-toggle:active { transform: scale(.9) rotate(-10deg); } .theme-toggle i { transition: transform .3s ease; } .theme-toggle:hover i { transform: rotate(20deg); } .theme-toggle .bi-moon-stars-fill { display: none; } [data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: none; } [data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: inline-block; } /* Auf der Login-Seite sitzt der Toggle frei schwebend oben rechts, da die Login-Card 1:1 der Referenz entspricht (ohne Kopfzeile). */ .login-page .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 10; } /* ---------- Card / Panel ---------- */ /* Breite relativ zum eigenen Elternelement (100%) statt zum Viewport (vw) - vw ignoriert das Padding des umgebenden Containers (z.B. die "p-3"-Huelle auf datapool.php) und fuehrt am Handy zu einem Panel, das breiter als der verfuegbare Platz ist und dadurch rechts ueberlaeuft/den rechten Abstand auffrisst. */ .wt-panel { width: min(100%, var(--card-w)); border-radius: var(--radius); background: var(--wt-bg); box-shadow: var(--wt-shadow); border: 1px solid var(--wt-border); overflow: hidden; margin: 0 auto; animation: fadeSlideUp .5s ease both; } .wt-panel.wt-panel-wide { --card-w: 1280px; } .wt-panel.wt-panel-wide ~ .wt-panel.wt-panel-wide, .wt-panel + .wt-panel { animation-delay: .08s; } .wt-head { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--wt-border); background: var(--wt-head-bg); } .brand { font-weight: 700; font-size: 1.1rem; letter-spacing: .2px; position: relative; padding-left: 14px; } .brand::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--bs-primary); } .wt-body { padding: 18px 18px 8px; } .wt-form { padding: 14px 18px 18px; } .wt-footer { padding: 16px 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--wt-border); background: var(--wt-head-bg); } /* ---------- Formulare ---------- */ .form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-secondary); } .form-control, .form-select { border-radius: var(--radius); border: 1px solid var(--wt-border); background: var(--wt-bg); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { color: #e9ecef; } .form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(82, 173, 49, 0.15); } /* Input-Group (z.B. Freigabe-Link + "Kopieren"-Button) an das 5px-Signature- Radius anpassen statt Bootstraps Standardrundung zu verwenden. */ .input-group > .form-control, .input-group > .btn { border-radius: var(--radius) !important; } .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; } /* ---------- Buttons ---------- */ .btn { border-radius: var(--radius); font-weight: 500; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.97); } .send-btn { padding: 10px 18px; } /* Icon-only Buttons/Links (z.B. QR-Code, E-Mail, Teilen in den Tabellen): zentriert Inhalte per Default nicht wie