DogFatherGit
79f0186494
Filipes PDF ueber TikTok LIVE Studio landete unter "TikTok - Grundlagen & Funktionen" statt unter "Streaming mit PC". Ursache ist ein Denkfehler von mir, kein Bedienfehler: Das Kategoriefeld war mit dem ERSTEN Eintrag der Liste vorbelegt. Wer es nicht bewusst aendert, merkt nichts -- die Pflichtangabe hat still fuer ihn entschieden. Eine Vorbelegung, die niemand gewaehlt hat, ist keine Voreinstellung, sondern ein Fehler mit Ansage. Jetzt steht dort "- Kategorie waehlen -", und ohne Auswahl geht das Formular nicht ab (Browser blockt, zusaetzlich eigene Pruefung). Vorbelegt wird nur noch, wenn man AUS einer Kategorie heraus hochlaedt -- dann ist es eine informierte Annahme statt einer geratenen. Ausserdem: zwanzig Eintraege in einer flachen Liste findet man nicht. Das Feld ist jetzt nach denselben sechs Welten gruppiert wie die Kacheln auf der Seite (optgroup). Geprueft: alle 20 waehlbar, "Streaming mit PC" ist dabei. Nach dem Veroeffentlichen steht in einer gruenen Zeile, WO die Anleitung gelandet ist -- sonst merkt man einen Irrtum erst, wenn man sie irgendwann sucht. Die Meldung nutzt dieselbe Zeile wie Fehler, aber nicht dieselbe Farbe: Eine Erfolgsmeldung in Warnrot liest sich wie ein Problem. Bereits hochgeladene PDFs lassen sich ueber "Bearbeiten" umhaengen -- die Datei bleibt dabei unberuehrt.
327 lines
13 KiB
CSS
327 lines
13 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);
|
|
}
|