/* =========================================================================== TriaTex . Design System --------------------------------------------------------------------------- Trading Journal & Monitoring - Forex / Crypto / Metalle Abgeleitet aus der Homepage v2. Stil: TradingView / Bloomberg-Terminal. Pures CSS . keine SCSS/LESS . keine Bootstrap-Abhaengigkeit. Fonts (im der Seite einbinden): Inhalt 1. Design Tokens (:root) 2. Base / Reset 3. Typografie 4. Panel / Box (head, body, Varianten) 5. Buttons 6. Badges & Status-Chips 7. KPI-Tiles 8. Tabellen & Listen 9. Form-Elemente 10. Pre-Market Scanner 11. Regelwaechter-Karten (Gelb / Rot) 12. Alerts & Info-Boxen 13. Info-Tooltip 14. Navigation & Breadcrumbs =========================================================================== */ /* === 1 . DESIGN TOKENS =================================================== */ :root { /* - Hintergruende (tief -> erhoeht) - */ --bg: #06080f; /* tiefster Hintergrund (body) */ --bg-2: #0a0e1a; /* Panel-Flaeche / Section */ --bg-card: #0c1220; /* Karten */ --bg-card-2: #11192b; /* erhoehte Elemente / hover */ --bg-inset: rgba(0,0,0,.30); /* eingelassene Felder (inputs, tabs) */ /* - Glas-Panel-Verlaeufe - */ --glass: linear-gradient(180deg, rgba(20,28,46,.70), rgba(10,14,26,.70)); --glass-solid: linear-gradient(180deg, rgba(20,28,46,.95), rgba(10,14,26,.95)); /* - Linien & Borders (subtil) - */ --line: rgba(120,168,232,.10); --line-2: rgba(148,163,184,.10); --hair: rgba(255,255,255,.06); /* Haarlinie - Standard-Border */ --hair-2: rgba(255,255,255,.12); /* Border hover */ /* - Akzentfarben - */ --cyan: #5eead4; /* Primaerakzent / Highlights */ --cyan-2: #38bdf8; --indigo: #818cf8; /* Sekundaerakzent / Links / Ueberschriften-Glow */ --green: #4ade80; /* Profit . Erfolg . Buy */ --green-2: #86efac; --amber: #fbbf24; /* Warnung . Prop-Firm . Upgrade */ --red: #fb7185; /* Verlust . Gefahr . Sell */ --purple: #a78bfa; /* Algo / Bot-Features */ /* - Akzent-Hintergruende (Soft-Fills) - */ --cyan-soft: rgba(94,234,212,.10); --indigo-soft: rgba(129,140,248,.12); --green-soft: rgba(74,222,128,.12); --amber-soft: rgba(251,191,36,.12); --red-soft: rgba(251,113,133,.12); --purple-soft: rgba(167,139,250,.12); /* - Text - */ --text: #f1f5f9; /* primaer */ --text-2: #94a3b8; /* sekundaer / dim */ --text-3: #5a6473; /* tertiaer / meta / labels */ /* - Typografie - */ --serif: 'Inter Tight', system-ui, -apple-system, sans-serif; /* UI-Schrift */ --mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', monospace; /* Zahlen/Code */ /* - Radien - */ --r-panel: 12px; /* Panels / Karten */ --r-panel-lg: 16px; --r-ctrl: 7px; /* Buttons / Inputs / Badges (square) */ --r-pill: 100px; /* Pills / runde Buttons */ /* - Spacing-Skala - */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* - Schatten - */ --sh-1: 0 4px 12px rgba(0,0,0,.30); --sh-2: 0 20px 60px rgba(0,0,0,.45); --inset-hi: inset 0 1px 0 rgba(255,255,255,.05); /* - Transition - */ --ease: .18s cubic-bezier(.2,.8,.2,1); } /* === 2 . BASE / RESET ==================================================== */ *, *::before, *::after { box-sizing: border-box; } body.tx { margin: 0; background: var(--bg); color: var(--text); font-family: var(--serif); font-size: 14px; line-height: 1.5; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; } .tx ::selection { background: rgba(94,234,212,.25); color: #fff; } /* Duenne, dunkle Scrollbars passend zum Theme */ .tx ::-webkit-scrollbar { width: 10px; height: 10px; } .tx ::-webkit-scrollbar-track { background: transparent; } .tx ::-webkit-scrollbar-thumb { background: rgba(148,163,184,.18); border-radius: 100px; border: 2px solid transparent; background-clip: padding-box; } .tx ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.30); background-clip: padding-box; } /* Layout-Hilfen (optional) */ .tx-stack { display: flex; flex-direction: column; gap: var(--sp-4); } .tx-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .tx-grid { display: grid; gap: var(--sp-4); } .tx-spacer { flex: 1; } /* HTML: - */ /* === 3 . TYPOGRAFIE ====================================================== */ .tx-h1, .tx-h2, .tx-h3, .tx-h4 { margin: 0; color: #fff; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; } .tx-h1 { font-size: 32px; letter-spacing: -.03em; } .tx-h2 { font-size: 24px; } .tx-h3 { font-size: 19px; } .tx-h4 { font-size: 16px; font-weight: 600; } /* farbiger Highlight im Titel (kursiv, Verlauf) */ .tx-h1 em, .tx-h2 em, .tx-h3 em { font-style: italic; font-weight: 500; background: linear-gradient(120deg, var(--cyan), var(--indigo) 70%, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Eyebrow-Label - mono, Versalien, mit Leitstrich */ .tx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .tx-eyebrow::before { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); } /* Label / Feld-Beschriftung */ .tx-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .tx-text { color: var(--text); font-size: 14px; line-height: 1.55; } .tx-dim { color: var(--text-2); } /* gedaempfter Fliesstext */ .tx-muted { color: var(--text-3); } /* meta / tertiaer */ .tx-num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .tx-pos { color: var(--green); } /* positiv / profit */ .tx-neg { color: var(--red); } /* negativ / verlust */ a.tx-link { color: var(--indigo); text-decoration: none; transition: color var(--ease); } a.tx-link:hover { color: var(--cyan); } /* Inline-Code */ .tx-code { font-family: var(--mono); font-size: .9em; color: var(--cyan); background: rgba(94,234,212,.08); border: 1px solid rgba(94,234,212,.16); padding: 1px 6px; border-radius: 5px; } /* HTML:
Pre-Market

Heute im Fokus

34 Paare gescannt. EURUSD fuehrt mit Score 94.

*/ /* === 4 . PANEL / BOX ===================================================== Haupt-Container. Aufbau: .tx-panel > [.tx-panel-head] + .tx-panel-body Varianten via Modifier: --success --warning --danger --algo --prop ------------------------------------------------------------------------- */ .tx-panel { background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--hair); border-radius: var(--r-panel); box-shadow: var(--inset-hi); overflow: hidden; position: relative; } .tx-panel-head { display: flex; align-items: center; gap: var(--sp-3); padding: 14px 18px; border-bottom: 1px solid var(--hair); background: rgba(0,0,0,.20); } .tx-panel-head .tx-panel-title { font-size: 14px; font-weight: 600; color: #fff; margin: 0; display: flex; align-items: center; gap: 9px; } .tx-panel-head .tx-panel-title svg { width: 17px; height: 17px; color: var(--cyan); } .tx-panel-head .tx-panel-sub { font-family: var(--mono); font-size: 11px; color: var(--text-3); } .tx-panel-head > .tx-spacer { flex: 1; } /* Aktionen nach rechts schieben */ .tx-panel-body { padding: 18px; } .tx-panel-body.compact { padding: 12px 14px; } /* duenne Akzentlinie oben - kennzeichnet die Variante */ .tx-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; opacity: .9; } .tx-panel--success { border-color: rgba(74,222,128,.25); } .tx-panel--success::before { background: linear-gradient(90deg, var(--green), transparent); } .tx-panel--warning { border-color: rgba(251,191,36,.25); } .tx-panel--warning::before { background: linear-gradient(90deg, var(--amber), transparent); } .tx-panel--danger { border-color: rgba(251,113,133,.28); } .tx-panel--danger::before { background: linear-gradient(90deg, var(--red), transparent); } .tx-panel--algo { border-color: rgba(167,139,250,.28); } .tx-panel--algo::before { background: linear-gradient(90deg, var(--purple), transparent); } .tx-panel--algo .tx-panel-title svg { color: var(--purple); } .tx-panel--prop { border-color: rgba(251,191,36,.25); } .tx-panel--prop::before { background: linear-gradient(90deg, var(--amber), var(--red)); } /* farbiger Glow im Hintergrund je Variante (dezent) */ .tx-panel--success { background: radial-gradient(420px 200px at 100% 0%, rgba(74,222,128,.07), transparent 60%), var(--glass); } .tx-panel--algo { background: radial-gradient(420px 200px at 100% 0%, rgba(167,139,250,.10), transparent 60%), var(--glass); } .tx-panel--prop { background: radial-gradient(420px 200px at 100% 0%, rgba(251,191,36,.08), transparent 60%), var(--glass); } /* HTML:

- Algo-Monitor EA . v3.1

-
*/ /* === 5 . BUTTONS ========================================================= .tx-btn + Variante. Standard = Pill (Homepage-Signatur). Modifier: .tx-btn-sm .tx-btn-lg .tx-btn-sq (eckig, r=7px) .tx-btn-block Varianten: -primary -success -secondary -danger -ghost -algo -prop [disabled] ------------------------------------------------------------------------- */ .tx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); font-family: var(--serif); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: all var(--ease); } .tx-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .tx-btn svg { width: 16px; height: 16px; } .tx-btn-sm { padding: 7px 13px; font-size: 12.5px; } .tx-btn-lg { padding: 14px 22px; font-size: 14.5px; } .tx-btn-sq { border-radius: var(--r-ctrl); } /* eckig fuer dichte Toolbars */ .tx-btn-block { display: flex; width: 100%; } /* primary - Signatur-Button (heller cyan-Verlauf, dunkler Text) */ .tx-btn-primary { color: #06080f; background: linear-gradient(180deg, #f4fdfb, #d4eee8); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(255,255,255,.05), 0 8px 30px rgba(94,234,212,.25); } .tx-btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(255,255,255,.08), 0 12px 36px rgba(94,234,212,.35); } /* success - gruen, bestaetigende Aktion (Trade buchen, Sync) */ .tx-btn-success { color: #06140c; background: linear-gradient(180deg, #6ee7a0, #3ec873); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(74,222,128,.22); } .tx-btn-success:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(74,222,128,.32); } /* secondary - dezent gefuellt */ .tx-btn-secondary { color: var(--text); background: var(--bg-card-2); border-color: var(--hair); } .tx-btn-secondary:hover { background: #18223a; border-color: var(--hair-2); } /* danger - Verlust / destruktiv */ .tx-btn-danger { color: #fff; background: linear-gradient(180deg, #fb7185, #e11d48); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px rgba(251,113,133,.25); } .tx-btn-danger:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 30px rgba(251,113,133,.35); } /* ghost - transparent, Linien-Border */ .tx-btn-ghost { color: var(--text); background: rgba(255,255,255,.04); border-color: var(--hair); } .tx-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--hair-2); } /* algo - purple (Bot-Aktionen) */ .tx-btn-algo { color: #0e0a1f; background: linear-gradient(180deg, #c4b5fd, #a78bfa); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(167,139,250,.25); } .tx-btn-algo:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(167,139,250,.35); } /* prop - amber (Prop-Firm / Upgrade) */ .tx-btn-prop { color: #1a1206; background: linear-gradient(180deg, #fcd34d, #f59e0b); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(251,191,36,.22); } .tx-btn-prop:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(251,191,36,.32); } /* tool - "Code-Chip-Button" fuer Aktions-/Werkzeugleisten (.tx-toolbar) Gleiche Optik wie .tx-code, nur button-gross (Geist Mono, cyan, getoenter Grund) */ .tx-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tx-btn-tool { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; color: var(--cyan); background: var(--cyan-soft); border: 1px solid rgba(94,234,212,.16); border-radius: 8px; padding: 13px 18px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all var(--ease); } .tx-btn-tool svg { width: 16px; height: 16px; } .tx-btn-tool:hover { background: rgba(94,234,212,.16); border-color: rgba(94,234,212,.30); color: #fff; } .tx-btn-tool.is-active { color: #fff; border-color: rgba(94,234,212,.45); box-shadow: 0 0 0 1px rgba(94,234,212,.18), 0 0 20px rgba(94,234,212,.18); } .tx-btn-tool.tx-btn-sm { padding: 9px 14px; font-size: 11.5px; } .tx-btn-tool.tx-btn-lg { padding: 16px 22px; font-size: 13.5px; } /* Farb-Varianten (gleiches Muster wie .tx-btn--Modifier, nur als Chip) */ .tx-btn-tool.tool-green { color: var(--green); background: var(--green-soft); border-color: rgba(74,222,128,.18); } .tx-btn-tool.tool-green:hover { background: rgba(74,222,128,.18); border-color: rgba(74,222,128,.32); } .tx-btn-tool.tool-green.is-active { border-color: rgba(74,222,128,.45); box-shadow: 0 0 0 1px rgba(74,222,128,.18), 0 0 20px rgba(74,222,128,.18); } .tx-btn-tool.tool-prop { color: var(--amber); background: var(--amber-soft); border-color: rgba(251,191,36,.18); } .tx-btn-tool.tool-prop:hover { background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.32); } .tx-btn-tool.tool-prop.is-active { border-color: rgba(251,191,36,.45); box-shadow: 0 0 0 1px rgba(251,191,36,.18), 0 0 20px rgba(251,191,36,.18); } .tx-btn-tool.tool-algo { color: var(--purple); background: var(--purple-soft); border-color: rgba(167,139,250,.18); } .tx-btn-tool.tool-algo:hover { background: rgba(167,139,250,.18); border-color: rgba(167,139,250,.32); } .tx-btn-tool.tool-algo.is-active { border-color: rgba(167,139,250,.45); box-shadow: 0 0 0 1px rgba(167,139,250,.18), 0 0 20px rgba(167,139,250,.18); } .tx-btn-tool.tool-danger { color: var(--red); background: var(--red-soft); border-color: rgba(251,113,133,.18); } .tx-btn-tool.tool-danger:hover { background: rgba(251,113,133,.18); border-color: rgba(251,113,133,.32); } .tx-btn-tool.tool-danger.is-active { border-color: rgba(251,113,133,.45); box-shadow: 0 0 0 1px rgba(251,113,133,.18), 0 0 20px rgba(251,113,133,.18); } /* line - nur Rahmen, kein Hintergrund (mit jeder Farbe kombinierbar) */ .tx-btn-tool.tool-line { background: transparent; } .tx-btn-tool.tool-line:hover { background: rgba(255,255,255,.05); } /* disabled (Attribut oder Klasse) */ .tx-btn:disabled, .tx-btn.is-disabled { cursor: not-allowed; transform: none !important; pointer-events: none; color: var(--text-3) !important; background: rgba(255,255,255,.03) !important; border-color: var(--hair) !important; box-shadow: none !important; opacity: .6; } /* runder Pfeil-Anhang (wie Homepage-CTA) */ .tx-btn .tx-arrow { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(6,8,15,.12); margin: -4px -10px -4px 4px; transition: transform .2s ease; } .tx-btn:hover .tx-arrow { transform: translateX(2px); } /* HTML: */ /* === 6 . BADGES & STATUS-CHIPS =========================================== Kleine Etiketten. .tx-badge (eckig, r=6px) und .tx-chip (pill mit Punkt). ------------------------------------------------------------------------- */ .tx-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; line-height: 1.3; white-space: nowrap; } .tx-badge--won, .tx-badge--buy, .tx-badge--long { background: rgba(74,222,128,.16); color: var(--green); } .tx-badge--lost, .tx-badge--sell, .tx-badge--short { background: rgba(251,113,133,.16); color: var(--red); } .tx-badge--neutral { background: rgba(148,163,184,.14); color: var(--text-2); } .tx-badge--be { background: rgba(148,163,184,.14); color: var(--text-2); } /* break-even */ .tx-badge--algo { background: var(--purple-soft); color: var(--purple); } .tx-badge--prop { background: var(--amber-soft); color: var(--amber); } .tx-badge--info { background: var(--cyan-soft); color: var(--cyan); } .tx-badge--demo { background: rgba(148,163,184,.12); color: var(--text-2); border: 1px solid var(--hair); } .tx-badge--live { background: rgba(74,222,128,.12); color: var(--green); border: 1px solid rgba(74,222,128,.25); } /* Score-Badges A+ / A / B / C / D */ .tx-grade { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 6px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: -.01em; } .tx-grade--aplus { background: rgba(74,222,128,.18); color: var(--green); box-shadow: inset 0 0 0 1px rgba(74,222,128,.3); } .tx-grade--a { background: rgba(94,234,212,.16); color: var(--cyan); } .tx-grade--b { background: rgba(129,140,248,.16); color: var(--indigo); } .tx-grade--c { background: rgba(251,191,36,.16); color: var(--amber); } .tx-grade--d { background: rgba(251,113,133,.16); color: var(--red); } /* Status-Chip - Pill mit Punkt (Sync / Live / Idle) */ .tx-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; background: rgba(255,255,255,.04); border: 1px solid var(--hair); color: var(--text-2); } .tx-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; } .tx-chip--live { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.25); color: var(--green); } .tx-chip--live .dot { background: var(--green); box-shadow: 0 0 8px var(--green); animation: tx-pulse 2s ease-in-out infinite; } .tx-chip--synced { background: rgba(94,234,212,.08); border-color: rgba(94,234,212,.2); color: var(--cyan); } .tx-chip--synced .dot { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } .tx-chip--warn { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.25); color: var(--amber); } .tx-chip--warn .dot { background: var(--amber); box-shadow: 0 0 6px var(--amber); } .tx-chip--error { background: rgba(251,113,133,.10); border-color: rgba(251,113,133,.25); color: var(--red); } .tx-chip--error .dot { background: var(--red); box-shadow: 0 0 6px var(--red); } .tx-chip--idle .dot { background: var(--text-3); } @keyframes tx-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } /* HTML: WON LOST A+ LIVE SYNC . 2s */ /* === 7 . KPI-TILES ======================================================= Kennzahlen-Kacheln: Zahl + Label. .tx-kpis = responsives Grid. ------------------------------------------------------------------------- */ .tx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .tx-kpi { padding: 16px 18px; border-radius: var(--r-panel); background: var(--glass); border: 1px solid var(--hair); box-shadow: var(--inset-hi); display: flex; flex-direction: column; gap: 6px; } .tx-kpi .tx-kpi-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .tx-kpi .tx-kpi-val { font-family: var(--mono); font-size: 28px; font-weight: 600; color: #fff; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; } .tx-kpi .tx-kpi-val.pos { color: var(--green); } .tx-kpi .tx-kpi-val.neg { color: var(--red); } .tx-kpi .tx-kpi-delta { font-family: var(--mono); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; } .tx-kpi .tx-kpi-delta.pos { color: var(--green); } .tx-kpi .tx-kpi-delta.neg { color: var(--red); } /* Verlauf-Akzent fuer Hero-Zahl */ .tx-kpi .tx-kpi-val em { font-style: normal; background: linear-gradient(135deg, var(--cyan), var(--indigo)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* HTML:
Equity$48.2k^ 2.4%
Win-Rate64%
Drawdown-3.1%
*/ /* === 8 . TABELLEN & LISTEN =============================================== .tx-table - Trade-Listen, Stats. mono fuer Zahlen, hover-Zeilen, kein Weiss. ------------------------------------------------------------------------- */ .tx-table { width: 100%; border-collapse: collapse; font-size: 13px; } .tx-table thead th { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 600; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hair); white-space: nowrap; } .tx-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--hair); color: var(--text); vertical-align: middle; } .tx-table tbody tr { transition: background .15s ease; } .tx-table tbody tr:hover { background: rgba(255,255,255,.025); } .tx-table tbody tr:last-child td { border-bottom: 0; } .tx-table .num, .tx-table .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .tx-table td.right, .tx-table th.right { text-align: right; } .tx-table .sym { font-family: var(--mono); font-weight: 500; color: #fff; } .tx-table .pos { color: var(--green); font-family: var(--mono); font-weight: 600; } .tx-table .neg { color: var(--red); font-family: var(--mono); font-weight: 600; } /* hervorgehobene Zeile */ .tx-table tr.tx-row-hi { background: linear-gradient(90deg, rgba(94,234,212,.06), transparent 60%); } /* Stats-Rows (Key/Value-Liste ohne Tabelle) */ .tx-list { display: flex; flex-direction: column; } .tx-list .tx-list-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); } .tx-list .tx-list-row:last-child { border-bottom: 0; } .tx-list .tx-list-row .k { color: var(--text-2); font-size: 13px; } .tx-list .tx-list-row .v { margin-left: auto; font-family: var(--mono); color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; } /* HTML:
PaarBiasRP/L
EURUSDLONG+2.4R+$840
*/ /* === 9 . FORM-ELEMENTE =================================================== Dunkles Theme. Fokus = cyan-Ring. Kein weisser Hintergrund. ------------------------------------------------------------------------- */ .tx-field { display: flex; flex-direction: column; gap: 7px; } .tx-field > label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .tx-field .tx-hint { font-size: 11.5px; color: var(--text-3); } .tx-input, .tx-select, .tx-textarea { width: 100%; font-family: var(--serif); font-size: 14px; color: var(--text); background: var(--bg-inset); border: 1px solid var(--hair); border-radius: var(--r-ctrl); padding: 10px 13px; line-height: 1.4; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); } .tx-input::placeholder, .tx-textarea::placeholder { color: var(--text-3); } .tx-input:hover, .tx-select:hover, .tx-textarea:hover { border-color: var(--hair-2); } .tx-input:focus, .tx-select:focus, .tx-textarea:focus { outline: none; border-color: rgba(94,234,212,.5); box-shadow: 0 0 0 3px rgba(94,234,212,.12); background: rgba(0,0,0,.4); } .tx-input.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .tx-textarea { resize: vertical; min-height: 84px; } /* Select mit Chevron */ .tx-select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; } /* Input mit fuehrendem Symbol (z.B. $) */ .tx-input-group { position: relative; display: flex; align-items: center; } .tx-input-group .pre { position: absolute; left: 13px; font-family: var(--mono); font-size: 13px; color: var(--text-3); pointer-events: none; } .tx-input-group .tx-input { padding-left: 28px; } /* Checkbox */ .tx-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--text); user-select: none; } .tx-check input { position: absolute; opacity: 0; width: 0; height: 0; } .tx-check .box { width: 18px; height: 18px; border-radius: 5px; flex: none; border: 1.5px solid var(--text-3); display: grid; place-items: center; transition: all var(--ease); background: var(--bg-inset); } .tx-check input:checked + .box { border-color: var(--cyan); background: rgba(94,234,212,.18); background-image: url("data:image/svg+xml;utf8,"); background-size: 11px; background-position: center; background-repeat: no-repeat; } .tx-check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(94,234,212,.18); } /* Toggle-Switch */ .tx-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--text); user-select: none; } .tx-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .tx-switch .track { width: 38px; height: 22px; border-radius: 100px; flex: none; background: rgba(255,255,255,.08); border: 1px solid var(--hair); position: relative; transition: all var(--ease); } .tx-switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: all var(--ease); } .tx-switch input:checked + .track { background: rgba(94,234,212,.25); border-color: rgba(94,234,212,.4); } .tx-switch input:checked + .track::after { left: 18px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } /* Segmented control (Tab-Pillen, z.B. Timeframe) */ .tx-segment { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-pill); background: var(--bg-inset); border: 1px solid var(--hair); } .tx-segment .opt { padding: 7px 15px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 11.5px; color: var(--text-2); cursor: pointer; border: 1px solid transparent; transition: all var(--ease); } .tx-segment .opt:hover { color: var(--text); } .tx-segment .opt.active { background: linear-gradient(135deg, rgba(94,234,212,.18), rgba(129,140,248,.12)); color: #fff; border-color: rgba(94,234,212,.20); } /* HTML:
%
Maximal 2 % laut Regelwerk.
*/ /* === 10 . PRE-MARKET SCANNER ============================================= Ranking-Tabelle mit Bias-Badges, Score-Balken, aufklappbarer Detail-Card. ------------------------------------------------------------------------- */ .tx-scanner { border-radius: var(--r-panel-lg); background: radial-gradient(600px 300px at 20% 0%, rgba(94,234,212,.08), transparent 60%), radial-gradient(500px 250px at 100% 100%, rgba(129,140,248,.08), transparent 60%), var(--glass-solid); border: 1px solid var(--hair); box-shadow: var(--inset-hi), var(--sh-2); overflow: hidden; } .tx-scanner-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hair); } .tx-scanner-head .title { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 13px; color: #fff; } .tx-scanner-head .title svg { width: 18px; height: 18px; color: var(--cyan); } .tx-scanner-head .title small { color: var(--text-3); margin-left: 4px; } /* Ranking-Tabelle */ .tx-rank { padding: 8px; } .tx-rank-head, .tx-rank-row { display: grid; grid-template-columns: 40px 110px 88px 1fr 120px 70px; align-items: center; gap: 12px; } .tx-rank-head { padding: 8px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--hair); margin-bottom: 4px; } .tx-rank-row { padding: 13px 14px; border-radius: 10px; font-size: 13px; cursor: pointer; transition: background .15s ease; } .tx-rank-row:hover { background: rgba(255,255,255,.03); } .tx-rank-row.top { background: linear-gradient(90deg, rgba(94,234,212,.07), transparent 60%); } .tx-rank-row.top:hover { background: linear-gradient(90deg, rgba(94,234,212,.11), transparent 60%); } .tx-rank-row .rank { font-family: var(--mono); color: var(--text-3); font-size: 11px; } .tx-rank-row.top .rank { color: var(--cyan); font-weight: 600; } .tx-rank-row .pair { font-family: var(--mono); color: #fff; font-weight: 500; font-size: 13.5px; } /* Bias-Badge (im Scanner) */ .tx-bias { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 4px 9px; border-radius: 6px; text-align: center; width: max-content; } .tx-bias--long { background: rgba(74,222,128,.16); color: var(--green); } .tx-bias--short { background: rgba(251,113,133,.16); color: var(--red); } .tx-bias--neutral { background: rgba(148,163,184,.12); color: var(--text-2); } /* Score-Balken */ .tx-scorebar { display: flex; align-items: center; gap: 10px; } .tx-scorebar .track { flex: 1; height: 6px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; } .tx-scorebar .fill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--indigo), var(--cyan)); } .tx-scorebar .fill.high { background: linear-gradient(90deg, var(--green), var(--cyan)); } .tx-scorebar .fill.low { background: linear-gradient(90deg, var(--text-3), var(--text-2)); } .tx-rank-row .score { font-family: var(--mono); font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -.02em; text-align: right; } .tx-rank-row .score.high { color: var(--green); } .tx-rank-row .score.low { color: var(--text-3); } /* aufklappbare Detail-Card */ .tx-rank-detail { grid-column: 1 / -1; margin-top: 8px; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease, margin .3s ease; opacity: 0; } .tx-rank-row.open + .tx-rank-detail, .tx-rank-detail.open { max-height: 400px; padding: 16px; margin-top: 4px; margin-bottom: 8px; opacity: 1; background: var(--bg-inset); border: 1px solid var(--hair); border-radius: 10px; } .tx-rank-detail .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 14px; } .tx-rank-detail .cell .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .tx-rank-detail .cell .v { font-family: var(--mono); font-size: 14px; color: #fff; margin-top: 4px; } .tx-rank-detail .cell .v.accent { color: var(--cyan); } /* Scanner-Footer (Legende) */ .tx-scanner-foot { display: flex; align-items: center; gap: 16px; padding: 13px 20px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 11px; color: var(--text-3); } .tx-scanner-foot .key { display: inline-flex; align-items: center; gap: 6px; } .tx-scanner-foot .key .sw { width: 8px; height: 8px; border-radius: 2px; } .tx-scanner-foot .key .sw.l { background: var(--green); } .tx-scanner-foot .key .sw.s { background: var(--red); } .tx-scanner-foot .key .sw.n { background: var(--text-2); } .tx-scanner-foot .more { margin-left: auto; color: var(--cyan); } /* HTML:
- Pre-Market Scanner 34 Paare 05:42
#PaarBiasScoreLevelPts
01EURUSD LONG 1.084094
14 Long9 Short
*/ /* === 11 . REGELWAeCHTER-KARTEN ============================================ Gelbe Karte (Warnung) . Rote Karte (Stopp). Overlay-Stil mit Dismiss-Bar. ------------------------------------------------------------------------- */ .tx-cardwatch { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px; border-radius: var(--r-panel); position: relative; overflow: hidden; } /* das "Karten"-Symbol (Schiedsrichter-Karte) */ .tx-cardwatch .card-icon { width: 34px; height: 46px; border-radius: 4px; box-shadow: 2px 3px 0 rgba(0,0,0,.35); align-self: start; } .tx-cardwatch--yellow { background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(251,191,36,.04)); border: 1px solid rgba(251,191,36,.32); } .tx-cardwatch--yellow .card-icon { background: linear-gradient(135deg, #fcd34d, #f59e0b); } .tx-cardwatch--red { background: linear-gradient(135deg, rgba(251,113,133,.16), rgba(225,29,72,.06)); border: 1px solid rgba(251,113,133,.40); box-shadow: 0 0 0 1px rgba(251,113,133,.1), 0 20px 50px rgba(225,29,72,.18); } .tx-cardwatch--red .card-icon { background: linear-gradient(135deg, #fb7185, #e11d48); } .tx-cardwatch .body .title { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; } .tx-cardwatch--yellow .body .title .tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--amber); } .tx-cardwatch--red .body .title .tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--red); } .tx-cardwatch .body .desc { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0; } .tx-cardwatch .body .rule { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 8px; } .tx-cardwatch .body .rule b { color: var(--text); } /* Dismiss-Bar unten */ .tx-cardwatch .dismiss-bar { grid-column: 1 / -1; margin: 14px -18px -18px; padding: 12px 18px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.20); } .tx-cardwatch .dismiss-bar .note { font-family: var(--mono); font-size: 11px; color: var(--text-3); } .tx-cardwatch .dismiss-bar .actions { margin-left: auto; display: flex; gap: 8px; } /* Vollbild-Overlay-Variante (rote Karte blockt) */ .tx-cardwatch-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; background: rgba(6,8,15,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .tx-cardwatch-overlay .tx-cardwatch { max-width: 460px; width: 100%; background-color: var(--bg-card); } /* HTML:

ROTE KARTE Tageslimit erreicht

Du hast -2.8 % heute verloren. Weiteres Traden verstoesst gegen dein Regelwerk.

Regel: Max. Tagesverlust 2.5 %
Sperre bis 00:00 UTC
*/ /* === 12 . ALERTS & INFO-BOXEN ============================================ Trading-Stil (keine Bootstrap-Farben). Success / Warning / Danger / Info. ------------------------------------------------------------------------- */ .tx-alert { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-panel); font-size: 13px; line-height: 1.5; border: 1px solid var(--hair); background: var(--bg-card); } .tx-alert .tx-alert-ic { width: 18px; height: 18px; margin-top: 1px; } .tx-alert .tx-alert-title { font-weight: 600; color: #fff; margin: 0 0 2px; } .tx-alert p { margin: 0; color: var(--text-2); } .tx-alert b { color: var(--text); } .tx-alert--success { background: linear-gradient(135deg, rgba(74,222,128,.12), rgba(74,222,128,.03)); border-color: rgba(74,222,128,.30); } .tx-alert--success .tx-alert-ic { color: var(--green); } .tx-alert--warning { background: linear-gradient(135deg, rgba(251,191,36,.13), rgba(251,191,36,.03)); border-color: rgba(251,191,36,.30); } .tx-alert--warning .tx-alert-ic { color: var(--amber); } .tx-alert--danger { background: linear-gradient(135deg, rgba(251,113,133,.13), rgba(251,113,133,.03)); border-color: rgba(251,113,133,.32); } .tx-alert--danger .tx-alert-ic { color: var(--red); } .tx-alert--info { background: linear-gradient(135deg, rgba(94,234,212,.10), rgba(129,140,248,.04)); border-color: rgba(94,234,212,.26); } .tx-alert--info .tx-alert-ic { color: var(--cyan); } /* HTML:
-

Spread erhoeht

XAUUSD-Spread liegt bei 4.2 Pips - News-Event in 12 Min.

*/ /* === 13 . INFO-TOOLTIP =================================================== Schwebendes Hover-Erklaerfenster - goldener Rand, dunkler Hintergrund. ------------------------------------------------------------------------- */ .tx-tip { position: relative; display: inline-flex; } /* Ausloeser (-) */ .tx-tip-trigger { width: 16px; height: 16px; border-radius: 50%; flex: none; cursor: help; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--amber); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); } .tx-tip-pop { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); width: 240px; padding: 12px 14px; border-radius: 10px; z-index: 200; background: linear-gradient(180deg, rgba(22,18,8,.97), rgba(14,12,8,.97)); border: 1px solid rgba(251,191,36,.45); box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(251,191,36,.1), inset 0 1px 0 rgba(255,255,255,.05); font-size: 12px; line-height: 1.5; color: var(--text-2); opacity: 0; pointer-events: none; transition: opacity var(--ease), transform var(--ease); } .tx-tip-pop .h { display: block; color: var(--amber); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; } .tx-tip-pop b { color: var(--text); } /* Pfeil */ .tx-tip-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(251,191,36,.45); } .tx-tip:hover .tx-tip-pop, .tx-tip-trigger:focus + .tx-tip-pop { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* HTML: - FVG Eine Fair Value Gap ist eine Imbalance ueber drei Kerzen - */ /* === 14 . NAVIGATION & BREADCRUMBS ======================================= Horizontale Tab-Navigation (Pillen) + Breadcrumb-Pfad. ------------------------------------------------------------------------- */ .tx-tabs { display: flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--bg-inset); border: 1px solid var(--hair); width: max-content; max-width: 100%; overflow-x: auto; } .tx-tabs a, .tx-tabs button { font-family: var(--serif); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--text-2); background: transparent; border: 0; cursor: pointer; padding: 8px 16px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 7px; transition: all var(--ease); } .tx-tabs a:hover, .tx-tabs button:hover { color: var(--text); background: rgba(255,255,255,.04); } .tx-tabs a.active, .tx-tabs button.active { color: #fff; background: linear-gradient(135deg, rgba(94,234,212,.18), rgba(129,140,248,.12)); box-shadow: inset 0 0 0 1px rgba(94,234,212,.20); } .tx-tabs .count { font-family: var(--mono); font-size: 10px; color: var(--text-3); padding: 1px 6px; border-radius: 100px; background: rgba(255,255,255,.05); } .tx-tabs a.active .count { color: var(--cyan); } /* Unterstrichene Tab-Variante (fuer Panel-Koepfe) */ .tx-tabs--underline { background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 0; gap: 0; width: 100%; } .tx-tabs--underline a, .tx-tabs--underline button { border-radius: 0; padding: 12px 16px; position: relative; } .tx-tabs--underline a:hover, .tx-tabs--underline button:hover { background: transparent; } .tx-tabs--underline a.active, .tx-tabs--underline button.active { background: transparent; color: #fff; box-shadow: none; } .tx-tabs--underline a.active::after, .tx-tabs--underline button.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--indigo)); border-radius: 2px; } /* Sekundaer-Navigation - freistehende Text-Nav mit durchgehender Trennlinie (nicht in einer Box/Karte). Aktiver Eintrag: cyan Text + cyan Unterstrich. */ .tx-subnav { display: flex; align-items: center; gap: 4px; font-family: var(--serif); font-size: 14px; border-bottom: 1px solid var(--hair); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tx-subnav::-webkit-scrollbar { display: none; } .tx-subnav a { display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px; margin-bottom: -1px; color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--ease); } .tx-subnav a svg { width: 16px; height: 16px; flex-shrink: 0; } .tx-subnav a:hover { color: var(--text); } .tx-subnav a.is-active { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 600; } /* Akzent-Symbol: Icon in Marken-Cyan, Text bleibt normal */ .tx-subnav a.nav-green svg { color: var(--cyan); } /* Dropdown-Pfeil - immer letztes Kind */ .tx-subnav-caret { width: 12px !important; height: 12px !important; opacity: .55; transition: transform var(--ease); } .tx-subnav a:hover .tx-subnav-caret, .tx-subnav a.is-active .tx-subnav-caret { opacity: .85; } /* Wrapper fuer Nav + Toolbar gemeinsam */ .tx-navbar { display: flex; flex-direction: column; gap: 16px; } /* Breadcrumb */ .tx-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: var(--mono); color: var(--text-3); flex-wrap: wrap; } .tx-crumbs a { color: var(--text-2); text-decoration: none; transition: color var(--ease); } .tx-crumbs a:hover { color: var(--cyan); } .tx-crumbs .sep { color: var(--text-3); opacity: .6; } .tx-crumbs .current { color: var(--text); } /* HTML: */