Files
dogfather-universe/workspace/assets/css/dateien.css
T
DogFatherGitandClaude Opus 5 fc823240ab screen4: Dogi-Media — bearbeiten, entfernen, von wann bis wann
Filipe, 22.09.2026: "wenn wir in der kategorie material was hochladen
will ich dass die rechte und linke hand es auch bearbeiten und loeschen
koennen. dogfather auch fals es ein fehler gab. ... uebrigens ersetz das
wort material durch Dogi-Media. und mach kategorien welche sind benutzt
welche nicht welche sind noch offen, welche laufen von wan bis wann."

WAS JETZT GEHT
- Rechte Hand, linke Hand und DogFather bearbeiten und entfernen jedes
  Stueck, nicht nur ihr eigenes. Bearbeitet wird Text und Zeitfenster,
  nicht die Datei: Sonst zeigte dieselbe Nummer etwas anderes als das,
  was sich jemand gerade angesehen hat.
- Ein vergebenes Stueck bleibt unberuehrt (409). Wer es genommen hat,
  hat sich auf diesen Text verlassen.
- Vier Zustaende, gerechnet statt gespeichert: jetzt frei, kommt noch,
  abgelaufen, schon benutzt. Die Kategorieleiste zeigt zu jedem die
  Anzahl aus den echten Daten und filtert BEIDE Listen.
- "Material" heisst ueberall "Dogi-Media", der Dateiname bleibt.

DREI FEHLER AUS DEM EIGENEN ENTWURF, ALLE VOR DEM AUSLIEFERN GEMESSEN

1. `tagLokal()` ohne Argument gab "NaN-NaN-NaN" zurueck -- eine
   Zeichenkette, die aussieht wie ein Datum. Im Vergleich gewinnt das N
   gegen jede Ziffer, also galt JEDES Stueck mit Enddatum vom ersten Tag
   an als abgelaufen, und "Kommt noch" gab es nie. Kein Absturz, keine
   Meldung. Die drei Kopien der Funktion waren hier auseinandergelaufen;
   alle drei haben jetzt die Vorbelegung und werfen bei einer Zahl, die
   keine ist.
2. `frageNach` liefert bei einer reinen Rueckfrage `true`, nicht
   `{ ok: true }`. Der Entwurf prueft auf `erg?.ok` -- "Entfernen" waere
   ein Knopf gewesen, der nichts tut.
3. Drei erfundene Klassennamen (`knopf--leise`, `m-kat__knopf`,
   `m-karte__weg-knopf`) statt der vorhandenen des Hauses. Jetzt
   `.knopf-still`, `.knopf-still--warn` und die Filterleiste `.filter`.

EIN FUND IM BESTAND, ZWEI WOCHEN ALT

In start.css fehlten an einer Stelle die zwei Zeichen, die einen
Kommentar schliessen. CSS-Kommentare schachteln nicht: Der Block lief
bis zum naechsten Abschluss weiter und verschluckte `.kacheln {`; die
Fehlerbehebung des Browsers nahm danach auch die Regel `.kachel` mit.
In Chromium gemessen, beide Fassungen nacheinander: 738 statt 740
Regeln.

Der Entwurf, der dadurch nie gewirkt hat, ist NICHT wiederhergestellt
worden: Seine Flaeche mischte den Kachelton mit 30/11/3 Prozent ein --
pruef-kachelfarben fiel sofort von 36,5 % auf 4,1 % angekommene Farbe,
und 31 Toene sahen gleich aus. Das ist das Gegenteil dessen, was am
22.09. verlangt war. Er ist geloescht, mit dem Grund daneben. Offen
bleibt eine Frage an Filipe, keine Entscheidung von mir: zu demselben
Entwurf gehoerte ein schmaleres Kachelraster (fuenf bis sechs statt
drei pro Reihe). Das aendert das Aussehen der Startseite sichtbar und
bleibt deshalb, wie es ist.

GEMEINSAME BAUSTEINE AUS DEN SEITENDATEIEN GEHOLT
`.filter` stand Zeichen fuer Zeichen doppelt in dateien.css und
bereich.css, `.feld-hinweis` in aufgaben.css und leistung.css (und die
zwei waren schon auseinandergelaufen). Dogi-Media war jeweils die
dritte Seite, die sie braucht, und laedt keine davon. Derselbe Fehler
wie damals bei .knopf-still und beim Schalter -- jetzt in gate.css
bzw. start.css.

GEPRUEFT
pruef-material 155/0 (von 126, neu: Zeitfenster, Bearbeiten, Entfernen,
Rechte in der Liste und ein Abschnitt am echten Bildschirm mit Browser).
pruef-css-klassen um eine Pruefung erweitert, die genau den
start.css-Fehler findet -- mit sieben Gegenproben, darunter der echte
Fall. pruef-kachelfarben 22/0, pruef-start-ansicht, pruef-struktur,
pruef-meldungen, pruef-zeitraum, pruef-content, pruef-serien 69/0.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-22 13:59:55 +02:00

199 lines
7.6 KiB
CSS

/* ===================================================================
Dateiablage mit Freigabe-Ablauf.
=================================================================== */
.ablage {
display: grid; place-items: center; gap: 6px;
padding: 34px 20px; margin-bottom: 16px;
border: 1px dashed var(--rand);
border-radius: var(--radius);
background: var(--flaeche);
cursor: pointer; text-align: center;
transition: border-color var(--tempo), background var(--tempo);
}
.ablage:hover, .ablage:focus-visible {
border-color: rgba(63, 189, 245, .5);
background: rgba(63, 189, 245, .05);
outline: none;
}
/* Während eine Datei darüber schwebt, deutlich sichtbar -- sonst weiß
niemand, ob das Loslassen an dieser Stelle etwas bewirkt. */
.ablage[data-bereit="ja"] {
border-color: var(--akzent);
border-style: solid;
background: rgba(63, 189, 245, .10);
}
.ablage__zeichen {
width: 30px; height: 30px;
fill: none; stroke: var(--text-still);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ablage:hover .ablage__zeichen, .ablage[data-bereit="ja"] .ablage__zeichen { stroke: var(--akzent); }
.ablage__text { margin: 0; font-size: .92rem; color: var(--text-leise); }
.ablage__text strong { color: var(--akzent); }
.ablage__klein { margin: 0; font-size: .78rem; color: var(--text-still); }
.hochlade-zeile { margin-bottom: 18px; }
.hochlade-zeile select {
min-width: 240px; padding: 9px 12px;
background: rgba(255, 255, 255, .045);
border: 1px solid var(--rand); border-radius: var(--radius-klein);
color: var(--text); font: inherit;
}
.fortschritt {
margin: 0 0 14px; padding: 10px 14px;
background: rgba(63, 189, 245, .08);
border: 1px solid rgba(63, 189, 245, .3);
border-radius: var(--radius-klein);
font-size: .86rem; color: var(--text-leise);
}
/* Die Filterleiste steht seit 22.09.2026 in gate.css -- sie wird
inzwischen auf drei Seiten gebraucht, und gate.css laedt jede.
Sie hier zu lassen hiesse, sie beim vierten Mal wieder zu
kopieren; genau so ist .knopf-still schon einmal auf einer
Seite als nacktes Kaestchen erschienen. */
/* ---------- Liste ------------------------------------------------------- */
.datei {
display: grid; gap: 4px 16px; align-items: center;
grid-template-columns: 34px 1fr auto;
padding: 13px 16px; margin-bottom: 9px;
background: var(--flaeche);
border: 1px solid var(--rand);
border-left: 3px solid var(--rand);
border-radius: var(--radius-klein);
}
.datei[data-status="entwurf"] { border-left-color: #6f89a8; }
.datei[data-status="review"] { border-left-color: #e0a33c; }
.datei[data-status="freigegeben"] { border-left-color: #4dab77;
background: rgba(77, 171, 119, .05); }
.datei__zeichen {
grid-row: span 2; width: 26px; height: 26px;
fill: none; stroke: var(--text-still);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.datei__name { font-weight: 600; font-size: .93rem; word-break: break-word; }
.datei__zeile {
display: flex; flex-wrap: wrap; gap: 8px;
font-size: .78rem; color: var(--text-still);
}
.datei__knoepfe { grid-row: span 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.marke-status {
padding: 1px 9px; border-radius: 999px;
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.marke-status[data-status="entwurf"] { background: rgba(111, 137, 168, .18); color: #a8bdd4; }
.marke-status[data-status="review"] { background: rgba(224, 163, 60, .16); color: #e6b45c; }
.marke-status[data-status="freigegeben"] { background: rgba(77, 171, 119, .18); color: #79d1a2; }
@media (max-width: 720px) {
.datei { grid-template-columns: 34px 1fr; }
.datei__knoepfe { grid-row: auto; grid-column: 1 / -1; margin-top: 9px; }
}
/* Hinweis statt Ablegefeld, wenn jemand nicht hochladen darf. */
.nur-lesen {
margin: 0 0 22px; padding: 15px 18px;
background: var(--flaeche);
border: 1px solid var(--rand);
border-left: 3px solid var(--akzent);
border-radius: var(--radius-klein);
font-size: .88rem; color: var(--text-leise); line-height: 1.5;
}
.nur-lesen strong { color: var(--text); }
/* ===================================================================
Wer darf die Datei sehen (28.08.2026).
Kleine Schalter statt <select multiple>: Dort verliert man mit einem
Fehlklick die ganze Auswahl, und auf dem Handy ist sie kaum
bedienbar. Hier ist jeder Name ein eigener Schalter, der sichtbar an
oder aus ist.
=================================================================== */
.hochlade-zeile { display: grid; gap: 16px; margin-bottom: 22px; }
.wahl, .datei__wahl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.datei__wahl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }
.wahl__knopf {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px; cursor: pointer;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--rand); border-radius: 999px;
color: var(--text-leise); font: inherit; font-size: .84rem;
transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.wahl__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
.wahl__rolle {
font-size: .7rem; font-weight: 600; letter-spacing: .03em;
color: var(--text-still);
}
/* Ausgewählt trägt die Farbe der Rolle -- man sieht auf einen Blick,
ob eine Datei an Creator, Scouts oder beide geht. */
.wahl__knopf[data-an="ja"] { color: #fff; font-weight: 600; }
.wahl__knopf[data-an="ja"][data-rolle="creator"] {
border-color: rgba(63, 189, 245, .55); background: rgba(63, 189, 245, .16);
}
.wahl__knopf[data-an="ja"][data-rolle="scout"] {
border-color: rgba(138, 118, 255, .55); background: rgba(138, 118, 255, .16);
}
.wahl__knopf[data-an="ja"][data-rolle="admin"] {
border-color: rgba(232, 192, 125, .55); background: rgba(232, 192, 125, .16);
}
.wahl__knopf[data-an="ja"] .wahl__rolle { color: rgba(255, 255, 255, .75); }
.datei__freigaben {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--rand);
}
.datei__schild {
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--text-still);
}
.marke-person {
padding: 3px 10px; border-radius: 999px;
font-size: .76rem; font-weight: 600;
color: var(--text-leise);
background: rgba(255, 255, 255, .05);
border: 1px solid var(--rand);
}
.marke-person--leer { color: var(--text-still); font-weight: 400; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .wahl__knopf { transition: none; } }
/* =====================================================================
FASSUNGEN (15.09.2026)
"Fassung 2" ist eine Nummer und bleibt ruhig. "nicht mehr aktuell"
ist eine Warnung und darf auffallen -- aber nicht schreien: Sie steht
an einer Datei, die niemand falsch gemacht hat, sie ist nur alt.
===================================================================== */
.fassung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.fassung__nummer {
font-size: .78rem; font-weight: 640; color: var(--text-still);
font-variant-numeric: tabular-nums;
}
.fassung__alt {
font-size: .78rem; font-weight: 640;
padding: 2px 9px; border-radius: 999px;
color: #d8a76a;
border: 1px solid color-mix(in srgb, #cc9451 45%, transparent);
}
.fassung__loesen {
font: inherit; font-size: .76rem;
padding: 2px 9px; border-radius: 999px; cursor: pointer;
color: var(--text-still);
background: none;
border: 1px solid var(--rand);
}
.fassung__loesen:hover { color: var(--text); border-color: var(--rand-hell); }