139 lines
10 KiB
CSS
139 lines
10 KiB
CSS
/* Handgeschriebene Regeln des Pults (PultList.jsx, pult/*.jsx; Hustler-Pixelwelt T9, Spec E11/E13/E14). Nicht erzeugt: Szene, Reiter, Klemmbrett, Umschlag, Brief,
|
|
Stempel, Feld, Icons und Keyframes kommen aus pult.css (scripts/hustler-import.mjs, nie von Hand ändern). Hier stehen die Inline-Stile der Zeichenfläche
|
|
(pixelwelt-v2/pult/entwurf/Freigabe.dc.html) als Klassen sowie das, was die Vorlage nicht zeigt (Meldungen, Laden, Leerzustand, Handy). Alle Klassen beginnen mit hk-
|
|
und stehen unter der Wurzel .hk-pult. Die Stylesheets hängt WorkersPage ein (Komponenten importieren kein CSS); diese Datei kommt nach pult.css. */
|
|
|
|
/* ---------- Wurzel: füllt den Inhaltsbereich (Vorlage: 100 % x 100vh, nichts scrollt außer der Liste und dem Brief) ---------- */
|
|
.hk-pult { position: absolute; inset: 0; overflow: hidden; color: #2b2230; font-size: 15px; line-height: 20px; }
|
|
|
|
/* ---------- Szene: Rahmen, Bühne (640 x 360, per transform eingepasst), Teile, Vignette ---------- */
|
|
.hk-pult .hk-pult-szene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
|
|
.hk-pult .hk-pult-buehne { position: absolute; left: 0; top: 0; width: 640px; height: 360px; transform-origin: 0 0; image-rendering: pixelated; pointer-events: none; }
|
|
.hk-pult .hk-pult-teil { position: absolute; }
|
|
.hk-pult .hk-pult-fenster { overflow: hidden; }
|
|
.hk-pult .hk-pult-antenne { width: 1px; height: 1px; background: #e2483d; }
|
|
.hk-pult .hk-pult-vignette {
|
|
position: absolute; inset: 0; pointer-events: none;
|
|
background: radial-gradient(ellipse 80% 75% at 32% 52%, rgba(10, 12, 28, 0) 48%, rgba(10, 12, 28, 0.38) 80%, rgba(6, 7, 18, 0.72) 100%);
|
|
}
|
|
|
|
/* ---------- Oberfläche vor der Szene: Kopfzeile, Reiter, Klemmbrett ---------- */
|
|
.hk-pult .hk-pult-ui {
|
|
position: absolute; top: 14px; right: 16px; bottom: 14px; width: min(716px, calc(100% - 32px));
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.hk-pult .hk-pult-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 6px; }
|
|
.hk-pult .hk-pult-knopf { padding: 0 10px 4px 4px; }
|
|
.hk-pult .hk-pult-zuklappen { margin-left: auto; }
|
|
.hk-pult .hk-pult-schild { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: #3a2410; }
|
|
.hk-pult .hk-pult-h1 { margin: 0; font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 16px; line-height: 16px; font-weight: 400; color: #3a2410; }
|
|
.hk-pult .hk-pult-zahl { font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 16px; line-height: 16px; }
|
|
/* Nur für Screenreader (Beschriftung vor der Zahl) */
|
|
.hk-pult .hk-nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|
|
.hk-pult .hk-pult-unten { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
|
|
|
.hk-pult .hk-reiter-leiste { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; gap: 6px; padding: 0 0 0 22px; min-width: 0; }
|
|
.hk-pult .hk-zahl { font-size: 13px; line-height: 14px; font-weight: 700; color: #5a4a3a; }
|
|
|
|
/* Klemmbrett: das Brett ist ein flexibler Streifen, die Liste scrollt darin */
|
|
.hk-pult .hk-brett { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
|
|
.hk-pult .hk-brett-kopf { padding: 6px 4px; border-bottom: 2px solid rgba(90, 60, 176, 0.3); }
|
|
.hk-pult .hk-brett-titel { margin: 0; font-size: 17px; line-height: 20px; font-weight: 700; color: #4a2fa0; }
|
|
.hk-pult .hk-brett-unter { margin: 2px 0 0; font-size: 13px; line-height: 16px; color: #5a4a3a; }
|
|
|
|
/* Meldungen auf dem Brett (Abschluss, später eintreffendes Ergebnis, Verbindung gestört) und im Brief */
|
|
.hk-pult .hk-hinweis {
|
|
margin: 0 4px; padding: 6px 10px; font-size: 14px; line-height: 18px; color: #2b2230; background: #fff7d6;
|
|
box-shadow: 0 0 0 2px #2b2230, 2px 2px 0 2px rgba(43, 34, 48, 0.22); overflow-wrap: anywhere;
|
|
}
|
|
.hk-pult .hk-hinweis:focus-visible { outline: 2px solid #1a1630; box-shadow: 0 0 0 4px #ffd25a; }
|
|
.hk-pult .hk-hinweis-ok { background: #e3f3d6; color: #1f5a2a; }
|
|
.hk-pult .hk-hinweis-err { background: #fbe3e0; color: #8e1f17; }
|
|
.hk-pult .hk-hinweis-warn { background: #fff3cf; color: #6b4a00; }
|
|
.hk-pult .hk-brief .hk-hinweis { margin: 12px 0 0; }
|
|
|
|
/* Laden und Leerzustand */
|
|
.hk-pult .hk-laden { margin: 8px 4px; color: #5a4a3a; }
|
|
.hk-pult .hk-leer { margin: 8px 4px; color: #5a4a3a; }
|
|
.hk-pult .hk-leer-titel { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
|
|
.hk-pult .hk-leer-text { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
|
|
.hk-pult .hk-leer-knopf { margin-top: 10px; }
|
|
|
|
/* ---------- Umschlag (Knopf in der Liste): Icon links über drei Zeilen, rechts Titel, Art · Alter, Marken ---------- */
|
|
.hk-pult .hk-liste .hk-umschlag { grid-template-columns: 32px minmax(0, 1fr); }
|
|
.hk-pult .hk-umschlag-art { grid-area: 1 / 1 / 4 / 2; }
|
|
.hk-pult .hk-umschlag-titel { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 18px; font-weight: 700; }
|
|
.hk-pult .hk-umschlag-art-alter { grid-column: 2; grid-row: 2; }
|
|
.hk-pult .hk-umschlag-marken { grid-column: 2; grid-row: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-height: 16px; }
|
|
.hk-pult .hk-klein-inline { display: inline; }
|
|
.hk-pult .hk-marke-frist { color: #9a4a10; }
|
|
.hk-pult .hk-marke-halter { color: #4a2fa0; }
|
|
.hk-pult .hk-marke-veraltet { color: #8a4a20; }
|
|
|
|
/* ---------- Brief: Dunkelfläche mit Hintergrund-Knopf, Papier in der Mitte, Inhalt scrollt ---------- */
|
|
.hk-pult .hk-brief-ueber { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 16px; }
|
|
.hk-pult .hk-brief-hinten {
|
|
position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(6, 7, 18, 0.6); cursor: default;
|
|
-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
|
|
}
|
|
.hk-pult .hk-brief { position: relative; width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column; color: #2b2230; outline: none; }
|
|
.hk-pult .hk-brief-inhalt { overflow: auto; min-height: 0; padding: 6px; scrollbar-width: thin; scrollbar-color: #5a3cb0 #e8dcc0; }
|
|
.hk-pult .hk-brief-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
.hk-pult .hk-brief-titelblock { flex: 1 1 auto; min-width: 0; order: 1; }
|
|
.hk-pult .hk-brief-zu { order: 2; flex: none; }
|
|
.hk-pult .hk-brief-art { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4a2fa0; }
|
|
.hk-pult .hk-brief-titel { margin: 6px 0 0; font-size: 19px; line-height: 24px; font-weight: 700; overflow-wrap: anywhere; }
|
|
.hk-pult .hk-brief-meta { margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #5a4a3a; }
|
|
.hk-pult .hk-link {
|
|
display: inline-flex; align-items: center; min-height: 24px; margin: 0; padding: 0; border: 0; background: none;
|
|
font: inherit; color: #4a2fa0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
|
|
}
|
|
.hk-pult .hk-link:hover { color: #2f1a80; }
|
|
.hk-pult .hk-link:focus-visible { outline: 2px solid #1a1630; outline-offset: 2px; box-shadow: 0 0 0 4px #ffd25a; }
|
|
.hk-pult .hk-brief-h { margin: 14px 0 4px; font-size: 13px; line-height: 16px; font-weight: 700; color: #4a2fa0; }
|
|
.hk-pult .hk-brief-h-aktionen { margin: 16px 0 6px; }
|
|
.hk-pult .hk-brief-zitat {
|
|
margin: 0; padding: 8px 10px; background: #f1ead6; box-shadow: inset 4px 0 0 0 #c9a25c;
|
|
white-space: pre-line; font-size: 14px; line-height: 18px; overflow-wrap: anywhere;
|
|
}
|
|
.hk-pult .hk-feld-label { display: block; margin-top: 14px; }
|
|
.hk-pult .hk-feld-titel { display: block; margin-bottom: 4px; font-size: 13px; line-height: 16px; color: #4a2fa0; }
|
|
.hk-pult .hk-brief-entwurf { min-height: 96px; background: repeating-linear-gradient(#fffdf6 0 17px, rgba(90, 60, 176, 0.16) 17px 18px); }
|
|
.hk-pult .hk-brief-lesen {
|
|
margin: 0; padding: 2px 10px 4px; white-space: pre-line; font-size: 15px; line-height: 20px; overflow-wrap: anywhere;
|
|
background: repeating-linear-gradient(transparent 0 19px, rgba(90, 60, 176, 0.18) 19px 20px);
|
|
}
|
|
.hk-pult .hk-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
|
|
.hk-pult .hk-brief-hinweis { margin: 0; font-size: 13px; color: #5a4a3a; }
|
|
.hk-pult .hk-brief-hinweis-bau { color: #7a2e3a; }
|
|
.hk-pult .hk-stempel:disabled { opacity: 0.5; cursor: default; }
|
|
.hk-pult a.hk-stempel { text-decoration: none; }
|
|
.hk-pult .hk-feld-panel { margin-top: 14px; }
|
|
.hk-pult .hk-feld-antwort,
|
|
.hk-pult .hk-feld-einfuegen { padding-top: 6px; border-top: 2px dashed rgba(90, 60, 176, 0.25); }
|
|
.hk-pult .hk-feld-panel .hk-feld-label { margin-top: 0; }
|
|
.hk-pult .hk-feld-panel .hk-brief-hinweis { margin: 6px 0 0; }
|
|
.hk-pult .hk-feld-fuss { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
|
|
.hk-pult .hk-zaehler { font-size: 13px; line-height: 16px; color: #5a4a3a; }
|
|
.hk-pult .hk-zaehler-ueber { color: #a8261d; font-weight: 700; }
|
|
.hk-pult .hk-feld-knoepfe { display: flex; gap: 10px; }
|
|
|
|
/* ---------- Handy (unter 720 px, Spec E13): Klemmbrett in voller Breite über der abgedunkelten Szene, Brief als Vollbild ---------- */
|
|
@media (max-width: 719px) {
|
|
.hk-pult .hk-pult-vignette {
|
|
background: linear-gradient(rgba(6, 7, 18, 0.55), rgba(6, 7, 18, 0.55)), radial-gradient(ellipse 80% 75% at 32% 52%, rgba(10, 12, 28, 0) 48%, rgba(10, 12, 28, 0.38) 80%, rgba(6, 7, 18, 0.72) 100%);
|
|
}
|
|
.hk-pult .hk-pult-ui { left: 8px; right: 8px; top: 8px; bottom: 8px; width: auto; }
|
|
.hk-pult .hk-reiter-leiste { padding-left: 8px; }
|
|
/* Kopfzeile in zwei Reihen: Zurück und Zuklappen nebeneinander, darunter das Messingschild; die Klammer entfällt (sie läge auf dem dritten Reiter) */
|
|
.hk-pult .hk-pult-kopf { gap: 4px 8px; margin-bottom: 2px; }
|
|
.hk-pult .hk-pult-knopf { order: 1; }
|
|
.hk-pult .hk-pult-schild { order: 2; flex: 1 1 100%; }
|
|
.hk-pult .hk-klammer { display: none; }
|
|
.hk-pult .hk-brief-ueber { padding: 0; }
|
|
.hk-pult .hk-brief { width: 100%; height: 100%; max-height: 100%; }
|
|
.hk-pult .hk-feld-fuss { flex-direction: column; align-items: stretch; }
|
|
.hk-pult .hk-feld-knoepfe { flex-direction: column-reverse; }
|
|
.hk-pult .hk-feld-knoepfe .hk-stempel { justify-content: center; }
|
|
}
|