From f3d5bcf198e0da2bd17f5b189142df6ce85591e6 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 9 Sep 2026 00:02:15 +0200 Subject: [PATCH] screen20: Die fuenf Rollen in EINER Kachel Wunsch Filipe: "ich will dass die rollen auch alle in einer grossen kacheln sind, die soll richtig krass sein, richtig speziell." Vorher waren es fuenf einzelne Kaesten mit je eigenem Rand, eigenen runden Ecken und 8 px Luft dazwischen -- der Hintergrund des Motivs schien ueberall durch. Das las sich als fuenf Dinge, die zufaellig untereinander stehen. Es ist aber EINE Frage mit fuenf Antworten, und genau so sieht es jetzt aus: ein Koerper mit abgeschraegten Ecken, in den fuenf Felder eingelassen sind. DIE FUGE MACHT DIE KACHEL, nicht der Rand aussen. Ein Spalt, durch den der Untergrund scheint, TRENNT; eine dunkle Fuge (#05070c) VERBINDET, weil sie zum selben Koerper gehoert. Dieselbe Entscheidung wie beim Kalender. DIE FASSUNG traegt dieselben vier Farben wie der Rand der Zentrale -- links Rot, rechts Babyblau, Silber als Treffpunkt, Schwarz als Fuge. Wer sich anmeldet, sieht damit schon hier die Handschrift der Seite dahinter. WAS BLEIBT, IST DIE SCHIENE. Sie war das Beste am alten Entwurf: Wer sich als Manager anmeldet, sieht schon hier das Lila, in dem ihm gleich seine Kacheln begegnen. Sie sitzt jetzt buendig an der Innenkante statt am Rand einer eigenen Karte -- dieselbe Wirkung, ein Koerper weniger. ZWEI SACHEN, DIE DABEI AUFFIELEN: 1. ES GAB ZWEI ENTWUERFE FUER DIESELBEN FUENF ZEILEN. Einen ab 1100 px (`.tafel .rolle`, mit Schiene und Tastenwirkung) und einen darunter (`.rolle`, schlicht). Mein erster Anlauf legte einen DRITTEN darueber -- im Bildschirmfoto standen die alten Karten unveraendert in meiner neuen Kachel. Statt der dritten Schicht sind jetzt beide vorhandenen auf Felder umgestellt: eine Aussage, zwei Groessen. 2. `transform: translateY(1px)` BEIM DRUECKEN MUSSTE WEG. Bei fuenf einzelnen Karten war das richtig -- eine Taste, die nachgibt. In einem geschlossenen Koerper schiebt sich damit ein Feld um einen Pixel aus der Kachel heraus, reisst die Fuge auf und sieht nach einem Fehler aus. Der eingelassene Schatten sagt dasselbe, ohne etwas zu verschieben. Nebenbei: Die Markierung der gewaehlten Rolle stand unter 1100 px fuer alle fuenf auf demselben Blau-Violett -- wer "Scout" waehlte, bekam Blau, obwohl Scout gruen ist. Die Rollenfarbe `--rf` war zwei Zeilen darueber definiert und wurde nicht benutzt. Jetzt kommt sie per `color-mix` aus den zentralen Hausfarben. Geprueft: pruef-rollen (97 Pruefungen, alles in Ordnung), pruef-css-klassen (alles in Ordnung), dazu 390/320/820 px nachgemessen -- nichts ragt heraus, nichts laesst sich seitlich schieben. Dabei hat meine eigene Messung erst fuenf Fehler gemeldet, die es nicht gab: Die Untertitel sind auf schmalen Geraeten ausgeblendet, ein ausgeblendetes Element hat die Masse 0/0, und 0 liegt links von jeder Kachel. Ohne den Blick aufs Bild haette ich einen Fehler gesucht, den nur die Pruefung hatte. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/gate.css | 176 +++++++++++++++++++++++++++++----- workspace/aufgaben.html | 18 ++-- workspace/automation.html | 20 ++-- workspace/bereich.html | 28 +++--- workspace/calls.html | 22 ++--- workspace/chat.html | 20 ++-- workspace/content.html | 24 ++--- workspace/dateien.html | 20 ++-- workspace/index.html | 4 +- workspace/kalender.html | 22 ++--- workspace/leistung.html | 20 ++-- workspace/personen.html | 20 ++-- workspace/profil.html | 22 ++--- workspace/report.html | 22 ++--- workspace/scouting.html | 20 ++-- workspace/start.html | 18 ++-- workspace/startcheck.html | 22 ++--- workspace/steckbrief.html | 20 ++-- workspace/uebersicht.html | 20 ++-- workspace/wissen.html | 20 ++-- 20 files changed, 343 insertions(+), 215 deletions(-) diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css index 7695af5b..61c0d0d3 100644 --- a/workspace/assets/css/gate.css +++ b/workspace/assets/css/gate.css @@ -297,24 +297,133 @@ body.gate { color: var(--text-still); } -.rollen { margin-bottom: 22px; } +/* ===================================================================== + DIE FUENF ROLLEN IN EINER KACHEL (screen20, 08.09.2026) + + Filipe: "ich will dass die rollen auch alle in einer grossen kacheln + sind, die soll richtig krass sein, richtig speziell." + + VORHER WAREN ES FUENF EINZELNE KAESTEN mit je eigenem Rand und + 8 px Luft dazwischen -- und der Hintergrund des Motivs schien + ueberall durch. Das las sich als fuenf Dinge, die zufaellig + untereinander stehen. Es ist aber EINE Frage mit fuenf Antworten, + und genau so sieht es jetzt aus: ein Koerper, in den fuenf Felder + eingelassen sind. + + DIE FUGE MACHT DIE KACHEL. Nicht der Rand aussen -- der ist Fassung + --, sondern die dunkle Linie ZWISCHEN den Feldern. Ein Spalt, durch + den der Untergrund scheint, trennt; eine dunkle Fuge verbindet, weil + sie zum selben Koerper gehoert. Deshalb `#05070c` und nicht + `transparent`. Dieselbe Entscheidung wie beim Kalender. + + ABGESCHRAEGTE ECKEN wie ueberall im Haus. Auf dieser Seite gibt es + die Modulliste aus module.css nicht (die Anmeldeseite laedt + absichtlich nur gate.css -- sie ist die erste Seite, die jemand + sieht, und soll schnell da sein). Das Polygon steht deshalb hier, + einmal, in einer Variablen. + ================================================================== */ +.rollen { + --r-fase: 16px; + --r-rand: 2px; + --r-form: polygon( + var(--r-fase) 0, calc(100% - var(--r-fase)) 0, + 100% var(--r-fase), 100% calc(100% - var(--r-fase)), + calc(100% - var(--r-fase)) 100%, var(--r-fase) 100%, + 0 calc(100% - var(--r-fase)), 0 var(--r-fase)); + + position: relative; + margin-bottom: 22px; + padding: var(--r-rand); + clip-path: var(--r-form); + + /* DIE FASSUNG: dieselben vier Farben wie am Rand der Zentrale -- + links Rot, rechts Babyblau, Silber als Treffpunkt, Schwarz als + Fuge. Wer sich anmeldet, sieht damit schon hier die Handschrift + der Seite, die dahinter liegt. */ + background: linear-gradient(96deg, + #20060b 0%, #c8323f 6%, #ff5f6d 14%, #ffd9dd 20%, + #b3242f 30%, #0a0c12 40%, #f4faff 50%, #0a0c12 60%, + #4f95bd 70%, #8fd8ff 78%, #dff2ff 84%, #3f7fa3 92%, #06080f 100%); + box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9); +} + +/* Das Innenglas. Eigene Ebene, damit die Fassung ringsum stehen + bleibt, mit dem feinen Messraster des Hauses darauf. */ +.rollen::before { + content: ""; position: absolute; inset: var(--r-rand); + z-index: 0; pointer-events: none; + clip-path: var(--r-form); + background: + linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%), + repeating-linear-gradient(0deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px), + repeating-linear-gradient(90deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px), + radial-gradient(120% 80% at 12% 100%, rgba(255, 74, 92, .10), transparent 62%), + radial-gradient(110% 75% at 88% 0%, rgba(126, 200, 242, .09), transparent 60%), + linear-gradient(180deg, #0b111c, #070b13); +} +.rollen > * { position: relative; z-index: 1; } + +/* Die Frage sitzt als Kopfzeile IN der Kachel, nicht darueber -- + sonst waere die Kachel eine Liste ohne Titel und der Titel ein + Satz ohne Bezug. */ +.rollen .feldschild { + margin: 0; + padding: 12px 16px 10px; + border-bottom: 1px solid #05070c; + box-shadow: 0 1px 0 rgba(255, 255, 255, .045); +} .rolle { display: flex; align-items: center; gap: 13px; - width: 100%; margin-bottom: 8px; padding: 11px 14px; - background: rgba(255, 255, 255, .035); - border: 1px solid var(--rand); - border-radius: var(--radius-klein); + width: 100%; margin: 0; padding: 12px 16px; + background: transparent; + border: 0; + /* Die Fuge nach unten, ausser beim letzten -- sonst laege eine + Linie auf der Fassung. */ + border-bottom: 1px solid #05070c; + box-shadow: 0 1px 0 rgba(255, 255, 255, .035); color: var(--text); font: inherit; text-align: left; cursor: pointer; - transition: border-color var(--tempo), background var(--tempo), transform var(--tempo); + transition: background var(--tempo), box-shadow var(--tempo), padding-left var(--tempo); } -.rolle:hover { background: rgba(255, 255, 255, .06); border-color: var(--rand-hell); } -.rolle:active { transform: scale(.995); } +.rolle:last-child { border-bottom: 0; box-shadow: none; } +/* BEIM ZEIGEN RUECKT DAS FELD AUF, statt aufzuleuchten -- dieselbe + Sprache wie ueberall ("naeherkommen statt aufleuchten"). Der schmale + Streifen links traegt die Farbe DIESER Rolle. */ +.rolle:hover { + background: linear-gradient(90deg, + color-mix(in srgb, var(--rf) 14%, transparent), transparent 46%); + padding-left: 20px; +} +.rolle:active { padding-left: 18px; } + +/* AUSGEWAEHLT LEUCHTET IN DER FARBE DER ROLLE, nicht in Blau. + + Hier stand fuer alle fuenf derselbe blau-violette Verlauf -- wer + "Scout" waehlte, bekam Blau, obwohl Scout gruen ist, und die + Rollenfarbe `--rf` direkt darueber wurde ignoriert. Die Farben sind + seit dem 08.09. zentral gesetzt und ueberall im Haus gueltig; genau + hier, bei der Wahl der Rolle, wurden sie nicht benutzt. + + `color-mix` statt fuenf ausgeschriebener Verlaeufe: Die Farbe kommt + aus `--rf`, und `--rf` kommt aus den Hausfarben. Eine Aenderung + dort wirkt bis hierher. */ .rolle[aria-checked="true"] { - background: linear-gradient(100deg, rgba(63, 189, 245, .14), rgba(138, 118, 255, .10)); - border-color: rgba(63, 189, 245, .55); + background: linear-gradient(96deg, + color-mix(in srgb, var(--rf) 26%, transparent), + color-mix(in srgb, var(--rf) 9%, transparent) 62%, + transparent); + padding-left: 20px; + box-shadow: + inset 3px 0 0 var(--rf), + 0 1px 0 rgba(255, 255, 255, .035); +} +.rolle[aria-checked="true"]:last-child { box-shadow: inset 3px 0 0 var(--rf); } + +@media (prefers-reduced-motion: reduce) { + .rolle, .rolle:hover, .rolle:active { transition: none; padding-left: 16px; } + .rolle[aria-checked="true"] { padding-left: 16px; } } .rolle__zeichen { @@ -1722,30 +1831,45 @@ body.gate { .tafel .rolle[data-rolle="scout"] { --rton: var(--scout-haupt); } .tafel .rolle[data-rolle="creator"] { --rton: var(--creator-haupt); } + /* SEIT screen20 SIND ES FELDER IN EINEM KOERPER, KEINE FUENF KARTEN. + + Filipe: "ich will dass die rollen auch alle in einer grossen + kacheln sind." Vorher hatte jede Rolle einen eigenen Rand, eigene + runde Ecken und 8 px Luft zur naechsten -- das las sich als fuenf + Dinge, die zufaellig untereinander stehen. Es ist aber EINE Frage + mit fuenf Antworten. + + WAS BLEIBT, IST DIE SCHIENE. Sie war und ist das Beste an diesem + Entwurf: Wer sich als Manager anmeldet, sieht schon hier das Lila, + in dem ihm gleich seine Kacheln begegnen. Sie sitzt jetzt buendig + an der Innenkante der Kachel statt am Rand einer eigenen Karte -- + dieselbe Wirkung, ein Koerper weniger. + + WAS GEHT, SIND RAND UND RUNDUNG. An ihre Stelle tritt die dunkle + Fuge nach unten. Ein Spalt, durch den der Untergrund scheint, + trennt; eine dunkle Fuge verbindet, weil sie zum selben Koerper + gehoert. */ .tafel .rolle { position: relative; overflow: hidden; - /* Links scharf (dort sitzt die Schiene), rechts rund -- genau die - Silhouette der Kacheln. */ - border-radius: 3px 13px 13px 3px; + border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rton, var(--akzent)) 20%, transparent) 0%, color-mix(in srgb, var(--rton, var(--akzent)) 6%, transparent) 22%, transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)); - border: 1px solid rgba(150, 186, 220, .13); + border: 0; + border-bottom: 1px solid #05070c; box-shadow: - inset 0 1px 0 rgba(255, 255, 255, .09), - inset 0 -1px 0 rgba(0, 0, 0, .38), - 0 1px 2px rgba(0, 0, 0, .35); - transition: border-color var(--tempo), background var(--tempo), - box-shadow var(--tempo), transform .09s ease; + inset 0 1px 0 rgba(255, 255, 255, .07), + 0 1px 0 rgba(255, 255, 255, .035); + transition: background var(--tempo), box-shadow var(--tempo); } + .tafel .rolle:last-child { border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } /* Die Schiene selbst. */ .tafel .rolle::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; - border-radius: 3px 0 0 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--rton, var(--akzent)) 55%, #fff) 0%, var(--rton, var(--akzent)) 34%, @@ -1761,15 +1885,20 @@ body.gate { color-mix(in srgb, var(--rton, var(--akzent)) 8%, transparent) 24%, transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022)); - border-color: rgba(150, 186, 220, .24); } .tafel .rolle:hover::before { opacity: 1; } /* Beim Drücken sinkt die Taste ein: Der Schatten unter ihr verschwindet, der innere kommt von oben. Genau das macht ein echter Knopf. */ + /* GEDRUECKT SINKT DAS FELD EIN -- ohne sich zu VERSCHIEBEN. + + Hier stand `transform: translateY(1px)`. Bei fuenf einzelnen Karten + war das richtig: eine Taste, die nachgibt. In einem geschlossenen + Koerper ist es falsch -- ein Feld, das sich um einen Pixel aus der + Kachel herausschiebt, reisst die Fuge auf und sieht nach einem + Fehler aus. Der eingelassene Schatten allein sagt dasselbe. */ .tafel .rolle:active { - transform: translateY(1px); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55); } /* DIE GEWÄHLTE TASTE IST BELEUCHTET, nicht nur eingefärbt. Der Lichtrand nach innen liest sich wie eine Diode darunter -- und er @@ -1781,7 +1910,6 @@ body.gate { color-mix(in srgb, var(--rton, var(--akzent)) 16%, transparent) 34%, color-mix(in srgb, var(--rton, var(--akzent)) 5%, transparent) 72%), linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)); - border-color: color-mix(in srgb, var(--rton, var(--akzent)) 58%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 24px -9px color-mix(in srgb, var(--rton, var(--akzent)) 92%, transparent), diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 02dfb29b..73610f10 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -14,10 +14,10 @@ - - - - + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index 71e2bb90..7a272639 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -140,10 +140,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index fa48c56b..dc916a57 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -149,14 +149,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index 0d770c21..cb83f54d 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -82,11 +82,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index 0f4368b8..4416f07b 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -14,17 +14,17 @@ - - + + - - - + + + @@ -160,10 +160,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index 57fea097..3f060fb8 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -172,12 +172,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index d9cf1b88..3ae9fdba 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -101,10 +101,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index e19756b2..31bae4ef 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -32,7 +32,7 @@ - + @@ -382,6 +382,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index fc5f54f4..b783ee30 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -331,11 +331,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index ae3834dc..83688747 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index d66e2820..9a63a7ee 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -305,10 +305,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index 8fa3d470..41ab2257 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -207,11 +207,11 @@ - - - - - - + + + + + + diff --git a/workspace/report.html b/workspace/report.html index d152e8ab..21bfdc22 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -99,11 +99,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index 45a16150..3f87df5f 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -132,10 +132,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index 59d7c2b4..f267050a 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -14,12 +14,12 @@ - - + + - - + + @@ -522,10 +522,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index a6ff6ffd..6e045b5a 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -78,11 +78,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 730b2b06..30977c69 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -119,10 +119,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index 44e2a53d..d74ec71d 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -14,13 +14,13 @@ - - + + - - - + + + @@ -142,11 +142,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index 2c8256c6..016ca69d 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -183,10 +183,10 @@ - - - - - + + + + +