Dashboard wirklich responsive: Hauptgitter selbstregelnd, Abstaende in rem (v=170)
User: am Handy passen sich die Groessen nicht an.
HAUPTBEFUND: main hatte FESTE 2 Spalten und brach erst bei <=360px um --
moderne Handys haben 390-430 CSS-Pixel. Auf dem Geraet standen also zwei
Spalten a ~190px nebeneinander. Der Breakpoint war schlicht zu schmal geraten.
Jetzt selbstregelnd, ohne geratenen Breakpoint:
main{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
360/390/430px -> 1 Spalte · 768 -> 2 · 1024 -> 3 · 1440 -> 4
ZWEITER BEFUND: 138 Abstaende in px, 0 in rem -- die Schrift skalierte seit dem
13.08., die Polster nicht. Damit sass der Text am Handy eng und auf dem Desktop
verloren. Jetzt 122 von 138 auf rem umgestellt (Basis 18px, passend zur fluiden
Wurzel); die verbleibenden 29 sind Werte < 4px, wo Rundung mehr schadet als
nuetzt. Rahmen, Radien und Punktgroessen bleiben BEWUSST px -- die sollen nicht
mitwachsen.
Auch .trades (5 feste Spalten, sprengte 390px) auf auto-fit umgestellt.
Ausgeliefert verifiziert: auto-fit im CSS, 122 rem-Abstaende, HTML zieht v=170.
Backup web/style.css.bak-2026-08-19.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Axel Hocks
co-authored by
Claude Opus 5
Claude Opus 5
parent
3a1d8f7687
commit
d03d6a1a50
+111
-103
@@ -57,12 +57,12 @@ body{
|
||||
/* ── Header (scrollt unter den Tabs) ────── */
|
||||
header{
|
||||
background:var(--bg);
|
||||
padding:12px 14px;
|
||||
padding:0.6667rem 0.7778rem;
|
||||
border-bottom:1px solid var(--border);
|
||||
}
|
||||
.sym-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
||||
.sym-row{display:flex;align-items:center;justify-content:space-between;gap:0.4444rem}
|
||||
#symbol{font-size:1.2222rem;font-weight:700;letter-spacing:.5px;flex:0 0 auto}
|
||||
.hdr-right{display:flex;align-items:center;gap:8px;min-width:0}
|
||||
.hdr-right{display:flex;align-items:center;gap:0.4444rem;min-width:0}
|
||||
.hdr-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;min-width:0}
|
||||
.hdr-meta .session-line{margin-top:1px}
|
||||
.hdr-clock{font-size:0.7778rem;color:var(--dim);font-variant-numeric:tabular-nums;
|
||||
@@ -77,10 +77,10 @@ header{
|
||||
.dot.stale{background:var(--warn,#f0a020);box-shadow:0 0 8px var(--warn,#f0a020);
|
||||
animation:dotpuls 1.2s ease-in-out infinite}
|
||||
@keyframes dotpuls{0%,100%{opacity:1}50%{opacity:.35}}
|
||||
.price-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
|
||||
.price-row{display:flex;flex-wrap:wrap;gap:0.4444rem;margin-top:0.5556rem}
|
||||
/* flex-basis 28% → 3 Boxen je Reihe, die 5. Box (KURS/G/V) bricht sauber um */
|
||||
.px{flex:1 1 28%;background:var(--card);border:1px solid var(--border);
|
||||
border-radius:var(--r);padding:7px 10px;box-shadow:var(--shadow-sm)}
|
||||
border-radius:var(--r);padding:0.3889rem 0.5556rem;box-shadow:var(--shadow-sm)}
|
||||
.px label{display:block;font-size:0.7222rem;color:var(--dim);letter-spacing:1px;
|
||||
text-transform:uppercase}
|
||||
.px span{font-size:1.1111rem;font-weight:600}
|
||||
@@ -95,13 +95,13 @@ header{
|
||||
/* ── Modul-Menü (Tabs, ganz oben & sticky) ─ */
|
||||
#tabs{
|
||||
position:sticky; top:0; z-index:6;
|
||||
display:flex; gap:6px;
|
||||
padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
|
||||
display:flex; gap:0.3333rem;
|
||||
padding:calc(0.4444rem + env(safe-area-inset-top)) 0.5556rem 0.4444rem;
|
||||
background:var(--bg); border-bottom:1px solid var(--border);
|
||||
overflow-x:auto; -webkit-overflow-scrolling:touch;
|
||||
}
|
||||
.tab{
|
||||
flex:0 0 auto; padding:7px 14px; border-radius:var(--r); cursor:pointer;
|
||||
flex:0 0 auto; padding:0.3889rem 0.7778rem; border-radius:var(--r); cursor:pointer;
|
||||
background:var(--card); border:1px solid var(--border);
|
||||
color:var(--dim); font-family:inherit; font-size:0.8889rem; font-weight:600;
|
||||
transition:background .15s, color .15s, border-color .15s;
|
||||
@@ -110,20 +110,27 @@ header{
|
||||
.tab.active{background:var(--accent); color:#0a0d13; border-color:var(--accent);
|
||||
box-shadow:0 2px 10px #e8a00033}
|
||||
/* Mute-Button: klein, ganz rechts in der Tab-Leiste */
|
||||
.mute-tab{margin-left:auto;padding:7px 10px;font-size:1rem;line-height:1}
|
||||
.mute-tab{margin-left:auto;padding:0.3889rem 0.5556rem;font-size:1rem;line-height:1}
|
||||
.mute-tab.muted{opacity:.55}
|
||||
.view.hidden{display:none}
|
||||
.view-head{display:flex;align-items:center;justify-content:space-between;
|
||||
padding:10px 12px 4px}
|
||||
padding:0.5556rem 0.6667rem 0.2222rem}
|
||||
.view-head h2{margin:0;font-size:0.9444rem;letter-spacing:1px;color:var(--bright)}
|
||||
.reload{background:var(--card);border:1px solid var(--border);color:var(--bright);
|
||||
border-radius:var(--r);width:34px;height:30px;font-size:1.0556rem;cursor:pointer;
|
||||
transition:background .15s,border-color .15s}
|
||||
.reload:hover{border-color:var(--dim)}
|
||||
/* ── Cards-Grid (Dashboard) ─────────────── */
|
||||
main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
|
||||
/* ⚠⚠ SELBSTREGELND statt fester Breakpoint (Fix 2026-08-19, User: „am Handy
|
||||
passen sich die Groessen nicht an"). Vorher: feste 2 Spalten, Umbruch auf
|
||||
1 Spalte erst bei <=360px — moderne Handys haben aber 390-430 CSS-Pixel.
|
||||
Auf dem Geraet standen also ZWEI Spalten a ~190px nebeneinander.
|
||||
`auto-fit` + `minmax` braucht keinen geratenen Breakpoint: es passen so
|
||||
viele Spalten hinein, wie je 320px Platz haben — Handy 1, Tablet 2. */
|
||||
main{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
|
||||
gap:0.7rem;padding:0.7rem}
|
||||
.card{background:var(--card);border:1px solid var(--border);
|
||||
border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--shadow-sm)}
|
||||
border-radius:var(--r-lg);padding:0.6667rem 0.7778rem;box-shadow:var(--shadow-sm)}
|
||||
.card.wide{grid-column:1 / -1}
|
||||
/* Karten AUSSERHALB des Dashboard-Grids (Statistik-Tab, 2026-08-05): `main` ist
|
||||
ein Grid mit eigenem padding, `#view-stats` ist eine schlichte <section> — ohne
|
||||
@@ -131,37 +138,37 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
|
||||
(grid-column) liefe ins Leere. */
|
||||
#view-stats > .card,
|
||||
#view-siglive > .card,
|
||||
#view-siganzeige > .card{margin:11px 10px}
|
||||
#view-siganzeige > .card{margin:0.6111rem 0.5556rem}
|
||||
#view-stats > .card:last-child,
|
||||
#view-siglive > .card:last-child,
|
||||
#view-siganzeige > .card:last-child{margin-bottom:74px} /* Platz für die fixe Leiste */
|
||||
#view-siganzeige > .card:last-child{margin-bottom:4.1111rem} /* Platz für die fixe Leiste */
|
||||
/* Untertitel in der View-Kopfzeile: sagt in einem Halbsatz, wonach der Tab
|
||||
sortiert ist — ohne ihn ist „SIG Live" vs. „SIG Anzeige" nicht selbsterklärend. */
|
||||
.view-note{font-size:0.6667rem;color:var(--dim);margin-left:auto}
|
||||
.card h2{margin:0 0 9px;font-size:0.7778rem;letter-spacing:1.5px;
|
||||
.card h2{margin:0 0 0.5rem;font-size:0.7778rem;letter-spacing:1.5px;
|
||||
text-transform:uppercase;color:var(--dim);font-weight:600}
|
||||
.kv{display:flex;justify-content:space-between;align-items:baseline;
|
||||
padding:2px 0;font-size:0.8889rem}
|
||||
.kv span{color:var(--dim)}
|
||||
.kv b{font-weight:600}
|
||||
/* ── Aktueller Trade (Leiste über der Gesamtempfehlung) ───────────── */
|
||||
.trade-bar{padding:8px 12px;border-color:#2d4a2d}
|
||||
.trade-bar{padding:0.4444rem 0.6667rem;border-color:#2d4a2d}
|
||||
.trade-bar.hidden{display:none}
|
||||
#card-trail.hidden{display:none} /* Trailing-Kachel ausgeblendet, 2026-07-22 */
|
||||
.tb-title{margin:0 0 8px;font-size:0.7778rem;letter-spacing:1.5px;text-transform:uppercase;
|
||||
.tb-title{margin:0 0 0.4444rem;font-size:0.7778rem;letter-spacing:1.5px;text-transform:uppercase;
|
||||
color:var(--dim);font-weight:600}
|
||||
/* Laufzeit-Uhr: im Titel mitlaufend (kompakt) + eigenes Feld in der Zeile */
|
||||
.tb-runtime{margin-left:8px;color:var(--bright);font-family:var(--mono);
|
||||
.tb-runtime{margin-left:0.4444rem;color:var(--bright);font-family:var(--mono);
|
||||
letter-spacing:.5px;text-transform:none}
|
||||
.tb-field .tb-val.warn{color:var(--accent);border-color:#4a3600}
|
||||
.tb-row{display:flex;flex-wrap:wrap;gap:10px}
|
||||
.tb-row{display:flex;flex-wrap:wrap;gap:0.5556rem}
|
||||
/* EINHEITLICHES Feld-Design: Anzeige-Boxen (Richtung/Lots/Einsatz) und Eingabe-
|
||||
Felder (SL/TP/Gewinn-Close/Notfall-Close) sehen identisch aus (Label über Box). */
|
||||
.tb-field{display:flex;flex-direction:column;gap:2px}
|
||||
.tb-field label{font-size:0.7222rem;color:var(--dim);letter-spacing:.5px}
|
||||
.tb-field input, .tb-field .tb-val{width:88px;background:var(--surface-2);
|
||||
border:1px solid var(--border);border-radius:var(--r-sm);color:var(--bright);
|
||||
font-size:0.9444rem;font-weight:700;padding:6px 7px;text-align:center;
|
||||
font-size:0.9444rem;font-weight:700;padding:0.3333rem 0.3889rem;text-align:center;
|
||||
transition:border-color .15s, box-shadow .15s}
|
||||
.tb-field .tb-val{display:block} /* nur Anzeige, kein Input */
|
||||
.tb-field input:focus{outline:none;border-color:var(--blue);
|
||||
@@ -176,41 +183,41 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
|
||||
.tb-btn:active{filter:brightness(1.3)}
|
||||
/* ── Gesamtempfehlung ───────────────────── */
|
||||
/* Circuit Breaker Banner (Tagesverlust-Stopp) — ganz oben, rot bei ausgelöst */
|
||||
.circuit{margin:0 0 11px;padding:11px 14px;border-radius:var(--r);font-weight:700;
|
||||
.circuit{margin:0 0 0.6111rem;padding:0.6111rem 0.7778rem;border-radius:var(--r);font-weight:700;
|
||||
font-size:0.8889rem;text-align:center;letter-spacing:.2px}
|
||||
.circuit.hidden{display:none}
|
||||
.circuit.tripped{background:#3d1a1a;color:#ff6b6b;border:1px solid var(--down);
|
||||
box-shadow:0 0 0 1px var(--down)}
|
||||
.circuit.near{background:#2a1f00;color:var(--accent);border:1px solid #4a3600}
|
||||
/* Chartmuster-Karte (visuell, reine Anzeige) */
|
||||
#card-patterns .pt-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:6px}
|
||||
#card-patterns .pt-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:0.3333rem}
|
||||
.pt-item{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--line);
|
||||
border-radius:var(--r-sm);padding:9px 12px;margin-bottom:8px}
|
||||
border-radius:var(--r-sm);padding:0.5rem 0.6667rem;margin-bottom:0.4444rem}
|
||||
.pt-item.up{border-left-color:var(--up)} .pt-item.down{border-left-color:var(--down)}
|
||||
.pt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
|
||||
.pt-head{display:flex;align-items:center;gap:0.4444rem;flex-wrap:wrap}
|
||||
.pt-svg{flex:0 0 auto;background:var(--bg);border:1px solid var(--border);
|
||||
border-radius:4px;padding:1px 2px}
|
||||
.pt-name{font-weight:700;font-size:0.8333rem}
|
||||
.pt-item.up .pt-name{color:var(--up)} .pt-item.down .pt-name{color:var(--down)}
|
||||
.pt-badge{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 7px}
|
||||
.pt-badge{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 0.3889rem}
|
||||
.pt-badge.conf{background:#0d2a16;color:var(--up);border:1px solid #1a4731}
|
||||
.pt-badge.form{background:#2a1f00;color:var(--accent);border:1px solid #4a3600}
|
||||
.pt-q{margin-left:auto;font-size:0.6667rem;color:var(--dim);font-family:var(--mono)}
|
||||
.pt-det{font-size:0.7222rem;margin-top:4px;font-family:var(--mono);color:var(--bright)}
|
||||
.pt-det{font-size:0.7222rem;margin-top:0.2222rem;font-family:var(--mono);color:var(--bright)}
|
||||
.pt-note{font-size:0.6667rem;color:var(--dim);margin-top:3px}
|
||||
.pt-disclaimer{font-size:0.6667rem;color:var(--dim);margin-top:6px;line-height:1.4}
|
||||
.pt-disclaimer{font-size:0.6667rem;color:var(--dim);margin-top:0.3333rem;line-height:1.4}
|
||||
.pt-disclaimer code{font-family:var(--mono);font-size:0.6111rem}
|
||||
/* Kerzen-Anatomie — bewusst NEUTRAL gefärbt (keine grün/rot-Ampel): die
|
||||
Lehrbuch-Deutung ist gemessen invertiert, eine Richtungsfarbe würde
|
||||
systematisch falsch stupsen. Nur „hot" (Volumen>=2x) wird hervorgehoben. */
|
||||
#card-candles .ca-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:6px}
|
||||
#card-candles .ca-tf{font-size:0.6111rem;color:var(--dim);font-weight:600;margin-left:0.3333rem}
|
||||
.ca-item{background:var(--surface-2);border:1px solid var(--border);
|
||||
border-left:3px solid var(--line);border-radius:var(--r-sm);
|
||||
padding:8px 12px;margin-bottom:7px}
|
||||
padding:0.4444rem 0.6667rem;margin-bottom:0.3889rem}
|
||||
.ca-item.hot{border-left-color:var(--accent)}
|
||||
.ca-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
|
||||
.ca-head{display:flex;align-items:center;gap:0.4444rem;flex-wrap:wrap}
|
||||
.ca-name{font-weight:700;font-size:0.8333rem;color:var(--bright)}
|
||||
.ca-vol{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 7px;
|
||||
.ca-vol{font-size:0.6111rem;font-weight:700;border-radius:4px;padding:1px 0.3889rem;
|
||||
font-family:var(--mono);background:var(--bg);color:var(--dim);
|
||||
border:1px solid var(--border)}
|
||||
.ca-vol.hot{background:#2a1f00;color:var(--accent);border-color:#4a3600}
|
||||
@@ -220,8 +227,8 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
|
||||
/* Erwartete Spanne — komprimiert in der Gesamtempfehlung (2026-08-05, die eigene
|
||||
Karte ist entfallen). Bewusst OHNE Richtungsfarbe und ohne Rahmen: die Zeile
|
||||
zeigt Streuung, sie darf optisch nicht mit der Bias-Nadel darüber konkurrieren. */
|
||||
.kx-cone{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
|
||||
margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)}
|
||||
.kx-cone{display:flex;align-items:baseline;gap:0.4444rem;flex-wrap:wrap;
|
||||
margin:0.3333rem 0 0;padding-top:0.3333rem;border-top:1px solid var(--line)}
|
||||
.kx-cone-lbl{font-size:0.6667rem;color:var(--dim)}
|
||||
.kx-cone-item{font-family:var(--mono);font-size:0.7222rem;color:var(--bright)}
|
||||
.kx-cone-item i{font-style:normal;font-size:0.6111rem;color:var(--dim);margin-right:3px}
|
||||
@@ -235,7 +242,7 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
|
||||
#card-pos .squeeze-ind, #card-pos .bounce-ind, #card-pos .cur-near,
|
||||
#card-pos .pos-srhint, #card-pos .pos-stophint, #card-pos .news-conflict,
|
||||
#card-pos .reasons{
|
||||
display:block; margin:0 0 7px; padding:8px 11px; border-radius:var(--r-sm);
|
||||
display:block; margin:0 0 0.3889rem; padding:0.4444rem 0.6111rem; border-radius:var(--r-sm);
|
||||
background:var(--surface-2); border:1px solid var(--border);
|
||||
border-left:3px solid var(--line);
|
||||
font-size:0.8889rem; line-height:1.4; font-weight:600; letter-spacing:0; box-shadow:none;
|
||||
@@ -265,38 +272,39 @@ main{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px}
|
||||
/* Header-KURS-Box färbt sich nahe S/R (rot=Widerstand, grün=Support) */
|
||||
.px span.near-res{color:var(--down)} .px span.near-sup{color:var(--up)}
|
||||
/* ── Signal ─────────────────────────────── */
|
||||
.signal{font-size:1.2222rem;font-weight:700;color:var(--dim);margin-bottom:6px}
|
||||
.signal{font-size:1.2222rem;font-weight:700;color:var(--dim);margin-bottom:0.3333rem}
|
||||
.signal.long{color:var(--up)} .signal.short{color:var(--down)}
|
||||
.reasons{font-size:0.8333rem;color:var(--dim);margin-top:6px}
|
||||
.ell-note{font-size:0.8333rem;color:var(--dim);margin-top:6px}
|
||||
.reasons{font-size:0.8333rem;color:var(--dim);margin-top:0.3333rem}
|
||||
.ell-note{font-size:0.8333rem;color:var(--dim);margin-top:0.3333rem}
|
||||
/* ── Agent ──────────────────────────────── */
|
||||
.agent-head{font-weight:600;font-size:0.9444rem;margin-bottom:4px}
|
||||
.agent-head{font-weight:600;font-size:0.9444rem;margin-bottom:0.2222rem}
|
||||
.agent-text{font-size:0.8889rem;color:var(--bright)}
|
||||
.risks{margin:8px 0 0;padding-left:16px;font-size:0.8333rem;color:var(--accent)}
|
||||
.risks{margin:0.4444rem 0 0;padding-left:0.8889rem;font-size:0.8333rem;color:var(--accent)}
|
||||
.risks li{margin:2px 0}
|
||||
/* ── Trades ─────────────────────────────── */
|
||||
.trades{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
|
||||
/* 5 feste Spalten sprengen 390px — ab hier selbstregelnd */
|
||||
.trades{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:0.35rem}
|
||||
.trade{background:var(--bg);border:1px solid var(--border);
|
||||
border-radius:6px;padding:6px 3px;text-align:center}
|
||||
border-radius:6px;padding:0.3333rem 3px;text-align:center}
|
||||
.trade .p{font-size:0.8889rem;font-weight:700}
|
||||
.trade .i{font-size:0.7222rem;color:var(--dim);margin-top:2px}
|
||||
.up{color:var(--up)} .down{color:var(--down)} .dim{color:var(--dim)}
|
||||
@media(max-width:360px){
|
||||
main{grid-template-columns:1fr}
|
||||
/* main regelt sich seit 19.08. selbst (auto-fit) — hier nicht mehr noetig */
|
||||
.card:not(.wide){grid-column:1 / -1}
|
||||
}
|
||||
/* ── Aktionsleiste ──────────────────────── */
|
||||
main{padding-bottom:74px} /* Platz für die fixe Leiste */
|
||||
main{padding-bottom:4.1111rem} /* Platz für die fixe Leiste */
|
||||
#actions{
|
||||
position:fixed; left:0; right:0; bottom:0; z-index:8;
|
||||
display:flex; gap:7px;
|
||||
padding:9px 9px calc(9px + env(safe-area-inset-bottom));
|
||||
display:flex; gap:0.3889rem;
|
||||
padding:0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
|
||||
background:rgba(10,13,19,.86); border-top:1px solid var(--border);
|
||||
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
|
||||
}
|
||||
.btn{
|
||||
flex:1; border:1px solid var(--border); border-radius:var(--r);
|
||||
padding:12px 4px; font-size:0.9444rem; font-weight:700; color:var(--bright);
|
||||
padding:0.6667rem 0.2222rem; font-size:0.9444rem; font-weight:700; color:var(--bright);
|
||||
background:#1a1e24; font-family:inherit; cursor:pointer;
|
||||
transition:background .12s, opacity .12s, transform .06s; touch-action:manipulation;
|
||||
}
|
||||
@@ -322,24 +330,24 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
|
||||
oben in der Position/Meldungen-Sektion — nur noch Farbvarianten je Zustand.) */
|
||||
|
||||
/* Live-Statistik (kompakt) */
|
||||
.stx-row {display:flex;flex-direction:column;gap:8px}
|
||||
.stx-grp {background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
|
||||
.stx-lbl {font-size:0.8333rem;color:var(--text-dim);margin-bottom:5px;letter-spacing:.3px}
|
||||
.stx-cells {display:flex;flex-wrap:wrap;gap:6px 14px}
|
||||
.stx-row {display:flex;flex-direction:column;gap:0.4444rem}
|
||||
.stx-grp {background:var(--card);border:1px solid var(--border);border-radius:8px;padding:0.4444rem 0.5556rem}
|
||||
.stx-lbl {font-size:0.8333rem;color:var(--text-dim);margin-bottom:0.2778rem;letter-spacing:.3px}
|
||||
.stx-cells {display:flex;flex-wrap:wrap;gap:0.3333rem 0.7778rem}
|
||||
.stx-c {font-size:0.8889rem;color:var(--text-dim)}
|
||||
.stx-c b {font-size:1rem;color:var(--text-bright);margin-left:3px}
|
||||
/* Charts-Tab: M1/M5/M15/M30/H1 untereinander (Lightweight Charts) */
|
||||
|
||||
/* Kurslücken (Gaps): offene Fill-Magnete */
|
||||
.gaps-list {display:flex;flex-direction:column;gap:6px}
|
||||
.gap-row {display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:0.9444rem;
|
||||
padding:6px 9px;background:var(--card);border:1px solid var(--border);border-radius:7px}
|
||||
.gaps-list {display:flex;flex-direction:column;gap:0.3333rem}
|
||||
.gap-row {display:flex;flex-wrap:wrap;gap:0.4444rem;align-items:baseline;font-size:0.9444rem;
|
||||
padding:0.3333rem 0.5rem;background:var(--card);border:1px solid var(--border);border-radius:7px}
|
||||
.gap-zone {font-variant-numeric:tabular-nums;color:var(--text-bright);font-weight:600}
|
||||
.gap-fill {color:var(--text-dim)}
|
||||
.gap-date {margin-left:auto;font-size:0.8333rem}
|
||||
/* TF-Ampel (Welle): Wende je M1/M5/M15/M30 via EMA12/50-Kreuzung */
|
||||
.tf-turns {display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
|
||||
.tf-chip {display:inline-flex;align-items:center;gap:4px;padding:3px 8px;
|
||||
.tf-turns {display:flex;gap:0.3333rem;flex-wrap:wrap;margin:0.4444rem 0 2px}
|
||||
.tf-chip {display:inline-flex;align-items:center;gap:0.2222rem;padding:3px 0.4444rem;
|
||||
border-radius:7px;font-size:0.8889rem;background:var(--card);border:1px solid var(--border);
|
||||
color:var(--text-dim)}
|
||||
.tf-chip b {font-weight:600;font-size:0.8333rem;letter-spacing:.3px}
|
||||
@@ -347,7 +355,7 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
|
||||
.tf-chip.down {color:#f85149;border-color:#3d1a1a}
|
||||
.tf-chip.flat {color:var(--dim)}
|
||||
.tf-turn {font-weight:700}
|
||||
.tf-ago {font-size:0.7778rem;opacity:.7;background:var(--surface-2);border-radius:4px;padding:0 4px}
|
||||
.tf-ago {font-size:0.7778rem;opacity:.7;background:var(--surface-2);border-radius:4px;padding:0 0.2222rem}
|
||||
/* Frische Wende: statisch hervorgehoben (kein Blinken) */
|
||||
.tf-chip.fresh.up {background:#0d2a16;border-color:#3fb950;color:var(--bright)}
|
||||
.tf-chip.fresh.down {background:#2a0d0d;border-color:#f85149;color:var(--bright)}
|
||||
@@ -355,117 +363,117 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
|
||||
.modal{
|
||||
position:fixed; inset:0; z-index:20; display:flex;
|
||||
align-items:center; justify-content:center;
|
||||
background:#000000aa; padding:20px;
|
||||
background:#000000aa; padding:1.1111rem;
|
||||
}
|
||||
.modal.hidden,.toast.hidden{display:none}
|
||||
.box{
|
||||
background:var(--card); border:1px solid var(--accent);
|
||||
border-radius:14px; padding:18px; width:100%; max-width:340px;
|
||||
border-radius:14px; padding:1rem; width:100%; max-width:340px;
|
||||
}
|
||||
.box-title{font-size:1.0556rem;font-weight:700;margin-bottom:8px}
|
||||
.box-msg{font-size:0.9444rem;color:var(--bright);margin-bottom:14px;white-space:pre-line}
|
||||
.box-title{font-size:1.0556rem;font-weight:700;margin-bottom:0.4444rem}
|
||||
.box-msg{font-size:0.9444rem;color:var(--bright);margin-bottom:0.7778rem;white-space:pre-line}
|
||||
.box-msg.danger{color:var(--down);font-weight:600}
|
||||
#modal-input.hidden{display:none} /* nur im Token-Modus sichtbar */
|
||||
#modal-input{
|
||||
width:100%; padding:11px; margin-bottom:14px; font-size:1.0556rem;
|
||||
width:100%; padding:0.6111rem; margin-bottom:0.7778rem; font-size:1.0556rem;
|
||||
background:var(--bg); border:1px solid var(--border); border-radius:8px;
|
||||
color:var(--bright); font-family:inherit;
|
||||
}
|
||||
.box-btns{display:flex;gap:10px}
|
||||
.box-btns{display:flex;gap:0.5556rem}
|
||||
.mbtn{
|
||||
flex:1; padding:12px; border:none; border-radius:9px; font-size:1rem;
|
||||
flex:1; padding:0.6667rem; border:none; border-radius:9px; font-size:1rem;
|
||||
font-weight:700; font-family:inherit; cursor:pointer;
|
||||
}
|
||||
.mbtn.ok{background:var(--accent);color:#000}
|
||||
.mbtn.cancel{background:#1a1e24;color:var(--bright);border:1px solid var(--border)}
|
||||
/* ── Logs ───────────────────────────────── */
|
||||
.logbox{
|
||||
margin:0 10px 10px; padding:10px; background:#000; border:1px solid var(--border);
|
||||
margin:0 0.5556rem 0.5556rem; padding:0.5556rem; background:#000; border:1px solid var(--border);
|
||||
border-radius:8px; font-size:0.7778rem; line-height:1.45; color:#c9d1d9;
|
||||
white-space:pre-wrap; word-break:break-word; max-height:70vh; overflow-y:auto;
|
||||
}
|
||||
/* ── Statistik ──────────────────────────── */
|
||||
#stats-body{padding:0 10px 12px}
|
||||
#stats-body{padding:0 0.5556rem 0.6667rem}
|
||||
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;
|
||||
padding:10px 12px;margin-bottom:10px}
|
||||
.stat-card h3{margin:0 0 8px;font-size:0.8333rem;letter-spacing:1px;color:var(--accent);
|
||||
padding:0.5556rem 0.6667rem;margin-bottom:0.5556rem}
|
||||
.stat-card h3{margin:0 0 0.4444rem;font-size:0.8333rem;letter-spacing:1px;color:var(--accent);
|
||||
text-transform:uppercase}
|
||||
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
|
||||
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.2222rem 0.7778rem}
|
||||
.stat-grid .kv{font-size:0.8889rem}
|
||||
.stat-grid .kv.net span{color:var(--accent)}
|
||||
.sub-h{margin:14px 12px 6px;font-size:0.8333rem;letter-spacing:1px;
|
||||
.sub-h{margin:0.7778rem 0.6667rem 0.3333rem;font-size:0.8333rem;letter-spacing:1px;
|
||||
color:var(--dim);text-transform:uppercase}
|
||||
.setup-hint{padding:0 12px 6px;font-size:0.7778rem}
|
||||
.setup-row{display:grid;grid-template-columns:1.4fr .9fr 1fr .75fr;gap:6px;
|
||||
align-items:baseline;padding:7px 12px;border-bottom:1px solid var(--border)}
|
||||
.setup-hint{padding:0 0.6667rem 0.3333rem;font-size:0.7778rem}
|
||||
.setup-row{display:grid;grid-template-columns:1.4fr .9fr 1fr .75fr;gap:0.3333rem;
|
||||
align-items:baseline;padding:0.3889rem 0.6667rem;border-bottom:1px solid var(--border)}
|
||||
.setup-name{font-size:0.8333rem;color:var(--bright);word-break:break-word}
|
||||
.setup-stat{font-size:0.8333rem;text-align:right}
|
||||
/* ── News ───────────────────────────────── */
|
||||
.news-sent{margin:4px 10px 8px;font-size:0.8889rem;color:var(--dim)}
|
||||
#news-body{padding:0 10px 12px}
|
||||
.news-sent{margin:0.2222rem 0.5556rem 0.4444rem;font-size:0.8889rem;color:var(--dim)}
|
||||
#news-body{padding:0 0.5556rem 0.6667rem}
|
||||
.news-item{display:block;background:var(--card);border:1px solid var(--border);
|
||||
border-radius:8px;padding:8px 10px;margin-bottom:8px;text-decoration:none}
|
||||
border-radius:8px;padding:0.4444rem 0.5556rem;margin-bottom:0.4444rem;text-decoration:none}
|
||||
.news-item .t{font-size:0.8889rem;color:var(--bright);line-height:1.35}
|
||||
.news-item .s{font-size:0.7222rem;color:var(--dim);margin-top:3px}
|
||||
/* ── Toast ──────────────────────────────── */
|
||||
.toast{
|
||||
position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
|
||||
z-index:25; background:var(--card); border:1px solid var(--border);
|
||||
border-radius:10px; padding:10px 16px; font-size:0.9444rem; max-width:90%;
|
||||
border-radius:10px; padding:0.5556rem 0.8889rem; font-size:0.9444rem; max-width:90%;
|
||||
box-shadow:0 6px 24px #000a;
|
||||
}
|
||||
.toast.ok{border-color:var(--up)} .toast.err{border-color:var(--down)}
|
||||
/* ── Marktstruktur-Karte (M30, reine Anzeige) ───────────────────────── */
|
||||
#card-structure h2 .ms-tf{ font-size:0.8333rem; color:var(--dim); font-weight:600;
|
||||
border:1px solid var(--border); border-radius:var(--r-sm); padding:1px 6px; margin-left:6px; }
|
||||
.ms-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0; }
|
||||
border:1px solid var(--border); border-radius:var(--r-sm); padding:1px 0.3333rem; margin-left:0.3333rem; }
|
||||
.ms-top{ display:flex; align-items:center; gap:0.6667rem; flex-wrap:wrap; margin:0.4444rem 0; }
|
||||
.ms-trend{ font-weight:700; font-size:1.0556rem; }
|
||||
.ms-trend.up{ color:var(--up); } .ms-trend.down{ color:var(--down); } .ms-trend.dim{ color:var(--dim); }
|
||||
.ms-swings{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
|
||||
.ms-chip{ font:600 0.8889rem/1 var(--mono); padding:3px 6px; border-radius:var(--r-sm);
|
||||
.ms-chip{ font:600 0.8889rem/1 var(--mono); padding:3px 0.3333rem; border-radius:var(--r-sm);
|
||||
background:var(--surface-2); border:1px solid var(--border); }
|
||||
.ms-chip.up{ color:var(--up); border-color:#2ea04333; }
|
||||
.ms-chip.down{ color:var(--down); border-color:#f8514933; }
|
||||
.ms-chip.dim{ color:var(--dim); }
|
||||
.ms-arrow{ color:var(--dim); font-size:0.8333rem; }
|
||||
.ms-bos{ display:flex; align-items:center; gap:8px; font-size:0.9444rem; margin:6px 0; }
|
||||
.ms-bos{ display:flex; align-items:center; gap:0.4444rem; font-size:0.9444rem; margin:0.3333rem 0; }
|
||||
.ms-bos.hidden{ display:none; }
|
||||
.ms-bos-lbl{ font:600 0.8333rem/1 var(--mono); color:var(--dim);
|
||||
border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 6px; }
|
||||
border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 0.3333rem; }
|
||||
.ms-bos .up{ color:var(--up); } .ms-bos .down{ color:var(--down); }
|
||||
.ms-chan{ margin-top:8px; }
|
||||
.ms-chan{ margin-top:0.4444rem; }
|
||||
.ms-chan-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:0.9444rem; }
|
||||
.ms-chan-head .up{ color:var(--up); font-weight:700; }
|
||||
.ms-chan-head .down{ color:var(--down); font-weight:700; }
|
||||
.ms-chan-head .dim{ color:var(--dim); font-weight:700; }
|
||||
.ms-chan-note{ color:var(--dim); font-size:0.8889rem; }
|
||||
.ms-chan-track{ position:relative; height:8px; margin:6px 0 3px;
|
||||
.ms-chan-track{ position:relative; height:8px; margin:0.3333rem 0 3px;
|
||||
background:var(--surface-2); border:1px solid var(--border); border-radius:99px; overflow:visible; }
|
||||
.ms-chan-fill{ height:100%; border-radius:99px 0 0 99px;
|
||||
background:linear-gradient(90deg,#1f6feb55,#58a6ff88); transition:width .4s; }
|
||||
.ms-chan-dot{ position:absolute; top:50%; width:12px; height:12px; margin-left:-6px;
|
||||
.ms-chan-dot{ position:absolute; top:50%; width:12px; height:12px; margin-left:-0.3333rem;
|
||||
transform:translateY(-50%); border-radius:50%; background:var(--bright);
|
||||
border:2px solid var(--card); box-shadow:0 0 0 1px var(--border); transition:left .4s; }
|
||||
.ms-chan-scale{ display:flex; justify-content:space-between; font-size:0.7778rem; color:var(--dim); }
|
||||
/* ── Auto-Squeeze-Monitor (B4, Statistik-Tab) ───────────────────────── */
|
||||
.sqm-head{ display:flex; align-items:center; gap:10px; margin:4px 0 8px; }
|
||||
.sqm-badge{ font:600 0.8889rem/1 var(--mono); padding:3px 8px; border-radius:var(--r-sm);
|
||||
.sqm-head{ display:flex; align-items:center; gap:0.5556rem; margin:0.2222rem 0 0.4444rem; }
|
||||
.sqm-badge{ font:600 0.8889rem/1 var(--mono); padding:3px 0.4444rem; border-radius:var(--r-sm);
|
||||
background:var(--surface-2); border:1px solid var(--border); }
|
||||
.sqm-badge.up{ color:var(--up); border-color:#2ea04355; }
|
||||
.sqm-badge.down{ color:var(--down); border-color:#f8514955; }
|
||||
.sqm-badge.dim{ color:var(--dim); }
|
||||
.sqm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
|
||||
.sqm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.5556rem; }
|
||||
@media(max-width:560px){ .sqm-grid{ grid-template-columns:1fr; } }
|
||||
.sqm-col{ background:var(--card); border:1px solid var(--border); border-radius:var(--r);
|
||||
padding:10px 12px; }
|
||||
.sqm-h{ font-size:0.8889rem; color:var(--dim); font-weight:600; margin-bottom:6px; }
|
||||
padding:0.5556rem 0.6667rem; }
|
||||
.sqm-h{ font-size:0.8889rem; color:var(--dim); font-weight:600; margin-bottom:0.3333rem; }
|
||||
.sqm-row{ display:flex; justify-content:space-between; align-items:baseline;
|
||||
font-size:0.9444rem; padding:2px 0; border-bottom:1px solid var(--line); }
|
||||
.sqm-row:last-child{ border-bottom:none; }
|
||||
.sqm-row b{ font-family:var(--mono); }
|
||||
.sqm-row b.up{ color:var(--up); } .sqm-row b.down{ color:var(--down); }
|
||||
.sqm-exp{ font-size:0.8333rem; color:var(--dim); margin-top:6px; }
|
||||
.sqm-note{ font-size:0.8889rem; color:var(--dim); margin-top:8px; line-height:1.4; }
|
||||
.sqm-exp{ font-size:0.8333rem; color:var(--dim); margin-top:0.3333rem; }
|
||||
.sqm-note{ font-size:0.8889rem; color:var(--dim); margin-top:0.4444rem; line-height:1.4; }
|
||||
/* Kurs aus Hyperliquid (Markt bei Pepperstone geschlossen) - bewusst ANDERS
|
||||
gefaerbt als der Broker-Kurs, damit man ihn nicht verwechselt. */
|
||||
#hdr-price.hl-price{color:var(--accent)}
|
||||
@@ -476,29 +484,29 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
|
||||
#card-manual .mt-sub { font-size:0.7222rem; color: var(--dim); font-weight: 400; }
|
||||
.mt-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 10px; margin-bottom: 10px;
|
||||
gap:0.5556rem; margin-bottom:0.5556rem;
|
||||
}
|
||||
.mt-box {
|
||||
background: var(--surface-2); border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm); padding: 9px 11px;
|
||||
border-radius: var(--r-sm); padding:0.5rem 0.6111rem;
|
||||
}
|
||||
.mt-lbl { font-size:0.7222rem; color: var(--dim); margin-bottom: 3px; }
|
||||
.mt-lbl { font-size:0.7222rem; color: var(--dim); margin-bottom:3px; }
|
||||
.mt-val { font-family: var(--mono); font-size:1.1667rem; font-weight: 600; }
|
||||
.mt-sub2 { font-size:0.6667rem; color: var(--dim); font-family: var(--mono); margin-top: 2px; }
|
||||
.mt-split { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
|
||||
.mt-sub2 { font-size:0.6667rem; color: var(--dim); font-family: var(--mono); margin-top:2px; }
|
||||
.mt-split { display: flex; flex-wrap: wrap; gap:0.4444rem; margin-bottom:0.4444rem; }
|
||||
.mt-chip {
|
||||
background: var(--surface-2); border: 1px solid var(--line);
|
||||
border-radius: var(--r-sm); padding: 5px 10px;
|
||||
border-radius: var(--r-sm); padding:0.2778rem 0.5556rem;
|
||||
font-size:0.7222rem; font-family: var(--mono);
|
||||
}
|
||||
.mt-note { font-size:0.6667rem; line-height: 1.45; }
|
||||
/* ── Feste Einsatz-Margin in der Order-Leiste (2026-08-04) ────────────────
|
||||
Sitzt bewusst bei den Order-Buttons, nicht in der Trade-Leiste: die ist nur
|
||||
bei offener Position sichtbar, der Einsatz muss aber VORHER einstellbar sein. */
|
||||
.mg-field { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 8px; }
|
||||
.mg-field { display: inline-flex; flex-direction: column; gap:2px; margin-right:0.4444rem; }
|
||||
.mg-field label { font-size:0.6111rem; color: var(--dim); line-height: 1; }
|
||||
.mg-field input {
|
||||
width: 74px; padding: 5px 7px;
|
||||
width: 74px; padding:0.2778rem 0.3889rem;
|
||||
background: var(--surface-2); color: var(--bright);
|
||||
border: 1px solid var(--border); border-radius: var(--r-sm);
|
||||
font-family: var(--mono); font-size:0.7778rem; text-align: right;
|
||||
@@ -513,7 +521,7 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
|
||||
.mg-field.muted input { border-style: dashed; }
|
||||
/* HL-Kontext in den Meldungen — neutral, weil gemessen ohne Prognosewert. */
|
||||
.hl-note{font-size:0.7222rem;color:var(--dim);font-family:var(--mono);
|
||||
padding:5px 0;border-top:1px solid var(--line);margin-top:5px}
|
||||
padding:0.2778rem 0;border-top:1px solid var(--line);margin-top:0.2778rem}
|
||||
.hl-note.hidden{display:none}
|
||||
|
||||
/* ── M15 Setup-Bereitschaft (2026-08-08, Ersatz der Gesamtempfehlung) ──────
|
||||
@@ -523,13 +531,13 @@ main{padding-bottom:74px} /* Platz für die fixe Leiste */
|
||||
auch das NICHT-Handeln ausdruecklich bestaetigt werden. */
|
||||
#card-m15{border-color:var(--accent)}
|
||||
.m15-status{font-size:1.0556rem;font-weight:700;letter-spacing:.3px;
|
||||
padding:10px 12px;border-radius:var(--r);margin-bottom:10px;
|
||||
padding:0.5556rem 0.6667rem;border-radius:var(--r);margin-bottom:0.5556rem;
|
||||
background:var(--surface-2);border:1px solid var(--border);color:var(--dim)}
|
||||
.m15-status.gruen{color:var(--up);border-color:#1d5c2a;background:#0e2413}
|
||||
.m15-status.gelb {color:var(--accent);border-color:#4a3600;background:#241d05}
|
||||
.m15-status.rot {color:var(--down);border-color:#5c1a1a;background:#240f0f}
|
||||
.m15-grid{display:flex;flex-direction:column;gap:5px}
|
||||
.m15-item{font-size:0.8333rem;color:var(--dim);padding:4px 8px;border-radius:var(--r-sm);
|
||||
.m15-grid{display:flex;flex-direction:column;gap:0.2778rem}
|
||||
.m15-item{font-size:0.8333rem;color:var(--dim);padding:0.2222rem 0.4444rem;border-radius:var(--r-sm);
|
||||
background:var(--surface-2);border:1px solid var(--line)}
|
||||
.m15-item.ok {color:var(--bright);border-color:#1d5c2a}
|
||||
.m15-item.warn{color:var(--accent);border-color:#4a3600}
|
||||
|
||||
Reference in New Issue
Block a user