/* Схема кабеля — оформление интерфейса. Две темы одного инструмента. Светлая существует ради белого листа чертежа: вокруг него тёплый графит, акцент один — чертёжно-синий. Тёмная сделана из тех же красок наоборот: фоном становятся чернила (#1a1917 светлой темы), а бумагой — свет. Лист на экране тоже переворачивается: тёмное поле, светлые линии. На печать и в экспорт лист уходит светлым всегда — тема живёт только на экране (см. renderSheet: theme задаётся лишь холсту). Все цвета собраны в переменные: тема меняет их значения, а не правила. */ :root { color-scheme: light; --paper: #ffffff; /* лист */ --stage: #d5d1ca; /* поле вокруг листа */ --bg: #f2f1ee; /* фон приложения */ --panel: #f8f7f5; /* панели */ --raised: #ffffff; /* меню, окна */ --field: #ffffff; /* поля ввода */ --sunken: #f1efec; /* нажатая кнопка, дорожка переключателя */ --ink: #1a1917; --ink-2: #4c4842; --muted: #7c776f; --faint: #a29c93; --line: #dedbd5; --line-soft: #e9e6e1; --line-strong: #c9c4bc; --accent: #2f5d8a; --accent-ink: #24486b; --accent-soft: #e4ecf4; --danger: #a8342b; --danger-soft: #fdf4f3; --danger-line: #ddb7b3; --ok: #3d6b45; --warn: #8a6524; --warn-soft: #fbf5eb; --err-soft: #fbf1f0; --info-soft: #f1f0ed; --hover: rgba(26, 25, 23, .06); /* прозрачная кнопка */ --hover-soft: rgba(26, 25, 23, .05); /* строка в списке цепей окна */ --row-hover: #edecea; /* строка списка: непрозрачна — под неё подложены кнопки строки */ --hover-faint: rgba(26, 25, 23, .04); /* строка таблицы контактов */ --pressed: rgba(26, 25, 23, .09); --scrim: rgba(26, 25, 23, .35); --glass: rgba(255, 255, 255, .92); /* панель инструментов над листом */ --primary-bg: var(--ink); --primary-bg-hover: #000000; --primary-fg: #ffffff; --accent-solid: #2f5d8a; /* плашка подсказки над листом */ --on-accent: #ffffff; /* текст на ней */ --track: #d6d2cb; --knob: #ffffff; --r: 6px; --r-lg: 10px; --shadow: 0 1px 2px rgba(26, 25, 23, .06), 0 8px 24px rgba(26, 25, 23, .12); --sheet-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 10px 30px rgba(0, 0, 0, .16); --sheet-edge: transparent; --sans: ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; --row: 28px; } /* Тёмная тема — одним блоком. Он же обслуживает «Авто»: скрипт в разворачивает выбор (или системную тему) в data-theme до первой отрисовки, поэтому дублировать палитру под prefers-color-scheme не нужно. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #232220; --stage: #121110; --bg: #191816; --panel: #1e1d1a; --raised: #26241f; --field: #171614; --sunken: #141310; --ink: #eceae5; --ink-2: #c9c5bd; --muted: #948f86; --faint: #807b72; --line: #3a3630; --line-soft: #302d28; --line-strong: #504b43; --accent: #79a8d8; --accent-ink: #a8c9e9; --accent-soft: #22303d; --danger: #e2867b; --danger-soft: #2e1e1c; --danger-line: #5c3a35; --ok: #84c08f; --warn: #d8ab63; --warn-soft: #332a19; --err-soft: #33201d; --info-soft: #2e2b26; --hover: rgba(236, 234, 229, .07); --hover-soft: rgba(236, 234, 229, .06); --row-hover: #262521; --hover-faint: rgba(236, 234, 229, .04); --pressed: rgba(236, 234, 229, .11); --scrim: rgba(8, 8, 7, .58); --glass: rgba(38, 36, 31, .92); --primary-bg: var(--ink); --primary-bg-hover: #ffffff; --primary-fg: #171614; /* плашка остаётся тёмно-синей: акцент тёмной темы слишком светел, чтобы держать на себе светлый текст */ --accent-solid: #2f5d8a; --on-accent: #eef3f8; --track: #45413a; --knob: #eceae5; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .55); --sheet-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 12px 34px rgba(0, 0, 0, .45); --sheet-edge: #3a3630; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.4 var(--sans); -webkit-font-smoothing: antialiased; } body { display: flex; flex-direction: column; overflow: hidden; } ::selection { background: var(--accent-soft); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ------------------------------------------------------------ верх */ .bar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 10px 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); } .doc { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; gap: 1px; } .doc-name, .doc-num { border: 1px solid transparent; background: none; color: inherit; padding: 1px 5px; margin-left: -5px; border-radius: 5px; width: 100%; max-width: 640px; text-overflow: ellipsis; } .doc-name { font-size: 14px; font-weight: 600; letter-spacing: -.1px; } .doc-num { font: 11.5px/1.3 var(--mono); color: var(--muted); } .doc-name:hover, .doc-num:hover { background: var(--field); border-color: var(--line-soft); } .doc-name:focus, .doc-num:focus { background: var(--field); border-color: var(--accent); outline: none; } .doc-name::placeholder, .doc-num::placeholder { color: var(--faint); } .bar-actions { display: flex; align-items: center; gap: 2px; } .bar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; } /* --------------------------------------------------------- кнопки */ .btn { display: inline-flex; align-items: center; gap: 6px; height: var(--row); padding: 0 10px; font: inherit; color: var(--ink-2); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--field); border-color: var(--line-strong); color: var(--ink); } .btn:active { background: var(--sunken); } .btn[disabled] { opacity: .4; cursor: default; } .btn .ic { flex: 0 0 auto; } .btn.icon { padding: 0 7px; } .btn.icon.has-label { padding: 0 9px 0 8px; } .btn.ghost { background: none; border-color: transparent; } .btn.ghost:hover { background: var(--hover); border-color: transparent; } .btn.ghost.is-open { background: var(--pressed); } .btn.ghost.is-on { background: var(--accent-soft); color: var(--accent-ink); } .btn.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); } .btn.primary:hover { background: var(--primary-bg-hover); border-color: var(--primary-bg-hover); color: var(--primary-fg); } .btn.sm { height: 24px; padding: 0 8px; font-size: 12px; } .btn.link { background: none; border: none; color: var(--muted); padding: 0 4px; height: 22px; } .btn.link:hover { color: var(--accent); background: none; } .btn.danger:hover { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); } /* ------------------------------------------------------- раскладка */ main { flex: 1; display: flex; min-height: 0; } .side { width: 268px; flex: 0 0 268px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .side.right { border-right: none; border-left: 1px solid var(--line); width: 300px; flex-basis: 300px; } .side-scroll { overflow: auto; flex: 1; min-height: 0; } .side-foot { border-top: 1px solid var(--line-soft); padding: 6px; display: flex; gap: 4px; align-items: center; } /* Правая панель: список сверху, настройки выбранного объекта — отдельной полосой снизу. Обычная карточка занимает столько, сколько ей нужно, а список цепей экрана разворачивается на свободное место, вместо того чтобы ютиться в узкой щели под наполовину пустой панелью. */ .side.right .side-list { flex: 1 1 auto; } .side.right.has-grow-editor .side-list { flex: 0 1 auto; max-height: 46%; } .side-editor { flex: 0 0 auto; max-height: 62%; overflow: auto; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--bg); } .side-editor.grow { flex: 1 1 auto; min-height: 150px; max-height: none; } .stage { flex: 1; min-width: 0; position: relative; display: flex; } .stage-scroll { flex: 1; overflow: auto; background: var(--stage); padding: 20px; } #canvas { transform-origin: 0 0; display: inline-block; background: var(--paper); box-shadow: var(--sheet-shadow), 0 0 0 1px var(--sheet-edge); } #canvas svg { display: block; } /* Подсказка о выборе контакта: висит над листом, но щелчки пропускает. */ .stage-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 5px 6px 5px 12px; border-radius: 8px; background: var(--accent-solid); color: var(--on-accent); font-size: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); z-index: 5; pointer-events: none; } .stage-hint[hidden] { display: none; } .stage-hint .hint-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stage-hint .btn { pointer-events: auto; background: rgba(255, 255, 255, .16); border-color: transparent; color: var(--on-accent); } .stage-hint .btn:hover { background: rgba(255, 255, 255, .28); color: var(--on-accent); } .stage-scroll.is-picking svg { cursor: crosshair; } .stage-tools { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; background: var(--glass); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 8px; padding: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .stage-tools .btn { border-color: transparent; background: none; height: 24px; } .stage-tools .btn:hover { background: var(--hover); } .zoom-val { font: 11px var(--mono); color: var(--muted); min-width: 74px; text-align: center; cursor: default; user-select: none; } /* ---------------------------------------------------------- списки */ .rows { padding: 4px; display: flex; flex-direction: column; gap: 1px; } .row { display: flex; align-items: center; gap: 8px; min-height: var(--row); padding: 3px 6px; border-radius: var(--r); cursor: pointer; position: relative; } .row:hover { background: var(--row-hover); } .row.is-sel { background: var(--accent-soft); } /* Строка выбирается и с клавиатуры, поэтому фокус на ней должен быть виден. */ .row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .row:focus-within .acts { visibility: visible; } .row .ref { font: 600 12.5px var(--mono); color: var(--ink); min-width: 26px; } .row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row .name.dim { color: var(--muted); } .row .meta { font: 11px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; } /* Кнопки строки лежат поверх правого края: строка не должна дёргаться, когда указатель проходит по списку. */ .row .acts { position: absolute; right: 4px; top: 1px; bottom: 1px; display: flex; align-items: center; gap: 1px; background: inherit; border-radius: var(--r); visibility: hidden; } .row .acts .btn { padding: 0 4px; } .row:hover .acts, .row.is-sel .acts { visibility: visible; } .row:hover .meta.hide-on-hover, .row.is-sel .meta.hide-on-hover { visibility: hidden; } /* Закреплённый разъём виден замком и без наведения: остальные кнопки не просто спрятаны, а убраны из потока — замок встаёт у правого края. */ .row.is-locked .acts { visibility: visible; } .row.is-locked .acts .btn { display: none; } .row.is-locked .acts .btn.is-on { display: inline-flex; } .row.is-locked:hover .acts .btn, .row.is-locked.is-sel .acts .btn { display: inline-flex; } .row.is-locked .meta.hide-on-hover { visibility: hidden; } .section-label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 12px 10px 4px; display: flex; align-items: center; justify-content: space-between; gap: 6px; } .section-label:first-child { padding-top: 6px; } .empty { color: var(--muted); font-size: 12px; padding: 20px 14px; text-align: center; line-height: 1.5; } .empty b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 3px; } /* ------------------------------------------------------- реквизиты */ .editor { border-top: 1px solid var(--line); padding: 8px 10px 6px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 6px; align-items: center; } .editor .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } input[type=text], input[type=number], select, textarea { font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; height: var(--row); min-width: 0; width: 100%; } textarea { height: auto; line-height: 1.45; resize: vertical; } input:hover, select:hover { border-color: var(--line-strong); } input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; } input::placeholder, textarea::placeholder { color: var(--faint); } select { cursor: pointer; } select[disabled], input[disabled] { opacity: .5; background: var(--sunken); cursor: default; } input.inp-flat { border-color: transparent; background: none; padding-left: 5px; margin-left: -5px; } input.inp-flat:hover { background: var(--field); border-color: var(--line-soft); } input.inp-flat:focus { background: var(--field); border-color: var(--accent); } .inp-ref { font: 600 13px var(--mono); } .inp-type { font-size: 12px; color: var(--ink-2); } /* ------------------------------------------------- контакты разъёма */ .pins { width: 100%; border-collapse: collapse; } .pins td { padding: 0; border-bottom: 1px solid var(--line-soft); } .pins tr:last-child td { border-bottom: none; } .pins tr.is-sel td { background: var(--accent-soft); } .pins tr:hover td { background: var(--hover-faint); } .pins tr.is-sel:hover td { background: var(--accent-soft); } .pins .grip { width: 16px; color: transparent; cursor: grab; text-align: center; user-select: none; font-size: 11px; } .pins tr:hover .grip { color: var(--faint); } .pins tr.linked .grip { color: var(--line); } .pins tr:hover.linked .grip { color: var(--faint); } .pins .num input { font: 12px var(--mono); text-align: center; padding: 0 2px; } .pins .num { width: 38px; } .pins input { border: 1px solid transparent; background: none; height: 26px; border-radius: 4px; } .pins input:hover { background: var(--field); border-color: var(--line-soft); } .pins input:focus { background: var(--field); border-color: var(--accent); } .pins .link { font: 11px var(--mono); color: var(--ok); white-space: nowrap; padding-right: 6px; cursor: pointer; text-align: right; width: 1%; } .pins .link.free { color: var(--faint); } .pins .link:hover { color: var(--accent); } .pins .del { width: 22px; } .pins .del button { visibility: hidden; } .pins tr:hover .del button { visibility: visible; } .pins tr.dragging td { opacity: .35; } .pins tr.drop-before td { box-shadow: inset 0 2px 0 var(--accent); } .pins tr.drop-after td { box-shadow: inset 0 -2px 0 var(--accent); } /* ------------------------------------------------------ карточка цепи */ .card { margin: 2px 4px 8px; padding: 8px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--raised); display: flex; flex-direction: column; gap: 6px; } .card .fields { display: flex; gap: 5px; } .card .fields input { height: 26px; font-size: 12px; } .card .cap { font-size: 11px; color: var(--muted); } .side-editor .card { margin: 6px; } .side-editor .card .cap { font-size: 12px; font-weight: 600; color: var(--ink-2); } .side-editor .card .cap.sub { font-size: 11px; font-weight: 400; color: var(--muted); } .card.grow { flex: 1 1 auto; min-height: 0; } .card.grow .checklist { flex: 1 1 auto; max-height: none; min-height: 84px; } .check-head { display: flex; align-items: center; gap: 2px; } .check-head .btn.link { height: 20px; font-size: 12px; } .checklist { max-height: 168px; overflow: auto; display: flex; flex-direction: column; gap: 1px; } .checklist label { display: flex; gap: 7px; align-items: center; padding: 3px 5px; border-radius: 4px; cursor: pointer; font-size: 12px; } .checklist label:hover { background: var(--hover-soft); } input[type=checkbox], input[type=radio] { width: auto; height: auto; accent-color: var(--accent); } /* выбор заготовки в окне «Новый проект» */ .choices { display: flex; flex-direction: column; gap: 3px; } .choices label { display: flex; gap: 9px; align-items: flex-start; padding: 7px 9px; cursor: pointer; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--raised); } .choices label:hover { border-color: var(--line-strong); } .choices input { margin: 2px 0 0; } .choices b { display: block; font-size: 12.5px; font-weight: 600; } .choices i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 1px; } .btn-row { display: flex; gap: 6px; flex-wrap: wrap; } input[type=range] { width: 100%; height: auto; padding: 0; border: none; background: none; accent-color: var(--accent); } /* ---------------------------------------------------------- меню */ .menu { position: fixed; z-index: 60; min-width: 208px; padding: 4px; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); } .menu.wide { min-width: 304px; } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: none; border-radius: 5px; background: none; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; } .menu-item:hover { background: var(--hover); color: var(--ink); } .menu-item[disabled] { opacity: .4; cursor: default; } .menu-item.is-checked { color: var(--ink); } .mi-ic { width: 16px; display: inline-flex; color: var(--muted); } .mi-label { flex: 1; } .mi-hint { font: 11px var(--mono); color: var(--faint); } .menu-sep { height: 1px; background: var(--line-soft); margin: 4px 2px; } .menu-group { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 8px 8px 3px; } .menu-row { display: flex; align-items: center; gap: 8px; padding: 3px 8px; min-height: 30px; } .menu-row-label { flex: 1; color: var(--ink-2); white-space: nowrap; } .menu-row .tgl { width: auto; flex: 0 0 auto; } .menu-row select { height: 26px; width: auto; min-width: 120px; } .menu-note { font-size: 11px; color: var(--faint); padding: 0 9px 6px; line-height: 1.45; } .seg { display: inline-flex; background: var(--sunken); border-radius: 6px; padding: 2px; gap: 2px; } .seg-btn { border: none; background: none; font: inherit; font-size: 12px; color: var(--muted); padding: 3px 8px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .seg-btn:hover { color: var(--ink); } .seg-btn.is-on { background: var(--raised); color: var(--ink); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); } .tgl { display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; } .tgl > span:first-child { flex: 1; } .tgl input { position: absolute; opacity: 0; pointer-events: none; } .tgl-track { width: 28px; height: 16px; border-radius: 8px; background: var(--track); position: relative; transition: background .12s; } .tgl-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--knob); transition: transform .12s; } .tgl input:checked + .tgl-track { background: var(--accent); } .tgl input:checked + .tgl-track::after { transform: translateX(12px); } /* ---------------------------------------------------------- окна */ .modal-back { position: fixed; inset: 0; z-index: 70; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal { background: var(--raised); border-radius: var(--r-lg); box-shadow: var(--shadow); width: 420px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; } .modal.wide { width: 760px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px 12px 16px; } .modal-head h2 { margin: 0; font-size: 14px; font-weight: 600; } .modal-body { padding: 0 16px 4px; overflow: auto; } .modal-foot { padding: 12px 16px; display: flex; justify-content: flex-end; gap: 8px; } .form { display: flex; flex-direction: column; gap: 8px; } .form-row { display: flex; align-items: center; gap: 10px; } .form-row > label { width: 108px; flex: 0 0 108px; color: var(--muted); font-size: 12px; } .form-row.stack { flex-direction: column; align-items: stretch; gap: 4px; } .form-row.stack > label { width: auto; } .form-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; } .form-note code { font: 11px var(--mono); color: var(--ink-2); } /* ------------------------------------------------------- таблицы */ .data { width: 100%; border-collapse: collapse; font-size: 12px; } .data th { text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--raised); } .data td { padding: 4px 8px; border-bottom: 1px solid var(--line-soft); } .data td.mono { font-family: var(--mono); font-size: 11.5px; } .data tr:last-child td { border-bottom: none; } /* ------------------------------------------------------- статус */ .status { display: flex; align-items: center; gap: 14px; height: 26px; padding: 0 14px; background: var(--panel); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); } #statusText { font-variant-numeric: tabular-nums; } #pickText { color: var(--accent-ink); } #pickText:not(:empty)::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; } /* Отказ автосохранения виден сразу: работа не сохраняется, и рядом лежит единственный оставшийся способ её сберечь — выгрузка в файл. */ .save-warn { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--danger); font-weight: 600; } .save-warn .btn { font-weight: 400; } .msg { font-size: 12px; padding: 5px 8px; border-radius: 5px; margin-bottom: 3px; } .msg.error { background: var(--err-soft); color: var(--danger); } .msg.warn { background: var(--warn-soft); color: var(--warn); } .msg.info { background: var(--info-soft); color: var(--ink-2); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Сообщение о том, что программа не запустилась: без переменных темы — его может понадобиться показать раньше, чем применились стили. */ .boot-error { padding: 12px; background: #fdecea; color: #c62828; font: 13px system-ui, sans-serif; } #buildText { margin-left: auto; opacity: .65; font-variant-numeric: tabular-nums; } /* Кнопки в списке повреждённых записей видны всегда: строки списка прячут свои действия до наведения, а здесь прятать нечего — это и есть разбор. */ .row-acts { display: flex; gap: 6px; margin-left: auto; }