/* * Единый вид Air Datepicker под темы CRM (default / midnight и др. через токены на ). * Переменные см. https://github.com/t1m0n/air-datepicker/blob/v3/src/datepickerVars.scss */ .air-datepicker { --adp-font-family: inherit; --adp-font-size: 0.8125rem; --adp-width: 268px; --adp-z-index: 1080; --adp-padding: 6px; --adp-border-radius: 12px; --adp-transition-duration: 0.18s; --adp-transition-ease: ease-out; --adp-transition-offset: 6px; --adp-background-color: var(--crm-surface-elevated, #ffffff); --adp-background-color-hover: var(--bs-tertiary-bg, #f8f9fa); --adp-background-color-active: var(--bs-secondary-bg, #e9ecef); --adp-background-color-in-range: color-mix(in srgb, var(--bs-primary, #0d6efd) 14%, transparent); --adp-background-color-in-range-focused: color-mix(in srgb, var(--bs-primary, #0d6efd) 22%, transparent); --adp-background-color-selected-other-month: color-mix(in srgb, var(--bs-primary, #0d6efd) 28%, var(--crm-surface-elevated, #ffffff)); --adp-background-color-selected-other-month-focused: color-mix(in srgb, var(--bs-primary, #0d6efd) 38%, var(--crm-surface-elevated, #ffffff)); --adp-color: var(--app-text-primary, #1a1d21); --adp-color-secondary: var(--app-text-tertiary, #6c757d); --adp-accent-color: var(--bs-primary, #0d6efd); --adp-color-current-date: var(--bs-primary, #0d6efd); --adp-color-other-month: var(--app-text-tertiary, #adb5bd); --adp-color-disabled: var(--app-text-tertiary, #adb5bd); --adp-color-disabled-in-range: var(--app-text-secondary, #6c757d); --adp-color-other-month-hover: var(--app-text-secondary, #495057); --adp-border-color: var(--bs-border-color, #dee2e6); --adp-border-color-inner: var(--crm-line-soft, #f0f0f0); --adp-border-color-inline: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.12)); --adp-nav-height: 30px; --adp-nav-arrow-color: var(--app-text-tertiary, #6c757d); --adp-nav-action-size: 26px; --adp-nav-color-secondary: var(--app-text-tertiary, #6c757d); --adp-day-name-color: var(--bs-primary, #0d6efd); --adp-day-name-color-hover: color-mix(in srgb, var(--bs-primary, #0d6efd) 55%, var(--app-text-primary, #1a1d21)); --adp-day-cell-height: 32px; --adp-month-cell-height: 42px; --adp-year-cell-height: 50px; --adp-cell-border-radius: 10px; --adp-cell-background-color-hover: var(--bs-tertiary-bg, #f8f9fa); --adp-cell-background-color-selected: var(--bs-primary, #0d6efd); --adp-cell-background-color-selected-hover: color-mix(in srgb, var(--bs-primary, #0d6efd) 88%, #000000); --adp-cell-background-color-in-range: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, transparent); --adp-cell-background-color-in-range-hover: color-mix(in srgb, var(--bs-primary, #0d6efd) 20%, transparent); --adp-cell-border-color-in-range: color-mix(in srgb, var(--bs-primary, #0d6efd) 35%, transparent); --adp-btn-height: 32px; --adp-btn-color: var(--bs-primary, #0d6efd); --adp-btn-color-hover: var(--app-text-primary, #1a1d21); --adp-btn-border-radius: 10px; --adp-btn-background-color-hover: var(--bs-tertiary-bg, #f8f9fa); --adp-btn-background-color-active: var(--bs-secondary-bg, #e9ecef); --adp-time-track-height: 2px; --adp-time-track-color: var(--crm-line-soft, #e9ecef); --adp-time-track-color-hover: var(--bs-border-color, #dee2e6); --adp-time-thumb-size: 14px; --adp-time-padding-inner: 10px; --adp-time-day-period-color: var(--app-text-tertiary, #6c757d); font-weight: 400; letter-spacing: -0.02em; box-shadow: var(--crm-modal-shadow, 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12)); border: 1px solid var(--crm-modal-border, rgba(0, 0, 0, 0.08)); } /* Компактные стрелки навигации (иконки меньше, штрих тоньше стока) */ .air-datepicker-nav--action svg { width: 18px !important; height: 18px !important; } .air-datepicker-nav--action path { stroke-width: 1.15px; } .air-datepicker-nav--title { font-weight: 400; letter-spacing: -0.02em; } .air-datepicker-body--day-name { font-weight: 400; letter-spacing: 0.04em; } .air-datepicker-cell { font-weight: 400; } .air-datepicker-cell.-selected- { font-weight: 500; } /* Фокус ячейки — мягкая обводка вместо резкой чёрной рамки */ .air-datepicker-cell.-focus- { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary, #0d6efd) 35%, transparent); } /* Таймпикер: скругления под общий стиль */ .air-datepicker-time--current-hours, .air-datepicker-time--current-minutes { font-weight: 400; } .air-datepicker-time--current-hours:after, .air-datepicker-time--current-minutes:after { border-radius: var(--adp-cell-border-radius); } .air-datepicker-time--row input[type="range"]::-webkit-slider-thumb { border-radius: 999px; } .air-datepicker-time--row input[type="range"]::-moz-range-thumb { border-radius: 999px; } .air-datepicker-overlay { --adp-overlay-background-color: rgba(0, 0, 0, 0.28); --adp-overlay-z-index: 1075; } /* Полночь: усилить контраст без «голубых» дефолтов библиотеки */ html[data-ui-theme="midnight"] .air-datepicker { --adp-background-color: var(--crm-modal-surface, var(--crm-surface-elevated)); --adp-background-color-hover: rgba(255, 255, 255, 0.06); --adp-background-color-active: rgba(255, 255, 255, 0.1); --adp-color: var(--crm-modal-text, var(--app-text-primary)); --adp-color-secondary: var(--crm-modal-text-muted, var(--app-text-tertiary)); --adp-border-color: var(--crm-modal-border, rgba(255, 255, 255, 0.12)); --adp-border-color-inner: var(--crm-line-soft, rgba(255, 255, 255, 0.07)); --adp-border-color-inline: rgba(255, 255, 255, 0.14); --adp-nav-arrow-color: var(--app-shell-muted, #9ca3af); --adp-day-name-color: var(--app-shell-active-text, #b6d4fe); --adp-day-name-color-hover: color-mix(in srgb, var(--bs-primary) 70%, var(--crm-modal-text)); --adp-cell-background-color-hover: rgba(255, 255, 255, 0.06); --adp-cell-background-color-selected-hover: color-mix(in srgb, var(--bs-primary) 82%, #000000); --adp-btn-color-hover: var(--crm-modal-text); --adp-btn-background-color-hover: rgba(255, 255, 255, 0.06); --adp-btn-background-color-active: rgba(255, 255, 255, 0.1); --adp-time-track-color: var(--crm-line-soft, rgba(255, 255, 255, 0.12)); --adp-time-track-color-hover: rgba(255, 255, 255, 0.22); box-shadow: var(--crm-modal-shadow, 0 0.75rem 2rem rgba(0, 0, 0, 0.55)); border-color: var(--crm-modal-border, rgba(255, 255, 255, 0.12)); } html[data-ui-theme="midnight"] .air-datepicker-overlay { --adp-overlay-background-color: rgba(0, 0, 0, 0.55); } html[data-ui-theme="midnight"] .air-datepicker-cell.-focus- { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary, #6ea8fe) 40%, transparent); } /* * Последний слой каскада (файл подключён после modals/workspace-tabs): * повышенная специфичность + явные скругления — чтобы тема не «терялась» после всего CDN/CSS. */ body .air-datepicker { --adp-border-radius: 12px; --adp-cell-border-radius: 10px; --adp-btn-border-radius: 10px; border-radius: 12px !important; font-weight: 400; letter-spacing: -0.02em; } html[data-ui-theme="midnight"] body .air-datepicker { border-radius: 12px !important; } body .air-datepicker .air-datepicker-body--day-name { font-weight: 400; } body .air-datepicker .air-datepicker-nav--action svg { width: 18px !important; height: 18px !important; } body .air-datepicker .air-datepicker-nav--action path { stroke-width: 1.15px; }