:root { --bg: #0b0c10; --panel: #131419; --panel-2: #1a1c23; --border: #232631; --text: #d7d9de; --text-dim: #7c818f; --green: #26c281; --red: #e5484d; --accent: #4c8bf5; --amber: #e0a32e; --font-ui: "Inter", system-ui, sans-serif; /* СВЕЧИ — СВОИ ПЕРЕМЕННЫЕ, отдельно от акцентов интерфейса. Раньше свеча красилась тем же зелёным/красным, что кнопки и подписи, и подобрать её под фон отдельно было нельзя: делаешь свечу читаемее — плывёт весь интерфейс. Теперь тело, фитиль и объём настраиваются на схему. --vol-opacity: на светлых фонах полупрозрачные столбики объёма исчезают, на чёрном наоборот слепят, поэтому прозрачность тоже своя у каждой схемы. */ /* ГОРИЗОНТАЛЬНЫЙ ОБЪЁМ (профиль по ценам). Отдельный цвет, а не серый текст: первая версия рисовалась цветом подписей при прозрачности 0.3 и на тёмном фоне была практически не видна — полосы терялись за свечами. */ --vol-profile: #8d97ad; --vol-profile-opacity: 0.3; --candle-up: #26c281; --candle-down: #e5484d; --wick-up: #2ad18a; --wick-down: #ff5c61; --vol-opacity: 0.35; --font-mono: "JetBrains Mono", "Consolas", monospace; } /* ---------- ЦВЕТОВЫЕ СХЕМЫ ---------- Всё оформление построено на переменных выше, и свечи графика тоже (var(--green)/var(--red) в renderCandles) — поэтому схема меняет и интерфейс, и графики одним переключением, без правок кода. Правило подбора: сначала читаемость свечей и текста на фоне, потом красота. В каждой схеме зелёный и красный отличаются НЕ только тоном, но и светлотой — иначе при дальтонизме и на дешёвом мониторе свечи сливаются. На светлой схеме они темнее фона, на тёмных — светлее. Схема хранится в localStorage (cs_theme) и ставится атрибутом data-theme на ещё до отрисовки (inline-скрипт в шаблонах), чтобы не мигало. */ /* СРЕДНЯЯ — сумеречная: чистая темнота режет глаза, белое слишком ярко. */ /* ЦВЕТОВАЯ СХЕМА ДЛЯ НАТИВНЫХ ЭЛЕМЕНТОВ. Выпадающие списки, скроллбары и чекбоксы рисует сам браузер, и без этого свойства он берёт СИСТЕМНУЮ тему — на тёмном интерфейсе список таймфреймов открывался белым полем со светлым текстом. Одно объявление на корень чинит их все разом. */ html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dim"] { --vol-profile: #9aa6c0; --vol-profile-opacity: 0.3; /* сумеречный фон #1c1f26: берём чуть более сочные тона, иначе свеча сливается с серо-синим */ --candle-up: #3ddc97; --candle-down: #ff6166; --wick-up: #55e6ad; --wick-down: #ff8085; --vol-opacity: 0.32; --bg: #1c1f26; --panel: #242833; --panel-2: #2c3140; --border: #39404f; --text: #dfe3ea; --text-dim: #98a0b0; --green: #35d18f; --red: #f0575c; --accent: #5f9bff; --amber: #eab54a; } /* ГЛУБОКАЯ СИНЯЯ — темнее и контрастнее классической, заметнее на ярком свете. */ html[data-theme="midnight"] { --vol-profile: #7f8fc4; --vol-profile-opacity: 0.3; /* почти чёрный синий фон: свечи светлее и холоднее, фитили ярче тел — на мелком масштабе видно именно фитили */ --candle-up: #19e08f; --candle-down: #ff5a6a; --wick-up: #58f0b4; --wick-down: #ff8a94; --vol-opacity: 0.30; --bg: #070a14; --panel: #0e1424; --panel-2: #151d31; --border: #222c44; --text: #e4e8f2; --text-dim: #8792ab; --green: #21d38a; --red: #ff5a5f; --accent: #5b8cff; --amber: #f0b73f; } /* ГРАФИТ — нейтральная тёмно-серая, без синевы: спокойная для долгой работы. */ html[data-theme="graphite"] { --vol-profile: #9d9d9d; --vol-profile-opacity: 0.3; /* нейтральный серый фон и «спокойные» свечи: приглушены нарочно, чтобы часами не звенели в глазах, но светлее фона — читаются */ --candle-up: #58bd8b; --candle-down: #dc6a6e; --wick-up: #74d3a3; --wick-down: #ee8a8d; --vol-opacity: 0.28; --bg: #121212; --panel: #1b1b1b; --panel-2: #232323; --border: #333333; --text: #dcdcdc; --text-dim: #8a8a8a; --green: #4caf7d; --red: #d1585c; --accent: #6f9dd8; --amber: #cf9b3f; } /* МАКСИМАЛЬНЫЙ КОНТРАСТ — чёрный фон, яркие цвета: для плохих мониторов и работы при прямом свете, где обычная тёмная «замыливается». */ html[data-theme="contrast"] { --vol-profile: #c8c8c8; --vol-profile-opacity: 0.3; /* чистый чёрный: максимально яркие тела и ещё ярче фитили; объём делаем заметно прозрачнее, иначе полоса слепит */ --candle-up: #00ff88; --candle-down: #ff2b40; --wick-up: #6bffbe; --wick-down: #ff7480; --vol-opacity: 0.22; --bg: #000000; --panel: #0a0a0a; --panel-2: #141414; --border: #2e2e2e; --text: #ffffff; --text-dim: #9e9e9e; --green: #00e676; --red: #ff3b3b; --accent: #4dabff; --amber: #ffc107; } /* СЕРАЯ — дневная, но не белая: мягкий серый фон вместо белизны, которая слепит в тёмной комнате. Свечи те же насыщенные, что в светлой, но чуть светлее — на сером они не «дырявят» фон. */ html[data-theme="gray"] { --vol-profile: #6d7688; --vol-profile-opacity: 0.3; --bg: #d9dce1; --panel: #e8eaee; --panel-2: #dfe2e8; --border: #bfc5cf; --text: #22262e; --text-dim: #5c6472; --green: #14804f; --red: #bf2f34; --accent: #2f6fd0; --amber: #a06c14; --candle-up: #13905a; --candle-down: #cf3a3f; --wick-up: #0e6f45; --wick-down: #a82c31; --vol-opacity: 0.40; } /* МОНОХРОМНАЯ — цвета нет вообще, направление читается СВЕТЛОТОЙ: рост — светлое тело, падение — тёмное с явным контуром. Так торговые терминалы печатали графики до цветных мониторов, и это единственная схема, которая одинаково читается при любой форме дальтонизма. Акцент оставлен серо-синим ровно один — им подсвечивается то, на что надо смотреть (выделение, курсор). */ html[data-theme="mono"] { --vol-profile: #a2a2ac; --vol-profile-opacity: 0.3; --bg: #101012; --panel: #17171a; --panel-2: #1f1f23; --border: #333338; --text: #e6e6e8; --text-dim: #8b8b93; --green: #d8d8dc; --red: #6f6f78; --accent: #8fa4c4; --amber: #b9b9c0; --candle-up: #ececed; --candle-down: #5c5c66; --wick-up: #ffffff; --wick-down: #8a8a94; --vol-opacity: 0.30; } /* СВЕТЛАЯ. Зелёный и красный здесь ТЕМНЕЕ фона — светлые оттенки на белом не читаются вовсе (#26c281 на белом почти исчезает). */ html[data-theme="light"] { --vol-profile: #78829a; --vol-profile-opacity: 0.3; /* на белом фоне СВЕТЛЫЕ свечи не видны вовсе — берём насыщенные тёмные, фитиль темнее тела (тонкая линия на белом теряется быстрее толстой), а объём делаем плотнее, иначе столбиков не видно */ --candle-up: #0f8f5b; --candle-down: #cc2f36; --wick-up: #0b7048; --wick-down: #a5252b; --vol-opacity: 0.45; --bg: #f4f6f9; --panel: #ffffff; --panel-2: #eef1f6; --border: #d3d9e3; --text: #1a1f2b; --text-dim: #5f6b7f; --green: #0f8f5b; --red: #cc2f36; --accent: #2563eb; --amber: #b4781a; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 13px; overflow: hidden; } /* ---------- Верхняя панель ---------- */ .topbar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border); } .topbar .brand { font-weight: 700; letter-spacing: 0.3px; color: var(--text); margin-right: 8px; white-space: nowrap; } .topbar nav { display: flex; gap: 4px; margin-right: auto; } .topbar nav a { color: var(--text-dim); text-decoration: none; padding: 6px 12px; border-radius: 6px; font-size: 13px; } .topbar nav a.active { color: var(--text); background: var(--panel-2); } .topbar nav a:hover { color: var(--text); } .topbar-controls { display: flex; align-items: center; gap: 8px; } .focus-ticker { font-weight: 700; font-size: 13px; color: var(--text); font-family: var(--font-mono); } .back-btn { margin-left: 4px; } .grid-pager { display: flex; align-items: center; gap: 4px; } .grid-pager .btn { padding: 7px 9px; } .grid-page-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); min-width: 54px; text-align: center; white-space: nowrap; } .btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: 6px; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--accent); color: #fff; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: #3b78e0; } select.btn { appearance: none; } /* ============================================================ Скринер: фиксированная сетка графиков + сайдбар со списком монет. Никакого перетаскивания окон — оно остаётся только конструктору на отдельной странице. Здесь всё статично, без отступов вокруг графиков: ячейки разделены однопиксельной линией (gap-трюк). ============================================================ */ .screener-wrap { display: flex; height: calc(100vh - 48px); overflow: hidden; } .chart-area { flex: 1; min-width: 0; overflow: hidden; } .chart-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); grid-template-rows: repeat(var(--rows, 3), 1fr); gap: 1px; background: var(--border); } .chart-grid.focus-mode { grid-template-columns: 1fr; grid-template-rows: 1fr; } .chart-cell { background: var(--bg); display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; } .cell-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--panel-2); border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 12px; } .cell-head .c-ticker { font-weight: 700; } .cell-head .c-chg { font-family: var(--font-mono); font-size: 11.5px; } .cell-head .c-chg.up { color: var(--green); } .cell-head .c-chg.down { color: var(--red); } .cell-head .c-price, .cell-head .c-natr, .cell-head .c-vol, .cell-head .c-trades { font-family: var(--font-mono); font-size: 11.5px; color: #fff; margin-left: 8px !important; } .cell-head .live-badge { margin-left: auto; font-size: 9.5px; color: var(--amber); cursor: pointer; white-space: nowrap; padding: 1px 7px; border: 1px solid var(--amber); border-radius: 999px; user-select: none; } .cell-head .live-badge:hover { background: rgba(224,163,46,0.15); } .cell-body { flex: 1; position: relative; overflow: hidden; cursor: crosshair; } .cell-body svg { width: 100%; height: 100%; display: block; } /* ---------- Тулбар инструментов рисования (слева посередине графика) ---------- */ .draw-toolbar { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; z-index: 5; background: rgba(19, 20, 25, 0.75); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 6px; padding: 3px; } .draw-btn { width: 1.6em; height: 1.6em; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-dim); font-size: 1em; line-height: 1; cursor: pointer; padding: 0; user-select: none; } .draw-btn:hover { color: var(--text); border-color: var(--accent); background: rgba(255, 255, 255, 0.06); } .draw-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); } .draw-btn.draw-ruler-hint { cursor: default; } .draw-btn.draw-clear:hover { color: var(--red); border-color: var(--red); } /* ---------- Разделитель ширины сайдбара ---------- */ .resizer { width: 5px; flex-shrink: 0; cursor: col-resize; background: var(--border); } .resizer:hover, .resizer:active { background: var(--accent); } /* ---------- Сайдбар со списком монет ---------- */ .sidebar { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--panel); overflow: hidden; } .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .coin-table-wrap { flex: 1; /* Список монет не должен схлопываться в ноль: под ним ДВЕ растягиваемые панели (алгоритмы и импульсы), и вместе они легко съедали всю высоту сайдбара — таблица исчезала совсем. Минимум оставляет несколько строк видимыми при любых размерах панелей. */ min-height: 120px; overflow: auto; /* тонкий скроллбар в стиле сайта, не системный серый */ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .coin-table-wrap::-webkit-scrollbar { width: 9px; height: 9px; } .coin-table-wrap::-webkit-scrollbar-track { background: transparent; } .coin-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } .coin-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; } .coin-table-wrap::-webkit-scrollbar-corner { background: transparent; } .coin-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; table-layout: fixed; } .coin-table th, .coin-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coin-table thead th { position: sticky; top: 0; background: var(--panel-2); color: var(--text-dim); font-family: var(--font-ui); font-weight: 500; text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 11px; } .coin-table thead th:first-child { text-align: left; } .coin-table tbody td { text-align: right; padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); } .coin-table tbody td:first-child { text-align: left; font-family: var(--font-ui); font-weight: 600; } .coin-table tbody tr:hover { background: var(--panel-2); cursor: pointer; } .coin-table tbody tr.is-active { background: rgba(255, 255, 255, 0.07); box-shadow: inset 3px 0 0 0 var(--text-dim); } .coin-table tbody tr.is-active:hover { background: rgba(255, 255, 255, 0.11); } .coin-table tbody tr.is-active td:first-child { color: var(--text); font-weight: 700; } /* ---------- Монета подходит под алгоритм с включённым "Скринером" ---------- */ .coin-table tbody tr.algo-match { box-shadow: inset 3px 0 0 0 var(--amber); } .coin-table tbody tr.algo-match td:first-child { color: var(--amber); } .coin-table tbody tr.algo-match.is-active { /* и сейчас показана на графике, и подходит под алгоритм — оба сигнала видно одновременно */ background: rgba(224, 163, 46, 0.10); } .cell-head.algo-match { box-shadow: inset 0 -2px 0 0 var(--amber); } .cell-head.algo-match .c-ticker { color: var(--amber); } /* ---------- ТОКЕНИЗИРОВАННЫЕ АКЦИИ ---------- Помечаем и в списке монет, и в шапке графика: SNDK или CBRS внешне ничем не отличались от обычной монеты, хотя торгуются они по своим правилам (биржевые сессии, гэпы на открытии). ТОЛЬКО ЗНАЧОК, ЦВЕТ ТИКЕРА НЕ ТРОГАЕМ — сам текст остаётся как у всех монет: цвет строки уже несёт другой смысл (подсветка активной, открытой в сетке), и перекрашивать тикер значило бы спорить с ней. Ширины значок почти не стоит: тикеры акций короткие (MU, XAU, SNDK) — длинные названия, которые обрезаются в колонке, это криптотокены. */ .col-ticker.is-stock::after, .cell-head .c-ticker.is-stock::after { content: "А"; margin-left: 4px; padding: 0 3px; border-radius: 3px; background: rgba(183, 155, 255, 0.18); color: #b79bff; font-size: 8.5px; font-weight: 700; font-family: var(--font-ui); vertical-align: middle; } /* Сырьё (металлы/нефть/газ) — золотой значок «С», отдельно от лилового «А» акций */ .col-ticker.is-commodity::after, .cell-head .c-ticker.is-commodity::after, .result-ticker.is-commodity::after { content: "С"; margin-left: 4px; padding: 0 3px; border-radius: 3px; background: rgba(224, 179, 65, 0.18); color: #e0b341; font-size: 8.5px; font-weight: 700; font-family: var(--font-ui); vertical-align: middle; } /* крупная плотность (≥ DENS_HIGHLIGHT_USD, см. density.js) — выделяем размер янтарным и жирным (!important — перебиваем цвет размера по умолчанию) */ .result-size.dens-size-big { color: #f5a623 !important; font-weight: 700; } /* и для акций в карте плотности (там тикер — .result-ticker) */ .result-ticker.is-stock::after { content: "А"; margin-left: 4px; padding: 0 3px; border-radius: 3px; background: rgba(183, 155, 255, 0.18); color: #b79bff; font-size: 8.5px; font-weight: 700; font-family: var(--font-ui); vertical-align: middle; } /* В карте плотности тикер — flex-контейнер (значок биржи, значок рынка, текст), поэтому значок «А»/«С» тоже становится flex-элементом и по умолчанию СЖИМАЕМ. На узкой колонке он схлопывался в ноль, и у длинных тикеров (SKHYNIX, GOOGL) пометки просто не было видно, хотя класс на строке стоял. Запрещаем сжатие: пусть лучше обрежется хвост названия — что это акция, важнее. */ .result-row .result-ticker::after { flex: 0 0 auto; } /* ...а сжимается вместо него САМО НАЗВАНИЕ монеты: голым текстовым узлом (как было) многоточие не работает — text-overflow применим только к элементу, поэтому название завёрнуто в свой span (см. densityRowInnerHTML). Теперь длинный тикер обрезается многоточием, а значки биржи/рынка и пометка акции остаются на месте при любой ширине колонки. */ .result-row .result-ticker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up { color: var(--green); } .down { color: var(--red); } .warn { color: var(--amber); } .coin-table thead th[data-key] { cursor: pointer; user-select: none; } .coin-table thead th[data-key]:hover { color: var(--text); } .coin-table thead th .arrow { font-size: 9px; color: var(--accent); } /* ---------- ручки изменения ширины колонок (тащить за правый край заголовка) ---------- */ .col-resizer { position: absolute; right: -2px; top: 0; bottom: 0; width: 7px; cursor: col-resize; user-select: none; touch-action: none; } .col-resizer::after { content: ""; position: absolute; right: 3px; top: 15%; bottom: 15%; width: 1px; background: var(--border); } .col-resizer:hover::after, .col-resizer.resizing::after { background: var(--accent); width: 2px; right: 2.5px; } .coin-search { width: 100%; padding: 6px 8px; margin: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; flex-shrink: 0; } .coin-search:focus { outline: none; border-color: var(--accent); } /* ---------- Пикер размера сетки (наведением, как Insert Table) ---------- */ .gp-wrap { position: relative; } /* ---------- индикатор здоровья данных в шапке (см. /api/health) ---------- Цвет точки — весь смысл: зелёная «всё принимается», жёлтая «часть данных отстаёт», красная «приёма нет». Подпись рядом меняется только при проблеме, чтобы в норме индикатор не мозолил глаза. */ .health-btn { display: inline-flex; align-items: center; gap: 6px; } .health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; transition: background 0.2s; } .health-dot.is-ok { background: #26c281; box-shadow: 0 0 6px rgba(38,194,129,0.6); } .health-dot.is-warn { background: #e0a32e; box-shadow: 0 0 6px rgba(224,163,46,0.6); } .health-dot.is-bad { background: #e5484d; box-shadow: 0 0 6px rgba(229,72,77,0.7); } .health-btn.is-warn { color: #e0a32e; } .health-btn.is-bad { color: #e5484d; } .health-popover { width: 320px; right: auto; left: 0; } .health-line { font-size: 11.5px; color: var(--text-dim); display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; } .health-line b { color: var(--text); font-weight: 600; font-family: var(--font-mono); } .health-problem { font-size: 11.5px; color: #e5484d; padding: 2px 0; } .health-warning { font-size: 11.5px; color: #e0a32e; padding: 2px 0; } .health-ok-note { font-size: 11.5px; color: #26c281; padding: 2px 0; } .health-group { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; } .health-group-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-dim); margin-bottom: 3px; } .gp-popover { position: absolute; top: calc(100% + 6px); right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 100; } .gp-auto { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; cursor: pointer; user-select: none; } .gp-table { display: grid; } .gp-corner { width: 20px; height: 20px; } .gp-label { display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); } .gp-label.hover { color: var(--accent); font-weight: 700; } .gp-cell { width: 18px; height: 18px; margin: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 2px; cursor: pointer; } .gp-cell.hover { background: var(--accent); border-color: var(--accent); } .gp-readout { margin-top: 8px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text); } /* ---------- Попап настроек графиков (ползунки) ---------- */ .settings-popover { width: 250px; } .settings-title { font-weight: 700; font-size: 12.5px; margin-bottom: 10px; color: var(--text); } .settings-row { margin-bottom: 12px; } .settings-row label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; } .settings-row label span { color: var(--accent); font-family: var(--font-mono); } .settings-row input[type="range"] { width: 100%; accent-color: var(--accent); background: transparent; cursor: pointer; } .settings-divider { height: 1px; background: var(--border); margin: 10px 0 12px; } .settings-checkbox-label { display: flex !important; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text); cursor: pointer; } .settings-checkbox-label input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; } .settings-row-color { display: flex; align-items: center; justify-content: space-between; } .settings-row-color label { margin-bottom: 0; } .settings-row-color input[type="color"] { width: 36px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); cursor: pointer; } #settings-reset { width: 100%; margin-top: 4px; } /* ---------- Попап настроек списка монет (колонки + фильтр объёма) ---------- */ .list-settings-popover { width: 240px; } .list-settings-popover input[type="number"], .list-settings-popover input[type="text"] { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 8px; font-size: 12px; font-family: var(--font-mono); } .list-settings-popover input[type="number"]:focus, .list-settings-popover input[type="text"]:focus { outline: none; border-color: var(--accent); } #list-settings-reset { width: 100%; margin-top: 4px; } #list-settings-btn { font-size: 11.5px; } /* ---------- Попап выбора и сортировки бирж (общий для обеих страниц) ---------- */ .exchange-popover { width: 230px; } .exchange-hint { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin-bottom: 8px; } .exchange-list { display: flex; flex-direction: column; gap: 2px; } .exchange-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; user-select: none; } .exchange-row:hover { background: var(--panel-2); } .exchange-row.is-active { background: rgba(255, 255, 255, 0.07); border-color: var(--border); } .exchange-row.is-active .exchange-name { color: var(--text); font-weight: 700; } .exchange-row.dragging { opacity: 0.4; } .exchange-row.drag-over { border-color: var(--text-dim); } .exchange-drag { color: var(--text-dim); cursor: grab; font-size: 13px; line-height: 1; padding: 0 2px; } .exchange-drag:active { cursor: grabbing; } .exchange-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-dim); } .exchange-soon { font-size: 9.5px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } .exchange-check { color: var(--text-dim); font-size: 12px; font-weight: 700; } .exchange-market-toggle { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } .market-pill { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: 11.5px; font-weight: 600; padding: 6px 8px; cursor: pointer; font-family: var(--font-ui); } .market-pill:hover { color: var(--text); border-color: var(--accent); } .market-pill.is-active { color: var(--text); background: var(--panel-2); border-color: var(--text-dim); } /* ---------- Пустое окно / заглушка ---------- */ .empty-hint { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 12px; text-align: center; padding: 12px; } /* ============================================================ Дальше — стили конструктора окон (GridStack). На странице "Скринер" он больше не используется (см. выше), но останется нужен для будущей отдельной страницы со свободными окнами — поэтому классы не удаляю. ============================================================ */ .grid-wrap { padding: 10px; } .grid-stack-item-content { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .win-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel-2); border-bottom: 1px solid var(--border); cursor: move; flex-shrink: 0; } .win-head .ticker { font-weight: 700; font-size: 13px; } .win-head .chg { font-family: var(--font-mono); font-size: 12px; } .win-head .chg.up { color: var(--green); } .win-head .chg.down { color: var(--red); } .win-head .spacer { flex: 1; } .win-head .icon-btn { color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; user-select: none; } .win-head .icon-btn:hover { color: #fff; background: rgba(255,255,255,0.08); } .win-head .live-badge { font-size: 10px; color: var(--amber); cursor: pointer; white-space: nowrap; padding: 2px 7px; border: 1px solid var(--amber); border-radius: 999px; } .win-head .live-badge:hover { background: rgba(224,163,46,0.15); } .win-body { flex: 1; position: relative; overflow: hidden; } .win-body svg { width: 100%; height: 100%; display: block; } .win-head select.tf-select { background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); font-size: 10.5px; border-radius: 4px; padding: 2px 3px; font-family: var(--font-mono); } .win-head select.tf-select:hover { color: var(--text); border-color: var(--accent); } .win-head select.tf-select:focus { outline: none; border-color: var(--accent); } /* ---------- Тосты / алёрты ---------- */ .toast { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--amber); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 50; } .toast .t-title { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .toast .t-main { font-size: 18px; font-weight: 700; } .toast .t-main.up { color: var(--green); } .toast .t-main.down { color: var(--red); } .toast .t-sub { color: var(--text-dim); font-size: 11.5px; } /* ---------- Алгоритмы (страница) ---------- */ .algo-wrap { padding: 20px; width: 100%; box-sizing: border-box; } .algo-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; } /* ---------- ручка изменения размера карточки (своя, на JS — см. attachCardEvents в algorithms.js / attachDensityCardEvents в density.js). Нативный CSS resize на flex-элементе с фиксированной шириной оказался ненадёжным в разных браузерах, поэтому размер меняется явно через pointermove. ---------- */ .card-resize-handle { position: absolute; right: 1px; bottom: 1px; width: 16px; height: 16px; cursor: nwse-resize; opacity: 0.45; background: linear-gradient(135deg, transparent 0 42%, var(--text-dim) 42% 50%, transparent 50% 62%, var(--text-dim) 62% 70%, transparent 70% 100%); } .card-resize-handle:hover { opacity: 0.9; } .algo-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; flex: 0 0 auto; width: 280px; min-width: 240px; min-height: 160px; /* ширина колонок результатов "Сд."/"Об."/"Изм." — растягиваются мышкой (см. .algo-col-resizer); живут как переменные прямо на карточке, чтобы заголовок и все строки результата ссылались на одни и те же значения */ --col-trades-w: 58px; --col-vol-w: 62px; --col-chg-w: 54px; --col-spike-w: 44px; /* «12×» — колонке хватает узкой */ max-height: min(900px, 90vh) !important; max-width: min(900px, 100%) !important; position: relative; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .algo-card::-webkit-scrollbar, .density-card::-webkit-scrollbar, .algo-results-list::-webkit-scrollbar { width: 9px; height: 9px; } .algo-card::-webkit-scrollbar-track, .density-card::-webkit-scrollbar-track, .algo-results-list::-webkit-scrollbar-track { background: transparent; } .algo-card::-webkit-scrollbar-thumb, .density-card::-webkit-scrollbar-thumb, .algo-results-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } .algo-card::-webkit-scrollbar-thumb:hover, .density-card::-webkit-scrollbar-thumb:hover, .algo-results-list::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; } .algo-card::-webkit-scrollbar-corner, .density-card::-webkit-scrollbar-corner, .algo-results-list::-webkit-scrollbar-corner { background: transparent; } .algo-card .row { display: flex; gap: 8px; margin-bottom: 8px; } .algo-card .row > * { flex: 1; } .algo-card label { display: block; font-size: 10.5px; color: var(--text-dim); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; } .algo-card input, .algo-card select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 8px; font-size: 12.5px; font-family: var(--font-ui); } .algo-card input:focus, .algo-card select:focus { outline: none; border-color: var(--accent); } /* ---------- Заголовок карточки: имя алгоритма редактируется прямо тут ---------- */ .algo-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .algo-card-head .f-label { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text); font-size: 13.5px; font-weight: 700; padding: 4px 6px; font-family: var(--font-ui); } .algo-card-head .f-label::placeholder { color: var(--text-dim); font-weight: 600; } .algo-card-head .f-label:hover { border-color: var(--border); } .algo-card-head .f-label:focus { outline: none; border-color: var(--accent); background: var(--bg); } .algo-card-head .del-card { flex-shrink: 0; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 3px 6px; border-radius: 5px; line-height: 1; } .algo-card-head .del-card:hover { color: var(--red); background: rgba(229,72,77,0.1); } /* ---------- Переключатель "Скринер" — прячет настройки, оставляет список ---------- */ .screener-toggle { flex-shrink: 0; cursor: pointer; user-select: none; } .screener-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .screener-toggle-track { display: block; width: 34px; height: 18px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); position: relative; transition: background 0.15s, border-color 0.15s; } .screener-toggle-thumb { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); transition: transform 0.15s, background 0.15s; } .screener-toggle input:checked + .screener-toggle-track { background: rgba(38,194,129,0.18); border-color: var(--green); } .screener-toggle input:checked + .screener-toggle-track .screener-toggle-thumb { transform: translateX(16px); background: var(--green); } /* в режиме скринера — настройки карточки прячем, остаётся только заголовок и список подходящих монет (в столбик, не строкой) */ .algo-card.screener-mode .algo-card-body { display: none; } .algo-card.screener-mode .algo-results { border-top: none; margin-top: 0; padding-top: 0; } .algo-card.screener-mode .algo-results-list { max-height: 360px; overflow-y: auto; } /* ---------- Рынок: можно отметить и фьючерсы, и спот, и оба сразу ---------- */ .market-toggle { display: flex; gap: 10px; align-items: center; height: 100%; padding-top: 2px; } .market-check { display: flex !important; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--text); text-transform: none; cursor: pointer; user-select: none; } .market-check input { width: auto; accent-color: var(--accent); cursor: pointer; } .algo-card .params { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; } .param-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; } .param-row select.param-type { flex: 1.3; } .param-row select.param-timeframe { flex: 0.8; } .param-row input.param-min, .param-row input.param-max { flex: 0.6; font-size: 12px; min-width: 0; } .param-row .x { flex-shrink: 0; color: var(--text-dim); cursor: pointer; padding: 2px 6px; } .param-row .x:hover { color: var(--red); } /* ---------- строка параметра "Прострелы" — два ряда полей вместо одного ---------- */ .param-row--spike { flex-direction: column; align-items: stretch; gap: 6px; } .param-row-line { display: flex; gap: 6px; align-items: center; } .param-row-line--spike-fields input, .param-row-line--spike-fields select { flex: 1; font-size: 11px; min-width: 0; padding: 5px 4px; text-align: center; } .param-row-line--spike-fields select.spike-direction, .param-row-line--spike-fields select.mb-direction { flex: 1.3; text-align: left; padding: 5px 6px; } /* встроенный фильтр по объёму у "Прострелов" — подпись + свой тайм-фрейм + от/до */ .param-row-line--spike-vol .spike-vol-label { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; } .param-row-line--spike-vol select, .param-row-line--spike-vol input { flex: 1; font-size: 11px; min-width: 0; padding: 5px 4px; text-align: center; } .algo-card .add-param { background: none; border: 1px dashed var(--border); color: var(--text-dim); width: 100%; padding: 5px; border-radius: 6px; font-size: 11.5px; cursor: pointer; } .algo-card .add-param:hover { color: var(--text); border-color: var(--accent); } /* ---------- Исключить монеты, которые есть на другой бирже/рынке ---------- */ .algo-card .exclusions { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; } .algo-result-cols-toggle { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; } /* ---------- Звуковой сигнал ---------- */ .algo-sound-alert { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; } .algo-sound-fields { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .algo-sound-fields .row { margin-bottom: 0; } .algo-card input[type="range"] { width: 100%; accent-color: var(--accent); background: transparent; cursor: pointer; } .f-sound-volume-val { color: var(--text-dim); font-weight: 400; } .sound-ignore-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sound-ignore-minutes-field { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .sound-ignore-minutes-field input { width: 48px; text-align: center; padding: 4px 2px; font-size: 12px; } .sound-ignore-minutes-field span { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; } /* ---------- скрытие колонок результата (Сделки/Объём/Изменение) — переключатели "Показывать в результатах" выше; работает и в режиме "Скринер" (строки), и в заголовках колонок — в режиме чипов ("Проверить") эти колонки не показываются как столбцы в любом случае, см. .algo-card:not(.screener-mode), так что скрытие там не нужно (только сама подсказка title у чипа покажет все метрики всегда) ---------- */ .algo-card.hide-col-trades .results-col-trades, .algo-card.hide-col-trades .result-trades { display: none; } .algo-card.hide-col-vol .results-col-vol, .algo-card.hide-col-vol .result-vol { display: none; } .algo-card.hide-col-chg .results-col-chg, .algo-card.hide-col-chg .result-chg { display: none; } /* Колонка "Прострелы" — СВОЯ, а не вместо объёма: типичный отбор звучит как "нужные прострелы И объём от 1к", и оба числа нужно видеть одновременно */ .algo-card.hide-col-spike .results-col-spike, .algo-card.hide-col-spike .result-spike { display: none; } .result-spike { text-align: right; font-family: var(--font-mono); } /* Значки биржи и рынка (GAT, F) перед тикером. Отдельный переключатель, а не часть колонки "Тикер": когда карточка ищет на ОДНОЙ бирже, они одинаковые во всех строках и только едят ширину — особенно в узкой колонке сайдбара */ .algo-card.hide-col-src .result-exchange, .algo-card.hide-col-src .result-market { display: none; } .exclusion-list { display: flex; flex-wrap: wrap; gap: 8px 14px; } /* ---------- пороги объёма/NATR для ДОБРАННЫХ бирж (см. renderMergeFilterBlocks в dashboard.js) — рамка вокруг блока, чтобы было видно, где кончаются общие фильтры списка и начинаются пороги конкретной биржи ---------- */ .merge-filter-block { border: 1px solid var(--border); border-radius: 8px; padding: 10px 10px 2px; margin-bottom: 10px; } .merge-filter-block:last-child { margin-bottom: 0; } .merge-filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* подпись справа в шапке блока: свой порог у биржи или унаследованный общий */ .merge-filter-state { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; } .merge-filter-block .settings-row:last-of-type { margin-bottom: 10px; } .merge-filter-reset { width: 100%; margin-bottom: 10px; font-size: 11px; } /* ---------- карточка плотности: биржа+рынок — кнопка, открывающая попап со списком галочек, а не всегда развёрнутый список (8 вариантов разом занимали слишком много места в карточке). СОЗНАТЕЛЬНО без flexbox внутри попапа — два захода через flex дали неожиданный результат на практике, здесь самая простая и предсказуемая вёрстка: обычные блочные строки, чекбокс и текст — обычным инлайновым потоком, без выравнивания через align-items/justify-content. ---------- */ .density-pairs-field { position: relative; } .density-pairs-btn { width: 100%; display: flex !important; align-items: center; justify-content: space-between; text-align: left; font-family: var(--font-ui); font-size: 12.5px; } .density-pairs-arrow { color: var(--text-dim); font-size: 10px; flex-shrink: 0; margin-left: 8px; } .density-pairs-popover { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 50 !important; background: var(--panel) !important; border: 1px solid var(--border); border-radius: 8px; padding: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5); height: auto !important; max-height: 240px !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } .density-pair-list { display: block !important; } .density-pair-row { display: block !important; width: auto !important; height: auto !important; padding: 4px 0 !important; font-size: 11.5px; font-weight: 500; color: var(--text); cursor: pointer; user-select: none; text-align: left !important; white-space: normal; } .density-pair-row input { display: inline-block !important; vertical-align: middle; width: 14px !important; height: 14px !important; margin: 0 6px 0 0 !important; accent-color: var(--accent); cursor: pointer; } .density-pair-row span { display: inline; vertical-align: middle; color: var(--text); } /* ---------- "Применять на" — у каждой строки параметра свой попап выбора биржи/рынка (см. paramScopeFieldHTML в algorithms.js) — компактнее и тусклее главного "Биржа и рынок" поля, это вспомогательная настройка ---------- */ .param-scope-field { position: relative; margin-top: 4px; } .param-scope-btn { font-size: 11px !important; padding: 5px 8px !important; color: var(--text-dim); } .param-scope-btn:hover { color: var(--text); } .exclusion-check { display: flex !important; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--text); text-transform: none; cursor: pointer; user-select: none; } .exclusion-check input { width: auto; accent-color: var(--accent); cursor: pointer; } .algo-card .card-foot { margin-top: 10px; } .algo-blacklist { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; } .algo-blacklist .row { margin-bottom: 6px; } .algo-card .apply-btn { width: 100%; text-align: center; } /* ---------- Результаты применения параметров ---------- */ .algo-results { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .algo-results-title { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; } /* ---------- заголовки колонок результата (Тикер/Сделки/Объём) — кликабельны, сортируют список, повторный клик меняет направление, как в таблице монет ---------- */ .algo-results-cols { display: flex; align-items: center; gap: 10px; padding: 0 8px 4px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02em; } /* колонки "Сд."/"Об."/"Изм." у карточки алгоритма растягиваются мышкой — для этого им нужен grid с общими переменными ширины (см. .algo-card), а не общий flex. У "Карты плотности" структура колонок другая (Размер/Удалённость/Жизнь, без растяжки) и класс .algo-results-cols общий с ней просто по совпадению — поэтому grid-вёрстку привязываем именно к .algo-card, у density-card сохраняется исходный flex. 5-я колонка ("auto") — отдельно под кнопку 🚫: ей задан явный grid-column, поэтому она ВСЕГДА маленькая и НЕ зависит от того, скрыта ли колонка "Изменение" (или "Сделки"/"Объём") галочками "Показывать в результатах" — раньше, если скрывали, скажем, "Изменение", кнопка проваливалась в опустевшую широкую ячейку этой колонки и растягивалась на всю её ширину (отсюда непропорционально большой пустой кусок справа). */ .algo-card .algo-results-cols { display: grid; grid-template-columns: var(--results-grid-template, 1fr var(--col-trades-w) var(--col-vol-w) var(--col-spike-w) var(--col-chg-w) auto); column-gap: 10px; gap: 0; } .results-col { cursor: pointer; user-select: none; white-space: nowrap; position: relative; } .results-col:hover { color: var(--text); } .results-col.is-active { color: var(--accent); } .results-col .arrow { font-size: 9px; } .results-col-ticker { min-width: 0; } /* кнопка чёрного списка — всегда в ПОСЛЕДНЕМ треке сетки (тот самый "auto" в конце --results-grid-template), независимо от того, сколько колонок слева от неё видно прямо сейчас — "-2" значит "от предпоследней линии до последней", т.е. последний трек, при любом их количестве. Остальные колонки (Тикер/Сд./Об./Изм.) размещаются обычным порядком — раз --results-grid-template уже содержит ровно столько треков, сколько видимых колонок, им просто незачем явное позиционирование (см. updateResultsGridTemplate в algorithms.js — скрытая колонка вообще не попадает в список треков, а не "прячется", оставляя пустое место). */ .algo-card .result-row .result-blacklist-btn { grid-column-start: -2; justify-self: center; } /* центр — чтобы подпись в заголовке была ровно над числами в строках ниже, независимо от длины текста (раньше оба были text-align:right, но ширина самого заголовка "плыла" от длины текста типа "Сделки 1м" и не совпадала с шириной чисел под ней, отсюда визуальный сдвиг колонок) */ .results-col-trades, .results-col-vol, .results-col-chg { text-align: center; overflow: hidden; } /* ---------- ручки растяжки колонок результата — тот же внешний вид и принцип, что у .col-resizer в таблице монет, но управляют CSS-переменной на карточке, а не width у (тут не настоящая HTML-таблица) ---------- */ .algo-col-resizer { position: absolute; right: -7px; top: -2px; bottom: -2px; width: 9px; cursor: col-resize; user-select: none; touch-action: none; z-index: 2; } .algo-col-resizer::after { content: ""; position: absolute; right: 4px; top: 10%; bottom: 10%; width: 1px; background: var(--border); } .algo-col-resizer:hover::after, .algo-col-resizer.resizing::after { background: var(--accent); width: 2px; right: 3.5px; } .algo-results-list { min-height: 34px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .algo-results-list--row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .algo-results-list--column { display: flex; flex-direction: column; gap: 2px; } .algo-results-hint { color: var(--text-dim); font-size: 11.5px; font-style: italic; } /* заголовки-колонки нужны только когда список реально выглядит как колонки (режим "Скринер"); в режиме чипов ("Проверить") под ними нет выровненных значений, поэтому там их просто прячем */ .algo-card:not(.screener-mode) .algo-results-cols { display: none; } .algo-results-note { margin-top: 8px; color: var(--text-dim); font-size: 10.5px; line-height: 1.4; } .algo-results-note > div { margin-bottom: 4px; } .algo-results-note > div:last-child { margin-bottom: 0; } .result-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; font-family: var(--font-mono); color: var(--text); cursor: default; } .result-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 12.5px; font-family: var(--font-mono); color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.04); background: transparent; opacity: 1; transition: background 0.5s ease, opacity 0.5s ease; } /* та же история, что и с .algo-results-cols выше: только у карточки алгоритма колонки растягиваются мышкой, поэтому только она переходит на grid с общими переменными ширины; у "Карты плотности" (другие колонки, без растяжки) остаётся исходный flex */ .algo-card .result-row { display: grid; grid-template-columns: var(--results-grid-template, 1fr var(--col-trades-w) var(--col-vol-w) var(--col-spike-w) var(--col-chg-w) auto); column-gap: 10px; gap: 0; } .result-row:hover { background: var(--panel-2); } .result-row .result-ticker { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; } .result-row .result-trades { color: var(--text-dim); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; } /* у "Рыночных покупок/продаж" эта же ячейка показывает сторону кластера (покупка/продажа) — зелёный/красный, как и везде в проекте; без явного правила тут .up/.down проиграли бы по специфичности цвету выше */ .result-row .result-trades.up { color: var(--green); } .result-row .result-trades.down { color: var(--red); } .result-row .result-vol { color: var(--green); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; } .result-row .result-chg { font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; } /* ---------- значок биржи рядом с тикером — нужен, когда результаты идут сразу с нескольких бирж (карточка алгоритма ищет на нескольких бирж одновременно, карточка "Карта плотности" — вообще всегда со всех сразу) — иначе непонятно, на какой именно бирже нашлась монета. Ширина — авто (не фиксированная), иначе 3-буквенный код биржи обрезается/сжимается в квадратик под одну букву. У каждой биржи свой цвет — чтобы можно было отличать их на глаз, а не вчитываться в буквы каждый раз. ---------- */ .result-exchange { display: inline-flex; align-items: center; justify-content: center; padding: 1px 5px; height: 15px; flex-shrink: 0; border-radius: 4px; font-size: 9.5px; font-weight: 700; line-height: 1; font-family: var(--font-ui); letter-spacing: 0.03em; white-space: nowrap; } .result-exchange--binance { background: rgba(240,185,11,0.18); color: #f0b90b; } .result-exchange--mexc { background: rgba(76,139,245,0.18); color: var(--accent); } .result-exchange--okx { background: rgba(255,255,255,0.14); color: #e8eaf0; } .result-exchange--bybit { background: rgba(255,138,61,0.18); color: #ff8a3d; } .result-exchange--gate { background: rgba(167,139,250,0.18); color: #a78bfa; } .result-exchange--kucoin { background: rgba(45,212,191,0.18); color: #2dd4bf; } .result-exchange--bitget { background: rgba(163,230,53,0.18); color: #a3e635; } .result-exchange--hyperliquid { background: rgba(34,211,238,0.18); color: #22d3ee; } /* для бирж без своего цвета (ourbit/htx — пока без живых данных) или если exchange не определён — тот же нейтральный вид, что был раньше */ .result-exchange--default { background: var(--panel-2); color: var(--text-dim); } /* ---------- значок рынка (С — спот, Ф — фьючерсы) рядом с тикером ---------- */ .result-market { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px; font-size: 9px; font-weight: 700; line-height: 1; font-family: var(--font-ui); } .result-market--spot { background: rgba(38,194,129,0.18); color: var(--green); } .result-market--futures { background: rgba(76,139,245,0.18); color: var(--accent); } /* ---------- короткая вспышка при копировании правой кнопкой мыши ---------- */ .result-row.result-copied-flash, .result-chip.result-copied-flash { background: rgba(76,139,245,0.25) !important; } /* монета только что появилась в результатах — короткая зелёная подсветка, плавно гаснущая (см. setTimeout в renderScreenerList) */ .result-row.result-row-new { background: rgba(38,194,129,0.22); } /* монета пропала из результатов — гаснет перед удалением из DOM */ .result-row.result-row-removed { opacity: 0; background: rgba(229,72,77,0.12); } .new-algo-card { border: 1px dashed var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 13px; cursor: pointer; min-height: 160px; flex: 0 0 280px; } .new-algo-card:hover { border-color: var(--accent); color: var(--text); } /* ---------- Карта плотности (карточка) — пока каркас, см. depth_registry.py / density_tracker.py. Стили НЕ через .algo-card (намеренно) — чтобы логика сохранения карточек алгоритмов (saveAllCards/serializeCard в algorithms.js) точно не зацепила карточки плотности при делегированных input/change на общей сетке. Результаты и сортировку, наоборот, переиспользуем через .algo-results-* и .results-col-* — это самостоятельные классы без привязки к .algo-card, см. style.css выше. ---------- */ .density-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; flex: 0 0 auto; width: 280px; min-width: 240px; min-height: 160px; max-height: min(900px, 90vh) !important; max-width: min(900px, 100%) !important; position: relative; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .density-card .row { display: flex; gap: 8px; margin-bottom: 8px; } .density-card .row > * { flex: 1; } .density-card label { display: block; font-size: 10.5px; color: var(--text-dim); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; } .density-card input, .density-card select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 8px; font-size: 12.5px; font-family: var(--font-ui); } .density-card input:focus, .density-card select:focus { outline: none; border-color: var(--accent); } .density-card .card-foot { margin-top: 10px; } .density-card .apply-btn { width: 100%; text-align: center; } .density-card.screener-mode .density-card-body { display: none; } /* у карточки плотности список результатов ВСЕГДА построчный (нет компактного режима "чипсы", как у карточек алгоритма) — поэтому высоту ограничиваем независимо от тумблера "Скринер", иначе при многих совпадениях карточка бесконечно растягивается вниз */ .density-card .algo-results-list { max-height: 360px; overflow-y: auto; } /* ---------- КОЛОНКИ КАРТЫ ПЛОТНОСТИ: заголовок ровно над значениями ---------- Заголовок и строки раньше были двумя независимыми flex-раскладками, и ширины ячеек в них не имели друг к другу никакого отношения: подписи вставали по длине СВОЕГО текста ("Тикер Размер Удалён. Жизнь" кучкой слева), а числа под ними — по длине своего ($1.48M, 11.14%, 8ч 45м). Теперь у шапки и у строк ОДНА И ТА ЖЕ сетка колонок, поэтому подпись всегда стоит над своим столбцом. Пятый трек — под кнопку 🚫 в строках; в шапке он просто пустой. Ширины ДОЛЕВЫЕ, а не в пикселях: карточка живёт и в одну колонку сайдбара (~420px), и в две (~150px), и тянется уголком — фиксированные пиксели в узком режиме съедали всю ширину, и колонка тикера схлопывалась в ноль. Доли же всегда делят ровно ту ширину, что есть. */ /* Числовые колонки при этом РАСТЯГИВАЮТСЯ мышкой: их ширина берётся из переменных --dens-col-*-w на самой карточке (их ставит ручка .algo-col-resizer, см. attachDensityCardEvents в density.js), а долевые minmax остаются ЗНАЧЕНИЕМ ПО УМОЛЧАНИЮ в var() — пока колонку не трогали мышкой, всё как было. Тикер ширины не имеет вовсе (1.5fr) и забирает остаток. */ .density-card .algo-results-cols, .density-card .result-row { display: grid; grid-template-columns: minmax(0, 1.5fr) var(--dens-col-size-w, minmax(0, 1.1fr)) var(--dens-col-dist-w, minmax(0, 0.85fr)) var(--dens-col-age-w, minmax(0, 0.9fr)) 14px; column-gap: 6px; gap: 0; align-items: center; } /* числовые колонки — по правому краю (и подписи, и значения), так столбцы читаются единой линией, а не «лесенкой» из-за разной длины чисел */ .density-card .results-col-size, .density-card .result-size, .density-card .results-col-distance, .density-card .result-distance, .density-card .results-col-age, .density-card .result-age { text-align: right; white-space: nowrap; overflow: hidden; } .density-card .result-blacklist-btn { justify-self: center; } /* ============================================================ Карточка «Расхождение цен» (spread.js). Каркас берёт у карты плотности (.density-card), поэтому здесь только своё: сетка строк списка, значки двух бирж в строке и панель графика. ============================================================ */ /* Сетка собирается в JS ТОЛЬКО из включённых колонок (см. spreadUpdateCols): скрытая колонка не должна оставлять пустое место. Значение по умолчанию — все колонки, на случай если переменную ещё не проставили. */ .spread-card .algo-results-cols.spread-cols, .spread-card .result-row.spread-row { display: grid; grid-template-columns: var(--spread-grid, minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 0.75fr) 14px); column-gap: 8px; gap: 0; align-items: center; } .spread-card.hide-col-price .col-price, .spread-card.hide-col-diff .col-diff, .spread-card.hide-col-in .col-in, .spread-card.hide-col-out .col-out { display: none; } .spread-card .result-blacklist-btn { justify-self: center; } /* галочки колонок в настройках — в строку, как у карточки алгоритма */ .spread-card .algo-result-cols-toggle { margin-top: 10px; } .spread-card .spread-col-num, .spread-card .spread-num { text-align: right; white-space: nowrap; } .spread-venues { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; } /* значки одной биржи — единая цель для правого клика (копирование тикера) */ .spread-venue { display: inline-flex; align-items: center; gap: 3px; cursor: context-menu; border-radius: 4px; } .spread-venue:hover { outline: 1px solid var(--border); } .spread-arrow { color: var(--text-dim); font-size: 10px; margin: 0 1px; } .spread-num { font-size: 11px; font-family: var(--font-mono); color: var(--text); } .spread-num.is-good { color: var(--green); font-weight: 700; } .spread-num.is-bad { color: var(--text-dim); } .spread-num.is-dim { color: var(--text-dim); } .spread-row { cursor: pointer; } /* панель графика: живёт внутри карточки под списком и забирает остаток высоты */ .spread-chart-panel { display: flex; flex-direction: column; min-height: 150px; flex: 1 1 auto; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; } /* ОБЯЗАТЕЛЬНО: display:flex выше перебивает браузерное [hidden]{display:none}, и панель оставалась на экране, сколько бы код ни ставил ей hidden — пустая коробка под списком монет, которую не закрывал даже крестик. Правило с атрибутом специфичнее, поэтому возвращает скрытию силу. */ .spread-chart-panel[hidden] { display: none; } .spread-chart-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .spread-chart-title { font-size: 11.5px; display: flex; align-items: center; gap: 4px; } .spread-chart-now { margin-left: auto; font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); display: flex; gap: 8px; align-items: baseline; } /* правил для in/out здесь больше нет: эти числа рисуются метками у правой шкалы самого графика, а в шапке остались цены и объём по лучшей цене */ .spread-depth { color: var(--text-dim); font-size: 10px; } /* цены обеих бирж в шапке графика — читаются чаще, чем глубина, поэтому ярче её и не сжимаются: в узкой ячейке первым переносится «объём» */ .spread-now-price { color: var(--text); white-space: nowrap; } .spread-chart-close { cursor: pointer; color: var(--text-dim); font-size: 12px; padding: 0 2px; } .spread-chart-close:hover { color: var(--red); } .spread-chart-canvas { width: 100%; flex: 1 1 auto; min-height: 120px; display: block; } .spread-chart-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-dim); margin-top: 2px; } .spread-legend-in::before { content: "▬ "; color: #26c281; } .spread-legend-out::before { content: "▬ "; color: #e5484d; } .spread-legend-hist { opacity: 0.75; } .spread-legend-hist::before { content: "▬ "; color: rgba(124,129,143,0.9); } /* с открытым графиком список не должен съедать всю карточку */ .spread-card.has-chart .algo-results-list { max-height: 34%; overflow-y: auto; } /* в сайдбаре скринера карточка узкая (в две колонки — около 150px), поэтому там всё плотнее: пять колонок иначе не помещаются даже цифрами */ .algo-side-list .spread-card .spread-num, .algo-side-list .spread-card .result-ticker { font-size: 10px; } .algo-side-list .spread-card .algo-results-cols.spread-cols, .algo-side-list .spread-card .result-row.spread-row { column-gap: 4px; } .algo-side-list .spread-card .spread-chart-legend { display: none; } /* подписи линий не влезают, цвета те же */ /* переключатель таймфрейма графика расхождения */ .spread-tf-row { display: flex; gap: 2px; align-items: center; } .spread-tf { background: none; border: 1px solid transparent; border-radius: 4px; color: var(--text-dim); font-size: 10px; line-height: 1; padding: 2px 5px; cursor: pointer; font-family: var(--font-ui); } .spread-tf:hover { color: var(--text); border-color: var(--border); } .spread-tf.is-active { color: var(--accent); border-color: var(--accent); font-weight: 700; } /* график расхождения, занявший ячейку сетки (ПКМ по строке карточки) */ .chart-cell .spread-cell-head { display: flex; align-items: center; gap: 8px; } .chart-cell .spread-cell-venues { display: flex; align-items: center; gap: 3px; } .chart-cell .spread-cell-close { margin-left: 4px; cursor: pointer; color: var(--text-dim); font-size: 12px; } .chart-cell .spread-cell-close:hover { color: var(--red); } .chart-cell .spread-chart-canvas { width: 100%; height: calc(100% - 26px); display: block; } .chart-cell .spread-chart-now { margin-left: auto; } .distance-range-row { display: flex; align-items: center; gap: 6px; } .distance-range-row input { flex: 1; min-width: 0; } .range-prefix { color: var(--text-dim); font-size: 11px; flex-shrink: 0; } /* ---------- чёрный список монет внутри карточки ---------- */ .density-blacklist { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; } .density-activity-filter { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; } .density-activity-pair { border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 8px; } .density-activity-pair:last-child { margin-bottom: 0; } .density-activity-pair-label { font-size: 10.5px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; } .density-blacklist .row { margin-bottom: 6px; } .blacklist-chips { display: flex; flex-wrap: wrap; gap: 6px; } .blacklist-chip { gap: 6px; } .blacklist-remove { color: var(--text-dim); cursor: pointer; font-size: 10px; line-height: 1; padding: 1px 3px; border-radius: 4px; } .blacklist-remove:hover { color: var(--red); background: rgba(229,72,77,0.12); } /* ---------- доп. колонки результата (Размер/Удалённость/Жизнь) ---------- */ .result-row .result-size { color: var(--green); font-size: 11px; min-width: 62px; text-align: right; white-space: nowrap; } .result-row .result-distance { color: var(--text-dim); font-size: 11px; min-width: 50px; text-align: right; white-space: nowrap; } .result-row .result-age { color: var(--text-dim); font-size: 11px; min-width: 40px; text-align: right; white-space: nowrap; } .result-row .result-blacklist-btn, .result-chip .result-blacklist-btn { flex-shrink: 0; cursor: pointer; font-size: 11px; opacity: 0.5; padding: 0 2px; } .result-row .result-blacklist-btn:hover, .result-chip .result-blacklist-btn:hover { opacity: 1; } .results-col-size { min-width: 62px; text-align: right; } .results-col-distance { min-width: 50px; text-align: right; } .results-col-age { min-width: 40px; text-align: right; } /* ============================================================ Страница "Стакан" — пилотная живая лента (см. orderbook.js/ binance_depth_ws.py). Простой минимальный UI, чтобы проверить сам подход (живость через WS на сервере + частый опрос с фронта), без претензии на финальный дизайн. ============================================================ */ .orderbook-wrap { max-width: 760px; margin: 0 auto; /* дефолтные ширины (компактный стакан); меняются ползунками через JS */ --ob-width: 420px; --ob-trades-col: 0.9fr; --ob-price-col: 0.9fr; display: flex; flex-direction: column; height: calc(100vh - 48px); /* 48px — topbar */ padding: 10px 16px 0; overflow: hidden; } .orderbook-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .orderbook-pilot-badge { font-size: 10.5px; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .orderbook-symbol-input { flex: 1; min-width: 100px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 7px 10px; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; } .orderbook-symbol-input:focus { outline: none; border-color: var(--accent); } .orderbook-price-step, .orderbook-group-step { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 7px 8px; font-size: 12px; font-family: var(--font-ui); cursor: pointer; } .orderbook-price-step:focus, .orderbook-group-step:focus { outline: none; border-color: var(--accent); } .orderbook-min-print-wrap { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); white-space: nowrap; } .orderbook-min-print-input { width: 70px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 8px; font-size: 12px; font-family: var(--font-mono); } .orderbook-min-print-input:focus { outline: none; border-color: var(--accent); } .orderbook-status { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; } .orderbook-status--live { color: var(--green); } .orderbook-status--pending { color: var(--accent); } .orderbook-status--error { color: var(--red); } .orderbook-trades-hint { font-size: 10.5px; color: var(--text-dim); font-style: italic; } .orderbook-depth-hint { font-size: 10.5px; color: var(--accent); font-style: italic; } /* кнопка-переключатель "Показать в $" — тот же принцип подсветки активного состояния, что у .market-pill.is-active в попапе бирж */ #orderbook-usd-toggle.is-active { color: var(--text); background: var(--accent); border-color: var(--accent); } .orderbook-ladder-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-family: var(--font-mono); max-width: var(--ob-width, 460px); flex: 1; min-height: 0; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; /* текст в стакане не выделяется */ } /* колонки строки/заголовка управляются переменными: --ob-trades-col — левая (принты/сделки), --ob-price-col — цена справа, середина (объём/плотность) занимает всё остальное (1fr) */ .orderbook-header-row { display: grid; grid-template-columns: var(--ob-cluster-col, 120px) var(--ob-trades-col, 1fr) var(--ob-vol-col, 1fr) var(--ob-price-col, 1fr); padding: 0 8px 6px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid var(--border); margin-bottom: 4px; flex-shrink: 0; } .orderbook-header-row span:nth-child(3) { text-align: left; padding-left: 4px; } .orderbook-header-row span:last-child { text-align: right; } .orderbook-row { grid-template-columns: var(--ob-cluster-col, 120px) var(--ob-trades-col, 1fr) var(--ob-vol-col, 1fr) var(--ob-price-col, 1fr); } .orderbook-side { display: flex; flex-direction: column; flex: 0 0 auto; max-height: 100%; } .orderbook-ladder-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } .orderbook-asks { flex-direction: column; } /* всплывающая подсказка "% от спреда" у курсора при наведении на строку стакана (см. initSpreadDistanceTooltip в orderbook.js) — чистый текст, без линии/полосы, позиционируется относительно скролл-контейнера, чтобы корректно следовать за курсором даже когда лента проскроллена */ .orderbook-distance-tooltip { position: absolute; z-index: 5; pointer-events: none; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; font-size: 11px; font-family: var(--font-mono); color: var(--accent); white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .orderbook-row { display: grid; align-items: center; column-gap: 6px; height: 22px; padding: 0 8px; font-size: 12px; border-radius: 3px; overflow: hidden; } /* "Сделки" — реальный объём СДЕЛОК (не заявок) именно по этой цене за последнее время — отдельная колонка СЛЕВА от "Объём" (раньше это была отдельная панель-лента справа от всего стакана; по просьбе перенесли внутрь самой ленты, колонкой, как и "плотность" рядом с ценой) */ .orderbook-row-trades { color: var(--text-dim); text-align: left; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orderbook-row-trades--buy { color: var(--green); } .orderbook-row-trades--sell { color: var(--red); } /* полоса плотности — раньше растягивалась на всю строку (это было верно, пока в строке было всего 2 колонки); теперь у неё своя обёртка ровно по ширине колонки "Объём", чтобы не наезжать на "Сделки"/"Цена" */ .orderbook-row-qty-wrap { position: relative; display: flex; align-items: center; border-radius: 3px; overflow: hidden; height: 100%; } .orderbook-row-bar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; border-radius: 3px; } .orderbook-row--ask .orderbook-row-bar { background: rgba(229,72,77,0.30); } .orderbook-row--bid .orderbook-row-bar { background: rgba(38,194,129,0.30); } .orderbook-row-qty { position: relative; z-index: 1; color: var(--text); padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orderbook-row-price { position: relative; z-index: 1; font-weight: 600; text-align: right; white-space: nowrap; } .orderbook-row--ask .orderbook-row-price { color: rgba(229,72,77,0.72); } .orderbook-row--bid .orderbook-row-price { color: rgba(38,194,129,0.72); } /* нативный уровень цены БЕЗ заявки в видимом диапазоне (см. fillNativeGrid в orderbook.js) — реальная "дырка" разреженного стакана, не ошибка. Приглушаем цену и убираем полосу плотности, чтобы такие строки не путались с реально занятыми уровнями. */ .orderbook-row--empty .orderbook-row-price { opacity: 0.35; } .orderbook-spread { box-sizing: border-box; padding: 0; margin: 0; position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; border-top: 1px solid rgba(229,72,77,0.6); border-bottom: 1px solid rgba(38,194,129,0.6); transition: top 0.12s ease, height 0.12s ease; background: repeating-linear-gradient( -45deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 4px, transparent 4px, transparent 8px ); } /* ---------- "Принты" — кружочки сделок (терминология stakan.io/metascalp), рождающиеся на реальной цене сделки и уезжающие влево как лента времени, гаснущие через несколько секунд (см. spawnBubble/tickBubbles в orderbook.js). Раскраска — те же --green/--red, что и везде в проекте. ---------- */ .orderbook-bubbles-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; } .orderbook-bubble { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-mono); font-weight: 700; color: #000; white-space: nowrap; padding: 2px; transition: left 0.09s linear, top 0.09s linear, opacity 0.15s linear; will-change: left, top; box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 1px 4px rgba(0,0,0,0.4); } .orderbook-bubble--buy { background: rgba(38,194,129,0.85); } .orderbook-bubble--sell { background: rgba(229,72,77,0.85); } /* ---------- "линейка" — горизонтальные отметки цены через равные промежутки, для быстрой визуальной ориентации (особенно при сжатии) ---------- */ .orderbook-ruler { position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none; } .orderbook-ruler-mark { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,0.08); } .orderbook-ruler-mark span { position: absolute; left: 6px; top: -7px; font-size: 9px; color: var(--text-dim); background: var(--panel); padding: 0 3px; font-family: var(--font-mono); opacity: 0.6; } /* Best bid / best ask — строки у спреда, выделены (как CScalp/stakan.io) */ /* подсветка best bid/ask по позиции убрана — при бегущем спреде граница bid/ask показывается движущимся спред-блоком, а не крайними строками */ .orderbook-spread--wide { display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-dim); letter-spacing: 0.03em; text-transform: uppercase; font-family: var(--font-mono); } /* ---------- Автодополнение монет (выпадашка под полем ввода) ---------- */ .orderbook-symbol-wrap { position: relative; display: inline-block; } .orderbook-symbol-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; max-height: 320px; overflow-y: auto; background: var(--panel-2, var(--panel-2)); border: 1px solid var(--border, var(--border)); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); scrollbar-width: thin; } .orderbook-symbol-dropdown::-webkit-scrollbar { width: 7px; } .orderbook-symbol-dropdown::-webkit-scrollbar-thumb { background: var(--border, var(--border)); border-radius: 4px; } .orderbook-symbol-option { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text, var(--text)); font-family: var(--font-mono, monospace); border-bottom: 1px solid rgba(255,255,255,0.03); } .orderbook-symbol-option:last-child { border-bottom: none; } .orderbook-symbol-option:hover { background: rgba(76,139,245,0.15); color: #fff; } .orderbook-symbol-option-pair { font-size: 10.5px; color: var(--text-dim, var(--text-dim)); font-weight: 400; } /* ---------- Ручки изменения ширины (перетаскивание за края) ---------- */ .orderbook-ladder-wrap { position: relative; } .orderbook-header-row { position: relative; } /* вертикальные ручки на границах колонок в заголовке */ .ob-col-resizer { position: absolute; top: 0; bottom: -2px; width: 9px; cursor: col-resize; z-index: 6; transform: translateX(-50%); } .ob-col-resizer::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--border, var(--border)); transform: translateX(-50%); transition: background 0.12s, width 0.12s; } .ob-col-resizer:hover::after, .ob-col-resizer.dragging::after { background: var(--accent, #4c8bf5); width: 2px; } /* ручка общей ширины — на правом крае ленты */ .ob-width-resizer { position: absolute; top: 0; bottom: 0; right: -5px; width: 10px; cursor: ew-resize; z-index: 6; } .ob-width-resizer::after { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; background: var(--border, var(--border)); border-radius: 2px; transform: translateX(-50%); transition: background 0.12s; } .ob-width-resizer:hover::after, .ob-width-resizer.dragging::after { background: var(--accent, #4c8bf5); } /* Агрегированные принты (собранные из нескольких сделок) — квадратные, чтобы визуально отличать от одиночных круглых (как в MetaScalp) */ .orderbook-bubble--agg { border-radius: 4px; } /* Линия-указатель от принта к колонке цены (как в MetaScalp) — тянется от кружка вправо до края колонки принтов, на уровне цены сделки */ .orderbook-bubble-line { position: absolute; height: 1px; transform: translateY(-50%); pointer-events: none; background: rgba(0,0,0,0.55); /* чёрная линия-указатель */ transition: opacity 0.2s linear; } /* Гистограмма объёма сделок (как MetaScalp) — горизонтальные столбцы на ценовых уровнях, длина = накопленный объём, цвет = сторона. Растут влево от колонки "Объём". Текст (сумма) внутри столбца справа. */ .orderbook-histo-bar { position: absolute; height: 16px; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; box-sizing: border-box; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; color: #000; white-space: nowrap; overflow: hidden; border-radius: 2px; pointer-events: none; z-index: 3; transition: width 0.15s ease, opacity 0.3s linear, top 0.1s linear; } .orderbook-histo-bar--buy { background: rgba(38,194,129,0.85); } .orderbook-histo-bar--sell { background: rgba(229,72,77,0.85); } /* График цены по центру ленты (ломаная, как в MetaScalp) — canvas поверх строк, под кружками-принтами, не перехватывает мышь */ .orderbook-price-graph { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; max-width: 100%; /* не вылезает за контейнер, не создаёт горизонтальную прокрутку */ } /* ---------- Режим встраивания (iframe в мультистакане) ---------- */ .ob-embed .topbar { display: none; } /* прячем шапку с навигацией */ .ob-embed .orderbook-wrap { height: 100vh; padding: 8px 8px 0; max-width: none; } .ob-embed .orderbook-pilot-badge { display: none; } /* прячем бейдж пилота — экономим место */ .ob-embed .orderbook-controls { gap: 6px; margin-bottom: 8px; } /* Кластеры объёма сделок (как MetaScalp) — ОТДЕЛЬНАЯ колонка слева, одно число на строку = объём сделок по цене. Текст белый, ФОН по перевесу buy/sell (задаётся из JS: краснее = продажи, зеленее = покупки). */ .orderbook-row-cluster { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; align-items: stretch; font-family: var(--font-mono); font-size: 10px; font-weight: 600; min-height: 22px; height: 100%; line-height: 1; overflow: hidden; white-space: nowrap; color: #fff; position: relative; z-index: 0; border-right: 2px solid var(--accent); /* выделяем колонку кластеров */ background: var(--panel); } .orderbook-row-cluster.orderbook-col-hidden { background: transparent; border-right-color: transparent; z-index: 0; pointer-events: none; } .orderbook-row-cluster.orderbook-col-hidden .ob-cl-cell { opacity: 0; } .ob-cl-cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; height: 100%; margin: 0; padding: 0 4px; border-radius: 4px; line-height: 1; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); transition: background-color 0.1s ease-out !important; } .ob-cl-cell--empty { background: transparent !important; box-shadow: none; height: 3px; margin: 9px 0; } /* подвал кластеров: сумма за окно (сверху) + время (снизу) */ .orderbook-cluster-times { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; width: var(--ob-cluster-col, 120px); padding-left: 8px; flex-shrink: 0; font-family: var(--font-mono); border-top: 1px solid var(--border); padding-top: 3px; margin-top: 2px; } .orderbook-cluster-times.orderbook-col-placeholder { width: 0; visibility: hidden; } .ob-cl-foot { display: flex; flex-direction: column; align-items: center; gap: 1px; overflow: hidden; } .ob-cl-sum { font-size: 9px; font-weight: 700; white-space: nowrap; } .ob-cl-time { font-size: 8px; color: var(--text-dim); text-align: center; } .orderbook-row-trades { color: var(--text-dim); text-align: left; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========== АНИМАЦИЯ ЗАПОЛНЕНИЯ КЛАСТЕРОВ - ПРОЗРАЧНОЕ ========== */ .ob-cl-cell--fill { position: relative; overflow: hidden; display: inline-block; padding: 2px 4px; border-radius: 3px; background-color: transparent; min-width: 40px; text-align: center; font-size: 0.75rem; color: rgb(200, 210, 220); font-weight: 600; text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); z-index: 2; } .ob-cl-cell--fill::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: var(--ob-fill, 0%); background-color: rgb(var(--ob-fill-r), var(--ob-fill-g), var(--ob-fill-b)); opacity: var(--ob-fill-a, 0.5); border-radius: 2px; z-index: -1; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .ob-cl-cell--empty { display: inline-block; width: 40px; height: 1.2em; background-color: rgba(60, 70, 80, 0.2); border-radius: 2px; margin: 0 1px; } /* Стили для иконок биржи и рынка над графиком */ .c-exchange { font-size: 9px !important; font-weight: 700; padding: 3px 6px !important; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; color: #fff !important; white-space: nowrap; display: inline-block; margin-right: 4px; } /* Цвета для разных бирж */ .exchange-binance { background: #f3ba2f !important; color: #000 !important; } .exchange-okx { background: #000 !important; color: #fff !important; } .exchange-bybit { background: #f7931a !important; color: #000 !important; } .exchange-mexc { background: #1e88e5 !important; color: #fff !important; } .exchange-gate { background: #0066cc !important; color: #fff !important; } .exchange-kucoin { background: #26a17b !important; color: #fff !important; } .exchange-bitget { background: #a3e635 !important; color: #000 !important; } .exchange-hyperliquid { background: #22d3ee !important; color: #000 !important; } .c-market { font-size: 9px !important; font-weight: 700; padding: 3px 6px !important; background: rgba(100, 100, 120, 0.4) !important; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; color: #fff !important; white-space: nowrap; display: inline-block; } /* Анимация для уведомления о копировании */ @keyframes fadeInOut { 0% { opacity: 0; transform: translateX(-50%) translateY(-10px); } 10% { opacity: 1; transform: translateX(-50%) translateY(0); } 90% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); } } /* ===== ПОДСВЕТКА ТЕКСТА ИЗМЕНЕНИЯ ЦЕНЫ (добавлено) ===== */ /* Для метрик над графиками */ .c-chg.price-highlight-positive { color: #27ae60 !important; font-weight: 600 !important; } .c-chg.price-highlight-negative { color: #e74c3c !important; font-weight: 600 !important; } /* Для списка монет справа */ .col-chg.price-highlight-positive { color: #27ae60 !important; font-weight: 600 !important; } .col-chg.price-highlight-negative { color: #e74c3c !important; font-weight: 600 !important; } /* ===== КОНЕЦ: Подсветка текста цены ===== */ /* ---------- попап "Плотности": настройки плотностей на графиках ---------- */ .density-settings-popover { min-width: 320px; max-height: 80vh; overflow-y: auto; } .dens-exchange-list { display: flex; flex-direction: column; gap: 2px; } .dens-exchange-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px; } .dens-exchange-row:hover { background: var(--panel-2); } .dens-exchange-row input { cursor: pointer; } .dens-exchange-row .dens-soon { margin-left: auto; font-size: 10.5px; color: var(--text-dim); } .dens-exchange-row.is-disabled { opacity: 0.55; cursor: default; } .dens-select { font-size: 12px; padding: 3px 6px; } .dens-select-inline { margin-left: 4px; } .dens-coin-add { display: flex; gap: 6px; margin: 6px 0; } .dens-coin-add input[type="text"] { width: 90px; } .dens-coin-add input[type="number"] { flex: 1; min-width: 0; } .dens-coin-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .dens-coin-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 12px; font-family: var(--font-mono); background: var(--panel-2); } .dens-coin-row .dens-coin-size { margin-left: auto; color: var(--text-dim); } .dens-coin-row button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; } .dens-coin-row button:hover { color: var(--red); } .dens-empty-hint { font-size: 11px; color: var(--text-dim); padding: 2px 6px 6px; } /* ---------- попап по ПКМ на кнопке ▤ в шапке графика: порог плотностей для ОДНОЙ монеты по каждому источнику (см. openCoinDensPopover) ---------- */ /* Ширина ФИКСИРОВАННАЯ (было ~390px при нужных 240). Раздували её две вещи: собственная минимальная ширина поля ввода (см. min-width у .cdp-val — там главное) и длинные тексты заголовка с подсказкой. Теперь контент подстраивается под ширину, а не наоборот. */ .coin-dens-popover { position: fixed; z-index: 3000; width: 240px; box-sizing: border-box; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 7px; box-shadow: 0 10px 28px rgba(0,0,0,0.5); font-family: var(--font-ui); } /* длинный тикер не должен расширять попап — обрезаем многоточием */ .cdp-title { font-size: 10.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cdp-empty, .cdp-hint { font-size: 9.5px; color: var(--text-dim); line-height: 1.25; } .cdp-hint { margin-top: 5px; } .cdp-rows { display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; } /* цвет строки: свой порог у монеты — акцентный, общий — приглушённый. Одна переменная красит и код источника, и заливку ползунка, и бегунок */ .cdp-row { display: flex; align-items: center; gap: 4px; --cdp-c: #5b6478; } .cdp-row.is-own { --cdp-c: var(--accent); } /* короткий код источника — моноширинный и фиксированной ширины, чтобы ползунки во всех строках начинались по одной линии */ .cdp-src { flex: 0 0 30px; font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-dim); font-family: var(--font-mono, monospace); } .cdp-row.is-own .cdp-src { color: var(--cdp-c); } /* у монеты свой порог — видно сразу */ /* ---------- ползунок ---------- Полностью свой вид вместо системного: у нативного range нет способа закрасить пройденную часть дорожки в WebKit, а без неё непонятно, где стоит значение. Делаем дорожку градиентом с резкой границей на --cdp-fill (её ставит cdpPaint в dashboard.js при каждом изменении). */ .cdp-range { flex: 1 1 auto; min-width: 0; height: 14px; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; } .cdp-range::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(to right, var(--cdp-c) 0 var(--cdp-fill, 0%), rgba(255,255,255,0.10) var(--cdp-fill, 0%) 100%); } .cdp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--panel); border: 2px solid var(--cdp-c); box-shadow: 0 1px 3px rgba(0,0,0,0.55); transition: transform 0.08s ease, box-shadow 0.08s ease; } .cdp-range:hover::-webkit-slider-thumb { transform: scale(1.18); } .cdp-range:active::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cdp-c) 25%, transparent); } .cdp-range:focus { outline: none; } .cdp-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdp-c) 40%, transparent); } /* Firefox: там пройденная часть — отдельный псевдоэлемент, градиент не нужен */ .cdp-range::-moz-range-track { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.10); } .cdp-range::-moz-range-progress { height: 4px; border-radius: 3px; background: var(--cdp-c); } .cdp-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--cdp-c); box-shadow: 0 1px 3px rgba(0,0,0,0.55); } /* Поле под "50 000 000" — ровно по самому длинному значению, не шире. min-width: 0 здесь ОБЯЗАТЕЛЕН, без него всё остальное не работает: у флекс- элемента min-width по умолчанию auto, а у это минимальная содержательная ширина — дефолтные 20 символов, ~142px. Она перебивает flex-basis, поле раздувается втрое против заявленного и выдавливает ползунок в узкую полоску (тот сжимался до 25px при 109 положенных). */ .cdp-val { /* 68px = ширина текста "50 000 000" (56px) + отступы и рамка — замерено, а не подобрано на глаз: при 62px максимальное значение уже не влезало */ flex: 0 0 68px; min-width: 0; height: 18px; padding: 0 4px; font-size: 10px; font-family: var(--font-ui); background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; } .cdp-val::placeholder { color: var(--text-dim); opacity: 0.75; } .cdp-clear { flex: 0 0 11px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; } .cdp-clear:hover { color: var(--red); } /* список тяжёлых монет — чипы с крестиком (общий на все источники, см. renderHeavyCoins в dashboard.js) */ .dens-heavy-hint { font-size: 11px; color: var(--text-dim); padding: 0 6px 4px; } .dens-heavy-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 6px 6px; } .dens-heavy-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 7px; border-radius: 4px; background: var(--panel-2); color: var(--text); font-size: 11px; font-weight: 600; font-family: var(--font-ui); } .dens-heavy-chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 1px; } .dens-heavy-chip button:hover { color: var(--red); } /* автодополнение тикера в "Порог для конкретной монеты" */ .dens-coin-ticker-wrap { position: relative; } .dens-coin-ticker-wrap input { width: 90px; } /* монета выбрана из списка (или совпала точно) — зелёная рамка, сразу видно, что порог применится именно к ней */ .dens-coin-ticker-wrap input.is-confirmed { border-color: var(--green); } .dens-coin-dropdown { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 150px; max-height: 220px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .dens-coin-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); font-family: var(--font-mono); } .dens-coin-opt:hover, .dens-coin-opt.is-active { background: rgba(76,139,245,0.15); } .dens-coin-opt .dens-opt-vol { font-size: 10px; color: var(--text-dim); font-weight: 400; } /* только что добавленная/обновлённая строка — коротко вспыхивает зелёным, чтобы было видно, к какой монете применился порог */ @keyframes densRowFlash { 0% { background: rgba(48,164,108,0.35); } 100% { background: var(--panel-2); } } .dens-coin-row.is-new { animation: densRowFlash 1.6s ease-out; } /* блок фильтров одного источника (биржа + рынок) в попапе "Плотности" */ .dens-filter-block { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--panel-2); } .dens-filter-block .settings-row { margin-bottom: 6px; } .dens-filter-block .settings-row:last-child { margin-bottom: 0; } .dens-filter-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .dens-filter-title .dens-soon { font-size: 10px; color: var(--text-dim); font-weight: 400; } /* поля ввода в попапе "Плотности" — тёмные, моно, с акцентной рамкой в фокусе */ .density-settings-popover input[type="text"], .density-settings-popover input[type="number"] { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: var(--font-mono); font-size: 12.5px; padding: 7px 10px; outline: none; transition: border-color 0.12s ease; } .density-settings-popover input[type="text"]:focus, .density-settings-popover input[type="number"]:focus { border-color: var(--accent); } .density-settings-popover input::placeholder { color: var(--text-dim); font-family: var(--font-sans, Inter, sans-serif); } /* денежные поля — выравнивание вправо, как в терминалах */ .density-settings-popover input.dens-money { text-align: right; } /* зелёная рамка подтверждённой монеты важнее фокусной */ .dens-coin-ticker-wrap input.is-confirmed, .dens-coin-ticker-wrap input.is-confirmed:focus { border-color: var(--green); } /* мини-секция "порог для конкретной монеты" внутри блока источника */ .dens-coin-section { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } .dens-subtitle { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; } /* заголовок-раскрывашка списка порогов по монетам: сам список свёрнут, чтобы два десятка тикеров не выдавливали вниз фильтры остальных бирж */ summary.dens-subtitle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; list-style: none; } summary.dens-subtitle::-webkit-details-marker { display: none; } summary.dens-subtitle::before { content: "▸"; font-size: 9px; color: var(--text-dim); transition: transform .12s; } details[open] > summary.dens-subtitle::before { transform: rotate(90deg); } .dens-coin-count { font-size: 10px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0 5px; } /* секции списков категорий (тяжёлые/акции/сырьё) — тоже свёрнуты по умолчанию */ .dens-cat-section { margin-top: 6px; } summary.dens-cat-summary { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; list-style: none; } summary.dens-cat-summary::-webkit-details-marker { display: none; } summary.dens-cat-summary::before { content: "▸"; font-size: 9px; color: var(--text-dim); transition: transform .12s; } details[open] > summary.dens-cat-summary::before { transform: rotate(90deg); } /* поле «свой порог» прямо в чипе списка */ /* блок биржи целиком тоже раскрывашка: свёрнутым видно только имя и главное */ summary.dens-filter-title { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; list-style: none; } summary.dens-filter-title::-webkit-details-marker { display: none; } summary.dens-filter-title::before { content: "▸"; font-size: 9px; color: var(--text-dim); transition: transform .12s; } details[open] > summary.dens-filter-title::before { transform: rotate(90deg); } .dens-block-short { margin-left: auto; font-size: 10px; color: var(--text-dim); font-weight: 400; } .dens-chip-min { width: 74px; margin: 0 4px; padding: 1px 4px; font-size: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; } .dens-chip-min::placeholder { color: var(--text-dim); } .dens-coin-add .dens-coin-ticker-wrap input { width: 92px; } /* компактные поля ввода в попапе "Плотности" (перекрывает правило выше) */ .density-settings-popover input[type="text"], .density-settings-popover input[type="number"] { padding: 3px 8px; font-size: 11.5px; border-radius: 6px; } .density-settings-popover input[disabled] { opacity: 0.45; cursor: not-allowed; } .dens-filter-block input[type="range"][disabled] { opacity: 0.45; } /* чекбокс включения параметра + статус ("работает"/"скоро") */ .dens-param-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; } .dens-param-label input[type="checkbox"] { width: auto; cursor: pointer; } .dens-status { font-size: 9.5px; padding: 1px 6px; border-radius: 8px; font-weight: 600; letter-spacing: 0.2px; } .dens-status.ok { color: var(--green); background: rgba(48,164,108,0.12); } .dens-status.soon { color: var(--text-dim); background: rgba(255,255,255,0.05); } /* поле NATR — как денежные, вправо */ .density-settings-popover input.dens-num { text-align: right; } /* своя прокрутка попапа "Плотности" и выпадающих списков — вместо системной */ .density-settings-popover, .dens-coin-dropdown { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--border) transparent; } .density-settings-popover::-webkit-scrollbar, .dens-coin-dropdown::-webkit-scrollbar { width: 7px; } .density-settings-popover::-webkit-scrollbar-track, .dens-coin-dropdown::-webkit-scrollbar-track { background: transparent; } .density-settings-popover::-webkit-scrollbar-thumb, .dens-coin-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; border: 1px solid transparent; background-clip: padding-box; } .density-settings-popover::-webkit-scrollbar-thumb:hover, .dens-coin-dropdown::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; } /* поле, без которого "+" не может создать правило — мигает красным */ @keyframes densInvalidFlash { 0%, 60% { border-color: var(--red); box-shadow: 0 0 0 1px rgba(229,72,77,0.35); } 100% { border-color: var(--border); box-shadow: none; } } .density-settings-popover input.flash-invalid { animation: densInvalidFlash 0.9s ease-out; } /* кнопка плотностей в шапке графика и мастер-кнопка в топбаре */ .c-dens-toggle { cursor: pointer; user-select: none; color: var(--text-dim); font-size: 11px; line-height: 1; padding: 1px 4px; border-radius: 4px; } .c-dens-toggle:hover { color: var(--text); background: var(--panel-2); } .c-dens-toggle.is-off { color: var(--red); } #density-master-btn.is-off { color: var(--red); border-color: var(--red); } /* стрелка возврата прижимает правую группу (стрелка + кнопка плотностей ▤) к правому краю; ▤ — всегда крайняя справа и никогда не смещается */ .cell-head .live-badge { margin-left: auto; } /* тумблер "Показывать акции" в попапе выбора биржи */ .exchange-stocks-toggle { display: flex; align-items: center; gap: 8px; padding: 6px 6px 2px; font-size: 12.5px; cursor: pointer; } .exchange-stocks-toggle input { cursor: pointer; } /* бейдж "без акций" у биржи в попапе выбора — виден, когда фильтр акций включён */ .exchange-no-stocks { font-size: 9.5px; padding: 1px 6px; border-radius: 8px; color: var(--yellow, #d9a545); background: rgba(217,165,69,0.12); font-weight: 600; letter-spacing: 0.2px; } /* ============================================================ ⚡ Импульсы — окошко внизу списка монет (см. index.html/dashboard.js) ============================================================ */ /* ---------- КАРТОЧКИ АЛГОРИТМОВ В САЙДБАРЕ ---------- Карточки те же, что на странице "Алгоритмы" (общий cardHTML), но в 350px сайдбара их настройки не помещаются, поэтому здесь видны только шапка и найденные монеты, а всё тело карточки открывается всплывающим окном по ⚙ (класс .settings-open). Это ТОТ ЖЕ DOM, просто перепозиционированный — поэтому обработчики продолжают работать и синхронизировать нечего. */ .algo-side-panel { flex-shrink: 0; display: flex; flex-direction: column; /* Стартовая высота задана явно; потолок — «всё, кроме места на список монет» (120px минимума таблицы + шапка и поиск сайдбара). ЗДЕСЬ БЫЛО 40%, И ЭТО МЕШАЛО РУЧКЕ: перетаскивание разрешает вчетверо больше (см. initPanelResize), но CSS обрезал высоту раньше — панель переставала расти на середине движения, и выглядело это как «ползунок выше не поднимается». Потолок «сколько панелей поместится вместе» — работа ручки, она видит обе и знает высоту соседней; статикой в CSS этого не выразить, поэтому здесь только защита от разрастания ПО СОДЕРЖИМОМУ. */ height: 200px; max-height: calc(100% - 180px); border-top: 1px solid var(--border); background: var(--panel); } .algo-side-resizer { height: 6px; cursor: ns-resize; flex-shrink: 0; background: linear-gradient(var(--border), transparent); } .algo-side-resizer:hover, .algo-side-resizer.dragging { background: var(--accent); opacity: 0.5; } .algo-side-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; flex-shrink: 0; border-bottom: 1px solid var(--border); } .algo-side-title { font-size: 12px; font-weight: 700; color: var(--text); } .algo-side-count { font-size: 11px; color: var(--text-dim); } .algo-side-add { margin-left: auto; padding: 1px 8px; font-size: 13px; line-height: 1.2; } /* ДВЕ КОЛОНКИ. minmax(0, 1fr) вместо просто 1fr — иначе содержимое карточки (поле названия, строки результатов) не даёт колонке сжаться уже своей «естественной» ширины, и сетка выпирает за сайдбар вместо того, чтобы поделить его пополам. По высоте ограничений нет: сколько карточек, столько рядов, список прокручивается. */ .algo-side-list { overflow-y: auto; padding: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; /* ряды прижаты к верху, а не растянуты по высоте панели */ } /* одна колонка — переключатель ▥/▭ в шапке панели (см. initAlgoSideColumns) */ .algo-side-list.cols-1 { grid-template-columns: 1fr; } .algo-side-list .algo-card, .algo-side-list .density-card { width: auto !important; /* ширину диктует сетка колонок, а не карточка */ min-width: 0; /* разрешаем сжиматься до ширины колонки */ /* Высота тянется за уголок в правом нижнем углу (см. attachCardEvents в algorithms.js). Значение живёт в --side-card-h, а НЕ в style.height: во-первых, height здесь всё равно перебит бы !important-ом, во-вторых, у той же самой карточки на странице "Алгоритмы" своя height — сайдбару нужна отдельная. Пока за уголок не тянули, работает как раньше: высота по содержимому, но не выше 260px. max-height с !important — иначе его перебивает min(900px, 90vh) !important из .algo-card. */ height: var(--side-card-h, auto) !important; min-height: var(--side-card-h, 160px); max-height: var(--side-card-h, 260px) !important; margin: 0; } /* Уголок обязан сидеть в правом нижнем УГЛУ КАРТОЧКИ, а не там, где кончился текст. Для этого прокручиваться должен список монет ВНУТРИ карточки, а сама карточка — нет: тогда absolute-уголок привязан к её неподвижному краю. (Если прокручивать карточку целиком, её padding-box уезжает вместе с содержимым и уголок вместе с ним — он и «отвязывался» от угла.) */ .algo-side-list .algo-card, .algo-side-list .density-card { overflow: hidden; display: flex; flex-direction: column; } .algo-side-list .algo-results { flex: 1 1 auto; min-height: 0; /* без этого flex-элемент не сожмётся ниже содержимого и прокрутки не будет */ display: flex; flex-direction: column; } .algo-side-list .algo-results-list { flex: 1 1 auto; min-height: 0; overflow: auto; /* и вбок тоже: колонки в узкую панель не помещаются */ max-height: none; /* перебиваем потолок 360px из .screener-mode — высоту здесь задаёт карточка */ } /* В сайдбаре ручка тянет только вниз (ширина принадлежит сетке из двух колонок) — курсор об этом честно говорит */ .algo-side-list .card-resize-handle { cursor: ns-resize; z-index: 3; } /* тело карточки (настройки) в сайдбаре спрятано, пока не нажали ⚙ — у алгоритма это .algo-card-body, у карты плотности .density-card-body */ .algo-side-list .algo-card > .algo-card-body, .algo-side-list .density-card > .density-card-body { display: none; } .algo-side-list .algo-card.settings-open > .algo-card-body, .algo-side-list .density-card.settings-open > .density-card-body { display: block; position: fixed; z-index: 4000; /* left/top ставит positionAlgoSideSettings в dashboard.js — окно привязано к своей кнопке ⚙, а не к фиксированной точке экрана */ width: 420px; /* Высота ограничена НАМЕРЕННО, а не «сколько влезет»: окно во весь экран невозможно поставить на уровень своей кнопки — оно всегда упиралось бы в края и висело бы в одной точке независимо от того, какую карточку открыли. С этим потолком окно реально едет за кнопкой, а длинные настройки просто прокручиваются внутри. */ max-height: min(560px, calc(100vh - 16px)); overflow-y: auto; padding: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } .algo-side-gear { padding: 0 4px; font-size: 12px; line-height: 1.4; flex-shrink: 0; } /* В двух колонках на карточку остаётся ~154px, а шапка рассчитана на широкую карточку страницы "Алгоритмы": отступы 8px и полноразмерные элементы съедали всё место, поле названия ужималось до 14px, а крестик вылезал за край карточки. Здесь ужимаем отступы и разрешаем названию сокращаться — остальные элементы фиксированной ширины и не сжимаются. */ .algo-side-list .algo-card-head { gap: 3px; margin-bottom: 6px; } .algo-side-list .algo-card-head .f-label { min-width: 30px; font-size: 11.5px; padding: 2px 4px; text-overflow: ellipsis; } .algo-side-list .algo-card-head .del-card { flex-shrink: 0; padding: 2px 4px; } .algo-side-list .algo-card-head .screener-toggle { flex-shrink: 0; } /* колонки результатов в такую ширину не помещаются — даём прокрутить вбок, чтобы данные были доступны, а не обрезались молча */ .algo-side-list .algo-results-list { overflow-x: auto; } /* Заголовок "Монеты, подходящие по параметрам (N)" в сайдбаре съедал целую строку ради текста, который и так очевиден — под ним сразу идут тикеры. На странице "Алгоритмы" он остаётся: там место есть и карточек на экране меньше. */ .algo-side-list .algo-results-title { display: none; } /* Максимально ужимаем всё остальное: в панель помещается вдвое больше карточек, а терять при этом нечего — данные те же */ .algo-side-list .algo-card, .algo-side-list .density-card { padding: 6px; } .algo-side-list .algo-results-cols { font-size: 9.5px; padding-bottom: 2px; } .algo-side-list .algo-result-row { font-size: 10.5px; padding: 1px 2px; } .algo-side-list .algo-results { gap: 2px; } .algo-side-list .algo-card.settings-open .algo-side-gear, .algo-side-list .density-card.settings-open .algo-side-gear { border-color: var(--accent); color: var(--accent); } /* компактные кнопки в шапке панели; переключатель колонок прижат вправо */ .algo-side-cols, .algo-side-add-density { padding: 1px 6px; font-size: 12px; line-height: 1.2; flex-shrink: 0; } .algo-side-cols { margin-left: auto; } /* результаты карты плотности в сайдбаре ведут себя как у алгоритма: растягиваются на всю карточку и прокручиваются внутри */ .algo-side-list .density-card .algo-results-list { overflow-x: auto; } .algo-side-list .density-card .algo-results-title { display: none; } /* Пояснительная заметка (какие биржи без данных, топ-N) в компактной карте раньше занимала почти всю высоту — список монет сжимался до 1-2 строк. Ограничиваем её парой строк со своей прокруткой, а список (flex:1) получает всё остальное место. */ .algo-side-list .density-card .algo-results-note { flex: 0 0 auto; max-height: 3.4em; overflow-y: auto; margin-top: 4px; } /* Карте плотности нужен ОПРЕДЕЛЁННЫЙ рост (а не auto): список плотностей длинный, а при height:auto flex-список внутри схлопывается почти в ноль и было видно 1-2 монеты. Высота тянется за уголок (--side-card-h, см. attachDensityCardEvents), по умолчанию 340px — это ~15 строк. */ .algo-side-list .density-card { height: var(--side-card-h, 340px) !important; min-height: 200px; max-height: none !important; } .impulse-panel { flex-shrink: 0; display: flex; flex-direction: column; max-height: calc(100% - 180px); /* то же правило, что у панели алгоритмов: оставить место списку монет */ border-top: 1px solid var(--border); background: var(--panel); /* ширины колонок ленты — одни и те же переменные для шапки и строк, поэтому они всегда выровнены; их правит перетаскивание ручек в шапке (dashboard.js, секция "ширины колонок ленты") и запоминает localStorage */ --imp-w0: 52px; /* Время */ --imp-w1: 74px; /* Тикер */ --imp-w2: 88px; /* Изм. */ --imp-w3: 54px; /* Объём */ --imp-w4: 44px; /* NATR */ } /* ручка изменения высоты — тонкая полоса по верхнему краю панели */ .impulse-resizer { flex-shrink: 0; height: 5px; cursor: ns-resize; background: transparent; } .impulse-resizer:hover, .impulse-resizer.dragging { background: rgba(192, 132, 252, 0.4); } .impulse-sound-row { display: flex; align-items: center; gap: 8px; } .impulse-sound-row select { flex: 1; min-width: 0; padding: 4px 8px; background: var(--panel-2, rgba(255,255,255,0.04)); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 12px; font-family: inherit; } .impulse-sound-row select:focus { outline: none; border-color: #c084fc; } .impulse-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .impulse-master { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; cursor: pointer; user-select: none; color: var(--text); } .impulse-count { font-size: 11px; color: #c084fc; font-family: var(--font-mono); } .impulse-gear-wrap { margin-left: auto; } .impulse-gear { padding: 3px 8px; } /* попап настроек открывается ВВЕРХ — панель у нижнего края экрана */ .impulse-popover { top: auto; bottom: calc(100% + 6px); right: 0; /* 340, а не 300: в строке правила стоит порог объёма, и «2 000 000» в 300px не помещался — поле показывало «2 000 0» или просто «2», из-за чего два миллиона были неотличимы от двух долларов */ width: 340px; max-height: 70vh; overflow-y: auto; } /* условия порогов — в две колонки. ВАЖНО: minmax(0, 1fr), а не просто 1fr — иначе трек не может стать уже "естественной" ширины поля ввода, левая колонка распирается, правая сплющивается до одних чекбоксов */ .impulse-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; margin-bottom: 6px; } #impulse-vol-rows { grid-template-columns: minmax(0, 1fr); } /* объёмным цифрам нужна вся ширина — читаемость важнее */ .impulse-cond-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; font-size: 12px; } .impulse-cond-row label { display: flex; align-items: center; gap: 5px; min-width: 0; cursor: pointer; color: var(--text); white-space: nowrap; overflow: hidden; } .impulse-cond-row input[type="checkbox"] { margin: 0; flex-shrink: 0; } .impulse-cond-row input[type="number"], .impulse-cond-row input[type="text"] { width: 100%; min-width: 0; padding: 3px 7px; background: var(--panel-2, rgba(255,255,255,0.04)); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-family: var(--font-mono); font-size: 12px; } .impulse-cond-row input[type="number"]:focus, .impulse-cond-row input[type="text"]:focus { outline: none; border-color: #c084fc; } .impulse-cond-row.is-off input[type="number"], .impulse-cond-row.is-off input[type="text"] { opacity: 0.35; } /* ---- правила импульса: "окно цены ≥ % И окно объёма ≥ $" одной строкой ---- Колонки фиксированы, чтобы селекты и пороги во всех правилах стояли по одной вертикали — иначе список из пяти правил читается как каша. */ .imp-rules { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .imp-rules-empty { font-size: 11px; color: var(--text-dim); padding: 2px 0 4px; } .imp-rule { display: grid; /* Ширины подобраны ПО ЗАМЕРАМ самых длинных реальных значений, а не на глаз: порог цены до "12.5", порог объёма до "50 000 000" (~70px текста). При более узких колонках значение молча обрезалось прямо в поле — видно "50 000 0" и не понять, что там на самом деле. Разделитель "и" убран ради этих же пикселей: строка и без него читается как одно условие. */ /* колонок восемь: галочка, И/ИЛИ, окно цены, порог %, знак %, окно объёма, порог объёма, знак $, крестик. Знак валюты добавлен не для красоты: без него поле объёма читалось как «сколько-то», и порог в 2 доллара вместо двух миллионов выглядел нормально */ grid-template-columns: auto 34px 42px 40px auto minmax(52px, 0.8fr) minmax(86px, 1.2fr) auto auto; align-items: center; gap: 2px; font-size: 12px; } .imp-rule.is-off > *:not(.imp-r-on) { opacity: 0.4; } .imp-rule input[type="checkbox"] { margin: 0; } .imp-rule select, .imp-rule input[type="number"], .imp-rule input[type="text"] { width: 100%; min-width: 0; /* min-width: 0 обязателен — у input своя минимальная ширина в 20 символов, и без этого grid-колонки просто игнорируются */ padding: 3px 3px; background: var(--panel-2, rgba(255,255,255,0.04)); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-family: var(--font-mono); font-size: 11.5px; } .imp-rule select:focus, .imp-rule input:focus { outline: none; border-color: #c084fc; } /* стрелки-спиннеры съедают ~13px ширины поля — на них не хватало места значению "12.5", а пользы от них тут нет: порог набирают с клавиатуры */ .imp-rule input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .imp-rule input[type="number"]::-webkit-outer-spin-button, .imp-rule input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .imp-rule input:disabled { opacity: 0.35; } .imp-r-unit, .imp-r-and { color: var(--text-dim); font-size: 11px; white-space: nowrap; } .imp-r-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; } .imp-r-del:hover { color: var(--red); } .imp-rule-add { font-size: 11.5px; padding: 3px 8px; } /* переключатель логики правила: два состояния, подпись на кнопке и есть текущее. «ИЛИ» — нейтральное (так работало всегда), «И» — выделено: это обязательное условие, и его легко не заметить, разбираясь, почему сигналов нет */ .imp-r-logic { border: 1px solid var(--border); border-radius: 4px; background: none; color: var(--text-dim); font-size: 9.5px; font-weight: 700; font-family: var(--font-ui); padding: 2px 4px; cursor: pointer; min-width: 26px; line-height: 1; } .imp-r-logic:hover { color: var(--text); border-color: var(--text-dim); } .imp-r-logic.is-and { color: #e0a32e; border-color: #e0a32e; background: rgba(224,163,46,0.12); } /* ---- свои правила ДОБРАННЫХ бирж (см. renderImpulseExchangeBlocks) ---- Отдельная рамка на биржу: в попапе сверху правила активной биржи, ниже — по блоку на каждую добранную, и по рамке видно, где чьи пороги. */ .imp-ex-block { border: 1px solid var(--border); border-radius: 7px; padding: 8px; margin-top: 8px; background: rgba(255, 255, 255, 0.02); } .imp-ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .imp-ex-name { font-size: 11.5px; font-weight: 700; color: var(--text); } .imp-ex-state { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; } .imp-ex-own, .imp-ex-reset { width: 100%; font-size: 11px; padding: 3px 8px; margin-top: 4px; } /* значок биржи в строке ленты — только у сигналов с добранных бирж */ .impulse-row .imp-ticker .result-exchange { margin-right: 4px; transform: scale(0.9); } /* ---- попап настроек импульсов: раскрывающиеся секции ---- */ .impulse-popover { width: 340px; /* фиксированное позиционирование задаёт JS при открытии — попап рисуется ПОВЕРХ всего и не режется краями панели/сайдбара (overflow предков) */ } .imp-sec { border: 1px solid var(--border); border-radius: 7px; margin-bottom: 6px; background: rgba(255, 255, 255, 0.02); } .imp-sec > summary { list-style: none; cursor: pointer; user-select: none; padding: 7px 10px; font-size: 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; } .imp-sec > summary::-webkit-details-marker { display: none; } .imp-sec > summary::before { content: "▸"; color: #c084fc; font-size: 10px; transition: transform 0.12s ease; } .imp-sec[open] > summary::before { transform: rotate(90deg); } .imp-sec[open] > summary { border-bottom: 1px solid var(--border); } .imp-sec > *:not(summary) { margin-left: 10px; margin-right: 10px; } .imp-sec > .settings-title:first-of-type { margin-top: 7px; } .imp-sec > *:last-child { margin-bottom: 8px; } .impulse-popover .settings-title { font-size: 11px; margin: 6px 0 4px; } .impulse-popover .settings-row { margin: 5px 0; } .impulse-popover .settings-row label { font-size: 12px; } .impulse-popover .impulse-hide-stocks { font-size: 12px; margin-top: 6px; } .impulse-popover .impulse-ob-row label { font-size: 12px; } .impulse-popover .impulse-ob-hint { font-size: 10.5px; } #impulse-reset { width: 100%; } .impulse-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; min-height: 26px; } .impulse-empty { padding: 8px 10px; font-size: 11.5px; color: var(--text-dim); } /* ШАПКА И СТРОКИ — ОДНА СЕТКА. Треки заданы переменными (см. .impulse-panel), последний трек — «хвост» 1fr: он съедает остаток ширины, поэтому заголовок всегда стоит ровно над своей колонкой. minmax(0, ...) вместо жёсткой ширины — страховка на узкий сайдбар: если сумма колонок не влезает, они ужимаются (одинаково в шапке и в строках — выравнивание не теряется), а не вылезают за край. gap: 0 — отступ даёт padding-right ячейки, иначе ширина колонки и то, что тянет пользователь, разъезжаются на величину зазора. */ .impulse-cols, .impulse-row { display: grid; grid-template-columns: minmax(0, var(--imp-w0)) minmax(0, var(--imp-w1)) minmax(0, var(--imp-w2)) minmax(0, var(--imp-w3)) minmax(0, var(--imp-w4)) minmax(0, 1fr); gap: 0; } .impulse-cols > *, .impulse-row > * { min-width: 0; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .impulse-cols { padding: 4px 10px 3px; font-size: 10.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); flex-shrink: 0; user-select: none; } .impulse-cols .imp-col { position: relative; } .impulse-cols .imp-num { text-align: right; } /* ручка ширины: узкая зона у правого края заголовка + видимый разделитель */ .impulse-cols .imp-colres { position: absolute; top: -4px; bottom: -3px; right: 0; width: 9px; cursor: col-resize; z-index: 2; } .impulse-cols .imp-colres::after { content: ""; position: absolute; left: 4px; top: 3px; bottom: 2px; width: 1px; background: var(--border); } .impulse-cols .imp-colres:hover::after, .impulse-cols .imp-colres.is-dragging::after { background: #c084fc; } body.imp-col-resizing { cursor: col-resize; user-select: none; } .impulse-row { align-items: center; padding: 4px 10px; font-size: 12px; font-family: var(--font-mono); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); } .impulse-row:hover { background: rgba(192,132,252,0.10); } .impulse-row .imp-ticker { font-weight: 700; color: #c084fc; } .impulse-row .imp-chg .imp-win { font-style: normal; color: #9aa1ad; font-size: 10px; margin-left: 5px; } .impulse-row .imp-time { color: var(--text-dim); font-size: 11px; } .impulse-row .imp-vol { color: var(--text-dim); font-size: 11.5px; text-align: right; } /* NATR(14)/5м монеты «прямо сейчас» — тот же смысл и та же подсветка «ходовой» монеты (> 1%), что и у колонки NATR в списке монет */ .impulse-row .imp-natr { color: var(--text-dim); font-size: 11.5px; text-align: right; } .impulse-row .imp-natr.is-hot { color: #f39c12; } .impulse-row .imp-natr.is-empty { color: #6b7280; } /* NATR, взятый с ДРУГОЙ биржи (на бирже сигнала он не считается) — приглушаем, чтобы не выдавать его за родное значение; точное объяснение в подсказке */ .impulse-row .imp-natr.is-other { opacity: 0.65; font-style: italic; } /* погасший (старый) сигнал — лишь слегка приглушён, всё остаётся читаемым */ .impulse-row.is-faded { opacity: 0.82; } .impulse-row.is-new { animation: impulse-flash 1.2s ease-out; } @keyframes impulse-flash { 0% { background: rgba(192,132,252,0.35); } 100% { background: transparent; } } /* подсветка совпавших монет: в списке — фиолетовые полосы С ОБЕИХ сторон, заметный фон и фиолетовый тикер; в сетке — планки СВЕРХУ И СНИЗУ всей ячейки графика (у алгоритмов остаётся янтарная снизу шапки — сигналы различимы одновременно) */ .coin-table tbody tr.impulse-match { box-shadow: inset 3px 0 0 0 #c084fc, inset -3px 0 0 0 #c084fc; background: rgba(192, 132, 252, 0.18); } .coin-table tbody tr.impulse-match td:first-child { color: #c084fc; font-weight: 700; } .coin-table tbody tr.algo-match.impulse-match { box-shadow: inset 3px 0 0 0 var(--amber), inset -3px 0 0 0 #c084fc; } .coin-table tbody tr.impulse-match.is-active { background: rgba(192, 132, 252, 0.26); } .chart-cell.impulse-match { /* класс ставится, но рамка всей ячейки убрана — подсветка на плашке */ } .cell-head.impulse-match { box-shadow: inset 0 2px 0 0 #c084fc, inset 0 -2px 0 0 #c084fc; background: rgba(192, 132, 252, 0.10); } .cell-head.algo-match.impulse-match { /* оба сигнала сразу: фиолет сверху и снизу (импульс) + янтарная полоса алгоритма прижата к нижнему краю под фиолетовой */ box-shadow: inset 0 2px 0 0 #c084fc, inset 0 -2px 0 0 var(--amber), inset 0 -4px 0 0 #c084fc; } /* строка статуса в окошке импульсов */ .impulse-status { line-height: 1.45; } .impulse-status.is-err { color: var(--amber); } /* время сигнала и погасшие (старые) сигналы в списке импульсов */ /* (правила времени/угасания сигналов перенесены в колонковую вёрстку выше) */ .impulse-clear { padding: 3px 8px; } /* чекбокс "скрывать акции" в настройках импульсов */ .impulse-hide-stocks { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); cursor: pointer; user-select: none; } /* вспышка "тикер скопирован" при ПКМ по строке ленты импульсов */ .impulse-row.is-copied { animation: impulse-copied 0.7s ease-out; } @keyframes impulse-copied { 0% { background: rgba(70, 200, 120, 0.45); } 100% { background: transparent; } } /* подсказка в настройках открытия сигнала в стакане */ .impulse-ob-hint { font-size: 11px; color: var(--text-dim); line-height: 1.4; } .impulse-ob-hint a { color: #c084fc; } .impulse-ob-row label { display: flex; align-items: center; gap: 7px; font-size: 12px; cursor: pointer; user-select: none; } /* поле URL внешней команды и селект цели открытия */ .impulse-ob-row select, .impulse-ob-external-row input[type="text"] { flex: 1; min-width: 0; padding: 4px 8px; background: var(--panel-2, rgba(255,255,255,0.04)); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 12px; font-family: inherit; } .impulse-ob-external-row input[type="text"] { font-family: var(--font-mono); font-size: 11px; } .impulse-ob-external-row input[type="text"]:focus, .impulse-ob-row select:focus { outline: none; border-color: #c084fc; } /* панель инструментов рисования видна ТОЛЬКО при наведении на свой график (или пока в ней выбран активный инструмент — тогда не прячется) */ .cell-body .draw-toolbar { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .cell-body:hover .draw-toolbar, .cell-body .draw-toolbar:has(.draw-btn.active) { opacity: 1; pointer-events: auto; } /* чип быстрого сигнального уровня — ЛЕВЕЕ шкалы цены, чтобы сама шкала оставалась свободной для зажатия (масштаб графика по высоте); точный отступ от края (ширина шкалы + 6px) задаёт JS при показе */ .axis-alert-chip { position: absolute; right: 58px; z-index: 6; padding: 0 3px; font-size: 9px; line-height: 1.5; background: rgba(19, 20, 25, 0.92); border: 1px solid var(--amber); color: var(--amber); border-radius: 5px; cursor: pointer; font-family: inherit; } .axis-alert-chip:hover { background: var(--amber); color: #17130a; } /* ---------- горячие клавиши рисования (попап настроек графиков) ---------- */ .draw-hotkeys { display: flex; flex-direction: column; gap: 4px; } .hotkey-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .hotkey-label { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hotkey-field { width: 110px; padding: 3px 8px; background: var(--panel-2, rgba(255,255,255,0.04)); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-family: var(--font-mono); font-size: 11.5px; cursor: pointer; text-align: center; } .hotkey-field.is-capturing { border-color: #c084fc; color: #c084fc; animation: hotkey-pulse 1s ease-in-out infinite; } @keyframes hotkey-pulse { 50% { background: rgba(192,132,252,0.12); } } .hotkey-clear { padding: 2px 7px; background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-dim); cursor: pointer; } .hotkey-clear:hover:not(:disabled) { color: var(--red, #e5484d); border-color: var(--red, #e5484d); } .hotkey-clear:disabled { opacity: 0.3; cursor: default; } /* ---------- сработавшие сигнальные уровни (🔔) — ОРАНЖЕВАЯ подсветка ---------- */ /* строка в ленте импульсов */ .impulse-row.is-alertlvl .imp-ticker { color: var(--amber, #f5a623); } .impulse-row.is-alertlvl .imp-chg { color: var(--amber, #f5a623); } .impulse-row.is-alertlvl:hover { background: rgba(245, 166, 35, 0.10); } .impulse-row.is-alertlvl.is-new { animation: alertlvl-flash 1.2s ease-out; } @keyframes alertlvl-flash { 0% { background: rgba(245, 166, 35, 0.35); } 100% { background: transparent; } } /* список монет */ .coin-table tbody tr.alertlvl-match { box-shadow: inset 3px 0 0 0 var(--amber, #f5a623), inset -3px 0 0 0 var(--amber, #f5a623); background: rgba(245, 166, 35, 0.16); } .coin-table tbody tr.alertlvl-match td:first-child { color: var(--amber, #f5a623); font-weight: 700; } /* плашка ячейки в сетке графиков */ .cell-head.alertlvl-match { box-shadow: inset 0 2px 0 0 var(--amber, #f5a623), inset 0 -2px 0 0 var(--amber, #f5a623); background: rgba(245, 166, 35, 0.10); } /* меню «где ещё есть монета» — правый клик по значку биржи в шапке графика */ .venue-menu { position: fixed; z-index: 9000; min-width: 176px; overflow: visible; /* список показывается целиком, без прокрутки */ background: #1b1e24; border: 1px solid #2f3542; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); font-size: 12px; } .venue-menu-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px; color: #8b93a1; border-bottom: 1px solid #2f3542; position: sticky; top: 0; background: #1b1e24; } .venue-menu-coin { flex: 1; color: var(--text); } .venue-menu-vollabel { color: #7f8797; font-size: 11px; } .venue-menu-body { padding: 3px 0; } .venue-row { display: flex; align-items: center; gap: 8px; padding: 4px 9px; color: var(--text); } .venue-row.is-clickable { cursor: pointer; } .venue-row.is-clickable:hover { background: #262b34; } .venue-row.is-current { color: #e8b53a; } .venue-row .result-market { flex: none; } .venue-name { min-width: 62px; } .venue-vol { flex: 1; text-align: right; color: #9aa3b2; font-variant-numeric: tabular-nums; } .venue-cur { color: #e8b53a; } /* подложка под меню «где ещё есть монета»: ловит клик мимо (см. showVenueMenu) */ .venue-menu-backdrop { position: fixed; inset: 0; z-index: 8999; /* ровно под меню (.venue-menu — 9000) */ background: transparent; } /* монета из объединённого списка, добранная с другой биржи */ .col-ticker.is-foreign { color: #cbd3e1; } .col-ticker.is-foreign::after { content: ""; } /* галочка «добирать монеты этой биржи» в попапе бирж */ .exchange-merge { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; cursor: pointer; color: #7f8797; } .exchange-merge input { cursor: pointer; } .exchange-merge span { font-size: 12px; } /* ПРОКРУТКА ПОПАПОВ НАСТРОЕК. Список настроек вырос (схемы, объём, сетка, горячие клавиши), и на невысоком экране нижние пункты просто не помещались — попап уходил за край, и до них было не добраться. Полосу стилизуем под тему: системная светлая полоса на тёмной панели выглядит как чужая деталь. */ .settings-popover, .density-settings-popover { max-height: min(78vh, 760px); overflow-y: auto; overscroll-behavior: contain; /* докрутил до конца — страница под попапом не едет */ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .settings-popover::-webkit-scrollbar, .density-settings-popover::-webkit-scrollbar { width: 10px; } .settings-popover::-webkit-scrollbar-track, .density-settings-popover::-webkit-scrollbar-track { background: transparent; } .settings-popover::-webkit-scrollbar-thumb, .density-settings-popover::-webkit-scrollbar-thumb { background: var(--border); border: 2px solid var(--panel); border-radius: 6px; } .settings-popover::-webkit-scrollbar-thumb:hover, .density-settings-popover::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* НОВАЯ ПЛОТНОСТЬ В КАРТЕ — подсветка на несколько секунд. Цвет акцентный, не зелёный и не красный: новая стенка сама по себе не «за рост» и не «за падение», и красить её торговым цветом значило бы подсказывать направление там, где его нет. */ @keyframes dens-new-flash { from { background: color-mix(in srgb, var(--accent) 45%, transparent); } to { background: transparent; } } .density-card .result-row.dens-row-new { animation: dens-new-flash 6s ease-out forwards; box-shadow: inset 2px 0 0 var(--accent); } /* ---------- «И»/«ИЛИ» у параметра карточки алгоритма ---------- Тот же вид и та же семантика, что у правил Импульсов (.imp-r-logic): «И» — обязательное условие, «ИЛИ» — самодостаточный повод. Одинаковый внешний вид здесь важнее экономии стилей: механизм один и тот же, и человек не должен догадываться об этом заново. */ .param-logic { border: 1px solid var(--border); border-radius: 4px; background: none; color: var(--text-dim); font-size: 9.5px; font-weight: 700; font-family: var(--font-ui); padding: 2px 4px; cursor: pointer; min-width: 30px; line-height: 1; flex: 0 0 auto; } .param-logic:hover { color: var(--text); border-color: var(--text-dim); } .param-logic.is-and { color: #e0a32e; border-color: #e0a32e; background: rgba(224, 163, 46, 0.12); } .param-logic.is-or { color: var(--accent); border-color: var(--accent); background: rgba(88, 166, 255, 0.12); } /* строка-сводка над списком параметров */ .params-summary { font-size: 10.5px; color: var(--text-dim); margin-bottom: 6px; padding: 3px 6px; border-left: 2px solid var(--border); } /* ---------- метки «чем зацепилась монета» в строке результата ---------- */ .result-matched { display: inline-flex; gap: 3px; margin-left: 5px; flex-wrap: wrap; min-width: 0; } .result-hit { font-size: 9px; line-height: 1.3; padding: 1px 4px; border-radius: 3px; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; } .result-hit.is-or { color: var(--accent); border-color: rgba(88, 166, 255, 0.45); } .result-hit.is-and { color: #e0a32e; border-color: rgba(224, 163, 46, 0.4); } /* ---------- заметки о покрытии данных — под значком ---------- Текст полезный (какие монеты вообще не проверялись), но постоянно висеть над списком он не должен: значок с числом всегда виден, полный текст — по клику. */ .results-note-toggle { border: 1px solid var(--border); border-radius: 4px; background: none; color: var(--text-dim); font-size: 10px; padding: 1px 6px; cursor: pointer; font-family: var(--font-ui); line-height: 1.4; } .results-note-toggle:hover { color: var(--amber); border-color: var(--amber); } .results-note-body { margin-top: 4px; font-size: 10.5px; color: var(--text-dim); border-left: 2px solid var(--border); padding: 3px 6px; } .results-note-body div + div { margin-top: 4px; } /* ---------- свой таймфрейм в шапке графика ---------- Секундные бары смотрят по одной монете, поэтому переключатель стоит у каждого графика; общий (в шапке страницы) остался минутным и выше. */ .cell-head .c-tf { /* ФОН ЗАДАЁМ ЯВНО, И У СПИСКА ТОЖЕ. С `background: none` сам переключатель сливался с шапкой, а раскрытый список браузер рисовал системным — белым полем со светло-серым текстом, где на тёмной теме не видно ничего. */ background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-size: 9.5px; font-family: var(--font-mono); padding: 1px 2px; margin-left: 3px; cursor: pointer; line-height: 1.3; max-width: 52px; } .cell-head .c-tf:hover { border-color: var(--text-dim); } .cell-head .c-tf:focus { outline: none; border-color: var(--accent); } .cell-head .c-tf option { background: var(--panel-2); color: var(--text); font-family: var(--font-mono); font-size: 11px; } .cell-head .c-tf option:checked { background: var(--accent); color: #0b0c10; } /* метки причин: покупки/рост — зелёным, продажи/падение — красным. Цвет направления читается мгновенно, а торговать их надо в разные стороны. */ .result-hit.is-up { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); } .result-hit.is-down { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); } /* ---------- кто вошёл: логин, «Доступы» (только владельцу), «Выйти» ---------- */ .acc-box { display: flex; align-items: center; gap: 8px; margin-right: 8px; } .acc-login { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-link { font-size: 11px; color: var(--text-dim); text-decoration: none; } .acc-link:hover { color: var(--accent); } /* перенос настроек между адресами и устройствами */ .settings-transfer { display: flex; gap: 6px; } .settings-transfer .btn { flex: 1; font-size: 11px; }