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
+2
-2
@@ -6,7 +6,7 @@
|
||||
<meta name="theme-color" content="#0d1117">
|
||||
<title>Oil · MT5</title>
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="stylesheet" href="style.css?v=169">
|
||||
<link rel="stylesheet" href="style.css?v=170">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Modul-Menü (ganz oben) -->
|
||||
@@ -356,6 +356,6 @@
|
||||
</div>
|
||||
<div id="toast" class="toast hidden"></div>
|
||||
|
||||
<script src="app.js?v=169"></script>
|
||||
<script src="app.js?v=170"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+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}
|
||||
|
||||
@@ -0,0 +1,536 @@
|
||||
:root{
|
||||
/* Flächen (Elevation-Leiter: bg < surface-2 < card) */
|
||||
--bg:#0a0d13; --card:#161b22; --surface-2:#0d1117;
|
||||
--border:#2a323e; --line:#20262f;
|
||||
/* Text (--text-* = Aliasse; mehrere Komponenten nutzten sie ohne Definition) */
|
||||
--bright:#e6edf3; --text-bright:#e6edf3;
|
||||
--dim:#8b949e; --text-dim:#8b949e;
|
||||
/* Akzente */
|
||||
--accent:#e8a000; --up:#3fb950; --down:#f85149; --blue:#58a6ff;
|
||||
/* Radius / Schatten — einheitliche Design-Tokens */
|
||||
--r-sm:6px; --r:9px; --r-lg:13px;
|
||||
--shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.28);
|
||||
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
|
||||
--mono:"SF Mono",ui-monospace,"Cascadia Code","Courier New",monospace;
|
||||
}
|
||||
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
|
||||
html,/* ══════════════════════════════════════════════════════════════════════
|
||||
FLUIDE SCHRIFTGROESSE (2026-08-13, User-Wunsch: "auf jedem Geraet bzw.
|
||||
je nach Fenstergroesse automatisch angepasst").
|
||||
⚠ Umgesetzt mit rem + fluider WURZEL, NICHT mit em: `em` ist relativ zum
|
||||
ELTERNelement und skaliert NICHT mit dem Fenster — verschachtelt
|
||||
multipliziert es sich sogar (h2 mit 1,2em in einer Karte mit 1,1em
|
||||
landet bei 1,32x). `rem` haengt dagegen an genau EINER Stellschraube.
|
||||
⚠ EINE STUFE KLEINER (2026-08-13 nachmittags, User: "verkleinere alle
|
||||
Schriftarten um 1em"). Woertlich waere 1em = 100 % = null, gemeint ist
|
||||
also eine Stufe: -2px, exakt der Schritt, in dem die Groesse am 24.07.
|
||||
zweimal HOCHgesetzt wurde. Am Handy damit ~16px statt ~18px.
|
||||
390px -> 15,95px · 800px -> 18px · 1440px -> 21,2px · ab 1600px -> 22px
|
||||
(davor: clamp(17px, 16px + 0.5vw, 24px) = 17,95 / 20 / 23,2 / 24)
|
||||
➜ GROESSE GLOBAL AENDERN = NUR DIESE EINE ZEILE. Die 96 rem-Werte bleiben
|
||||
unberuehrt, alle Groessenverhaeltnisse untereinander auch. Eine Stufe
|
||||
entspricht 2px in den beiden Zahlen (Minimum und Steigungs-Basis), der
|
||||
Deckel wandert mit.
|
||||
⚠ ABSTAENDE bleiben in px. Sie mitzuskalieren waere ein weit groesserer
|
||||
Eingriff (Grid, Karten, Trade-Leiste) und kann Layouts kippen — die
|
||||
Anfrage betraf die Schrift. Folge: die Schrift sitzt jetzt etwas
|
||||
lockerer in den unveraenderten Polstern.
|
||||
Zurueck auf 18px-Basis: clamp(17px, 16px + 0.5vw, 24px).
|
||||
Zurueck auf die alte px-Fassung ganz: `web/style.css.bak-2026-08-13`.
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
html { font-size: clamp(15px, 14px + 0.5vw, 22px); }
|
||||
|
||||
body{margin:0;padding:0}
|
||||
body{
|
||||
background:var(--bg); color:var(--bright);
|
||||
/* Sans für Text/Labels + tabellarische Ziffern (saubere Zahlen-Ausrichtung);
|
||||
Terminal-Charakter bleibt über Mono bei Kursen/Logs. */
|
||||
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
|
||||
font-variant-numeric:tabular-nums;
|
||||
font-size:1rem; line-height:1.45;
|
||||
padding-bottom:env(safe-area-inset-bottom);
|
||||
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
|
||||
}
|
||||
/* Zahlen-lastige Werte in Mono (aligned, Trading-Terminal-Optik) */
|
||||
#hdr-price,#hdr-pnl,.px span,.tb-val,.tb-field input,
|
||||
.hdr-clock,.gap-zone,.trade .p{font-family:var(--mono)}
|
||||
/* ── Header (scrollt unter den Tabs) ────── */
|
||||
header{
|
||||
background:var(--bg);
|
||||
padding:12px 14px;
|
||||
border-bottom:1px solid var(--border);
|
||||
}
|
||||
.sym-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
||||
#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-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;
|
||||
white-space:nowrap}
|
||||
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}
|
||||
.dot.on{background:var(--up);box-shadow:0 0 8px var(--up)}
|
||||
.dot.off{background:var(--down);box-shadow:0 0 8px var(--down)}
|
||||
/* stale = der Socket behauptet Verbindung, liefert aber nichts mehr (2026-08-07).
|
||||
Bernstein + Pulsieren, damit der Unterschied zu „verbunden" auf einen Blick
|
||||
sichtbar ist — genau dieser Zustand erzeugte den G/V-Lag. Schlägt `.on` und
|
||||
`.off`, deshalb hier NACH beiden. */
|
||||
.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}
|
||||
/* 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)}
|
||||
.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}
|
||||
.px span.up{color:var(--up)} .px span.down{color:var(--down)}
|
||||
/* KURS + G/V größer als die Konto-Kennzahlen (User-Vorgabe) */
|
||||
#hdr-price, #hdr-pnl{font-size:1.4444rem;font-weight:700}
|
||||
#spread{color:var(--blue)}
|
||||
.session-line{margin-top:3px;font-size:0.7778rem;font-weight:600}
|
||||
.session-line.ok{color:var(--up)}
|
||||
.session-line.warn{color:var(--accent)}
|
||||
.session-line.dim{color:var(--dim)}
|
||||
/* ── 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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
.tab:hover{color:var(--bright)}
|
||||
.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.muted{opacity:.55}
|
||||
.view.hidden{display:none}
|
||||
.view-head{display:flex;align-items:center;justify-content:space-between;
|
||||
padding:10px 12px 4px}
|
||||
.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}
|
||||
.card{background:var(--card);border:1px solid var(--border);
|
||||
border-radius:var(--r-lg);padding:12px 14px;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
|
||||
diese Regel klebten die verschobenen Karten randlos aneinander und `.wide`
|
||||
(grid-column) liefe ins Leere. */
|
||||
#view-stats > .card,
|
||||
#view-siglive > .card,
|
||||
#view-siganzeige > .card{margin:11px 10px}
|
||||
#view-stats > .card:last-child,
|
||||
#view-siglive > .card:last-child,
|
||||
#view-siganzeige > .card:last-child{margin-bottom:74px} /* 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;
|
||||
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.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;
|
||||
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);
|
||||
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}
|
||||
/* 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;
|
||||
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);
|
||||
box-shadow:0 0 0 2px #58a6ff33}
|
||||
.tb-field.stop input{border-color:#5c1a1a;color:#f85149} /* SL/Notfall rötlich */
|
||||
.tb-field.gain input{border-color:#1a4731;color:#3fb950} /* TP/Gewinn grünlich */
|
||||
.tb-field.stop input::placeholder,.tb-field.gain input::placeholder{color:#8b949e88}
|
||||
.tb-dir.up{color:var(--up)} .tb-dir.down{color:var(--down)}
|
||||
/* Auto-Close-Schalter als Box im Feld-Design: grau=AUS, grün=AN */
|
||||
.tb-btn{cursor:pointer;color:var(--dim)}
|
||||
.tb-btn.on{background:#0d2a16;border-color:#1a4731;color:#3fb950}
|
||||
.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;
|
||||
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}
|
||||
.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}
|
||||
.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-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.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-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 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}
|
||||
.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}
|
||||
.ca-item.hot{border-left-color:var(--accent)}
|
||||
.ca-head{display:flex;align-items:center;gap:8px;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;
|
||||
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}
|
||||
.ca-ago{margin-left:auto;font-size:0.6667rem;color:var(--dim);font-family:var(--mono)}
|
||||
.ca-bars{font-size:0.6667rem;margin-top:3px;font-family:var(--mono);color:var(--dim)}
|
||||
.ca-note{font-size:0.6667rem;color:var(--dim);margin-top:3px;line-height:1.4}
|
||||
/* 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-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}
|
||||
.kx-cone-cov{margin-left:auto;font-size:0.6111rem;color:var(--dim)}
|
||||
/* ⚠ Der Ring zeigt einen SCORE, keine Trefferwahrscheinlichkeit — die Beschriftung
|
||||
sagt das jetzt mit (gemessen: conf_pct ist nicht kalibriert, in H2 invertiert). */
|
||||
.kx-selfcal.up{color:var(--up)} .kx-selfcal.down{color:var(--down)}
|
||||
.kx-selfcal.dim{color:var(--dim);opacity:.75}
|
||||
.m-name{font-size:0.7778rem;color:var(--dim);font-weight:600}
|
||||
/* ── Meldungen (EINHEITLICHES Design: Box + farbiger Links-Akzent) ─────────── */
|
||||
#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);
|
||||
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;
|
||||
}
|
||||
/* leere Meldungen ausblenden (cur-near/srhint/reasons ohne Inhalt) */
|
||||
#card-pos .cur-near:empty, #card-pos .pos-srhint:empty, #card-pos .pos-stophint:empty,
|
||||
#card-pos .pos-srhint.hidden, #card-pos .pos-stophint.hidden, #card-pos .reasons:empty{display:none}
|
||||
/* Gegen-/Stop-Seiten-Hinweis (reine Anzeige): hält = grün, bricht = rot */
|
||||
#card-pos .pos-stophint.hold{color:var(--up); border-left-color:var(--up)}
|
||||
#card-pos .pos-stophint.break{color:var(--down); border-left-color:var(--down)}
|
||||
/* News-Konflikt (Flow steht gegen Signal/Position) — bernstein wie Warnungen */
|
||||
#card-pos .news-conflict.warn{color:var(--accent); border-left-color:var(--accent)}
|
||||
#card-pos .news-conflict.hidden, #card-pos .news-conflict:empty{display:none}
|
||||
/* Farbvarianten — Links-Akzent + Textfarbe (Fläche bleibt einheitlich) */
|
||||
#card-pos .squeeze-ind.idle, #card-pos .bounce-ind.idle,
|
||||
#card-pos .reasons{color:var(--dim)}
|
||||
#card-pos .bounce-ind.warn, #card-pos .pos-srhint.warn{
|
||||
color:var(--accent); border-left-color:var(--accent)}
|
||||
#card-pos .squeeze-ind.armed, #card-pos .pos-srhint.approach{
|
||||
color:var(--blue); border-left-color:#1f6feb}
|
||||
#card-pos .squeeze-ind.fire.long, #card-pos .pos-srhint.run,
|
||||
#card-pos .cur-near.near-sup{color:var(--up); border-left-color:var(--up)}
|
||||
#card-pos .squeeze-ind.fire.short, #card-pos .cur-near.near-res{
|
||||
color:var(--down); border-left-color:var(--down)}
|
||||
/* Setup/Lauf-Zeilen (Metadaten) fügen sich ein */
|
||||
#card-pos .kv{padding:3px 0}
|
||||
/* 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.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}
|
||||
/* ── Agent ──────────────────────────────── */
|
||||
.agent-head{font-weight:600;font-size:0.9444rem;margin-bottom:4px}
|
||||
.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 li{margin:2px 0}
|
||||
/* ── Trades ─────────────────────────────── */
|
||||
.trades{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
|
||||
.trade{background:var(--bg);border:1px solid var(--border);
|
||||
border-radius:6px;padding:6px 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}
|
||||
.card:not(.wide){grid-column:1 / -1}
|
||||
}
|
||||
/* ── Aktionsleiste ──────────────────────── */
|
||||
main{padding-bottom:74px} /* 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));
|
||||
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);
|
||||
background:#1a1e24; font-family:inherit; cursor:pointer;
|
||||
transition:background .12s, opacity .12s, transform .06s; touch-action:manipulation;
|
||||
}
|
||||
.btn:active{transform:translateY(1px)}
|
||||
.btn.long {background:#1a6e35}
|
||||
.btn.short {background:#8b1a1a}
|
||||
.btn.close {background:#2d2000; color:var(--accent)}
|
||||
.btn.tog {flex:.8; font-size:0.8889rem}
|
||||
.btn.tog.on{background:#1f6feb; color:#fff}
|
||||
/* Auto-Signal-Entry: bernstein statt blau — gemessen NICHT tragfähig (H1 negativ),
|
||||
läuft nur auf ausdrücklichen User-Wunsch → Farbe signalisiert „Achtung, aktiv". */
|
||||
.btn.tog.warn-on{background:#9e6a03; color:#fff}
|
||||
.btn:disabled{opacity:.32; cursor:default}
|
||||
/* Empfehlungs-Blinken der LONG/SHORT-Buttons */
|
||||
@keyframes blkLong {0%,100%{background:#1a6e35}50%{background:#22c55e}}
|
||||
@keyframes blkShort {0%,100%{background:#8b1a1a}50%{background:#ef4444}}
|
||||
.btn.long.blink {animation:blkLong .7s ease-in-out infinite}
|
||||
.btn.short.blink {animation:blkShort .7s ease-in-out infinite}
|
||||
/* CLOSE blinkt, wenn das Signal gegen die offene Position dreht (Auto-Flip) */
|
||||
@keyframes blkClose {0%,100%{background:#2d2000;color:var(--accent)}50%{background:#e8a000;color:#000}}
|
||||
.btn.close.blink {animation:blkClose .6s ease-in-out infinite}
|
||||
/* (Überdehnungs- & Squeeze-Anzeige nutzen jetzt das einheitliche Meldungs-Design
|
||||
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-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}
|
||||
.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;
|
||||
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}
|
||||
.tf-chip.up {color:#3fb950;border-color:#1a4731}
|
||||
.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}
|
||||
/* 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)}
|
||||
/* ── Modal ──────────────────────────────── */
|
||||
.modal{
|
||||
position:fixed; inset:0; z-index:20; display:flex;
|
||||
align-items:center; justify-content:center;
|
||||
background:#000000aa; padding:20px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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-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;
|
||||
background:var(--bg); border:1px solid var(--border); border-radius:8px;
|
||||
color:var(--bright); font-family:inherit;
|
||||
}
|
||||
.box-btns{display:flex;gap:10px}
|
||||
.mbtn{
|
||||
flex:1; padding:12px; 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);
|
||||
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}
|
||||
.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);
|
||||
text-transform:uppercase}
|
||||
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
|
||||
.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;
|
||||
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-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-item{display:block;background:var(--card);border:1px solid var(--border);
|
||||
border-radius:8px;padding:8px 10px;margin-bottom:8px;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%;
|
||||
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; }
|
||||
.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);
|
||||
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.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; }
|
||||
.ms-bos .up{ color:var(--up); } .ms-bos .down{ color:var(--down); }
|
||||
.ms-chan{ margin-top:8px; }
|
||||
.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;
|
||||
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;
|
||||
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);
|
||||
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; }
|
||||
@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; }
|
||||
.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; }
|
||||
/* 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)}
|
||||
#hdr-price-lbl{letter-spacing:.3px}
|
||||
/* ── Manuelle Trades (2026-08-04) ─────────────────────────────────────────
|
||||
Bewusst NEUTRAL gehalten: die Karte beschreibt die eigene Historie und
|
||||
sagt nichts voraus. Farbe nur am Vorzeichen der Summe, keine Ampel. */
|
||||
#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;
|
||||
}
|
||||
.mt-box {
|
||||
background: var(--surface-2); border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm); padding: 9px 11px;
|
||||
}
|
||||
.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-chip {
|
||||
background: var(--surface-2); border: 1px solid var(--line);
|
||||
border-radius: var(--r-sm); padding: 5px 10px;
|
||||
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 label { font-size:0.6111rem; color: var(--dim); line-height: 1; }
|
||||
.mg-field input {
|
||||
width: 74px; padding: 5px 7px;
|
||||
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;
|
||||
}
|
||||
.mg-field input:focus { outline: none; border-color: #1f6feb; }
|
||||
/* aktiv gesetzt = sichtbar hervorgehoben, damit ein fester Einsatz nicht
|
||||
unbemerkt bestehen bleibt */
|
||||
.mg-field input.on { border-color: #d29922; color: #d29922; }
|
||||
/* Prozent-Feld ohne Wirkung, weil links ein FESTER Betrag steht — sichtbar
|
||||
zurückgenommen, statt zwei scheinbar gleichrangige Felder zu zeigen. */
|
||||
.mg-field.muted { opacity: .45; }
|
||||
.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}
|
||||
.hl-note.hidden{display:none}
|
||||
|
||||
/* ── M15 Setup-Bereitschaft (2026-08-08, Ersatz der Gesamtempfehlung) ──────
|
||||
Sequenzielle Gate-Kette statt Score-Aggregation. Das Status-Banner ist
|
||||
bewusst das groesste Element der Karte: die gemessene Kern-Leckage sind
|
||||
diskretionaere Abweichungen, nicht verpasste Gelegenheiten - deshalb muss
|
||||
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;
|
||||
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);
|
||||
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}
|
||||
.m15-item.fail{color:var(--down);border-color:#5c1a1a}
|
||||
Reference in New Issue
Block a user