diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css index 8ea9ebac..7695af5b 100644 --- a/workspace/assets/css/gate.css +++ b/workspace/assets/css/gate.css @@ -2136,3 +2136,42 @@ body.gate { drei bis vier Bildpunkten. 27 px sind rund 65 % mehr Flaeche, ohne dass die Zeile ihre Hoehe aendert. */ .rolle__zeichen { width: 27px; height: 27px; } + +/* VON personen.css HIERHER GEZOGEN (08.09.2026). + + Das Rollen-Sprite steht seit heute auf ZWEI Seiten (personen.html und + index.html). Die Gestaltung dazu lag aber nur in personen.css -- die + Anmeldeseite laedt die gar nicht. Der Stern stand dort also ohne + seinen Glanz, und `pruef-css-klassen` hat es gemeldet: ".rs-funkel -- + fehlt auf 1 Seite (index.html)". + + Das ist derselbe Fehler wie beim Sprite selbst, nur eine Ebene + hoeher: Wer etwas verdoppelt, muss auch alles mitnehmen, was daran + haengt. gate.css liegt auf allen 19 Seiten -- hier kann es nicht + wieder auseinanderlaufen. +*/ +/* DAS FUNKELN DES MANAGER-STERNS. + + Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst + langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere + genau die aggressive Optik, die hier nicht sein soll -- und in einer + Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick + dauerhaft von allem anderen ab. + + Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein + Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein + Glitzern. Glanz ist etwas, das sich BEWEGT. */ +.rs-funkel { + -webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; + mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; + animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite; +} +@keyframes rs-glitzer { + 0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; } + 100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; } +} +/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine. + Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */ +@media (prefers-reduced-motion: reduce) { + .rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; } +} diff --git a/workspace/assets/css/module.css b/workspace/assets/css/module.css index 32e90e73..73dae7ce 100644 --- a/workspace/assets/css/module.css +++ b/workspace/assets/css/module.css @@ -89,7 +89,7 @@ } /* MODULLISTE */ -:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) { +:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe]) { position: relative; clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase)); border-radius: 0; @@ -117,7 +117,7 @@ was übrig bleibt, ist eine Linie, die exakt der Form folgt, Schräge inklusive. Ein `border` könnte das nicht: Er folgt dem Rechteck. */ /* MODULLISTE */ -:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before { +:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe])::before { content: ""; position: absolute; inset: 0; pointer-events: none; @@ -140,7 +140,7 @@ /* RASTER UND ECKWINKEL. Beides auf ::after -- ein drittes Element gibt es nicht, und beides ist reine Optik ohne Klicks. */ /* MODULLISTE */ -:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after { +:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe])::after { content: ""; position: absolute; inset: 0; pointer-events: none; @@ -224,7 +224,7 @@ /* Dieselbe Form, kleiner -- keine zweite Gestaltung. */ :root { --fase: 12px; } /* MODULLISTE */ - :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) { + :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe]) { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7)); } } @@ -238,15 +238,15 @@ /* Im Kontrastmodus zählt die Kante, und die muss ein echter `border` sein. Die Schräge bleibt: Sie ist Geometrie, keine Farbe. */ /* MODULLISTE */ - :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) { + :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe]) { filter: none; border: 1px solid CanvasText; } /* MODULLISTE */ - :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after { + :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe])::after { display: none; } /* MODULLISTE */ - :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before { + :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe])::before { display: none; } } diff --git a/workspace/assets/css/personen.css b/workspace/assets/css/personen.css index f5c33e6d..6c2858b0 100644 --- a/workspace/assets/css/personen.css +++ b/workspace/assets/css/personen.css @@ -263,31 +263,6 @@ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } -/* DAS FUNKELN DES MANAGER-STERNS. - - Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst - langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere - genau die aggressive Optik, die hier nicht sein soll -- und in einer - Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick - dauerhaft von allem anderen ab. - - Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein - Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein - Glitzern. Glanz ist etwas, das sich BEWEGT. */ -.rs-funkel { - -webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; - mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; - animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite; -} -@keyframes rs-glitzer { - 0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; } - 100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; } -} -/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine. - Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */ -@media (prefers-reduced-motion: reduce) { - .rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; } -} /* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist der einzige Unterschied, den es braucht: mehr Licht auf demselben Gegenstand. */ diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index b58eefa0..4a2f98a6 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -4953,3 +4953,28 @@ body[data-fremde-sicht="ja"]::after { color-mix(in srgb, var(--f) 9%, transparent), color-mix(in srgb, var(--f) 4%, transparent)); } + +/* DIE ZAHLENREIHE BLEIBT STEHEN, AUCH WENN ALLES NULL IST (08.09.2026). + + Filipe: "diese beiden kategorien sollen bei jedem in jeder rolle + gleich sein". Vorher wurde die Reihe bei lauter Nullen geloescht -- + nachgemessen sah Spicy Media als einzige Rolle etwas anderes als die + uebrigen vier. Wer die Rolle wechselt, fand die Seite anders gebaut + vor. + + Jetzt bleibt sie und wird nur LEISER: weniger Deckkraft, kein + Warnrot, die Zahlen ohne ihr Leuchten. Die Form der Seite bleibt + damit ueber alle Rollen gleich, und "gerade nichts zu tun" ist + trotzdem auf einen Blick zu sehen -- gedaempft ist auch eine + Antwort, nur eine leise. + + Der Satz darunter steht jetzt ZUSAETZLICH statt an ihrer Stelle. */ +#zahlen-block[data-leer="ja"] .zahl { + opacity: .45; + filter: saturate(.35); +} +#zahlen-block[data-leer="ja"] .zahl__wert { text-shadow: none; } +/* Auch die Warnfarbe verschwindet: Eine rote Null ist ein Widerspruch. */ +#zahlen-block[data-leer="ja"] .zahl[data-warn="ja"] { --warnton: inherit; } +#zahlen-block[data-leer="ja"] .zahl[data-warn="ja"] .zahl__wert { color: inherit; } +#zahlen-block[data-leer="ja"] #zahlen-leer { margin-top: 10px; opacity: .8; } diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js index 0a6fafd2..5ae45711 100644 --- a/workspace/assets/js/start.js +++ b/workspace/assets/js/start.js @@ -1120,19 +1120,31 @@ daten = await antwort.json(); } catch { return; } - /* Sechs Nullen nebeneinander sind kein Bericht, sondern Rauschen. - Wenn wirklich nichts offen ist, steht dort ein Satz -- und der - Platz gehört den Bereichen. */ + /* JEDE ROLLE SIEHT DIESELBEN KATEGORIEN (08.09.2026). + + Filipe: "diese beiden kategorien sollen bei jedem in jeder rolle + gleich sein ... alles was kacheln ist und so soll gleich sein." + + Hier stand: Ist die Summe null, wird die ganze Reihe GELÖSCHT und + durch einen Satz ersetzt -- mit der Begründung "sechs Nullen + nebeneinander sind kein Bericht, sondern Rauschen". Der Gedanke + war nicht falsch, die Folge aber schon: Nachgemessen über alle + fünf Rollen sah Spicy Media als EINZIGE keine Zahlenreihe, + sondern einen Satz -- die anderen vier sahen sieben Kategorien. + Wer zwischen zwei Rollen wechselt, findet die Seite dann anders + aufgebaut vor und sucht, was fehlt. + + Jetzt steht die Reihe IMMER, mit denselben sieben Kategorien für + alle. Ist wirklich nichts offen, wird sie GEDÄMPFT (siehe + `[data-leer]` in start.css) und der Satz steht ZUSÄTZLICH + darunter statt an ihrer Stelle. Damit bleibt die Aussage "es ist + gerade nichts zu tun" erhalten, ohne dass die Seite ihre Form + ändert -- gedämpft ist auch eine Antwort, nur eben eine leise. */ const summe = ZAHLEN.reduce((n, z) => n + (daten[z.schluessel] ?? 0), 0); const block = $('zahlen-block'); - if (!summe) { - block.dataset.leer = 'ja'; - $('zahlen').textContent = ''; - $('zahlen-leer').hidden = false; - return; - } - block.removeAttribute('data-leer'); - $('zahlen-leer').hidden = true; + if (!summe) block.dataset.leer = 'ja'; + else block.removeAttribute('data-leer'); + $('zahlen-leer').hidden = !!summe; const liste = $('zahlen'); liste.textContent = '';