chuijs 3.6.3 → 3.6.5

package/framework/appLayout/default/global_style.css

@@ -1,571 +1,616 @@
-:root {
-    --global_blur: saturate(180%) blur(30px);
-    --main_padding: 8px 11px;
-    --test_padding: 8px;
-    --header_icon_size: 13pt;
-    --font_default_size: 14px;
-    --font_labels_size: 12px;
-    --font_notification_size: 12px;
-    --border_radius: 0.50rem !important;;
-    --margin: 6px;
-    --box_shadow_main: 0 1px 5px 1px rgb(0 0 0 / 20%);
-    --transition_time: .165s
-}
-
-html {
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: var(--border_color);
-}
-
-strong {
-    font-weight: 500;
-}
-
-* {
-    font-family: 'chui_I';
-    font-style: normal;
-    user-select: none;
-    outline: none;
-    transition: all var(--transition_time);
-    animation-duration: var(--transition_time);
-    position: relative;
-    font-size: var(--font_default_size);
-    line-height: normal;
-}
-
-*:before {
-    font-family: 'chui_I';
-    font-style: normal;
-    user-select: none;
-    outline: none;
-    transition: all var(--transition_time);
-    animation-duration: var(--transition_time);
-    position: relative;
-    font-size: var(--font_default_size);
-    line-height: normal;
-}
-
-body {
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: var(--main_background);
-    /*border-radius: var(--border_radius);*/
-    display: flex;
-    flex-direction: column;
-    margin: 1px;
-}
-
-app_menu_search_main {
-    background: transparent;
-    width: -webkit-fill-available;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: max-content;
-    padding: var(--test_padding);
-}
-
-.app_menu_search_input {
-    border-radius: var(--border_radius);
-    background: var(--header_background);
-    padding: var(--main_padding);
-    margin: var(--margin);
-    width: -webkit-fill-available;
-    color: var(--text_color);
-    font-size: var(--font_default_size);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_2);
-}
-
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-center::-webkit-scrollbar-track {
-    margin-top: 45px;
-}
-
-.test_scroll_track::-webkit-scrollbar-track {
-    margin-top: 96px;
-}
-
-::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: var(--border_radius);
-    background: var(--element_background_2);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--blue_prime_background)
-}
-
-header {
-    width: -webkit-fill-available;
-    position: absolute;
-    top: 0;
-    display: flex;
-    z-index: 999;
-    flex-direction: column;
-    border-bottom-left-radius: var(--border_radius);
-    border-bottom-right-radius: var(--border_radius);
-    align-items: start;
-    background-color: var(--header_background);
-    backdrop-filter: var(--global_blur);
-    background-blend-mode: overlay;
-    justify-content: space-between;
-    border-bottom: 1px solid var(--border_color);
-}
-
-header_main {
-    width: -webkit-fill-available;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    -webkit-app-region: drag;
-    -webkit-user-select: none;
-}
-
-center {
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
-    padding-top: 47px;
-    overflow: hidden hidden
-}
-
-center:hover {
-    overflow: hidden overlay;
-}
-
-notification_panel {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    top: 46px;
-    right: 0;
-    padding: var(--margin);
-    align-items: flex-end;
-    justify-content: flex-start;
-    z-index: 1001;
-    overflow: hidden hidden;
-    max-height: calc(100% - 65px - (var(--margin) * 2));
-    transition: max-height var(--transition_time) ease-in-out;
-}
-
-notification_panel:hover {
-    overflow: hidden overlay;
-}
-
-app_menu {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    justify-content: flex-start;
-    align-items: flex-start;
-    z-index: 1000;
-    margin: calc(47px + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2) calc(var(--margin) * 2);
-    border-radius: var(--border_radius);
-    box-shadow: var(--box_shadow_main);
-    background: var(--header_background);
-    backdrop-filter: var(--global_blur);
-    height: -webkit-fill-available;
-    width: -webkit-fill-available;
-    border: 1px solid var(--border_color);
-}
-
-notification_box {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    justify-content: flex-start;
-    align-items: flex-start;
-    height: -webkit-fill-available;
-    z-index: 1000;
-    margin: calc(47px + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2) calc(var(--margin) * 2);
-    border-radius: var(--border_radius);
-    box-shadow: var(--box_shadow_main);
-    background: var(--header_background);
-    backdrop-filter: var(--global_blur);
-    width: -webkit-fill-available;
-    border: 1px solid var(--border_color);
-}
-
-notification_box_controls {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: max-content;
-    width: -webkit-fill-available;
-    background: transparent;
-}
-
-notification_box_main {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden hidden;
-    height: -webkit-fill-available;
-    width: -webkit-fill-available;
-    padding: 4px;
-}
-
-notification_box_main:hover {
-    overflow: hidden overlay;
-}
-
-notification_button {
-    cursor: pointer;
-    outline: none;
-    height: max-content;
-    width: max-content;
-    border: none;
-    border-radius: var(--border_radius);
-    padding: var(--test_padding);
-    margin: var(--margin);
-    font-size: 22pt;
-    background: transparent;
-    color: var(--text_color);
-    -webkit-app-region: no-drag;
-}
-
-notification_button:hover {
-    background: var(--blue_prime_background);
-}
-
-.notification_button_active {
-    background: var(--blue_prime_background);
-}
-
-.notification_button_active chui_icon {
-    color: var(--text_color_hover);
-}
-
-notification_button:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-app_menu_button {
-    cursor: pointer;
-    outline: none;
-    height: max-content;
-    width: max-content;
-    border: none;
-    border-radius: var(--border_radius);
-    padding: var(--test_padding);
-    margin: var(--margin);
-    font-size: 22pt;
-    background: transparent;
-    color: var(--text_color);
-    -webkit-app-region: no-drag;
-}
-
-app_menu_button:hover {
-    background: var(--blue_prime_background);
-}
-
-.app_menu_button_active {
-    background: var(--blue_prime_background);
-}
-
-.app_menu_button_active chui_icon {
-    color: var(--text_color_hover);
-}
-
-app_menu_button:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-route_views {
-    display: flex;
-    flex-direction: column;
-    padding: var(--test_padding);
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
-    overflow: hidden hidden;
-}
-
-route_views:hover {
-    overflow: hidden overlay;
-}
-
-page_name {
-    outline: none;
-    height: max-content;
-    width: max-content;
-    border: none;
-    border-radius: var(--border_radius);
-    padding: var(--test_padding);
-    margin: var(--margin) var(--margin) var(--margin) 0;
-    font-size: var(--font_default_size);
-    font-weight: 500;
-    background: transparent;
-    color: var(--text_color)
-}
-
-route {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    outline: none;
-    height: max-content;
-    width: -webkit-fill-available;
-    border: none;
-    border-radius: var(--border_radius);
-    padding: var(--test_padding);
-    margin: var(--margin);
-    font-size: var(--font_default_size);
-    font-weight: 500;
-    background: transparent;
-    max-height: max-content;
-}
-
-route:hover {
-    padding: var(--main_padding);
-    background: var(--blue_prime_background);
-}
-
-route:hover route_title {
-    color: var(--text_color_hover);
-}
-
-route_title {
-    width: -webkit-fill-available;
-    color: var(--text_color);
-}
-
-route_icon {
-    margin-right: var(--margin);
-}
-
-.route_active {
-    padding: var(--main_padding);
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-.route_active route_title {
-    color: var(--text_color_hover);
-}
-
-blockquote {
-    background: var(--element_background);
-    border-left: 10px solid var(--blue_prime_background);
-    margin: 1.5em 10px;
-    padding: 9px 14px;
-    color: var(--text_color);
-    border-radius: var(--border_radius);
-    display: flex;
-}
-
-header_left_box {
-    display: flex;
-    width: -webkit-fill-available;
-    align-items: center
-}
-
-header_right_box {
-    display: flex;
-}
-
-/* chUiJS_UserProfile */
-user_main {
-    position: relative;
-    display: flex;
-    -webkit-app-region: no-drag;
-}
-
-user_button:hover {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-.user_button {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-user_button {
-    cursor: pointer;
-    outline: none;
-    height: max-content;
-    width: max-content;
-    color: var(--text_color);
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    margin: var(--margin) 0 var(--margin) var(--margin);
-    font-weight: 500
-}
-
-user_dropdown {
-    margin-top: 45px;
-    display: none;
-    position: absolute;
-    background: var(--header_background_drop);
-    color: var(--text_color);
-    border-radius: var(--border_radius);
-    padding: var(--test_padding);
-    z-index: 1;
-    right: 0;
-    min-width: 165px;
-    flex-direction: column;
-    box-shadow: var(--box_shadow_main);
-}
-
-user_dropdown user_item {
-    color: var(--text_color);
-    display: block;
-    font-weight: 400;
-    cursor: pointer;
-    text-align: start;
-    padding: var(--test_padding);
-    border-radius: var(--border_radius)
-}
-
-user_dropdown user_item:hover {
-    background-color: #ddd;
-    padding: var(--main_padding);
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-user_dd_image_main {
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: nowrap;
-    margin-bottom: 6px
-}
-
-user_dd_image {
-    width: 80px;
-    height: 80px;
-    display: flex;
-    padding: var(--test_padding);
-    border-radius: 50%;
-    align-items: center;
-    justify-content: center;
-    font-size: 20pt;
-}
-
-/* chUiJS_HeaderButton */
-header_button {
-    cursor: pointer;
-    outline: none;
-    height: max-content;
-    width: max-content;
-    border: none;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    margin: var(--margin) 0 var(--margin) var(--margin);
-    font-size: var(--font_default_size);
-    background: transparent;
-    font-weight: 500;
-    display: flex;
-    flex-direction: row;
-    -webkit-app-region: no-drag;
-
-}
-
-header_button header_button_title {
-    color: var(--text_color);
-}
-
-header_button:hover {
-    background: var(--blue_prime_background);
-}
-
-header_button:hover header_button_title {
-    color: var(--text_color_hover);
-}
-
-header_button:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-/* chUiJS_HeaderButton */
-header_button {
-    cursor: pointer;
-    outline: none;
-    height: max-content;
-    width: max-content;
-    border: none;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    margin: var(--margin) 0 var(--margin) var(--margin);
-    font-size: var(--font_default_size);
-    background: transparent;
-    color: var(--text_color);
-    font-weight: 500;
-    display: flex;
-    flex-direction: row;
-}
-
-header_button:hover {
-    background: var(--blue_prime_background);
-}
-
-header_button:hover header_button_title {
-    color: var(--text_color_hover);
-}
-
-header_button:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-/*Управление окном*/
-wc_box {
-    -webkit-app-region: no-drag;
-    color: var(--text_color);
-    margin: 0 3px;
-    padding: 0 3px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-wc_close, wc_maximize, wc_minimize {
-    margin: 6px 3px;
-    padding: 3px;
-    border-radius: 50%;
-    /*background: var(--element_background);*/
-    box-shadow: 0 0 1px 0 var(--element_background_2);
-}
-
-wc_close:hover {
-    background-color: var(--red_prime_background);
-}
-
-wc_maximize:hover, wc_minimize:hover {
-    background-color: var(--blue_prime_background);
-}
-
-wc_close:hover chui_icon, wc_maximize:hover chui_icon, wc_minimize:hover chui_icon {
-    color: white;
-}
-
-header_tabs {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-}
-
-.header_tab_active {
-    pointer-events: none;
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-.header_tab_active header_button_icon chui_icon {
-    color: var(--text_color_hover);
+:root {
+    --global_blur: saturate(180%) blur(30px);
+    --main_padding: 8px 13px;
+    --test_padding: 8px;
+    --header_icon_size: 13pt;
+    --font_default_size: 14px;
+    --font_labels_size: 12px;
+    --font_notification_size: 12px;
+    --button_text_color: var(--text_color);
+    --margin: 6px;
+
+    /* Скругления */
+    --border_radius: 10px;
+    --radius_sm: 8px;
+    --radius_md: 12px;
+    --radius_pill: 999px;
+    --radius_circle: 50%;
+
+    /* Ширина управляющих элементов */
+    --control_width: 200px;
+
+    /* Тени — плоский стиль: минимум, только для отделения всплывающих слоёв */
+    --box_shadow_main: 0 1px 2px rgb(0 0 0 / 12%);
+    --box_shadow_drop: 0 10px 30px rgb(0 0 0 / 16%);
+    --box_shadow_modal: 0 16px 48px rgb(0 0 0 / 22%);
+
+    /* Фокус */
+    --focus_outline: 2px solid var(--blue_prime_background);
+    --focus_outline_offset: 2px;
+
+    /* Тайминг анимаций */
+    --transition_time: .165s
+}
+
+html {
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    /* Рамка окна. --border_color полупрозрачный (хайрлайн), поэтому под ним
+       нужна непрозрачная подложка: без неё он композитится с базовым цветом
+       окна (белым) и вокруг приложения появляется белая рамка. */
+    background: var(--main_background);
+    box-shadow: inset 0 0 0 1px var(--border_color);
+}
+
+strong {
+    font-weight: 500;
+}
+
+* {
+    font-family: 'chui_I';
+    font-style: normal;
+    user-select: none;
+    outline: none;
+    transition: background-color var(--transition_time) ease,
+    color var(--transition_time) ease,
+    border-color var(--transition_time) ease,
+    box-shadow var(--transition_time) ease,
+    opacity var(--transition_time) ease,
+    transform var(--transition_time) ease;
+    animation-duration: var(--transition_time);
+    position: relative;
+    font-size: var(--font_default_size);
+    line-height: normal;
+}
+
+*:before {
+    font-family: 'chui_I';
+    font-style: normal;
+    user-select: none;
+    outline: none;
+    transition: background-color var(--transition_time) ease,
+    color var(--transition_time) ease,
+    border-color var(--transition_time) ease,
+    box-shadow var(--transition_time) ease,
+    opacity var(--transition_time) ease,
+    transform var(--transition_time) ease;
+    animation-duration: var(--transition_time);
+    position: relative;
+    font-size: var(--font_default_size);
+    line-height: normal;
+}
+
+:root *:focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]) {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
+}
+
+input,
+textarea,
+[contenteditable="true"],
+chui_editor_text_input,
+chui_console,
+chui_console_text,
+.chui_code {
+    user-select: text;
+}
+
+body {
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: var(--main_background);
+    /*border-radius: var(--border_radius);*/
+    display: flex;
+    flex-direction: column;
+    margin: 1px;
+}
+
+app_menu_search_main {
+    background: transparent;
+    width: -webkit-fill-available;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: max-content;
+    padding: var(--test_padding);
+}
+
+.app_menu_search_input {
+    border-radius: var(--border_radius);
+    background: var(--header_background);
+    padding: var(--main_padding);
+    margin: var(--margin);
+    width: -webkit-fill-available;
+    color: var(--text_color);
+    font-size: var(--font_default_size);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+center::-webkit-scrollbar-track {
+    margin-top: 45px;
+}
+
+.test_scroll_track::-webkit-scrollbar-track {
+    margin-top: 96px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: var(--border_radius);
+    background: var(--scrollbar_thumb);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--blue_prime_background)
+}
+
+header {
+    width: -webkit-fill-available;
+    position: absolute;
+    top: 0;
+    display: flex;
+    z-index: 999;
+    flex-direction: column;
+    border-bottom-left-radius: var(--border_radius);
+    border-bottom-right-radius: var(--border_radius);
+    align-items: start;
+    background-color: var(--header_background);
+    backdrop-filter: var(--global_blur);
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border_color);
+}
+
+header_main {
+    width: -webkit-fill-available;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-app-region: drag;
+    -webkit-user-select: none;
+}
+
+center {
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+    padding-top: 47px;
+    overflow: hidden hidden
+}
+
+center:hover {
+    overflow: hidden overlay;
+}
+
+notification_panel {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 46px;
+    right: 0;
+    padding: var(--margin);
+    align-items: flex-end;
+    justify-content: flex-start;
+    z-index: 1001;
+    overflow: hidden hidden;
+    max-height: calc(100% - 65px - (var(--margin) * 2));
+    transition: max-height var(--transition_time) ease-in-out;
+}
+
+notification_panel:hover {
+    overflow: hidden overlay;
+}
+
+app_menu {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    justify-content: flex-start;
+    align-items: flex-start;
+    z-index: 1000;
+    margin: calc(47px + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2) calc(var(--margin) * 2);
+    border-radius: var(--border_radius);
+    box-shadow: var(--box_shadow_main);
+    background: var(--header_background);
+    backdrop-filter: var(--global_blur);
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
+    border: 1px solid var(--border_color);
+}
+
+notification_box {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    justify-content: flex-start;
+    align-items: flex-start;
+    height: -webkit-fill-available;
+    z-index: 1000;
+    margin: calc(47px + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2) calc(var(--margin) * 2);
+    border-radius: var(--border_radius);
+    box-shadow: var(--box_shadow_main);
+    background: var(--header_background);
+    backdrop-filter: var(--global_blur);
+    width: -webkit-fill-available;
+    border: 1px solid var(--border_color);
+}
+
+notification_box_controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: max-content;
+    width: -webkit-fill-available;
+    background: transparent;
+}
+
+notification_box_main {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden hidden;
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
+    padding: 4px;
+}
+
+notification_box_main:hover {
+    overflow: hidden overlay;
+}
+
+notification_button {
+    cursor: pointer;
+    outline: none;
+    height: max-content;
+    width: max-content;
+    border: none;
+    border-radius: var(--border_radius);
+    padding: var(--test_padding);
+    margin: var(--margin);
+    background: transparent;
+    color: var(--text_color);
+    -webkit-app-region: no-drag;
+    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
+}
+
+notification_button:hover {
+    background: var(--element_background);
+}
+
+notification_button:active {
+    background: var(--element_background_hover);
+}
+
+/* Открытый ящик уведомлений: акцент, а не ховер */
+.notification_button_active,
+.notification_button_active:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.notification_button_active chui_icon,
+.notification_button_active:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+app_menu_button {
+    cursor: pointer;
+    outline: none;
+    height: max-content;
+    width: max-content;
+    border: none;
+    border-radius: var(--border_radius);
+    padding: var(--test_padding);
+    margin: var(--margin);
+    background: transparent;
+    color: var(--text_color);
+    -webkit-app-region: no-drag;
+    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
+}
+
+app_menu_button:hover {
+    background: var(--element_background);
+}
+
+app_menu_button:active {
+    background: var(--element_background_hover);
+}
+
+/* Открытое меню маршрутов: акцент, а не ховер */
+.app_menu_button_active,
+.app_menu_button_active:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.app_menu_button_active chui_icon,
+.app_menu_button_active:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+/* Клавиатурный фокус элементов шапки (мышь его не показывает) */
+notification_button:focus-visible,
+app_menu_button:focus-visible,
+header_button:focus-visible {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
+}
+
+route_views {
+    display: flex;
+    flex-direction: column;
+    padding: var(--test_padding);
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+    overflow: hidden hidden;
+}
+
+route_views:hover {
+    overflow: hidden overlay;
+}
+
+page_name {
+    outline: none;
+    height: max-content;
+    width: max-content;
+    border: none;
+    border-radius: var(--border_radius);
+    padding: var(--test_padding);
+    margin: var(--margin) var(--margin) var(--margin) 0;
+    font-size: var(--font_default_size);
+    font-weight: 500;
+    background: transparent;
+    color: var(--text_color)
+}
+
+route {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    outline: none;
+    height: max-content;
+    width: -webkit-fill-available;
+    border: none;
+    border-radius: var(--border_radius);
+    padding: var(--test_padding);
+    margin: var(--margin);
+    font-size: var(--font_default_size);
+    font-weight: 500;
+    background: transparent;
+    max-height: max-content;
+}
+
+route:hover {
+    background: var(--blue_prime_background);
+}
+
+route:active {
+    background: var(--element_background_prime);
+}
+
+route:hover route_title {
+    color: var(--text_color_hover);
+}
+
+route_title {
+    width: -webkit-fill-available;
+    color: var(--text_color);
+}
+
+route_icon {
+    margin-right: var(--margin);
+}
+
+.route_active {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.route_active route_title {
+    color: var(--text_color_hover);
+}
+
+blockquote {
+    background: var(--element_background);
+    border-left: 10px solid var(--blue_prime_background);
+    margin: 1.5em 10px;
+    padding: 9px 14px;
+    color: var(--text_color);
+    border-radius: var(--border_radius);
+    display: flex;
+}
+
+header_left_box {
+    display: flex;
+    width: -webkit-fill-available;
+    align-items: center
+}
+
+header_right_box {
+    display: flex;
+}
+
+/* chUiJS_UserProfile */
+user_main {
+    position: relative;
+    display: flex;
+    -webkit-app-region: no-drag;
+}
+
+user_button:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.user_button {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+user_button {
+    cursor: pointer;
+    outline: none;
+    height: max-content;
+    width: max-content;
+    color: var(--text_color);
+    border-radius: var(--border_radius);
+    padding: var(--main_padding);
+    margin: var(--margin) 0 var(--margin) var(--margin);
+    font-weight: 500
+}
+
+user_dropdown {
+    margin-top: 45px;
+    display: none;
+    position: absolute;
+    background: var(--header_background);
+    backdrop-filter: var(--global_blur);
+    -webkit-backdrop-filter: var(--global_blur);
+    color: var(--text_color);
+    border-radius: var(--border_radius);
+    padding: var(--test_padding);
+    z-index: 1;
+    right: 0;
+    min-width: 165px;
+    flex-direction: column;
+    box-shadow: var(--box_shadow_main);
+}
+
+user_dropdown user_item {
+    color: var(--text_color);
+    display: block;
+    font-weight: 400;
+    cursor: pointer;
+    text-align: start;
+    padding: var(--test_padding);
+    border-radius: var(--border_radius)
+}
+
+user_dropdown user_item:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+user_dd_image_main {
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    margin-bottom: 6px
+}
+
+user_dd_image {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    padding: var(--test_padding);
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    font-size: 20pt;
+}
+
+/* chUiJS_HeaderButton */
+header_button {
+    cursor: pointer;
+    outline: none;
+    height: max-content;
+    width: max-content;
+    border: none;
+    border-radius: var(--border_radius);
+    padding: var(--main_padding);
+    margin: var(--margin) 0 var(--margin) var(--margin);
+    font-size: var(--font_default_size);
+    background: transparent;
+    color: var(--text_color);
+    font-weight: 500;
+    display: flex;
+    flex-direction: row;
+    -webkit-app-region: no-drag;
+    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
+}
+
+header_button header_button_title {
+    color: var(--text_color);
+}
+
+header_button:hover {
+    background: var(--element_background);
+}
+
+header_button:active {
+    background: var(--element_background_hover);
+}
+
+/*Управление окном — те же кнопки-иконки, что и остальные в шапке:
+  прозрачный фон, видимый символ, нейтральный ховер. */
+wc_box {
+    -webkit-app-region: no-drag;
+    margin: 0 var(--margin);
+    padding: 0 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+wc_close, wc_maximize, wc_minimize {
+    cursor: pointer;
+    margin: 6px 3px;
+    padding: 5px;
+    border-radius: var(--radius_circle);
+    background: transparent;
+    color: var(--text_color);
+    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
+}
+
+wc_maximize:hover, wc_minimize:hover {
+    background: var(--element_background);
+}
+
+wc_maximize:active, wc_minimize:active {
+    background: var(--element_background_hover);
+}
+
+/* Закрытие окна — единственное место, где уместен красный */
+wc_close:hover {
+    background: var(--red_prime_background);
+}
+
+wc_close:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+wc_close:focus-visible, wc_maximize:focus-visible, wc_minimize:focus-visible {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
+}
+
+header_tabs {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+}
+
+.header_tab_active {
+    pointer-events: none;
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.header_tab_active header_button_icon chui_icon {
+    color: var(--text_color_hover);
 }