/* * Settings form layout (owner). * * One vocabulary for every "настройки" surface: block settings drawer, block * settings modal, page settings modal, lesson settings modal. Before this file * each surface hand-rolled its own layout (Bootstrap `row/col-md-*` grids next * to `.form-check` chains), so the same checkbox looked different depending on * which gear you clicked. * * Loaded globally from templates/main/base.html: settings bodies render both * inside the lesson shell and inside cabinet modals mounted on . */ .ui-settings-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; } .ui-settings-fieldset + .ui-settings-fieldset { margin-top: var(--ui-space-3); padding-top: var(--ui-space-2); border-top: 1px solid var(--ui-border-subtle); } .ui-settings-legend { float: none; width: 100%; margin: 0 0 var(--ui-space-1); padding: 0; border: 0; font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-semibold); letter-spacing: 0.02em; text-transform: none; color: var(--ui-text-muted); line-height: 1.3; } .ui-settings-stack { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; } .ui-settings-stack--tight { gap: var(--ui-space-1); } /* Checkbox row: control, label and help text stay on one optical grid so a column of toggles reads as a list instead of ragged Bootstrap rows. */ .ui-settings-toggle { display: grid; grid-template-columns: auto 1fr; column-gap: var(--ui-space-2); row-gap: 2px; align-items: start; margin: 0; padding: 3px var(--ui-space-1); border-radius: var(--ui-radius-sm); background: transparent; } .ui-settings-toggle:hover { background: color-mix(in srgb, var(--ui-surface-muted) 70%, transparent); } .ui-settings-toggle .form-check-input, .ui-settings-toggle input[type="checkbox"], .ui-settings-toggle .ui-check { margin: 0.2em 0 0; float: none; grid-column: 1; grid-row: 1; accent-color: var(--ui-color-action); } .ui-settings-toggle .form-check-label, .ui-settings-toggle > label { grid-column: 2; grid-row: 1; margin: 0; font-size: var(--ui-font-size-sm); line-height: 1.35; color: var(--ui-text-primary); cursor: pointer; } .ui-settings-toggle .ui-help, .ui-settings-toggle > small { grid-column: 2; grid-row: 2; margin: 0; font-size: var(--ui-font-size-xs); line-height: 1.35; color: var(--ui-text-muted); } .ui-settings-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Runtimes hide dependent rows with `element.hidden`; these components set their own `display`, so the component owns the hidden state instead of relying on the reboot layer that happens to load first. */ .ui-settings-toggle[hidden], .ui-settings-field[hidden], .ui-settings-subfield[hidden], .ui-settings-stack[hidden], .ui-settings-pair[hidden], .ui-settings-grid[hidden] { display: none; } .ui-settings-field .ui-label { margin: 0; font-size: var(--ui-font-size-sm); } .ui-settings-field .ui-help, .ui-settings-field > small { margin: 0; font-size: var(--ui-font-size-xs); line-height: 1.35; color: var(--ui-text-muted); } /* Numbers (minutes, points, attempts) must not stretch across the whole modal: a 4-character field the width of the dialog reads as a text input. */ .ui-settings-field--narrow .ui-input, .ui-settings-field--narrow input, .ui-settings-field--narrow select { max-width: 12rem; } /* A field that only matters while its toggle is on: indented under the toggle with a rail, so the dependency is visible instead of implied. */ .ui-settings-subfield { margin-left: 8px; padding-left: var(--ui-space-3); border-left: 2px solid var(--ui-border-subtle); } .ui-settings-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-2); } /* Two small numbers (minutes + seconds) should not span a wide modal. */ .ui-settings-pair--narrow { max-width: 26rem; } /* Many short controls of the same kind (toggle lists, numeric triplets). Grid keeps the rows aligned when the modal is wide and collapses on narrow ones. */ .ui-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ui-space-2) var(--ui-space-3); align-items: start; } .ui-settings-grid--numeric { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } @media (max-width: 420px) { .ui-settings-pair, .ui-settings-grid, .ui-settings-grid--numeric { grid-template-columns: 1fr; } } .ui-settings-note { margin: 0; font-size: var(--ui-font-size-xs); line-height: 1.35; color: var(--ui-text-muted); } .ui-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); } .ui-settings-code .input-group { flex-wrap: nowrap; max-width: 100%; } .ui-settings-code .input-group .ui-input { min-width: 0; font-size: var(--ui-font-size-xs); font-family: var(--ui-font-mono); }