DogFatherGit
e14d9d5042
Filipe: "wieso sieht das so scheisse aus?" -- zum aufgeklappten Auswahlmenue der Kategorie. Er hat recht, und die Ursache ist dieselbe wie bei der Rollenwahl: Ein AUFGEKLAPPTES <select> laesst sich nicht gestalten. Es kommt vom Betriebssystem, in Windows-Weiss, mitten in einer dunklen Oberflaeche. Bei zwanzig Eintraegen kam dazu, dass man in so einer Liste nichts findet. KATEGORIEWAHL: jetzt dieselben sechs Welten, dieselben Farben und dieselben Symbole wie die Kacheln auf der Seite. Man waehlt aus demselben Regal, in dem man sonst stoebert. Unter der Wahl steht die Beschreibung der gewaehlten Kategorie -- die Zeile, die beim Einsortieren die eigentliche Frage beantwortet. Nichts ist vorausgewaehlt (ausser man laedt aus einer Kategorie heraus hoch). Die stille Vorbelegung war der Grund, warum eine PDF ueber TikTok LIVE Studio unter "TikTok - Grundlagen" landete. FILTER Stufe und Geraet: ebenfalls Schalter statt Menue. Zwei bis vier Werte, die sich nie aendern -- dafuer ein Menue zu oeffnen ist ein Klick zu viel. Der Tag-Filter bleibt bewusst ein Auswahlfeld: Tags wachsen mit dem Bestand, eine Schalterreihe waere irgendwann zwei Zeilen lang. Geprueft: 20 Kategorien in 6 Welten, nichts vorausgewaehlt, Filter setzen die Adresse (?stufe=einsteiger), Handy ohne Ueberlauf, 0 Konsolenfehler. Testeintrag landete unter der gewaehlten Kategorie.
412 lines
16 KiB
CSS
412 lines
16 KiB
CSS
/* ===================================================================
|
|
Wissens-Bibliothek.
|
|
|
|
Zwanzig Kategorien sind viel. Damit sie trotzdem in einem Blick
|
|
erfassbar bleiben, sind sie in sechs Welten gebuendelt, und jede Welt
|
|
hat ihre eigene Farbe. Man sucht dann nicht unter zwanzig gleichen
|
|
Kacheln, sondern erst die Welt -- und da stehen nur noch drei bis vier.
|
|
|
|
Die Farben sind gedeckt und tragen nur den Symbolring, nicht die
|
|
ganze Kachel. Zwanzig farbige Flaechen waeren ein Flickenteppich.
|
|
=================================================================== */
|
|
|
|
/* ---------- Suche und Filter ---------------------------------------------- */
|
|
|
|
.suchleiste {
|
|
display: grid; gap: 12px; margin-bottom: 30px;
|
|
padding: 16px 18px;
|
|
background: rgba(255, 255, 255, .028);
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
}
|
|
.suchleiste__feld { position: relative; display: flex; align-items: center; }
|
|
.suchleiste__lupe {
|
|
position: absolute; left: 13px; width: 17px; height: 17px;
|
|
fill: none; stroke: var(--text-still); stroke-width: 1.8; stroke-linecap: round;
|
|
pointer-events: none;
|
|
}
|
|
.suchleiste__feld input {
|
|
width: 100%; padding: 11px 14px 11px 40px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
.suchleiste__feld input:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .6);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
.suchleiste__feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
|
|
|
|
.suchleiste__filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
|
.suchleiste__filter .feld-schild { margin: 0; }
|
|
.suchleiste__filter select {
|
|
padding: 8px 11px; min-width: 118px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; font-size: .85rem;
|
|
}
|
|
.suchleiste__filter select:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .6);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
|
|
/* ---------- Bloecke -------------------------------------------------------- */
|
|
|
|
.block { margin-bottom: 34px; }
|
|
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
|
|
.block__titel {
|
|
margin: 0; font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.block__zahl {
|
|
min-width: 22px; padding: 1px 8px; text-align: center;
|
|
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
}
|
|
|
|
/* ---------- Kacheln --------------------------------------------------------- */
|
|
|
|
.kacheln {
|
|
display: grid; gap: 11px;
|
|
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
|
|
}
|
|
|
|
.kachel {
|
|
--w: var(--akzent);
|
|
position: relative; display: flex; align-items: flex-start; gap: 14px;
|
|
padding: 15px 16px;
|
|
text-decoration: none; color: var(--text);
|
|
border: 1px solid transparent; border-radius: 13px;
|
|
/* Deutlich heller als der Seitenhintergrund (#05070d) -- die Kacheln
|
|
sollen als Flaechen erkennbar sein, nicht im Dunkeln verschwinden.
|
|
Gemessen: Seite liegt bei RGB(5,7,13), die Kachel bei RGB(38,49,67) --
|
|
der erste Versuch mit (27,36,51) war zu zaghaft, da kam der sichtbare
|
|
Gewinn fast nur vom Rand. */
|
|
background:
|
|
linear-gradient(#263143, #1c2637) padding-box,
|
|
linear-gradient(150deg,
|
|
color-mix(in srgb, var(--w) 62%, transparent),
|
|
rgba(255, 255, 255, .12) 55%,
|
|
color-mix(in srgb, var(--w) 26%, transparent)) border-box;
|
|
transition: transform .16s ease, box-shadow .2s ease, background .16s ease;
|
|
}
|
|
.kachel::after {
|
|
content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 1px;
|
|
background: linear-gradient(90deg, transparent,
|
|
color-mix(in srgb, var(--w) 45%, transparent), transparent);
|
|
}
|
|
.kachel:hover {
|
|
transform: translateY(-2px);
|
|
background:
|
|
linear-gradient(#2f3b50, #232e42) padding-box,
|
|
linear-gradient(150deg, var(--w), rgba(255, 255, 255, .16) 55%,
|
|
color-mix(in srgb, var(--w) 40%, transparent)) border-box;
|
|
box-shadow: 0 8px 26px -11px color-mix(in srgb, var(--w) 90%, transparent);
|
|
}
|
|
.kachel:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
|
|
}
|
|
.kachel[data-leer="ja"] { opacity: .82; }
|
|
.kachel[data-leer="ja"]:hover { opacity: 1; }
|
|
|
|
.kachel__ring {
|
|
flex: none; display: grid; place-items: center;
|
|
width: 42px; height: 42px; border-radius: 12px;
|
|
background: color-mix(in srgb, var(--w) 22%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--w) 45%, transparent);
|
|
}
|
|
.kachel__symbol {
|
|
width: 21px; height: 21px;
|
|
fill: none; stroke: var(--w); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.kachel__text { min-width: 0; flex: 1; }
|
|
.kachel__name { display: block; font-size: .93rem; font-weight: 650; line-height: 1.3; }
|
|
.kachel__beschreibung {
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
|
overflow: hidden; margin-top: 3px;
|
|
/* War --text-still (gemessen 3,6:1 auf der neuen Flaeche) -- zu blass
|
|
fuer laufenden Text. --text-leise liegt bei 6,4:1. */
|
|
font-size: .79rem; color: var(--text-leise); line-height: 1.45;
|
|
}
|
|
.kachel__zahl {
|
|
flex: none; min-width: 26px; padding: 2px 8px; align-self: flex-start;
|
|
text-align: center; font-size: .75rem; font-weight: 700;
|
|
color: color-mix(in srgb, var(--w) 40%, #ffffff);
|
|
background: color-mix(in srgb, var(--w) 20%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--w) 40%, transparent);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* Eine Farbe je Welt -- die Reihenfolge folgt der Gliederung. */
|
|
.block[data-welt="tiktok"] .kachel { --w: #3fbdf5; }
|
|
.block[data-welt="aufbau"] .kachel { --w: #8a76ff; }
|
|
.block[data-welt="bildton"] .kachel { --w: #5fc99a; }
|
|
.block[data-welt="technik"] .kachel { --w: #e8b877; }
|
|
.block[data-welt="inhalt"] .kachel { --w: #e88fb4; }
|
|
.block[data-welt="hilfe"] .kachel { --w: #8e9cb0; }
|
|
|
|
/* ---------- Karte einer Anleitung -------------------------------------------- */
|
|
|
|
.karten { display: grid; gap: 10px; }
|
|
|
|
.pdf {
|
|
padding: 15px 17px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
transition: border-color .18s ease;
|
|
}
|
|
.pdf:hover { border-color: rgba(255, 255, 255, .18); }
|
|
.pdf[data-wichtig="ja"] {
|
|
border-color: rgba(232, 192, 125, .32);
|
|
background: rgba(232, 192, 125, .045);
|
|
}
|
|
|
|
.pdf__kopf { display: flex; gap: 14px; align-items: flex-start; }
|
|
.pdf__ring {
|
|
flex: none; display: grid; place-items: center;
|
|
width: 38px; height: 38px; border-radius: 11px;
|
|
background: rgba(63, 189, 245, .1);
|
|
border: 1px solid rgba(63, 189, 245, .24);
|
|
}
|
|
.pdf__symbol {
|
|
width: 19px; height: 19px;
|
|
fill: none; stroke: var(--akzent); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.pdf__mitte { min-width: 0; flex: 1; }
|
|
.pdf__titel { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; }
|
|
.pdf__text { margin: 4px 0 0; font-size: .86rem; color: var(--text-leise); max-width: 78ch; }
|
|
.pdf__fuss { margin: 9px 0 0; font-size: .75rem; color: var(--text-still); }
|
|
|
|
.pdf__marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
|
|
.marke-stufe, .marke-geraet, .marke-wichtig, .marke-tag {
|
|
padding: 3px 9px; border-radius: 999px;
|
|
font: inherit; font-size: .71rem; font-weight: 600;
|
|
border: 1px solid var(--rand); color: var(--text-still);
|
|
background: transparent;
|
|
}
|
|
.marke-stufe[data-stufe="einsteiger"] {
|
|
color: #5fc99a; border-color: rgba(95, 201, 154, .38); background: rgba(95, 201, 154, .1);
|
|
}
|
|
.marke-stufe[data-stufe="fortgeschritten"] {
|
|
color: #e8b877; border-color: rgba(232, 184, 119, .38); background: rgba(232, 184, 119, .1);
|
|
}
|
|
.marke-stufe[data-stufe="profi"] {
|
|
color: #e88fb4; border-color: rgba(232, 143, 180, .4); background: rgba(232, 143, 180, .1);
|
|
}
|
|
.marke-geraet { color: var(--text-leise); }
|
|
.marke-wichtig {
|
|
color: #e8c07d; border-color: rgba(232, 192, 125, .4); background: rgba(232, 192, 125, .1);
|
|
}
|
|
.marke-tag { cursor: pointer; transition: color .16s ease, border-color .16s ease; }
|
|
.marke-tag:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .42); }
|
|
|
|
.pdf__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
|
|
|
|
/* ---------- Formular ---------------------------------------------------------- */
|
|
|
|
/* ---------- Ablagefläche für die PDF ------------------------------------
|
|
Ein nacktes <input type="file"> sah aus wie ein Fremdkörper und der
|
|
Knopf wurde vom Browser abgeschnitten ("K..."). Eine eigene Fläche
|
|
nimmt auch gezogene Dateien an -- der Weg, den man ohnehin erwartet. */
|
|
|
|
.pdf-ablage {
|
|
display: grid; place-items: center; gap: 5px;
|
|
padding: 26px 20px; cursor: pointer;
|
|
border: 1px dashed rgba(255, 255, 255, .2);
|
|
border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .022);
|
|
transition: border-color .18s ease, background .18s ease;
|
|
}
|
|
.pdf-ablage:hover, .pdf-ablage:focus-visible {
|
|
outline: none;
|
|
border-color: rgba(63, 189, 245, .55);
|
|
background: rgba(63, 189, 245, .06);
|
|
}
|
|
.pdf-ablage[data-drueber="ja"] {
|
|
border-color: var(--akzent); border-style: solid;
|
|
background: rgba(63, 189, 245, .1);
|
|
}
|
|
.pdf-ablage[data-fertig="ja"] {
|
|
border-style: solid; border-color: rgba(95, 201, 154, .45);
|
|
background: rgba(95, 201, 154, .07);
|
|
}
|
|
.pdf-ablage__zeichen {
|
|
width: 26px; height: 26px;
|
|
fill: none; stroke: var(--text-still); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.pdf-ablage[data-fertig="ja"] .pdf-ablage__zeichen { stroke: #5fc99a; }
|
|
.pdf-ablage__text { margin: 0; font-size: .92rem; color: var(--text-leise); text-align: center; }
|
|
.pdf-ablage__text strong { color: var(--akzent); }
|
|
.pdf-ablage__klein { margin: 0; font-size: .77rem; color: var(--text-still); }
|
|
|
|
/* ---------- Schalter „besonders wichtig“ ---------------------------------
|
|
Ein Kästchen von 17 Pixeln ist auf dem Handy kaum zu treffen und sagt
|
|
nicht, was passiert. Der Schalter ist groß, zeigt seinen Zustand und
|
|
erklärt sich in einer Zeile. */
|
|
|
|
.schalter {
|
|
display: flex; align-items: flex-start; gap: 14px;
|
|
margin-top: 18px; padding: 14px 16px; cursor: pointer;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .022);
|
|
transition: border-color .18s ease, background .18s ease;
|
|
}
|
|
.schalter:hover { border-color: rgba(255, 255, 255, .2); }
|
|
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
|
|
.schalter__gleis {
|
|
flex: none; position: relative; width: 42px; height: 24px; margin-top: 1px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .1);
|
|
border: 1px solid var(--rand);
|
|
transition: background .2s ease, border-color .2s ease;
|
|
}
|
|
.schalter__punkt {
|
|
position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
|
|
border-radius: 50%; background: var(--text-still);
|
|
transition: transform .2s ease, background .2s ease;
|
|
}
|
|
.schalter input:checked + .schalter__gleis {
|
|
background: rgba(232, 192, 125, .3);
|
|
border-color: rgba(232, 192, 125, .6);
|
|
}
|
|
.schalter input:checked + .schalter__gleis .schalter__punkt {
|
|
transform: translateX(18px); background: #e8c07d;
|
|
}
|
|
.schalter input:focus-visible + .schalter__gleis {
|
|
box-shadow: 0 0 0 3px rgba(232, 192, 125, .28);
|
|
}
|
|
.schalter:has(input:checked) {
|
|
border-color: rgba(232, 192, 125, .35);
|
|
background: rgba(232, 192, 125, .05);
|
|
}
|
|
.schalter__text { display: grid; gap: 2px; font-size: .88rem; }
|
|
.schalter__text .leise { font-size: .79rem; }
|
|
|
|
.tag-vorschlag { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
|
|
.tag-knopf {
|
|
padding: 3px 9px; cursor: pointer; font-size: .73rem;
|
|
background: transparent; border: 1px dashed var(--rand); border-radius: 999px;
|
|
color: var(--text-still); font-family: inherit;
|
|
transition: color .16s ease, border-color .16s ease;
|
|
}
|
|
.tag-knopf:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .45); border-style: solid; }
|
|
|
|
.leer-hinweis {
|
|
display: grid; gap: 12px; justify-items: center;
|
|
padding: 34px 22px; margin-bottom: 26px; text-align: center;
|
|
color: var(--text-still); font-size: .92rem;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius);
|
|
}
|
|
.leer-hinweis p { margin: 0; max-width: 52ch; }
|
|
|
|
@media (max-width: 620px) {
|
|
.kacheln { grid-template-columns: 1fr; }
|
|
.suchleiste__filter { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; }
|
|
.suchleiste__filter .knopf-still { grid-column: 1 / -1; justify-self: start; }
|
|
.pdf__ring { display: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kachel, .pdf, .marke-tag, .tag-knopf, .pdf-ablage,
|
|
.schalter, .schalter__gleis, .schalter__punkt { transition: none; }
|
|
.kachel:hover { transform: none; }
|
|
}
|
|
|
|
/* Bestätigung in derselben Zeile wie Fehler, aber nicht in Warnrot --
|
|
eine Erfolgsmeldung in Rot liest sich wie ein Problem. */
|
|
.fehler[data-gut="ja"] {
|
|
color: #79d1a2;
|
|
padding: 9px 13px;
|
|
background: rgba(95, 201, 154, .09);
|
|
border: 1px solid rgba(95, 201, 154, .3);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
/* ===================================================================
|
|
Kategoriewahl und Filterschalter (31.08.2026).
|
|
|
|
Beides ersetzt ein <select>. Der Grund ist derselbe wie bei der
|
|
Rollenwahl: Ein AUFGEKLAPPTES Systemmenue laesst sich nicht
|
|
gestalten -- es kam als weisses Windows-Menue mitten in der dunklen
|
|
Oberflaeche. Bei zwanzig Kategorien kam dazu, dass man in so einer
|
|
Liste nichts findet.
|
|
|
|
Hier stehen dieselben sechs Welten und dieselben Farben wie auf den
|
|
Kacheln der Seite: Man waehlt aus demselben Regal, in dem man sonst
|
|
stoebert.
|
|
=================================================================== */
|
|
|
|
.katwahl { display: grid; gap: 14px; margin-top: 4px; }
|
|
|
|
.katwahl__welt { --w: var(--akzent); }
|
|
.katwahl__welt[data-welt="tiktok"] { --w: #3fbdf5; }
|
|
.katwahl__welt[data-welt="aufbau"] { --w: #8a76ff; }
|
|
.katwahl__welt[data-welt="bildton"] { --w: #5fc99a; }
|
|
.katwahl__welt[data-welt="technik"] { --w: #e8b877; }
|
|
.katwahl__welt[data-welt="inhalt"] { --w: #e88fb4; }
|
|
.katwahl__welt[data-welt="hilfe"] { --w: #8e9cb0; }
|
|
|
|
.katwahl__weltname {
|
|
margin: 0 0 6px; font-size: .7rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
color: color-mix(in srgb, var(--w) 55%, #ffffff);
|
|
}
|
|
.katwahl__reihe { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
|
|
.katwahl__knopf {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 8px 13px; cursor: pointer; text-align: left;
|
|
background: linear-gradient(#1a2230, #151c28);
|
|
border: 1px solid var(--rand); border-radius: 10px;
|
|
color: var(--text-leise); font: inherit; font-size: .83rem;
|
|
transition: border-color .16s ease, background .16s ease, color .16s ease;
|
|
}
|
|
.katwahl__knopf:hover { color: var(--text); border-color: color-mix(in srgb, var(--w) 45%, transparent); }
|
|
.katwahl__knopf:focus-visible {
|
|
outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
|
|
}
|
|
.katwahl__knopf[data-an="ja"] {
|
|
color: #fff; font-weight: 600;
|
|
border-color: color-mix(in srgb, var(--w) 65%, transparent);
|
|
background: linear-gradient(color-mix(in srgb, var(--w) 20%, #1a2230),
|
|
color-mix(in srgb, var(--w) 11%, #151c28));
|
|
box-shadow: 0 4px 14px -9px var(--w);
|
|
}
|
|
.katwahl__symbol {
|
|
width: 17px; height: 17px; flex: none;
|
|
fill: none; stroke: var(--w); stroke-width: 1.7;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.katwahl__name { white-space: nowrap; }
|
|
|
|
/* ---------- Filterschalter ------------------------------------------------ */
|
|
|
|
.filterreihe { display: inline-flex; gap: 4px; }
|
|
.filterreihe__knopf {
|
|
padding: 7px 12px; cursor: pointer;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: 8px;
|
|
color: var(--text-still); font: inherit; font-size: .82rem;
|
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.filterreihe__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
|
|
.filterreihe__knopf[data-an="ja"] {
|
|
color: #fff; font-weight: 600;
|
|
border-color: rgba(63, 189, 245, .55);
|
|
background: rgba(63, 189, 245, .16);
|
|
}
|
|
.filterreihe__knopf:focus-visible {
|
|
outline: none; box-shadow: 0 0 0 3px rgba(63, 189, 245, .3);
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.katwahl__knopf { flex: 1 1 100%; }
|
|
.filterreihe { flex-wrap: wrap; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.katwahl__knopf, .filterreihe__knopf { transition: none; }
|
|
}
|