Hustler-Pixelwelt T6: Kopfzeile mit Münzen und Icons, Meldungen, Pause mit Pixel-Rückfrage, Einstellungen
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
3027f03dbe
commit
6f4350495f
3 files changed
+1110
No files matched your search
@@ -0,0 +1,108 @@
|
||||
/* Kopfzeile des Hochhauses (HochhausKopf.jsx): Lage, Münzen und Kennzahlen, Pause/Zahnrad, Pixel-Banner für Meldungen, Rückfrage „Alles anhalten?“.
|
||||
Handgeschrieben (nicht erzeugt). Die Inline-Stile der Zeichenfläche (Main.dc.html, erster Block) stehen hier als Klassen; Panel, Knopf, Icons und
|
||||
hk-nur-tastatur kommen aus hochhaus.css. Alle Klassen beginnen mit hk- und stehen unter .hk-hochhaus; Keyframes heißen hk-kopf-… .
|
||||
Wird wie hustler-ui.css in WorkersPage.jsx eingehängt (Komponenten importieren kein CSS). */
|
||||
|
||||
/* ---------- Lage: oben über der Welt, Abstand 12/10 px; nur die Panels fangen Zeigerereignisse ab (die Welt darunter bleibt bedienbar) ---------- */
|
||||
.hk-hochhaus .hk-kopf {
|
||||
position: absolute; left: 12px; top: 10px; right: 12px; z-index: 5;
|
||||
display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
|
||||
pointer-events: none;
|
||||
font-family: 'Pixelify Sans', ui-monospace, monospace; font-size: 15px; line-height: 20px; color: #e6ebff;
|
||||
}
|
||||
.hk-hochhaus .hk-kopf-zeile { align-self: stretch; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; pointer-events: none; }
|
||||
.hk-hochhaus .hk-kopf-abstand { flex: 1; min-width: 0; }
|
||||
|
||||
/* ---------- Panel „Geld“ ---------- */
|
||||
.hk-hochhaus .hk-kopf-geld { display: flex; align-items: center; gap: 20px; padding: 0 6px 0 2px; pointer-events: auto; }
|
||||
.hk-hochhaus .hk-kopf-wert { display: flex; align-items: center; gap: 8px; }
|
||||
.hk-hochhaus .hk-kopf-betrag { font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 15px; line-height: 20px; }
|
||||
.hk-hochhaus .hk-kopf-gruen { color: #4ade5a; }
|
||||
.hk-hochhaus .hk-kopf-rot { color: #ff6b6b; }
|
||||
|
||||
/* Budget fast (80 %) oder ganz verbraucht: der rote Betrag blinkt bzw. leuchtet kräftiger */
|
||||
.hk-hochhaus .hk-api-warn { animation: hk-kopf-blinken 1s steps(1, end) infinite; }
|
||||
.hk-hochhaus .hk-api-neg { color: #ff2d2d; text-shadow: 0 0 0 #ff2d2d, 1px 0 0 #ff2d2d; }
|
||||
@keyframes hk-kopf-blinken { 0% { opacity: 1; } 50% { opacity: 0.3; } }
|
||||
|
||||
/* ---------- Panel „Kennzahlen“ ---------- */
|
||||
.hk-hochhaus .hk-kopf-zahlen {
|
||||
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; max-width: 100%; padding: 0 6px 0 2px; pointer-events: auto;
|
||||
font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 13px; line-height: 18px;
|
||||
}
|
||||
.hk-hochhaus .hk-kopf-zahl { display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
/* Die Icons laufen gegeneinander versetzt (wie in der Zeichenfläche), sonst blinzeln alle im selben Takt */
|
||||
.hk-hochhaus .hk-kopf-v-rot { animation-delay: -1.3s; }
|
||||
.hk-hochhaus .hk-kopf-v-abos { animation-delay: -0.4s; }
|
||||
.hk-hochhaus .hk-kopf-v-deals { animation-delay: -1.1s; }
|
||||
.hk-hochhaus .hk-kopf-v-threads { animation-delay: -1.8s; }
|
||||
.hk-hochhaus .hk-kopf-v-pult { animation-delay: -2.5s; }
|
||||
.hk-hochhaus .hk-kopf-v-botleads { animation-delay: -3.2s; }
|
||||
.hk-hochhaus .hk-kopf-v-zahnrad { animation-delay: -0.9s; }
|
||||
|
||||
/* Nur für Screenreader (Beschriftung vor der Zahl) */
|
||||
.hk-hochhaus .hk-kopf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|
||||
|
||||
/* ---------- Panel rechts: Ganzes Haus (nur Tastatur), Pause/Fortsetzen, Zahnrad ---------- */
|
||||
.hk-hochhaus .hk-kopf-rechts { display: flex; align-items: center; gap: 2px; padding: 0; pointer-events: auto; }
|
||||
.hk-hochhaus .hk-kopf .hk-nur-tastatur { font: inherit; }
|
||||
.hk-hochhaus .hk-hud-knopf {
|
||||
display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px 0; padding: 0;
|
||||
border: 0; background: none; cursor: pointer;
|
||||
}
|
||||
.hk-hochhaus .hk-hud-knopf:disabled { opacity: 0.5; cursor: progress; }
|
||||
|
||||
/* ---------- Meldungen: Pixel-Banner unter der Kopfzeile, links, in der Breite begrenzt, mehrere untereinander ---------- */
|
||||
.hk-hochhaus .hk-meldungen { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; max-width: min(560px, 100%); pointer-events: none; }
|
||||
.hk-hochhaus .hk-meldungen:empty { display: none; }
|
||||
.hk-hochhaus .hk-meldung {
|
||||
--hk-ton: #5b6bc0;
|
||||
position: relative; box-sizing: border-box; margin: 0; padding: 8px 12px 8px 44px;
|
||||
border: 4px solid var(--hk-ton); background: #0e1430; color: #e6ebff; overflow-wrap: anywhere;
|
||||
/* abgetreppte Ecken statt runder: Pixel-Optik ohne Bild */
|
||||
clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
|
||||
}
|
||||
.hk-hochhaus .hk-meldung::before {
|
||||
content: '!'; position: absolute; left: 10px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
|
||||
background: var(--hk-ton); color: #1a1630; text-align: center;
|
||||
font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 12px; line-height: 22px;
|
||||
}
|
||||
.hk-hochhaus .hk-meldung-angehalten { --hk-ton: #ffd25a; }
|
||||
.hk-hochhaus .hk-meldung-angehalten::before { content: 'II'; font-size: 10px; }
|
||||
.hk-hochhaus .hk-meldung-umschalten,
|
||||
.hk-hochhaus .hk-meldung-notbremse { --hk-ton: #e2483d; }
|
||||
.hk-hochhaus .hk-meldung-umschalten::before,
|
||||
.hk-hochhaus .hk-meldung-notbremse::before { color: #ffffff; }
|
||||
.hk-hochhaus .hk-meldung-verbindung { --hk-ton: #ff9f43; }
|
||||
|
||||
/* ---------- Rückfrage „Alles anhalten?“: Pixel-Dialog über der ganzen Welt ---------- */
|
||||
.hk-hochhaus .hk-rueckfrage-hintergrund {
|
||||
position: absolute; inset: 0; z-index: 30; box-sizing: border-box;
|
||||
display: flex; align-items: center; justify-content: center; padding: 16px;
|
||||
background: rgba(5, 8, 26, 0.72); color: #e6ebff;
|
||||
font-family: 'Pixelify Sans', ui-monospace, monospace; font-size: 15px; line-height: 20px;
|
||||
}
|
||||
.hk-hochhaus .hk-rueckfrage { width: 100%; max-width: 420px; padding: 4px 8px 8px; outline: none; }
|
||||
.hk-hochhaus .hk-rueckfrage-titel { margin: 0 0 12px; color: #ffe9a0; font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 15px; line-height: 22px; font-weight: 400; }
|
||||
.hk-hochhaus .hk-rueckfrage-text { margin: 0; color: #b8c2f0; }
|
||||
.hk-hochhaus .hk-rueckfrage-knoepfe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
|
||||
|
||||
/* ---------- Handy: die Kopfzeile bricht um, Schrift etwas kleiner ---------- */
|
||||
@media (max-width: 719px) {
|
||||
.hk-hochhaus .hk-kopf { left: 8px; right: 8px; top: 8px; gap: 8px; font-size: 14px; line-height: 18px; }
|
||||
.hk-hochhaus .hk-kopf-zeile { gap: 6px 8px; }
|
||||
.hk-hochhaus .hk-kopf-abstand { display: none; }
|
||||
.hk-hochhaus .hk-kopf-geld { order: 1; gap: 12px; }
|
||||
.hk-hochhaus .hk-kopf-betrag { font-size: 12px; line-height: 16px; }
|
||||
.hk-hochhaus .hk-kopf-rechts { order: 2; margin-left: auto; }
|
||||
.hk-hochhaus .hk-kopf-zahlen { order: 3; flex: 1 1 100%; gap: 6px 10px; font-size: 11px; line-height: 16px; }
|
||||
.hk-hochhaus .hk-meldung { padding: 6px 10px 6px 40px; }
|
||||
.hk-hochhaus .hk-rueckfrage-hintergrund { padding: 12px; }
|
||||
.hk-hochhaus .hk-rueckfrage-titel { font-size: 13px; }
|
||||
}
|
||||
|
||||
/* ---------- Weniger Bewegung: kein Blinken (der Betrag bleibt auch ohne Blinken erkennbar) ---------- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hk-hochhaus .hk-api-warn { animation: none; color: #ffb86b; }
|
||||
}
|
||||
Reference in new issue
Block a user