/* ============================================================ TradeCopier Control Deck — Design Tokens ============================================================ */ :root { /* Color */ --void: #0B0E14; /* app background */ --panel: #12161F; /* card/panel surface */ --panel-raise: #171C27; /* hover/raised surface */ --hairline: #232838; /* borders */ --text: #E7EAF0; --text-muted: #7C8496; --text-dim: #4E5566; /* Long/Short/Signal bewusst NICHT je Theme unterschiedlich - siehe Recherche zu TradingView (das Haupt-Charting-Tool der meisten Nutzer hier): deren Kauf-/Verkauf-Grün/Rot bleibt zwischen Hell- und Dunkel-Chart-Theme IDENTISCH, genau damit sich Trader nicht bei jedem Theme-Wechsel neu an die Farben gewöhnen müssen (Muskelgedächtnis). Werte sind TradingViews eigene, bei Tradern extrem wiedererkennbare Bullish/Bearish-Töne, --signal ist TradingViews "Dodger Blue". */ --long: #089981; /* buy / profit - TradingView Bullish-Grün */ --short: #F23645; /* sell / loss - TradingView Bearish-Rot */ --amber: #FFB020; /* warning / instrument accent */ --signal: #2962FF; /* active / live indicator - TradingView Blue */ --sidebar-bg: #0D1017; /* etwas dunkler als --void, für die permanent dunkle Sidebar */ /* Type */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius: 16px; /* große Karten (KPI/Panel/Konto/Wochentag) - runder, weicher, siehe Chat-Referenzscreenshots */ --radius-md: 12px; /* mittlere Elemente (Kalendertage, Insight-Boxen) */ --radius-sm: 10px; /* kleine Elemente (Buttons, Inputs, Icon-Kacheln) */ /* Karten schweben jetzt primär über einen weichen Schatten statt über eine harte Rahmenlinie (siehe Referenz: dort haben Karten im Hellmodus so gut wie keinen sichtbaren Rand). Im Dunkelmodus bleibt zusätzlich ein sehr dezenter Rahmen, weil ein reiner Schatten auf nahezu-schwarzem Hintergrund kaum wahrnehmbar wäre. */ --card-border: var(--hairline); --card-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.55); --card-shadow-hover: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -12px rgba(0,0,0,.6); } /* Light-Theme: überschreibt dieselben Design-Tokens, wenn gesetzt ist (siehe Umschalter-Button in der Sidebar, dashboard.js:initTheme()). Der Rest der App verwendet ausschließlich diese CSS-Variablen, daher genügt diese eine Stelle, um das komplette Dashboard umzufärben. */ :root[data-theme="light"] { --void: #F4F5F8; --panel: #FFFFFF; --panel-raise: #ECEEF3; --hairline: #DCDFE6; --text: #1B1E27; --text-muted: #5B6272; --text-dim: #97A0B2; /* --long/--short/--signal bewusst NICHT hier überschrieben - siehe Kommentar bei :root oben (TradingView-Konsistenz zwischen den Themes). */ --amber: #B8720A; --sidebar-bg: #FFFFFF; /* Im Hellmodus tragen die Karten die klassische "Elevation" nur noch über einen weichen, großflächigen Schatten (siehe Referenzscreenshots) - der Rand wird praktisch unsichtbar (fast gleiche Farbe wie die Karte selbst), statt wie vorher eine sichtbare graue Kontur um jede Karte zu ziehen. */ --card-border: #EDEEF2; --card-shadow: 0 1px 2px rgba(20,24,43,.04), 0 10px 28px -14px rgba(20,24,43,.10); --card-shadow-hover: 0 2px 4px rgba(20,24,43,.05), 0 16px 36px -12px rgba(20,24,43,.14); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--void); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; /* Sicherheitsnetz: nichts soll die Seite je horizontal breiter machen als das Browserfenster - einzelne Inhalte (z.B. Tabellen) duerfen weiterhin ihren EIGENEN, in sich geschlossenen Scrollbereich haben (.table-wrap), aber die Seite als Ganzes nie seitlich scrollen. */ overflow-x: hidden; } button, input, select { font-family: inherit; } /* ============================================================ Layout ============================================================ */ .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--hairline); box-shadow: var(--sidebar-shadow, none); display: flex; flex-direction: column; padding: 20px 14px; /* Bleibt beim Scrollen des Hauptinhalts stehen - kein Mitscrollen mehr, eigener Scrollbereich nur falls die Navigation selbst mal zu lang für den Bildschirm wird. */ position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; } :root[data-theme="light"] .sidebar { /* Im Referenzdesign trennt im Hellmodus kein harter Strich die Sidebar vom Inhalt, sondern ein ganz leichter Schatten nach rechts. */ border-right-color: transparent; box-shadow: 1px 0 0 rgba(20,24,43,.06); } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px; } .brand-mark { width: 30px; height: 30px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--signal), #2C5FCC); display: grid; place-items: center; color: #fff; } .brand-mark svg { width: 18px; height: 18px; display: block; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.01em; display: flex; flex-direction: column; line-height: 1.15; } .brand-name .brand-tagline { font-family: var(--font-sans, inherit); font-weight: 400; font-size: 11.5px; letter-spacing: 0.02em; color: var(--text-muted); text-transform: uppercase; } .nav { display: flex; flex-direction: column; gap: 3px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; background: transparent; color: var(--text-muted); font-size: 15.5px; font-weight: 500; text-align: left; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, color .12s; } .nav-item:hover { background: var(--panel-raise); color: var(--text); } /* Aktiver Eintrag: farbig getönte Pill statt flacher Panel-Fläche - deutlich erkennbarer "Wo bin ich gerade"-Indikator, angelehnt an die Referenzscreenshots (dort ist "Dashboard" als sanft blau/grün getönte Pille hervorgehoben statt nur leicht abgesetzt). */ .nav-item.is-active { background: rgba(41,98,255,.12); color: var(--signal); font-weight: 600; } .nav-item.is-active .nav-icon { color: var(--signal); } .nav-icon { width: 17px; height: 17px; color: var(--text-dim); flex-shrink: 0; } /* Gruppenüberschriften + Trennlinien in der Sidebar - gliedert die Navigation in "Trading-Journal" / "Copy Trading" / "Trading", damit die inzwischen recht lange Liste an Menüpunkten nicht mehr wie eine undifferenzierte Wand wirkt. */ .nav-group-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); padding: 4px 10px 6px; margin-top: 2px; } .nav-group-divider { height: 1px; background: var(--hairline); margin: 10px 6px 8px; } .sidebar-foot { padding-top: 14px; } .conn-pill { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); padding: 8px 10px; background: var(--panel); border-radius: 8px; } .conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 0 0 0 rgba(8,153,129,0); } .conn-pill.is-live .conn-dot { background: var(--long); animation: pulse 1.8s infinite; } .conn-pill.is-down .conn-dot { background: var(--short); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(8,153,129,.5); } 70% { box-shadow: 0 0 0 6px rgba(8,153,129,0); } 100% { box-shadow: 0 0 0 0 rgba(8,153,129,0); } } /* ---- Konten-Status-Ampeln (Sidebar) ---- Immer sichtbar, egal welche Ansicht gerade offen ist - damit ein Verbindungsproblem sofort auffaellt, statt erst beim Klick auf "Konten". Wird von renderAccountStatusSidebar() in dashboard.js befuellt. */ .acct-status { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); } .acct-status-title { display: flex; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding: 0 10px 6px; } .acct-status-badge { font-size: 10.5px; font-weight: 600; letter-spacing: normal; text-transform: none; padding: 1px 7px; border-radius: 20px; background: rgba(242,54,69,.14); color: var(--short); } .acct-status-list { display: flex; flex-direction: column; gap: 1px; /* Eigener, in sich geschlossener vertikaler Scrollbereich bei vielen Konten - bewusst NICHT horizontal, damit hier nie seitliches Scrollen entstehen kann. */ max-height: 240px; overflow-y: auto; overflow-x: hidden; } .acct-status-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; font-size: 13px; cursor: default; } .acct-status-row:hover { background: var(--panel-raise); } .acct-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-dim); } .acct-status-dot.is-ok { background: var(--long); animation: pulse 1.8s infinite; } .acct-status-dot.is-warn { background: var(--amber); } .acct-status-dot.is-error { background: var(--short); } .acct-status-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .acct-status-state { font-size: 11px; color: var(--text-dim); flex-shrink: 0; } .main { padding: 22px 30px 40px; max-width: none; width: 100%; /* BUGFIX: Ein Grid-Item (die .main-Spalte von .app) kann sich ohne min-width:0 nie kleiner als der intrinsische Inhalt machen - z.B. eine KPI-Reihe mit vielen Karten sprengte dadurch bei schmalerem Fenster den verfuegbaren Platz und erzwang seitliches Scrollen der GESAMTEN Seite, statt dass die Karten einfach umbrechen/schrumpfen (gleicher Bug wie bei .account-card weiter unten, hier aber auf Ebene der ganzen Spalte). */ min-width: 0; } /* ============================================================ BUGFIX (siehe Chat: "latenz nicht anzeigen und linie weg" + "prüfe ob alles einwandfrei funktioniert") - die frühere Latenz- Oszilloskop-Leiste (.scope-bar und zugehörige Klassen) wurde aus index.html entfernt (Status läuft jetzt über Telegram /status, siehe TelegramCommandListenerService). Die Styles dafür waren hier als totes CSS stehen geblieben - ersatzlos entfernt. ============================================================ */ /* ============================================================ Views ============================================================ */ .view { display: none; animation: fade .15s ease; } .view.is-active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; } } .view-head { margin-bottom: 22px; } .view-head h1 { font-family: var(--font-display); font-size: 25.5px; font-weight: 600; margin: 0 0 4px; } .view-head p { margin: 0; color: var(--text-muted); font-size: 15.5px; } .kpi-row { display: grid; /* Statt einer festen Spaltenzahl (frueher z.T. sogar 5-6 fest per Inline- Style auf einzelnen Views) passt sich die Reihe jetzt automatisch an: so viele 220px-Karten pro Zeile wie reinpassen, der Rest bricht in die naechste Zeile um. Dadurch bleiben Karten auf jeder Fensterbreite lesbar (kein Zusammenquetschen) UND es entsteht nie seitliches Scrollen. */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi-card { background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--card-shadow); transition: transform .15s ease, box-shadow .15s ease; } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .kpi-card-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0; background: rgba(76,141,255,.12); display: flex; align-items: center; justify-content: center; color: var(--signal); } .kpi-card-icon svg { width: 17px; height: 17px; display: block; } .kpi-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .kpi-label { font-size: 13px; color: var(--text-muted); } .kpi-value { font-family: var(--font-mono); font-size: 30px; font-weight: 600; } /* Kleinere Variante für KPI-Karten mit zusätzlichem Prozent-Wert in Klammern (siehe Chat: "Schrift zu groß, überlappt Rahmen") - .kpi-value bei 30px war für "$1.024 (2,05%)" in einer schmalen Karte zu groß und lief über den Kartenrand hinaus. Bricht zur Not sauber um, statt zu überlaufen. */ .kpi-value-sm { font-family: var(--font-mono); font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } .panel { background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); } .panel-pad { padding: 20px; } .panel-head { padding: 16px 20px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 10px; } .panel-head h2 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; } .panel-head-icon { width: 26px; height: 26px; border-radius: var(--radius-sm); flex-shrink: 0; background: rgba(76,141,255,.12); color: var(--signal); display: flex; align-items: center; justify-content: center; } .panel-head-icon svg { width: 14px; height: 14px; display: block; } .table-wrap { overflow-x: auto; } /* Zweispaltige Panel-Paare (Chart + Tabelle, zwei Charts nebeneinander usw.). Fallen unten (Responsive-Bereich) bei schmalem Fenster automatisch auf eine Spalte, statt die Karten seitlich zu quetschen. */ .split-panel { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; } .split-panel-even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .data-table { width: 100%; border-collapse: collapse; font-size: 15px; } .data-table th { text-align: left; padding: 10px 16px; color: var(--text-dim); font-weight: 500; font-size: 12.5px; letter-spacing: 0.05em; border-bottom: 1px solid var(--hairline); } .data-table td { padding: 9px 16px; border-bottom: 1px solid var(--hairline); color: var(--text); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--panel-raise); } .mono-table td, .mono-table th { font-family: var(--font-mono); } .empty-row td { color: var(--text-dim); text-align: center; padding: 26px; } .side-buy { color: var(--long); font-weight: 600; } .side-sell { color: var(--short); font-weight: 600; } /* .data-table td hat durch das Element+Klasse-Selektor-Paar (0,1,1) höhere Spezifität als .side-buy/.side-sell allein (0,1,0) und hat die Farbe bisher stillschweigend überschrieben - P&L-Zellen blieben dadurch immer in der normalen Textfarbe statt grün/rot. Diese Regel gewinnt jetzt. */ .data-table td.side-buy { color: var(--long); } .data-table td.side-sell { color: var(--short); } .status-pill { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12.5px; font-weight: 500; } .status-Filled, .status-Sent, .status-Accepted { background: rgba(8,153,129,.12); color: var(--long); } .status-Rejected, .status-Error { background: rgba(242,54,69,.12); color: var(--short); } .status-Pending { background: rgba(255,176,32,.12); color: var(--amber); } /* Konto-Status-Pills auf der Kontokarte (Analytics-Formatierung als deutscher Text statt der rohen Enum-Zahl, siehe accountStateLabel() in dashboard.js) und der zusaetzliche, ehrliche Verbindungs-Status daneben (dieselben Stufen wie die Sidebar-Ampel, siehe getAccountStatusInfo()). */ .status-account-Aktiv { background: rgba(8,153,129,.12); color: var(--long); } .status-account-Pausiert { background: rgba(255,176,32,.12); color: var(--amber); } .status-account-Deaktiviert, .status-account-Unbekannt { background: rgba(124,132,150,.16); color: var(--text-muted); } .status-account-Gesperrt { background: rgba(242,54,69,.12); color: var(--short); } .status-conn-is-ok { background: rgba(8,153,129,.12); color: var(--long); } .status-conn-is-warn { background: rgba(255,176,32,.12); color: var(--amber); } .status-conn-none { background: rgba(124,132,150,.16); color: var(--text-muted); } /* ============================================================ Accounts ============================================================ */ .account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; } .account-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; } .account-btn-grid button { width: 100%; } .account-card { background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--card-shadow); /* BUGFIX: Ohne min-width:0 kann ein Grid-Item nie kleiner werden als der intrinsische Inhalt (z.B. das lange, nicht umbrechende Konto-ID-Feld) - auf schmalen Bildschirmen sprengte das dadurch die Kartenbreite ueber den Grid-Track hinaus, sichtbar als abgeschnittener Rand rechts an Buttons/Dropdowns. */ min-width: 0; overflow: hidden; } .account-card-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px; } .account-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; } .account-platform { font-size: 13px; color: var(--text-muted); } .role-badge { font-size: 11.5px; padding: 2px 8px; border-radius: 20px; background: rgba(76,141,255,.14); color: var(--signal); } .account-actions { display: flex; gap: 6px; margin-top: 12px; } .empty-state { color: var(--text-dim); padding: 30px; text-align: center; grid-column: 1 / -1; } /* ============================================================ Controls ============================================================ */ .log-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .input { background: var(--panel); border: 1px solid var(--hairline); color: var(--text); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 15px; /* Ohne feste Höhe rendern /