From 7ea9fa1505c57c9311a2e2fbfb5aa87eac746fcb Mon Sep 17 00:00:00 2001 From: Ali <010109ali@gmail.com> Date: Mon, 24 Nov 2025 15:28:52 +0400 Subject: [PATCH] backup push --- jey_theme/public/css/jey_theme.css | 658 +++++- jey_theme/public/css/jey_theme_backup.css | 2212 +++++++++++++++++++++ 2 files changed, 2796 insertions(+), 74 deletions(-) create mode 100644 jey_theme/public/css/jey_theme_backup.css diff --git a/jey_theme/public/css/jey_theme.css b/jey_theme/public/css/jey_theme.css index 59df0a7..936b8db 100644 --- a/jey_theme/public/css/jey_theme.css +++ b/jey_theme/public/css/jey_theme.css @@ -1092,6 +1092,7 @@ body, .page-container { visibility: visible !important; flex-shrink: 0 !important; width: auto !important; + margin-left: auto !important; } .body-sidebar-container.expanded .sidebar-item-control.hidden, @@ -1198,10 +1199,13 @@ body, .page-container { } .body-sidebar-container.expanded .app-switcher-dropdown { - display: block !important; + display: flex !important; + flex-direction: column !important; width: 100% !important; padding: 0 !important; margin: 0 !important; + height: auto !important; + min-height: auto !important; } .body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item { @@ -1210,32 +1214,28 @@ body, .page-container { backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; border-radius: var(--radius-button) !important; - padding: 0 !important; - margin: var(--expanded-margin) !important; + padding: var(--expanded-padding) !important; + margin: 0 !important; display: flex !important; align-items: center !important; + justify-content: space-between !important; opacity: 1 !important; transform: translateZ(0) scale(1) !important; - transition: transform 300ms ease-out, - background 250ms ease, - backdrop-filter 250ms ease !important; -} - -.body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item > a, -.body-sidebar-container.expanded .app-switcher-dropdown > * { - display: flex !important; - align-items: center !important; - padding: var(--expanded-padding) !important; - width: 100% !important; - border-radius: var(--radius-button) !important; - text-decoration: none !important; - min-height: var(--expanded-button-height) !important; + transition: none !important; } .body-sidebar-container.expanded .app-switcher-dropdown .app-logo-container { width: var(--app-switcher-icon-expanded) !important; height: var(--app-switcher-icon-expanded) !important; + min-width: var(--app-switcher-icon-expanded) !important; + max-width: var(--app-switcher-icon-expanded) !important; + min-height: var(--app-switcher-icon-expanded) !important; + max-height: var(--app-switcher-icon-expanded) !important; margin-right: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + flex-shrink: 0 !important; } .body-sidebar-container.expanded .app-switcher-dropdown .app-logo-container img.app-logo, @@ -1251,7 +1251,10 @@ body, .page-container { .body-sidebar-container.expanded .app-switcher-dropdown .app-title { font-size: var(--expanded-text-size) !important; font-weight: 600 !important; - margin-left: 10px !important; + margin-left: 12px !important; + margin-top: 0 !important; + line-height: 1.4 !important; + flex: 1 !important; } .body-sidebar-container.expanded .app-switcher-dropdown .d-flex { @@ -1260,6 +1263,7 @@ body, .page-container { flex: 1 !important; position: relative !important; z-index: 2 !important; + gap: 0 !important; } .body-sidebar-container.expanded .app-switcher-dropdown .sidebar-item-control { @@ -1292,19 +1296,53 @@ body, .page-container { } .body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item:hover { - transform: translateZ(0) scale(1.02) !important; - background: rgba(255, 255, 255, 0.08) !important; + transform: none !important; + opacity: 1 !important; + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; } .body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item:hover::before { - opacity: 0.9 !important; + opacity: 1 !important; } .body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item:active { - transform: translateZ(0) scale(0.98) !important; - background: rgba(255, 255, 255, 0.03) !important; - transition: transform 150ms ease-out, - background 150ms ease !important; + transform: none !important; + opacity: 1 !important; + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + transition: none !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown.hover, +.body-sidebar-container.expanded .app-switcher-dropdown.hover .standard-sidebar-item { + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + transform: none !important; + opacity: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown.hover .standard-sidebar-item::before { + opacity: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown.hover, +.body-sidebar-container.expanded .app-switcher-dropdown.hover .standard-sidebar-item, +.body-sidebar-container.expanded .app-switcher-dropdown.active-sidebar, +.body-sidebar-container.expanded .app-switcher-dropdown.active-sidebar .standard-sidebar-item { + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + transform: none !important; + opacity: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown.hover .standard-sidebar-item::before, +.body-sidebar-container.expanded .app-switcher-dropdown.active-sidebar .standard-sidebar-item::before { + opacity: 1 !important; } .body-sidebar-container.expanded .collapse-sidebar-link { @@ -1408,7 +1446,7 @@ body, .page-container { .navbar { background: transparent !important; backdrop-filter: none !important; /* КРИТИЧНО - убрали! */ - border-bottom: none !important; + border-bottom: 1px solid var(--border-color) !important; box-shadow: none !important; position: relative !important; /* Для ::before */ } @@ -1418,8 +1456,8 @@ body, .page-container { content: "" !important; position: absolute !important; inset: 0 !important; - backdrop-filter: blur(3px) !important; - -webkit-backdrop-filter: blur(3px) !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; z-index: -1 !important; pointer-events: none !important; } @@ -1436,11 +1474,11 @@ body, .page-container { /* SEARCH BAR */ .search-bar { - background: linear-gradient(-75deg, var(--glass-bg-light), var(--glass-bg-medium), var(--glass-bg-light)) !important; + background: transparent !important; backdrop-filter: none !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 20px !important; - box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.25) !important; + box-shadow: none !important; position: absolute !important; left: 50% !important; @@ -1515,8 +1553,8 @@ body, .page-container { rgba(255, 255, 255, 0.1) ) !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: var(--radius-card) !important; @@ -1540,19 +1578,17 @@ body, .page-container { isolation: isolate !important; z-index: 1000 !important; transform: translateZ(0) !important; + + max-height: 400px !important; + overflow-y: auto !important; + overflow-x: hidden !important; } -/* КРИТИЧНО: Blur через ::before */ .search-bar .awesomplete > ul::before, -.search-bar ul[role="listbox"]::before { - content: "" !important; - position: absolute !important; - inset: 0 !important; - border-radius: var(--radius-card) !important; - backdrop-filter: blur(15px) !important; - -webkit-backdrop-filter: blur(15px) !important; - z-index: -1 !important; - pointer-events: none !important; +.search-bar .awesomplete > ul::after, +.search-bar ul[role="listbox"]::before, +.search-bar ul[role="listbox"]::after { + display: none !important; } .search-bar .awesomplete > ul > li, @@ -1585,19 +1621,10 @@ body, .page-container { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important; } -.search-bar .awesomplete > ul > li mark, -.search-bar ul[role="listbox"] > li mark { - background: rgba(255, 255, 255, 0.6) !important; - color: rgba(30, 30, 30, 1) !important; - padding: 2px 4px !important; - border-radius: 4px !important; - font-weight: 600 !important; -} - /* Другие dropdown */ .app-switcher-menu, .dropdown-menu { - background: linear-gradient(-75deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important; + background: transparent !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: var(--radius-card) !important; @@ -1606,13 +1633,13 @@ body, .page-container { .app-item:hover, .dropdown-item:hover { - background: linear-gradient(-75deg, var(--glass-bg-light), var(--glass-bg-medium), var(--glass-bg-light)) !important; + background: transparent !important; border-radius: 8px !important; transform: scale(0.98) !important; } .notifications-list { - background: linear-gradient(-75deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important; + background: transparent !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } @@ -1623,7 +1650,7 @@ body, .page-container { } .notification-item:hover { - background: linear-gradient(-75deg, var(--glass-bg-light), var(--glass-bg-medium), var(--glass-bg-light)) !important; + background: transparent !important; border-radius: 8px !important; transform: scale(0.98) !important; } @@ -1648,7 +1675,7 @@ body, .page-container { .btn-default, button.btn { position: relative !important; - background: linear-gradient(-75deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important; + background: transparent !important; border-radius: 20px !important; box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.02), @@ -1790,7 +1817,19 @@ button.btn:active { background: transparent !important; border-bottom: 1px solid var(--border-color); transition: 0.5s top; - backdrop-filter: blur(3px); + backdrop-filter: none !important; +} + +/* Применяем blur через ::before как у navbar */ +.page-head::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + background: transparent !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; + z-index: -1 !important; + pointer-events: none !important; } /* ============================================ */ @@ -1803,7 +1842,7 @@ button.btn:active { .form-tabs-list { background-color: #ffffff00 !important; - backdrop-filter: blur(3px); + backdrop-filter: blur(15px); } .form-tabs-list .form-tabs .nav-item .nav-link { @@ -1811,7 +1850,7 @@ button.btn:active { } .control-value { - background: linear-gradient(-75deg, var(--glass-bg-light), var(--glass-bg-medium), var(--glass-bg-light)) !important; + background: transparent !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 20px !important; @@ -1819,18 +1858,18 @@ button.btn:active { } .awesomplete:not(.search-bar .awesomplete):not(.search-bar *) .input-with-feedback { - background: linear-gradient(-75deg, var(--glass-bg-light), var(--glass-bg-medium), var(--glass-bg-light)) !important; + background: transparent !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; - border-radius: 20px !important; + border-radius: 20px; box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.25) !important; } .form-control:not(.search-bar *):not(.search-bar .awesomplete *) { - background: linear-gradient(-75deg, var(--glass-bg-light), var(--glass-bg-medium), var(--glass-bg-light)) !important; + background: transparent !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; - border-radius: 20px !important; + border-radius: 20px; box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.25) !important; } @@ -1865,6 +1904,21 @@ button.btn:active { + + + + + + + + + + + + + + + @@ -1885,14 +1939,14 @@ button.btn:active { /* НЕ ИСПОЛЬЗУЕМ backdrop-filter здесь! */ } -/* Blur через ::before чтобы не ломать fixed positioning */ +/* Упрощаем blur для grid - меньше конфликтов */ .form-grid::before { content: "" !important; position: absolute !important; inset: 0 !important; - backdrop-filter: blur(10px) !important; - -webkit-backdrop-filter: blur(10px) !important; - z-index: -1 !important; + backdrop-filter: blur(5px) !important; + -webkit-backdrop-filter: blur(5px) !important; + z-index: -2 !important; pointer-events: none !important; } @@ -1931,16 +1985,472 @@ button.btn:active { background-color: transparent !important; } -/* Фон с blur для колонки с иконками */ +/* Фон для колонки с иконками - БЕЗ blur чтобы не конфликтовать с dropdown */ .grid-heading-row .col.grid-static-col.pointer, .grid-row .col:last-child { - background: linear-gradient( - -75deg, - rgba(255, 255, 255, 0.15), - rgba(255, 255, 255, 0.25), - rgba(255, 255, 255, 0.15) - ) !important; + background: transparent !important; + border-radius: 0 !important; +} + +.grid-body .editable-row .form-control, .grid-body .editable-row .ql-editor { + border-radius: 0px !important; +} + +.list-row-head { + background-color: transparent !important; +} + +.list-row-head .level-right { + background-color: transparent !important; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + +.indicator-pill.grey, .indicator-pill-right.grey, .indicator-pill-round.grey { + background: #ffffff00 !important; +} + +.indicator-pill.yellow, .indicator-pill-right.yellow, .indicator-pill-round.yellow { + background: #ffffff00 !important; +} + +.list-row .level-right, .list-row-head .level-right { + backdrop-filter: blur(15px) brightness(1.06) !important; + border-left: 1px solid #ffffff5c !important; +} + +.list-row-head .level-right { + border-radius: 0px !important; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +/* ============================================ */ +/* DROPDOWN - УБРАЛИ ВСЕ СТИЛИ ЧТОБЫ ПРОТЕСТИРОВАТЬ */ +/* ============================================ */ + + + + + + +/* ============================================ */ +/* 1. CLEAN TRANSPARENCY (NO BLUR, NO WHITE) */ +/* ============================================ */ + +/* Убираем фон и блюр с основных контейнеров формы */ +.page-form { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: none !important; + border: none !important; +} + +/* Поля ввода: прозрачные, только тонкая рамка */ +.form-control, +.input-with-feedback, +.control-value, +.awesomplete .form-control { + /* background: transparent !important; Полная прозрачность */ + backdrop-filter: none !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Тонкая рамка, чтобы видеть поле */ + color: var(--text-color-full) !important; + box-shadow: none !important; +} + +/* Убираем фон у заголовков вкладок */ +.form-tabs-list .form-tabs .nav-item .nav-link { + background: transparent !important; +} + + + + + + + + + + + + + +.liked .like-icon, .liked .like-icon use { + --icon-stroke: #000000 !important; + fill: #FFD700 !important; +} + + +/* ============================================ */ +/* FORMS - ДОПОЛНЕНИЕ */ +/* ============================================ */ + +/* Поля control-value, like-disabled-input и bold */ +.control-value, +.like-disabled-input, +.bold.like-disabled-input, +.control-value.like-disabled-input, +input.bold[readonly], +.form-control.bold[readonly] { + background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 20px !important; + box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), + inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.25) !important; + color: var(--text-color-full) !important; +} + + + + + + + +/* ============================================ */ +/* DATEPICKER - LIQUID GLASS СТИЛЬ */ +/* ============================================ */ + +/* Основной контейнер datepicker */ +.datepicker { + background: transparent !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 16px !important; + box-shadow: + inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), + inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), + 0 8px 32px rgba(0, 0, 0, 0.15) !important; + padding: 16px !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +/* Blur через ::before */ +.datepicker::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + border-radius: 16px !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; + z-index: -1 !important; + pointer-events: none !important; +} + +/* Стрелка указателя */ +.datepicker--pointer { + display: none !important; /* Или можно стилизовать */ +} + +/* Навигация */ +.datepicker--nav { + background: transparent !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; + padding-bottom: 12px !important; + margin-bottom: 12px !important; +} + +/* Заголовок (месяц и год) */ +.datepicker--nav-title { + color: var(--text-color-full) !important; + font-weight: 600 !important; + font-size: 16px !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; +} + +/* Кнопки навигации (стрелки) */ +.datepicker--nav-action { + background: transparent !important; + border-radius: 8px !important; + transition: all 200ms ease !important; + padding: 4px !important; +} + +.datepicker--nav-action:hover { + background: rgba(255, 255, 255, 0.15) !important; + transform: scale(1.1) !important; +} + +.datepicker--nav-action svg { + stroke: var(--icon-color) !important; + fill: none !important; + stroke-width: 2 !important; +} + +/* Названия дней недели */ +.datepicker--days-names { + margin-bottom: 8px !important; +} + +.datepicker--day-name { + color: var(--text-color) !important; + font-size: 12px !important; + font-weight: 600 !important; + text-transform: uppercase !important; + opacity: 0.7 !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; +} + +/* Ячейки дней */ +.datepicker--cell { + background: transparent !important; + border-radius: 8px !important; + color: var(--text-color-full) !important; + font-weight: 500 !important; + transition: all 200ms ease !important; + position: relative !important; +} + +/* Hover эффект для ячеек */ +.datepicker--cell:hover { + background: rgba(255, 255, 255, 0.2) !important; + transform: scale(1.05) !important; + color: var(--text-color-full) !important; +} + +/* Дни из другого месяца */ +.datepicker--cell.-other-month- { + opacity: 0.3 !important; +} + +/* Текущий день */ +.datepicker--cell.-current- { + background: rgba(100, 150, 255, 0.2) !important; + color: var(--text-color-full) !important; + font-weight: 700 !important; + border: 1px solid rgba(100, 150, 255, 0.4) !important; +} + +.datepicker--cell.-current-:hover { + background: rgba(100, 150, 255, 0.3) !important; +} + +/* Выбранный день */ +.datepicker--cell.-selected- { + background: linear-gradient( + -75deg, + rgba(255, 255, 255, 0.3), + rgba(255, 255, 255, 0.4), + rgba(255, 255, 255, 0.3) + ) !important; + color: var(--text-color-full) !important; + font-weight: 700 !important; + border: 1px solid rgba(255, 255, 255, 0.5) !important; + box-shadow: + inset 0 1px 1px rgba(255, 255, 255, 0.5), + inset 0 -1px 1px rgba(0, 0, 0, 0.05), + 0 2px 8px rgba(0, 0, 0, 0.1) !important; +} + +.datepicker--cell.-selected-:hover { + transform: scale(1.05) !important; + box-shadow: + inset 0 1px 1px rgba(255, 255, 255, 0.6), + inset 0 -1px 1px rgba(0, 0, 0, 0.05), + 0 4px 12px rgba(0, 0, 0, 0.15) !important; +} + +/* Выключенные дни */ +.datepicker--cell.-disabled- { + opacity: 0.2 !important; + pointer-events: none !important; +} + +/* Диапазон дат (если используется) */ +.datepicker--cell.-in-range- { + background: rgba(100, 150, 255, 0.1) !important; border-radius: 0 !important; +} + +.datepicker--cell.-range-from-, +.datepicker--cell.-range-to- { + background: linear-gradient( + -75deg, + rgba(255, 255, 255, 0.25), + rgba(255, 255, 255, 0.35), + rgba(255, 255, 255, 0.25) + ) !important; + border: 1px solid rgba(255, 255, 255, 0.4) !important; +} + +/* Выходные дни */ +.datepicker--cell.-weekend- { + color: rgba(255, 100, 100, 0.9) !important; +} + +/* Кнопки внизу (Today) */ +.datepicker--buttons { + border-top: 1px solid rgba(255, 255, 255, 0.2) !important; + padding-top: 12px !important; + margin-top: 12px !important; +} + +.datepicker--button { + background: transparent !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 20px !important; + color: var(--text-color-full) !important; + padding: 8px 16px !important; + font-weight: 500 !important; + transition: all 200ms ease !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; +} + +.datepicker--button:hover { + background: rgba(255, 255, 255, 0.15) !important; + border-color: rgba(255, 255, 255, 0.4) !important; + transform: scale(0.98) !important; +} + +.datepicker--button:active { + transform: scale(0.95) !important; +} + +/* Поле ввода даты */ +input[data-fieldtype="Date"], +input.input-with-feedback[data-fieldtype="Date"], +.frappe-control[data-fieldtype="Date"] input { + background: transparent !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 20px !important; + box-shadow: + inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), + inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.25) !important; + color: var(--text-color-full) !important; + padding: 8px 12px !important; +} + +input[data-fieldtype="Date"]:hover { + border-color: rgba(255, 255, 255, 0.4) !important; + backdrop-filter: blur(12px) !important; +} + +input[data-fieldtype="Date"]:focus { + border-color: rgba(255, 255, 255, 0.5) !important; + backdrop-filter: blur(15px) !important; + box-shadow: + inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), + inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.3), + 0 0 0 3px rgba(255, 255, 255, 0.1) !important; + outline: none !important; +} + +/* Анимация появления datepicker */ +.datepicker.-top-left-, +.datepicker.-top-right-, +.datepicker.-bottom-left-, +.datepicker.-bottom-right- { + animation: datepickerFadeIn 300ms ease !important; +} + +@keyframes datepickerFadeIn { + from { + opacity: 0; + transform: translateY(-10px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Месяцы и годы (если переключаешься в режим выбора) */ +.datepicker--cells-months .datepicker--cell, +.datepicker--cells-years .datepicker--cell { + background: transparent !important; + border-radius: 8px !important; + color: var(--text-color-full) !important; + transition: all 200ms ease !important; +} + +.datepicker--cells-months .datepicker--cell:hover, +.datepicker--cells-years .datepicker--cell:hover { + background: rgba(255, 255, 255, 0.2) !important; + transform: scale(1.05) !important; +} + +.datepicker--cells-months .datepicker--cell.-selected-, +.datepicker--cells-years .datepicker--cell.-selected- { + background: linear-gradient( + -75deg, + rgba(255, 255, 255, 0.3), + rgba(255, 255, 255, 0.4), + rgba(255, 255, 255, 0.3) + ) !important; + font-weight: 700 !important; +} + +/* Time picker (если используется) */ +.datepicker--time { + border-top: 1px solid rgba(255, 255, 255, 0.2) !important; + padding-top: 12px !important; + margin-top: 12px !important; +} + +.datepicker--time-current { + background: transparent !important; + color: var(--text-color-full) !important; + font-weight: 600 !important; +} + +.datepicker--time-sliders { + background: transparent !important; +} + +.datepicker--time-row input[type="range"] { + background: rgba(255, 255, 255, 0.2) !important; } \ No newline at end of file diff --git a/jey_theme/public/css/jey_theme_backup.css b/jey_theme/public/css/jey_theme_backup.css new file mode 100644 index 0000000..1bcca43 --- /dev/null +++ b/jey_theme/public/css/jey_theme_backup.css @@ -0,0 +1,2212 @@ +/* ========================================== */ +/* LIQUID GLASS CSS ДЛЯ FRAPPE - REFACTORED */ +/* ========================================== */ + +/* CSS Properties для анимации */ +@property --angle-cards { + syntax: ""; + inherits: false; + initial-value: -75deg; +} + +@property --angle-highlight { + syntax: ""; + inherits: false; + initial-value: -45deg; +} + +:root { + /* Анимации */ + --anim--hover-time: 400ms; + --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1); + --anim--sidebar-time: 120ms; + --anim--sidebar-ease: cubic-bezier(0.4, 0, 0.2, 1); + + /* Размеры - Свернутый sidebar */ + --collapsed-sidebar-width: 70px; + --collapsed-button-size: 44px; + --collapsed-icon-size: 22px; + --collapsed-gap: 2px; + + /* Размеры - Развернутый sidebar */ + --expanded-button-height: 40px; + --expanded-icon-size: 20px; + --expanded-text-size: 15px; + --expanded-padding: 10px 12px; + --expanded-margin: 2px 8px; + + /* Размеры - App Switcher */ + --app-switcher-icon-collapsed: 22px; + --app-switcher-icon-expanded: 28px; + + /* Размеры - Child items */ + --child-button-height: 36px; + --child-icon-size: 18px; + --child-text-size: 14px; + --child-padding-left: 40px; + + /* Цвета */ + --bg-color: rgba(255, 255, 255, 0); + --text-color: rgba(50, 50, 50, 0.9); + --text-color-full: rgba(50, 50, 50, 1); + --icon-color: rgba(50, 50, 50, 0.85); + + /* Glass эффекты */ + --glass-bg-light: rgba(255, 255, 255, 0.05); + --glass-bg-medium: rgba(255, 255, 255, 0.15); + --glass-bg-strong: rgba(255, 255, 255, 0.25); + + /* Тени и блики */ + --shadow-light: 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25); + --shadow-hover: 0 0.2em 0.1em -0.1em rgba(0, 0, 0, 0.2); + --inset-highlight: inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5); + --inset-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05); + + /* Border */ + --border-width: 2.5px; + + /* Радиусы */ + --radius-button: 12px; + --radius-card: 16px; + --radius-circle: 50%; +} + +/* ============================================ */ +/* ФОНОВОЕ ИЗОБРАЖЕНИЕ */ +/* ============================================ */ + +body::before { + content: ""; + position: fixed; + inset: 0; + background: var(--bg-color) url('/assets/jey_theme/images/windows-11-stock-official-light-3840x2400-5662.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + z-index: -1; +} + +body, .page-container, .layout-main { + background: transparent !important; +} + +body, .page-container { + font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important; + -webkit-font-smoothing: antialiased !important; + -moz-osx-font-smoothing: grayscale !important; +} + +[data-page-route=Workspaces] .layout-main-section { + background: transparent !important; + border-radius: var(--radius-card) !important; + box-shadow: none !important; + backdrop-filter: none !important; + border: none !important; +} + +/* ============================================ */ +/* LIQUID GLASS КАРТОЧКИ */ +/* ============================================ */ + +/* Исключение для spacer виджетов */ +.widget.spacer { + all: revert !important; + background: transparent !important; + border: none !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + transform: none !important; +} + +.widget.spacer::before, +.widget.spacer::after { + display: none !important; +} + +.widget.widget:not(.spacer), +.standard-sidebar-section.standard-sidebar-section, +.frappe-card.frappe-card, +.dashboard-widget-box.dashboard-widget-box, +[data-page-route=Workspaces] .widget:not(.spacer), +[data-page-route=Workspaces] .frappe-card, +.page-container .widget:not(.spacer), +.page-container .frappe-card { + --border-width: 0px; + position: relative !important; + background: + linear-gradient( + var(--angle-highlight), + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.5) 25% 35%, + rgba(255, 255, 255, 0) 55% + ), + linear-gradient( + -75deg, + rgba(255, 255, 255, 0.05), + rgba(255, 255, 255, 0.2), + rgba(255, 255, 255, 0.05) + ) !important; + background-size: 200% 200%, 100% 100% !important; + background-position: 0% 50%, 0% 0% !important; + background-repeat: no-repeat !important; + background-blend-mode: screen, normal !important; + border-radius: 16px !important; + box-shadow: + inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), + inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), + 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), + 0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5), + 0 0 0 0 rgba(255, 255, 255, 1) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + -moz-backdrop-filter: blur(10px) !important; + -ms-backdrop-filter: blur(10px) !important; + border: none !important; + transform: translateZ(0) !important; + transition: all var(--anim--hover-time) var(--anim--hover-ease), + background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), + --angle-highlight calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease) !important; + overflow: visible !important; +} + +/* Border с conic gradient */ +.widget:not(.spacer)::after, +.standard-sidebar-section::after, +.frappe-card::after, +.dashboard-widget-box::after { + content: "" !important; + position: absolute !important; + z-index: 1 !important; + inset: 0 !important; + border-radius: 16px !important; + width: calc(100% + var(--border-width)) !important; + height: calc(100% + var(--border-width)) !important; + top: calc(0% - var(--border-width) / 2) !important; + left: calc(0% - var(--border-width) / 2) !important; + padding: var(--border-width) !important; + box-sizing: border-box !important; + background: conic-gradient( + from var(--angle-cards) at 50% 50%, + rgba(0, 0, 0, 0.5), + rgba(0, 0, 0, 0) 5% 40%, + rgba(0, 0, 0, 0.5) 50%, + rgba(0, 0, 0, 0) 60% 95%, + rgba(0, 0, 0, 0.5) + ), + linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) !important; + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; + -webkit-mask-composite: xor !important; + mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; + mask-composite: exclude !important; + transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-cards 500ms ease !important; + box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5) !important; + pointer-events: none !important; +} + +/* ТЕНЬ */ +.widget:not(.spacer)::before, +.standard-sidebar-section::before, +.frappe-card::before, +.dashboard-widget-box::before { + content: "" !important; + position: absolute !important; + width: 100% !important; + height: 100% !important; + top: 4px !important; + left: 0 !important; + border-radius: 16px !important; + pointer-events: none !important; + z-index: -1 !important; + background: radial-gradient( + ellipse at center, + rgba(0, 0, 0, 0.15) 0%, + rgba(0, 0, 0, 0.08) 40%, + transparent 70% + ) !important; + filter: blur(6px) !important; + -webkit-filter: blur(6px) !important; + -moz-filter: blur(6px) !important; + -ms-filter: blur(6px) !important; + opacity: 0.8 !important; + transition: all var(--anim--hover-time) var(--anim--hover-ease) !important; +} + +/* Hover эффект - общий (без scale) */ +.widget:not(.spacer):hover, +.frappe-card:hover, +.dashboard-widget-box:hover { + backdrop-filter: blur(0.01em) !important; + -webkit-backdrop-filter: blur(0.01em) !important; + -moz-backdrop-filter: blur(0.01em) !important; + -ms-backdrop-filter: blur(0.01em) !important; + box-shadow: + inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), + inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), + 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), + 0 0 0.1em 0.2em inset rgba(255, 255, 255, 0.4), + 0 0 0 0 rgba(255, 255, 255, 1) !important; + background-position: 25% 50%, 0% 0% !important; +} + +/* Hover эффект - только для shortcut-widget-box (с scale) */ +.widget.shortcut-widget-box:not(.spacer):hover { + transform: scale(0.975) translateZ(0) !important; +} + +.widget:not(.spacer):hover::after, +.frappe-card:hover::after, +.dashboard-widget-box:hover::after { + --angle-cards: -125deg; +} + +.widget:not(.spacer):hover::before, +.frappe-card:hover::before, +.dashboard-widget-box:hover::before { + top: 6px !important; + filter: blur(8px) !important; + -webkit-filter: blur(8px) !important; + -moz-filter: blur(8px) !important; + -ms-filter: blur(8px) !important; + opacity: 1 !important; +} + +/* Active эффект (только для shortcut-widget-box) */ +.widget.shortcut-widget-box:not(.spacer):active, +.frappe-card:active { + transform: rotate3d(1, 0, 0, 25deg) translateZ(0) !important; + box-shadow: + inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), + inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), + 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), + 0 0 0.1em 0.2em inset rgba(255, 255, 255, 0.3), + 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.15), + 0 0.35em 0.1em 0 rgba(0, 0, 0, 0.1), + 0 0.5em 0 0 rgba(255, 255, 255, 0.75), + inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15) !important; + background-position: 50% 15%, 0% 0% !important; + --angle-highlight: -15deg; +} + +.widget.shortcut-widget-box:not(.spacer):active::after, +.frappe-card:active::after { + --angle-cards: -75deg; +} + +.widget.shortcut-widget-box:not(.spacer):active::before, +.frappe-card:active::before { + top: 8px !important; + filter: blur(10px) !important; + -webkit-filter: blur(10px) !important; + -moz-filter: blur(10px) !important; + -ms-filter: blur(10px) !important; + opacity: 0.9 !important; +} + +/* Контент внутри карточек */ +.widget:not(.spacer) > *, +.frappe-card > *, +.dashboard-widget-box > * { + position: relative !important; + z-index: 2 !important; +} + +/* ============================================ */ +/* ЦВЕТА ТЕКСТА НА КАРТОЧКАХ */ +/* ============================================ */ + +.widget:not(.spacer) h1, .widget:not(.spacer) h2, .widget:not(.spacer) h3, .widget:not(.spacer) h4, .widget:not(.spacer) h5, .widget:not(.spacer) h6, +.frappe-card h1, .frappe-card h2, .frappe-card h3, .frappe-card h4, .frappe-card h5, .frappe-card h6, +.dashboard-widget-box h1, .dashboard-widget-box h2, .dashboard-widget-box h3, .dashboard-widget-box h4, .dashboard-widget-box h5, .dashboard-widget-box h6 { + color: rgba(50, 50, 50, 1) !important; + text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1) !important; + transition: text-shadow var(--anim--hover-time) var(--anim--hover-ease) !important; +} + +.widget:not(.spacer), .widget:not(.spacer) p, .widget:not(.spacer) span, .widget:not(.spacer) div, .widget:not(.spacer) label, +.frappe-card, .frappe-card p, .frappe-card span, .frappe-card div, .frappe-card label, +.dashboard-widget-box, .dashboard-widget-box p, .dashboard-widget-box span, .dashboard-widget-box div, .dashboard-widget-box label, +.widget:not(.spacer) .indicator-pill, .frappe-card .indicator-pill, .dashboard-widget-box .indicator-pill { + color: rgba(50, 50, 50, 1) !important; + text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1) !important; + transition: text-shadow var(--anim--hover-time) var(--anim--hover-ease) !important; +} + +.widget:not(.spacer):hover h1, .widget:not(.spacer):hover h2, .widget:not(.spacer):hover h3, .widget:not(.spacer):hover h4, .widget:not(.spacer):hover h5, .widget:not(.spacer):hover h6, +.frappe-card:hover h1, .frappe-card:hover h2, .frappe-card:hover h3, .frappe-card:hover h4, .frappe-card:hover h5, .frappe-card:hover h6, +.dashboard-widget-box:hover h1, .dashboard-widget-box:hover h2, .dashboard-widget-box:hover h3, .dashboard-widget-box:hover h4, .dashboard-widget-box:hover h5, .dashboard-widget-box:hover h6, +.widget:not(.spacer):hover, .widget:not(.spacer):hover p, .widget:not(.spacer):hover span, .widget:not(.spacer):hover div, .widget:not(.spacer):hover label, +.frappe-card:hover, .frappe-card:hover p, .frappe-card:hover span, .frappe-card:hover div, .frappe-card:hover label, +.dashboard-widget-box:hover, .dashboard-widget-box:hover p, .dashboard-widget-box:hover span, .dashboard-widget-box:hover div, .dashboard-widget-box:hover label, +.widget:not(.spacer):hover .indicator-pill, .frappe-card:hover .indicator-pill, .dashboard-widget-box:hover .indicator-pill { + text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12) !important; +} + +.widget.shortcut-widget-box:not(.spacer):active h1, .widget.shortcut-widget-box:not(.spacer):active h2, .widget.shortcut-widget-box:not(.spacer):active h3, .widget.shortcut-widget-box:not(.spacer):active h4, .widget.shortcut-widget-box:not(.spacer):active h5, .widget.shortcut-widget-box:not(.spacer):active h6, +.frappe-card:active h1, .frappe-card:active h2, .frappe-card:active h3, .frappe-card:active h4, .frappe-card:active h5, .frappe-card:active h6, +.widget.shortcut-widget-box:not(.spacer):active, .widget.shortcut-widget-box:not(.spacer):active p, .widget.shortcut-widget-box:not(.spacer):active span, +.frappe-card:active, .frappe-card:active p, .frappe-card:active span, +.widget.shortcut-widget-box:not(.spacer):active .indicator-pill, .frappe-card:active .indicator-pill { + text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12) !important; +} + +.widget:not(.spacer) a, .frappe-card a, .dashboard-widget-box a { + color: rgba(50, 50, 50, 0.9) !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; + transition: color 300ms !important; +} + +.widget:not(.spacer) a:hover, .frappe-card a:hover, .dashboard-widget-box a:hover { + color: rgba(30, 30, 30, 1) !important; +} + +.widget:not(.spacer) .text-muted, .widget:not(.spacer) small, +.frappe-card .text-muted, .frappe-card small, +.dashboard-widget-box .text-muted, .dashboard-widget-box small { + color: rgba(50, 50, 50, 0.65) !important; +} + +.widget:not(.spacer) svg, .frappe-card svg, .dashboard-widget-box svg { + stroke: rgba(50, 50, 50, 0.85) !important; + fill: rgba(50, 50, 50, 0.85) !important; +} + +/* ============================================ */ +/* SIDEBAR - ОБЩИЕ СТИЛИ */ +/* ============================================ */ + +.body-sidebar { + background: transparent; + border-right: none !important; + box-shadow: none !important; +} + +.body-sidebar, +.body-sidebar-top, +.body-sidebar-bottom { + background: transparent !important; +} + +.body-sidebar-container .body-sidebar { + display: flex !important; + flex-direction: column !important; +} + +.standard-sidebar-item { + background: transparent !important; + border-radius: 8px !important; + transition: none !important; +} + +.standard-sidebar-item:hover, +.sidebar-item-container:hover > .standard-sidebar-item { + position: relative !important; + background: transparent !important; + border-radius: 8px !important; + transform: none !important; +} + +.standard-sidebar-item:hover::before, +.sidebar-item-container:hover > .standard-sidebar-item::before { + display: none !important; +} + +/* ============================================ */ +/* СВЕРНУТЫЙ SIDEBAR */ +/* ============================================ */ + +@property --c1-collapsed { + syntax: ""; + inherits: false; + initial-value: rgba(255, 255, 255, 0.9); +} + +@property --c2-collapsed { + syntax: ""; + inherits: false; + initial-value: rgba(255, 255, 255, 0.4); +} + +@property --c3-collapsed { + syntax: ""; + inherits: false; + initial-value: rgba(255, 255, 255, 0.25); +} + +.body-sidebar-container:not(.expanded) .body-sidebar-placeholder { + width: 64px !important; + min-width: 64px !important; +} + +.body-sidebar-container:not(.expanded) .body-sidebar { + width: var(--collapsed-sidebar-width) !important; + min-width: var(--collapsed-sidebar-width) !important; + max-width: var(--collapsed-sidebar-width) !important; + overflow-x: hidden !important; + overflow-y: auto !important; + padding: 0 10px !important; + scrollbar-width: none !important; + -ms-overflow-style: none !important; +} + +.body-sidebar-container:not(.expanded) .body-sidebar::-webkit-scrollbar { + display: none !important; +} + +.body-sidebar-container:not(.expanded) .body-sidebar-top, +.body-sidebar-container:not(.expanded) .sidebar-items, +.body-sidebar-container:not(.expanded) .standard-sidebar-section { + width: 50px !important; + max-width: 50px !important; + overflow: visible !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + gap: var(--collapsed-gap) !important; +} + +.body-sidebar-container:not(.expanded) .body-sidebar-top { + padding-bottom: 8px !important; +} + +.body-sidebar-container:not(.expanded) .sidebar-item-container, +.body-sidebar-container:not(.expanded) .sidebar-item-container.is-draggable { + width: var(--collapsed-button-size) !important; + height: var(--collapsed-button-size) !important; + min-width: var(--collapsed-button-size) !important; + min-height: var(--collapsed-button-size) !important; + max-width: var(--collapsed-button-size) !important; + max-height: var(--collapsed-button-size) !important; + display: block !important; + margin: 0 !important; + padding: 0 !important; + overflow: visible !important; + position: relative !important; + flex-shrink: 0 !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item, +.body-sidebar-container:not(.expanded) .sidebar-item-container .standard-sidebar-item { + position: relative !important; + width: var(--collapsed-button-size) !important; + height: var(--collapsed-button-size) !important; + min-width: var(--collapsed-button-size) !important; + min-height: var(--collapsed-button-size) !important; + max-width: var(--collapsed-button-size) !important; + max-height: var(--collapsed-button-size) !important; + padding: 0 !important; + margin: 0 !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + border-radius: var(--radius-circle) !important; + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: none !important; + box-shadow: none !important; + transform: translateZ(0) scale(1) !important; + transform-origin: center center !important; + transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease !important; + overflow: visible !important; + pointer-events: auto !important; + cursor: pointer !important; + isolation: isolate !important; + opacity: 0.7 !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item > a { + width: 100% !important; + height: 100% !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + border-radius: var(--radius-circle) !important; + pointer-events: auto !important; + cursor: pointer !important; + position: relative !important; + z-index: 2 !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item::before { + display: none !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item::after { + display: none !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item:hover { + transform: translateZ(0) scale(1.15) !important; + opacity: 1 !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item:active { + transform: translateZ(0) scale(0.9) !important; + opacity: 0.8 !important; + transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 150ms ease !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.selected, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active, +.body-sidebar-container:not(.expanded) .sidebar-item-container.selected .standard-sidebar-item, +.body-sidebar-container:not(.expanded) .sidebar-item-container.active .standard-sidebar-item, +.body-sidebar-container:not(.expanded) .sidebar-item-container[data-page-name][class*="active"] .standard-sidebar-item { + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + opacity: 1 !important; + transform: translateZ(0) scale(1) !important; + transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), + background 250ms ease, + backdrop-filter 250ms ease !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar::before, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.selected::before, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active::before, +.body-sidebar-container:not(.expanded) .sidebar-item-container.selected .standard-sidebar-item::before, +.body-sidebar-container:not(.expanded) .sidebar-item-container.active .standard-sidebar-item::before, +.body-sidebar-container:not(.expanded) .sidebar-item-container[data-page-name][class*="active"] .standard-sidebar-item::before { + content: "" !important; + display: block !important; + position: absolute !important; + pointer-events: none !important; + inset: 0 !important; + border-radius: inherit !important; + padding: 2px !important; + background: linear-gradient( + to bottom right, + var(--c1-collapsed) 0%, + var(--c3-collapsed) 33%, + var(--c2-collapsed) 62%, + var(--c3-collapsed) 100% + ) !important; + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + -webkit-mask-composite: xor !important; + mask-composite: exclude !important; + transition: opacity 250ms ease !important; + z-index: 1 !important; + opacity: 1 !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar:hover, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.selected:hover, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active:hover, +.body-sidebar-container:not(.expanded) .sidebar-item-container.selected .standard-sidebar-item:hover, +.body-sidebar-container:not(.expanded) .sidebar-item-container.active .standard-sidebar-item:hover, +.body-sidebar-container:not(.expanded) .sidebar-item-container[data-page-name][class*="active"] .standard-sidebar-item:hover { + transform: translateZ(0) scale(1.08) !important; + background: rgba(255, 255, 255, 0.08) !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar:active, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.selected:active, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active:active, +.body-sidebar-container:not(.expanded) .sidebar-item-container.selected .standard-sidebar-item:active, +.body-sidebar-container:not(.expanded) .sidebar-item-container.active .standard-sidebar-item:active, +.body-sidebar-container:not(.expanded) .sidebar-item-container[data-page-name][class*="active"] .standard-sidebar-item:active { + transform: translateZ(0) scale(0.95) !important; + background: rgba(255, 255, 255, 0.03) !important; + transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), + background 150ms ease !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar:hover::before, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.selected:hover::before, +.body-sidebar-container:not(.expanded) .standard-sidebar-item.active:hover::before, +.body-sidebar-container:not(.expanded) .sidebar-item-container.selected .standard-sidebar-item:hover::before, +.body-sidebar-container:not(.expanded) .sidebar-item-container.active .standard-sidebar-item:hover::before, +.body-sidebar-container:not(.expanded) .sidebar-item-container[data-page-name][class*="active"] .standard-sidebar-item:hover::before { + opacity: 0.9 !important; +} + +.body-sidebar-container:not(.expanded) .sidebar-item-icon { + width: var(--collapsed-icon-size) !important; + height: var(--collapsed-icon-size) !important; + min-width: var(--collapsed-icon-size) !important; + min-height: var(--collapsed-icon-size) !important; + max-width: var(--collapsed-icon-size) !important; + max-height: var(--collapsed-icon-size) !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + margin: 0 !important; + padding: 0 !important; + z-index: 3 !important; + position: relative !important; + transform: translateZ(0) !important; + transform-origin: center center !important; + transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important; + backface-visibility: hidden !important; + perspective: 1000px !important; + pointer-events: none !important; +} + +.body-sidebar-container:not(.expanded) .sidebar-item-icon svg, +.body-sidebar-container:not(.expanded) .sidebar-item-icon svg.icon, +.body-sidebar-container:not(.expanded) .sidebar-item-icon svg.icon-md, +.body-sidebar-container:not(.expanded) .sidebar-item-icon > svg, +.body-sidebar-container:not(.expanded) .sidebar-item-icon img.app-logo, +.body-sidebar-container:not(.expanded) .app-logo-container img.app-logo { + width: var(--collapsed-icon-size) !important; + height: var(--collapsed-icon-size) !important; + min-width: var(--collapsed-icon-size) !important; + min-height: var(--collapsed-icon-size) !important; + max-width: var(--collapsed-icon-size) !important; + max-height: var(--collapsed-icon-size) !important; + display: block !important; + margin: 0 !important; + transform: translateZ(0) !important; + transition: none !important; + shape-rendering: geometricPrecision !important; + backface-visibility: hidden !important; + pointer-events: none !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item:hover .sidebar-item-icon { + transform: translateZ(0) !important; +} + +.body-sidebar-container:not(.expanded) .standard-sidebar-item:active .sidebar-item-icon { + transform: translateZ(0) !important; +} + +.body-sidebar-container:not(.expanded) .sidebar-item-label, +.body-sidebar-container:not(.expanded) .sidebar-item-control, +.body-sidebar-container:not(.expanded) .sidebar-child-item { + display: none !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown { + width: 100% !important; + display: flex !important; + justify-content: center !important; + padding-top: 10px !important; + margin: 0 !important; + pointer-events: auto !important; + text-decoration: none !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .standard-sidebar-item { + width: var(--collapsed-button-size) !important; + height: var(--collapsed-button-size) !important; + min-width: var(--collapsed-button-size) !important; + min-height: var(--collapsed-button-size) !important; + max-width: var(--collapsed-button-size) !important; + max-height: var(--collapsed-button-size) !important; + border-radius: var(--radius-circle) !important; + padding: 0 !important; + margin: 0 !important; + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + opacity: 1 !important; + transform: translateZ(0) scale(1) !important; + transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), + background 250ms ease, + backdrop-filter 250ms ease !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .standard-sidebar-item .d-flex { + width: auto !important; + justify-content: center !important; + pointer-events: auto !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .app-logo-container { + margin: 0 !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .app-logo { + width: var(--app-switcher-icon-collapsed) !important; + height: var(--app-switcher-icon-collapsed) !important; + position: relative !important; + z-index: 2 !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .app-title, +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .sidebar-item-control { + display: none !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .standard-sidebar-item > * { + position: relative !important; + z-index: 2 !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .standard-sidebar-item::before { + content: "" !important; + display: block !important; + position: absolute !important; + pointer-events: none !important; + inset: 0 !important; + border-radius: inherit !important; + padding: 2px !important; + background: linear-gradient( + to bottom right, + var(--c1-collapsed) 0%, + var(--c3-collapsed) 33%, + var(--c2-collapsed) 62%, + var(--c3-collapsed) 100% + ) !important; + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + -webkit-mask-composite: xor !important; + mask-composite: exclude !important; + transition: opacity 250ms ease !important; + z-index: 1 !important; + opacity: 1 !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .standard-sidebar-item:hover { + transform: translateZ(0) scale(1.08) !important; + background: rgba(255, 255, 255, 0.08) !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .standard-sidebar-item:hover::before { + opacity: 0.9 !important; +} + +.body-sidebar-container:not(.expanded) .app-switcher-dropdown .standard-sidebar-item:active { + transform: translateZ(0) scale(0.95) !important; + background: rgba(255, 255, 255, 0.03) !important; + transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), + background 150ms ease !important; +} + +.body-sidebar-container:not(.expanded) .collapse-sidebar-link { + position: relative !important; + width: var(--collapsed-button-size) !important; + height: var(--collapsed-button-size) !important; + min-width: var(--collapsed-button-size) !important; + min-height: var(--collapsed-button-size) !important; + max-width: var(--collapsed-button-size) !important; + max-height: var(--collapsed-button-size) !important; + padding: 0 !important; + margin: 0 !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + border-radius: var(--radius-circle) !important; + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + border: none !important; + box-shadow: none !important; + transform: translateZ(0) scale(1) !important; + transform-origin: center center !important; + transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), + background 250ms ease, + backdrop-filter 250ms ease !important; + overflow: visible !important; + pointer-events: auto !important; + cursor: pointer !important; + isolation: isolate !important; + text-decoration: none !important; + visibility: visible !important; + opacity: 1 !important; + z-index: 100 !important; + font-size: 0 !important; + color: transparent !important; +} + +.body-sidebar-container:not(.expanded) .collapse-sidebar-link::before { + content: "" !important; + position: absolute !important; + pointer-events: none !important; + inset: 0 !important; + border-radius: inherit !important; + padding: 2px !important; + background: linear-gradient( + to bottom right, + var(--c1-collapsed) 0%, + var(--c3-collapsed) 33%, + var(--c2-collapsed) 62%, + var(--c3-collapsed) 100% + ) !important; + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + -webkit-mask-composite: xor !important; + mask-composite: exclude !important; + transition: opacity 250ms ease !important; + z-index: 1 !important; + opacity: 1 !important; +} + +.body-sidebar-container:not(.expanded) .collapse-sidebar-link:hover { + transform: translateZ(0) scale(1.08) !important; + background: rgba(255, 255, 255, 0.08) !important; +} + +.body-sidebar-container:not(.expanded) .collapse-sidebar-link:hover::before { + opacity: 0.9 !important; +} + +.body-sidebar-container:not(.expanded) .collapse-sidebar-link:active { + transform: translateZ(0) scale(0.95) !important; + background: rgba(255, 255, 255, 0.03) !important; + transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), + background 150ms ease !important; +} + +.body-sidebar-container:not(.expanded) .collapse-sidebar-link svg { + width: var(--collapsed-icon-size) !important; + height: var(--collapsed-icon-size) !important; + min-width: var(--collapsed-icon-size) !important; + min-height: var(--collapsed-icon-size) !important; + max-width: var(--collapsed-icon-size) !important; + max-height: var(--collapsed-icon-size) !important; + display: block !important; + margin: 0 !important; + transform: translateZ(0) !important; + transition: none !important; + shape-rendering: geometricPrecision !important; + backface-visibility: hidden !important; + pointer-events: none !important; + position: relative !important; + z-index: 2 !important; +} + +.body-sidebar-container:not(.expanded) .body-sidebar-bottom { + width: 50px !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + gap: var(--collapsed-gap) !important; + padding: 8px 0 !important; + position: sticky !important; + bottom: 0 !important; + background: transparent !important; + margin-top: auto !important; + z-index: 10 !important; + min-height: 56px !important; + visibility: visible !important; +} + +/* ============================================ */ +/* РАЗВЕРНУТЫЙ SIDEBAR */ +/* ============================================ */ + +@property --c1-expanded { + syntax: ""; + inherits: false; + initial-value: rgba(255, 255, 255, 0.9); +} + +@property --c2-expanded { + syntax: ""; + inherits: false; + initial-value: rgba(255, 255, 255, 0.4); +} + +@property --c3-expanded { + syntax: ""; + inherits: false; + initial-value: rgba(255, 255, 255, 0.25); +} + +.body-sidebar-container.expanded .standard-sidebar-item { + position: relative !important; + background: transparent !important; + border-radius: var(--radius-button) !important; + padding: 0 !important; + margin: var(--expanded-margin) !important; + display: flex !important; + align-items: center !important; + transition: transform 250ms ease-out, opacity 200ms ease !important; + overflow: visible !important; + cursor: pointer !important; + min-height: var(--expanded-button-height) !important; + transform: translateZ(0) scale(1) !important; + opacity: 0.7 !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item > a, +.body-sidebar-container.expanded .sidebar-item-container .standard-sidebar-item > a, +.body-sidebar-container.expanded .standard-sidebar-item > a.item-anchor { + display: flex !important; + align-items: center !important; + padding: var(--expanded-padding) !important; + border-radius: var(--radius-button) !important; + position: absolute !important; + inset: 0 !important; + left: 0 !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + z-index: 2 !important; + text-decoration: none !important; + width: 100% !important; + height: 100% !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item::before { + display: none !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item:hover { + transform: translateZ(0) scale(1.02) !important; + opacity: 1 !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item:active { + transform: translateZ(0) scale(0.98) !important; + opacity: 0.8 !important; + transition: transform 150ms ease-out, opacity 150ms ease !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item.active-sidebar, +.body-sidebar-container.expanded .standard-sidebar-item.selected, +.body-sidebar-container.expanded .standard-sidebar-item.active, +.body-sidebar-container.expanded .sidebar-item-container.selected .standard-sidebar-item, +.body-sidebar-container.expanded .sidebar-item-container.active .standard-sidebar-item { + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + opacity: 1 !important; + transform: translateZ(0) scale(1) !important; + transition: transform 300ms ease-out, + background 250ms ease, + backdrop-filter 250ms ease !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item.active-sidebar::before, +.body-sidebar-container.expanded .standard-sidebar-item.selected::before, +.body-sidebar-container.expanded .standard-sidebar-item.active::before, +.body-sidebar-container.expanded .sidebar-item-container.selected .standard-sidebar-item::before, +.body-sidebar-container.expanded .sidebar-item-container.active .standard-sidebar-item::before { + content: "" !important; + display: block !important; + position: absolute !important; + inset: 0 !important; + border-radius: var(--radius-button) !important; + pointer-events: none !important; + z-index: 1 !important; + padding: 2px !important; + background: linear-gradient( + to bottom right, + var(--c1-expanded) 0%, + var(--c3-expanded) 33%, + var(--c2-expanded) 62%, + var(--c3-expanded) 100% + ) !important; + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + -webkit-mask-composite: xor !important; + mask-composite: exclude !important; + transition: opacity 250ms ease !important; + opacity: 1 !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item.active-sidebar:hover, +.body-sidebar-container.expanded .standard-sidebar-item.selected:hover, +.body-sidebar-container.expanded .standard-sidebar-item.active:hover, +.body-sidebar-container.expanded .sidebar-item-container.selected .standard-sidebar-item:hover, +.body-sidebar-container.expanded .sidebar-item-container.active .standard-sidebar-item:hover { + transform: translateZ(0) scale(1.02) !important; + background: rgba(255, 255, 255, 0.08) !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item.active-sidebar:active, +.body-sidebar-container.expanded .standard-sidebar-item.selected:active, +.body-sidebar-container.expanded .standard-sidebar-item.active:active, +.body-sidebar-container.expanded .sidebar-item-container.selected .standard-sidebar-item:active, +.body-sidebar-container.expanded .sidebar-item-container.active .standard-sidebar-item:active { + transform: translateZ(0) scale(0.98) !important; + background: rgba(255, 255, 255, 0.03) !important; + transition: transform 150ms ease-out, + background 150ms ease !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item.active-sidebar:hover::before, +.body-sidebar-container.expanded .standard-sidebar-item.selected:hover::before, +.body-sidebar-container.expanded .standard-sidebar-item.active:hover::before, +.body-sidebar-container.expanded .sidebar-item-container.selected .standard-sidebar-item:hover::before, +.body-sidebar-container.expanded .sidebar-item-container.active .standard-sidebar-item:hover::before { + opacity: 0.9 !important; +} + +.body-sidebar-container.expanded .sidebar-item-icon, +.body-sidebar-container.expanded .body-sidebar .sidebar-item-icon, +.body-sidebar-container.expanded .body-sidebar-top .sidebar-item-icon, +.body-sidebar-container.expanded .sidebar-items .sidebar-item-icon { + display: flex !important; + justify-content: center !important; + align-items: center !important; + flex-shrink: 0 !important; + width: var(--expanded-icon-size) !important; + height: var(--expanded-icon-size) !important; + min-width: var(--expanded-icon-size) !important; + max-width: var(--expanded-icon-size) !important; + margin-right: 12px !important; + transform: translateZ(0) !important; + transition: none !important; + backface-visibility: hidden !important; +} + +.body-sidebar-container.expanded .sidebar-item-icon svg, +.body-sidebar-container.expanded .sidebar-item-icon img, +.body-sidebar-container.expanded .sidebar-item-icon svg.icon, +.body-sidebar-container.expanded .sidebar-item-icon svg.icon-md, +.body-sidebar-container.expanded .standard-sidebar-item .sidebar-item-icon svg, +.body-sidebar-container.expanded .standard-sidebar-item .sidebar-item-icon img, +.body-sidebar-container.expanded .body-sidebar .sidebar-item-icon svg, +.body-sidebar-container.expanded .body-sidebar-top .sidebar-item-icon svg, +.body-sidebar-container.expanded .sidebar-items .sidebar-item-icon svg { + width: var(--expanded-icon-size) !important; + height: var(--expanded-icon-size) !important; + min-width: var(--expanded-icon-size) !important; + max-width: var(--expanded-icon-size) !important; + transform: translateZ(0) !important; + transition: none !important; + shape-rendering: geometricPrecision !important; + backface-visibility: hidden !important; +} + +.body-sidebar-container.expanded .sidebar-item-label, +.body-sidebar-container.expanded .standard-sidebar-item .sidebar-item-label, +.body-sidebar-container.expanded .body-sidebar .sidebar-item-label, +.body-sidebar-container.expanded .body-sidebar-top .sidebar-item-label, +.body-sidebar-container.expanded .sidebar-items .sidebar-item-label { + flex: 1 !important; + font-size: var(--expanded-text-size) !important; + font-weight: 500 !important; + line-height: 1.4 !important; + transform: translateZ(0) !important; + transition: none !important; + backface-visibility: hidden !important; + color: var(--text-color) !important; +} + +.body-sidebar-container.expanded .sidebar-item-control { + display: flex !important; + align-items: center !important; + justify-content: center !important; + padding: 0 4px !important; + pointer-events: auto !important; + position: relative !important; + z-index: 3 !important; + visibility: visible !important; + flex-shrink: 0 !important; + width: auto !important; +} + +.body-sidebar-container.expanded .sidebar-item-control.hidden, +.body-sidebar-container.expanded .sidebar-item-control .drop-icon.hidden { + display: none !important; +} + +.body-sidebar-container.expanded .sidebar-item-control .drop-icon svg, +.body-sidebar-container.expanded .sidebar-item-control svg { + width: 14px !important; + height: 14px !important; + max-width: 14px !important; + max-height: 14px !important; +} + +.body-sidebar-container.expanded .sidebar-item-control .drop-icon.show-in-edit-mode, +.body-sidebar-container.expanded .sidebar-item-control .drop-icon { + display: flex !important; + align-items: center !important; + justify-content: center !important; + background: transparent !important; + border: none !important; + padding: 4px !important; + cursor: pointer !important; + visibility: visible !important; + opacity: 1 !important; + width: 22px !important; + height: 22px !important; + flex-shrink: 0 !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item > *, +.body-sidebar-container.expanded .standard-sidebar-item > a, +.body-sidebar-container.expanded .standard-sidebar-item > a > * { + position: relative !important; + z-index: 2 !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item > .sidebar-item-control { + position: relative !important; + z-index: 3 !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item .d-flex { + display: flex !important; + align-items: center !important; + flex: 1 !important; + pointer-events: none !important; +} + +.body-sidebar-container.expanded .standard-sidebar-item .d-flex > * { + pointer-events: auto !important; +} + +.body-sidebar-container.expanded .sidebar-child-item { + display: block !important; + margin: 0 !important; + padding: 0 !important; +} + +.body-sidebar-container.expanded .sidebar-child-item.hidden { + display: none !important; +} + +.body-sidebar-container.expanded .sidebar-child-item .standard-sidebar-item { + margin-left: 8px !important; + margin-right: 8px !important; + padding-left: 0 !important; +} + +.body-sidebar-container.expanded .sidebar-child-item .standard-sidebar-item > a { + padding-left: var(--child-padding-left) !important; + min-height: var(--child-button-height) !important; + padding-top: 8px !important; + padding-bottom: 8px !important; +} + +.body-sidebar-container.expanded .sidebar-child-item .standard-sidebar-item::before { + border-radius: 10px !important; +} + +.body-sidebar-container.expanded .sidebar-child-item .standard-sidebar-item:hover { + background: transparent !important; +} + +.body-sidebar-container.expanded .sidebar-child-item .sidebar-item-icon { + width: var(--child-icon-size) !important; + height: var(--child-icon-size) !important; + min-width: var(--child-icon-size) !important; + max-width: var(--child-icon-size) !important; + margin-right: 10px !important; +} + +.body-sidebar-container.expanded .sidebar-child-item .sidebar-item-icon svg, +.body-sidebar-container.expanded .sidebar-child-item .sidebar-item-icon img { + width: var(--child-icon-size) !important; + height: var(--child-icon-size) !important; + min-width: var(--child-icon-size) !important; + max-width: var(--child-icon-size) !important; +} + +.body-sidebar-container.expanded .sidebar-child-item .sidebar-item-label { + font-size: var(--child-text-size) !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown { + display: flex !important; + flex-direction: column !important; + width: 100% !important; + padding: 0 !important; + margin: 0 !important; + height: auto !important; + min-height: auto !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item { + position: relative !important; + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + border-radius: var(--radius-button) !important; + padding: var(--expanded-padding) !important; + margin: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + opacity: 1 !important; + transform: translateZ(0) scale(1) !important; + transition: none !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .app-logo-container { + width: var(--app-switcher-icon-expanded) !important; + height: var(--app-switcher-icon-expanded) !important; + min-width: var(--app-switcher-icon-expanded) !important; + max-width: var(--app-switcher-icon-expanded) !important; + min-height: var(--app-switcher-icon-expanded) !important; + max-height: var(--app-switcher-icon-expanded) !important; + margin-right: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + flex-shrink: 0 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .app-logo-container img.app-logo, +.body-sidebar-container.expanded .app-switcher-dropdown .app-logo-container .app-logo { + width: var(--app-switcher-icon-expanded) !important; + height: var(--app-switcher-icon-expanded) !important; + min-width: var(--app-switcher-icon-expanded) !important; + max-width: var(--app-switcher-icon-expanded) !important; + min-height: var(--app-switcher-icon-expanded) !important; + max-height: var(--app-switcher-icon-expanded) !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .app-title { + font-size: var(--expanded-text-size) !important; + font-weight: 600 !important; + margin-left: 12px !important; + margin-top: 0 !important; + line-height: 1.4 !important; + flex: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .d-flex { + display: flex !important; + align-items: center !important; + flex: 1 !important; + position: relative !important; + z-index: 2 !important; + gap: 0 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .sidebar-item-control { + position: relative !important; + z-index: 3 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item::before { + content: "" !important; + display: block !important; + position: absolute !important; + inset: 0 !important; + border-radius: var(--radius-button) !important; + pointer-events: none !important; + z-index: 1 !important; + padding: 2px !important; + background: linear-gradient( + to bottom right, + var(--c1-expanded) 0%, + var(--c3-expanded) 33%, + var(--c2-expanded) 62%, + var(--c3-expanded) 100% + ) !important; + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + -webkit-mask-composite: xor !important; + mask-composite: exclude !important; + transition: opacity 250ms ease !important; + opacity: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item:hover { + transform: none !important; + opacity: 1 !important; + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item:hover::before { + opacity: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown .standard-sidebar-item:active { + transform: none !important; + opacity: 1 !important; + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + transition: none !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown.hover, +.body-sidebar-container.expanded .app-switcher-dropdown.hover .standard-sidebar-item { + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + transform: none !important; + opacity: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown.hover .standard-sidebar-item::before { + opacity: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown.hover, +.body-sidebar-container.expanded .app-switcher-dropdown.hover .standard-sidebar-item, +.body-sidebar-container.expanded .app-switcher-dropdown.active-sidebar, +.body-sidebar-container.expanded .app-switcher-dropdown.active-sidebar .standard-sidebar-item { + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + transform: none !important; + opacity: 1 !important; +} + +.body-sidebar-container.expanded .app-switcher-dropdown.hover .standard-sidebar-item::before, +.body-sidebar-container.expanded .app-switcher-dropdown.active-sidebar .standard-sidebar-item::before { + opacity: 1 !important; +} + +.body-sidebar-container.expanded .collapse-sidebar-link { + position: relative !important; + background: rgba(255, 255, 255, 0.05) !important; + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + border-radius: var(--radius-button) !important; + padding: var(--expanded-padding) !important; + margin: var(--expanded-margin) !important; + display: flex !important; + flex-direction: row-reverse !important; + align-items: center !important; + justify-content: flex-end !important; + cursor: pointer !important; + text-decoration: none !important; + overflow: visible !important; + font-size: var(--expanded-text-size) !important; + font-weight: 500 !important; + min-height: var(--expanded-button-height) !important; + color: var(--text-color) !important; + visibility: visible !important; + opacity: 1 !important; + width: auto !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; + transform: translateZ(0) scale(1) !important; + transition: transform 300ms ease-out, + background 250ms ease, + backdrop-filter 250ms ease !important; +} + +.body-sidebar-container.expanded .collapse-sidebar-link::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + border-radius: var(--radius-button) !important; + pointer-events: none !important; + z-index: -1 !important; + padding: 2px !important; + background: linear-gradient( + to bottom right, + var(--c1-expanded) 0%, + var(--c3-expanded) 33%, + var(--c2-expanded) 62%, + var(--c3-expanded) 100% + ) !important; + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; + -webkit-mask-composite: xor !important; + mask-composite: exclude !important; + transition: opacity 250ms ease !important; + opacity: 1 !important; +} + +.body-sidebar-container.expanded .collapse-sidebar-link:hover { + transform: translateZ(0) scale(1.02) !important; + background: rgba(255, 255, 255, 0.08) !important; +} + +.body-sidebar-container.expanded .collapse-sidebar-link:hover::before { + opacity: 0.9 !important; +} + +.body-sidebar-container.expanded .collapse-sidebar-link:active { + transform: translateZ(0) scale(0.98) !important; + background: rgba(255, 255, 255, 0.03) !important; + transition: transform 150ms ease-out, + background 150ms ease !important; +} + +.body-sidebar-container.expanded .collapse-sidebar-link svg { + width: 18px !important; + height: 18px !important; + max-width: 18px !important; + max-height: 18px !important; + margin-left: 10px !important; + margin-right: 0 !important; + transform: translateZ(0) !important; + backface-visibility: hidden !important; + stroke: var(--icon-color) !important; + fill: var(--icon-color) !important; +} + +.body-sidebar-container.expanded .body-sidebar-bottom { + padding: 8px !important; + position: sticky !important; + bottom: 0 !important; + background: transparent !important; + margin-top: auto !important; + z-index: 10 !important; + display: flex !important; + flex-direction: column !important; + min-height: 52px !important; +} + +/* ============================================ */ +/* NAVBAR И ДРОПДАУНЫ */ +/* ============================================ */ + +/* NAVBAR - БЕЗ прямого backdrop-filter */ +.navbar { + background: transparent !important; + backdrop-filter: none !important; /* КРИТИЧНО - убрали! */ + border-bottom: 1px solid var(--border-color) !important; + box-shadow: none !important; + position: relative !important; /* Для ::before */ +} + +/* Blur для navbar через ::before */ +.navbar::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; + z-index: -1 !important; + pointer-events: none !important; +} + +.sticky-top { + background: transparent !important; +} + +.navbar .container, +.navbar .container-fluid, +.navbar > div { + position: relative !important; +} + +/* SEARCH BAR */ +.search-bar { + background: transparent !important; + backdrop-filter: none !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 20px !important; + box-shadow: none !important; + + position: absolute !important; + left: 50% !important; + top: 50% !important; + margin-left: -200px !important; + margin-top: -14px !important; + + min-width: 400px !important; + max-width: 400px !important; + width: 400px !important; + + display: block !important; + padding: 0 !important; + box-sizing: border-box !important; + gap: 0 !important; + transform: none !important; +} + +.search-bar::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + border-radius: 20px !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + z-index: -1 !important; + pointer-events: none !important; +} + +.search-bar > .search-icon { + display: none !important; +} + +.search-bar .awesomplete { + position: relative !important; + width: 100% !important; + display: block !important; + margin: 0 !important; + padding: 0 !important; +} + +.search-bar input, +.search-bar .awesomplete input, +.search-bar input#navbar-search { + background: transparent !important; + border: none !important; + width: 100% !important; + box-sizing: border-box !important; + margin: 0 !important; + outline: none !important; + box-shadow: none !important; + padding: 8px 16px !important; + position: relative !important; + z-index: 1 !important; +} + +.search-bar input::placeholder, +.search-bar input::-webkit-input-placeholder, +.search-bar input::-moz-placeholder, +.search-bar input:-ms-input-placeholder { + color: rgba(0, 0, 0, 0.6) !important; + opacity: 1 !important; +} + +/* DROPDOWN */ +.search-bar .awesomplete > ul, +.search-bar ul[role="listbox"] { + background: linear-gradient( + -75deg, + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0.15), + rgba(255, 255, 255, 0.1) + ) !important; + + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + + border: 1px solid rgba(255, 255, 255, 0.5) !important; + border-radius: var(--radius-card) !important; + box-shadow: + inset 0 1px 1px rgba(255, 255, 255, 0.5), + inset 0 -1px 1px rgba(0, 0, 0, 0.05), + 0 8px 32px rgba(0, 0, 0, 0.15), + 0 2px 8px rgba(0, 0, 0, 0.1) !important; + + margin-top: 8px !important; + padding: 8px !important; + + position: absolute !important; + left: 0 !important; + right: 0 !important; + width: 100% !important; + min-width: 400px !important; + max-width: 400px !important; + box-sizing: border-box !important; + + isolation: isolate !important; + z-index: 1000 !important; + transform: translateZ(0) !important; +} + +/* КРИТИЧНО: Blur через ::before */ +.search-bar .awesomplete > ul::before, +.search-bar ul[role="listbox"]::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + border-radius: var(--radius-card) !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; + z-index: -1 !important; + pointer-events: none !important; +} + +.search-bar .awesomplete > ul > li, +.search-bar ul[role="listbox"] > li { + padding: 10px 12px !important; + border-radius: 8px !important; + transition: background 200ms ease, transform 150ms ease !important; + background: transparent !important; + position: relative !important; + z-index: 1 !important; +} + +.search-bar .awesomplete > ul > li:hover, +.search-bar .awesomplete > ul > li[aria-selected="true"], +.search-bar ul[role="listbox"] > li:hover, +.search-bar ul[role="listbox"] > li[aria-selected="true"] { + background: linear-gradient( + -75deg, + rgba(255, 255, 255, 0.25), + rgba(255, 255, 255, 0.35), + rgba(255, 255, 255, 0.25) + ) !important; + transform: scale(0.98) !important; +} + +.search-bar .awesomplete > ul > li a, +.search-bar ul[role="listbox"] > li a { + color: rgba(50, 50, 50, 0.95) !important; + text-decoration: none !important; + text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important; +} + +.search-bar .awesomplete > ul > li mark, +.search-bar ul[role="listbox"] > li mark { + background: transparent !important; + color: rgba(30, 30, 30, 1) !important; + padding: 2px 4px !important; + border-radius: 4px !important; + font-weight: 600 !important; +} + +/* Другие dropdown */ +.app-switcher-menu, +.dropdown-menu { + background: transparent !important; + backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: var(--radius-card) !important; + box-shadow: var(--inset-shadow), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.15) !important; +} + +.app-item:hover, +.dropdown-item:hover { + background: transparent !important; + border-radius: 8px !important; + transform: scale(0.98) !important; +} + +.notifications-list { + background: transparent !important; + backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; +} + +.notification-list-header, +.notification-list-body { + background: transparent !important; +} + +.notification-item:hover { + background: transparent !important; + border-radius: 8px !important; + transform: scale(0.98) !important; +} + +.body-sidebar .sidebar-item-icon svg { + stroke: var(--icon-color) !important; +} + +.body-sidebar .sidebar-item-label, +.body-sidebar-bottom a { + color: var(--text-color) !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; +} + +/* ============================================ */ +/* КНОПКИ */ +/* ============================================ */ + +.btn, +.btn-primary, +.btn-secondary, +.btn-default, +button.btn { + position: relative !important; + background: transparent !important; + border-radius: 20px !important; + box-shadow: + inset 0 0.125em 0.125em rgba(0, 0, 0, 0.02), + inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.25), + 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.15), + 0 0 0.1em 0.2em inset rgba(255, 255, 255, 0.2) !important; + backdrop-filter: blur(10px) !important; + border: none !important; + color: var(--text-color-full) !important; + text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1) !important; + font-weight: 500 !important; + letter-spacing: -0.05em !important; + transition: all var(--anim--hover-time) var(--anim--hover-ease) !important; +} + +.btn:hover, +.btn-primary:hover, +.btn-secondary:hover, +.btn-default:hover, +button.btn:hover { + transform: scale(0.975) !important; + backdrop-filter: blur(0.01em) !important; + box-shadow: + inset 0 0.125em 0.125em rgba(0, 0, 0, 0.02), + inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.3), + 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.18), + 0 0 0.1em 0.2em inset rgba(255, 255, 255, 0.3) !important; + text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12) !important; +} + +.btn:active, +.btn-primary:active, +.btn-secondary:active, +.btn-default:active, +button.btn:active { + transform: scale(0.975) !important; + box-shadow: + inset 0 0.125em 0.125em rgba(0, 0, 0, 0.03), + inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.25), + 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.15), + 0 0 0.1em 0.2em inset rgba(255, 255, 255, 0.2), + inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.1) !important; + text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12) !important; +} + +/* ============================================ */ +/* TOUCH DEVICES */ +/* ============================================ */ + +@media (hover: none) and (pointer: coarse) { + .widget:not(.spacer), .frappe-card, .dashboard-widget-box, + .body-sidebar-container:not(.expanded) .standard-sidebar-item, + .body-sidebar-container.expanded .standard-sidebar-item { + --angle-cards: -75deg !important; + --angle-highlight: -45deg !important; + } +} + +/* Прозрачный фон для nested-container */ +.standard-sidebar-section.nested-container { + background: transparent !important; + backdrop-filter: none !important; + box-shadow: none !important; + border: none !important; +} + +.standard-sidebar-section.nested-container::before, +.standard-sidebar-section.nested-container::after { + display: none !important; +} + +/* ============================================ */ +/* PRELOADER */ +/* ============================================ */ + +.page-loading-indicator, +.page-loading-indicator *, +.page-loading-indicator svg, +.frappe-preloader, +.loading-indicator { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; + width: 0 !important; + height: 0 !important; + overflow: hidden !important; +} + +.page-loading-indicator::before { + content: ''; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 60px; + height: 60px; + background-image: url('/assets/custom_preloader/images/logo.png'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + animation: spin 1s linear infinite; + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} + +@keyframes spin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } +} + +#page-preloader { + position: fixed; + inset: 0; + z-index: 99999; + pointer-events: auto; + display: flex; + align-items: center; + justify-content: center; + will-change: opacity; +} + +#page-preloader svg { + position: absolute; + inset: 0; + width: 100vw; + height: 100vh; +} + +#page-preloader.hidden { + display: none; +} + +.page-head { + z-index: 6; + position: sticky; + top: var(--navbar-height); + background: transparent !important; + border-bottom: 1px solid var(--border-color); + transition: 0.5s top; + backdrop-filter: none !important; +} + +/* Применяем blur через ::before как у navbar */ +.page-head::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + background: transparent !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; + z-index: -1 !important; + pointer-events: none !important; +} + +/* ============================================ */ +/* FORMS */ +/* ============================================ */ + +.std-form-layout > .form-layout > .form-page { + background-color: transparent !important; +} + +.form-tabs-list { + background-color: #ffffff00 !important; + backdrop-filter: blur(15px); +} + +.form-tabs-list .form-tabs .nav-item .nav-link { + background-color: #ffffff00 !important; +} + +.control-value { + background: transparent !important; + backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 20px !important; + box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.25) !important; +} + +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) .input-with-feedback { + background: transparent !important; + backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 20px; + box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.25) !important; +} + +.form-control:not(.search-bar *):not(.search-bar .awesomplete *) { + background: transparent !important; + backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 20px; + box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.02), inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.25) !important; +} + +.awesomplete > [role=listbox] { + backdrop-filter: blur(15px); +} + +.text-extra-muted { + color: #666666 !important; +} + +.page-form { + background-color: #ffffff00 !important; + backdrop-filter: blur(15px) !important; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +/* ============================================ */ +/* ТАБЛИЧНЫЕ ЧАСТИ (GRID) - ПРОЗРАЧНОСТЬ */ +/* ============================================ */ + +.form-grid-container { + background: transparent !important; +} + +.form-grid { + background: transparent !important; + position: relative !important; + /* НЕ ИСПОЛЬЗУЕМ backdrop-filter здесь! */ +} + +/* Упрощаем blur для grid - меньше конфликтов */ +.form-grid::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + backdrop-filter: blur(5px) !important; + -webkit-backdrop-filter: blur(5px) !important; + z-index: -2 !important; + pointer-events: none !important; +} + +.grid-heading-row, +.grid-footer { + background: transparent !important; +} + +.grid-body { + background: transparent !important; +} + +.grid-row, +.grid-row .data-row, +.grid-body .rows { + background: transparent !important; +} + +/* Ячейки таблицы */ +.grid-body .grid-static-col, +.grid-heading-row .grid-static-col, +.grid-static-col { + background: transparent !important; + background-color: transparent !important; +} + +.grid-body .col, +.grid-heading-row .col { + background: transparent !important; + background-color: transparent !important; +} + +/* Пустая таблица */ +.grid-empty { + background: transparent !important; + background-color: transparent !important; +} + +/* Фон для колонки с иконками - БЕЗ blur чтобы не конфликтовать с dropdown */ +.grid-heading-row .col.grid-static-col.pointer, +.grid-row .col:last-child { + background: transparent !important; + border-radius: 0 !important; +} + +.grid-body .editable-row .form-control, .grid-body .editable-row .ql-editor { + border-radius: 0px !important; +} + +.list-row-head { + background-color: transparent !important; +} + +.list-row-head .level-right { + background-color: transparent !important; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + +.indicator-pill.grey, .indicator-pill-right.grey, .indicator-pill-round.grey { + background: #ffffff00 !important; +} + +.indicator-pill.yellow, .indicator-pill-right.yellow, .indicator-pill-round.yellow { + background: #ffffff00 !important; +} + +.list-row .level-right, .list-row-head .level-right { + backdrop-filter: blur(15px) brightness(1.06) !important; + border-left: 1px solid #ffffff5c !important; +} + +.list-row-head .level-right { + border-radius: 0px !important; +} + +.indicator-pill.green, .indicator-pill-right.green, .indicator-pill-round.green { + background: transparent !important; +} + +.indicator-pill.gray, .indicator-pill-right.gray, .indicator-pill-round.gray { + background: transparent !important; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +/* ============================================ */ +/* DROPDOWN - REAL GLASS (SOLO BLUR) */ +/* ============================================ */ + +/* Контейнер списка Awesomplete */ +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) > ul[role="listbox"] { + /* 1. Убираем прямой blur - будем использовать ::before */ + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + + /* 2. Прозрачный фон */ + background: transparent !important; + + /* 3. Границы и тени */ + border: 1px solid rgba(255, 255, 255, 0.6) !important; + border-radius: 12px !important; + box-shadow: + 0 15px 40px rgba(0, 0, 0, 0.15), /* Глубокая тень */ + inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important; /* Внутренний блик */ + + /* 4. Фикс выпадания (Скролл) */ + margin-top: 8px !important; + padding: 6px !important; + max-height: 300px !important; + overflow-y: auto !important; + overflow-x: hidden !important; + + position: absolute !important; + z-index: 99999 !important; + width: 100% !important; + box-sizing: border-box !important; + /* Убираем isolation - может конфликтовать */ +} + +/* Blur через ::before для grid dropdown */ +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) > ul[role="listbox"]::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + border-radius: 12px !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + z-index: -1 !important; + pointer-events: none !important; +} + +/* Скроллбар */ +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) > ul[role="listbox"]::-webkit-scrollbar { + width: 5px !important; +} +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) > ul[role="listbox"]::-webkit-scrollbar-track { + background: transparent !important; +} +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) > ul[role="listbox"]::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.2) !important; + border-radius: 10px !important; +} + +/* Элементы списка */ +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) > ul[role="listbox"] > div[role="option"] { + padding: 10px 12px !important; + border-radius: 8px !important; + margin-bottom: 2px !important; + /* Убираем transition чтобы не было мигания */ + transition: none !important; + color: #222 !important; + border-bottom: none !important; +} + +/* Ховер эффект */ +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) > ul[role="listbox"] > div[role="option"]:hover, +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) > ul[role="listbox"] > div[role="option"][aria-selected="true"] { + background: transparent !important; /* Подсветка */ + color: #000 !important; + transform: scale(0.99) !important; /* Микро-анимация нажатия */ +} + +.awesomplete:not(.search-bar .awesomplete):not(.search-bar *) mark { + background: rgba(255, 235, 59, 0.5) !important; + border-radius: 2px; + padding: 0 2px; +} + + + + + + +/* ============================================ */ +/* 1. CLEAN TRANSPARENCY (NO BLUR, NO WHITE) */ +/* ============================================ */ + +/* Убираем фон и блюр с основных контейнеров формы */ +.page-form { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: none !important; + border: none !important; +} + +/* Поля ввода: прозрачные, только тонкая рамка */ +.form-control, +.input-with-feedback, +.control-value, +.awesomplete .form-control { + background: transparent !important; /* Полная прозрачность */ + backdrop-filter: none !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Тонкая рамка, чтобы видеть поле */ + color: var(--text-color-full) !important; + box-shadow: none !important; +} + +/* Убираем фон у заголовков вкладок */ +.form-tabs-list .form-tabs .nav-item .nav-link { + background: transparent !important; +}