/** * mod_dedge — minimal CSS on top of UIKit. The `--mod-dedge-primary` CSS * custom property (set inline on .mod-dedge from the `primary_color` module * param) is used ONLY to override flatpickr's selected-day color. Every other * primary-tinted element (the search button) uses UIKit's own primary color * via `uk-button-primary`. */ /* Trigger buttons (date block, guests block) — reset native button styles */ .mod-dedge .mod-dedge-trigger { display: block; width: 100%; padding: .5rem .75rem; background: transparent; border: 0; color: inherit; text-align: left; cursor: pointer; border-radius: 4px; transition: background-color .15s ease; } .mod-dedge .mod-dedge-trigger:hover, .mod-dedge .mod-dedge-trigger.is-active { background-color: rgba(0, 0, 0, .05); } .mod-dedge .mod-dedge-with-icon { display: inline-flex; align-items: center; gap: .375rem; } .mod-dedge .mod-dedge-icon { display: inline-flex; color: inherit; } /* Steppers in the guests/rooms popover */ .mod-dedge .mod-dedge-stepper { display: inline-flex; align-items: center; gap: .25rem; } .mod-dedge .mod-dedge-stepper-btn { width: 1.75rem; height: 1.75rem; padding: 0; line-height: 1.75rem; background: transparent; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; cursor: pointer; color: inherit; font-size: 1rem; } .mod-dedge .mod-dedge-stepper-btn:disabled { opacity: .35; cursor: not-allowed; } .mod-dedge .mod-dedge-stepper-value { display: inline-block; min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; } /* Room rows in the popover — subtle separator between rooms */ .mod-dedge .mod-dedge-room + .mod-dedge-room { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(0, 0, 0, .08); } .mod-dedge .mod-dedge-remove-room { color: rgba(0, 0, 0, .35); } .mod-dedge .mod-dedge-remove-room:hover { color: rgba(0, 0, 0, .7); } /* Promo accordion — chevron flip + smooth slide for the panel */ .mod-dedge .mod-dedge-promo-chevron { transition: transform .15s ease; } .mod-dedge .mod-dedge-promo-toggle.mod-dedge-promo-open .mod-dedge-promo-chevron { transform: rotate(180deg); } .mod-dedge .mod-dedge-promo-panel { overflow: hidden; max-height: 300px; opacity: 1; transition: max-height .25s ease, opacity .25s ease, margin-top .25s ease; } .mod-dedge .mod-dedge-promo-panel.is-collapsed { max-height: 0; opacity: 0; margin-top: 0 !important; } /* flatpickr — selected and range cells use the primary color. The calendar is appended to (escaping the .mod-dedge wrapper), so we scope via the `.mod-dedge-cal` class added by the JS to fp.calendarContainer, plus we copy the --mod-dedge-primary CSS variable onto that container so it resolves for descendants. Only `background` and `border-color` are overridden, as per design spec. */ .flatpickr-calendar.mod-dedge-cal .flatpickr-day.selected, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.startRange, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.endRange, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.selected.inRange, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.startRange.inRange, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.endRange.inRange, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.selected:focus, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.startRange:focus, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.endRange:focus, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.selected:hover, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.startRange:hover, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.endRange:hover, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.startRange.prevMonthDay, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.endRange.prevMonthDay, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.startRange.nextMonthDay, .flatpickr-calendar.mod-dedge-cal .flatpickr-day.endRange.nextMonthDay { background: var(--mod-dedge-primary); border-color: var(--mod-dedge-primary); } /* Bridge the gap between an adjacent startRange + endRange pair — except when endRange wraps to the first cell of a row (nth-child 7n+1), where the shadow would bleed onto the wrong row. */ .flatpickr-calendar.mod-dedge-cal .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-calendar.mod-dedge-cal .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-calendar.mod-dedge-cal .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--mod-dedge-primary); } /* Popover sizing */ .mod-dedge .mod-dedge-popover { min-width: 18rem; }