/* ============================================================ Eigenes, modernes Theme für Baby Buddy. Designsprache angelehnt an die Rezepte-App (weiche Karten, Pill-Buttons, klare Akzente), Farbschema: Dunkelblau als Hauptfarbe, Weiß als Akzent. Wird NACH babybuddy/css/app.css geladen und überschreibt gezielt über Bootstrap-5-CSS-Variablen. Kein Recompile nötig. ============================================================ */ /* Carlito: freie, maßgleiche Calibri-Alternative – wie in der Rezepte-App, lokal ausgeliefert, damit die Schrift auf jedem Gerät (auch offline) gleich aussieht. */ @font-face { font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/custom/fonts/carlito-400.woff2") format("woff2"); } @font-face { font-family: "Carlito"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/custom/fonts/carlito-400i.woff2") format("woff2"); } @font-face { font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/custom/fonts/carlito-700.woff2") format("woff2"); } @font-face { font-family: "Carlito"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/custom/fonts/carlito-700i.woff2") format("woff2"); } :root, [data-bs-theme="dark"] { /* --- Dunkelblaue Palette --- */ --bb-navy: #1b1d21; /* Grundfläche */ --bb-navy-2: #25272c; /* Karten / Panels */ --bb-navy-3: #2e3137; /* Eingabefelder */ --bb-line: rgba(255, 255, 255, 0.12); --bb-text: #e9eaed; --bb-muted: #a6abb3; --bb-blue: #8a9099; /* sekundärer Blau-Akzent (Links) */ /* Akzent = Weiß */ --bb-accent: #ffffff; /* Bootstrap-Variablen umbiegen */ --bs-primary: #ffffff; --bs-primary-rgb: 255, 255, 255; --bs-body-bg: var(--bb-navy); --bs-body-color: var(--bb-text); --bs-emphasis-color: #ffffff; --bs-secondary-bg: var(--bb-navy-2); --bs-secondary-bg-rgb: 37, 39, 44; --bs-tertiary-bg: var(--bb-navy-3); --bs-border-color: var(--bb-line); --bs-border-color-translucent: var(--bb-line); --bs-link-color: #cdd2da; --bs-link-color-rgb: 205, 210, 218; --bs-link-hover-color: #ffffff; --bs-secondary-color: var(--bb-muted); /* Rundungen & Typografie (wie Rezepte-App: ~14px) */ --bs-border-radius: 0.9rem; --bs-border-radius-sm: 0.6rem; --bs-border-radius-lg: 1.15rem; --bs-body-font-family: "Carlito", Calibri, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Schrift global durchsetzen (Babybuddy setzt sie an einigen Stellen explizit) */ body, .navbar, .btn, .form-control, .form-select, .card, h1, h2, h3, h4, h5, h6 { font-family: "Carlito", Calibri, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } body { background: radial-gradient(1200px 620px at 12% -10%, rgba(255, 255, 255, 0.05), transparent 60%), radial-gradient(1000px 520px at 112% 0%, rgba(255, 255, 255, 0.03), transparent 55%), var(--bb-navy); background-attachment: fixed; color: var(--bb-text); letter-spacing: 0.1px; } /* Navbar: dunkelblaues Glas */ .navbar { background-color: rgba(24, 26, 30, 0.74) !important; backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--bb-line); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.30); } .navbar-brand { font-weight: 700; letter-spacing: 0.2px; color: #ffffff !important; } /* Karten / Listen / Panels: weiche Schatten + Rundung */ .card, .list-group, .dropdown-menu, .modal-content { border-radius: var(--bs-border-radius-lg); border-color: var(--bb-line); } .card { background-color: var(--bb-navy-2); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32); } .card-header { background-color: transparent; border-bottom-color: var(--bb-line); font-weight: 600; color: #ffffff; } .dropdown-menu, .modal-content { background-color: var(--bb-navy-2); } /* Buttons: Pill-Form wie in der Rezepte-App. Primär = Weiß (Akzent) auf Dunkelblau. */ .btn { border-radius: 999px; font-weight: 600; padding: 0.5rem 1.1rem; } .btn-primary { --bs-btn-color: #1b1d21; --bs-btn-bg: #ffffff; --bs-btn-border-color: #ffffff; --bs-btn-hover-color: #1b1d21; --bs-btn-hover-bg: #f0f0f2; --bs-btn-hover-border-color: #f0f0f2; --bs-btn-active-color: #1b1d21; --bs-btn-active-bg: #e2e3e6; --bs-btn-active-border-color: #e2e3e6; font-weight: 700; box-shadow: 0 6px 18px rgba(255, 255, 255, 0.14); } /* Sekundär/Outline an die Palette angleichen */ .btn-secondary { --bs-btn-bg: var(--bb-navy-3); --bs-btn-border-color: var(--bb-line); --bs-btn-color: #ffffff; --bs-btn-hover-bg: #353941; --bs-btn-hover-border-color: #353941; --bs-btn-hover-color: #ffffff; } .btn-outline-primary { --bs-btn-color: #ffffff; --bs-btn-border-color: rgba(255, 255, 255, 0.55); --bs-btn-hover-bg: #ffffff; --bs-btn-hover-color: #1b1d21; --bs-btn-hover-border-color: #ffffff; } /* Breadcrumb als dezente Pille */ .breadcrumb { background-color: var(--bb-navy-2); padding: 0.6rem 1rem; border-radius: var(--bs-border-radius); } .breadcrumb a { color: var(--bs-link-color); } /* Formularfelder */ .form-control, .form-select { background-color: var(--bb-navy-3); border-color: var(--bb-line); border-radius: var(--bs-border-radius); color: var(--bb-text); } .form-control::placeholder { color: var(--bb-muted); } .form-control:focus, .form-select:focus { background-color: var(--bb-navy-3); border-color: rgba(255, 255, 255, 0.65); box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.18); color: var(--bb-text); } /* Tabellen */ .table { --bs-table-bg: transparent; --bs-table-color: var(--bb-text); } .table > :not(caption) > * > * { border-color: var(--bb-line); } /* Aktive Navigation/Listen im weißen Akzent */ .nav-pills .nav-link.active, .list-group-item.active { background-color: #ffffff; border-color: #ffffff; color: #1b1d21; font-weight: 600; } /* Badges & Links */ .badge { border-radius: 0.6rem; font-weight: 600; } a { text-decoration: none; } a:hover { text-decoration: underline; } /* Marken-Logo (Navbar oben links + Login-Seite) auf das eigene Icon umstellen. Die originalen verweisen auf eine gehashte, unveränderlich gecachte Datei; die eigene versionierte URL umgeht den Cache zuverlässig. */ .navbar-brand img, img.d-inline-block[width="65"] { content: url("/static/custom/icon-brand.png?v=4"); } /* In-App-Icons (eigene Babybuddy-Icon-Font) etwas präsenter und sauber ausgerichtet */ [class^="icon-"], [class*=" icon-"] { vertical-align: -0.06em; line-height: 1; } .btn [class^="icon-"], .btn [class*=" icon-"] { font-size: 1.08em; } /* ============================================================ Vollbild-Speichern-Animation (Stil "Gekocht" der Rezepte-App): abgedunkeltes Overlay, vollflächig aufsteigende Sterne, zentral ein animiertes Baby mit Erfolgs-Medaille (Haken wird gezeichnet) + Funkeln. Gesteuert von app-custom.js. Respektiert prefers-reduced-motion. ============================================================ */ #bb-save-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(20, 22, 26, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.25s ease; } #bb-save-overlay.active { opacity: 1; } /* Vollflächig aufsteigende Sterne/Herzchen */ .bb-rise { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .bb-rise-item { position: absolute; top: 100%; color: #ffffff; opacity: 0; will-change: transform, opacity; text-shadow: 0 0 12px rgba(120, 170, 255, 0.6); } .bb-rise-item:nth-child(3n) { color: #cdd2da; } .bb-rise-item:nth-child(4n) { color: #b8bdc6; } #bb-save-overlay.active .bb-rise-item { animation-name: bb-rise-up; animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95); animation-fill-mode: both; } @keyframes bb-rise-up { 0% { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg) scale(0.9); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(-118vh) translateX(24px) rotate(40deg) scale(1.1); } } /* Zentrale Bühne */ .bb-save-stage { text-align: center; position: relative; } .bb-save-svg { width: min(74vw, 320px); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 12px 32px rgba(0, 12, 30, 0.55)); } .bb-save-svg g, .bb-save-svg path { transform-box: fill-box; } .bb-save-svg .bb-icon { transform-origin: 50% 50%; } .bb-save-svg .bb-badge, .bb-save-svg .bb-spark { transform-origin: 50% 50%; } /* Motiv blendet sanft ein; die eigentliche, ereignisspezifische Bewegung läuft darunter (siehe je-Szene-Regeln). */ .bb-save-svg .bb-icon { opacity: 0; } #bb-save-overlay.active .bb-icon { animation: bb-icon-fade 0.45s ease-out both; } @keyframes bb-icon-fade { from { opacity: 0; } to { opacity: 1; } } /* ---- Stillen: das Herz schlägt zweimal (lub-dub) ---- */ #bb-save-overlay[data-scene="feeding"] .bb-heart-main { transform-origin: 50% 55%; } #bb-save-overlay[data-scene="feeding"].active .bb-heart-main { animation: bb-heartbeat 1.15s ease-in-out 0.55s 2 both; } @keyframes bb-heartbeat { 0% { transform: scale(1); } 10% { transform: scale(1.15); } 20% { transform: scale(1); } 32% { transform: scale(1.22); } 48% { transform: scale(1); } 100% { transform: scale(1); } } #bb-save-overlay[data-scene="feeding"] .bb-heart-shine { opacity: 0; } #bb-save-overlay[data-scene="feeding"].active .bb-heart-shine { animation: bb-shine-in 0.5s ease-out 1.0s both; } @keyframes bb-shine-in { from { opacity: 0; } to { opacity: 0.5; } } /* Wickeln nutzt weiterhin das kleine Herz */ #bb-save-overlay[data-scene="diaper"].active .bb-heart { transform-origin: 50% 50%; animation: bb-pulse 0.85s ease-in-out 0.8s 3 both; } /* ---- Abpumpen: Tropfen fallen hinein, der Milchstand steigt ---- */ #bb-save-overlay[data-scene="pumping"].active .bb-fill { animation: bb-fillup 1.9s cubic-bezier(0.4, 0, 0.5, 1) 0.7s both; } @keyframes bb-fillup { from { transform: translateY(110px); } to { transform: translateY(0); } } #bb-save-overlay[data-scene="pumping"] .bb-drop { opacity: 0; } #bb-save-overlay[data-scene="pumping"].active .bb-drop1 { animation: bb-fall 1.0s ease-in 0.5s infinite; } #bb-save-overlay[data-scene="pumping"].active .bb-drop2 { animation: bb-fall 1.0s ease-in 1.0s infinite; } @keyframes bb-fall { 0% { opacity: 0; transform: translateY(-6px) scaleY(0.8); } 15% { opacity: 1; } 80% { opacity: 1; transform: translateY(56px) scaleY(1.1); } 100% { opacity: 0; transform: translateY(60px) scaleY(0.6); } } /* ---- Wickeln: die Klebelaschen klappen zu, Windel federt kurz ---- */ #bb-save-overlay[data-scene="diaper"] .bb-tab-l { transform-origin: 100% 50%; } #bb-save-overlay[data-scene="diaper"] .bb-tab-r { transform-origin: 0% 50%; } #bb-save-overlay[data-scene="diaper"].active .bb-tab-l { animation: bb-fold-l 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.5s both; } #bb-save-overlay[data-scene="diaper"].active .bb-tab-r { animation: bb-fold-r 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.6s both; } @keyframes bb-fold-l { from { transform: rotate(-55deg); } to { transform: rotate(0); } } @keyframes bb-fold-r { from { transform: rotate(55deg); } to { transform: rotate(0); } } #bb-save-overlay[data-scene="diaper"] .bb-diaper-body { transform-origin: 50% 30%; } #bb-save-overlay[data-scene="diaper"].active .bb-diaper-body { animation: bb-squish 0.5s ease-out 0.5s both; } @keyframes bb-squish { 0% { transform: scale(1, 1); } 40% { transform: scale(1.05, 0.94); } 100% { transform: scale(1, 1); } } /* ---- Schlaf: Mond schwebt ruhig auf und ab, Zzz steigen weich auf ---- */ #bb-save-overlay[data-scene="sleep"] .bb-moon { transform-origin: 50% 50%; will-change: transform; } #bb-save-overlay[data-scene="sleep"].active .bb-moon { animation: bb-moon-bob 3.2s ease-in-out 0.4s infinite; } @keyframes bb-moon-bob { 0% { transform: translateY(0); } 50% { transform: translateY(-7px); } 100% { transform: translateY(0); } } #bb-save-overlay[data-scene="sleep"] .bb-z { opacity: 0; will-change: transform, opacity; } #bb-save-overlay[data-scene="sleep"].active .bb-z1 { animation: bb-zfloat 2.7s ease-in-out 0.5s infinite; } #bb-save-overlay[data-scene="sleep"].active .bb-z2 { animation: bb-zfloat 2.7s ease-in-out 1.4s infinite; } #bb-save-overlay[data-scene="sleep"].active .bb-z3 { animation: bb-zfloat 2.7s ease-in-out 2.3s infinite; } @keyframes bb-zfloat { 0% { opacity: 0; transform: translateY(10px) scale(0.85); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) scale(1.05); } } /* ---- Bauchzeit: Stoppuhr, der Zeiger laeuft gleichmaessig herum ---- */ #bb-save-overlay[data-scene="tummy"] .bb-watch-hand { transform-box: view-box; transform-origin: 130px 134px; } #bb-save-overlay[data-scene="tummy"].active .bb-watch-hand { animation: bb-sweep 2s linear 0.5s infinite; } @keyframes bb-sweep { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* ---- Messung: Achse und Kurve zeichnen sich, Punkte poppen der Reihe nach ---- */ #bb-save-overlay[data-scene="measure"] .bb-axis, #bb-save-overlay[data-scene="measure"] .bb-curve { stroke-dasharray: 250; stroke-dashoffset: 250; } #bb-save-overlay[data-scene="measure"].active .bb-axis { animation: bb-draw 0.5s ease-out 0.5s forwards; } #bb-save-overlay[data-scene="measure"].active .bb-curve { animation: bb-draw 0.75s ease-out 0.95s forwards; } #bb-save-overlay[data-scene="measure"] .bb-mdot { opacity: 0; } #bb-save-overlay[data-scene="measure"].active .m1 { animation: bb-dot-pop 0.3s ease-out 1.0s both; } #bb-save-overlay[data-scene="measure"].active .m2 { animation: bb-dot-pop 0.3s ease-out 1.2s both; } #bb-save-overlay[data-scene="measure"].active .m3 { animation: bb-dot-pop 0.3s ease-out 1.4s both; } #bb-save-overlay[data-scene="measure"].active .m4 { animation: bb-dot-pop 0.3s ease-out 1.6s both; } @keyframes bb-draw { to { stroke-dashoffset: 0; } } @keyframes bb-dot-pop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } } /* ---- Medikament: Plakette poppt, Kreuz zeichnet sich, sanfter Puls ---- */ #bb-save-overlay[data-scene="medication"] .bb-pill { opacity: 0; } #bb-save-overlay[data-scene="medication"].active .bb-pill { animation: bb-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.5s both, bb-pulse 0.8s ease-in-out 1.4s 2 both; } #bb-save-overlay[data-scene="medication"] .bb-cross-v, #bb-save-overlay[data-scene="medication"] .bb-cross-h { stroke-dasharray: 60; stroke-dashoffset: 60; } #bb-save-overlay[data-scene="medication"].active .bb-cross-v { animation: bb-draw 0.3s ease-out 0.95s forwards; } #bb-save-overlay[data-scene="medication"].active .bb-cross-h { animation: bb-draw 0.3s ease-out 1.15s forwards; } @keyframes bb-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes bb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ---- Sonstiges: Stern funkelt herein ---- */ #bb-save-overlay[data-scene="star"].active .bb-icon { animation: bb-icon-fade 0.45s ease-out both, bb-twinkle 1.3s ease-out 0.35s both; } @keyframes bb-twinkle { 0% { transform: scale(0.3) rotate(-40deg); } 55% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1) rotate(0); } } /* Erfolgs-Medaille poppt, Haken wird gezeichnet */ .bb-save-svg .bb-badge { opacity: 0; } #bb-save-overlay.active .bb-badge { animation: bb-badge-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 1.05s both; } @keyframes bb-badge-pop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } } .bb-save-svg .bb-tick { stroke-dasharray: 46; stroke-dashoffset: 46; } #bb-save-overlay.active .bb-tick { animation: bb-tick-draw 0.35s ease-out 1.3s forwards; } @keyframes bb-tick-draw { to { stroke-dashoffset: 0; } } /* Funkeln rund um das Baby */ .bb-save-svg .bb-spark { opacity: 0; } #bb-save-overlay.active .s1 { animation: bb-spark-pop 0.75s ease-out 0.85s both; } #bb-save-overlay.active .s2 { animation: bb-spark-pop 0.75s ease-out 1.05s both; } #bb-save-overlay.active .s3 { animation: bb-spark-pop 0.75s ease-out 1.25s both; } #bb-save-overlay.active .s4 { animation: bb-spark-pop 0.75s ease-out 1.4s both; } #bb-save-overlay.active .s5 { animation: bb-spark-pop 0.7s ease-out 0.95s both; } #bb-save-overlay.active .s6 { animation: bb-spark-pop 0.7s ease-out 1.15s both; } #bb-save-overlay.active .s7 { animation: bb-spark-pop 0.7s ease-out 1.32s both; } #bb-save-overlay.active .s8 { animation: bb-spark-pop 0.7s ease-out 1.0s both; } #bb-save-overlay.active .s9 { animation: bb-spark-pop 0.8s ease-out 1.1s both; } #bb-save-overlay.active .s10 { animation: bb-spark-pop 0.7s ease-out 1.45s both; } @keyframes bb-spark-pop { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(20deg); } 100% { opacity: 0; transform: scale(0.6) rotate(35deg); } } /* Text */ .bb-save-text { color: #ffffff; font-size: 1.7rem; font-weight: 700; margin: 1rem 0 0; opacity: 0; text-shadow: 0 2px 16px rgba(0, 16, 36, 0.6); } #bb-save-overlay.active .bb-save-text { animation: bb-text-in 0.5s ease-out 1.2s both; } @keyframes bb-text-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #bb-save-overlay { display: none; } } /* ============================================================ Moderne In-App-Icons: Babybuddys Icon-Font-Klassen werden auf Lucide-Icons umgebogen (als CSS-Maske, currentColor). Komplett offline, kein externer Font. Wird nach app.css geladen. ============================================================ */ .icon-add::before, .icon-update::before, .icon-delete::before, .icon-note::before, .icon-feeding::before, .icon-tummytime::before, .icon-sleep::before, .icon-diaperchange::before, .icon-pumping::before, .icon-child::before, .icon-user::before, .icon-lock::before, .icon-timer::before, .icon-timeline::before, .icon-medication::before, .icon-dashboard::before, .icon-weight::before, .icon-temperature::before, .icon-height::before, .icon-head-circumference::before, .icon-bmi::before, .icon-measurements::before, .icon-graph::before, .icon-activities::before, .icon-tag::before, .icon-source::before, .icon-sad::before, .icon-mail::before, .icon-chat::before, .icon-camera::before, .icon-list::before, .icon-refresh::before, .icon-calendar::before, .icon-today::before, .icon-clock::before, .icon-cancel::before, .icon-stop::before, .icon-true::before, .icon-false::before, .icon-arrow-down::before, .icon-arrow-up::before, .icon-angle-right::before, .icon-angle-left::before, .icon-angle-double-right::before, .icon-angle-double-left::before, .icon-angle-circled-right::before, .icon-angle-circled-left::before { content: "" !important; display: inline-block; width: 1em; height: 1em; background-color: currentColor !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: -0.125em; } .icon-add::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); } .icon-update::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); } .icon-delete::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E"); } .icon-note::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E"); } .icon-feeding::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2h8'/%3E%3Cpath d='M9 2v2.8a4 4 0 0 1-.7 2.2l-.6 1A4 4 0 0 0 7 10.2V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.8a4 4 0 0 0-.7-2.2l-.6-1A4 4 0 0 1 15 4.8V2'/%3E%3Cpath d='M7 15a6.5 6.5 0 0 1 5 0 6.5 6.5 0 0 0 5 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2h8'/%3E%3Cpath d='M9 2v2.8a4 4 0 0 1-.7 2.2l-.6 1A4 4 0 0 0 7 10.2V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.8a4 4 0 0 0-.7-2.2l-.6-1A4 4 0 0 1 15 4.8V2'/%3E%3Cpath d='M7 15a6.5 6.5 0 0 1 5 0 6.5 6.5 0 0 0 5 0'/%3E%3C/svg%3E"); } .icon-tummytime::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h.01'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/%3E%3Cpath d='M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c1.5 0 2.5 1 2.5 2.2 0 1-.8 1.8-1.8 1.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h.01'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/%3E%3Cpath d='M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c1.5 0 2.5 1 2.5 2.2 0 1-.8 1.8-1.8 1.8'/%3E%3C/svg%3E"); } .icon-sleep::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E"); } .icon-diaperchange::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5S12.5 5 12 2.5C11.5 5 10 7.4 8 9 6 10.6 5 13 5 15a7 7 0 0 0 7 7Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5S12.5 5 12 2.5C11.5 5 10 7.4 8 9 6 10.6 5 13 5 15a7 7 0 0 0 7 7Z'/%3E%3C/svg%3E"); } .icon-pumping::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2v6a2 2 0 0 0 .2.9l5.5 10A2 2 0 0 1 18 22H6a2 2 0 0 1-1.8-3l5.6-10a2 2 0 0 0 .2-1V2'/%3E%3Cpath d='M6.5 15h11'/%3E%3Cpath d='M8.5 2h7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2v6a2 2 0 0 0 .2.9l5.5 10A2 2 0 0 1 18 22H6a2 2 0 0 1-1.8-3l5.6-10a2 2 0 0 0 .2-1V2'/%3E%3Cpath d='M6.5 15h11'/%3E%3Cpath d='M8.5 2h7'/%3E%3C/svg%3E"); } .icon-child::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); } .icon-user::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } .icon-lock::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } .icon-timer::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4'/%3E%3Cpath d='M12 14l3-3'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4'/%3E%3Cpath d='M12 14l3-3'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E"); } .icon-timeline::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.7 9.7 0 0 0-6.7 2.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.7 9.7 0 0 0-6.7 2.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); } .icon-medication::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10.5 20.5 10-10a5 5 0 1 0-7-7l-10 10a5 5 0 1 0 7 7Z'/%3E%3Cpath d='m8.5 8.5 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10.5 20.5 10-10a5 5 0 1 0-7-7l-10 10a5 5 0 1 0 7 7Z'/%3E%3Cpath d='m8.5 8.5 7 7'/%3E%3C/svg%3E"); } .icon-dashboard::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); } .icon-weight::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cpath d='M6.5 8a2 2 0 0 0-1.9 1.5L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.9-2.5L19.4 9.5A2 2 0 0 0 17.5 8Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cpath d='M6.5 8a2 2 0 0 0-1.9 1.5L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.9-2.5L19.4 9.5A2 2 0 0 0 17.5 8Z'/%3E%3C/svg%3E"); } .icon-temperature::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.5a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.5a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E"); } .icon-height::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='m8 6 4-4 4 4'/%3E%3Cpath d='m8 18 4 4 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='m8 6 4-4 4 4'/%3E%3Cpath d='m8 18 4 4 4-4'/%3E%3C/svg%3E"); } .icon-head-circumference::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); } .icon-bmi::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); } .icon-measurements::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.4 2.4 0 0 1 0-3.4l2.6-2.6a2.4 2.4 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.4 2.4 0 0 1 0-3.4l2.6-2.6a2.4 2.4 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E"); } .icon-graph::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E"); } .icon-activities::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.5a2 2 0 0 0-1.9 1.5l-2.4 8.3a.25.25 0 0 1-.5 0L9.2 2.2a.25.25 0 0 0-.5 0l-2.3 8.3A2 2 0 0 1 4.5 12H2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.5a2 2 0 0 0-1.9 1.5l-2.4 8.3a.25.25 0 0 1-.5 0L9.2 2.2a.25.25 0 0 0-.5 0l-2.3 8.3A2 2 0 0 1 4.5 12H2'/%3E%3C/svg%3E"); } .icon-tag::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4Z'/%3E%3Cpath d='M7.5 7.5h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4Z'/%3E%3Cpath d='M7.5 7.5h.01'/%3E%3C/svg%3E"); } .icon-source::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); } .icon-sad::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 16s-1.5-2-4-2-4 2-4 2'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M15 9h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 16s-1.5-2-4-2-4 2-4 2'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M15 9h.01'/%3E%3C/svg%3E"); } .icon-mail::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } .icon-chat::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); } .icon-camera::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); } .icon-list::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3C/svg%3E"); } .icon-refresh::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.7 9.7 0 0 1 6.7 2.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.7 9.7 0 0 1-6.7-2.7L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.7 9.7 0 0 1 6.7 2.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.7 9.7 0 0 1-6.7-2.7L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); } .icon-calendar::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); } .icon-today::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E"); } .icon-clock::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } .icon-cancel::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); } .icon-stop::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/svg%3E"); } .icon-true::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .icon-false::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); } .icon-arrow-down::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); } .icon-arrow-up::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E"); } .icon-angle-right::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); } .icon-angle-left::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); } .icon-angle-double-right::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E"); } .icon-angle-double-left::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E"); } .icon-angle-circled-right::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m10 8 4 4-4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m10 8 4 4-4 4'/%3E%3C/svg%3E"); } .icon-angle-circled-left::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m14 16-4-4 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m14 16-4-4 4-4'/%3E%3C/svg%3E"); } /* ============================================================ Dashboard: komplett neu gestaltete Karten (Templates: cards/base.html, cards/statistics.html). Einheitliches Layout: farbiges Icon-Badge, Label, große Wertzeile, dezente Meta. Dunkelgrau/Weiß, mit sanften Typ-Akzentfarben fürs Icon. ============================================================ */ #dashboard-child { margin-top: 0.4rem; } .card-dashboard { position: relative; padding: 1.1rem 1.15rem 1.15rem; margin-bottom: 1.1rem; border: 1px solid var(--bb-line); border-radius: var(--bs-border-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 62%), var(--bb-navy-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); overflow: hidden; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .card-dashboard:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36); } .bb-dash-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; } .bb-dash-icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.08); color: #ffffff; font-size: 1.15rem; } .bb-dash-label { font-size: 0.96rem; font-weight: 700; letter-spacing: 0.2px; } .bb-dash-label a { color: var(--bb-text); } .bb-dash-label a:hover { color: #ffffff; text-decoration: none; } .bb-dash-value { font-size: 1.55rem; font-weight: 800; line-height: 1.15; color: #ffffff; } .bb-dash-value small { display: block; font-size: 0.8rem; font-weight: 600; color: var(--bb-muted); margin-top: 0.12rem; } .bb-dash-empty { font-size: 1rem; font-weight: 600; color: var(--bb-muted); } .bb-dash-meta { margin-top: 0.4rem; color: var(--bb-muted); font-size: 0.92rem; } .bb-dash-meta:empty { display: none; } /* Typ-Akzentfarben fürs Icon-Badge */ .card-feeding .bb-dash-icon { background: rgba(245, 158, 11, 0.18); color: #f6b552; } .card-diaperchange .bb-dash-icon { background: rgba(56, 189, 248, 0.18); color: #56c5f5; } .card-pumping .bb-dash-icon { background: rgba(167, 139, 250, 0.18); color: #b9a4f7; } .card-sleep .bb-dash-icon { background: rgba(129, 140, 248, 0.18); color: #99a3f7; } .card-medication .bb-dash-icon { background: rgba(240, 106, 106, 0.18); color: #f58a8a; } .card-tummytime .bb-dash-icon { background: rgba(52, 211, 153, 0.18); color: #5fd9ad; } .card-timer .bb-dash-icon { background: rgba(251, 191, 36, 0.18); color: #fbcf6a; } .card-statistics .bb-dash-icon { background: rgba(205, 210, 218, 0.16); color: #e3e7ee; } /* Listen-Karten (Timer, Verlauf) */ .card-dashboard .list-group { margin: 0.55rem -0.2rem 0; border: 0; background: transparent; } .card-dashboard .list-group-item { background: rgba(255, 255, 255, 0.035); border: 1px solid var(--bb-line); border-radius: 0.7rem !important; margin-bottom: 0.4rem; color: var(--bb-text); padding: 0.55rem 0.7rem; } .card-dashboard .list-group-item:hover { background: rgba(255, 255, 255, 0.075); } /* Fortschrittsbalken (Windel / Stillen) */ .card-dashboard .progress { height: 1.5rem; margin-top: 0.6rem !important; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .card-dashboard .progress-bar { font-size: 0.78rem; font-weight: 700; } .card-dashboard .progress-bar.bg-primary { background: #56c5f5 !important; color: #0c1116 !important; } .card-dashboard .progress-bar.bg-secondary { background: #8a9099 !important; color: #0c1116 !important; } .card-dashboard .progress-bar.bg-transparent { color: var(--bb-muted) !important; } /* Carousel (Statistik / Verlauf) zentriert */ .card-dashboard .carousel { text-align: center; } .card-dashboard .last-feeding-method { font-size: 1.55rem; font-weight: 800; color: #ffffff; } .card-dashboard .carousel-control-prev, .card-dashboard .carousel-control-next { width: 12%; opacity: 0.55; } .card-dashboard .carousel-control-prev-icon, .card-dashboard .carousel-control-next-icon { filter: invert(1) grayscale(1) brightness(2); width: 1.1rem; height: 1.1rem; } /* Kind-Aktionen (Dashboard-Übersicht) als saubere Pillen-Gruppe */ .child-actions.btn-group { border: 1px solid var(--bb-line) !important; border-radius: 999px !important; overflow: hidden; background: var(--bb-navy-3); } .child-actions .btn { border-radius: 0 !important; color: var(--bb-text); } .child-actions .btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } /* Kinderfoto auf der Übersicht runder */ .child-photo { border-radius: var(--bs-border-radius-lg); } /* ============================================================ Statistiken / Berichte (Plotly): auf dem Handy lesbar machen. Diagramme werden über report_base.html responsiv gesetzt; hier der Rahmen. ============================================================ */ .bb-report { padding: 0.25rem 0 2rem; } .bb-report-chart { background: var(--bb-navy-2); border: 1px solid var(--bb-line); border-radius: var(--bs-border-radius-lg); padding: 0.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); overflow: hidden; } .bb-report-chart .js-plotly-plot, .bb-report-chart .plotly-graph-div, .bb-report-chart .svg-container { width: 100% !important; } .bb-report-chart .modebar { right: 6px !important; } .bb-report-empty { background: var(--bb-navy-2); border: 1px solid var(--bb-line); border-radius: var(--bs-border-radius-lg); padding: 2.5rem 1rem; text-align: center; color: var(--bb-muted); font-size: 1.1rem; } /* Berichts-Liste: große, gut tappbare Einträge */ .reports-list.list-group { display: flex; flex-direction: column; gap: 0.5rem; } .reports-list .list-group-item { background: var(--bb-navy-2); border: 1px solid var(--bb-line); border-radius: var(--bs-border-radius) !important; color: var(--bb-text); font-weight: 600; padding: 0.85rem 1rem; } .reports-list .list-group-item:hover { background: var(--bb-navy-3); color: #ffffff; } /* Eigene Diagramme (bb-charts.js) */ .bb-chart { width: 100%; display: block; } .bb-chart-svg { display: block; width: 100%; height: auto; } .bb-report-chart .plotly-graph-div, .bb-report-chart .bb-chart { height: auto !important; width: 100% !important; } /* ============================================================ MODERNES APP-REDESIGN – App-Hülle, Navigation, Komponenten. Dunkel, mobile-first, angenehme Akzentfarbe (Teal). ============================================================ */ :root, [data-bs-theme="dark"] { --bb-accent: #f6b552; --bb-accent-2: #e0972f; --bb-accent-rgb: 246, 181, 82; --bb-bg: var(--bb-navy); --bb-surface: var(--bb-navy-2); --bb-surface-2: var(--bb-navy-3); --bs-primary: #f6b552; --bs-link-color: #f6c578; --bs-link-hover-color: #fadca0; } html, body { -webkit-text-size-adjust: 100%; height: 100%; margin: 0; overflow: hidden; /* Fenster scrollt nicht -> mobile Adressleiste bleibt stabil */ } /* Einziger Scrollbereich, fix zwischen Top-Bar und Tab-Leiste eingespannt */ .bb-scroll { position: fixed; top: 54px; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ---------- Top-App-Bar ---------- */ .bb-appbar { position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 1030; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.9rem; background: #1a1d22; /* deckend: bleibt zuverlässig fixiert, kein Durchscheinen */ border-bottom: 1px solid var(--bb-line); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); /* Eigene GPU-Ebene: verhindert das Mitruckeln beim Schwung-Scrollen (mobil) */ transform: translateZ(0); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bb-appbar-brand { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 800; font-size: 1.05rem; } .bb-appbar-brand:hover { color: #fff; text-decoration: none; } .bb-appbar-logo { width: 28px; height: 28px; border-radius: 8px; } .bb-appbar-spacer { flex: 1; } .bb-appbar-btn { width: 40px; height: 40px; border-radius: 12px; border: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: var(--bb-text); font-size: 1.1rem; } .bb-appbar-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } /* ---------- Untere Tab-Leiste ---------- */ .bb-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; height: calc(66px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; align-items: stretch; justify-content: space-around; background: #1a1d22; /* deckend: bleibt zuverlässig unten fixiert */ border-top: 1px solid var(--bb-line); box-shadow: 0 -4px 22px rgba(0, 0, 0, 0.4); /* Eigene GPU-Ebene gegen das Mitruckeln beim Schwung-Scrollen (mobil) */ transform: translateZ(0); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bb-tab, .bb-tab-btn { flex: 1; min-width: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--bb-muted); font-size: 0.66rem; font-weight: 600; padding: 8px 2px 6px; text-decoration: none; } .bb-tab i, .bb-tab-btn i { font-size: 1.32rem; } .bb-tab span, .bb-tab-btn span { line-height: 1; } .bb-tab.active, .bb-tab.active i { color: var(--bb-accent); } .bb-tab:hover, .bb-tab-btn:hover { color: #fff; text-decoration: none; } /* Zentraler Hinzufügen-Knopf (FAB) */ .bb-tab-add { flex: 1; display: flex; align-items: flex-start; justify-content: center; } .bb-fab { margin-top: -18px; width: 58px; height: 58px; border-radius: 20px; border: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bb-accent), var(--bb-accent-2)); color: #3a2a00; font-size: 1.7rem; box-shadow: 0 8px 22px rgba(var(--bb-accent-rgb), 0.45); } .bb-fab:active { transform: scale(0.94); } /* ---------- Menüs als Bottom-Sheet-Stil ---------- */ .bb-sheet { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1.1rem; padding: 0.5rem; min-width: 232px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); } .bb-sheet-title { padding: 0.3rem 0.7rem 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bb-muted); } .bb-sheet .dropdown-item, .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 0.7rem; border-radius: 0.7rem; padding: 0.62rem 0.7rem; color: var(--bb-text); font-weight: 600; } .bb-sheet .dropdown-item i { font-size: 1.15rem; width: 1.5rem; text-align: center; color: var(--bb-accent); } .dropdown-item:hover, .dropdown-item:focus { background: rgba(255, 255, 255, 0.07); color: #fff; } .bb-sheet form { margin: 0; } .dropdown-divider { border-color: var(--bb-line); } /* ---------- Inhaltsbereich ---------- */ #view-, .container-fluid { max-width: 720px; margin: 0 auto; } [id^="view-"] { padding-left: 0.2rem; padding-right: 0.2rem; } h1 { font-size: 1.45rem; font-weight: 800; } h2 { font-size: 1.2rem; font-weight: 700; } /* Breadcrumb auf dem Handy ausblenden, auf Desktop schlank */ nav[aria-label="breadcrumb"] { display: none; } @media (min-width: 768px) { nav[aria-label="breadcrumb"] { display: block; } .breadcrumb { background: transparent; padding: 0.5rem 0; } } /* ---------- Formulare ---------- */ .form-control, .form-select, textarea.form-control { min-height: 48px; font-size: 1rem; background: var(--bb-surface-2); border: 1px solid var(--bb-line); border-radius: 0.85rem; color: var(--bb-text); padding: 0.6rem 0.85rem; } textarea.form-control { min-height: 96px; } .form-control:focus, .form-select:focus { border-color: var(--bb-accent); box-shadow: 0 0 0 0.2rem rgba(var(--bb-accent-rgb), 0.25); background: var(--bb-surface-2); color: var(--bb-text); } label, .form-label, .col-form-label { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.25rem; color: var(--bb-text); } .form-text, .helptext, .text-muted, .text-body-secondary { color: var(--bb-muted) !important; } .form-check-input { width: 1.3em; height: 1.3em; background: var(--bb-surface-2); border-color: var(--bb-line); } .form-check-input:checked { background: var(--bb-accent); border-color: var(--bb-accent); } .asteriskField { color: #f58a8a; } fieldset { border: 0; padding: 0; margin: 0; } .mb-3, .form-group { margin-bottom: 1rem !important; } /* ---------- Buttons (Akzent) ---------- */ .btn { border-radius: 999px; font-weight: 700; padding: 0.55rem 1.15rem; } .btn-primary, .btn-success { --bs-btn-color: #3a2a00; --bs-btn-bg: var(--bb-accent); --bs-btn-border-color: var(--bb-accent); --bs-btn-hover-color: #3a2a00; --bs-btn-hover-bg: #f8c87f; --bs-btn-hover-border-color: #f8c87f; --bs-btn-active-bg: #e8a740; --bs-btn-active-border-color: #e8a740; border: 0; box-shadow: 0 6px 16px rgba(var(--bb-accent-rgb), 0.32); } .btn-outline-primary { --bs-btn-color: var(--bb-accent); --bs-btn-border-color: rgba(var(--bb-accent-rgb),0.5); --bs-btn-hover-bg: var(--bb-accent); --bs-btn-hover-color: #3a2a00; --bs-btn-hover-border-color: var(--bb-accent); } .btn-secondary { --bs-btn-bg: var(--bb-surface-2); --bs-btn-border-color: var(--bb-line); --bs-btn-color: #fff; --bs-btn-hover-bg: #353941; } .btn-danger { --bs-btn-bg: #e5604d; --bs-btn-border-color: #e5604d; } /* Formular-Absende-Buttons (am Seitenende) breit & griffig */ .btn-lg, .btn[type="submit"] { padding: 0.7rem 1.3rem; } /* ---------- Listen / Tabellen als Karten ---------- */ .card { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1.1rem; } .table { color: var(--bb-text); margin-bottom: 0; } .table > thead { display: none; } /* Kopfzeile auf dem Handy weg */ .table > :not(caption) > * > * { background: transparent; border: 0; padding: 0.55rem 0.6rem; vertical-align: middle; } .table > tbody > tr { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin-bottom: 0.6rem; padding: 0.5rem 0.7rem; } .table > tbody > tr > td { flex: 0 1 auto; } .table-responsive { overflow: visible; } .btn-group .btn, .table .btn { border-radius: 0.6rem; } @media (min-width: 768px) { .table > thead { display: table-header-group; } .table { display: table; } .table > tbody > tr { display: table-row; background: transparent; border: 0; } .table > tbody > tr > td { display: table-cell; } } /* ---------- Pagination, Badges, Alerts, Modals ---------- */ .pagination { gap: 0.3rem; flex-wrap: wrap; } .page-link { background: var(--bb-surface); border: 1px solid var(--bb-line); color: var(--bb-text); border-radius: 0.7rem !important; min-width: 42px; text-align: center; } .page-item.active .page-link { background: var(--bb-accent); border-color: var(--bb-accent); color: #3a2a00; } .badge { border-radius: 0.6rem; font-weight: 700; } .alert { border-radius: 1rem; border: 1px solid var(--bb-line); } .alert-success { background: rgba(var(--bb-accent-rgb), 0.14); color: #b9efe2; } .alert-danger { background: rgba(229, 96, 77, 0.16); color: #f4b5ab; } .alert-info { background: rgba(86, 197, 245, 0.14); color: #bfe7fb; } .modal-content { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1.2rem; } .modal-header, .modal-footer { border-color: var(--bb-line); } .list-group-item { background: var(--bb-surface); border-color: var(--bb-line); color: var(--bb-text); } /* Tab-Navigation (z.B. Einstellungen) */ .nav-tabs { border-color: var(--bb-line); gap: 0.25rem; } .nav-tabs .nav-link { color: var(--bb-muted); border: 0; border-radius: 0.7rem; font-weight: 600; } .nav-tabs .nav-link.active { background: var(--bb-surface-2); color: #fff; border: 0; } /* ---------- Feinschliff Listen ---------- */ .table .btn, .table .btn-group > .btn { background: rgba(255, 255, 255, 0.05) !important; color: var(--bb-muted) !important; border: 1px solid var(--bb-line) !important; box-shadow: none !important; padding: 0.34rem 0.5rem !important; border-radius: 0.55rem !important; } .table .btn:hover { color: #fff !important; background: rgba(255, 255, 255, 0.1) !important; } .table > tbody > tr > td strong, .table > tbody > tr > td b { color: #fff; font-size: 1.02rem; } .table > tbody > tr > td:empty { display: none; } /* Aktions-/Hinzufügen-Knöpfe über Listen kompakter */ .btn-toolbar { gap: 0.5rem; } /* Filter-Bereich der Listen */ #filter, .filter, form.form-inline { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1rem; padding: 0.6rem 0.8rem; } /* ---------- Kompaktes Dashboard ---------- */ .bb-dash-compact .card-dashboard { padding: 0.75rem 0.8rem; margin-bottom: 0.6rem; } .bb-dash-compact .bb-dash-head { gap: 0.45rem; margin-bottom: 0.3rem; } .bb-dash-compact .bb-dash-icon { width: 2rem; height: 2rem; font-size: 0.95rem; border-radius: 0.6rem; } .bb-dash-compact .bb-dash-label { font-size: 0.78rem; } .bb-dash-compact .bb-dash-value { font-size: 1.04rem; line-height: 1.2; font-weight: 800; } .bb-dash-compact .bb-dash-value small { font-size: 0.72rem; } .bb-dash-compact .bb-dash-value div { font-size: inherit; } .bb-dash-compact .bb-dash-meta { font-size: 0.78rem; margin-top: 0.15rem; } .bb-dash-compact .last-feeding-method { font-size: 1.3rem; } /* ============================================================ At-a-glance-Dashboard (child.html): das Wichtigste auf einen Block. ============================================================ */ .bb-home { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.3rem; } /* Hero: seit letzter Mahlzeit, ampelartig */ .bb-hero { display: block; text-decoration: none; color: var(--bb-text); border-radius: 1.2rem; padding: 1.1rem 1.2rem; background: var(--bb-surface); border: 1px solid var(--bb-line); } .bb-hero:hover { color: var(--bb-text); } .bb-hero-ok { border-color: rgba(52, 211, 153, 0.45); background: linear-gradient(160deg, rgba(52, 211, 153, 0.16), var(--bb-surface) 62%); } .bb-hero-soon { border-color: rgba(245, 158, 11, 0.5); background: linear-gradient(160deg, rgba(245, 158, 11, 0.17), var(--bb-surface) 62%); } .bb-hero-due { border-color: rgba(240, 106, 106, 0.55); background: linear-gradient(160deg, rgba(240, 106, 106, 0.19), var(--bb-surface) 62%); } .bb-hero-top { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; color: var(--bb-muted); } .bb-hero-ic { width: 2rem; height: 2rem; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: #fff; } .bb-hero-big { font-size: 2.05rem; font-weight: 800; color: #fff; margin-top: 0.45rem; line-height: 1.05; } .bb-hero-sub { color: var(--bb-muted); font-size: 0.9rem; margin-top: 0.25rem; } /* Seit zuletzt */ .bb-since { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .bb-since-item { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1rem; padding: 0.75rem 0.4rem; text-align: center; } .bb-since-item .ic { width: 2rem; height: 2rem; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.35rem; font-size: 1.05rem; } .ic-sleep { background: rgba(129, 140, 248, 0.18); color: #99a3f7; } .ic-diaper { background: rgba(56, 189, 248, 0.18); color: #56c5f5; } .ic-tummy { background: rgba(52, 211, 153, 0.18); color: #5fd9ad; } .bb-since-item .t { font-weight: 700; color: #fff; font-size: 0.9rem; line-height: 1.15; } .bb-since-item .l { color: var(--bb-muted); font-size: 0.74rem; margin-top: 0.15rem; } /* Heute */ .bb-today { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1.1rem; padding: 0.8rem 1rem; } .bb-today-head { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bb-muted); margin-bottom: 0.55rem; } .bb-today-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; } .bb-stat { text-align: center; } .bb-stat .n { display: block; font-size: 1.05rem; font-weight: 800; color: #fff; line-height: 1.15; } .bb-stat .l { display: block; font-size: 0.7rem; color: var(--bb-muted); margin-top: 0.1rem; } /* Visualisierung erbt das Karten-Styling von .card-dashboard */ .bb-viz .card-dashboard { margin-bottom: 0; } /* ---------- Senden-Button der Formulare ---------- Babybuddy macht .submit-primary position:fixed unten – das lag hinter der neuen Tab-Leiste. Als sticky im Scrollbereich bleibt er immer sichtbar, sitzt über der Tab-Leiste und überlappt sie nicht. */ .submit-primary { position: sticky !important; top: auto !important; left: auto !important; right: auto !important; bottom: 0.6rem !important; z-index: 6; width: 100% !important; max-width: none !important; margin: 1rem 0 0 !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); } /* Dashboard "seit zuletzt": Abpumpen / Medikament */ .ic-pump { background: rgba(167, 139, 250, 0.18); color: #b9a4f7; } .ic-med { background: rgba(240, 106, 106, 0.18); color: #f58a8a; } /* ============================================================ Protokoll / Zeitverlauf (timeline/_timeline.html): klares Log-Design. ============================================================ */ .bb-log-datenav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0.2rem 0 1.1rem; } .bb-log-date { font-weight: 700; font-size: 1.05rem; color: #fff; } .bb-log-nav { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bb-surface); border: 1px solid var(--bb-line); color: var(--bb-text); font-size: 1.1rem; } .bb-log-nav:hover { background: var(--bb-surface-2); color: #fff; } .bb-log-nav.disabled { visibility: hidden; } .bb-log { list-style: none; margin: 0; padding: 0; position: relative; } .bb-log::before { content: ""; position: absolute; left: 1.15rem; top: 0.8rem; bottom: 0.8rem; width: 2px; background: var(--bb-line); } .bb-log-item { position: relative; display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.3rem 0; } .bb-log-ic { position: relative; z-index: 1; flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 0.7rem; display: inline-flex; align-items: center; justify-content: center; background: var(--bb-surface-2); color: #fff; border: 1px solid var(--bb-line); font-size: 1.05rem; } .bb-log-body { flex: 1; min-width: 0; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 0.9rem; padding: 0.55rem 0.8rem; } .bb-log-event { font-weight: 700; color: #fff; } .bb-log-detail { font-size: 0.85rem; color: var(--bb-muted); margin-top: 0.05rem; } .bb-log-time { flex: 0 0 auto; color: var(--bb-muted); font-size: 0.8rem; font-weight: 700; padding-top: 0.7rem; } .bb-log-empty { text-align: center; color: var(--bb-muted); padding: 2.5rem 0; } .type-feeding .bb-log-ic { background: rgba(245, 158, 11, 0.18); color: #f6b552; border-color: transparent; } .type-sleep .bb-log-ic { background: rgba(129, 140, 248, 0.18); color: #99a3f7; border-color: transparent; } .type-diaperchange .bb-log-ic{ background: rgba(56, 189, 248, 0.18); color: #56c5f5; border-color: transparent; } .type-tummytime .bb-log-ic { background: rgba(52, 211, 153, 0.18); color: #5fd9ad; border-color: transparent; } .type-pumping .bb-log-ic { background: rgba(167, 139, 250, 0.18); color: #b9a4f7; border-color: transparent; } .type-medication .bb-log-ic { background: rgba(240, 106, 106, 0.18); color: #f58a8a; border-color: transparent; } .type-weight .bb-log-ic { background: rgba(244, 114, 182, 0.18); color: #f0a5c0; border-color: transparent; } .type-note .bb-log-ic { background: rgba(205, 210, 218, 0.16); color: #cdd2da; border-color: transparent; } .ic-weight { background: rgba(244, 114, 182, 0.18); color: #f0a5c0; } /* ---------- Kuratierte Statistik-Seite ---------- */ .bb-stats { display: flex; flex-direction: column; gap: 0.8rem; } .bb-stats h1 { margin-bottom: 0.2rem; } .bb-stat-h { font-weight: 700; color: #fff; margin: 0.1rem 0 0.4rem 0.2rem; } .bb-more-reports { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bs-border-radius-lg); padding: 0.4rem 0.6rem; } .bb-more-reports summary { cursor: pointer; font-weight: 700; padding: 0.5rem; color: var(--bb-text); list-style: none; } .bb-more-reports summary::-webkit-details-marker { display: none; } .bb-more-reports summary::after { content: "▸"; float: right; color: var(--bb-muted); } .bb-more-reports[open] summary::after { content: "▾"; } .bb-more-reports .reports-list { margin-top: 0.5rem; } /* ---------- Kind-Header (Zeitverlauf-Seite) ---------- */ .bb-child-head { text-align: center; padding: 0.6rem 0 1.3rem; } .bb-child-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bb-line); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45); } .bb-child-name { font-size: 1.7rem; font-weight: 800; color: #fff; margin: 0.8rem 0 0.9rem; } .bb-child-meta { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; } .bb-child-chip { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1rem; padding: 0.5rem 1rem; min-width: 8rem; } .bb-child-chip .k { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bb-muted); } .bb-child-chip .v { display: block; font-weight: 700; color: #fff; font-size: 0.95rem; margin-top: 0.15rem; } /* ============================================================ Stoppuhr / Timer: Dashboard-Banner + Detailseite ============================================================ */ /* Laufender Timer als Banner oben auf dem Dashboard */ .bb-timer { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: inherit; background: rgba(var(--bb-accent-rgb), 0.12); border: 1px solid rgba(var(--bb-accent-rgb), 0.45); border-radius: 1rem; padding: 0.7rem 0.85rem; margin-bottom: 0.85rem; } .bb-timer-ic { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--bb-accent-rgb), 0.22); color: var(--bb-accent); animation: bb-timer-pulse 1.8s ease-in-out infinite; } .bb-timer-ic i { font-size: 1.3rem; } @keyframes bb-timer-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bb-accent-rgb), 0.4); } 50% { box-shadow: 0 0 0 8px rgba(var(--bb-accent-rgb), 0); } } .bb-timer-main { flex: 1 1 auto; min-width: 0; } .bb-timer-clock { display: block; font-weight: 800; font-size: 1.35rem; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; } .bb-timer-lbl { display: block; font-size: 0.8rem; color: var(--bb-muted); margin-top: 0.1rem; } .bb-timer-go { flex: 0 0 auto; color: var(--bb-accent); font-size: 1.5rem; opacity: 0.8; } /* Timer-Detailseite */ .bb-timerview { text-align: center; padding: 1.2rem 0.5rem 0; } .bb-timer-big { font-weight: 800; font-size: 3.4rem; color: var(--bb-accent); font-variant-numeric: tabular-nums; line-height: 1.05; } .bb-timer-big i { font-style: normal; font-size: 1.4rem; color: var(--bb-muted); font-weight: 600; margin: 0 0.35rem 0 0.05rem; } .bb-timer-since { color: var(--bb-muted); margin-top: 0.4rem; font-size: 0.95rem; } .bb-timer-acts { margin-top: 1.8rem; } .bb-timer-acts-h { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bb-muted); margin-bottom: 0.7rem; } .bb-actbtn { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: 0.6rem; width: 100%; text-align: left; text-decoration: none; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 0.9rem; padding: 0.95rem 1.1rem; margin-bottom: 0.6rem; color: #fff; font-weight: 700; font-size: 1.05rem; } .bb-actbtn i { font-size: 1.3rem; color: var(--bb-accent); } .bb-actbtn:active { background: rgba(var(--bb-accent-rgb), 0.18); border-color: rgba(var(--bb-accent-rgb), 0.5); } .bb-timer-tools { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; } .bb-toolbtn { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--bb-muted); font-size: 0.95rem; padding: 0.5rem 0.7rem; border-radius: 0.7rem; } .bb-toolbtn i { font-size: 1.05rem; } .bb-toolbtn:active { background: var(--bb-surface); } .bb-toolbtn.danger { color: #f0a5a5; } /* Stoppuhr-Start als Formular im FAB-Menü unsichtbar einbetten */ .bb-sheet-form { margin: 0; } .bb-sheet-form .dropdown-item { width: 100%; background: none; border: 0; text-align: left; } /* ============================================================ Kinder-Liste (Mehr -> Kinder) als Karten ============================================================ */ .bb-kids-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; } .bb-kids-head h1 { margin: 0; font-size: 1.6rem; font-weight: 800; color: #fff; } .bb-addbtn { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; background: var(--bb-accent); color: #1b1d21; font-weight: 700; padding: 0.5rem 0.9rem; border-radius: 0.8rem; font-size: 0.95rem; white-space: nowrap; } .bb-addbtn i { font-size: 1.1rem; } .bb-kids { display: flex; flex-direction: column; gap: 0.7rem; } .bb-kid { display: flex; align-items: center; gap: 0.6rem; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1rem; padding: 0.7rem 0.8rem; } .bb-kid-link { display: flex; align-items: center; gap: 0.85rem; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; } .bb-kid-photo { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--bb-surface-2); } .bb-kid-info { min-width: 0; } .bb-kid-name { display: block; font-weight: 700; color: #fff; font-size: 1.05rem; } .bb-kid-meta { display: block; color: var(--bb-muted); font-size: 0.85rem; margin-top: 0.1rem; } .bb-kid-acts { display: flex; gap: 0.4rem; flex: 0 0 auto; } .bb-kid-act { width: 2.3rem; height: 2.3rem; border-radius: 0.7rem; display: grid; place-items: center; color: var(--bb-muted); background: var(--bb-surface-2); text-decoration: none; } .bb-kid-act i { font-size: 1.05rem; } .bb-kid-act.danger { color: #f0a5a5; } .bb-kid-act:active { background: rgba(var(--bb-accent-rgb), 0.18); } .bb-kids-empty { color: var(--bb-muted); text-align: center; padding: 2rem 0; } /* Timer-Verwerfen als Button im selben Stil wie die Link-Tools */ .bb-toolform { margin: 0; } .bb-toolbtn { background: none; border: 0; font: inherit; cursor: pointer; } /* Zeitstrahl-Eintraege antippbar (zur Bearbeitung) */ .bb-log-li { list-style: none; } .bb-log-item { text-decoration: none; color: inherit; } .bb-log-item:active .bb-log-body { background: rgba(var(--bb-accent-rgb), 0.12); border-color: rgba(var(--bb-accent-rgb), 0.4); } .bb-log-edit { flex: 0 0 auto; align-self: center; color: var(--bb-muted); opacity: 0.55; font-size: 1.15rem; } /* Loeschen-Button auf der Bearbeitungsseite */ .bb-delete-form { margin: 1.1rem 0 0; } .bb-delete-btn { display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: 1px solid rgba(240, 120, 120, 0.5); color: #f0a5a5; font: inherit; font-weight: 700; cursor: pointer; padding: 0.6rem 1rem; border-radius: 0.8rem; } .bb-delete-btn i { font-size: 1.1rem; } .bb-delete-btn:active { background: rgba(240, 120, 120, 0.15); } /* Lösch-Bestätigung (eigener Dialog, PWA-tauglich) */ .bb-confirm-overlay { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); padding: 1.5rem; opacity: 0; transition: opacity 0.18s ease; } .bb-confirm-overlay.active { opacity: 1; } .bb-confirm-box { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1.1rem; padding: 1.3rem 1.2rem 1rem; max-width: 22rem; width: 100%; transform: translateY(10px) scale(0.97); transition: transform 0.18s ease; } .bb-confirm-overlay.active .bb-confirm-box { transform: none; } .bb-confirm-title { font-weight: 800; font-size: 1.2rem; color: #fff; } .bb-confirm-text { color: var(--bb-muted); margin-top: 0.35rem; font-size: 0.95rem; } .bb-confirm-actions { display: flex; gap: 0.6rem; margin-top: 1.2rem; } .bb-confirm-actions button { flex: 1; border: 0; border-radius: 0.8rem; padding: 0.8rem 1rem; font: inherit; font-weight: 700; cursor: pointer; } .bb-confirm-cancel { background: var(--bb-surface-2); color: #fff; } .bb-confirm-ok { background: #e5484d; color: #fff; } .bb-confirm-ok:active { background: #c93b3f; } /* Gewichts-Abweichung vom Geburtsgewicht auf der Dashboard-Karte */ .bb-wdev { font-size: 0.7em; font-weight: 800; color: var(--bb-accent); white-space: nowrap; } /* Windel-Übersicht auf dem Dashboard: "Letzte Woche"-Zeile ausblenden */ .bb-viz .bb-dash-value { display: none; } /* Windeln: rollierende Fenster (24/48/72h) mit Ampel nach nassen Windeln */ .bb-diapers { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 1rem; padding: 0.7rem 0.85rem; } .bb-diapers-head { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bb-muted); margin-bottom: 0.55rem; } .bb-diaper-row { --lvl: #888; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.7rem; background: var(--bb-surface-2); border-left: 4px solid var(--lvl); margin-bottom: 0.4rem; } .bb-diaper-row:last-child { margin-bottom: 0; } /* gleiche Ampelfarben wie die Mahlzeit-Kachel */ .bb-diaper-row.lvl-green { --lvl: #34d399; } .bb-diaper-row.lvl-yellow { --lvl: #f59e0b; } .bb-diaper-row.lvl-red { --lvl: #f06a6a; } .bb-diaper-win { flex: 1; color: #fff; font-weight: 600; } .bb-diaper-wet, .bb-diaper-solid { display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 3rem; font-weight: 800; font-size: 1.2rem; } .bb-diaper-wet { color: var(--lvl); } .bb-diaper-solid { color: var(--bb-muted); font-weight: 700; } .bb-diaper-wet small, .bb-diaper-solid small { font-size: 0.6rem; font-weight: 600; color: var(--bb-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; } /* Volle-Breite-Kachel (Medikament) im Seit-zuletzt-Raster */ .bb-since-wide { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; text-align: left; gap: 0.75rem; padding: 0.7rem 0.85rem; } .bb-since-wide .ic { margin-bottom: 0; flex: 0 0 auto; } .bb-wide-body { flex: 1; min-width: 0; } .bb-wide-title { font-weight: 700; color: #fff; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bb-wide-sub { color: var(--bb-muted); font-size: 0.82rem; margin-top: 0.1rem; } /* Antippbare Seit-zuletzt-Kacheln (Windel, Gewicht, Lefax): sehen aus wie die normalen Kacheln, führen aber zum Eintragen. */ .bb-since-formwrap { grid-column: 1 / -1; margin: 0; } .bb-since-tap { position: relative; display: block; width: 100%; text-decoration: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, border-color 0.12s ease; } a.bb-since-tap:hover, button.bb-since-tap:hover { color: inherit; text-decoration: none; } .bb-since-tap:active { transform: scale(0.975); border-color: rgba(255, 255, 255, 0.3); } /* Breite Variante (Lefax) bleibt Flex-Zeile, auch als