Alle Seiten folgen derselben Form -- gemessen ueber 18 Seiten und fuenf Rollen
Filipe: "die seiten sollen bei jedem aussehen wie bei mir, bei patrick
zumbeispiel sieht sehr viel noch nach dem alten muster aus ... alles was
sie sehen soll dan auch nach der neuen struktur aufgebaut sein."
GEMESSEN STATT GESCHAUT. Das "alte Muster" ist praezise benennbar: runde
Ecken (border-radius 18px) statt der gefraesten Fase (clip-path polygon
mit 18px). Damit laesst es sich SUCHEN, nicht nur ahnen -- ein Durchlauf
ueber alle 18 Seiten in allen fuenf Rollen, der jedes Element ab
260x90 px meldet, das eine eigene Flaeche und runde Ecken hat.
vorher 5 Klassen im alten Muster, 90 Seitenaufrufe
jetzt 0 Klassen
DER GROESSTE EINZELPOSTEN war der Seitenkopf. `.kopf-zeile` trug runde
Ecken -- auf VIERZEHN Seiten das erste, was man sieht, direkt neben
Kacheln mit Fase. Dazu `.k-kopf` (Kalender), `.steckbrief`,
`.k-anlasskarte`, `.k-raster`, `.entscheidung` und die
Formulargruppen auf der Profilseite.
ZWEI SELEKTOREN MIT BEDACHT, weil derselbe Klassenname zweierlei meint:
`.gruppe[data-gruppe]` nur die Reiter auf der Calls-Seite. Auf der
Startseite heissen die Bereichsgruppen ebenso,
sind aber BEHAELTER fuer Kacheln und duerfen
selbst keine sein. `data-gruppe` setzt
ausschliesslich calls.js -- nachgeprueft.
`fieldset.gruppe` nur die Formularbloecke auf profil.html. Die
Startseite baut `section.gruppe`. Das Element
unterscheidet sie sauber, die Klasse nicht.
BEINAHE FALSCH GEMACHT: Ich war sicher, `.steckbrief` und
`.k-anlasskarte` staenden bereits in der Modulliste, und wollte
weitersuchen, warum die Regel bei ihnen nicht greift. Nachgesehen: Sie
standen gar nicht drin -- ich hatte sie mit `.k-listentag` und einer
Liste aus kopf.js verwechselt. Eine plausible Erinnerung ersetzt keinen
Blick in die Datei.
DIE MODULLISTE STEHT SIEBENMAL WORTGLEICH. Alle sieben ergaenzt;
pruef-css-klassen prueft "alle sieben Kopien sind Zeichen fuer Zeichen
gleich" und zaehlt jetzt 43 Klassen statt 36.
GEPRUEFT:
90 Seitenaufrufe (18 Seiten x 5 Rollen) -> 0 Bausteine im alten Muster
36 Seitenaufrufe auf 360/390/412 px -> 0 px waagerechter Ueberstand
pruef-css-klassen EXIT=0, pruef-start-ansicht EXIT=0 (140),
pruef-rollen EXIT=0 (97), pruef-abbrechen-optik EXIT=0 (27)
Die Handy-Messung gezielt selbst gefahren statt pruef-handy zu starten:
Die eine Frage, die diese Aenderung aufwirft, ist der Ueberstand -- in
40 Sekunden beantwortet statt in drei Minuten.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -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, .gruppe[data-gruppe]) {
|
||||
: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], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-raster, .entscheidung, fieldset.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, .gruppe[data-gruppe])::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], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-raster, .entscheidung, fieldset.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, .gruppe[data-gruppe])::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], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-raster, .entscheidung, fieldset.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, .gruppe[data-gruppe]) {
|
||||
: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], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-raster, .entscheidung, fieldset.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, .gruppe[data-gruppe]) {
|
||||
: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], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-raster, .entscheidung, fieldset.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, .gruppe[data-gruppe])::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], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-raster, .entscheidung, fieldset.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, .gruppe[data-gruppe])::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], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-raster, .entscheidung, fieldset.gruppe)::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2091,10 +2091,23 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Der Weichzeichner faellt damit auch weg, und das ist gut so: Er
|
||||
holt die Neonfarben von AUSSERHALB der Flaeche herein und hat schon
|
||||
zweimal dafuer gesorgt, dass eine Karte grau statt dunkelblau aussah. */
|
||||
/* KEIN `border-radius` MEHR (08.09.2026).
|
||||
|
||||
Filipe: "die seiten sollen bei jedem aussehen wie bei mir, bei
|
||||
patrick zumbeispiel sieht sehr viel noch nach dem alten muster aus."
|
||||
|
||||
Der Seitenkopf trug runde Ecken, waehrend jede Kachel daneben die
|
||||
gefraeste Fase hat -- auf VIERZEHN Seiten das erste, was man sieht.
|
||||
Er steht jetzt in der Modulliste von module.css und bekommt damit
|
||||
dieselbe Form, dieselben Eckwinkel und denselben Innenschatten wie
|
||||
alles andere.
|
||||
|
||||
Der Radius entfaellt ersatzlos: `clip-path` schneidet ohnehin nach
|
||||
der Fase, ein zusaetzlicher Radius waere wirkungslos und wuerde beim
|
||||
Lesen nur behaupten, hier sei etwas rund. */
|
||||
body.start .kopf-zeile,
|
||||
body.start .k-kopf {
|
||||
padding: 20px 24px;
|
||||
border-radius: var(--radius);
|
||||
background: linear-gradient(180deg, rgba(6, 9, 16, .74), rgba(6, 9, 16, .58));
|
||||
backdrop-filter: blur(14px) saturate(.9);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(.9);
|
||||
|
||||
Reference in New Issue
Block a user