/* * flatpickr календарийн загварыг төслийн өнгөнд тааруулна. * * flatpickr нь календарийг -д нэмдэг тул surface-ийг body class-аар * ялгана: админ (`body.layout`) — Metronic primary; public (`body.ub-public`) * — ub brand. Зөвхөн идэвхтэй/өнөөдөр/hover өнгийг дарж бичнэ, бүтцийг flatpickr- * ийн үндсэн CSS-д үлдээнэ. */ .flatpickr-calendar { font-family: inherit; } /* ── Админ (Metronic) ── */ body.layout .flatpickr-day.selected, body.layout .flatpickr-day.selected:hover, body.layout .flatpickr-day.selected:focus, body.layout .flatpickr-day.startRange, body.layout .flatpickr-day.endRange { background: var(--primary, #7c3aed); border-color: var(--primary, #7c3aed); color: #fff; } body.layout .flatpickr-day.today { border-color: var(--primary, #7c3aed); } body.layout .flatpickr-day.today:hover, body.layout .flatpickr-day:hover { background: color-mix(in srgb, var(--primary, #7c3aed) 12%, transparent); } /* ── Public (ub brand) ── */ body.ub-public .flatpickr-day.selected, body.ub-public .flatpickr-day.selected:hover, body.ub-public .flatpickr-day.selected:focus { background: var(--ub-color-brand, #c8915f); border-color: var(--ub-color-brand, #c8915f); color: #fff; } body.ub-public .flatpickr-day.today { border-color: var(--ub-color-brand, #c8915f); } body.ub-public .flatpickr-day.today:hover, body.ub-public .flatpickr-day:hover { background: color-mix(in srgb, var(--ub-color-brand, #c8915f) 14%, transparent); } /* Захиалгын жагсаалтын нэг-input date range picker. Энэ scope-оос гаднах single/public flatpickr-ийн бүтцийг өөрчлөхгүй. */ body.layout .flatpickr-calendar.contract-date-range-calendar { grid-template-columns: 10rem auto; grid-template-areas: "presets months" "presets calendar"; max-width: calc(100vw - 1rem); overflow: hidden; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 36px color-mix(in srgb, var(--foreground) 16%, transparent); } body.layout .flatpickr-calendar.contract-date-range-calendar.open { display: grid; width: max-content !important; } body.layout .contract-date-range-calendar .contract-date-range-presets { grid-area: presets; display: flex; min-width: 10rem; flex-direction: column; gap: 0.25rem; padding: 0.5rem; border-inline-end: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 58%, var(--popover)); } body.layout .contract-date-range-calendar .contract-date-range-preset { appearance: none; width: 100%; border: 0; border-radius: calc(var(--radius) - 2px); padding: 0.5rem 0.625rem; background: transparent; color: var(--secondary-foreground); font: inherit; font-size: var(--text-xs); line-height: 1.25rem; text-align: start; white-space: nowrap; cursor: pointer; } body.layout .contract-date-range-calendar .contract-date-range-preset:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary); } body.layout .contract-date-range-calendar .contract-date-range-preset:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } body.layout .contract-date-range-calendar .contract-date-range-preset[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); } body.layout .contract-date-range-calendar .contract-date-range-preset[data-date-range-preset="custom"] { margin-top: auto; box-shadow: 0 -1px 0 var(--border); } body.layout .contract-date-range-calendar > .flatpickr-months { grid-area: months; } body.layout .contract-date-range-calendar > .flatpickr-innerContainer { grid-area: calendar; } body.layout .contract-date-range-calendar .flatpickr-prev-month { left: 10rem; } body.layout .contract-date-range-calendar .flatpickr-month, body.layout .contract-date-range-calendar span.flatpickr-weekday, body.layout .contract-date-range-calendar .flatpickr-day, body.layout .contract-date-range-calendar .flatpickr-current-month input.cur-year { color: var(--popover-foreground); fill: var(--popover-foreground); } body.layout .contract-date-range-calendar .flatpickr-current-month { font-size: var(--text-base); } body.layout .contract-date-range-calendar .flatpickr-day.prevMonthDay, body.layout .contract-date-range-calendar .flatpickr-day.nextMonthDay, body.layout .contract-date-range-calendar .flatpickr-day.flatpickr-disabled { color: var(--muted-foreground); } body.layout .contract-date-range-calendar .flatpickr-day.inRange { background: color-mix(in srgb, var(--primary) 14%, var(--popover)); border-color: color-mix(in srgb, var(--primary) 14%, var(--popover)); color: var(--popover-foreground); box-shadow: -5px 0 0 color-mix(in srgb, var(--primary) 14%, var(--popover)), 5px 0 0 color-mix(in srgb, var(--primary) 14%, var(--popover)); } body.layout .contract-date-range-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { box-shadow: -2px 0 0 color-mix(in srgb, var(--primary) 14%, var(--popover)), 5px 0 0 color-mix(in srgb, var(--primary) 14%, var(--popover)) !important; } body.layout .contract-date-range-calendar.arrowTop::after { border-bottom-color: var(--popover); } body.layout .contract-date-range-calendar.arrowTop::before { border-bottom-color: var(--border); } body.layout .contract-date-range-calendar.arrowBottom::after { border-top-color: var(--popover); } body.layout .contract-date-range-calendar.arrowBottom::before { border-top-color: var(--border); } @media (max-width: 1023px) { body.layout .flatpickr-calendar.contract-date-range-calendar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "presets" "months" "calendar"; } body.layout .flatpickr-calendar.contract-date-range-calendar.open { width: min(307.875px, calc(100vw - 1rem)) !important; } body.layout .contract-date-range-calendar .contract-date-range-presets { min-width: 0; max-width: calc(100vw - 1rem); flex-direction: row; gap: 0.375rem; overflow-x: auto; padding: 0.5rem; border-inline-end: 0; border-bottom: 1px solid var(--border); scrollbar-width: thin; } body.layout .contract-date-range-calendar .flatpickr-prev-month, body.layout .contract-date-range-calendar .flatpickr-next-month { top: 3.25rem; } body.layout .contract-date-range-calendar .flatpickr-prev-month { left: 0; } body.layout .contract-date-range-calendar .contract-date-range-preset { width: auto; flex: 0 0 auto; } body.layout .contract-date-range-calendar .contract-date-range-preset[data-date-range-preset="custom"] { margin-top: 0; box-shadow: none; } }