/* Инструменты: /tools/, /tools/config-linter/, /tools/key-checker/ и русские * близнецы. Один файл на шесть страниц — ровно как buy.css на шесть страниц * покупки. * * Здесь только то, чего в общем CSS нет вовсе: * - правила для ul/ol/li: на сайте до сих пор не было ни одного списка; * - поля ввода: input/textarea в components.css не описаны, и на тёмной * странице браузер рисует их белым прямоугольником с системной рамкой; * - метки серьёзности и панели результата: их негде было взять. * * Общие style.css и components.css не трогаются: их хэши стоят в у * всех живых страниц, и правка там означала бы переиздание всего сайта ради * пары правил. Инлайновые стили тоже исключены — CSP на сервере * style-src 'self'. * * Цвета серьёзности пришлось завести свои: в палитре сайта есть только * оранжевый акцент, а различать ошибку и замечание одним цветом нельзя. * Подобраны под тёмный фон #0e1116 и приглушены, чтобы не спорить с акцентом. */ :root { /* Системный моноширинный шрифт для всего, где показывается вставленное человеком: поля ввода, исходник с подсветкой, вывод для копирования, значения из ключа и конфига. Веб-шрифт сайта разбит по unicode-range, и вставленная кириллица или «Ł» заставляли браузер докачивать поднаборы уже после загрузки страницы — на странице, которая предлагает открыть вкладку «Сеть» и убедиться, что ничего не уходит. По запрошенным файлам шрифтов к тому же видно, были ли во вставленном такие символы. Системный шрифт не качается вовсе, а недостающие символы браузер берёт из других системных шрифтов, никогда из веб-шрифтов. */ --font-mono-local: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace; --sev-error: #e0705f; --sev-warn: #d7a044; --sev-info: #7593b4; --sev-ok: #6faf80; --sev-error-bg: #2a1714; --sev-warn-bg: #262013; --sev-info-bg: #171e26; --sev-ok-bg: #16211a; } /* ─────────────────────────────── списки */ .doc-body ul, .doc-body ol { margin: 0 0 14px; padding-left: 1.3em; } .doc-body li { margin: 0 0 9px; } .doc-body li:last-child { margin-bottom: 0; } .doc-body li::marker { color: var(--text-quiet); } .list-plain { list-style: none; padding-left: 0; } /* ─────────────────────────────── форма */ .tool-form { margin-top: 20px; } .tool-field { margin-bottom: 16px; } .tool-field__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--text); } .tool-field__hint { margin: 5px 0 0; font-size: 13px; color: var(--text-quiet); } .tool-input, .tool-textarea { width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; /* Иначе Safari рисует свою рамку поверх нашей и скругление пропадает. */ appearance: none; -webkit-appearance: none; } .tool-textarea { min-height: 190px; font-family: var(--font-mono-local); font-size: 13px; line-height: 1.55; resize: vertical; /* Конфиг и ключи — текст, который нельзя переносить по словам: строка должна остаться строкой, иначе номера в отчёте разъедутся с тем, что видит человек. */ white-space: pre; overflow-wrap: normal; overflow-x: auto; } /* Поля генератора — тоже значения для конфига, и туда тоже вводят что угодно. */ .tool-input { font-family: var(--font-mono-local); font-size: 14px; } .tool-input[aria-invalid='true'] { border-color: var(--sev-error); } /* Ошибка генератора: под кнопкой, словами. */ .tool-error { margin: 12px 0 0; font-size: 14px; color: var(--sev-error); } .tool-error[hidden] { display: none; } /* Пояснение к результату: «проверен первый из N», «это формат SSH2». */ .tool-note { margin: 0 0 14px; font-size: 14px; color: var(--text-dimmer); } .tool-note[hidden] { display: none; } /* Всё, что приходит из вставленного текста, внутри вердикта и находок. */ .tool-verdict code, .finding__head code { font-family: var(--font-mono-local); font-size: 0.92em; overflow-wrap: anywhere; } .tool-input::placeholder, .tool-textarea::placeholder { color: var(--placeholder); } .tool-input:hover, .tool-textarea:hover { border-color: var(--border-hover); } .tool-input:focus-visible, .tool-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .tool-textarea--drop { border-style: dashed; } .tool-textarea--over { border-color: var(--accent); background: var(--surface-hl); } .tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 18px; } /* ─────────────────────────────── панель результата */ .tool-result { margin-top: 24px; } .tool-result[hidden] { display: none; } .tool-panel { border: 1px solid var(--border); border-radius: 12px; padding: 20px 18px; background: var(--surface); } .tool-panel + .tool-panel { margin-top: 14px; } .tool-panel__title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text); } /* Вердикт одной строкой: то, ради чего страницу и открыли. */ .tool-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 16px; color: var(--text); } .tool-verdict__grade { font-family: var(--font-mono); font-size: 26px; font-weight: 600; line-height: 1; } .tool-verdict__grade--a { color: var(--sev-ok); } .tool-verdict__grade--b { color: var(--accent); } .tool-verdict__grade--c { color: var(--sev-warn); } .tool-verdict__grade--d { color: var(--sev-error); } /* ─────────────────────────────── находки */ .findings { list-style: none; margin: 0; padding: 0; } .finding { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--border-faint); } .finding:first-child { border-top: none; padding-top: 0; } .finding__badge { grid-row: span 2; align-self: start; min-width: 62px; padding: 3px 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; border: 1px solid; border-radius: 5px; } .finding__badge--error { color: var(--sev-error); border-color: var(--sev-error); background: var(--sev-error-bg); } .finding__badge--warn { color: var(--sev-warn); border-color: var(--sev-warn); background: var(--sev-warn-bg); } .finding__badge--info { color: var(--sev-info); border-color: var(--sev-info); background: var(--sev-info-bg); } .finding__head { font-size: 15px; color: var(--text); } .finding__line { font-family: var(--font-mono); font-size: 12px; color: var(--text-quietest); margin-right: 6px; } .finding__body { grid-column: 2; font-size: 14px; color: var(--text-dimmer); } .finding__body code { font-family: var(--font-mono-local); font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; } /* ─────────────────────────────── исходник с подсветкой строк */ .src { margin: 0; padding: 0; list-style: none; overflow-x: auto; font-family: var(--font-mono-local); font-size: 12.5px; line-height: 1.7; background: var(--bg); border: 1px solid var(--border-faint); border-radius: 8px; } .src__line { display: grid; grid-template-columns: 3.2em 1fr; gap: 12px; padding: 0 12px; margin: 0; white-space: pre; } .src__no { color: var(--text-quietest); text-align: right; user-select: none; } .src__text { color: var(--text-muted); } .src__line--error { background: var(--sev-error-bg); } .src__line--warn { background: var(--sev-warn-bg); } .src__line--info { background: var(--sev-info-bg); } /* ─────────────────────────────── вывод, который копируют */ .out { position: relative; margin: 0; } .out__code { display: block; margin: 0; padding: 14px; overflow-x: auto; font-family: var(--font-mono-local); font-size: 12.5px; line-height: 1.65; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border-faint); border-radius: 8px; white-space: pre; } .copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .copy-note { font-size: 13px; color: var(--sev-ok); } .copy-note[hidden] { display: none; } /* ─────────────────────────────── пары «ключ — значение» */ .kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; margin: 0; font-size: 14px; } .kv dt { color: var(--text-quiet); } .kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .kv dd code { font-family: var(--font-mono-local); font-size: 12.5px; } /* ─────────────────────────────── предупреждение о приватном ключе */ .alarm { margin: 16px 0 0; padding: 14px 16px; font-size: 14px; color: var(--sev-error); background: var(--sev-error-bg); border: 1px solid var(--sev-error); border-radius: 10px; } .alarm[hidden] { display: none; } .alarm strong { color: var(--sev-error); } /* Обещание «ничего не уходит с машины» стоит рядом с полем ввода, а не в подвале: его читают именно в момент, когда решают, вставлять ли ключ. */ .privacy-note { margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--border-strong); font-size: 13px; color: var(--text-quiet); } /* Живая область для экранного диктора: невидима, но в дереве доступности есть всегда. Шрифт системный по той же причине, что и у полей: скрытый текст всё равно раскладывается и тянул бы веб-шрифт. */ .tool-live { font-family: var(--font-mono-local); } /* ─────────────────────────────── карточки инструментов на /tools/ */ .tool-card__title { font-size: 16px; font-weight: 600; color: var(--text); } .tool-card__body { margin-top: 5px; font-size: 14px; color: var(--text-dimmer); } .tool-card__link { display: inline-block; margin-top: 12px; font-size: 14px; } /* ─────────────────────────────── телефон */ @media (max-width: 620px) { .finding { grid-template-columns: 1fr; } .finding__badge { grid-row: auto; justify-self: start; margin-bottom: 2px; } .finding__body { grid-column: 1; } .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 10px; } .src__line { grid-template-columns: 2.4em 1fr; gap: 8px; } .doc-body ul, .doc-body ol { padding-left: 1.15em; } }