/* ============================================ HELP SIDE PANEL — боковая панель справки (components/_help_panel.html, js/help-panel.js) Панель фиксирована справа; контент страницы сдвигается через padding-right на и центрируется в оставшемся месте. Ширина — CSS-переменная, её меняет JS (перетаскивание за левый край). ============================================ */ :root { --help-panel-width: 440px; } html.help-open { padding-right: var(--help-panel-width); } html.help-ready:not(.help-resizing) { transition: padding-right 0.2s ease; } .help-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--help-panel-width); display: flex; background: var(--color-bg); border-left: 1px solid var(--color-border); box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06); z-index: 800; transform: translateX(100%); } html.help-open .help-panel { transform: none; } html.help-ready:not(.help-resizing) .help-panel { transition: transform 0.2s ease; } /* Язычок на левом крае панели; при закрытой панели остаётся у края экрана */ .help-panel-tab { position: absolute; top: 50%; left: -34px; transform: translateY(-50%); writing-mode: vertical-rl; padding: 14px 8px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-right: none; border-radius: 8px 0 0 8px; color: var(--color-text-light); font-family: var(--font-family); font-size: var(--font-size-small); letter-spacing: 0.04em; cursor: pointer; } .help-panel-tab:hover { color: var(--color-text); } .help-panel-resizer { position: absolute; top: 0; bottom: 0; left: -3px; width: 6px; cursor: col-resize; } html.help-resizing, html.help-resizing * { cursor: col-resize !important; user-select: none; } .help-panel-inner { display: flex; flex-direction: column; width: 100%; min-width: 0; } .help-panel-head { min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); } .help-panel-title { font-size: var(--font-size-large); align-self: center; font-weight: 600; } .help-panel-close { border: none; background: none; font-size: 22px; line-height: 1; color: var(--color-text-light); cursor: pointer; } /* Содержимое панели. Иерархия: заголовок панели (шапка) > h3 раздел > h4 подраздел > плитка (details.form-section-details, общий стиль сворачиваемых блоков из style.css). Все заголовки — одним цветом текста. */ .help-panel-body { flex: 1; overflow-y: auto; padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-base); line-height: 1.45; } .help-panel-body h3, .help-panel-body h4 { color: var(--color-text); font-weight: 600; } .help-panel-body h3 { font-size: var(--font-size-large); margin: 1.6em 0 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); } .help-panel-body h3:first-child { margin-top: 0; } .help-panel-body h4 { font-size: var(--font-size-base); margin: 1.3em 0 0.5em; } .help-panel-body p, .help-panel-body ul, .help-panel-body ol { margin: 0 0 0.7em; } .help-panel-body ol, .help-panel-body ul { padding-left: 1.4em; } .help-panel-body li { margin-bottom: 0.35em; } .help-panel-body pre { font-size: var(--font-size-small); line-height: 1.35; margin: 0.5em 0; padding: 8px 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow-x: auto; } .help-panel-body table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); margin: 0.5em 0 1em; } .help-panel-body th, .help-panel-body td { padding: 4px 6px; border-bottom: 1px solid var(--color-border); vertical-align: top; text-align: left; } /* Таблица полей внутри плитки: одна строка — одно поле, без линий */ .help-panel-body .help-fields { margin: 0 0 0.6em; } .help-panel-body .help-fields td { border-bottom: none; padding: 1px 0; } .help-panel-body .help-fields td:first-child { white-space: nowrap; padding-right: 12px; width: 1%; } /* Плитки в панели стоят плотнее, чем секции формы */ .help-panel-body .form-section-details { margin-top: var(--spacing-sm); } .help-panel-body .form-section-summary { padding: var(--spacing-sm) var(--spacing-md); } .help-panel-body .form-section-body { padding: var(--spacing-sm) var(--spacing-md); background: var(--color-bg); } .help-panel-body .form-section-body > :last-child { margin-bottom: 0; } .help-target-flash { background: #fff3cd; transition: background 1.2s ease; } /* Плавающая кнопка обратной связи уезжает вместе с контентом */ html.help-open .feedback-fab { right: calc(var(--help-panel-width) + 16px); } html.help-ready:not(.help-resizing) .feedback-fab { transition: right 0.2s ease; } /* Узкие экраны: контент не сдвигается, панель перекрывает его целиком */ @media (max-width: 900px) { html.help-open { padding-right: 0; } .help-panel { width: min(100vw, var(--help-panel-width)); } .help-panel-resizer { display: none; } html.help-open .feedback-fab { right: 16px; } } /* Телефон: вертикальный язычок неудобен — тот же элемент становится кнопкой-«таблеткой» в правом нижнем углу. Она привязана к левому краю панели (right: 100%): при закрытой панели видна у края экрана, при открытой (панель во всю ширину) уходит за левый край — закрытие крестиком в шапке панели. Кнопка обратной связи поднимается выше, чтобы не пересекаться. */ @media (max-width: 768px) { .help-panel-tab { top: auto; bottom: 16px; left: auto; right: 100%; margin-right: 16px; transform: none; writing-mode: horizontal-tb; padding: 8px 14px; border: 1px solid var(--color-border-dark); border-radius: 20px; background: var(--color-bg); color: var(--color-text); letter-spacing: normal; white-space: nowrap; } .feedback-fab { bottom: 64px; } }