chuijs 4.0.2 → 4.0.4

package/framework/components/chui_org_chart/org_chart.js

@@ -1,8 +1,8 @@
-const { setStyles } = require('../../modules/chui_functions');
-const { Avatar } = require('../chui_avatar/avatar');
-const { makeKeyboardButton } = require('../../modules/chui_a11y/chui_a11y');
-const { Icon, Icons } = require('../chui_icons/icons');
-const { I18n } = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../modules/chui_functions");
+const { Avatar } = require("../chui_avatar/avatar");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Схема подчинения: карточки людей по уровням и связи «руководитель — подчинённый».
@@ -55,7 +55,7 @@ class OrgChart {
     static STYLE = {
         DEFAULT: "default",
         ACCENT: "accent",
-        MUTED: "muted"
+        MUTED: "muted",
     };
     static DEFAULT_NODE_WIDTH = 176;
     static DEFAULT_NODE_HEIGHT = 64;
@@ -74,39 +74,52 @@ class OrgChart {
     #roots = [];
     #rows = [];
     #slots = 1;
-    #node_width = OrgChart.DEFAULT_NODE_WIDTH;
-    #node_height = OrgChart.DEFAULT_NODE_HEIGHT;
-    #gap_x = OrgChart.DEFAULT_GAP_X;
-    #gap_y = OrgChart.DEFAULT_GAP_Y;
+    #nodeWidth = OrgChart.DEFAULT_NODE_WIDTH;
+    #nodeHeight = OrgChart.DEFAULT_NODE_HEIGHT;
+    #gapX = OrgChart.DEFAULT_GAP_X;
+    #gapY = OrgChart.DEFAULT_GAP_Y;
     #collapsible = true;
-    #empty_text = undefined;
+    #emptyText = undefined;
     #label = undefined;
     #selected = undefined;
     #expanded = new Map();
-    #on_node_click = undefined;
-    #click_listeners = [];
+    #onNodeClick = undefined;
+    #clickListeners = [];
 
-    constructor(options = {
-        id: String(), title: String(), label: String(), data: undefined, height: String(),
-        nodeWidth: Number(), nodeHeight: Number(), gapX: Number(), gapY: Number(),
-        collapsible: Boolean(), emptyText: String(), onNodeClick: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            data: undefined,
+            height: String(),
+            nodeWidth: Number(),
+            nodeHeight: Number(),
+            gapX: Number(),
+            gapY: Number(),
+            collapsible: Boolean(),
+            emptyText: String(),
+            onNodeClick: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "ChUiJS_OrgChart");
         OrgChart.#counter += 1;
         this.#id = options.id === undefined ? `chui_org_chart_${OrgChart.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#label = options.label;
-        this.#empty_text = options.emptyText;
-        this.#on_node_click = options.onNodeClick;
-        if (options.nodeWidth !== undefined) this.#node_width = Math.max(80, Number(options.nodeWidth) || OrgChart.DEFAULT_NODE_WIDTH);
-        if (options.nodeHeight !== undefined) this.#node_height = Math.max(40, Number(options.nodeHeight) || OrgChart.DEFAULT_NODE_HEIGHT);
-        if (options.gapX !== undefined) this.#gap_x = Number(options.gapX);
-        if (options.gapY !== undefined) this.#gap_y = Number(options.gapY);
+        this.#emptyText = options.emptyText;
+        this.#onNodeClick = options.onNodeClick;
+        if (options.nodeWidth !== undefined)
+            this.#nodeWidth = Math.max(80, Number(options.nodeWidth) || OrgChart.DEFAULT_NODE_WIDTH);
+        if (options.nodeHeight !== undefined)
+            this.#nodeHeight = Math.max(40, Number(options.nodeHeight) || OrgChart.DEFAULT_NODE_HEIGHT);
+        if (options.gapX !== undefined) this.#gapX = Number(options.gapX);
+        if (options.gapY !== undefined) this.#gapY = Number(options.gapY);
         if (options.collapsible !== undefined) this.#collapsible = options.collapsible !== false;
         // Размер карточки читают и полотно, и поле прокрутки (отступ по краям), поэтому
         // переменные живут на корне, а не на полотне
-        this.#root.style.setProperty("--org_chart_node_width", `${this.#node_width}px`);
-        this.#root.style.setProperty("--org_chart_node_height", `${this.#node_height}px`);
+        this.#root.style.setProperty("--org_chart_node_width", `${this.#nodeWidth}px`);
+        this.#root.style.setProperty("--org_chart_node_height", `${this.#nodeHeight}px`);
         if (options.height !== undefined) this.#root.style.setProperty("--org_chart_height", options.height);
 
         this.#title.id = `${this.#id}_title`;
@@ -119,7 +132,7 @@ class OrgChart {
         this.#status.classList.add("chui_visually_hidden");
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
-        this.#empty.innerText = this.#empty_text === undefined ? I18n.t("data.orgChartEmpty") : this.#empty_text;
+        this.#empty.innerText = this.#emptyText === undefined ? I18n.t("data.orgChartEmpty") : this.#emptyText;
 
         this.#canvas.appendChild(this.#links);
         this.#viewport.appendChild(this.#canvas);
@@ -136,12 +149,22 @@ class OrgChart {
     }
 
     // GET
-    getId() { return this.#id; }
-    getTitle() { return this.#title.innerText; }
+    getId() {
+        return this.#id;
+    }
+    getTitle() {
+        return this.#title.innerText;
+    }
     /** Данные как передали: те же узлы (правьте их и зовите `setData()`) */
-    getData() { return this.#roots.length === 1 ? this.#roots[0] : [...this.#roots]; }
-    getSelected() { return this.#selected; }
-    getCanvas() { return this.#canvas; }
+    getData() {
+        return this.#roots.length === 1 ? this.#roots[0] : [...this.#roots];
+    }
+    getSelected() {
+        return this.#selected;
+    }
+    getCanvas() {
+        return this.#canvas;
+    }
     /** Видимые узлы по порядку обхода: `{id, title, position, level, expanded, hasChildren}` */
     getItems() {
         return this.#rows.map((row) => ({
@@ -150,7 +173,7 @@ class OrgChart {
             position: row.node.position,
             level: row.level,
             expanded: row.expanded,
-            hasChildren: row.children.length > 0
+            hasChildren: row.children.length > 0,
         }));
     }
     getNode(id = String()) {
@@ -175,13 +198,13 @@ class OrgChart {
         return this;
     }
     setEmptyText(text = String()) {
-        this.#empty_text = text;
+        this.#emptyText = text;
         this.#empty.innerText = text;
         return this;
     }
     /** Данные: один корень или массив корней; состояние свёрнутых веток сбрасывается */
     setData(data = undefined) {
-        const roots = data === undefined || data === null ? [] : (Array.isArray(data) ? data : [data]);
+        const roots = data === undefined || data === null ? [] : Array.isArray(data) ? data : [data];
         this.#roots = roots.filter((node) => node !== undefined && node !== null);
         this.#expanded = new Map();
         for (const node of this.#collect(this.#roots)) {
@@ -212,9 +235,11 @@ class OrgChart {
         this.#expanded.set(String(id), want);
         this.#render();
         const count = this.#descendants(node);
-        this.#announce(want
-            ? I18n.t("data.orgChartExpanded", {name: this.#nameOf(node), count: count})
-            : I18n.t("data.orgChartCollapsed", {name: this.#nameOf(node), count: count}));
+        this.#announce(
+            want
+                ? I18n.t("data.orgChartExpanded", { name: this.#nameOf(node), count: count })
+                : I18n.t("data.orgChartCollapsed", { name: this.#nameOf(node), count: count })
+        );
         return this;
     }
     expandAll() {
@@ -228,10 +253,12 @@ class OrgChart {
         return this;
     }
     addNodeClickListener(listener = () => {}) {
-        this.#click_listeners.push(listener);
+        this.#clickListeners.push(listener);
         return this;
     }
-    set() { return this.#root; }
+    set() {
+        return this.#root;
+    }
 
     // === РАСКЛАДКА ===
     /** Все узлы дерева в порядке обхода (включая скрытые ветки) */
@@ -243,7 +270,9 @@ class OrgChart {
         return found;
     }
     #childrenOf(node = {}) {
-        return Array.isArray(node.children) ? node.children.filter((child) => child !== undefined && child !== null) : [];
+        return Array.isArray(node.children)
+            ? node.children.filter((child) => child !== undefined && child !== null)
+            : [];
     }
     /** Ветка раскрыта: у несворачиваемой схемы всегда, иначе явное состояние или `collapsed` из данных */
     #isExpanded(node = {}) {
@@ -261,7 +290,13 @@ class OrgChart {
         let slot = 0;
         const walk = (node, level, parent) => {
             const children = this.#isExpanded(node) ? this.#childrenOf(node) : [];
-            const row = {node: node, level: level, parent: parent, children: this.#childrenOf(node), expanded: this.#isExpanded(node)};
+            const row = {
+                node: node,
+                level: level,
+                parent: parent,
+                children: this.#childrenOf(node),
+                expanded: this.#isExpanded(node),
+            };
             rows.push(row);
             if (children.length === 0) {
                 row.slot = slot + 0.5;
@@ -274,7 +309,7 @@ class OrgChart {
             return row;
         };
         for (const root of this.#roots) walk(root, 0, undefined);
-        return {rows: rows, slots: Math.max(1, slot)};
+        return { rows: rows, slots: Math.max(1, slot) };
     }
     #rowOf(id = undefined) {
         if (id === undefined || id === null) return undefined;
@@ -333,10 +368,10 @@ class OrgChart {
         this.#rows = projected.rows;
         this.#slots = projected.slots;
         this.#nodes().forEach((node) => node.remove());
-        const step = this.#node_height + this.#gap_y;
+        const step = this.#nodeHeight + this.#gapY;
         const levels = this.#rows.reduce((max, row) => Math.max(max, row.level + 1), 0);
-        const height = Math.max(this.#node_height, levels * step - this.#gap_y);
-        const width = Math.max(this.#slots * (this.#node_width + this.#gap_x), 1);
+        const height = Math.max(this.#nodeHeight, levels * step - this.#gapY);
+        const width = Math.max(this.#slots * (this.#nodeWidth + this.#gapX), 1);
         this.#canvas.style.width = `${width}px`;
         this.#canvas.style.height = `${height}px`;
         // Система координат связей: 0…100 по ширине полотна и пиксели по высоте —
@@ -366,8 +401,8 @@ class OrgChart {
         return undefined;
     }
     /** Координаты узла в той же системе, что у связей: `x` — процент, `y` — пиксели */
-    #positionOf(row, step = this.#node_height + this.#gap_y) {
-        return {x: (row.slot / this.#slots) * 100, y: row.level * step};
+    #positionOf(row, step = this.#nodeHeight + this.#gapY) {
+        return { x: (row.slot / this.#slots) * 100, y: row.level * step };
     }
     #renderNode(row, step = Number()) {
         const position = this.#positionOf(row, step);
@@ -378,7 +413,8 @@ class OrgChart {
         node.setAttribute("aria-level", String(row.level + 1));
         node.setAttribute("aria-selected", String(row.node.id) === String(this.#selected) ? "true" : "false");
         // Про раскрытие говорит только сворачиваемая схема: у несворачиваемой подчинённые всегда видны
-        if (row.children.length > 0 && this.#collapsible) node.setAttribute("aria-expanded", row.expanded ? "true" : "false");
+        if (row.children.length > 0 && this.#collapsible)
+            node.setAttribute("aria-expanded", row.expanded ? "true" : "false");
         // Остановку Tab расставит `#applyStop`, а `makeKeyboardButton` заполняет `tabindex`
         // только если атрибута нет — поэтому он задаётся заранее
         node.setAttribute("tabindex", "-1");
@@ -388,9 +424,9 @@ class OrgChart {
         if (row.node.avatar !== undefined) {
             const avatar = new Avatar({
                 name: row.node.title,
-                image: typeof row.node.avatar === "object" ? row.node.avatar : {path: row.node.avatar},
+                image: typeof row.node.avatar === "object" ? row.node.avatar : { path: row.node.avatar },
                 size: Avatar.SIZE.SMALL,
-                decorative: true
+                decorative: true,
             });
             node.appendChild(avatar.set());
         }
@@ -401,9 +437,9 @@ class OrgChart {
         title.title = title.innerText;
         content.appendChild(title);
         if (row.node.position !== undefined) {
-            const position_text = document.createElement("org_chart_node_position");
-            position_text.innerText = String(row.node.position);
-            content.appendChild(position_text);
+            const positionText = document.createElement("org_chart_node_position");
+            positionText.innerText = String(row.node.position);
+            content.appendChild(positionText);
         }
         if (row.node.description !== undefined) {
             const description = document.createElement("org_chart_node_description");
@@ -414,7 +450,7 @@ class OrgChart {
         if (row.children.length > 0) {
             const count = document.createElement("chui_visually_hidden");
             count.classList.add("chui_visually_hidden");
-            count.innerText = I18n.t("data.orgChartReports", {count: row.children.length});
+            count.innerText = I18n.t("data.orgChartReports", { count: row.children.length });
             content.appendChild(count);
         }
         node.appendChild(content);
@@ -423,7 +459,10 @@ class OrgChart {
             toggle.dataset.expanded = row.expanded ? "true" : "false";
             toggle.dataset.id = String(row.node.id);
             toggle.setAttribute("aria-hidden", "true");
-            toggle.innerHTML = new Icon(row.expanded ? Icons.NAVIGATION.EXPAND_LESS : Icons.NAVIGATION.EXPAND_MORE, "14px").getHTML();
+            toggle.innerHTML = new Icon(
+                row.expanded ? Icons.NAVIGATION.EXPAND_LESS : Icons.NAVIGATION.EXPAND_MORE,
+                "14px"
+            ).getHTML();
             node.appendChild(toggle);
         }
         this.#canvas.appendChild(node);
@@ -439,8 +478,8 @@ class OrgChart {
             const from = this.#positionOf(row.parent, step);
             const to = this.#positionOf(row, step);
             const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            const middle = (from.y + this.#node_height + to.y) / 2;
-            path.setAttribute("d", `M ${from.x} ${from.y + this.#node_height} V ${middle} H ${to.x} V ${to.y}`);
+            const middle = (from.y + this.#nodeHeight + to.y) / 2;
+            path.setAttribute("d", `M ${from.x} ${from.y + this.#nodeHeight} V ${middle} H ${to.x} V ${to.y}`);
             path.setAttribute("class", "org_chart_link");
             path.setAttribute("vector-effect", "non-scaling-stroke");
             this.#links.appendChild(path);
@@ -472,8 +511,8 @@ class OrgChart {
     }
     #emit(row) {
         if (row === undefined) return;
-        for (const listener of [...this.#click_listeners]) listener(row.node);
-        if (this.#on_node_click !== undefined) this.#on_node_click(row.node);
+        for (const listener of [...this.#clickListeners]) listener(row.node);
+        if (this.#onNodeClick !== undefined) this.#onNodeClick(row.node);
     }
     #announce(text = String()) {
         this.#status.innerText = "";
@@ -539,7 +578,7 @@ class OrgChart {
     };
 }
 
-exports.OrgChart = OrgChart
+exports.OrgChart = OrgChart;
 
 // Описание узла собирает фабрика — как у ContextMenu и SplitButton
-OrgChart.Node = (options = {}) => Object.assign({style: OrgChart.STYLE.DEFAULT}, options);
+OrgChart.Node = (options = {}) => Object.assign({ style: OrgChart.STYLE.DEFAULT }, options);

package/framework/components/chui_org_chart/styles.css

@@ -11,7 +11,7 @@ chui_org_chart {
     width: -webkit-fill-available;
     max-width: 100%;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
     text-align: start;
@@ -184,7 +184,7 @@ org_chart_node chui_avatar {
 
 org_chart_empty {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     color: var(--text_color_disabled);
     text-align: center;
 }

package/framework/components/chui_pagination/pagination.js

@@ -1,6 +1,6 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Постраничная навигация: номера страниц, «…» на пропусках и кнопки перехода.
@@ -25,7 +25,7 @@ const {I18n} = require("../../modules/chui_i18n/chui_i18n");
 class Pagination {
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -38,20 +38,22 @@ class Pagination {
     #edges = 1;
     #jump = true;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
-    constructor(options = {
-        id: String(),
-        pages: Number(),
-        page: Number(),
-        siblings: Number(),
-        edges: Number(),
-        jump: Boolean(),
-        size: String(),
-        label: String(),
-        onChange: undefined,
-        changeEvent: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            pages: Number(),
+            page: Number(),
+            siblings: Number(),
+            edges: Number(),
+            jump: Boolean(),
+            size: String(),
+            label: String(),
+            onChange: undefined,
+            changeEvent: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Pagination");
         Pagination.#counter += 1;
         this.#id = options.id === undefined ? `chui_pagination_${Pagination.#counter}` : options.id;
@@ -65,7 +67,7 @@ class Pagination {
         if (options.jump !== undefined) this.#jump = options.jump === true;
         this.#pages = Pagination.#count(options.pages, 1);
         this.#page = Pagination.#clamp(Pagination.#count(options.page, 1), this.#pages);
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         if (options.changeEvent !== undefined) this.addChangeListener(options.changeEvent);
         this.#root.appendChild(this.#list);
         this.#render();
@@ -163,7 +165,7 @@ class Pagination {
     // === ВНУТРЕННЕЕ ===
     #notify() {
         for (const listener of [...this.#listeners]) listener(this.#page, this);
-        if (this.#on_change !== undefined) this.#on_change(this.#page, this);
+        if (this.#onChange !== undefined) this.#onChange(this.#page, this);
     }
 
     // Номера страниц с пропусками: `{gap: true}` — место для «…»
@@ -182,11 +184,13 @@ class Pagination {
         for (let index = this.#page - siblings; index <= this.#page + siblings; index++) {
             if (index >= 1 && index <= this.#pages) numbers.add(index);
         }
-        const sorted = [...numbers].filter((number) => number >= 1 && number <= this.#pages).sort((first, second) => first - second);
+        const sorted = [...numbers]
+            .filter((number) => number >= 1 && number <= this.#pages)
+            .sort((first, second) => first - second);
         const items = [];
         let previous = 0;
         for (const number of sorted) {
-            if (previous !== 0 && number - previous > 1) items.push({gap: true});
+            if (previous !== 0 && number - previous > 1) items.push({ gap: true });
             items.push(number);
             previous = number;
         }
@@ -196,8 +200,23 @@ class Pagination {
     #render() {
         const focused = this.#focusedControl();
         this.#list.innerHTML = "";
-        if (this.#jump) this.#list.appendChild(this.#arrowButton("first", I18n.t("navigation.firstPage"), Icons.NAVIGATION.FIRST_PAGE, this.#page === 1));
-        this.#list.appendChild(this.#arrowButton("prev", I18n.t("navigation.previousPage"), Icons.NAVIGATION.CHEVRON_LEFT, this.#page === 1));
+        if (this.#jump)
+            this.#list.appendChild(
+                this.#arrowButton(
+                    "first",
+                    I18n.t("navigation.firstPage"),
+                    Icons.NAVIGATION.FIRST_PAGE,
+                    this.#page === 1
+                )
+            );
+        this.#list.appendChild(
+            this.#arrowButton(
+                "prev",
+                I18n.t("navigation.previousPage"),
+                Icons.NAVIGATION.CHEVRON_LEFT,
+                this.#page === 1
+            )
+        );
         for (const item of this.#window()) {
             if (item.gap === true) {
                 const gap = document.createElement("chui_pagination_gap");
@@ -209,8 +228,23 @@ class Pagination {
             }
             this.#list.appendChild(this.#pageButton(item));
         }
-        this.#list.appendChild(this.#arrowButton("next", I18n.t("navigation.nextPage"), Icons.NAVIGATION.CHEVRON_RIGHT, this.#page === this.#pages));
-        if (this.#jump) this.#list.appendChild(this.#arrowButton("last", I18n.t("navigation.lastPage"), Icons.NAVIGATION.LAST_PAGE, this.#page === this.#pages));
+        this.#list.appendChild(
+            this.#arrowButton(
+                "next",
+                I18n.t("navigation.nextPage"),
+                Icons.NAVIGATION.CHEVRON_RIGHT,
+                this.#page === this.#pages
+            )
+        );
+        if (this.#jump)
+            this.#list.appendChild(
+                this.#arrowButton(
+                    "last",
+                    I18n.t("navigation.lastPage"),
+                    Icons.NAVIGATION.LAST_PAGE,
+                    this.#page === this.#pages
+                )
+            );
         this.#restoreFocus(focused);
     }
 
@@ -257,14 +291,15 @@ class Pagination {
     #focusedControl() {
         const active = document.activeElement;
         if (active === null || active === undefined || !this.#list.contains(active)) return undefined;
-        return {role: active.dataset.role, page: active.dataset.page};
+        return { role: active.dataset.role, page: active.dataset.page };
     }
 
     #restoreFocus(control) {
         if (control === undefined || control.role === undefined) return;
-        const selector = control.role === "page"
-            ? `button[data-role="page"][data-page="${control.page}"]`
-            : `button[data-role="${control.role}"]`;
+        const selector =
+            control.role === "page"
+                ? `button[data-role="page"][data-page="${control.page}"]`
+                : `button[data-role="${control.role}"]`;
         const node = this.#list.querySelector(selector);
         // Номер мог уехать в «…» — тогда фокус остаётся там, где окажется ближайший контрол
         if (node !== null) node.focus();
@@ -282,4 +317,4 @@ class Pagination {
     static ICON_SIZE = "16px";
 }
 
-exports.Pagination = Pagination
+exports.Pagination = Pagination;

package/framework/components/chui_pagination/styles.css

@@ -3,7 +3,7 @@ chui_pagination {
     display: inline-flex;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }

package/framework/components/chui_paragraph/paragraph.js

@@ -1,7 +1,7 @@
 class Paragraph {
     #Paragraph = document.createElement(`p`);
     constructor(text = String()) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Paragraph');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Paragraph");
         this.#Paragraph.innerText = text;
     }
     setText(text = String()) {
@@ -12,4 +12,4 @@ class Paragraph {
     }
 }
 
-exports.Paragraph = Paragraph
+exports.Paragraph = Paragraph;

package/framework/components/chui_paragraph/styles.css

@@ -1,11 +1,11 @@
 p {
     height: max-content;
     /* Ширина абзаца — по контейнеру: с max-content длинный текст не переносился,
-       а вместе с margin: var(--margin) абзац ещё и смещался вправо за край родителя */
+       а вместе с margin: var(--block_margin) абзац ещё и смещался вправо за край родителя */
     width: -webkit-fill-available;
     /* Слово шире строки (ссылка, длинное имя) разрывается, а не вылезает за абзац */
     overflow-wrap: break-word;
     color: var(--text_color);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
-}
+}