Regieplatz, Bildschirm teilen, Zuruecksetzen und der Preis
Vier Sachen aus Filipes Ansagen vom 28.09.2026.
=======================================================================
1. DER REGIEPLATZ
"kann das nicht bissl aufgeteilt sein auf links und rechts und eine
barre unten in der mitte. kannst du das nicht hoch professionell
machen und hochwertig vom aussehen?"
Die Teilung folgt dem, was WANN gebraucht wird:
LINKS Was laeuft. Das liest man.
RECHTS Was eingetragen wird. Das tippt man VOR der Sendung.
UNTEN Der Transport. Den fasst man WAEHREND der Sendung an.
Vorher stand alles in einem Stapel, und wer im Live an den Play-Knopf
wollte, musste an den Eingabefeldern vorbeiscrollen. Der Play-Knopf
ist jetzt rund und 58 px -- der einzige, den man blind treffen muss,
und die Form unterscheidet ihn schon vor dem Hinsehen.
UND EIN FUND, DEN NUR DIE MESSUNG FAND: Nach dem Umbau lag die Leiste
bei y=986 in einem 900 Pixel hohen Fenster. Die Rechnung ging auf
(links, rechts, Leiste darunter) und das Ergebnis war trotzdem
falsch. Jetzt klebt sie (`position: sticky`) -- unten, wie gewollt,
und immer sichtbar. Ihr Grund musste dafuer dicht werden: eine
halbdurchsichtige Leiste, durch die Text scrollt, ist die Flaeche,
auf der man sich im Live verliest.
=======================================================================
2. DEN BILDSCHIRM TEILEN
"waere es nicht einfach eine bildschirm uebertragung zu installieren
und es zu perfektionieren?"
Ja -- der Weg war schon da: Die Kamerabilder laufen als
Direktverbindung von Mensch zu Mensch. Geteilt wird deshalb AN STELLE
der Kamera; `replaceTrack` tauscht die Bildspur in jeder bestehenden
Leitung aus, ohne dass eine einzige neu ausgehandelt werden muss.
Eine zweite Spur daneben waere eine zweite Verhandlung je Zuschauer,
und jede davon kann scheitern.
Vier Dinge, die sonst schiefgegangen waeren:
- Wer waehrenddessen dazukommt, bekommt den Bildschirm und nicht
das Gesicht.
- Das eigene Fenster zeigt, was die anderen sehen -- sonst waere es
die eine Anzeige, der man nicht trauen kann.
- Der Stopp-Knopf des Browsers wird gehoert; sonst bliebe die Seite
auf "teilt" stehen und sendete ein totes Bild.
- Der Kameraknopf wird grau, solange geteilt wird. Er haette keine
Wirkung mehr -- und ein Knopf, der still nichts tut, ist
schlimmer als keiner.
Ein Bildschirm wird ausserdem NICHT zugeschnitten: `cover` ist fuer
ein Gesicht richtig, bei einem Schreibtisch faellt links und rechts
genau das weg, worum es geht.
UND DIE WAHRHEIT STEHT AN DER BEDIENUNG: Netflix, Disney+ und Prime
bleiben beim Teilen schwarz (Widevine schaltet den Videobereich ab --
auf Discord und Zoom ist es genauso), und einen Film weiterzusenden
waere eine oeffentliche Wiedergabe. Wer das erst erfaehrt, nachdem im
Stream zehn Minuten ein schwarzes Rechteck stand, erfaehrt es zu
spaet.
=======================================================================
3. ALLES ZURUECKSETZEN
"brauch ich auch noch einen button wo ich alles easy zuruecksetzen
kann."
"Alles" heisst: der Schreibtisch, nicht das Gedaechtnis. Geleert
werden Titel, Video, zweites Video, Vorschaubild, Beginn,
Warteschlange, Gaesteliste; Anordnung, Kameragroesse, Ecke, Tempo und
Chatmodus gehen auf Vorgabe.
NICHT ANGETASTET werden Spenden, die Dogen der Leute, der Chatverlauf
und die Massnahmen der Moderation. Eine bezahlte Spende aus den
Buechern zu nehmen waere eine Faelschung; eine stillschweigend
aufgehobene Sperre waere eine Entscheidung, die niemand getroffen
hat. Beides steht nebeneinander im Dialog, BEVOR etwas passiert -- ein
"Bist du sicher?" ohne diese Liste ist keine Frage, sondern eine
Huerde.
Im Live ist der Knopf grau und sagt warum. Und die Spalten stehen
einzeln da statt als "alles ausser": Eine Ausnahmeliste waechst still
mit jeder neuen Spalte mit, und dann loescht das Zuruecksetzen
irgendwann etwas, das es nie loeschen sollte.
=======================================================================
4. DER PREIS BEI DEN DOGEN
"da muss ich auch sehen so viel dogen sind so viel euro. damit ich
auch immer weiss was es ist. aber nur ich. die leute sollen nur sehen
was dogen kosten."
Das ist keine Ruecknahme von "nie Geld", sondern ihre Grenze. Die
Regel war richtig fuer alles, was ANZEIGE ist -- Karte, Stream, Chat,
Punktestand -- und falsch fuer die eine Stelle, an der jemand KAUFT.
GENAU ZWEI AUSNAHMEN, und die Pruefung nennt sie beim Namen statt die
Regel aufzuweichen:
knoepfe[].cent fuer alle -- der Preis am Kaufknopf
kurs_cent_je_doge nur fuer die Leitung
DIE ERLAUBNIS STECKT IN DEN DATEN UND NICHT IN EINEM `if`. Ein
Zuschauer hat den Kurs nicht und kann deshalb GAR KEINEN Preis
ausrechnen -- auch nicht, wenn eine spaetere Zeile es versuchte. Eine
Abfrage "darf der das sehen?" in der Oberflaeche waere eine Regel, die
man vergessen kann; eine fehlende Zahl ist eine, die man nicht
vergessen kann.
Eine Zahl statt dreissig Einzelumrechnungen: Wer je Zeile einen Cent
mitschickt, hat dreissig Gelegenheiten, eine zu vergessen.
=======================================================================
FUENF BEFUNDE GEGEN DIE EIGENEN PRUEFUNGEN
1. Eine Pruefung fragte "liegt die Leiste unter beiden Spalten?" --
das tut eine klebende Leiste beim Hochscrollen absichtlich nicht.
Sie stellte die Frage von vorher. Jetzt zaehlt die Reihenfolge im
Dokument, die beim Scrollen wie beim Stillstand gilt.
2. Eine Messung klickte auf einen Namen und wartete 400 ms auf die
UHR -- und verschluckte den Klickfehler still. Derselbe Lauf war
dreimal gruen und beim vierten rot, ohne Codeaenderung. Jetzt wird
auf das Merkmal gewartet, bis zu dreimal, und die Zahl der
Anlaeufe steht im Protokoll.
3. Eine Pruefung loeschte erst selbst den Chat (eine Sendung zu
beenden tut das mit Absicht) und fragte dann, ob er noch da ist.
4. "Die Dogen sind unberuehrt (0 Staende)" -- null bleibt auch dann
null, wenn das Zuruecksetzen sie mitnaehme. Jetzt steht vorher
eine echte Spende da, und die Zahl gehoert in die BEDINGUNG.
5. `knopf-still--haupt` stand seit Wochen im HTML und war in KEINEM
Stilblatt definiert -- eine Klasse, die aussieht, als sei etwas
hervorgehoben, und auf dem Bildschirm ist es das nicht. Gefunden
beim Nachsehen, ob es sie gibt, bevor ich sie ein zweites Mal
benutze.
Und eine neue Pruefung, die es vorher nicht gab: ALLE 118 Kennungen,
die das Programm mit `$('...')` anspricht, werden gegen das HTML
gehalten. Nach einem Umbau, der die halbe Tafel neu sortiert, waere
eine verlorene Kennung KEIN Fehler beim Laden -- `$()` gibt still
`null` zurueck, und der Fehler erscheint erst, wenn jemand mitten in
der Sendung den Knopf drueckt.
pruef-reaktion 365/0 (vorher 321) - pruef-spenden 172/0 (vorher 167) -
pruef-buehne 36/0 - pruef-css-klassen ok - pruef-tippziele 11/0 -
mess-reaktion und mess-buehne ohne Beanstandung
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
@@ -465,6 +465,36 @@
|
||||
display: block;
|
||||
background: #0b0a12;
|
||||
}
|
||||
|
||||
/* ==== EIN GETEILTER BILDSCHIRM WIRD NICHT ZUGESCHNITTEN ============
|
||||
|
||||
Filipe: „waere es nicht einfach eine bildschirm uebertragung zu
|
||||
installieren?"
|
||||
|
||||
`cover` ist fuer ein Gesicht richtig: Es fuellt den Rahmen, und
|
||||
was an den Seiten fehlt, fehlt niemandem. Bei einem Bildschirm
|
||||
faellt genau das weg, worum es geht -- 16:9 in einem 4:3-Fenster
|
||||
verliert links und rechts je ein Achtel, und dort steht die
|
||||
Werkzeugleiste.
|
||||
|
||||
`contain` UND EIN SCHWARZER GRUND. Die schwarzen Streifen sind
|
||||
kein Schoenheitsfehler, sondern die einzige Art, ein Bild ganz zu
|
||||
zeigen, dessen Form man nicht kennt.
|
||||
|
||||
UND DAS SEITENVERHAELTNIS GEHT AUF 16:9. Ein Bildschirm ist fast
|
||||
nie 4:3; das Fenster passt sich an, statt den Rahmen mit Schwarz
|
||||
zu fuellen. */
|
||||
.kamera[data-bildschirm="ja"] { aspect-ratio: 16 / 9; }
|
||||
.kamera[data-bildschirm="ja"] video {
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
}
|
||||
/* Ein Schild, damit niemand ein stehendes Bild fuer eine
|
||||
eingefrorene Kamera haelt. */
|
||||
.kamera[data-bildschirm="ja"] .kamera__name::before {
|
||||
content: "Bildschirm · ";
|
||||
color: var(--schrift-leise);
|
||||
}
|
||||
.kamera__name {
|
||||
position: absolute; left: 8px; bottom: 8px;
|
||||
padding: 3px 9px 4px;
|
||||
@@ -972,6 +1002,42 @@
|
||||
background: linear-gradient(180deg, #7de2a8, #47c97f);
|
||||
box-shadow: 0 10px 22px -14px #47c97f;
|
||||
}
|
||||
/* ==== DER PREIS AM KAUFKNOPF ======================================
|
||||
Filipe: „die leute sollen nur sehen was dogen kosten. sonst wissen
|
||||
die ja nicht wie viel es kosten wird."
|
||||
|
||||
Klein und ruhig UNTER der Dogenzahl. Die Dogen sind die Waehrung
|
||||
des Hauses, der Preis ist die Auskunft dazu -- andersherum waere
|
||||
es ein Geldknopf mit Dogen als Beiwerk. Die Farbe ist dieselbe wie
|
||||
der Knopftext, nur schwaecher: Ein zweiter Farbton auf einem Knopf
|
||||
von 44 Pixeln ist einer zu viel. */
|
||||
.geben__preis {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
font-size: .72rem; font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
opacity: .62;
|
||||
}
|
||||
|
||||
/* ==== UND DIE UMRECHNUNG FUER DIE LEITUNG =========================
|
||||
Filipe: „damit ich auch immer weiss was es ist. aber nur ich."
|
||||
|
||||
Sie steht ueberall, wo er eine Dogenzahl EINTRAEGT oder PRUEFT --
|
||||
an der Stufenleiter, beim Eintragen, in den Listen. Immer leise:
|
||||
Sie ist die Nebenauskunft, nicht die Zahl, um die es geht.
|
||||
|
||||
Es gibt sie nur, wenn der Server den Kurs mitgeschickt hat -- und
|
||||
den bekommt nur die Leitung. Ein Zuschauer sieht diese Klasse nie,
|
||||
weil die Zeichenkette leer bleibt und `if (preis)` sie gar nicht
|
||||
erst anlegt. */
|
||||
.preis {
|
||||
font-size: .72rem; font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--schrift-leise);
|
||||
letter-spacing: 0; text-transform: none;
|
||||
}
|
||||
.preis--unter { display: block; margin-top: 1px; }
|
||||
|
||||
.geben__frei {
|
||||
justify-self: start;
|
||||
min-height: 34px; display: inline-flex; align-items: center;
|
||||
@@ -1484,6 +1550,114 @@
|
||||
und was dort passiert, passiert nur bei einem selbst, waehrend
|
||||
alle anderen weiterlaufen.
|
||||
--------------------------------------------------------------------- */
|
||||
/* =====================================================================
|
||||
DER REGIEPLATZ (28.09.2026)
|
||||
|
||||
Filipe: „kann das nicht bissl aufgeteilt sein auf links und rechts
|
||||
und eine barre unten in der mitte. kannst du das nicht hoch
|
||||
professionell machen und hochwertig vom aussehen?"
|
||||
|
||||
---------------------------------------------------------------------
|
||||
DIE TEILUNG FOLGT DEM, WAS WANN GEBRAUCHT WIRD
|
||||
|
||||
LINKS Was läuft. Das liest man, man tippt es nicht.
|
||||
RECHTS Was eingetragen wird. Das tippt man VOR der Sendung.
|
||||
UNTEN Der Transport. Den fasst man WÄHREND der Sendung an --
|
||||
und er liegt deshalb immer an derselben Stelle, über
|
||||
die ganze Breite.
|
||||
|
||||
Vorher stand alles in einem Stapel untereinander, und wer im Live
|
||||
an den Play-Knopf wollte, musste an den Eingabefeldern
|
||||
vorbeiscrollen. Scrollen ist mitten in einer Sendung ein Griff
|
||||
daneben.
|
||||
|
||||
`minmax(0, 1fr)` UND NICHT `1fr`: Ein langer Videotitel würde die
|
||||
Spalte sonst aufziehen, statt abgeschnitten zu werden -- und dann
|
||||
läuft die rechte Seite aus dem Pult. Dieselbe Falle wie bei den
|
||||
Saalzeilen am selben Tag.
|
||||
===================================================================== */
|
||||
.regieplatz {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"links rechts"
|
||||
"leiste leiste";
|
||||
gap: 16px 20px;
|
||||
align-items: start;
|
||||
}
|
||||
.regieplatz__seite { grid-area: links; display: grid; gap: 10px; align-content: start; }
|
||||
.regieplatz__seite--rechts {
|
||||
grid-area: rechts;
|
||||
/* Eine ruhige Linie statt eines Kastens. Zwei Kästen nebeneinander
|
||||
wären zwei Rahmen mehr auf einer Fläche, die ohnehin voll ist. */
|
||||
border-left: 1px solid var(--rand);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.regieplatz__ueber {
|
||||
margin: 0;
|
||||
/* .72rem und nicht .68: 11,52 px ist die Untergrenze des Hauses,
|
||||
10,88 waere darunter. Die Zahl ist nicht Geschmack -- sie steht
|
||||
in `pruef-css-klassen`, und genau dort ist diese Zeile
|
||||
aufgefallen. */
|
||||
font-size: .72rem; font-weight: 800;
|
||||
letter-spacing: .14em; text-transform: uppercase;
|
||||
color: var(--schrift-leise);
|
||||
}
|
||||
|
||||
/* ---- Die Transportleiste --------------------------------------------
|
||||
Aufgebaut wie jeder Videospieler, den man kennt: Schiene über die
|
||||
ganze Breite, darunter eine Reihe mit dem Transport in der MITTE.
|
||||
Eine Anordnung, die man schon kennt, muss man nicht lernen.
|
||||
|
||||
Sie ist die einzige Fläche im Pult mit eigenem Grund -- weil sie
|
||||
die einzige ist, die im Live gebraucht wird. */
|
||||
.transport {
|
||||
grid-area: leiste;
|
||||
display: grid; gap: 10px;
|
||||
padding: 12px 14px 13px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid var(--rand-hell);
|
||||
/* ==== SIE KLEBT UNTEN ==========================================
|
||||
|
||||
GEMESSEN, NICHT VERMUTET: Beim ersten Bau lag die Leiste bei
|
||||
y=986 in einem 900 Pixel hohen Fenster -- unter dem Falz. Wer im
|
||||
Live an den Play-Knopf wollte, haette also scrollen muessen, und
|
||||
genau davon sollte der Umbau wegfuehren. Die Rechnung ging auf
|
||||
(links, rechts, Leiste darunter), und das Ergebnis war trotzdem
|
||||
falsch.
|
||||
|
||||
`sticky` loest beides auf einmal: Sie steht unten -- wie Filipe
|
||||
es wollte -- und bleibt dabei immer sichtbar. Sie ist die
|
||||
LETZTE Zeile des Rasters, also verdeckt sie nichts: Unter ihr
|
||||
kommt nichts mehr.
|
||||
|
||||
Der Grund muss dafuer DICHT sein. Eine halbdurchsichtige Leiste,
|
||||
durch die Text scrollt, ist genau die Art Flaeche, auf der man
|
||||
sich im Live verliest. */
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(23, 20, 34, .95), rgba(15, 13, 24, .98));
|
||||
backdrop-filter: blur(12px) saturate(1.1);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(1.1);
|
||||
box-shadow: 0 -14px 26px -22px #000, inset 0 1px 0 rgba(255, 255, 255, .06);
|
||||
}
|
||||
.transport__schiene { display: flex; align-items: center; gap: 12px; }
|
||||
.transport__schiene .spur__schiene { flex: 1 1 auto; min-width: 0; }
|
||||
.transport__reihe {
|
||||
display: grid;
|
||||
/* Drei gleich breite Teile -- nur so steht der Transport wirklich
|
||||
in der Mitte und nicht dort, wo die Nachbarn gerade Platz
|
||||
lassen. */
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.transport__teil { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.transport__teil--mitte { justify-content: center; gap: 10px; }
|
||||
.transport__teil--rechts { justify-content: flex-end; }
|
||||
|
||||
.spur {
|
||||
display: grid; gap: 11px;
|
||||
padding: 13px 14px 14px;
|
||||
@@ -1521,7 +1695,6 @@
|
||||
font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
|
||||
font-size: .82rem;
|
||||
}
|
||||
.spur__band { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
|
||||
.spur__knopf {
|
||||
appearance: none; cursor: pointer;
|
||||
min-height: 40px; min-width: 44px; padding: 0 12px;
|
||||
@@ -1533,11 +1706,18 @@
|
||||
font-variant-numeric: tabular-nums;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||||
}
|
||||
/* DER PLAY-KNOPF IST DER GROESSTE KNOPF DES HAUSES -- und das ist
|
||||
kein Geschmack: Er ist der einzige, den man mitten in einer
|
||||
Sendung blind treffen muss. Rund, damit er sich schon in der
|
||||
Form von allen anderen unterscheidet. */
|
||||
.spur__knopf--gross {
|
||||
min-width: 52px;
|
||||
background: rgba(255, 255, 255, .1);
|
||||
min-width: 58px; min-height: 58px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .12);
|
||||
border-color: var(--rand-hell);
|
||||
}
|
||||
.spur__knopf--gross svg { width: 18px; height: 18px; fill: currentColor; }
|
||||
.spur__knopf--gross:hover { background: rgba(255, 255, 255, .17); }
|
||||
.spur__knopf--gross svg { width: 22px; height: 22px; fill: currentColor; }
|
||||
.spur__knopf--weiter {
|
||||
border-color: rgba(154, 183, 255, .34);
|
||||
background: rgba(154, 183, 255, .12);
|
||||
@@ -1551,7 +1731,11 @@
|
||||
border-color: rgba(224, 161, 58, .36);
|
||||
background: rgba(224, 161, 58, .13);
|
||||
color: #f0cf9a;
|
||||
max-width: 24rem;
|
||||
/* Er steht seit dem 28.09. in der linken Spalte und nicht mehr in
|
||||
einer eigenen Reihe: Dort ist die Breite der Spalte die Grenze,
|
||||
nicht eine Zahl, die man beim naechsten Umbau vergisst. */
|
||||
max-width: 100%;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spur__knopf--tausch span {
|
||||
@@ -1562,13 +1746,11 @@
|
||||
/* ---- Geschwindigkeit ----
|
||||
Eine Reihe kleiner Schalter, kein Schieberegler: Es gibt sechs
|
||||
erlaubte Werte, und ein Regler, der zwischen ihnen einrastet, wäre
|
||||
eine Bedienung, die etwas vortäuscht, das sie nicht kann. */
|
||||
.spur__mehr {
|
||||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||||
margin-top: 9px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid var(--rand);
|
||||
}
|
||||
eine Bedienung, die etwas vortäuscht, das sie nicht kann.
|
||||
|
||||
Sie steht LINKS in der Transportleiste und nicht neben dem
|
||||
Play-Knopf: Sie wird selten angefasst, und im Live fasst man in
|
||||
die Mitte. */
|
||||
.tempo { display: flex; gap: 4px; flex-wrap: wrap; }
|
||||
.tempo__knopf {
|
||||
appearance: none; cursor: pointer;
|
||||
@@ -1998,6 +2180,17 @@
|
||||
Element gedeckt ist, und hat den Eckwähler zu Recht gemeldet,
|
||||
solange dort nur eine feste Höhe stand. Eine feste Höhe sagt
|
||||
„genau so groß"; die Regel will wissen „mindestens so groß". */
|
||||
/* Der Teilen-Knopf in der Senderleiste: gedrueckt heisst hier
|
||||
„teilt gerade" und nicht „ist aus" -- deshalb leuchtet er, statt
|
||||
durchgestrichen zu sein. */
|
||||
#s-teilen[aria-pressed="true"] {
|
||||
border-color: rgba(125, 226, 168, .5);
|
||||
background: rgba(125, 226, 168, .16);
|
||||
color: #9ff0c2;
|
||||
}
|
||||
#s-teilen svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
|
||||
.sender-knopf[disabled] { opacity: .4; cursor: default; }
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.kamgroesse__knopf { min-height: 44px; }
|
||||
.kamecke__knopf { min-height: 44px; min-width: 52px; height: 44px; width: 52px; }
|
||||
@@ -2063,6 +2256,39 @@
|
||||
font-size: .72rem; font-weight: 700;
|
||||
color: var(--schrift-leise); letter-spacing: .04em;
|
||||
}
|
||||
/* ==== DER HAUPTKNOPF EINER ZEILE ===================================
|
||||
`knopf-still--haupt` stand schon an „Übernehmen" bei den Stufen --
|
||||
und war NIRGENDS gestaltet. Eine Klasse, die kein Stilblatt kennt,
|
||||
ist stille Absicht ohne Wirkung: Sie sieht im Quelltext aus, als
|
||||
sei etwas hervorgehoben, und auf dem Bildschirm ist es das nicht.
|
||||
Gefunden beim Nachsehen, ob es sie gibt, bevor ich sie ein zweites
|
||||
Mal benutze.
|
||||
|
||||
Dieselben Werte wie „Nächstes" in der Transportleiste: Ein Haus,
|
||||
in dem die wichtige Handlung zweimal verschieden aussieht, hat
|
||||
keine wichtige Handlung. */
|
||||
.knopf-still--haupt {
|
||||
border-color: rgba(154, 183, 255, .34);
|
||||
background: rgba(154, 183, 255, .12);
|
||||
color: #cfe0ff;
|
||||
}
|
||||
|
||||
/* Ein Knopf, der gebraucht wird, aber nicht gesucht: leise Farbe,
|
||||
und im Live grau. Rot waere er erst, wenn er etwas zerstoeren
|
||||
koennte -- er leert nur den Schreibtisch. */
|
||||
.knopf-still--leise {
|
||||
border-color: var(--rand);
|
||||
background: none;
|
||||
color: var(--schrift-leise);
|
||||
}
|
||||
.knopf-still--leise:hover:not([disabled]) {
|
||||
color: var(--an-hell);
|
||||
border-color: rgba(216, 64, 74, .35);
|
||||
background: rgba(216, 64, 74, .1);
|
||||
}
|
||||
.knopf-still--leise[disabled] { opacity: .4; cursor: default; }
|
||||
.pult__zeile--ende { margin-top: 4px; align-items: center; }
|
||||
|
||||
.pult__feld select {
|
||||
min-height: 44px; padding: 0 10px;
|
||||
border-radius: 11px;
|
||||
@@ -2089,6 +2315,32 @@
|
||||
Grund, warum jemand hier ist.
|
||||
===================================================================== */
|
||||
@media (max-width: 860px) {
|
||||
/* ==== AM HANDY WIRD AUS LINKS UND RECHTS EIN STAPEL ==========
|
||||
Zwei Spalten auf 390 px waeren zwei Spalten mit je 180 px -- da
|
||||
passt kein Videotitel hinein und kein Datumsfeld. Die
|
||||
Transportleiste bleibt, wo sie ist: ganz unten, ueber die
|
||||
ganze Breite. Sie ist das, was man im Live anfasst, und das
|
||||
aendert sich mit der Bildschirmbreite nicht. */
|
||||
.regieplatz {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas: "links" "rechts" "leiste";
|
||||
gap: 14px;
|
||||
}
|
||||
.regieplatz__seite--rechts {
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--rand);
|
||||
padding-left: 0;
|
||||
padding-top: 14px;
|
||||
}
|
||||
/* Die drei gleich breiten Teile der Leiste gehen auf; uebrig
|
||||
bleibt: Transport in der Mitte, alles andere darunter. */
|
||||
.transport__reihe {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
justify-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.transport__teil--rechts { justify-content: center; }
|
||||
|
||||
.kino {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
Reference in New Issue
Block a user