/* ChurchFlow - Posteingang hinter der Glocke. ============================================================================ VERBINDLICHER GEMEINSAMER BAUSTEIN (CHURCHFLOW-STYLEGUIDE.md §7.5). Diese Datei ist in JEDER App wortgleich. Wer hier etwas aendert, aendert es im Styleguide und rollt es in alle Apps aus - nicht in einer App abweichen. ============================================================================ */ /* ---------- Farben ---------- Der Baustein faerbt sich ueber die Tokens der App. Die Apps sind historisch nicht bei denselben Namen gelandet (Gruppen: --card/--line/--ink/--muted/--brand, Kalender: --surface/--border/--text/--text-muted/--accent), deshalb eine Kette statt eines Namens - so passt sich der Baustein von selbst an, ohne dass eine App etwas setzen muss. Anfassen muss eine App nur --cf-notif-accent, und nur dann, wenn ihre Markenfarbe als SCHRIFT auf der Kartenflaeche unter 4,5:1 bleibt (im dunklen Design ist das die Regel, nicht die Ausnahme - siehe Styleguide 7.5). */ :root { --cf-notif-bg: var(--card, var(--surface, #ffffff)); --cf-notif-line: var(--line, var(--border, #e5e4de)); --cf-notif-ink: var(--ink, var(--text, #1f2a28)); --cf-notif-muted: var(--muted, var(--text-muted, #5e6a67)); --cf-notif-subtle: var(--subtle, var(--surface-2, #eef0ed)); --cf-notif-accent: var(--brand, var(--accent, #3b82f6)); /* Der Ring um den Zaehler nimmt die Flaeche auf, auf der die Glocke sitzt - in den meisten Apps die Markenfarbe der Kopfleiste. */ --cf-notif-ring: var(--brand, var(--accent, #1c2326)); /* Kopfleiste der Vollbildseite - dieselbe Farbe wie die Kopfleiste der App. */ --cf-notif-headbg: var(--brand, var(--accent, #1c2326)); /* Der Zaehler ist ein Signal und folgt bewusst NICHT dem Theme: --err ist im dunklen Design ein helles Rot (#f87171) und traegt weisse Schrift nur mit 2,8:1 - gemessen am 21.08.2026. Dieser Wert haelt 4,8:1 in beiden Designs. */ --cf-notif-badge: #dc2626; /* Zusagen/Ablehnen. Bewusst eigene Werte statt --ok/--ok-bg bzw. --err/--err-bg: die Statuspaare des Styleguides sind fuer Chips gedacht und tragen kleine Schrift nur mit 3,9:1 (hell) bzw. 3,7:1 (dunkel) - gemessen am 21.08.2026. Diese Paare halten 4,6:1 und mehr. */ --cf-notif-yes: #15803d; --cf-notif-yes-bg: #dcfce7; --cf-notif-no: #b91c1c; --cf-notif-no-bg: #fee2e2; } html[data-theme="dark"] { /* Im dunklen Design ist die Markenfarbe fast ueberall zu satt, um als SCHRIFT auf der Kartenflaeche zu taugen: gemessen am 22.08.2026 kamen Ressourcen auf 3,4:1, Beitraege 3,2:1, Wiki 3,3:1, Signage 3,1:1, Gruppen 3,4:1 - alle unter den geforderten 4,5:1. Jede App hat fuer genau diesen Fall schon einen helleren Markenton (--chip-ink, die Schriftfarbe ihrer Chips); der liegt ueberall zwischen 5,1:1 und 7,6:1. Deshalb hier bevorzugt der - und die Markenfarbe nur als Rueckfall fuer Apps ohne diesen Ton. */ --cf-notif-accent: var(--chip-ink, var(--brand, var(--accent, #7dabf8))); --cf-notif-yes: #86efac; --cf-notif-yes-bg: #064e3b; --cf-notif-no: #fca5a5; --cf-notif-no-bg: #7f1d1d; } /* ---------- Glocke ---------- Nur, was sie ueber die uebrigen Kopfleisten-Knoepfe der App hinaus braucht; Groesse und Flaeche kommen aus deren Kopfleisten-CSS. */ .cf-notif-wrap { position: relative; display: inline-flex; } .cf-notif-btn { position: relative; } .cf-notif-badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--cf-notif-badge); color: #fff; font-size: .64rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--cf-notif-ring); pointer-events: none; } .cf-notif-badge[hidden] { display: none; } /* ---------- Klappliste ---------- Sie haengt am und NICHT in der Kopfleiste: dort haben die Apps Regeln wie "header button { width:44px; color:#fff }", die jeden Listeneintrag und jeden Link darin verunstalten - im Kalender war "Alle gelesen" weiss auf weiss (1,0:1, gemessen 22.08.2026). Ausserhalb der Leiste kann das nicht passieren. Positioniert wird sie per JS unter der Glocke. */ .cf-notif-panel { position: fixed; z-index: 900; width: 360px; max-width: calc(100vw - 32px); background: var(--cf-notif-bg); color: var(--cf-notif-ink); border: 1px solid var(--cf-notif-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); overflow: hidden; text-align: left; font-family: inherit; } .cf-notif-panel[hidden] { display: none; } .cf-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cf-notif-line); font-size: .86rem; font-weight: 600; color: var(--cf-notif-ink); } .cf-notif-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--cf-notif-accent); font-family: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; padding: 4px; border-radius: 6px; white-space: nowrap; flex: 0 0 auto; width: auto; height: auto; box-shadow: none; } .cf-notif-link:hover { text-decoration: underline; } .cf-notif-link .material-symbols-outlined { font-size: 16px; } .cf-notif-body { max-height: 420px; overflow-y: auto; } /* ---------- Eintrag ---------- */ .cf-notif-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 16px; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--cf-notif-line); text-align: left; color: inherit; font-family: inherit; font-size: 1rem; cursor: pointer; flex-wrap: wrap; box-shadow: none; border-radius: 0; height: auto; min-height: 0; width: 100%; } .cf-notif-item:last-child { border-bottom: 0; } .cf-notif-item:hover { background: var(--cf-notif-subtle); } .cf-notif-item > .material-symbols-outlined { color: var(--cf-notif-accent); flex: 0 0 auto; margin-top: 2px; font-size: 20px; } /* Offene Aufgaben (z. B. Beitrittsanfragen) haben eigene Knoepfe statt eines Klickwegs - sie duerfen nicht wie eine Zeile zum Anklicken aussehen. */ .cf-notif-task { cursor: default; } .cf-notif-task:hover { background: none; } .cf-notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cf-notif-text strong { font-size: .86rem; font-weight: 600; color: var(--cf-notif-ink); } .cf-notif-text small { font-size: .8rem; color: var(--cf-notif-muted); } .cf-notif-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .72rem; color: var(--cf-notif-muted); } /* Woher die Meldung stammt - nur, wenn es eine ANDERE App war. */ .cf-notif-app { padding: 1px 7px; border-radius: 999px; font-weight: 600; background: var(--cf-notif-subtle); color: var(--cf-notif-muted); } /* Ungelesenes traegt einen Balken an der Kante - eine Hintergrundfarbe wuerde in der langen Liste unruhig wirken. */ .cf-notif-unread { box-shadow: inset 3px 0 0 var(--cf-notif-accent); } .cf-notif-unread strong { font-weight: 700; } .cf-notif-actions { display: flex; gap: 8px; width: 100%; padding-left: 32px; } .cf-notif-yes, .cf-notif-no { flex: 1; padding: 6px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid transparent; width: auto; height: auto; box-shadow: none; } .cf-notif-yes { background: var(--cf-notif-yes-bg); color: var(--cf-notif-yes); border-color: var(--cf-notif-yes); } .cf-notif-no { background: var(--cf-notif-no-bg); color: var(--cf-notif-no); border-color: var(--cf-notif-no); } .cf-notif-empty { padding: 26px 18px; text-align: center; } .cf-notif-empty .material-symbols-outlined { font-size: 32px; color: var(--cf-notif-muted); } .cf-notif-empty p { margin: 8px 0 0; font-size: .86rem; color: var(--cf-notif-ink); } .cf-notif-empty .cf-notif-hint { font-size: .78rem; color: var(--cf-notif-muted); } /* ---------- Vollbildseite (schmale Geraete) ---------- Der Baustein bringt sie selbst mit, damit sie nicht in jeder App anders aussieht. Eigene Kopfleiste nach Styleguide 2.1/2.3c: 64px, Zurueck links, Titel mittig. */ .cf-notif-page { position: fixed; inset: 0; z-index: 1000; background: var(--bg, #f5f4f1); color: var(--cf-notif-ink); overflow-y: auto; overscroll-behavior: contain; font-family: inherit; } .cf-notif-page[hidden] { display: none; } /* Die Seite darunter soll nicht mitscrollen, waehrend die Liste offen ist. */ body.cf-notif-page-offen { overflow: hidden; } .cf-notif-page-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 10px 8px; box-sizing: border-box; background: var(--cf-notif-headbg); color: #fff; position: sticky; top: 0; z-index: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); /* Auf dem iPhone sitzt die Leiste sonst unter der Notch (Styleguide 12.5). */ padding-top: max(10px, env(safe-area-inset-top)); height: calc(64px + max(0px, env(safe-area-inset-top))); } .cf-notif-page-head h1 { margin: 0; font-size: 1rem; font-weight: 600; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-notif-page-head button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-family: inherit; } .cf-notif-page-head button:hover { background: rgba(255, 255, 255, .3); } .cf-notif-page-head .material-symbols-outlined { font-size: 20px; } .cf-notif-page-sub { max-width: 640px; margin: 0 auto; padding: 12px 16px 0; font-size: .8rem; color: var(--cf-notif-muted); } .cf-notif-page-body { max-width: 640px; margin: 12px auto 0; background: var(--cf-notif-bg); border-top: 1px solid var(--cf-notif-line); border-bottom: 1px solid var(--cf-notif-line); padding-bottom: env(safe-area-inset-bottom); } .cf-notif-page-body .cf-notif-item { padding: 14px 16px; } /* Auf schmalen Geraeten ragt die Klappliste ueber den Rand hinaus - dort fuehrt die Glocke stattdessen auf die eigene Seite (Styleguide 12.1/7.5). */ @media (max-width: 640px) { .cf-notif-panel { display: none !important; } /* Auf der Vollbildseite wird getippt, nicht geklickt (Styleguide 12.3). */ .cf-notif-yes, .cf-notif-no { min-height: 44px; } } /* Umgekehrt: am Desktop gilt die Klappliste, die Seite gibt es dort nicht. */ @media (min-width: 641px) { .cf-notif-page { display: none !important; } }