/* * Sensei's Hyperbolic Trading Chamber — Stylesheet * * Design tokens: * Backgrounds : #0f0f0f (deep) | #141414 (dark) | #1a1a1a (panel) | #222–#2a2a2a (button) * Borders : #333 (panel) | #444 (button) * Text : #e0e0e0 (primary) | #888 (secondary) | #666 (muted) * Accent (SSJ Gold default) : #fff000 | Blue theme: add data-theme="blue" to * Teal / buy : #26a69a / #1e8c82 * Red / sell : #ef5350 / #e53935 * Orange/flat : #ff9800 / #f57c00 * Border-radius: 6px (default) | 4px (small items) */ /* ─── Theme Variables ───────────────────────────────────── */ /* Default: Super Saiyan Gold */ :root { --accent: #fff000; --accent-dark: #ccbb00; --accent-aa: #fff000aa; --accent-88: #fff00088; --accent-66: #fff00066; --accent-44: #fff00044; --accent-22: #fff00022; --accent-bg-tint: #1a1a00; --accent-dragover: #1a1900; --bg-deep: #00000078; --bg-dark: #e4e4e4; --bg-fade: linear-gradient(to bottom, #33333311 0%, #00000011 100%) !important; --bg-fade-2: linear-gradient(to bottom, #33333322 0%, #00000022 100%) !important; --accent-tier-trial: var(--accent); --accent-tier-free: #34d399; --accent-tier-standard: #eab308; --accent-tier-premium: #f97316; --accent-tier-elite: #f43f5e; --accent-tier-developer: #a855f7; } /* ─── Light theme ───────────────────────────────────────── */ [data-color-scheme="light"] { --accent: #2563eb; --accent-dark: #1d4ed8; --accent-aa: #2563ebaa; --accent-88: #2563eb88; --accent-66: #2563eb66; --accent-44: #2563eb44; --accent-22: #2563eb22; --accent-bg-tint: #eef2ff; --accent-dragover: #dbeafe; --bg-deep: #ffffff78; --bg-dark: #e4e4e4; --bg-panel: #d8d8d8; --bg-button: #cccccc; --border: #bbbbbb; --text-primary: #111111; --text-secondary: #444444; --text-muted: #777777; --bg-fade: linear-gradient(to bottom, #aaaaaa78 0%, #ffffff78 100%) !important; --bg-fade-2: linear-gradient(to bottom, #aaaaaaaa 0%, #ffffffaa 100%) !important; } .tier-trial, [data-tier="trial"] { --accent-tier: var(--accent); } .tier-free, [data-tier="free"] { --accent-tier: var(--accent-tier-free); } .tier-standard, [data-tier="standard"] { --accent-tier: var(--accent-tier-standard); } .tier-premium, [data-tier="premium"] { --accent-tier: var(--accent-tier-premium); } .tier-elite, [data-tier="elite"] { --accent-tier: var(--accent-tier-elite); } .tier-developer, [data-tier="developer"] { --accent-tier: var(--accent-tier-developer); } /* Blue accent theme */ [data-theme="blue"] { --accent: #2563eb; --accent-dark: #1d4ed8; --accent-66: #2563eb66; --accent-44: #2563eb44; --accent-22: #2563eb22; --accent-bg-tint: #0a0f1a; --accent-dragover: #0a0e1a; } [data-color-scheme="light"] body { background: #f0f0f0; color: #111; } [data-color-scheme="light"] .header { background: #e0e0e0 url('./assets/images/background/papyrus.png') repeat; background-attachment: fixed; border-color: #ccc; } [data-color-scheme="light"] .title { color: #111; } [data-color-scheme="light"] .info-label { color: #555; } [data-color-scheme="light"] .accordion-header { background: repeat; background-attachment: fixed; color: #888; border-color: rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); } [data-color-scheme="light"] .accordion-header:hover { color: #444; } [data-color-scheme="light"] .accordion-header.open { color: var(--accent); } [data-color-scheme="light"] .accordion-body { background: url('./assets/images/background/papyrus.png') repeat; background-attachment: fixed; } [data-color-scheme="light"] .accordion-section { border-color: #ccc; } [data-color-scheme="light"] .info-bar { background: #e0e0e0 url('./assets/images/background/papyrus.png') repeat; background-attachment: fixed; border-color: #ccc; } [data-color-scheme="light"] .chart-container { background: #f8f8f8; } [data-color-scheme="light"] .playlist-controls { background: #ffffff77; box-shadow: 0 2px 8px rgba(70,70,70,0.3); } [data-color-scheme="light"] .playlist-controls * { color: #111; } [data-color-scheme="light"] .playlist-info { background: rgba(255,255,255,0.5); } [data-color-scheme="light"] .playlist-info-day { color: #111 !important; } [data-color-scheme="light"] .playlist-info-file { color: #555 !important; } [data-color-scheme="light"] button { background: linear-gradient(to bottom, #aaaaaa78 0%, #ffffff78 100%) !important; border-color: rgba(200,200,200,0.3) !important; color: #111 !important; } [data-color-scheme="light"] button:hover:not(:disabled) { background: linear-gradient(to bottom, #eeeeee78 0%, #ffffff78 100%) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; border-color: rgba(200,200,200,0.8) !important; box-shadow: 0 1px 5px var(--accent); } [data-color-scheme="light"] button:disabled { background: rgba(200,200,200,0.2) !important; color: #aaa !important; } [data-color-scheme="light"] .splash-overlay { background: #ffffff33; backdrop-filter: blur(1px); } [data-color-scheme="light"] .splash-card { background: #e0e0e0 url('./assets/images/background/papyrus.png') repeat; background-attachment: fixed; border-color: #ccc; color: #111; } [data-color-scheme="light"] .splash-title { color: #111; } [data-color-scheme="light"] .splash-subtitle { color: #555; } [data-color-scheme="light"] .settings-body { color: #222; } [data-color-scheme="light"] .settings-section { border-color: #ccc; } [data-color-scheme="light"] .settings-section-label { color: #555; } [data-color-scheme="light"] .settings-card .settings-tab { color: var(--accent-aa) !important; } [data-color-scheme="light"] .settings-card .settings-tab:hover { color: var(--accent) !important; } [data-color-scheme="light"] .settings-card .settings-tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; font-weight: bold; } [data-color-scheme="light"] .settings-card .settings-tabs { border-bottom-color: var(--accent-22); } [data-color-scheme="light"] .settings-stat-label { color: #333; font-weight: bold; } [data-color-scheme="light"] .settings-stat-value { color: #111; } [data-color-scheme="light"] .settings-stat { background: rgba(200,200,200,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,0.6); } [data-color-scheme="light"] .settings-reset-btn { background: rgba(200,200,200,0.45) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(200,100,100,0.5) !important; color: #c0392b !important; } [data-color-scheme="light"] #ctxSlInput, [data-color-scheme="light"] #ctxTpInput, [data-color-scheme="light"] #mgSlPrice, [data-color-scheme="light"] #mgTpPrice, [data-color-scheme="light"] #mgSlPts, [data-color-scheme="light"] #mgTpPts, [data-color-scheme="light"] #settingsMaxSessionLoss, [data-color-scheme="light"] #settingsMaxDailyLoss, [data-color-scheme="light"] #settingsMaxTrades, [data-color-scheme="light"] #settingsTradingSpeed, [data-color-scheme="light"] #settingsDefaultTimeframe, [data-color-scheme="light"] #ma1LengthInput, [data-color-scheme="light"] input[type="text"], [data-color-scheme="light"] input[type="email"], [data-color-scheme="light"] input[type="password"], [data-color-scheme="light"] .splash-form-row input[type="number"] { background: var(--bg-fade); border-color: #bbb; color: #111; } [data-color-scheme="light"] .trading-panel { background: transparent; border-color: #ccc; } [data-color-scheme="light"] .trade-history { background: transparent; } [data-color-scheme="light"] .trade-row { border-color: #ccc; color: #111; } [data-color-scheme="light"] .trade-row:hover { background: #ddd; } [data-color-scheme="light"] .section-header { background: transparent; color: #555; border-color: rgba(0,0,0,0.1); } [data-color-scheme="light"] .sidebar { background: #e0e0e0; border-color: #ccc; } [data-color-scheme="light"] .speed-display { color: #111; } [data-color-scheme="light"] .tf-select { background: #d8d8d878; border-color: #aaa; color: #111; } [data-color-scheme="light"] .timeframe-selector select { background: #d8d8d878; border-color: #aaa; color: #111; } /* [data-color-scheme="light"] .timeframe-selector span { color: #444; } */ [data-color-scheme="light"] .speed-control input[type="number"], [data-color-scheme="light"] #ma1LengthInput { background: #d8d8d878; border-color: #aaa; color: #111; } [data-color-scheme="light"] .date-picker-btn { background: rgba(200,200,200,0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-color: rgba(255,255,255,0.6); color: #111; } [data-color-scheme="light"] .date-picker-popup { background: #f5f0e8 url('./assets/images/background/papyrus.png') repeat; background-attachment: fixed; border-color: #ccc; box-shadow: 0 8px 32px rgba(0,0,0,0.15); } [data-color-scheme="light"] .dp-month-label { color: #222; } [data-color-scheme="light"] .dp-nav { border-color: #ccc; color: #555; background: rgba(200,200,200,0.45); } [data-color-scheme="light"] .dp-nav:hover { background: rgba(200,200,200,0.7); color: var(--accent); border-color: var(--accent); } [data-color-scheme="light"] .dp-weekday { color: #999; } [data-color-scheme="light"] .dp-day { color: #ccc; } [data-color-scheme="light"] .dp-day.other-month { color: #ccc; } [data-color-scheme="light"] .dp-day.available { color: #333; border-color: rgba(0,0,0,0.1); } [data-color-scheme="light"] .dp-day.available:hover { background: var(--accent-22); border-color: var(--accent); color: #111; } [data-color-scheme="light"] .dp-day.nearest { border-color: var(--accent); color: var(--accent); } [data-color-scheme="light"] .dp-footer { border-color: rgba(0,0,0,0.1); } [data-color-scheme="light"] .trade-history { background: transparent; border-color: #ccc; } [data-color-scheme="light"] .trades-list .trade-item { background: rgba(200,200,200,0.35); border-color: rgba(255,255,255,0.5); color: #111; } [data-color-scheme="light"] .position-item { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.08); } [data-color-scheme="light"] .trade-prices { color: #555; } [data-color-scheme="light"] .trade-times { color: #777; } [data-color-scheme="light"] .trade-time-sep { color: #999; } [data-color-scheme="light"] .trades-list::-webkit-scrollbar-track, [data-color-scheme="light"] .trade-history::-webkit-scrollbar-track { background: #d8d8d8; } [data-color-scheme="light"] .trades-list::-webkit-scrollbar-thumb, [data-color-scheme="light"] .trade-history::-webkit-scrollbar-thumb { background: #aaa; } [data-color-scheme="light"] .help-close-btn { color: #555; } [data-color-scheme="light"] .help-close-btn:hover { color: #111; } /* [data-color-scheme="light"] .playlist-controls .buy-btn, [data-color-scheme="light"] .buy-btn { background: rgba(200,200,200,0.45) !important; border-color: rgba(255,255,255,0.6) !important; color: #111 !important; } [data-color-scheme="light"] .playlist-controls .sell-btn, [data-color-scheme="light"] .sell-btn { background: rgba(200,200,200,0.45) !important; border-color: rgba(255,255,255,0.6) !important; color: #111 !important; } [data-color-scheme="light"] .playlist-controls .close-btn:not(:disabled), [data-color-scheme="light"] .close-btn:not(:disabled) { background: rgba(200,200,200,0.45) !important; border-color: rgba(255,255,255,0.6) !important; color: #111 !important; } */ [data-color-scheme="light"] .buy-btn:hover:not(:disabled) { box-shadow: inset 0 0 12px rgba(51,255,0,0.35) !important; border-color: #33ff0066 !important; } [data-color-scheme="light"] .sell-btn:hover:not(:disabled) { box-shadow: inset 0 0 12px rgba(239,83,80,0.35) !important; border-color: #ef535066 !important; } [data-color-scheme="light"] .flatten-btn:hover:not(:disabled) { box-shadow: inset 0 0 12px rgba(255,179,0,0.35) !important; border-color: #ffb30066 !important; } [data-color-scheme="light"] #playPauseBtn:hover:not(:disabled) { background: linear-gradient(to top, #eeeeee78 0%, #ffffff78 100%) !important;box-shadow: inset 0 0 12px rgba(51,255,0,0.35) !important; border-color: #33ff0066 !important; } [data-color-scheme="light"] #playPauseBtn.warning:hover:not(:disabled) { background: linear-gradient(to top, #eeeeee78 0%, #ffffff78 100%) !important;box-shadow: inset 0 0 12px rgba(255,179,0,0.35) !important; border-color: #ffb30066 !important; } [data-color-scheme="light"] #resetBtn:hover:not(:disabled) { background: linear-gradient(to top, #eeeeee78 0%, #ffffff78 100%) !important;box-shadow: inset 0 0 12px rgba(239,83,80,0.35) !important; border-color: #ef535066 !important; } [data-color-scheme="light"] input[type="range"] { background: #bbb; } [data-color-scheme="light"] .timeline-slider { background: #c0c0c0; } [data-color-scheme="light"] #contractSlider { background: #c0c0c0; } [data-color-scheme="light"] .splash-lore { background: rgba(250,250,250,0.75); } [data-color-scheme="light"] .ctx-popup { background: #efefef78; border-color: #bbb; color: #111; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } [data-color-scheme="light"] .popup-divider { background: #ccc; } [data-color-scheme="light"] .ctx-menu-btn { border-color: #bbb !important; color: #111 !important; } [data-color-scheme="light"] .ctx-menu-btn:hover { border-color: #888 !important; } [data-color-scheme="light"] .ctx-menu { background: #f0f0f0; border-color: #ccc; } [data-color-scheme="light"] .ctx-menu-item { color: #111; } [data-color-scheme="light"] .ctx-menu-item:hover { color: #111; } [data-color-scheme="light"] .ctx-menu-separator { border-color: #ccc; } [data-color-scheme="light"] .htc-colorpicker { background: #f0f0f0; border-color: #bbb; box-shadow: 0 8px 32px rgba(0,0,0,0.2); } [data-color-scheme="light"] .htc-cp-hex { background: #fff; border-color: #bbb; color: #111; } [data-color-scheme="light"] .htc-cp-hex:focus { border-color: #888; } [data-color-scheme="light"] .htc-cp-preview { border-color: #aaa; } [data-color-scheme="light"] .htc-cp-eyedropper { background: #fff !important; border-color: #bbb !important; color: #333 !important; } [data-color-scheme="light"] .htc-cp-eyedropper:hover { background: #e8e8e8 !important; border-color: #888 !important; } [data-color-scheme="light"] #propFirmLockedLabel { color: #111; } [data-color-scheme="dark"] #propFirmLockedLabel { color: #ccc; } /* ─── Reset ─────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main, "Candara", "Calibri", "Segoe UI", "Optima", sans-serif) !important; } /* ─── Body ──────────────────────────────────────────────── */ body { font-family: var(--font-main, "Candara", "Calibri", "Segoe UI", "Optima", sans-serif); background: #010101; color: #e0e0e0; height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* ─── Header ────────────────────────────────────────────── */ .header { background: #1a1a1a url('./assets/images/background/papyrus-dark.png') repeat; background-attachment: fixed; padding: 8px 20px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; } .title { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .price-display-inline { display: flex; gap: 30px; align-items: center; } .info-item { display: flex; align-items: center; gap: 8px; } .info-label { color: #888; font-size: 13px; } .info-value { color: #e0e0e0; font-weight: 600; /* font-size: 13px; */ } .info-value.positive { color: #26a69a; } .info-value.negative { color: #ef5350; } .price { font-size: 16px; font-weight: 700; color: #e0e0e0; } .price.up { color: #26a69a; } .price.down { color: #ef5350; } .current-time { font-size: 16px; font-weight: 600; color: var(--accent); } .bar-countdown { font-size: 16px; font-weight: 600; color: #ff9800; font-family: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif; } /* Status icon */ .status { width: 48px; height: 48px; object-fit: contain; margin-right: 6px; opacity: 0.4; transition: opacity 0.4s, filter 0.4s; filter: none; /* margin: 0px 4px; */ } .status.connected { opacity: 1; filter: drop-shadow(0 0 5px #f5c518) drop-shadow(0 0 10px #d4a017); } /* ─── Chart ─────────────────────────────────────────────── */ .chart-container { flex: 1; /* position: relative; */ /* background: #000; */ /* margin: 10px; */ /* border-radius: 5px; */ padding: 5px 10px; } #chart { width: 100%; height: 100%; border-radius: 5px; overflow: hidden; box-shadow: 0px 0px 5px var(--accent-tier,var(--accent)); } #chart.chart-alert { animation: chartAlertPulse 0.9s ease-in-out 3; } @keyframes chartAlertPulse { 0%, 100% { box-shadow: 0 0 5px var(--chart-alert-color, var(--accent-tier, var(--accent))); } 50% { box-shadow: 0 0 24px var(--chart-alert-color, var(--accent-tier, var(--accent))), 0 0 8px var(--chart-alert-color, var(--accent-tier, var(--accent))); } } .chart-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(55vw, 55vh); opacity: 0.04; pointer-events: none; user-select: none; z-index: 0; transition: opacity 0.3s ease; } .chart-watermark.hidden { opacity: 0; } /* ─── Accordion ─────────────────────────────────────────── */ #bottomAccordion { flex-shrink: 0; } .accordion-section { border-top: 1px solid #111111; } .accordion-header { display: flex; align-items: center; gap: 8px; padding: 4px 10px; cursor: pointer; background: #00000069; /* background-attachment: fixed; */ color: #888; /* font-size: 11px; */ font-weight: 700; text-transform: uppercase; letter-spacing: 1px; user-select: none; backdrop-filter: blur(2px); transition: color 0.15s; border-bottom: 1px solid rgba(255,255,255,0.06); } .accordion-header:hover { color: #bbb; } .accordion-header.open { color: var(--accent); border-left: 2px solid var(--accent); } .acc-chevron { margin-left: auto; font-size: 10px; } .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: url('./assets/images/background/papyrus-dark.png') repeat; background-attachment: fixed; } .accordion-body.open { max-height: 400px; overflow-y: auto; } /* Allow calendar popup to escape clipping containers */ .accordion-body:has(.date-picker-popup.open), .info-bar:has(.date-picker-popup.open), .playlist-controls:has(.date-picker-popup.open) { overflow: visible; } .accordion-body .trading-panel { border-top: none; } .accordion-body .trade-history { border-top: none; margin-top: 0; } /* ─── Info Bar ──────────────────────────────────────────── */ .info-bar { background: #1a1a1a url('./assets/images/background/papyrus-dark.png') repeat; background-attachment: fixed; padding: 10px 20px; border-bottom: 1px solid #333; overflow-x: auto; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; /* font-size: 13px; */ } /* ─── 3-Column Controls Grid ────────────────────────────── */ .controls-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; padding: 8px 16px; gap: 12px; } .ctrl-section { display: flex; align-items: stretch; gap: 8px; } .ctrl-left { justify-content: flex-start; } .ctrl-center { justify-content: center; } .ctrl-right { justify-content: flex-end; gap: 6px; } .controls-bar .playlist-controls { align-items: center; height: 100%; width: 100%; box-sizing: border-box; } .ctrl-center .playlist-controls { width: 100%; justify-content: center; } .ctrl-right .playlist-controls { justify-content: flex-end; width: 100%; } .ctrl-center .controls { width: 100%; justify-content: center; } .ctrl-divider { width: 1px; background: #3a3a3a; flex-shrink: 0; align-self: stretch; } /* Inner flex row used inside playlist-controls boxes */ .controls { display: flex; align-items: center; gap: 8px; } /* ─── Buttons — Base ────────────────────────────────────── */ button { background: linear-gradient(to bottom, #23232378 0%, #00000078 100%); border: none; color: #e0e0e0; padding: 8px 16px; border-radius: 6px; cursor: pointer; /* font-size: 13px; */ transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; white-space: nowrap; backdrop-filter: blur(1px); } button:hover:not(:disabled) { background: linear-gradient(to bottom, #3a3a3aaa 0%, #2a2a2a33 100%); /* border-color: #555; */ transform: translateY(-1px); box-shadow: 0 0 5px var(--accent-66); } button:active:not(:disabled) { transform: translateY(0); /* box-shadow: 0 2px 4px rgba(0,0,0,0.2); */ } button:disabled { background: linear-gradient(to bottom, #1a1a1a78 0%, #14141478 100%); border-color: #333; color: #555; cursor: not-allowed; opacity: 0.6; } /* Shimmer sweep on hover */ button::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s; pointer-events: none; } button:hover:not(:disabled)::after { left: 100%; } /* Secondary style (Go / Cancel / Enable Drawing) */ button.secondary { background: transparent; border-color: #555; color: #aaa; /* font-size: 12px; */ } button.secondary:hover:not(:disabled) { background: #2a2a2a; border-color: #777; color: #e0e0e0; } /* ─── Buttons — Action size (Play / Reset / Prev / Next / MA) */ #playPauseBtn, #resetBtn, #prevFileBtn, #nextFileBtn, #toggleMa1Btn, #toggleMa2Btn { padding: 10px 20px; min-width: 110px; /* font-size: 12px; */ letter-spacing: 1px; text-transform: uppercase; } /* Success (Play) — dark with green glow */ /* button.success { background: linear-gradient(to bottom, #2a2a2a78 0%, #1a3a1a78 100%); border-color: #33ff0066; color: #e0e0e0; } button.success:hover:not(:disabled) { background: linear-gradient(to bottom, #2a2a2a78 0%, #1a3a1a78 100%); border-color: #33ff00aa; color: #fff; } */ /* Warning (Pause) — dark with amber glow */ /* button.warning { background: linear-gradient(to bottom, #2a2a2a78 0%, #3a2a1a78 100%); border-color: #ffb30066; color: #e0e0e0; } button.warning:hover:not(:disabled) { background: linear-gradient(to bottom, #2a2a2a78 0%, #3a2a1a78 100%); border-color: #ffb300aa; color: #fff; } */ /* Reset — red-tinted dark */ /* #resetBtn { background: linear-gradient(to bottom, #2a2a2a78 0%, #3a1a1a78 100%); border-color: #ef535066; } */ #playPauseBtn:hover:not(:disabled) { background: linear-gradient(to top, #00000078 0%, #1a3a1a78 100%) !important; } #playPauseBtn.warning:hover:not(:disabled) { background: linear-gradient(to top, #00000078 0%, #3a301a78 100%) !important; } #resetBtn:hover:not(:disabled) { background: linear-gradient(to top, #00000078 0%, #3a1a1a78 100%) !important; } .buy-btn:hover:not(:disabled) { background: linear-gradient(to top, #00000078 0%, #1a3a1a78 100%) !important; } .sell-btn:hover:not(:disabled) { background: linear-gradient(to top, #00000078 0%, #3a1a1a78 100%) !important; } .flatten-btn:hover:not(:disabled) { background: linear-gradient(to top, #00000078 0%, #3a2a1a78 100%) !important;} /* ─── Buttons — Trade (BUY / SELL / FLATTEN) + MA toggles ───────────── */ .playlist-controls .trade-btn, .trade-btn, #toggleAllMaBtn, #toggleMa1Btn, #toggleMa2Btn { padding: 10px 20px; /* font-size: 12px; */ border-radius: 6px; min-width: 110px; letter-spacing: 1px; text-transform: uppercase; color: #fff; transform: none; box-shadow: none; } /* ─── MA Toggle Buttons — raised/pressed states ─────────── */ #toggleAllMaBtn, #toggleMa1Btn, #toggleMa2Btn { /* Popped out (off) — raised appearance */ /* background: linear-gradient(to bottom, #38383878 0%, #26262678 100%); */ border-color: #555; color: #888; box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 #444 inset; transform: translateY(0); transition: background 0.15s, box-shadow 0.15s, transform 0.1s, color 0.15s; min-width: 70px; } #toggleAllMaBtn:hover:not(:disabled), #toggleMa1Btn:hover:not(:disabled), #toggleMa2Btn:hover:not(:disabled) { background: linear-gradient(to bottom, #42424278 0%, #30303078 100%); border-color: #666; color: #aaa; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 1px 0 #555 inset; transform: translateY(-1px); } #toggleAllMaBtn.active, #toggleMa1Btn.active, #toggleMa2Btn.active { /* Pressed in — sunken appearance */ background: linear-gradient(to bottom, #1a1a1a78 0%, #22222278 100%); border-color: #333; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset, 0 0 0 1px #1a1a1a inset; transform: translateY(1px); } #toggleAllMaBtn.active:hover:not(:disabled), #toggleMa1Btn.active:hover:not(:disabled), #toggleMa2Btn.active:hover:not(:disabled) { background: linear-gradient(to bottom, #1e1e1e78 0%, #28282878 100%); color: #fff; transform: translateY(1px); } /* Trade button text — bold only */ #buyBtn, #sellBtn, #closeAllBtn { font-weight: 700; } /* BUY — dark with green glow (matches Play) */ /* .playlist-controls .buy-btn, .buy-btn { background: linear-gradient(to bottom, #2a2a2a78 0%, #1a3a1a78 100%) !important; border: 1px; color: #33ff00 !important; } */ /* SELL — dark with red glow (matches Reset) */ /* .playlist-controls .sell-btn, .sell-btn { background: linear-gradient(to bottom, #2a2a2a78 0%, #3a1a1a78 100%) !important; border: 1px solid #ef535066 !important; color: #ef5350 !important; } */ /* FLATTEN — dark with amber glow (matches Pause) */ .playlist-controls .close-btn, .close-btn { background: linear-gradient(to bottom, #2a2a2a78 0%, #3a2a1a78 100%) !important; border: 1px solid #ffb30066 !important; color: #ffb300 !important; } .close-btn:disabled { background: linear-gradient(to bottom, #1a1a1a78 0%, #14141478 100%) !important; border: 1px solid #33333366 !important; color: #555 !important; opacity: 0.6; } /* ─── Buttons — Small draw icons ────────────────────────── */ .draw-btn { padding: 6px 10px; font-size: 14px; min-width: unset; } .draw-btn.active { background: linear-gradient(to bottom, var(--accent) 0%, var(--accent-dark) 100%) !important; border-color: var(--accent) !important; color: #fff !important; } /* Shift-to-measure active state */ #chart.measure-shift-active { cursor: crosshair !important; animation: measureShiftPulse 0.9s ease-in-out infinite; } @keyframes measureShiftPulse { 0%, 100% { box-shadow: 0 0 5px rgba(255,240,0,0.4); } 50% { box-shadow: 0 0 24px rgba(255,240,0,0.8), 0 0 8px rgba(255,240,0,0.6); } } /* Ctrl-to-trendline active state */ #chart.trendline-ctrl-active { cursor: crosshair !important; animation: trendlineCtrlPulse 0.9s ease-in-out infinite; } @keyframes trendlineCtrlPulse { 0%, 100% { box-shadow: 0 0 5px rgba(37,99,235,0.4); } 50% { box-shadow: 0 0 24px rgba(37,99,235,0.8), 0 0 8px rgba(37,99,235,0.6); } } /* Drawing right-click context menu */ .drawing-context-menu { position: fixed; z-index: 9999; background: var(--bg-panel, #1e222d); border: 1px solid var(--border, #2a2e39); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); padding: 4px 0; min-width: 130px; } .drawing-ctx-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--text, #d1d4dc); text-align: left; } .drawing-ctx-item:hover { background: rgba(255,255,255,0.06); } .drawing-ctx-delete { color: #ef5350; } .drawing-ctx-delete:hover { background: rgba(239,83,80,0.12); } /* Close position × button */ .close-position-btn { /* background: linear-gradient(135deg, #ef5350 0%, #e53935 100%); */ color: #ef535066; border: none; border-radius: 6px; width: 28px; height: 28px; /* display: flex; */ align-items: center; justify-content: center; cursor: pointer; font-size: 16px; padding: 0; flex-shrink: 0; font-weight: bold; transition: filter 0.2s, transform 0.2s; } .close-position-btn:hover { filter: brightness(1.2); transform: scale(1.08); } /* ─── Inputs ────────────────────────────────────────────── */ select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="datetime-local"], input[type="time"] { background: #00000078; text-align-last: center; color: #e0e0e0; border: 1px solid #444; padding: 6px 10px; border-radius: 6px; outline: none; transition: border-color 0.2s; color-scheme: dark; width: 100%; } [data-color-scheme="light"] input[type="datetime-local"], [data-color-scheme="light"] input[type="time"] { background: #f0f0f0; color: #1a1a1a; border-color: #ccc; color-scheme: light; } input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="datetime-local"]:hover, input[type="time"]:hover { border-color: #555; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus { border-color: var(--accent); } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { appearance: textfield; } input[type="range"] { -webkit-appearance: none; appearance: none; background: #333; height: 4px; border-radius: 2px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; } input[type="color"] { background: transparent; border: 1px solid #444; padding: 2px 4px; border-radius: 4px; cursor: pointer; transition: border-color 0.2s; } input[type="color"]:hover { border-color: #555; } select { /* background: #00000078; color: #e0e0e0; border: 1px solid #444; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; outline: none; transition: border-color 0.2s; */ text-align: center; } select:hover { border-color: var(--accent); } select:focus { border-color: var(--accent-44); } /* #authTier { border: none !important; border-radius: 0 !important; background: var(--bg-fade) !important; appearance: none; -webkit-appearance: none; } #authTier:hover { background: var(--bg-fade-2) !important; } #authTier:focus { background: var(--bg-fade-2) !important; } */ /* ─── Date Picker ───────────────────────────────────────── */ #datePickerWrapper { position: relative; display: inline-flex; } #datePickerTrigger { height: 28px; padding: 0 10px; display: flex; align-items: center; gap: 5px; /* font-size: 11px; */ white-space: nowrap; cursor: pointer; } .date-picker-popup { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 3000; background: #1a1a1a url('./assets/images/background/papyrus-dark.png') repeat; background-attachment: fixed; border: 1px solid #333; border-top: 2px solid var(--accent); border-radius: 8px; padding: 10px; width: 224px; box-shadow: 0 8px 32px rgba(0,0,0,0.7); } .date-picker-popup.open { display: block; } .dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dp-month-label { /* font-size: 12px; */ font-weight: 600; color: #e0e0e0; } .dp-nav { background: none; border: 1px solid #333; color: #aaa; cursor: pointer; /* font-size: 16px; */ line-height: 1; padding: 1px 7px 3px; border-radius: 4px; height: 22px; display: flex; align-items: center; } .dp-nav:hover { background: #2a2a2a; color: var(--accent); border-color: var(--accent-44); } .dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } .dp-weekday { text-align: center; font-size: 10px; color: #444; text-transform: uppercase; padding: 2px 0; } .dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 4px; cursor: default; color: #2a2a2a; } .dp-day.other-month { color: #242424; } .dp-day.available { color: #bbb; cursor: pointer; border: 1px solid #2a2a2a; } .dp-day.available:hover { background: var(--accent-22); border-color: var(--accent-44); color: #fff; } .dp-day.selected { background: var(--accent); border: 1px solid var(--accent); color: #000; font-weight: 700; cursor: pointer; } .dp-day.nearest { border: 1px dashed var(--accent); color: var(--accent); } .dp-footer { padding: 6px 8px 4px; text-align: center; border-top: 1px solid #2a2a2a; } .dp-today-btn { background: transparent; border: 1px solid var(--accent-44); color: var(--accent); font-size: 12px; padding: 3px 14px; border-radius: 4px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .dp-today-btn:hover { background: var(--accent-22); border-color: var(--accent); } /* ─── Playlist Control Pill Boxes ───────────────────────── */ .playlist-controls { display: flex; /* align-items: center; */ gap: 8px; background: #00000078; padding: 6px 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(70,70,70,0.3); position: relative; overflow: hidden; backdrop-filter: blur(1px); } /* Blue top-edge accent line */ .playlist-controls::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); z-index: 1; pointer-events: none; } /* Playlist nav info block */ .playlist-info { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 140px; flex: 1; padding: 6px 12px; background: rgba(0,0,0,0.5); border-radius: 4px; border-left: 1px solid #333; border-right: 1px solid #333; } #playlistStatus { /* font-size: 12px; */ font-weight: 700; color: var(--accent); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; } /* #playlistStatus::before { content: '📅'; font-size: 10px; } */ .file-name { font-size: 10px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; text-align: center; font-family: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif; background: rgba(0,0,0,0.2); padding: 2px 6px; border-radius: 3px; border: 1px solid #333; } .file-name[data-status="ready"] { color: var(--accent); border-color: var(--accent); } .file-name[data-status="loading"] { color: #f0c040; border-color: #f0c040; } .file-name[data-status="offline"] { color: #ef5350; border-color: #ef5350; } [data-color-scheme="light"] .file-name[data-status="loading"] { color: inherit; border-color: #d4a000; } /* Speed & Timeframe labels */ .speed-control { display: flex; align-items: center; gap: 8px; } .speed-control span:first-child, .timeframe-selector span { color: #888; font-size: 12px; white-space: nowrap; } .speed-control input[type="range"] { width: 80px; min-width: 170px; } .speed-control input[type="number"] { width: 55px; min-width: 170px; } .settings-card .speed-control input[type="range"] { min-width: unset; flex: 1; } .settings-card .speed-control input[type="number"] { min-width: unset; width: 55px; } /* #ma1LengthInput { width: 46px; min-width: unset; padding: 4px 4px; font-size: 12px; text-align: center; } */ .timeframe-selector { display: flex; align-items: center; gap: 6px; } .timeframe-selector select { min-width: 170px;} /* Tooltip on titled buttons */ .playlist-controls button[title]:hover::before { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #222; color: #e0e0e0; padding: 4px 8px; border-radius: 4px; /* font-size: 11px; */ white-space: nowrap; z-index: 1000; border: 1px solid #444; box-shadow: 0 4px 12px rgba(0,0,0,0.3); margin-bottom: 5px; font-weight: 400; text-transform: none; letter-spacing: 0; } /* ─── Timeline ──────────────────────────────────────────── */ #info { display: flex; align-items: center; justify-content: space-between; width: 100%; /* font-size: 12px; */ color: #787b86; } .timeline-control { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: smaller; } .timeline-info { display: flex; justify-content: space-between; align-items: center; } .timeline-slider { width: 100%; height: 6px; border-radius: 3px; background: #2a2e39; outline: none; -webkit-appearance: none; appearance: none; } .timeline-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; transition: background 0.2s; } .timeline-slider::-webkit-slider-thumb:hover { background: #1e53e5; } .timeline-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; transition: background 0.2s; } .timeline-labels { display: flex; justify-content: space-between; /* font-size: 12px; */ color: #787b86; } #currentTimeDisplay { cursor: pointer; padding: 0px 4px; border-radius: 4px; /* transition: background 0.2s; */ /* font-size: 12px; */ } /* #currentTimeDisplay:hover { background: #2a2e39; } */ .time-input-container { display: none; gap: 8px; align-items: center; } .time-input-container.active { display: flex; } /* ─── Trading Panel ─────────────────────────────────────── */ .trading-panel { background: transparent; border-bottom: 1px solid #333; overflow-x: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 0; } .trading-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; gap: 12px; padding: 0 16px; } .trade-buttons { display: flex; gap: 10px; align-items: center; } .trading-stats { display: flex; gap: 20px; align-items: center; justify-content: flex-end; } .stat-item { display: flex; align-items: center; gap: 6px; } .stat-label { color: #888; font-size: 12px; } /* ─── Contract Slider ───────────────────────────────────── */ .contract-slider-container { display: flex; align-items: center; gap: 12px; width: 100%; } .contract-label { color: #888; font-size: 12px; white-space: nowrap; } .contract-slider-wrapper { flex: 1; display: flex; flex-direction: column; gap: 2px; } #contractSlider { -webkit-appearance: none; appearance: none; width: 100%; background: #333; height: 3px; border-radius: 2px; outline: none; transition: background 0.2s; } #contractSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); cursor: pointer; border: 2px solid #0a0a0a; box-shadow: 0 2px 8px rgba(255,240,0,0.4); transition: transform 0.2s, box-shadow 0.2s; } #contractSlider::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(255,240,0,0.6); } #contractSlider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); cursor: pointer; border: 2px solid #0a0a0a; box-shadow: 0 2px 8px rgba(255,240,0,0.4); } .contract-value-display { display: flex; flex-direction: column; align-items: center; gap: 1px; } #contractValue { font-size: 12px; color: var(--accent); font-family: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif; min-width: 30px; text-align: center; } .contract-ticks { display: flex; justify-content: space-between; width: 100%; padding: 0 8px; } .contract-ticks span { font-size: 9px; color: #555; width: 10px; text-align: center; position: relative; } .contract-ticks span::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 1px; height: 3px; background: #444; } /* ─── Positions ─────────────────────────────────────────── */ .open-positions { background: transparent; padding: 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.06); } .section-header { font-size: 12px; /* color: #666; */ text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } #pendingOrdersSection, #openPositions { padding: 8px 16px 10px; border-top: 1px solid rgba(255,255,255,0.06); } .positions-list { max-height: 220px; overflow-y: auto; } .positions-table { width: 100%; border-collapse: collapse; font-size: 11px; } .positions-table thead th { color: var(--accent); background: var(--bg-deep); backdrop-filter: blur(2px); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; text-align: left; } .positions-table tbody tr.position-item, .positions-table--history tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s ease-in, backdrop-filter 0.2s ease-in; } .positions-table tbody tr.position-item { cursor: context-menu; } .positions-table tbody tr.position-item:last-child, .positions-table--history tbody tr:last-child { border-bottom: none; } .positions-table tbody tr.position-item:hover, .positions-table--history tbody tr:hover { background: var(--bg-deep); backdrop-filter: blur(1px); } .positions-table td { padding: 5px 8px; white-space: nowrap; } .position-type-buy { color: #26a69a; } .position-type-sell { color: #ef5350; } .position-pnl-positive { color: #26a69a; text-align: right; } .position-pnl-negative { color: #ef5350; text-align: right; } .positions-table td[data-pips], .positions-table td[data-pnl] { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .positions-table:not(.positions-table--history) td:last-child { text-align: right; } .position-time { color: #888; } .position-actions { display: flex; gap: 8px; align-items: center; } /* ─── Trade History ─────────────────────────────────────── */ .trade-history { background: transparent; padding: 15px 20px; border-top: 1px solid #333; min-height: 250px; overflow-y: auto; } .trade-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; } .trade-stat-block { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } [data-color-scheme="light"] .trade-stat-block { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } .trade-stat-label { font-size: 10px; font-weight: bold; /* color: #888; */ text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .trade-stat-value { font-size: 15px; font-weight: 600; } .trade-pnl-positive { color: #26a69a; } .trade-pnl-negative { color: #ef5350; } /* ─── Context Menu ──────────────────────────────────────── */ .ctx-menu-item { padding: 8px 14px; font-size: 12px; cursor: pointer; color: #ccc; transition: background 0.15s; } .ctx-menu-item:hover { background: rgba(255,255,255,0.07); } .ctx-menu-item--danger { color: #ef5350; } .ctx-menu-item--danger:hover { background: rgba(239,83,80,0.12); } .ctx-menu-separator { border-top: 1px solid #2a2a2a; margin: 3px 0; } /* ─── Scrollbars ────────────────────────────────────────── */ .positions-list::-webkit-scrollbar, .trades-list::-webkit-scrollbar, .trade-history::-webkit-scrollbar { width: 6px; } .positions-list::-webkit-scrollbar-track, .trades-list::-webkit-scrollbar-track, .trade-history::-webkit-scrollbar-track { background: #1a1a1a; } .positions-list::-webkit-scrollbar-thumb, .trades-list::-webkit-scrollbar-thumb, .trade-history::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; } .positions-list::-webkit-scrollbar-thumb:hover, .trades-list::-webkit-scrollbar-thumb:hover, .trade-history::-webkit-scrollbar-thumb:hover { background: #555; } /* ─── Bar countdown visibility transitions ──────────────── */ .bar-countdown, .info-item:nth-child(2) { transition: opacity 0.3s ease, transform 0.3s ease; } .bar-countdown.hidden { opacity: 0; transform: scale(0.8); } .info-item:nth-child(2).hidden { opacity: 0; transform: translateX(-10px); } /* ─── Upload Overlay ────────────────────────────────────── */ .upload-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 1000; } .upload-overlay.hidden { display: none; } .upload-container { background: #1a1a1a; border: 2px solid #333; border-radius: 12px; padding: 40px; text-align: center; max-width: 500px; width: 90%; } .upload-container h2 { margin-bottom: 30px; color: #fff; font-size: 24px; } .upload-zone { border: 2px dashed #444; border-radius: 8px; padding: 40px; cursor: pointer; transition: all 0.3s; background: #0f0f0f; } .upload-zone:hover { border-color: var(--accent); background: #1a1a1a; } .upload-zone.drag-over { border-color: var(--accent); background: var(--accent-dragover); } .upload-zone svg { color: #888; margin-bottom: 20px; } .upload-zone p { color: #ccc; font-size: 16px; margin-bottom: 8px; } .upload-hint { color: #888 !important; font-size: 13px !important; } .loading-indicator { margin-top: 30px; } .spinner { width: 40px; height: 40px; border: 4px solid #333; border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px; } .loading-indicator p { color: #888; font-size: 14px; } /* ─── Connection Toast (speech bubble) ─────────────────── */ .connection-toast { position: absolute; top: calc(100% + 12px); left: 0; background: #1e1e1e; border: 1px solid #444; border-radius: 8px; padding: 7px 14px; font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.5); } /* Bubble tail pointing up toward the icon */ .connection-toast::before { content: ''; position: absolute; bottom: 100%; left: 12px; border: 6px solid transparent; border-bottom-color: #444; pointer-events: none; } .connection-toast::after { content: ''; position: absolute; bottom: 100%; left: 13px; border: 5px solid transparent; border-bottom-color: #1e1e1e; pointer-events: none; } .connection-toast.show { opacity: 1; } .connection-toast.connected { border-color: #33ff0044; color: #33ff00; background: #0d1a0d; } .connection-toast.connected::before { border-bottom-color: #33ff0044; } .connection-toast.connected::after { border-bottom-color: #0d1a0d; } .connection-toast.disconnected { border-color: #ef535044; color: #ef5350; background: #1a0d0d; } .connection-toast.disconnected::before { border-bottom-color: #ef535044; } .connection-toast.disconnected::after { border-bottom-color: #1a0d0d; } /* ─── Chart Legend ──────────────────────────────────────── */ #chartLegend { transition: all 0.3s ease; user-select: none; pointer-events: none; } #chartLegend:hover { background: rgba(15,15,15,0.95) !important; border-color: #444 !important; } /* ─── Animations ────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes candlePulse { 0% { box-shadow: 0 0 10px rgba(51,255,0,0.3); transform: translateX(-50%) scale(1); } 100% { box-shadow: 0 0 30px rgba(51,255,0,0.7); transform: translateX(-50%) scale(1.05); } } @keyframes candleComplete { 0% { box-shadow: 0 0 30px rgba(51,255,0,0.7); transform: translateX(-50%) scale(1.05); } 50% { box-shadow: 0 0 50px rgba(51,255,0,1); transform: translateX(-50%) scale(1.2); } 100% { box-shadow: 0 0 0 rgba(51,255,0,0); transform: translateX(-50%) scale(0); opacity: 0; } } @keyframes redCandlePulse { 0% { box-shadow: 0 0 10px rgba(233,30,99,0.3); transform: translateX(-50%) scale(1); } 100% { box-shadow: 0 0 30px rgba(233,30,99,0.7); transform: translateX(-50%) scale(1.05); } } @keyframes redCandleComplete { 0% { box-shadow: 0 0 30px rgba(233,30,99,0.7); transform: translateX(-50%) scale(1.05); } 50% { box-shadow: 0 0 50px rgba(233,30,99,1); transform: translateX(-50%) scale(1.2); } 100% { box-shadow: 0 0 0 rgba(233,30,99,0); transform: translateX(-50%) scale(0); opacity: 0; } } /* ─── Splash Screen ─────────────────────────────────────── */ .splash-overlay { position: fixed; inset: 0; /* background: #0a0a0aff !important; background-attachment: fixed; */ z-index: 10000; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 20px; animation: splashOverlayIn 0.4s ease forwards; transition: opacity 0.45s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease; backdrop-filter: blur(1px); } .splash-card { position: relative; background: #010101 url('./assets/images/background/papyrus-dark.png') repeat; background-attachment: fixed; background-attachment: fixed; border: 1px solid #2a2a2a; border-radius: 16px; width: 100%; max-width: 720px; box-shadow: 0 24px 80px rgba(0,0,0,0.8); overflow: hidden; animation: splashCardIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; } .splash-overlay.hidden { animation: none !important; opacity: 0; pointer-events: none; } .splash-overlay.no-blur { backdrop-filter: none; -webkit-backdrop-filter: none; } [data-color-scheme="light"] .splash-overlay.no-blur { backdrop-filter: none; -webkit-backdrop-filter: none; } @keyframes splashOverlayIn { from { opacity: 0; } to { opacity: 1; } } /* Large watermark behind card */ .splash-watermark { position: fixed; top: 50%; left: 50%; width: min(70vw, 70vh); pointer-events: none; user-select: none; animation: splashWatermarkIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; } @keyframes splashWatermarkIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-20deg); } to { opacity: 0.04; transform: translate(-50%, -50%) scale(1) rotate(0deg); } } @keyframes splashCardIn { from { opacity: 0; transform: translateY(48px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Card exit animation */ .splash-card.exiting { animation: splashCardOut 0.42s cubic-bezier(0.4, 0, 1, 1) forwards !important; } @keyframes splashCardOut { 0% { opacity: 1; transform: scale(1) translateY(0); } 35% { opacity: 1; transform: scale(1.025) translateY(-4px); } 100% { opacity: 0; transform: scale(0.88) translateY(-28px); } } /* Energy flash on exit */ .splash-flash { position: fixed; inset: 0; pointer-events: none; z-index: 10001; background: radial-gradient(ellipse at center, var(--accent-22) 0%, transparent 70%); animation: splashFlash 0.55s ease forwards; } @keyframes splashFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } } /* Button glow on fire */ .splash-enter-btn.firing { animation: splashBtnFire 0.35s ease forwards !important; } @keyframes splashBtnFire { 0% { box-shadow: 0 0 0px 0px #fff00000; } 50% { box-shadow: 0 0 36px 14px #fff000cc, 0 0 70px 28px #ffee0066; } 100% { box-shadow: 0 0 12px 4px #fff00066; } } /* Top accent line */ .splash-card::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--accent), #26a69a, var(--accent)); background-size: 200%; animation: splashGradient 4s linear infinite; } @keyframes splashGradient { 0% { background-position: 0% } 100% { background-position: 200% } } @keyframes splashFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .splash-header { display: flex; align-items: center; gap: 18px; padding: 28px 32px 20px; border-bottom: 1px solid #1e1e1e; animation: splashFadeUp 0.5s ease 0.28s both; } .splash-icon { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; transition: filter 0.6s ease; } .splash-icon.connected { filter: drop-shadow(0 0 6px rgba(255,255,0,0.55)) drop-shadow(0 0 14px rgba(255,255,0,0.3)); animation: splashLogoGlow 2s ease-in-out infinite; } @keyframes splashLogoGlow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255,255,0,0.45)) drop-shadow(0 0 12px rgba(255,255,0,0.25)); } 50% { filter: drop-shadow(0 0 9px rgba(255,255,0,0.70)) drop-shadow(0 0 20px rgba(255,255,0,0.40)); } } .splash-title { font-size: 20px; font-weight: 700; color: #e0e0e0; letter-spacing: 0.3px; } .splash-subtitle { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; } .splash-body { padding: 24px 32px; display: flex; flex-direction: column; gap: 24px; } /* Stagger body sections */ .splash-lore { animation: splashFadeUp 0.5s ease 0.40s both; } .splash-features { animation: splashFadeUp 0.5s ease 0.52s both; } .splash-form { animation: splashFadeUp 0.5s ease 0.62s both; } .splash-footer { animation: splashFadeUp 0.5s ease 0.72s both; } /* Lore / backstory */ .splash-lore { background: rgba(0,0,0,0.5); border: 1px solid #1e1e1e; border-left: 3px solid var(--accent-44); border-radius: 8px; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; } .splash-lore p { font-size: 12px; color: #888; line-height: 1.7; } .splash-lore strong { color: var(--accent); } .splash-lore em { color: var(--accent); font-style: normal; } /* Feature list */ .splash-features-title { font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .splash-features-table { width: 100%; border-collapse: collapse; font-size: 12px; } .splash-features-table td { padding: 5px 12px 5px 0; border-bottom: 1px solid #1e1e1e; vertical-align: middle; } .splash-features-table tr:last-child td { border-bottom: none; } .splash-features-table td:first-child { color: var(--accent); font-weight: 600; white-space: nowrap; padding-right: 20px; } .splash-features-table td:first-child::before { content: '▸'; color: var(--accent); font-size: 10px; margin-right: 7px; } .splash-features-table td:last-child { color: #555; } /* Form */ .splash-form { display: flex; flex-direction: column; gap: 14px; } .splash-form-row { display: flex; align-items: center; gap: 16px; width: 100%; margin: 5px 0; } .splash-form-row.heading { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; } .splash-form-row label { font-size: 12px; min-width: 140px; /* color: var(--accent); */ /* text-align: right; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; */ } /* .splash-form-row input { flex: 1; background: var(--bg-fade); border: none; border-radius: 0; color: var(--text-main, #e0e0e0); font-size: 14px; padding: 8px 12px; outline: none; text-align: center; transition: all 0.3s ease; backdrop-filter: blur(5px); -webkit-appearance: none; appearance: none; } */ /* .splash-form-row input:hover { background: var(--bg-fade-2); } .splash-form-row input:focus { background: var(--bg-fade-2); } */ .splash-form-row input::placeholder { color: #444; } #authTier { flex: 1; /* background: var(--bg-deep); */ /* border: none; */ /* border-radius: 0; */ /* color: #e0e0e0; */ /* font-size: 13px; padding: 8px 12px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; */ transition: background 0.2s; width: 100%; } /* #authTier:hover { background: var(--bg-deep); } #authTier:focus { background: var(--bg-deep); } #authTier option { background: var(--bg-deep); } .pw-field-wrap input { background: var(--bg-fade); border: none; border-radius: 0; outline: none; transition: all 0.2s ease; } */ /* .pw-field-wrap input:hover { background: var(--bg-fade-2); } .pw-field-wrap input:focus { background: var(--bg-fade-2); } */ .pw-strength-bar { margin-top: 2px; } .pw-field-wrap { flex: 1; display: flex; flex-direction: column; gap: 5px; position: relative; } .pw-field-wrap input { padding-right: 38px; width: 100%; box-sizing: border-box; } .pw-toggle-btn { position: absolute; right: 8px; top: 8px; background: none; border: none; color: #888; cursor: pointer; padding: 0; font-size: 15px; line-height: 1; transition: color 0.2s; } .pw-toggle-btn:hover { color: var(--accent); } .pw-strength-bar { display: flex; gap: 4px; height: 3px; } .pw-strength-bar span { flex: 1; border-radius: 2px; background: #333; transition: background 0.25s; } .pw-strength-bar.s1 span:nth-child(1) { background: #ef5350; } .pw-strength-bar.s2 span:nth-child(-n+2) { background: #f97316; } .pw-strength-bar.s3 span:nth-child(-n+3) { background: #f59e0b; } .pw-strength-bar.s4 span:nth-child(-n+4) { background: #66bb6a; } .pw-strength-bar.s5 span { background: var(--accent); } .pw-rules { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .pw-rules span { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: var(); border: 1px solid #333; color: #555; transition: color 0.2s, border-color 0.2s; } .pw-rules span.met { color: #66bb6a; border-color: #66bb6a44; } .splash-tooltip { position: absolute; top: calc(100% + 6px); left: 0; background: #1a0d0d; border: 1px solid #ef535066; color: #ef5350; font-size: 11px; padding: 5px 10px; border-radius: 5px; white-space: nowrap; z-index: 10; } .splash-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 12px; border: 5px solid transparent; border-bottom-color: #ef535066; } /* ── Wizard pages ─────────────────────────────────────── */ .splash-wizard-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 0; } .splash-wizard-dot { width: 7px; height: 7px; border-radius: 50%; background: #333; transition: background 0.3s, transform 0.3s; cursor: default; } .splash-wizard-dot.active { background: var(--accent); transform: scale(1.25); } /* Page containers */ .splash-page { display: none; } .splash-page.active { display: block; animation: splashPageIn 0.35s ease both; } .splash-page.exiting { animation: splashPageOut 0.25s ease forwards; pointer-events: none; } @keyframes splashPageIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } } @keyframes splashPageOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-22px); } } /* Compact body for auth page — no need for big scroll area */ .splash-body--auth { padding: 24px 32px 8px; gap: 0; } /* Wizard footer: back btn left, enter btn right */ .splash-footer--wizard, .splash-footer--auth { justify-content: space-between; gap: 10px; } /* ── Tier select ───────────────────────────────────────────── */ #authTier { flex: 1; background: transparent; /* border: 1px solid #2a2a2a; */ color: var(--accent); /* font-size: 12px; */ /* padding: 8px 10px; */ /* border-radius: 5px; */ cursor: pointer; transition: border-color 0.15s; } #authTier:focus { outline: none; border-color: var(--accent); } /* #authTier option.tier-option-developer { color: var(--accent); font-weight: 700; } */ /* [data-color-scheme="light"] #authTier { background: #fff; border-color: #ccc; color: #111; } */ #authTier option { background: #0a0a0a; } /* ── Pricing panel ─────────────────────────────────────────── */ .splash-pricing-panel { border: 1px solid #2a2a2a; border-top: 2px solid var(--accent); border-radius: 6px; padding: 16px; margin-top: 12px; animation: splashFadeUp 0.3s ease both; } .splash-pricing-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .splash-pricing-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: rgba(255,240,0,0.1); border: 1px solid rgba(255,240,0,0.25); color: var(--accent); } .splash-pricing-badge--standard { background: rgba(234,179,8,0.1); border-color: rgba(234,179,8,0.3); color: #eab308; } .splash-pricing-badge--premium { background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.3); color: #f97316; } .splash-pricing-badge--elite { background: rgba(244,63,94,0.1); border-color: rgba(244,63,94,0.3); color: #f43f5e; } .splash-pricing-price { font-size: 18px; font-weight: 700; color: #eee; } .splash-pricing-features { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; } .splash-pricing-features li { font-size: 12px; color: #888; padding-left: 14px; position: relative; } .splash-pricing-features li::before { content: '✓'; position: absolute; left: 0; color: #4caf50; font-size: 11px; } .splash-pricing-note { font-size: 11px; color: #555; line-height: 1.5; border-top: 1px solid #1e1e1e; padding-top: 10px; } /* Payment coming soon block */ .splash-payment-soon-title { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; margin-bottom: 6px; } .splash-payment-soon-body { font-size: 11px; color: #666; line-height: 1.6; } .splash-payment-soon-body strong { color: #aaa; } [data-color-scheme="light"] .splash-pricing-panel { border-color: #ddd; border-top-color: #2563eb; } [data-color-scheme="light"] .splash-pricing-price { color: #111; } [data-color-scheme="light"] .splash-pricing-note { color: #999; border-top-color: #ddd; } [data-color-scheme="light"] .splash-pricing-features li { color: #555; } [data-color-scheme="light"] #authTier { border-color: #ccc; color: #111; } [data-color-scheme="light"] #authTier option { background: #f0f0f0; } /* ── Plans tab panel ────────────────────────────────────── */ .splash-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0 8px; animation: splashFadeUp 0.25s ease both; } .splash-plan-card { border: 1px solid #2a2a2a; border-top-width: 2px; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; min-height: 180px; } .splash-plan-card--standard { border-top-color: #eab308; } .splash-plan-card--premium { border-top-color: #f97316; } .splash-plan-card--elite { border-top-color: #f43f5e; } .splash-plan-card--free { border-top-color: #444; } .splash-plan-name { font-size: 12px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; } .splash-plan-card--standard .splash-plan-name { color: #eab308; } .splash-plan-card--premium .splash-plan-name { color: #f97316; } .splash-plan-card--elite .splash-plan-name { color: #f43f5e; } .splash-plan-card--free .splash-plan-name { color: var(--accent) } .splash-plan-price { font-size: 14px; font-weight: 600; color: #ccc; margin-bottom: 2px; } .splash-plan-price span { font-size: 11px; font-weight: 400; color: #555; } .splash-plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; } .splash-plan-features li { font-size: 11px; line-height: 1.4; } .splash-plan-select-btn { margin-top: auto; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; /* color: #555; background: none; */ border: 1px solid #2a2a2a; border-radius: 4px; padding: 5px 8px; cursor: pointer; transition: color 0.15s, border-color 0.15s; width: 100%; } .splash-plan-select-btn:hover { color: var(--accent) !important; border-color: var(--accent) !important; transform: none !important; box-shadow: none !important; } [data-color-scheme="light"] .splash-plan-card { border-color: #ddd; } [data-color-scheme="light"] .splash-plan-price { color: #222; } [data-color-scheme="light"] .splash-plan-features li { color: #666; } [data-color-scheme="light"] .splash-plan-select-btn { border-color: #ccc; color: #999; } .splash-trial-btn { background: none; border: 1px solid #2a4a2a; color: #4a8a4a; padding: 8px 18px; border-radius: 6px; font-size: 12px; cursor: pointer; letter-spacing: 0.5px; transition: border-color 0.15s, color 0.15s; margin-right: auto; } .splash-trial-btn:hover { border-color: #3a7a3a; color: #6aaa6a; } [data-color-scheme="light"] .splash-trial-btn { border-color: #bde; color: #5a8; } [data-color-scheme="light"] .splash-trial-btn:hover { border-color: #8bc; color: #3a7; } .splash-back-btn { background: none; border: 1px solid #333; color: #666; font-size: 12px; padding: 8px 18px; border-radius: 5px; cursor: pointer; letter-spacing: 0.5px; transition: border-color 0.15s, color 0.15s; } .splash-back-btn:hover { border-color: #555; color: #aaa; } [data-color-scheme="light"] .splash-wizard-dot { background: #ccc; } [data-color-scheme="light"] .splash-wizard-dot.active { background: #2563eb; } [data-color-scheme="light"] .splash-back-btn { border-color: #ccc; color: #999; } [data-color-scheme="light"] .splash-back-btn:hover { border-color: #aaa; color: #555; } /* Auth tabs */ .splash-auth-tabs { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid #2a2a2a; } .splash-auth-tab { background: none; border: none; border-bottom: 2px solid transparent; color: #555; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; padding: 6px 18px 8px; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; } .splash-auth-tab:hover { color: #aaa; transform: none !important; } .splash-auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* Tier row with compare-plans button */ .auth-tier-row { display: flex; align-items: center; gap: 6px; flex: 1; } .auth-tier-row #authTier { flex: 1; } .compare-plans-btn { position: relative; flex-shrink: 0; background: none; border: 1px solid #333; border-radius: 4px; color: #666; cursor: pointer; font-size: 14px; padding: 4px 7px; line-height: 1; transition: color 0.15s, border-color 0.15s; } .compare-plans-btn:hover { color: var(--accent); border-color: var(--accent); } [data-color-scheme="light"] .compare-plans-btn { border-color: #ccc; color: #888; } /* Auth error message */ .splash-auth-error { font-size: 11px; color: #ef5350; background: rgba(239,83,80,0.08); border: 1px solid rgba(239,83,80,0.25); border-radius: 4px; padding: 7px 12px; margin-top: 10px; } /* Divider between auth and session fields */ .splash-auth-divider { border: none; border-top: 1px solid #1e1e1e; margin: 16px 0 14px; } /* Auth status banner — top of page 2 */ .splash-auth-status { display: flex; align-items: center; justify-content: space-between; background: rgba(255,240,0,0.06); border: 1px solid rgba(255,240,0,0.2); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 14px; animation: splashFadeUp 0.4s ease both; } .splash-auth-status-left { display: flex; align-items: center; gap: 10px; } .splash-auth-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 6px rgba(76,175,80,0.8); flex-shrink: 0; } .splash-auth-status-title { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; } .splash-auth-status-user { font-size: 13px; color: #aaa; } .splash-auth-status-user strong { color: #eee; } .splash-logout-btn { background: none; border: 1px solid #333; color: #666; font-size: 11px; padding: 4px 12px; border-radius: 4px; cursor: pointer; letter-spacing: 0.5px; flex-shrink: 0; transition: border-color 0.15s, color 0.15s; } .splash-logout-btn:hover { border-color: #ef5350; color: #ef5350; } [data-color-scheme="light"] .splash-auth-tab { color: #999; } [data-color-scheme="light"] .splash-auth-tab.active { color: #2563eb; border-bottom-color: #2563eb; } [data-color-scheme="light"] .splash-auth-divider { border-top-color: #ddd; } [data-color-scheme="light"] .splash-auth-tabs { border-bottom-color: #ddd; } [data-color-scheme="light"] .splash-auth-status { background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.2); border-left-color: #2563eb; } [data-color-scheme="light"] .splash-auth-status-title { color: #2563eb; } [data-color-scheme="light"] .splash-auth-status-user { color: #555; } [data-color-scheme="light"] .splash-auth-status-user strong { color: #111; } [data-color-scheme="light"] .splash-logout-btn { border-color: #ccc; color: #999; } /* Footer */ .splash-footer { padding: 20px 32px 28px; display: flex; justify-content: center; border-top: 1px solid #1e1e1e; } .splash-enter-btn { padding: 10px 36px !important; font-size: 13px !important; letter-spacing: 1px; text-transform: uppercase; background: linear-gradient(135deg, #ffff44 0%, #fff000 40%, #e6d000 100%) !important; color: #ffffff !important; border-color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.4); box-shadow: 0 0 8px var(--accent-44), 0 2px 4px rgba(0,0,0,0.4); transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease !important; } .splash-enter-btn:hover { background: linear-gradient(135deg, #ffff66 0%, #fff000 40%, #d4c000 100%) !important; animation: splashBtnPulse 1.2s ease-in-out infinite !important; transform: scale(1.06); } @keyframes splashBtnPulse { 0%, 100% { box-shadow: 0 0 6px 2px var(--accent-22), 0 0 12px 4px var(--accent-44); } 50% { box-shadow: 0 0 10px 3px var(--accent-44), 0 0 18px 6px var(--accent-66); } } /* ─── Settings Overlay (F2) ─────────────────────────────── */ .settings-card { max-width: 480px; width: 100%; } .settings-card .splash-header { flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; } .settings-card .splash-header .help-close-btn { position: absolute; top: 20px; right: 24px; align-items: center; color: #ff0000; background: linear-gradient(to top, #00000078 0%, #3a1a1a78 100%) !important; } .settings-card .splash-logo { width: 120px; height: auto; } .settings-card .settings-body .settings-section:first-child { padding-top: 10px; padding-bottom: 10px; } .settings-card .splash-form-row label { text-align: left; margin: 0px 10px; } .settings-tabs { display: flex; border-bottom: 1px solid #2a2a2a; padding: 0 20px; gap: 2px; flex-shrink: 0; } .settings-tab { background: none; border: none; border-bottom: 2px solid transparent; color: #666; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; padding: 10px 14px 8px; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; font-family: inherit; border-radius: 0 0 5px 5px; } button.settings-tab:hover { color: var(--accent); transform: none; box-shadow: none; background: none; border-color: transparent; } .settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .settings-tab-panel { display: none; width: 100%; } .settings-tab-panel.active { display: block; width: 100%; } .settings-body { padding: 0 28px; overflow-y: auto; max-height: 60vh; scrollbar-width: thin; scrollbar-color: #333 transparent; transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .settings-acc-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 20px; width: 100%; } /* ── Colours tab layout ───────────────────────────────────────────────────── */ .clr-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); padding-bottom: 6px; border-bottom: 1px solid #222; margin-top: 4px; } .clr-section-label:first-child { margin-top: 0; } .clr-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 10px; } .clr-row > :last-child { display: flex; justify-content: center; width: 120px; } .clr-row-label { font-size: 12px; /* color: var(--text-muted, #888); */ } .clr-select { background: var(--bg-deep); border: 1px solid #444; border-radius: 4px; color: var(--text); font-size: 11px; padding: 3px 6px; cursor: pointer; font-family: inherit; min-width: 100px; } .clr-swatch-header-row { margin-bottom: -4px; } .clr-swatch-group { display: flex; gap: 8px; align-items: center; } .clr-swatch-col-label { font-size: 10px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.5px; width: 24px; text-align: center; display: inline-block; } .clr-swatch-group .htc-cp-swatch-wrap, .clr-swatch-group .htc-cp-swatch { width: 24px !important; height: 24px !important; } /* Chart theme toggle switch */ /* ─── Settings behaviour table ──────────────────────────── */ .settings-table { width: 100%; border-collapse: collapse; } .settings-table td { padding: 6px 0; vertical-align: middle; font-size: 12px; } .settings-table td:first-child { width: 60%; } .settings-table td:last-child { width: 40%; } .settings-table-toggle { text-align: center; } /* #settingsBalance { background: revert; border: revert; color: revert; border-radius: revert; } */ .settings-unit { color: #888; font-size: 11px; } /* ─── Settings toggle row ────────────────────────────────── */ .settings-toggle-row { display: flex; align-items: center; width: 100%; gap: 16px; } .settings-toggle-row > label:first-child { font-size: 12px; cursor: pointer; } .settings-toggle-wrap { flex: 1; display: flex; justify-content: center; } /* ─── Settings toggle switch ────────────────────────────── */ .settings-toggle { position: relative; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; } .settings-toggle input { display: none; } .settings-toggle-track { position: relative; width: 40px; height: 20px; background: #6b1a1a; border-radius: 10px; border: 1px solid #4a1010; transition: background 0.25s, border-color 0.25s; } .settings-toggle input:checked ~ .settings-toggle-track { background: #1a6b2a; border-color: #104a1a; } .settings-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #e05555; transition: left 0.25s, background 0.25s; } .settings-toggle input:checked ~ .settings-toggle-track .settings-toggle-thumb { left: 22px; background: #4caf6e; } .chart-theme-toggle { position: relative; cursor: pointer; display: inline-flex; align-items: center; } .chart-theme-toggle input { display: none; } .chart-theme-track { position: relative; width: 56px; height: 24px; background: var(--bg-deep); border-radius: 12px; border: 1px solid #333; display: flex; align-items: center; transition: background 0.25s; } .chart-theme-toggle input:checked ~ .chart-theme-track { background: #fff; border-color: #ccc; } .chart-theme-thumb { position: absolute; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); transition: left 0.25s, background 0.25s; z-index: 1; } .chart-theme-toggle input:checked ~ .chart-theme-track .chart-theme-thumb { left: 35px; background: #555; } .chart-theme-label-dark, .chart-theme-label-light { position: absolute; font-size: 16px; line-height: 1; pointer-events: none; color: #e0e0e0; } .chart-theme-label-dark { left: 26px; color: #333; } .chart-theme-label-light { left: 6px; opacity: 0; transition: opacity 0.2s; color: #555; } .chart-theme-toggle input:checked ~ .chart-theme-track .chart-theme-label-dark { opacity: 0; } .chart-theme-toggle input:checked ~ .chart-theme-track .chart-theme-label-light { opacity: 1; } .settings-section { display: flex; flex-direction: column; gap: 10px; } .settings-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); border-bottom: 1px solid #222; padding-bottom: 5px; } .settings-stats-row { display: flex; gap: 12px; } .settings-stat { flex: 1; background: var(--bg-deep); border: 1px solid #2a2a2a; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; } .settings-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #777; } .settings-stat-value { font-size: 13px; font-weight: 700; color: #ccc; font-family: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif; } .settings-stat-btn { width: 100%; margin-bottom: 8px; /* background: linear-gradient(to top, #00000078 0%, #1a1a0078 100%) !important; */ border: 1px solid #444 !important; color: var(--text-muted, #888) !important; /* box-shadow: none !important; */ font-size: 11px; padding: 6px 14px; border-radius: 5px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .settings-stat-btn:hover { border-color: var(--accent); color: var(--accent); } .full-stats-overlay { z-index: 10100; } .full-stats-card { max-width: 680px; max-height: 85vh; display: flex; flex-direction: column; } .full-stats-card .splash-header { flex-direction: row; align-items: center; text-align: left; justify-content: space-between; } .full-stats-card .splash-header .help-close-btn { position: static; color: #ef5350; background: linear-gradient(to top, #00000078 0%, #3a1a1a78 100%) !important; border-color: #5a2020; flex-shrink: 0; } .full-stats-body { overflow-y: auto; padding: 16px 20px 20px; flex: 1; } .full-stats-pagination { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; } .fsp-left, .fsp-right { display: flex; align-items: center; gap: 6px; } .fsp-info { font-size: 11px; color: #666; } .fsp-label { font-size: 11px; color: #555; } .fsp-btn { background: #1a1a1a; border: 1px solid #333; border-radius: 4px; color: #888; font-size: 11px; padding: 3px 8px; cursor: pointer; font-family: inherit; } .fsp-btn:hover { border-color: var(--accent); color: var(--accent); } .fsp-size-active { border-color: var(--accent) !important; color: var(--accent) !important; } #settingsUserInfo { padding:8px 10px; background:var(--bg2,rgba(255,255,255,0.05)); border-radius:6px; display:flex; justify-content:space-between; align-items:center; } .settings-reset-btn { width: 100%; /* margin-bottom: 10px; */ background: linear-gradient(to top, #00000078 0%, #3a1a1a78 100%) !important; border: 1px solid #5a2020; color: #ef5350; font-size: 11px; padding: 6px 14px; border-radius: 5px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .settings-reset-btn:hover { background: linear-gradient(to bottom, #3a1a1a78, #2a101078); border-color: #ef5350; } .settings-reset-confirm { font-size: 11px; color: #aaa; display: flex; align-items: center; /* gap: 10px; */ flex-wrap: wrap; } .settings-confirm-yes { color: #ef5350; cursor: pointer; font-weight: 700; text-decoration: underline; } .settings-confirm-yes:hover { color: #ff6b6b; } .settings-confirm-no { color: #666; cursor: pointer; text-decoration: underline; } .settings-confirm-no:hover { color: #aaa; } .settings-footer { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; } .settings-action-end-session { grid-column: 1 / -1; } .settings-action-btn { flex: 1; padding: 10px 20px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 6px; cursor: pointer; background: linear-gradient(to bottom, #33333378 0%, #00000078 100%); border: 1px solid #444; color: #e0e0e0; transition: all 0.2s; backdrop-filter: blur(1px); position: relative; overflow: hidden; white-space: nowrap; } .settings-action-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s; pointer-events: none; } .settings-action-btn:hover::after { left: 100%; } .settings-action-btn:hover { background: linear-gradient(to bottom, #3a3a3aaa 0%, #2a2a2a33 100%); border-color: #555; transform: translateY(-1px); box-shadow: 0 0 5px var(--accent-66); color: #fff; } #settingsContinueBtn { border-color: #1a5a1a; color: #4caf50; background: linear-gradient(to bottom, #1a2a1a78, #101e1078); } #settingsContinueBtn:hover { border-color: #4caf50; color: #80e080; box-shadow: 0 0 10px #4caf5088, 0 0 20px #4caf5033; text-shadow: 0 0 8px #4caf5088, 0 0 16px #4caf5044; transform: translateY(-1px); } .settings-action-reset { border-color: #5a2020; color: #ef5350; background: linear-gradient(to bottom, #2a1a1a78, #1e101078); } .settings-action-reset:hover { border-color: #ef5350; color: #ff8080; box-shadow: 0 0 10px #ef535088, 0 0 20px #ef535033 !important; text-shadow: 0 0 8px #ef535088, 0 0 16px #ef535044; transform: translateY(-1px); } .settings-action-end-session:hover { border-color: var(--accent); color: var(--accent); } /* ─── AutoPlay Countdown Toast ──────────────────────────── */ .autoplay-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9500; background: var(--bg-deep); border: 1px solid var(--accent-66, #fff00066); border-radius: 8px; padding: 10px 18px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--accent, #fff000); box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 16px var(--accent-22, rgba(255,170,0,0.15)); animation: welcomeFadeIn 0.3s ease both; white-space: nowrap; } .autoplay-toast-cancel { background: none; border: 1px solid var(--accent-44, #fff00055); border-radius: 4px; color: #888; font-size: 11px; padding: 3px 10px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .autoplay-toast-cancel:hover { color: var(--accent, #e0e0e0); border-color: var(--accent-66, #888); } [data-color-scheme="light"] .autoplay-toast { box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 16px var(--accent-22); } [data-color-scheme="light"] .autoplay-toast-cancel { color: #444; } /* ─── Welcome Popup ─────────────────────────────────────── */ #welcomePopup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9000; animation: welcomeFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; /* background: url('./assets/images/background/papyrus.png') !important; */ } #welcomePopup.dismissing { animation: welcomeFadeOut 0.4s ease forwards; } @keyframes welcomeFadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes welcomeFadeOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.94); } } .welcome-popup-inner { display: flex; align-items: center; gap: 18px; background: linear-gradient(to bottom, #23232378 0%, #00000078 100%); backdrop-filter: blur(1px); border: 1px solid var(--border-color, #2a2a2a); border-top: 2px solid var(--accent, #fff000); border-radius: 12px; padding: 22px 26px; box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 32px var(--accent-22, rgba(255,170,0,0.1)); min-width: 420px; max-width: 560px; } .welcome-popup-icon { width: 48px; height: 48px; flex-shrink: 0; opacity: 0.85; } .welcome-popup-body { flex: 1; display: flex; flex-direction: column; gap: 6px; } .welcome-popup-title { font-size: 17px; font-weight: 700; color: var(--primary-text-color, #e0e0e0); } .welcome-popup-msg { font-size: 14px; color: var(--secondary-text-color, #888); line-height: 1.6; } .welcome-popup-msg strong { color: var(--accent, #fff000); } .welcome-popup-close { background: none; border: none; color: var(--secondary-text-color, #888); font-size: 18px; cursor: pointer; /* padding: 4px; */ /* line-height: 1; */ /* flex-shrink: 0; */ transition: color 0.15s; } .welcome-popup-close:hover { color: var(--primary-text-color, #ccc); } [data-color-scheme="light"] .welcome-popup-inner { background: linear-gradient(to bottom, #aaaaaa78 0%, #ffffff78 100%); backdrop-filter: blur(2px); border-color: rgba(200,200,200,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 20px var(--accent-22); } [data-color-scheme="light"] .welcome-popup-title { color: #111; } [data-color-scheme="light"] .welcome-popup-msg { color: #555; } [data-color-scheme="light"] .welcome-popup-close { color: #999; } [data-color-scheme="light"] .welcome-popup-close:hover { color: #333; } .welcome-popup-plan { font-size: 12px; color: var(--secondary-text-color, #888); margin-bottom: 8px; } .welcome-popup-plan strong { color: var(--accent, #fff000); } @media (max-width: 480px) { #welcomePopup { left: 12px; right: 12px; top: 50%; transform: translateY(-50%); width: auto; } @keyframes welcomeFadeIn { from { opacity: 0; transform: translateY(-50%) scale(0.94); } to { opacity: 1; transform: translateY(-50%) scale(1); } } @keyframes welcomeFadeOut { from { opacity: 1; transform: translateY(-50%) scale(1); } to { opacity: 0; transform: translateY(-50%) scale(0.94); } } .welcome-popup-inner { min-width: unset; max-width: unset; width: 100%; padding: 16px; gap: 12px; flex-wrap: wrap; } .welcome-popup-icon { width: 36px; height: 36px; } .welcome-popup-title { font-size: 15px; } } #welcomeTierLabel { color: var(--accent-tier, var(--accent)); } .welcome-popup-features { list-style: none; padding: 0; margin: 0 0 10px 0; display: flex; flex-direction: column; gap: 3px; } .welcome-popup-features li { display: flex; gap: 8px; font-size: 12px; } .wf-label { color: var(--secondary-text-color, #666); min-width: 90px; } .wf-value { color: var(--primary-text-color, #ddd); font-weight: 500; } [data-color-scheme="light"] .wf-label { color: #888; } [data-color-scheme="light"] .wf-value { color: #222; } [data-color-scheme="light"] .welcome-popup-plan { color: #555; } /* ─── Help Overlay ──────────────────────────────────────── */ .help-overlay { display: none; } .help-overlay.visible { display: flex; animation: splashOverlayIn 0.3s ease forwards; } .help-card { max-width: 820px !important; animation: splashCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important; } .help-close-btn { background: none; border: 1px solid #333; color: #666; font-size: 20px; line-height: 1; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.15s, border-color 0.15s; padding: 0; } .help-close-btn:hover { color: #e0e0e0; border-color: #555; background: #1e1e1e; } .help-body { padding: 0 0 8px; display: flex; flex-direction: column; gap: 0; max-height: 65vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; } .help-body .accordion-header { padding-left: 32px; padding-right: 32px; background-color: rgb(5, 5, 5); } .help-body .accordion-body .help-section { padding: 16px 32px; border-bottom: none; } .help-body::-webkit-scrollbar { width: 5px; } .help-body::-webkit-scrollbar-track { background: transparent; } .help-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } .help-section { padding: 20px 0; border-bottom: 1px solid #1a1a1a; display: flex; flex-direction: column; gap: 14px; } [data-color-scheme="light"] .help-body .accordion-header { background-color: #e8e8e8; border-color: rgba(0,0,0,0.1); } [data-color-scheme="light"] .help-body .accordion-header:hover { background-color: #d8d8d8; box-shadow: 0px 0px 10px var(--accent); } [data-color-scheme="light"] .help-body .accordion-header.open { color: var(--accent); border-left: 2px solid var(--accent); } [data-color-scheme="light"] .help-body .accordion-section { border-color: #d0d0d0; } [data-color-scheme="light"] .help-body::-webkit-scrollbar-thumb { background: #bbb; } [data-color-scheme="light"] .help-section { border-bottom-color: #e0e0e0; } .help-section:last-child { border-bottom: none; } .help-section-title { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 2px; } .help-tool { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 2px solid #1e1e1e; } .help-tool-row { display: flex; align-items: center; gap: 10px; } .help-tool-name { font-size: 12px; font-weight: 600; color: #888; } .help-kbd { font-size: 10px; font-family: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif; background: #1a1a1a; border: 1px solid #333; border-bottom: 2px solid #444; color: #888; padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .help-tool-desc { font-size: 12px; line-height: 1.6; } .help-tool-desc strong { font-weight: 700; } [data-color-scheme="light"] .help-kbd { background: #f0f0f0; border: 1px solid #bbb; border-bottom: 2px solid #999; color: #333; } [data-color-scheme="light"] .help-tool { border-left-color: #ccc; } [data-color-scheme="light"] .help-tool-name { color: inherit; } [data-color-scheme="light"] .help-tool-desc { color: inherit; } [data-color-scheme="light"] .help-tool-desc strong { color: inherit; } [data-color-scheme="light"] .help-shortcuts-table td { color: inherit; border-bottom-color: #e0e0e0; } [data-color-scheme="light"] .help-shortcuts-table thead th { border-bottom-color: #ccc; } [data-color-scheme="light"] .accordion-header { color: inherit; } .help-tip { font-size: 11px; color: #26a69a; line-height: 1.5; opacity: 0.85; } .help-shortcuts-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .help-shortcuts-table { width: 100%; border-collapse: collapse; font-size: 12px; } .help-shortcuts-table--wide { grid-column: 1 / -1; } .help-shortcuts-table thead th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); padding: 0 0 8px 0; border-bottom: 1px solid #2a2a2a; } .help-shortcuts-table tbody tr:hover td { background: #141414; } [data-color-scheme="light"] .help-shortcuts-table tbody tr:hover td { background: #d8d8d8; } .help-shortcuts-table td { padding: 5px 10px 5px 0; border-bottom: 1px solid #1a1a1a; white-space: nowrap; } .help-shortcuts-table td:last-child { width: 100%; } /* ─── Landscape orientation ─────────────────────────────── */ @media (orientation: landscape) and (max-height: 600px) { .chart-container { min-height: 75vh; } .accordion-section { flex-shrink: 0; } .info-bar { padding: 4px 12px; font-size: 11px; } #settingsLogo { display: none; } .ctx-popup, .ctx-popup--order { width: auto; max-width: 260px; } } /* ─── Responsive ────────────────────────────────────────── */ /* Large desktop (1600px+) — slightly larger chrome */ @media (min-width: 1600px) { .title { font-size: 20px; } .price, .current-time, .bar-countdown { font-size: 18px; } .accordion-header { font-size: 12px; padding: 4px 10px; } button { font-size: 14px; } #playPauseBtn, #resetBtn, #prevFileBtn, #nextFileBtn, #toggleMa1Btn, #toggleMa2Btn, #toggleAllMaBtn, .playlist-controls .trade-btn, .trade-btn { font-size: 14px; padding: 10px 36px; min-width: 170px; } #datePickerTrigger { height: 37px; font-size: 14px; min-width: 170px; } #contractValue { font-size: 15px; } } /* Standard desktop — 1025px–1599px (base styles, no overrides needed) */ /* Compact desktop / small laptop — 1024px and below */ @media (max-width: 1024px) { .header { padding: 10px 16px; } .title { font-size: 15px; } .price, .current-time, .bar-countdown { font-size: 14px; } .speed-control input[type="range"] { width: 80px; } .speed-control input[type="number"] { width: 50px; } .file-name { max-width: 120px; } #playPauseBtn, #resetBtn, #prevFileBtn, #nextFileBtn, #toggleMa1Btn, #toggleAllMaBtn, .playlist-controls .trade-btn, .trade-btn { font-size: 12px; padding: 10px 20px; min-width: 110px; } #ma1LengthInput { width: 44px; } #datePickerTrigger { height: 38px; font-size: 12px;} #contractValue { font-size: 12px; } .contract-ticks span { font-size: 8px; } } /* Tablet — 768px and below */ @media (max-width: 768px) { .header { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px 10px; align-items: center; } .title { font-size: 13px; flex: 1; min-width: 0; } .price-display-inline { flex-wrap: nowrap; gap: 8px; justify-content: flex-end; flex-shrink: 0; } .controls-bar, .trading-controls { grid-template-columns: 1fr; gap: 8px; } .ctrl-section { justify-content: center; } .ctrl-right { justify-content: center; } .playlist-controls { justify-content: center; width: 100%; } #playPauseBtn, #resetBtn, #prevFileBtn, #nextFileBtn, #toggleMa1Btn, #toggleAllMaBtn, .playlist-controls .trade-btn, .trade-btn { font-size: 12px; padding: 10px 16px; min-width: 90px; } #ma1LengthInput { width: 40px; } #datePickerTrigger { height: 36px; font-size: 12px; } .accordion-header { font-size: 11px; padding: 4px 10px; } .speed-control input[type="range"] { width: 80px; } .speed-control input[type="number"] { width: 46px; } .stat-item { font-size: 11px; } } /* Mobile — 480px and below */ @media (max-width: 480px) { .header { padding: 8px; } .title span { display: none; } /* hide title text, keep icon */ .price-display-inline { gap: 8px; } .info-label { font-size: 11px; } .price, .current-time, .bar-countdown { font-size: 13px; } .controls-bar, .trading-controls { grid-template-columns: 1fr; padding: 6px 8px; gap: 6px; } .playlist-controls { padding: 6px 8px; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; } #playPauseBtn, #resetBtn, #prevFileBtn, #nextFileBtn, #toggleMa1Btn, #toggleMa2Btn, #toggleAllMaBtn, .playlist-controls .trade-btn, .trade-btn { font-size: 11px; padding: 8px 12px; min-width: 60px; letter-spacing: 0.5px; } #datePickerTrigger { height: 34px; font-size: 11px; width: 100%; } .accordion-header { font-size: 10px; padding: 4px 10px; } .trade-buttons { flex-wrap: wrap; gap: 6px; } .contract-slider-container { flex-direction: column; align-items: flex-start; gap: 4px; } .contract-slider-wrapper { width: 100%; } .contract-ticks { display: none; } #contractValue { font-size: 11px; } .stat-item { font-size: 10px; } .trading-stats { gap: 8px; } .file-name { max-width: 100px; font-size: 10px; } #playlistStatus { font-size: 11px; } /* Playback controls — mobile layout */ .ctrl-right .playlist-controls { flex-direction: column; align-items: stretch; gap: 6px; } .speed-control { width: 100%; gap: 6px; } .speed-control input[type="range"] { flex: 1; min-width: unset; width: auto; } .speed-control input[type="number"] { min-width: unset; width: 48px; } .timeframe-selector { width: 100%; justify-content: flex-start; } .timeframe-selector select { flex: 1; min-width: unset; } /* Center nav — give playlist-info room to breathe */ .ctrl-center .controls { width: 100%; justify-content: space-between; } .playlist-info { flex: 1; text-align: center; } } /* ─── Overlay / Popup Responsive ───────────────────────── */ /* Tablet — 768px and below */ @media (max-width: 768px) { .splash-overlay { padding: 12px; align-items: center; } .splash-card { border-radius: 12px; } .splash-header { padding: 20px 20px 16px; gap: 12px; } .splash-icon { width: 40px; height: 40px; } .splash-title { font-size: 17px; } .splash-subtitle { font-size: 11px; } .splash-body { padding: 16px 20px; gap: 16px; } .splash-form-row { flex-direction: column; align-items: stretch; gap: 6px; } .splash-form-row label { min-width: unset; text-align: left; } .splash-form-row input { width: 100%; box-sizing: border-box; } .splash-form-row .pw-field-wrap { width: 100%; } .splash-footer { padding: 16px 20px 20px; } .splash-footer--auth .splash-enter-btn, .splash-footer--auth .splash-trial-btn { flex: 1; text-align: center; } /* Settings — keep label+input rows inline */ .settings-card .splash-form-row { flex-direction: row; align-items: center; } .settings-card .splash-logo { width: 120px; height: auto; } .settings-tabs { padding: 0 12px; } .settings-body { padding: 0 16px; } .settings-stats-row { flex-wrap: wrap; } .settings-stat { min-width: calc(50% - 6px); } .settings-footer { padding: 12px 16px 16px; } /* Legend */ .chart-legend { font-size: 12px; padding: 6px 10px; width: 130px; min-width: unset; left: 10px; top: 10px; } .legend-price { font-size: 14px !important; } .legend-change, .legend-changepct { font-size: 12px !important; } .legend-table { font-size: 12px !important; margin-top: 4px; } .legend-lbl { font-size: 10px; } /* .legend-table tr { line-height: 1.4; } */ /* Context menu / popup — centered on mobile */ .ctx-menu, .ctx-popup { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; min-width: unset; max-height: 80vh; overflow-y: auto; } .ctx-menu { width: 60vw; max-width: 260px; } .ctx-menu-item { padding: 9px 10px; font-size: 11px; } .ctx-popup { width: 70vw; max-width: 300px; } .ctx-popup--order { width: 65vw; max-width: 280px; } /* Help */ .help-card { max-width: 100% !important; } .help-body { max-height: 55vh; } .help-body .accordion-header { padding-left: 20px; padding-right: 20px; } .help-body .accordion-body .help-section { padding: 12px 20px; } .splash-features-table { font-size: 11px; } .splash-features-table td:first-child { padding-right: 12px; } } /* Mobile — 480px and below */ @media (max-width: 480px) { .splash-overlay { padding: 8px; } .splash-card { border-radius: 10px; } .splash-header { padding: 16px 16px 12px; gap: 10px; } .splash-icon { width: 32px; height: 32px; } .splash-title { font-size: 15px; } .splash-subtitle { font-size: 10px; letter-spacing: 0.5px; } .splash-auth-status { align-items: flex-start; } .splash-auth-status-left { flex: 1; min-width: 0; } #splashLoggedInUser { display: block; margin-top: 2px; } .splash-body { padding: 12px 16px; gap: 12px; } .splash-lore { padding: 12px 14px; } .splash-lore p { font-size: 11px; } .splash-features { display: none; } /* hide feature table on very small screens */ .splash-footer { padding: 12px 16px 16px; } /* Settings */ .settings-card .splash-logo { width: 90px; height: auto; } .settings-card .splash-header { padding: 14px 16px 12px; } .settings-card .splash-header .help-close-btn { top: 14px; right: 16px; } .settings-tabs { padding: 0 8px; } .settings-tab { padding: 8px 10px 7px; font-size: 10px; } .settings-body { padding: 0 12px; } .settings-stats-row { flex-direction: column; } .settings-stat { min-width: unset; } /* Help */ .help-body { max-height: 60vh; } .help-body .accordion-header { padding-left: 16px; padding-right: 16px; } .help-body .accordion-body .help-section { padding: 10px 16px; } } /* ── Chart legend ────────────────────────────────────────────────────────── */ .chart-legend { position: absolute; left: 12px; top: 12px; right: auto; bottom: auto; z-index: 100; padding: 10px 15px; border-radius: 8px; font-family: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif; font-size: 12px; line-height: 1.5; border: 1px solid #333; box-shadow: 0 0 10px rgba(0,0,0,0.8); min-width: 140px; width: 150px; backdrop-filter: blur(5px); } .legend-header { display: flex; align-items: center; margin-bottom: 6px; } .legend-change { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; } .legend-changepct { font-size: 13px; font-weight: 800; } .legend-table { border-collapse: collapse; width: 100%; table-layout: fixed; } .legend-lbl { color: #555; font-weight: 600; padding-right: 2px; overflow: hidden; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; width: 25%; } .legend-val { font-weight: 700; overflow: hidden; width: 25%; } .legend-val:last-child { padding-right: 0; } /* .legend-table tr { line-height: 1.6; } */ .legend-countdown-row { font-size: 11px; color: #888; cursor: default; position: relative; display: inline-block; } .legend-countdown { color: var(--accent); font-weight: 700; } .legend-countdown-row[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: #1a1a1a; color: #ccc; font-size: 10px; white-space: nowrap; padding: 3px 7px; border-radius: 4px; border: 1px solid #333; pointer-events: none; z-index: 10000; } /* ── Quick Trading Panel ─────────────────────────────────────────────────── */ .quick-trading-panel { position: absolute; z-index: 100; padding: 10px 12px; border-radius: 8px; font-family: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif; font-size: 12px; min-width: 170px; width: 190px; border: 1px solid #333; box-shadow: 0 0 10px rgba(0,0,0,0.8); backdrop-filter: blur(5px); display: flex; flex-direction: column; gap: 5px; } [data-color-scheme="light"] .quick-trading-panel { border-color: #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.15); } .qtp-price { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 2px; } .qtp-row { display: flex; align-items: center; gap: 6px; } .qtp-field { flex: 1; } .qtp-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #888; white-space: nowrap; } .qtp-val { font-size: 11px; font-weight: 700; min-width: 12px; text-align: right; } .qtp-slider { flex: 1; accent-color: var(--accent, #fff000); height: 3px; } .qtp-market-btns { gap: 4px; } .qtp-btn { flex: 1; border-radius: 5px; font-weight: 700; font-size: 11px; cursor: pointer; padding: 4px 5px; text-align: center; background: var(--bg-deep, #111); border: 1px solid; } .qtp-buy { border-color: #26a69a; color: #26a69a; } .qtp-sell { border-color: #ef5350; color: #ef5350; } .qtp-flat { border-color: #444; color: #555; } .qtp-btn:not([disabled]):hover { filter: brightness(1.3); } .qtp-divider { height: 1px; background: #333; margin: 2px 0; } [data-color-scheme="light"] .qtp-divider { background: #ccc; } [data-color-scheme="light"] .qtp-lbl { color: #666; } .quick-trading-panel .popup-input-sl, .quick-trading-panel .popup-input-tp, .ctx-popup .popup-input-sl, .ctx-popup .popup-input-tp { background: transparent; color: inherit; } [data-color-scheme="light"] .quick-trading-panel .popup-input-sl, [data-color-scheme="light"] .quick-trading-panel .popup-input-tp, [data-color-scheme="light"] .ctx-popup .popup-input-sl, [data-color-scheme="light"] .ctx-popup .popup-input-tp { color: #111; } /* prevent light-mode global button rule from overriding qtp-btn inside ctx-popup */ .ctx-popup .qtp-btn { background: transparent !important; } /* ── Context menus & popups ──────────────────────────────────────────────── */ /* Right-click context menu shell */ .ctx-menu { position: fixed; z-index: 9999; background: var(--bg-deep); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid #333; border-top: 2px solid var(--accent, #fff000); border-radius: 6px; padding: 4px 0; min-width: 150px; box-shadow: 0 4px 16px rgba(0,0,0,0.6); font-size: 12px; } .ctx-menu-item { padding: 7px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 4px; color: #ccc; } .ctx-menu-item:hover { background: var(--accent-22); color: #fff; } /* Floating context popup (colour picker, order entry, manage position) */ .ctx-popup { position: fixed; z-index: 9999; background: var(--bg-deep); border: 1px solid #444; border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); font-size: 13px; min-width: 200px; backdrop-filter: blur(5px); } .ctx-popup--sm { padding: 10px 12px; gap: 6px; min-width: 170px; } .ctx-popup--order { padding: 7px 9px; gap: 4px; min-width: 145px; font-size: 11px; } .ctx-popup--manage { gap: 8px; min-width: 220px; border-color: #555; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.6); } /* Popup internals */ .popup-row { display: flex; align-items: center; gap: 10px; } .popup-row-label { width: 70px; } .popup-title { font-size: 12px; font-weight: 600; margin-bottom: 2px; } .popup-divider { height: 1px; background: #333; margin: 2px 0; } .popup-price-label { font-size: 10px; letter-spacing: 0.5px; } .popup-hint { font-size: 10px; color: #888; text-align: center; letter-spacing: 0.3px; } /* Full-width bordered action button (used in right-click menus) */ .ctx-menu-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 4px 8px; background: var(--bg-deep); border: 1px solid #444; border-radius: 5px; font-weight: 600; font-size: 11px; cursor: pointer; text-align: left; } .ctx-menu-btn:hover { border-color: #666; } /* SL/TP confirm table */ .sltp-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; } .sltp-table td { padding: 4px 8px; } .sltp-table td:first-child { color: #666; } .sltp-table td:last-child { font-weight: 600; } .sltp-table tr.divider { border-top: 1px solid #333; } /* Position manage popup inputs/labels */ .popup-label-sl { font-size: 10px; color: #ef5350; margin-bottom: 3px; font-weight: 600; } .popup-label-tp { font-size: 10px; color: #26a69a; margin-bottom: 3px; font-weight: 600; } .popup-input-sl { width: 100%; background: var(--bg-deep); color: #eee; border: 1px solid #ef5350; border-radius: 4px; padding: 3px 5px; font-size: 11px; font-weight: 600; box-sizing: border-box; } .popup-input-tp { width: 100%; background: var(--bg-deep); color: #eee; border: 1px solid #26a69a; border-radius: 4px; padding: 3px 5px; font-size: 11px; font-weight: 600; box-sizing: border-box; } /* Autoplay checkbox row inside dialogs */ .autoplay-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; } /* Table column sort — replaces inline style="cursor:pointer;" on th[data-col] */ th[data-col] { cursor: pointer; } /* Trade/position table coloured cells */ .td-bear { color: #ef5350; } .td-bull { color: #26a69a; } /* ── Shared JS-generated component classes ───────────────────────────────── */ /* Modal overlay: layout only — background set via JS for light/dark */ .htc-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); background: rgba(0,0,0,0.75); } [data-color-scheme="light"] .htc-overlay { background: rgba(150,150,150,0.85); } /* Dialog box */ .htc-dialog { border-radius: 8px; padding: 28px 36px; text-align: center; min-width: 360px; background: rgba(150,150,150,0.85) url(./assets/images/background/papyrus.png) repeat; /* background-attachment: fixed; */ backdrop-filter: blur(5px); } .htc-dialog--wide { min-width: 380px; max-width: 460px; padding: 32px 40px; } /* Dialog content sections — color set via inline style (theme-dependent) */ .dialog-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .dialog-heading { font-size: 19px; font-weight: 700; margin-bottom: 8px; } .dialog-body { font-size: 13px; margin-bottom: 24px; line-height: 1.6; } .dialog-hint { font-size: 11px; color: #555; } [data-color-scheme="light"] .dialog-hint { color: #888; } /* ── Shared dialog theming ── */ .htc-dialog { background: #00000078 url(assets/images/background/papyrus-dark.png) repeat; border: 1px solid #444; border-top: 2px solid var(--accent); box-shadow: 0 8px 32px rgba(0,0,0,0.6); } [data-color-scheme="light"] .htc-dialog { background: #fafafa78 url(./assets/images/background/papyrus.png) repeat; border: 1px solid #ccc; border-top: 2px solid var(--accent); box-shadow: 0 8px 32px rgba(0,0,0,0.15); } .dialog-label { color: var(--accent); } .dialog-heading { color: #fff; } [data-color-scheme="light"] .dialog-heading { color: #111; } .dialog-body { color: #888; } [data-color-scheme="light"] .dialog-body { color: #555; } /* ── NYO dialog ── */ .htc-dialog--nyo #nyoReminder { color: var(--accent); } .nyo-chk-label { color: #aaa; } [data-color-scheme="light"] .nyo-chk-label { color: #555; } #nyoAutoPlayChk { accent-color: var(--accent); } .nyo-confirm-btn { color: var(--accent); } /* ── EOD dialog ── */ .eod-reset-btn { border-color: #ef535066 !important; color: #ef5350 !important; } /* ── Bank Holiday dialog ── */ .htc-dialog--bank-holiday .dialog-label, .htc-dialog--bank-holiday .dialog-heading { color: var(--accent); text-shadow: 0 0 5px #000; } .htc-dialog--bank-holiday { max-width: 440px; border: 1px solid #444; border-top: 2px solid var(--accent); background: var(--bg-deep); backdrop-filter: blur(5px); box-shadow: 0 8px 32px rgba(0,0,0,0.6); } .bank-holiday-strong { color: var(--accent); text-shadow: 0 0 5px #000; } .bank-holiday-ok-btn { background: var(--accent) !important; color: #000; text-shadow: 0 0 5px #000; } .dialog-actions { display: flex; justify-content: center; gap: 12px; } /* "Account Blown" dialog — always red, no theming */ .dialog-blown-label { color: #ef5350; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; } .dialog-blown-heading { color: #ef5350; font-size: 24px; font-weight: 900; letter-spacing: 2px; margin-bottom: 10px; text-shadow: 0 0 20px rgba(239,83,80,0.5); } /* Solid danger / accent action buttons used in blown + limit dialogs */ .btn-danger-solid { background: #ef5350; border: none; color: #fff; padding: 9px 24px; border-radius: 5px; font-weight: 700; font-size: 13px; cursor: pointer; letter-spacing: 0.5px; } .btn-danger-solid:hover { background: #ff6b6b; } /* Ghost small button (e.g. EOD "Jump To" calendar toggle) */ .btn-ghost-sm { background: transparent; /* border: 1px solid #444; */ color: #aaa; font-size: 11px; padding: 4px 14px; border-radius: 4px; cursor: pointer; letter-spacing: 0.5px; } .btn-ghost-sm:hover { border-color: #666; color: #ccc; } /* Tier badge — structural only, color/bg/border injected inline (per-tier) */ .htc-tier-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; } /* Trial / upgrade nudge label used beside locked settings */ .paid-badge { margin-left: 8px; font-size: 10px; color: #f59e0b; font-weight: 600; vertical-align: middle; } /* Toast notification — structure only, bg/border injected inline (per type) */ .htc-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); border-radius: 6px; padding: 10px 18px; display: flex; align-items: center; gap: 10px; font-size: 13px; z-index: 99999; box-shadow: 0 4px 16px rgba(0,0,0,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap; pointer-events: auto; cursor: default; font-family: "Candara", "Calibri", "Segoe UI", "Optima", sans-serif; } .htc-toast--info { --toast-glow: rgba(255,240,0,0.5); animation: toastGlow 0.9s ease-in-out infinite; } .htc-toast--success { --toast-glow: rgba(38,166,154,0.5); animation: toastGlow 0.9s ease-in-out infinite; } .htc-toast--error { --toast-glow: rgba(239,83,80,0.5); animation: toastGlow 0.9s ease-in-out infinite; } .htc-toast--right { left: auto; } [data-color-scheme="light"] .htc-toast--info { --toast-glow: rgba(37,99,235,0.5); } @keyframes toastGlow { 0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0px var(--toast-glow); } 50% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 4px var(--toast-glow); } } /* ── Color Picker ─────────────────────────────────────────────────────────── */ .htc-colorpicker { position: fixed; z-index: 999999; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #1e1e1e; border: 1px solid #444; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); user-select: none; } .htc-cp-sv { position: relative; width: 200px; height: 200px; border-radius: 4px; overflow: hidden; cursor: crosshair; } .htc-cp-sv canvas { display: block; width: 100%; height: 100%; } .htc-cp-cursor { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); transform: translate(-50%, -50%); pointer-events: none; } .htc-cp-strip { position: relative; width: 200px; height: 16px; border-radius: 8px; overflow: hidden; cursor: ew-resize; } .htc-cp-strip canvas { display: block; width: 100%; height: 100%; } .htc-cp-thumb { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); transform: translate(-50%, -50%); pointer-events: none; } .htc-cp-row { display: flex; align-items: center; gap: 8px; } .htc-cp-preview { width: 32px; height: 28px; border-radius: 4px; border: 1px solid #555; flex-shrink: 0; } .htc-cp-hex { width: 0 !important; flex: 1; min-width: 0 !important; background: #111; border: 1px solid #444; border-radius: 4px; color: #eee; font-size: 12px; font-family: monospace; padding: 4px 6px; outline: none; } .htc-cp-hex:focus { border-color: #888; } .htc-cp-swatch-wrap { display: inline-block; /* width: 28px; height: 28px; */ position: relative; vertical-align: middle; } .htc-cp-eyedropper { width: 28px; height: 28px; border-radius: 4px; border: 1px solid #555; background: #111; color: #eee; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; transition: background 0.2s, border-color 0.2s; } .htc-cp-eyedropper:hover { background: #222; border-color: #888; } .htc-cp-confirm { width: 100%; margin-top: 8px; padding: 7px 0; background: linear-gradient(135deg, #ffff44, #fff000); border: 1px solid #fff000; border-radius: 6px; color: #000; font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; } .htc-cp-confirm:hover { background: linear-gradient(135deg, #ffff66, #ffe800); } [data-color-scheme="light"] .htc-cp-confirm { border-color: #cca800; } .htc-cp-discard-popup { position: fixed; z-index: 100002; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 8px; min-width: 160px; } .htc-cp-discard-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #888; } .htc-cp-discard-swatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); flex-shrink: 0; } .htc-cp-discard-arrow { color: #555; } .htc-cp-discard-hex { color: #aaa; font-family: monospace; } .htc-cp-discard-hex--old { color: #555; font-family: monospace; } .htc-cp-discard-btns { display: flex; gap: 6px; } .htc-cp-discard-btn { flex: 1; padding: 5px 0; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid #333; } .htc-cp-discard-keep { background: linear-gradient(135deg, #ffff44, #fff000); border-color: #fff000; color: #000; } .htc-cp-discard-keep:hover { background: linear-gradient(135deg, #ffff66, #ffe800); } .htc-cp-discard-discard { background: #222; border-color: #444; color: #aaa; } .htc-cp-discard-discard:hover { background: #2a2a2a; color: #fff; border-color: #666; } [data-color-scheme="light"] .htc-cp-discard-popup { background: #f0f0f0; border-color: #bbb; box-shadow: 0 8px 32px rgba(0,0,0,0.2); } [data-color-scheme="light"] .htc-cp-discard-discard { background: #e0e0e0; border-color: #bbb; color: #444; } [data-color-scheme="light"] .htc-cp-discard-discard:hover { background: #d0d0d0; color: #000; } .htc-cp-swatch { width: 28px; height: 28px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); cursor: pointer; padding: 0; display: block; }