feat: align Beam settings controls

2026-06-05 15:35:54 +03:00 · 2026-06-05 15:35:54 +03:00 · be2294d3fa
parent 68e2160ac5
commit be2294d3fa
5 changed files with 434 additions and 96 deletions
--- a/frontend/dcViewer.css
+++ b/frontend/dcViewer.css
@ -376,6 +376,7 @@ header {
 }

 .inspector-collapse-btn {
+  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
@ -388,13 +389,25 @@ header {
  color: var(--modal-btn-primary, var(--accent));
  cursor: pointer;
  font: inherit;
-  font-size: 18px;
+  font-size: 0;
  font-weight: 900;
  line-height: 1;
  outline: none;
  transition: background 140ms ease, transform 100ms ease;
 }

+.inspector-collapse-btn::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 38%;
+  width: 11px;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+  transform: translate(-50%, -50%);
+}
+
 .inspector-collapse-btn:hover {
  background: var(--nodedc-glass-control-hover);
 }
@ -1183,17 +1196,23 @@ header {

 .settings-panel {
  position: fixed;
+  --env-control-h: 46px;
+  --env-button-radius: 17px;
+  --env-pill-radius: 999px;
+  --env-glass-control-bg: var(--nodedc-glass-control-bg);
+  --env-glass-control-hover: var(--nodedc-glass-control-hover);
+  --env-glass-control-shadow: var(--nodedc-glass-control-shadow);
  left: var(--settings-left, 72px);
  bottom: var(--settings-bottom, 12px);
  background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius, 14px);
-  padding: 8px;
+  padding: 12px;
  display: grid;
-  gap: 6px;
-  width: var(--settings-width, 320px);
-  min-height: 300px;
-  max-height: 520px;
+  gap: 10px;
+  width: var(--settings-width, 350px);
+  min-height: 420px;
+  max-height: min(720px, calc(100vh - 72px));
  overflow: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  z-index: 22;
@ -1201,37 +1220,68 @@ header {
 }

 .settings-panel .settings-header {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--env-control-h);
  align-items: center;
-  justify-content: space-between;
+  gap: 10px;
  color: var(--text);
  font-weight: 700;
-  padding-bottom: 2px;
+  min-height: var(--env-control-h);
+  padding: 0 0 0 4px;
 }

 .settings-panel .settings-title {
-  font-size: 12px;
+  font-size: 13px;
+  line-height: 1.2;
 }

 .settings-panel .settings-close {
-  width: 20px;
-  height: 20px;
-  border-radius: 7px;
-  border: 1px solid var(--modal-border);
-  background: color-mix(in srgb, var(--modal-focus) var(--modal-focus-alpha, 100%), transparent);
-  color: var(--text);
-  cursor: pointer;
  display: grid;
  place-items: center;
+  width: var(--env-control-h);
+  height: var(--env-control-h);
+  padding: 0;
+  border: 0;
+  border-radius: var(--env-button-radius);
+  background: var(--env-glass-control-bg);
+  color: rgba(245, 245, 250, 0.78);
+  box-shadow: var(--env-glass-control-shadow);
+  cursor: pointer;
+  line-height: 1;
+  outline: none;
+  backdrop-filter: blur(24px) saturate(128%) brightness(1.05);
+  -webkit-backdrop-filter: blur(24px) saturate(128%) brightness(1.05);
+  transition: background 140ms ease, color 140ms ease, transform 100ms ease;
+}
+
+.settings-panel .settings-close svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.settings-panel .settings-close:hover {
+  background: var(--env-glass-control-hover);
+  color: #fff;
+}
+
+.settings-panel .settings-close:active {
+  transform: translateY(1px);
+}
+
+.settings-panel .settings-close:focus,
+.settings-panel .settings-close:focus-visible {
+  outline: none;
+  box-shadow: none;
 }

 .settings-panel .settings-section {
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius, 10px);
-  padding: 6px;
+  padding: 8px;
  background: color-mix(in srgb, var(--modal-focus) var(--modal-focus-alpha, 100%), transparent);
  display: grid;
-  gap: 4px;
+  gap: 8px;
 }

 .settings-panel .section-title {
@ -1242,10 +1292,82 @@ header {

 .settings-panel .color-row {
  display: grid;
-  grid-template-columns: 140px 1fr 1fr;
-  gap: 10px;
+  grid-template-columns: minmax(110px, 1fr) minmax(150px, 168px);
+  gap: 12px;
  align-items: center;
-  padding: 4px 6px 4px 6px;
+  min-height: var(--env-control-h);
+  padding: 0;
+}
+
+.settings-panel .color-row > :first-child {
+  min-width: 0;
+  color: rgba(235, 235, 245, 0.62);
+  font-size: 12px;
+  line-height: 1.25;
+}
+
+.settings-panel .env-color-field {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--env-control-h);
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  padding: 5px 10px 5px 7px;
+  border-radius: var(--env-pill-radius);
+  background: var(--env-glass-control-bg);
+  box-shadow: var(--env-glass-control-shadow);
+  backdrop-filter: blur(24px) saturate(128%) brightness(1.05);
+  -webkit-backdrop-filter: blur(24px) saturate(128%) brightness(1.05);
+}
+
+.settings-panel .env-color-field__swatch {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  min-height: 26px;
+  flex: 0 0 26px;
+  overflow: hidden;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.settings-panel .env-color-field__preview {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.settings-panel .env-color-field__swatch input[type="color"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.settings-panel .env-color-field__value {
+  height: 32px;
+  min-height: 32px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.settings-panel .env-color-field__value input {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0 4px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.66);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-align: center;
 }

 .slider-row {
@ -1256,6 +1378,116 @@ header {
  padding: 4px 6px 4px 6px;
 }

+.settings-panel .env-range-control.slider-row {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--env-control-h);
+  overflow: hidden;
+  border-radius: var(--env-pill-radius);
+  background: var(--env-glass-control-bg);
+  box-shadow: var(--env-glass-control-shadow);
+  backdrop-filter: blur(24px) saturate(128%) brightness(1.05);
+  -webkit-backdrop-filter: blur(24px) saturate(128%) brightness(1.05);
+}
+
+.settings-panel .env-range-control.slider-row::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  z-index: 1;
+  width: var(--slider-percent, 0%);
+  border-radius: inherit;
+  background: var(--modal-btn-primary, var(--accent));
+}
+
+.settings-panel .env-range-control .slider-label,
+.settings-panel .env-range-control .slider-value {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 760;
+  line-height: 1;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.settings-panel .env-range-control .slider-label {
+  left: 24px;
+  max-width: calc(100% - 132px);
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.92);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-panel .env-range-control .slider-value {
+  right: 20px;
+  color: rgba(255, 255, 255, 0.9);
+  text-align: right;
+}
+
+.settings-panel .env-range-control .slider-input {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: inherit;
+  background: transparent;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.settings-panel .env-range-control .slider-input::-webkit-slider-runnable-track {
+  height: var(--env-control-h);
+  border: 0;
+  background: transparent;
+}
+
+.settings-panel .env-range-control .slider-input::-webkit-slider-thumb {
+  width: 24px;
+  height: var(--env-control-h);
+  margin-top: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.settings-panel .env-range-control .slider-input::-moz-range-track {
+  height: var(--env-control-h);
+  border: 0;
+  background: transparent;
+}
+
+.settings-panel .env-range-control .slider-input::-moz-range-thumb {
+  width: 24px;
+  height: var(--env-control-h);
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.settings-panel .env-range-control .slider-fill-text {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  overflow: hidden;
+  clip-path: inset(0 calc(100% - var(--slider-percent, 0%)) 0 0);
+  pointer-events: none;
+}
+
+.settings-panel .env-range-control .slider-fill-text .slider-label,
+.settings-panel .env-range-control .slider-fill-text .slider-value {
+  color: var(--modal-btn-primary-contrast, #15170f);
+}
+
 .slider-label {
  color: var(--text);
  font-size: 13px;
@ -1434,6 +1666,28 @@ header {
  padding: 5px 6px;
 }

+.settings-panel .env-color-field .env-color-field__value input[type="text"] {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: 0;
+  padding: 0 4px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.66);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-align: center;
+  outline: none;
+}
+
+.settings-panel .env-color-field .env-color-field__value input[type="text"]:focus {
+  border: 0;
+  box-shadow: none;
+}
+
 .log {
  background: color-mix(in srgb, var(--modal-element) var(--modal-focus-alpha, 100%), transparent);
  border: 1px solid var(--modal-element-outline, var(--modal-element));
--- a/frontend/dcViewer.js
+++ b/frontend/dcViewer.js
@ -4,7 +4,7 @@ const SDK_URL = "./lib/dc-camera-context.es.js";
 import { createLogo } from "./src/ui/logo.js";
 import { toolbarConfig, applyToolbarVars } from "./src/ui/toolbar.js";
 import { createTemplatesMenu } from "./src/ui/templatesMenu.js";
-import { createSettingsMenu } from "./src/ui/settingsMenu.js";
+import { createSettingsMenu } from "./src/ui/settingsMenu.js?v=2";
 import { createMeasurementModal } from "./src/ui/measurementModal.js";
 import { createGlassSelect } from "./src/ui/glassSelect.js";
 import { createSliderControl } from "./src/ui/controls/slider.js";
--- a/frontend/index.html
+++ b/frontend/index.html
@ -87,7 +87,7 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="./dcViewer.css?v=11">
+  <link rel="stylesheet" href="./dcViewer.css?v=12">
 </head>
 <body>
  <header>
@ -251,6 +251,6 @@
  <input id="fileInput" class="hidden" type="file"
         accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">

-  <script type="module" src="./dcViewer.js?v=16"></script>
+  <script type="module" src="./dcViewer.js?v=17"></script>
 </body>
 </html>
--- a/frontend/src/ui/controls/color.js
+++ b/frontend/src/ui/controls/color.js
@ -0,0 +1,60 @@
+const isHexColor = (value) => /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(String(value || "").trim());
+
+export function createColorControl({
+  value = "#ffffff",
+  previewValue = value,
+  ariaLabel = "Выбрать цвет",
+  valueLabel = "Значение цвета",
+  onChange,
+}) {
+  const root = document.createElement("div");
+  root.className = "env-color-field";
+
+  const swatch = document.createElement("label");
+  swatch.className = "env-color-field__swatch";
+
+  const preview = document.createElement("span");
+  preview.className = "env-color-field__preview";
+
+  const picker = document.createElement("input");
+  picker.type = "color";
+  picker.setAttribute("aria-label", ariaLabel);
+
+  const valueWrap = document.createElement("div");
+  valueWrap.className = "env-color-field__value";
+
+  const valueInput = document.createElement("input");
+  valueInput.type = "text";
+  valueInput.setAttribute("aria-label", valueLabel);
+  valueWrap.appendChild(valueInput);
+
+  const update = (nextValue, { emit = false } = {}) => {
+    const safeValue = String(nextValue ?? "");
+    const safePreview = isHexColor(safeValue)
+      ? safeValue
+      : (isHexColor(previewValue) ? previewValue : "#000000");
+
+    valueInput.value = safeValue;
+    picker.value = isHexColor(safeValue) ? safeValue : safePreview;
+    preview.style.background = safePreview;
+
+    if (emit && typeof onChange === "function") {
+      onChange(safeValue);
+    }
+  };
+
+  picker.addEventListener("input", () => update(picker.value, { emit: true }));
+  valueInput.addEventListener("change", () => update(valueInput.value, { emit: true }));
+
+  swatch.appendChild(preview);
+  swatch.appendChild(picker);
+  root.appendChild(swatch);
+  root.appendChild(valueWrap);
+
+  update(value);
+
+  root.setValue = (nextValue) => update(nextValue);
+  root.getValue = () => valueInput.value;
+
+  return root;
+}
--- a/frontend/src/ui/settingsMenu.js
+++ b/frontend/src/ui/settingsMenu.js
@ -1,4 +1,5 @@
 import { createSliderControl } from "./controls/slider.js";
+import { createColorControl } from "./controls/color.js";

 const defaultSettings = {
  themeVersion: "v4-beam-lime",
@ -186,7 +187,12 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
    header.innerHTML = `<span class="settings-title">Настройки</span>`;
    const closeBtn = document.createElement("button");
    closeBtn.className = "settings-close";
-    closeBtn.textContent = "—";
+    closeBtn.setAttribute("aria-label", "Закрыть настройки");
+    closeBtn.innerHTML = `
+      <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+        <path d="M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+      </svg>
+    `;
    closeBtn.addEventListener("click", hide);
    header.appendChild(closeBtn);
    panel.appendChild(header);
@ -202,31 +208,53 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
    };

    const addColor = (parent, label, key) => {
-      const isHex = (val) => /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test((val || "").trim());
      const row = document.createElement("div");
      row.className = "color-row";
-      const lbl = document.createElement("label");
+      const lbl = document.createElement("div");
      lbl.textContent = label;
-      const input = document.createElement("input");
-      input.type = "color";
-      input.value = isHex(state[key]) ? state[key] : "#ffffff";
-      const hex = document.createElement("input");
-      hex.type = "text";
-      hex.value = state[key];
-      input.addEventListener("change", (e) => {
-        hex.value = e.target.value;
-        setVal(key, e.target.value);
-      });
-      hex.addEventListener("change", (e) => {
-        input.value = e.target.value;
-        setVal(key, e.target.value);
+      const control = createColorControl({
+        value: state[key],
+        onChange: (nextValue) => {
+          setVal(key, nextValue);
+        },
      });
      row.appendChild(lbl);
-      row.appendChild(input);
-      row.appendChild(hex);
+      row.appendChild(control);
      parent.appendChild(row);
    };

+    const addSettingsSlider = ({
+      parent,
+      label,
+      key,
+      value,
+      min = 0,
+      max = 100,
+      step = 1,
+      formatValue = (nextValue) => String(nextValue),
+      onChange,
+    }) => {
+      const slider = createSliderControl({
+        label,
+        value,
+        min,
+        max,
+        step,
+        className: "env-range-control",
+        showValue: true,
+        formatValue,
+        onChange: (nextValue) => {
+          if (typeof onChange === "function") {
+            onChange(nextValue);
+            return;
+          }
+          setVal(key, nextValue);
+        },
+      });
+      parent.appendChild(slider);
+      return slider;
+    };
+
    const font = section("Фон");
    addColor(font, "Фон внешний", "bgOuter");
    addColor(font, "Фон холста верх", "canvasTop");
@ -235,65 +263,59 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
    addColor(font, "Фон загрузки низ", "loadingBottom");
    panel.appendChild(font);

-  const buttons = section("Кнопки");
-  addColor(buttons, "Плюс", "plus");
-  addColor(buttons, "Кнопки (заливка)", "templateFill");
-  addColor(buttons, "Кнопки (бордер)", "templateOutline");
-  addColor(buttons, "Кнопки (outline hover)", "templateOutlineHover");
-  const brightnessSlider = createSliderControl({
-    label: "Яркость подсветки",
-    value: Number(state.templateGlow ?? 80),
-    min: 0,
-    max: 100,
-    step: 1,
-    onChange: (val) => setVal("templateGlow", val),
-  });
-  buttons.appendChild(brightnessSlider);
-  panel.appendChild(buttons);
+    const buttons = section("Кнопки");
+    addColor(buttons, "Плюс", "plus");
+    addColor(buttons, "Кнопки (заливка)", "templateFill");
+    addColor(buttons, "Кнопки (бордер)", "templateOutline");
+    addColor(buttons, "Кнопки (outline hover)", "templateOutlineHover");
+    addSettingsSlider({
+      parent: buttons,
+      label: "Яркость подсветки",
+      key: "templateGlow",
+      value: Number(state.templateGlow ?? 80),
+      min: 0,
+      max: 100,
+      step: 1,
+      formatValue: (val) => `${Math.round(val)}%`,
+    });
+    panel.appendChild(buttons);

-  const projectButtons = section("Кнопки проектов");
-  addColor(projectButtons, "Проекты (заливка)", "projectBtnFill");
-  addColor(projectButtons, "Проекты (бордер)", "projectBtnBorder");
-  addColor(projectButtons, "Проекты (hover)", "projectBtnHover");
-  panel.appendChild(projectButtons);
+    const projectButtons = section("Кнопки проектов");
+    addColor(projectButtons, "Проекты (заливка)", "projectBtnFill");
+    addColor(projectButtons, "Проекты (бордер)", "projectBtnBorder");
+    addColor(projectButtons, "Проекты (hover)", "projectBtnHover");
+    panel.appendChild(projectButtons);

-  const modalButtons = section("Кнопки модалок");
-  addColor(modalButtons, "Модальная primary", "modalBtnPrimary");
-  addColor(modalButtons, "Модальная secondary", "modalBtnSecondary");
-  addColor(modalButtons, "Лоудер", "loaderColor");
-  panel.appendChild(modalButtons);
+    const modalButtons = section("Кнопки модалок");
+    addColor(modalButtons, "Модальная primary", "modalBtnPrimary");
+    addColor(modalButtons, "Модальная secondary", "modalBtnSecondary");
+    addColor(modalButtons, "Лоудер", "loaderColor");
+    panel.appendChild(modalButtons);

-  const toolbar = section("Toolbar");
-  addColor(toolbar, "Фон", "toolbarBg");
-  addColor(toolbar, "Актив", "toolbarBgActive");
-  addColor(toolbar, "Бордер", "toolbarBorder");
-  addColor(toolbar, "Outline", "toolbarOutline");
-  panel.appendChild(toolbar);
+    const toolbar = section("Toolbar");
+    addColor(toolbar, "Фон", "toolbarBg");
+    addColor(toolbar, "Актив", "toolbarBgActive");
+    addColor(toolbar, "Бордер", "toolbarBorder");
+    addColor(toolbar, "Outline", "toolbarOutline");
+    panel.appendChild(toolbar);

    const navCube = section("NavCube");
    addColor(navCube, "Грани", "navCubeBase");
    addColor(navCube, "Hover", "navCubeHover");
    addColor(navCube, "Текст", "navCubeText");
    addColor(navCube, "Рёбра", "navCubeEdge");
-    const edgeAlphaRow = document.createElement("div");
-    edgeAlphaRow.className = "color-row";
-    const edgeAlphaLbl = document.createElement("label");
-    edgeAlphaLbl.textContent = "Прозрачность рёбер (0-1)";
-    const edgeAlphaInput = document.createElement("input");
-    edgeAlphaInput.type = "number";
-    edgeAlphaInput.step = "0.05";
-    edgeAlphaInput.min = "0";
-    edgeAlphaInput.max = "1";
-    edgeAlphaInput.value = state.navCubeEdgeAlpha;
-    edgeAlphaInput.addEventListener("change", () => {
-      const v = Math.min(1, Math.max(0, parseFloat(edgeAlphaInput.value) || 0));
-      edgeAlphaInput.value = v;
-      setVal("navCubeEdgeAlpha", v);
+    addSettingsSlider({
+      parent: navCube,
+      label: "Прозрачность рёбер",
+      value: Math.round(Math.max(0, Math.min(1, Number(state.navCubeEdgeAlpha ?? 0.6))) * 100),
+      min: 0,
+      max: 100,
+      step: 5,
+      formatValue: (val) => `${Math.round(val)}%`,
+      onChange: (val) => {
+        setVal("navCubeEdgeAlpha", Math.max(0, Math.min(1, Number(val) / 100)));
+      },
    });
-    edgeAlphaRow.appendChild(edgeAlphaLbl);
-    edgeAlphaRow.appendChild(edgeAlphaInput);
-    edgeAlphaRow.appendChild(document.createElement("div"));
-    navCube.appendChild(edgeAlphaRow);
    panel.appendChild(navCube);

    const measure = section("Линейка");
@ -325,33 +347,35 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
    const modals = section("Модальные окна");
    addColor(modals, "Основной фон", "modalBg");
    addColor(modals, "Фокусный фон", "modalFocus");
-    const modalBgAlphaRow = createSliderControl({
+    addSettingsSlider({
+      parent: modals,
      label: "Прозрачность основного фона",
      min: 0,
      max: 1,
      step: 0.05,
      value: parseFloat(state.modalBgAlpha ?? 1),
+      formatValue: (val) => `${Math.round(Number(val) * 100)}%`,
      onChange: (val) => {
        const num = Math.max(0, Math.min(1, parseFloat(val)));
        setVal("modalBgAlpha", num);
        document.documentElement.style.setProperty("--modal-bg-alpha", `${num * 100}%`);
      },
    });
-    modals.appendChild(modalBgAlphaRow);

-    const modalFocusAlphaRow = createSliderControl({
+    addSettingsSlider({
+      parent: modals,
      label: "Прозрачность фокусного фона",
      min: 0,
      max: 1,
      step: 0.05,
      value: parseFloat(state.modalFocusAlpha ?? 1),
+      formatValue: (val) => `${Math.round(Number(val) * 100)}%`,
      onChange: (val) => {
        const num = Math.max(0, Math.min(1, parseFloat(val)));
        setVal("modalFocusAlpha", num);
        document.documentElement.style.setProperty("--modal-focus-alpha", `${num * 100}%`);
      },
    });
-    modals.appendChild(modalFocusAlphaRow);

    addColor(modals, "Аутлайн", "modalBorder");
    addColor(modals, "Фон элемента", "modalElement");