/* ========================================================= Kendo popup / surface overrides for [data-accent="dark"] --------------------------------------------------------- Эти селекторы рендерятся Kendo напрямую в (за пределами .eControls scope), поэтому их нельзя починить из обычных eControls-файлов. Здесь — только dark. ========================================================= */ [data-accent="dark"] { /* ── Kendo PanelBar (sidebar navigation) ── */ & .k-panelbar, & .k-panelbar.k-widget { background-color: transparent; border: none; } & .k-panelbar > .k-panelbar-item > .k-link, & .k-panelbar .k-link.k-header, & .k-panelbar .k-panelbar-header, & .k-panelbar .k-state-default > .k-link { background-color: transparent !important; color: var(--gray-900) !important; border-color: var(--gray-200) !important; } & .k-panelbar > .k-panelbar-item > .k-link:hover, & .k-panelbar .k-link.k-header:hover, & .k-panelbar .k-panelbar-item:hover > .k-link { background-color: var(--gray-200) !important; color: var(--gray-900) !important; } & .k-panelbar > .k-panelbar-item.k-state-active > .k-link, & .k-panelbar > .k-panelbar-item.k-active > .k-link, & .k-panelbar .k-link.k-selected { background-color: var(--brand-50) !important; color: var(--gray-900) !important; } & .k-panelbar .k-panelbar-group, & .k-panelbar .k-group { background-color: transparent; } & .k-panelbar .k-link:not(.k-header) { color: var(--gray-700) !important; background-color: transparent !important; } & .k-panelbar .k-link:not(.k-header):hover { background-color: var(--brand-50) !important; color: var(--gray-900) !important; } & .k-panelbar .k-link.k-selected:not(.k-header), & .k-panelbar .k-state-selected > .k-link { background-color: var(--brand-100) !important; color: var(--gray-900) !important; } /* ── Kendo input surfaces (textbox, dropdown closed value, numerics) ── */ & .k-input-solid, & .k-textbox, & .k-input, & .k-picker-solid { background-color: var(--white) !important; color: var(--gray-900) !important; border-color: var(--gray-300); } & .k-input-inner, & .k-input-value-text { color: var(--gray-900) !important; background-color: transparent !important; } & .k-input-inner::placeholder { color: var(--gray-500); opacity: 1; } & .k-disabled, & .k-input-solid.k-disabled { background-color: var(--gray-100) !important; color: var(--gray-500) !important; } /* ── Popup / animation containers ── */ & .k-animation-container, & .k-popup, & .k-list-container { color: var(--gray-900); } & .k-popup, & .k-list-container, & .k-list, & .k-menu-popup, & .k-context-menu { background-color: var(--white); border: 1px solid var(--gray-300); box-shadow: var(--shadow-lg); } & .k-list-item, & .k-list-optionlabel, & .k-menu-item .k-link { color: var(--gray-900); background-color: transparent; } & .k-list-item:hover, & .k-list-item.k-hover, & .k-menu-item:hover > .k-link { background-color: var(--brand-50) !important; color: var(--gray-900); } & .k-list-item.k-selected, & .k-list-item.k-selected:hover { background-color: var(--brand-100) !important; color: var(--gray-900) !important; } & .k-list-group-sticky-header, & .k-list-header { background-color: var(--gray-100); color: var(--gray-700); border-color: var(--gray-300); } & .k-no-data { color: var(--gray-500); } /* ── Calendar / date picker popup ── */ & .k-calendar, & .k-calendar-view, & .k-time-list-container, & .k-time-list-wrapper, & .k-datetime-container { background-color: var(--white) !important; color: var(--gray-900); border-color: var(--gray-300); } & .k-calendar .k-calendar-th, & .k-calendar .k-calendar-caption, & .k-calendar .k-meta-header, & .k-time-list-wrapper .k-title { color: var(--gray-700); } & .k-calendar .k-link { color: var(--gray-900); } & .k-calendar .k-other-month .k-link { color: var(--gray-500); } & .k-calendar .k-link:hover, & .k-calendar .k-hover .k-link { background-color: var(--brand-50); color: var(--gray-900); } & .k-calendar .k-selected .k-link, & .k-calendar .k-selected:hover .k-link { background-color: var(--brand-600) !important; color: var(--text-on-brand) !important; } & .k-calendar .k-today .k-link { color: var(--brand-400); } & .k-time-list .k-item:hover { background-color: var(--brand-50); } & .k-time-list .k-item.k-selected { background-color: var(--brand-600); color: var(--text-on-brand); } /* ── Grid ── */ & .k-grid, & .k-grid table { background-color: transparent; color: var(--gray-900); } & .k-grid-header, & .k-grid-header-wrap, & .k-grid .k-table-thead, & .k-grid th.k-table-th { background-color: var(--gray-100) !important; color: var(--gray-800); border-color: var(--gray-300); } & .k-grid .k-table-row, & .k-grid tr.k-table-row { background-color: var(--white); color: var(--gray-900); } & .k-grid .k-table-row:hover { background-color: var(--gray-100) !important; } & .k-grid tr.k-table-alt-row, & .k-grid tr.k-alt, & .k-grid .k-master-row.k-alt, & .k-grid .k-table-alt-row > td, & .k-grid tr.k-alt > td { background-color: var(--gray-50) !important; color: var(--gray-900) !important; } & .k-grid tr.k-table-alt-row:hover, & .k-grid tr.k-alt:hover { background-color: var(--gray-100) !important; } & .k-grid .k-table-row.k-selected, & .k-grid tr.k-selected, & .k-grid tr.k-selected > td { background-color: var(--brand-100) !important; color: var(--gray-900) !important; } & .k-grid td, & .k-grid .k-table-td { border-color: var(--gray-200); } & .k-grid-footer, & .k-grid-pager, & .k-pager { background-color: var(--gray-100); color: var(--gray-700); border-color: var(--gray-300); } /* ── Window / Dialog ── */ & .k-window, & .k-dialog { background-color: var(--white); color: var(--gray-900); border: 1px solid var(--gray-300); } & .k-window-titlebar, & .k-dialog-titlebar { background-color: var(--white); color: var(--gray-900); border-bottom: 1px solid var(--gray-200); } & .k-overlay { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ── Default (non-primary) Kendo buttons (e.g. Cancel) ── */ & .k-button-solid-base:not(.js-editor-fullscreen):not(.js-editor-insert-image):not(.js-editor-ai-btn):not([data-command]) { background-color: var(--white); color: var(--gray-700); border-color: var(--gray-300); } & .k-button-solid-base:not(.js-editor-fullscreen):not(.js-editor-insert-image):not(.js-editor-ai-btn):not([data-command]):hover { background-color: var(--gray-100); } /* ── Toolbar / TabStrip ── */ & .k-toolbar { background-color: var(--white); border-color: var(--gray-200); color: var(--gray-700); } & .k-tabstrip-items-wrapper { border-color: var(--gray-200); } & .k-tabstrip-items .k-link { color: var(--gray-700); } & .k-tabstrip-items .k-item.k-active .k-link, & .k-tabstrip-items .k-item.k-state-active .k-link { color: var(--brand-400); } /* ── Notification / tooltip ── */ & .k-tooltip { background-color: var(--gray-900); color: var(--white); border-color: var(--gray-700); } /* ── Kendo Scheduler / Calendar ── */ & .k-scheduler, & .k-scheduler-layout { background-color: var(--white); color: var(--gray-900); border-color: var(--gray-300); } & .k-scheduler-head, & .k-scheduler-body, & .k-scheduler-columns { background-color: var(--white); border-color: var(--gray-200); } & .k-scheduler-head .k-scheduler-cell, & .k-scheduler-head th, & .k-scheduler .k-heading-cell { background-color: var(--gray-100) !important; color: var(--gray-600) !important; border-color: var(--gray-200) !important; } /* Kendo overrides .k-heading-cell .k-link with primary color for weekends */ & .k-scheduler .k-heading-cell .k-link, & .k-scheduler .k-heading-cell a, & .k-scheduler .k-scheduler-head .k-link, & .k-scheduler .k-heading-cell.k-weekend .k-link, & .k-scheduler .k-heading-cell.k-weekend a, & .k-scheduler .k-scheduler-head .k-table-th .k-link, & .k-scheduler .k-scheduler-head th .k-link, & .k-scheduler .k-scheduler-head td .k-link, & .k-scheduler-head .k-heading-cell span, & .k-scheduler-head .k-heading-cell .k-link span { color: var(--gray-600) !important; text-decoration: none !important; } & .k-scheduler .k-scheduler-cell, & .k-scheduler td { background-color: var(--white); color: var(--gray-700); border-color: var(--gray-200); } /* "today" cell — заменяем Kendo-жёлтый на translucent brand */ & .k-scheduler .k-today, & .k-scheduler .k-today > .k-scheduler-cell, & .k-scheduler td.k-today { background-color: rgba(127, 86, 217, 0.12) !important; } & .k-scheduler .k-today .k-scheduler-cell-header, & .k-scheduler td.k-today .k-link { color: var(--brand-400) !important; font-weight: 600; } /* Non-current month cells */ & .k-scheduler .k-other-month { background-color: var(--gray-50) !important; } & .k-scheduler .k-other-month .k-link { color: var(--gray-500) !important; } /* Month view date numbers */ & .k-scheduler .k-link { color: var(--gray-700); } /* Event blocks */ & .k-scheduler .k-event { background-color: var(--brand-600) !important; color: var(--text-on-brand) !important; border: none; opacity: 0.9; } & .k-scheduler .k-event:hover { opacity: 1; filter: brightness(1.15); } & .k-scheduler .k-event.k-selected, & .k-scheduler .k-event:focus { box-shadow: 0 0 0 2px var(--brand-300) !important; outline: none; } /* Toolbar / nav buttons */ & .k-scheduler .k-toolbar, & .k-scheduler-toolbar { background-color: var(--white) !important; border-color: var(--gray-200) !important; color: var(--gray-800) !important; } /* Toolbar buttons (Week/Day/Month/Today) */ & .k-scheduler-toolbar .k-button, & .k-scheduler-toolbar .k-button-md, & .k-scheduler-toolbar .k-nav-current { background-color: var(--gray-100) !important; color: var(--gray-800) !important; border-color: var(--gray-300) !important; } & .k-scheduler-toolbar .k-button:hover, & .k-scheduler-toolbar .k-button-md:hover { background-color: var(--gray-200) !important; } & .k-scheduler-toolbar .k-button.k-selected, & .k-scheduler-toolbar .k-button.k-state-selected { background-color: var(--brand-600) !important; color: var(--text-on-brand) !important; border-color: var(--brand-600) !important; } /* select/input inside toolbar (e.g. "30 min") */ & .k-scheduler-toolbar select, & .k-scheduler-toolbar .k-dropdownlist, & .k-scheduler-toolbar .k-picker { background-color: var(--gray-100) !important; color: var(--gray-800) !important; border-color: var(--gray-300) !important; } /* ── Scrollbar (WebKit) ── */ & ::-webkit-scrollbar { width: 10px; height: 10px; } & ::-webkit-scrollbar-track { background: transparent; } & ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; } & ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } } /* Применяется когда [data-accent="dark"] на (а не на потомке) */ html[data-accent="dark"] .k-animation-container, html[data-accent="dark"] .k-popup, html[data-accent="dark"] .k-list-container, html[data-accent="dark"] .k-calendar, html[data-accent="dark"] .k-list, html[data-accent="dark"] .k-menu-popup { background-color: var(--white); color: var(--gray-900); border-color: var(--gray-300); } html[data-accent="dark"] .k-list-container .k-list-item, html[data-accent="dark"] .k-popup .k-list-item { color: var(--gray-900); } html[data-accent="dark"] .k-list-container .k-list-item:hover, html[data-accent="dark"] .k-popup .k-list-item:hover, html[data-accent="dark"] .k-list-container .k-list-item.k-hover, html[data-accent="dark"] .k-popup .k-list-item.k-hover { background-color: var(--brand-50) !important; color: var(--gray-900); } html[data-accent="dark"] .k-list-container .k-list-item.k-selected, html[data-accent="dark"] .k-popup .k-list-item.k-selected { background-color: var(--brand-100) !important; color: var(--gray-900) !important; } /* Scheduler day-name labels at html level */ html[data-accent="dark"] .k-scheduler .k-heading-cell, html[data-accent="dark"] .k-scheduler .k-heading-cell .k-link, html[data-accent="dark"] .k-scheduler .k-heading-cell a, html[data-accent="dark"] .k-scheduler .k-heading-cell.k-weekend .k-link, html[data-accent="dark"] .k-scheduler .k-heading-cell.k-weekend a, html[data-accent="dark"] .k-scheduler .k-scheduler-head th .k-link, html[data-accent="dark"] .k-scheduler .k-scheduler-head td .k-link, html[data-accent="dark"] .k-scheduler-head .k-heading-cell span { color: var(--gray-600) !important; } html[data-accent="dark"] .k-scheduler .k-today .k-link, html[data-accent="dark"] .k-scheduler td.k-today .k-link { color: var(--brand-400) !important; font-weight: 600; } /* Scheduler toolbar background */ html[data-accent="dark"] .k-scheduler .k-toolbar, html[data-accent="dark"] .k-scheduler-toolbar { background-color: var(--white) !important; border-color: var(--gray-200) !important; color: var(--gray-800) !important; }