/* ========================================================================== Model combobox ========================================================================== */ /* A picker is a control, not a column: without a ceiling these stretched to whatever the widest saved name happened to be. Wide enough for a long preset title, bounded enough that a row of them still reads as a row. */ .combo { position: relative; max-width: 22rem; } /* An open list has to escape whatever card it sits in. The module cards clip their content (rounded corners: `overflow: hidden`) and paint in source order, so a list positioned inside one was cut off at the card's bottom edge and covered by the card below it — visible as "only the search box, results behind the background". While a list is open, and only then, the card stops clipping and is lifted above its siblings; the corners it needs that clipping for are unaffected the rest of the time. The card classes are named here because CSS cannot say "whichever ancestor clips". These are the ones that hold a combo today: the preset picker sits in the quick/summary rail cards, the timezone pickers in the section cards. A combo dropped into some other clipping container will need that container adding to this list — the alternative is moving every open list to , which is what .fancy-select does and what it costs there (see openFancySelect: every lookup of the list has to go through a stored reference, because it is no longer a descendant of its own widget). */ .combo:has(.combo-list:not(.hidden)) { z-index: 60; } /* Любой предок, который обрезает содержимое, а не перечисленные вручную четыре карточки: список открывался внутри .card, .dm-subcard и .modal-body тоже — и там его срезало ровно так же, просто об этом узнавали позже. Действует только пока список открыт, поэтому скруглённые углы страдают лишь в этот момент. */ .card:has(.combo-list:not(.hidden)), .modal:has(.combo-list:not(.hidden)), .dm-subcard:has(.combo-list:not(.hidden)), .dm-quick-card:has(.combo-list:not(.hidden)), .dm-summary-card:has(.combo-list:not(.hidden)), .dm-details:has(.combo-list:not(.hidden)), .dm-section-card:has(.combo-list:not(.hidden)) { overflow: visible; position: relative; z-index: 60; } .combo-list { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; /* Whichever is smaller: the list never grows past half the window, so the last entries cannot end up below the fold with nothing to say they are there. */ max-height: min(16rem, 50vh); overflow-y: auto; overflow-x: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .combo-item { padding: 0.4rem 0.7rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.05rem; } .combo-list.combo-list-up { top: auto; bottom: calc(100% + 4px); } /* The dropdown's own search field: pinned above the rows so it stays put while they scroll, and while several of these lists rebuild their rows on every keystroke. */ .combo-search { position: sticky; top: 0; z-index: 1; padding: 0.4rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .combo-search .input { height: 2.1rem; font-size: 0.8rem; width: 100%; } [data-combo-items] { display: block; } .combo-item:hover, .combo-item:focus-visible { background: var(--color-surface-muted); } /* A row with something to its right — a preset and its delete button. */ .combo-item-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; } .combo-item-remove { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 0.35rem; background: transparent; color: var(--color-text-faint); cursor: pointer; } .combo-item-remove:hover { background: var(--color-danger-soft, var(--color-surface)); color: var(--color-danger); } .combo-item-remove .icon { width: 0.85rem; height: 0.85rem; } .combo-item-remove:disabled { opacity: 0.5; cursor: default; } [data-channel-row]:hover { background: var(--color-surface-muted); } /* min-width:0 + ellipsis: длинное имя пресета сжимается в одну строку с многоточием, а не распирает список — кнопка удаления справа всегда на месте. */ .combo-item-name { font-size: 0.85rem; font-weight: 500; color: var(--color-text); min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-item-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .combo-item-id { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-item-price { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } .combo-empty { padding: 0.6rem 0.7rem; font-size: 0.8rem; color: var(--color-text-muted); } /* Применение пресета: поле выбора и кнопка-галочка в одну строку. Поле забирает всю свободную ширину и умеет сжиматься (min-width: 0 — без него grid-элемент упирается в свою минимальную ширину по содержимому и выталкивает кнопку), кнопка держит свой квадрат. Раньше у поля стоял жёсткий min-width: 13rem, и в правой колонке модулей (278px) строка не помещалась. */ .preset-apply { display: flex; align-items: center; gap: 8px; } .preset-apply .combo { flex: 1 1 auto; max-width: none; min-width: 0; } .preset-apply [data-preset-fill] { flex: 0 0 auto; } /* ── Пресеты: сохранённые брифы модуля. Кнопка «Пресеты (N)» открывает модалку с карточками; карточка нарисована как верхний лист стопки одинаковых брифов (тонкий второй лист за ней — единственный акцент блока). Имя пресета ВЕЗДЕ живёт в одну строку с многоточием — длинное название не ломает ни карточку, ни плашку «Применён», полное имя показывает title. ── */ .preset-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; } .preset-open-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; } /* В карточках рейла кнопка «Пресеты (N)» и плашка «Применён» занимают всю ширину блока — как соседние кнопки запуска/сохранения, а не пуговица посреди колонки. */ .dm-quick-card .preset-panel, .dm-summary-card .preset-panel { width: 100%; } .dm-quick-card .preset-open-btn, .dm-summary-card .preset-open-btn { width: 100%; justify-content: center; } .dm-quick-card .preset-applied-bar, .dm-summary-card .preset-applied-bar { width: 100%; justify-content: space-between; } .preset-open-btn .icon { width: 15px; height: 15px; flex-shrink: 0; } .preset-count { background: var(--color-primary-bg); color: var(--color-primary-hover); border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px; font-variant-numeric: tabular-nums; flex-shrink: 0; } .preset-applied-bar { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text); background: var(--color-primary-bg); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); border-radius: 10px; padding: 4px 10px; max-width: 100%; min-width: 0; } .preset-applied-bar[hidden] { display: none; } .preset-applied-bar .icon { width: 13px; height: 13px; color: var(--color-primary-hover); flex-shrink: 0; } .preset-applied-bar b { color: var(--color-primary-hover); font-weight: 800; max-width: 9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preset-applied-bar .btn { flex-shrink: 0; } .preset-empty-hint { display: inline-block; } .preset-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .preset-modal-sub { margin: 0 0 12px; font-size: 12px; color: var(--color-text-muted); } .preset-modal-search { display: flex; align-items: center; gap: 8px; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; transition: border-color .15s; } .preset-modal-search:focus-within { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); } .preset-modal-search .icon { width: 15px; height: 15px; color: var(--color-text-faint); flex-shrink: 0; } .preset-modal-search input { border: none; background: transparent; outline: none; width: 100%; font-size: 14px; color: var(--color-text); } .preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 720px) { .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .preset-grid { grid-template-columns: 1fr; } } .preset-card { position: relative; display: flex; flex-direction: column; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 16px; padding: 14px; transition: border-color .15s, box-shadow .15s; } /* «Стопка брифов»: второй лист за карточкой; при наведении выглядывает чуть сильнее. z-index:-1 у псевдоэлемента кладёт его ПОД фон карточки, но поверх фона модалки — карточка нарочно не создаёт stacking context. */ .preset-card::before { content: ""; position: absolute; inset: 5px -3px -3px 5px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); z-index: -1; transition: transform .15s; } .preset-card:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: var(--shadow-sm); } .preset-card:hover::before { transform: translate(1px, 1px); } @media (prefers-reduced-motion: reduce) { .preset-card::before { transition: none; } } .preset-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .preset-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; } .preset-card-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--color-primary-bg); color: var(--color-primary-hover); flex-shrink: 0; } .preset-card-icon .icon { width: 15px; height: 15px; } /* min-width:0 обязателен: flex-элемент иначе не сжимается и многоточие не наступает. */ .preset-card-name { font-weight: 800; font-size: 14px; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Сколько параметров увезёт этот бриф — заполняет JS из data-preset-values. */ .preset-card-meta { margin-top: 6px; padding-left: 36px; font-size: 11px; color: var(--color-text-faint); font-variant-numeric: tabular-nums; } .preset-card-tool { width: 26px; height: 26px; border: none; background: transparent; border-radius: 8px; display: grid; place-items: center; color: var(--color-text-faint); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; } .preset-card-tool .icon { width: 15px; height: 15px; } .preset-card-tool:hover { background: var(--color-surface); color: var(--color-primary-hover); } .preset-card-tool.danger:hover { background: var(--color-danger-bg); color: var(--color-danger-text); } .preset-card-info { margin: 8px 0; max-height: 140px; overflow-y: auto; border-top: 1px solid var(--color-border); padding-top: 8px; font-size: 11px; } .preset-card-info[hidden] { display: none; } .preset-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 0; } .preset-info-row span { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preset-info-row b { color: var(--color-text); font-weight: 700; text-align: right; word-break: break-word; } .preset-card-apply { margin-top: 12px; width: 100%; } .preset-grid-empty { grid-column: 1 / -1; text-align: center; color: var(--color-text-muted); font-size: 13px; padding: 20px 16px; } .preset-grid-empty.hidden { display: none; } /* Модалка пресетов — выше обводок настроек и верхней навигации (не просвечивает). */ .modal[data-preset-modal] { z-index: 500; } .modal-backdrop[data-for^="preset-modal"] { z-index: 499; }