chuijs 4.0.2 → 4.0.4

package/framework/components/chui_media/video_styles.css

@@ -11,11 +11,11 @@ chui_vp_main {
     display: block;
     width: 100%;
     border-radius: var(--radius_md);
-    background: var(--ap_main_background);
+    background: var(--player_background);
     border: 1px solid var(--border_color);
     overflow: hidden;
-    --seek-before-width: 0%;
-    --volume-before-width: 0%;
+    --seek_before_width: 0%;
+    --volume_before_width: 0%;
 }
 
 /* Кадр занимает всю ширину, а высоту считает соотношение сторон: прежде элемент показывал
@@ -50,7 +50,7 @@ chui_vp_panel {
        `pointer-events` гасим вместе с прозрачностью — иначе невидимая полоса ловит щелчки */
     opacity: 0;
     pointer-events: none;
-    transition: opacity var(--transition_time) var(--ease_out);
+    transition: opacity var(--motion_fast) var(--motion_ease);
 }
 
 chui_vp_main.vp_panel_open chui_vp_panel {
@@ -64,7 +64,9 @@ chui_vp_main.vp_controls_off chui_vp_panel {
 }
 
 /* КНОПКИ: площадка 32px с глифом 18px */
-chui_vp_play_pause, chui_vp_volume_icon, chui_vp_full_mode {
+chui_vp_play_pause,
+chui_vp_volume_icon,
+chui_vp_full_mode {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -76,6 +78,14 @@ chui_vp_play_pause, chui_vp_volume_icon, chui_vp_full_mode {
     border-radius: var(--radius_sm);
 }
 
+/* Кегль глифа — ключом плеера: у `chui_icon` есть своё правило (размер шапки),
+   поэтому размер задаётся значку, а не кнопке. Прежде число стояло в коде */
+chui_vp_play_pause chui_icon,
+chui_vp_volume_icon chui_icon,
+chui_vp_full_mode chui_icon {
+    font-size: var(--player_icon_size);
+}
+
 /* Главная кнопка — светлый круг с глифом цвета подложки, как у Audio: он адаптивен к схеме
    и не спорит с акцентом полосы прогресса */
 chui_vp_play_pause {
@@ -97,12 +107,13 @@ chui_vp_play_pause:hover {
 }
 
 chui_vp_play_pause:active {
-    transform: scale(.96);
+    transform: scale(0.96);
 }
 
 /* Глифы отвечают на курсор акцентом — у всех, кроме главной кнопки: она сама светлая,
    и её глиф должен остаться читаемым */
-chui_vp_volume_icon:hover chui_icon, chui_vp_full_mode:hover chui_icon {
+chui_vp_volume_icon:hover chui_icon,
+chui_vp_full_mode:hover chui_icon {
     color: var(--blue_prime_background);
 }
 
@@ -113,7 +124,7 @@ chui_vp_play_pause:active chui_icon {
 
 chui_vp_volume_icon:active,
 chui_vp_full_mode:active {
-    transform: scale(.94);
+    transform: scale(0.94);
 }
 
 chui_vp_volume_icon:active chui_icon,
@@ -123,8 +134,11 @@ chui_vp_full_mode:active chui_icon {
 
 /* Кнопки полосы — кастомные теги, поэтому обводку фокуса рисуем сами.
    `outline` не сдвигает вёрстку */
-chui_vp_play_pause:focus-visible, chui_vp_volume_icon:focus-visible,
-chui_vp_full_mode:focus-visible, #chui_vp_seek:focus-visible, #chui_vp_volume:focus-visible {
+chui_vp_play_pause:focus-visible,
+chui_vp_volume_icon:focus-visible,
+chui_vp_full_mode:focus-visible,
+#chui_vp_seek:focus-visible,
+#chui_vp_volume:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -152,7 +166,7 @@ chui_vp_seek_buf {
     width: 0;
     height: var(--player_track_height);
     border-radius: var(--radius_pill);
-    background: var(--ap_slider_buf_background);
+    background: var(--player_slider_buffer_background);
     position: absolute;
     /* На те же полголовки ползунка, что и дорожка: иначе буфер выступал бы слева */
     inset-inline-start: 6px;
@@ -162,7 +176,8 @@ chui_vp_seek_buf {
 /* Прогресс и громкость — та же шкала, что у Audio: дорожка `--player_track_height`,
    заливка градиентом по доле, ползунок виден и в покое и не выезжает за дорожку
    (`padding-inline` на половину кружка) */
-#chui_vp_seek, #chui_vp_volume {
+#chui_vp_seek,
+#chui_vp_volume {
     margin: 0;
     -webkit-appearance: none;
     border-radius: var(--radius_pill);
@@ -194,24 +209,30 @@ chui_vp_seek_buf {
 }
 
 #chui_vp_seek {
-    background-image: linear-gradient(to right,
-        var(--blue_prime_background) 0 var(--seek-before-width, 0%),
-        var(--ap_slider_background) var(--seek-before-width, 0%) 100%);
+    background-image: linear-gradient(
+        to right,
+        var(--blue_prime_background) 0 var(--seek_before_width, 0%),
+        var(--player_slider_background) var(--seek_before_width, 0%) 100%
+    );
 }
 
 /* Громкость — ступень звука, а не время: заливка нейтральная, чтобы не читалась второй
    полосой прогресса */
 #chui_vp_volume {
-    background-image: linear-gradient(to right,
-        var(--text_color) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%);
+    background-image: linear-gradient(
+        to right,
+        var(--text_color) 0 var(--volume_before_width, 0%),
+        var(--player_slider_background) var(--volume_before_width, 0%) 100%
+    );
 }
 
 /* Выключенная громкость (нет звука) — заливка ступени приглушается, как у Audio */
 #chui_vp_volume:disabled {
-    background-image: linear-gradient(to right,
-        var(--ap_slider_buf_background) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%);
+    background-image: linear-gradient(
+        to right,
+        var(--player_slider_buffer_background) 0 var(--volume_before_width, 0%),
+        var(--player_slider_background) var(--volume_before_width, 0%) 100%
+    );
 }
 
 #chui_vp_seek::-webkit-slider-runnable-track,
@@ -224,7 +245,8 @@ chui_vp_seek_buf {
 
 /* Ползунок виден всегда, но в покое он меньше — как у Audio. Ободок цвета полосы
    управления нужен там, где заливка белая */
-#chui_vp_seek::-webkit-slider-thumb, #chui_vp_volume::-webkit-slider-thumb {
+#chui_vp_seek::-webkit-slider-thumb,
+#chui_vp_volume::-webkit-slider-thumb {
     -webkit-appearance: none;
     border: none;
     height: 9px;
@@ -234,6 +256,14 @@ chui_vp_seek_buf {
     box-shadow: 0 0 0 2px var(--header_background);
     cursor: pointer;
     margin-top: calc((var(--player_track_height) - 9px) / 2);
+    /* Рост под курсором — тот же переход: своё время у ручки есть только здесь,
+       общее правило до псевдоэлемента бегунка не достаёт */
+    transition:
+        height var(--motion_fast) var(--motion_ease),
+        width var(--motion_fast) var(--motion_ease),
+        margin-top var(--motion_fast) var(--motion_ease),
+        background-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
 /* У выключенной полосы ползунка нет: она и так приглушена заливкой */
@@ -254,10 +284,13 @@ chui_vp_main:hover #chui_vp_volume:not(:disabled)::-webkit-slider-thumb,
     width: 12px;
     margin-top: calc((var(--player_track_height) - 12px) / 2);
     background-color: var(--player_thumb_background);
-    box-shadow: 0 0 0 2px var(--header_background), var(--box_shadow_main);
+    box-shadow:
+        0 0 0 2px var(--header_background),
+        var(--box_shadow_main);
 }
 
-#chui_vp_seek:focus, #chui_vp_volume:focus,
+#chui_vp_seek:focus,
+#chui_vp_volume:focus,
 #chui_vp_seek:focus::-webkit-slider-runnable-track,
 #chui_vp_volume:focus::-webkit-slider-runnable-track {
     outline: none;

package/framework/components/chui_menu_bar/menu_bar.js

@@ -1,5 +1,5 @@
-const {Animation} = require("../../modules/chui_animations/animations");
-const {MenuKeyboard, makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { MenuKeyboard, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 const MENU_BAR_DROP_DOWN_ACTIVE_CLASS = "menu_bar_drop_down_button";
 // Панель открывается под кнопкой с зазором и не подходит к краю окна ближе этого отступа
@@ -10,13 +10,13 @@ class MenuBar {
     // Панели выпадающих списков лежат в body, а не в полосе (см. MenuBarDropDown), поэтому
     // снятие полосы обязано убирать и их: экземпляр находится по узлу полосы
     static #instances = new WeakMap();
-    #chui_menu_bar_main = document.createElement("chui_menu_bar_main")
+    #chuiMenuBarMain = document.createElement("chui_menu_bar_main");
     #dropdowns = [];
     constructor(options = { test: Boolean() }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_MenuBar');
-        MenuBar.#instances.set(this.#chui_menu_bar_main, this);
-        if (options.test !== undefined) this.#chui_menu_bar_main.setAttribute("test", options.test)
-        this.#chui_menu_bar_main.addEventListener("wheel", this.#wheel_event, {passive: true});
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_MenuBar");
+        MenuBar.#instances.set(this.#chuiMenuBarMain, this);
+        if (options.test !== undefined) this.#chuiMenuBarMain.setAttribute("test", options.test);
+        this.#chuiMenuBarMain.addEventListener("wheel", this.#wheelEvent, { passive: true });
     }
     /*
      * Колесо мыши прокручивает полосу вбок.
@@ -26,16 +26,16 @@ class MenuBar {
      * (для этого нужен сдвиг или тачпад), поэтому переводим дельту сами — иначе до правых
      * пунктов полосы мышью было бы не добраться.
      */
-    #wheel_event = (event) => {
-        const bar = this.#chui_menu_bar_main;
+    #wheelEvent = (event) => {
+        const bar = this.#chuiMenuBarMain;
         if (bar.scrollWidth <= bar.clientWidth) return;
         bar.scrollLeft += event.deltaY;
     };
     addMenuItems(...components) {
-        for (let component of components) {
-            let element = component.set()
-            new Animation(element).fadeIn()
-            this.#chui_menu_bar_main.appendChild(element);
+        for (const component of components) {
+            const element = component.set();
+            new Animation(element).fadeIn();
+            this.#chuiMenuBarMain.appendChild(element);
             if (component instanceof MenuBarDropDown) this.#dropdowns.push(component);
         }
     }
@@ -43,8 +43,8 @@ class MenuBar {
     destroy() {
         for (const dropdown of this.#dropdowns) dropdown.unmount();
         this.#dropdowns = [];
-        this.#chui_menu_bar_main.removeEventListener("wheel", this.#wheel_event);
-        MenuBar.#instances.delete(this.#chui_menu_bar_main);
+        this.#chuiMenuBarMain.removeEventListener("wheel", this.#wheelEvent);
+        MenuBar.#instances.delete(this.#chuiMenuBarMain);
         return this;
     }
     /**
@@ -57,45 +57,46 @@ class MenuBar {
         return node;
     }
     set() {
-        return this.#chui_menu_bar_main;
+        return this.#chuiMenuBarMain;
     }
-    static DROPDOWN(options = {title: String(), items: []}) {
-        return new MenuBarDropDown(options)
+    static DROPDOWN(options = { title: String(), items: [] }) {
+        return new MenuBarDropDown(options);
     }
 }
 
 class MenuBarDropDown {
-    #mb_dd_main = document.createElement("menu_bar_drop_down_main");
-    #mb_dd_button = document.createElement("menu_bar_drop_down_button");
-    #mb_dd_dropdown = document.createElement("menu_bar_dropdown");
-    #is_open = false;
+    #mbDdMain = document.createElement("menu_bar_drop_down_main");
+    #mbDdButton = document.createElement("menu_bar_drop_down_button");
+    #mbDdDropdown = document.createElement("menu_bar_dropdown");
+    #isOpen = false;
     #keyboard = undefined;
-    constructor(options = {title: String(), items: []}) {
+    constructor(options = { title: String(), items: [] }) {
         // Панель собирают и отдельно от полосы (`MenuBar.DROPDOWN`) — свои стили нужны здесь же
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_MenuBar');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_MenuBar");
         // Пустой заголовок остаётся пустым: подстановка заготовки опции рисовала слово «undefined»
-        this.#mb_dd_button.innerText = options.title === undefined || options.title === null ? "" : options.title;
-        this.#mb_dd_dropdown.id = require("randomstring").generate();
-        this.#mb_dd_main.appendChild(this.#mb_dd_button)
-        for (let item of Array.isArray(options.items) ? options.items : []) this.#mb_dd_dropdown.appendChild(item.set());
+        this.#mbDdButton.innerText = options.title === undefined || options.title === null ? "" : options.title;
+        this.#mbDdDropdown.id = require("randomstring").generate();
+        this.#mbDdMain.appendChild(this.#mbDdButton);
+        for (const item of Array.isArray(options.items) ? options.items : [])
+            this.#mbDdDropdown.appendChild(item.set());
         // Панель лежит в document.body, а не рядом с кнопкой: шапка — сама с backdrop-filter,
         // а элемент с backdrop-filter становится «backdrop root» — вложенная панель тогда не
         // блюрит содержимое под собой (замер: детальность 33.4 и с блюром, и без него; вне шапки
         // 20.1 против 31.5). Там же, в body, панель свободна и от контекста наложения шапки:
         // с z-index 1 внутри шапки её перекрывали выдвижные слои (app_menu, ящик уведомлений).
-        document.body.appendChild(this.#mb_dd_dropdown);
+        document.body.appendChild(this.#mbDdDropdown);
 
         // Клавиатура и aria: кнопка открывает меню, стрелки ходят по пунктам, Escape закрывает
-        this.#keyboard = new MenuKeyboard(this.#mb_dd_dropdown, {
+        this.#keyboard = new MenuKeyboard(this.#mbDdDropdown, {
             itemSelector: "button",
             onEscape: () => this.#close(),
-            trigger: this.#mb_dd_button
+            trigger: this.#mbDdButton,
         });
-        makeKeyboardButton(this.#mb_dd_button);
+        makeKeyboardButton(this.#mbDdButton);
         // Закрытый список тоже должен быть объявлен как закрытый: без этого у кнопки,
         // которую ни разу не открывали, не было бы aria-expanded
         this.#keyboard.setExpanded(false);
-        this.#mb_dd_button.addEventListener("keydown", (event) => {
+        this.#mbDdButton.addEventListener("keydown", (event) => {
             if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.preventDefault();
                 this.#open();
@@ -104,56 +105,57 @@ class MenuBarDropDown {
         });
 
         // Слушатели
-        this.#mb_dd_button.addEventListener("click", this.#mb_dd_button_click_event);
-        this.#mb_dd_dropdown.addEventListener("click", this.#mb_dd_dropdown_click_event);
+        this.#mbDdButton.addEventListener("click", this.#mbDdButtonClickEvent);
+        this.#mbDdDropdown.addEventListener("click", this.#mbDdDropdownClickEvent);
     }
     #open() {
-        this.#is_open = true;
+        this.#isOpen = true;
         // Панель живёт в body: если её снимали вместе с полосой (`unmount`), возвращаем на место
-        if (document.body.contains(this.#mb_dd_dropdown) === false) document.body.appendChild(this.#mb_dd_dropdown);
-        this.#mb_dd_button.classList.add(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
-        // fadeIn показывает панель (display: flex), и только после этого её можно измерить
-        new Animation(this.#mb_dd_dropdown).fadeIn();
+        if (document.body.contains(this.#mbDdDropdown) === false) document.body.appendChild(this.#mbDdDropdown);
+        this.#mbDdButton.classList.add(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
+        // panelIn показывает панель (display: flex), и только после этого её можно измерить
+        new Animation(this.#mbDdDropdown).panelIn();
         this.#positionDropdown();
-        window.addEventListener('click', this.#window_click_event);
-        window.addEventListener('resize', this.#position_dropdown_event);
+        window.addEventListener("click", this.#windowClickEvent);
+        window.addEventListener("resize", this.#positionDropdownEvent);
         this.#keyboard.setExpanded(true);
     }
     #close() {
-        if (!this.#is_open) return;
-        this.#is_open = false;
-        this.#mb_dd_button.classList.remove(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
-        new Animation(this.#mb_dd_dropdown).fadeOut();
-        window.removeEventListener('click', this.#window_click_event);
-        window.removeEventListener('resize', this.#position_dropdown_event);
+        if (!this.#isOpen) return;
+        this.#isOpen = false;
+        this.#mbDdButton.classList.remove(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
+        new Animation(this.#mbDdDropdown).fadeOut();
+        window.removeEventListener("click", this.#windowClickEvent);
+        window.removeEventListener("resize", this.#positionDropdownEvent);
         this.#keyboard.setExpanded(false);
     }
     // position: fixed — координаты считаются от окна, поэтому панель пересчитывается и на resize
     #positionDropdown() {
-        const button = this.#mb_dd_button.getBoundingClientRect();
-        const dropdown = this.#mb_dd_dropdown.getBoundingClientRect();
+        const button = this.#mbDdButton.getBoundingClientRect();
+        const dropdown = this.#mbDdDropdown.getBoundingClientRect();
         let left = button.left;
         // Панель у последнего пункта меню-бара уезжала бы за правый край окна
         if (left + dropdown.width > window.innerWidth - MENU_BAR_DROPDOWN_EDGE) {
             left = window.innerWidth - MENU_BAR_DROPDOWN_EDGE - dropdown.width;
         }
         if (left < MENU_BAR_DROPDOWN_EDGE) left = MENU_BAR_DROPDOWN_EDGE;
-        this.#mb_dd_dropdown.style.left = `${Math.round(left)}px`;
-        this.#mb_dd_dropdown.style.top = `${Math.round(button.bottom + MENU_BAR_DROPDOWN_GAP)}px`;
+        this.#mbDdDropdown.style.left = `${Math.round(left)}px`;
+        this.#mbDdDropdown.style.top = `${Math.round(button.bottom + MENU_BAR_DROPDOWN_GAP)}px`;
     }
-    #mb_dd_button_click_event = () => {
-        if (this.#is_open) this.#close(); else this.#open();
-    }
-    #mb_dd_dropdown_click_event = () => {
+    #mbDdButtonClickEvent = () => {
+        if (this.#isOpen) this.#close();
+        else this.#open();
+    };
+    #mbDdDropdownClickEvent = () => {
         this.#close();
-    }
+    };
     // «Снаружи» — это и кнопка с обёрткой, и сама панель: она теперь не их потомок
-    #window_click_event = (event) => {
-        if (!this.#is_open) return;
-        if (this.#mb_dd_main.contains(event.target) || this.#mb_dd_dropdown.contains(event.target)) return;
+    #windowClickEvent = (event) => {
+        if (!this.#isOpen) return;
+        if (this.#mbDdMain.contains(event.target) || this.#mbDdDropdown.contains(event.target)) return;
         this.#close();
-    }
-    #position_dropdown_event = () => this.#positionDropdown();
+    };
+    #positionDropdownEvent = () => this.#positionDropdown();
     /**
      * Убрать панель из body, не трогая клавиатурный слой: панель живёт в body, а не в полосе,
      * и её снимает тот, кто уводит полосу из шапки. Вернувшаяся полоса вернёт панель в body
@@ -161,7 +163,7 @@ class MenuBarDropDown {
      */
     unmount() {
         this.#close();
-        this.#mb_dd_dropdown.remove();
+        this.#mbDdDropdown.remove();
         return this;
     }
     /** Полное удаление: панель больше не нужна — снять клавиатуру и убрать панель из body */
@@ -171,8 +173,8 @@ class MenuBarDropDown {
         return this;
     }
     set() {
-        return this.#mb_dd_main;
+        return this.#mbDdMain;
     }
 }
 
-exports.MenuBar = MenuBar
+exports.MenuBar = MenuBar;

package/framework/components/chui_menu_bar/styles.css

@@ -1,11 +1,11 @@
 chui_menu_bar_main {
     /* Компактный режим. В шапке меню-бар — служебная полоса, а не контрол страницы, поэтому
-       общесистемные отступы (--main_padding 8px 13px, --control_padding 8px, --margin 6px)
+       общесистемные отступы (--block_padding 8px 13px, --control_padding 8px, --block_margin 6px)
        уменьшены здесь локально. Токены переопределяются на корне полосы: Button пишет
        padding: var(--control_padding) инлайном, стилями его иначе не перебить.
        При полосе шапки 46px кнопки меню выходят ≈27px — они ниже кнопок шапки (30px),
        но не теряются в строке. */
-    --main_padding: 5px 10px;
+    --block_padding: 5px 10px;
     --control_padding: 5px;
     display: flex;
     align-items: center;
@@ -15,7 +15,7 @@ chui_menu_bar_main {
     gap: 2px;
     /* Полоса идёт за кнопкой меню маршрутов; без этой кнопки (`disableAppMenu`)
        она упиралась бы в край окна */
-    margin-inline-start: var(--margin);
+    margin-inline-start: var(--block_margin);
     /* Тесная шапка: полоса с вкладками, кнопкой меню и названием занимает больше, чем окно
        минимальной ширины (960px), и раньше лишние пункты просто исчезали — левый бокс шапки
        их обрезал. Теперь полоса прокручивается вбок (ось X), поэтому пункты остаются
@@ -33,7 +33,7 @@ chui_menu_bar_main {
     -webkit-app-region: no-drag;
 }
 
-/* Button и MenuBar.DROPDOWN несут свои внешние отступы (--margin и auto 6px) —
+/* Button и MenuBar.DROPDOWN несут свои внешние отступы (--block_margin и auto 6px) —
    внутри полосы их заменяет gap, иначе полоса распухает по вертикали. */
 chui_menu_bar_main > chui_button,
 menu_bar_drop_down_main {
@@ -48,7 +48,7 @@ chui_menu_bar_main .chui_button {
     background: transparent;
     border: none;
     border-radius: var(--radius_sm);
-    padding: var(--main_padding);
+    padding: var(--block_padding);
 }
 
 chui_menu_bar_main .chui_button:hover {
@@ -57,7 +57,8 @@ chui_menu_bar_main .chui_button:hover {
 }
 
 chui_menu_bar_main .chui_button:active:not(:disabled) {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
     border: none;
 }
 
@@ -114,8 +115,8 @@ menu_bar_drop_down_button {
     cursor: pointer;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
+    border-radius: var(--radius_sm);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     font-weight: 400;
     border: none;
@@ -139,7 +140,7 @@ menu_bar_dropdown {
     display: none;
     flex-direction: column;
     min-width: max-content;
-    padding: var(--margin);
+    padding: var(--block_margin);
     background: var(--header_background);
     color: var(--text_color);
     border: 1px solid var(--border_color);
@@ -152,7 +153,7 @@ menu_bar_dropdown {
 /* Пункты панели — плоские строки в стиле context_menu_item / user_item: синяя заливка ховера
    одна на всю семью меню (у `chui_button` ховер красит и текст, и глиф). Панель лежит в body,
    поэтому обёртка пункта больше не потомок полосы — её внешние отступы снимаются здесь
-   (иначе между строками появлялись бы поля --margin). */
+   (иначе между строками появлялись бы поля --block_margin). */
 menu_bar_dropdown chui_button {
     margin: 0;
     width: -webkit-fill-available;
@@ -161,7 +162,7 @@ menu_bar_dropdown chui_button {
 menu_bar_dropdown .chui_button {
     width: -webkit-fill-available;
     justify-content: flex-start;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     background: transparent;
     border: none;
     border-radius: var(--radius_sm);
@@ -173,7 +174,8 @@ menu_bar_dropdown .chui_button:hover {
 }
 
 menu_bar_dropdown .chui_button:active:not(:disabled) {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
     border: none;
 }