DogFatherGitandClaude Opus 5
8647138bb4
Die vier Aufgaben-Spalten waren vier graue Kaesten mit je einem
Gedankenstrich darin. Das sieht aus, als sei die Seite kaputt -- dabei
ist eine leere Spalte ein voellig normaler, oft sogar guter Zustand.
Jetzt hat jede Spalte ihre eigene Farbe nach STATUS (offen blaugrau,
in Arbeit blau, Review gold, erledigt gruen), einen auslaufenden
Streifen oben in dieser Farbe und eine Zeile, die erklaert, was die
Spalte ueberhaupt bedeutet -- "Review" allein sagt einem Neuen nichts.
Statt des Gedankenstrichs steht ein Satz, der die AUSSAGE des
Leerseins traegt: eine leere Review-Spalte bedeutet etwas anderes als
eine leere Erledigt-Spalte.
NEUN KOPIEN DERSELBEN REGEL. .leer-hinweis war in neun CSS-Dateien
definiert -- neunmal fast dasselbe, mit Abstaenden von 22, 26 und 30 px,
weil beim Kopieren jedes Mal etwas anders wurde. Genau davor warnt ein
Kommentar in start.css seit August ("Was auf mehreren Seiten benutzt
wird, gehoert hierher"). Jetzt einmal zentral, und jede Seite hat sie.
Und sie sieht anders aus: Der gestrichelte Rand ist weg. Gestrichelte
Raender sagen "hier fehlt etwas", grau auf grau sagt "unwichtig" --
zusammen also "kaputte Seite". Stattdessen eine ruhige, geschlossene
Flaeche im Farbton der Seite (aus data-ton, also aus der Kachelfarbe)
mit einem leuchtenden Ring. Ein Zeichen waere hier zu laut: Es geht ja
gerade darum, dass nichts da ist -- der Ring markiert die Stelle, ohne
etwas zu behaupten.
Kontrast danach nachgemessen: 4,85:1 im schlechtesten Fall.
Co-Authored-By: Claude Opus 5 <[email protected]>
179 lines
6.9 KiB
CSS
179 lines
6.9 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: rgba(255, 255, 255, .02);
|
|
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);
|
|
}
|
|
|
|
.filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
|
|
.filter .schritt[aria-pressed="true"] {
|
|
/* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
|
|
hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
|
|
--f: var(--akzent);
|
|
color: #fff;
|
|
background:
|
|
linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
|
|
color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
|
|
linear-gradient(150deg, var(--f),
|
|
color-mix(in srgb, var(--f) 45%, transparent)) border-box;
|
|
box-shadow: 0 4px 16px -9px var(--f);
|
|
}
|
|
|
|
/* ---------- Liste ------------------------------------------------------- */
|
|
|
|
.datei {
|
|
display: grid; gap: 4px 16px; align-items: center;
|
|
grid-template-columns: 34px 1fr auto;
|
|
padding: 13px 16px; margin-bottom: 9px;
|
|
background: rgba(255, 255, 255, .03);
|
|
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: rgba(255, 255, 255, .03);
|
|
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; } }
|