.crm-datepicker { position: relative; } .crm-date-trigger { cursor: pointer; } .crm-date-trigger.is-readonly { cursor: default; } .crm-date-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; } .crm-datetime-picker .crm-date-controls { grid-template-columns: minmax(0, 1.55fr) minmax(7.5rem, .85fr); } .crm-date-calendar { position: absolute; z-index: 1090; top: calc(100% + .35rem); left: 0; width: min(22rem, calc(100vw - 2rem)); padding: .8rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28); } .crm-date-calendar.is-portal { /* * Der Kalender wird für eine zuverlässige Positionierung direkt unter * verschoben. In Dialogen muss er deshalb über Modal, Dialog und * Backdrop liegen. */ z-index: 2100; } .crm-date-calendar-head { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; margin-bottom: .65rem; } .crm-date-title { text-align: center; } .crm-date-weekdays, .crm-date-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .22rem; } .crm-date-weekdays { margin-bottom: .25rem; color: var(--bs-secondary-color); font-size: .75rem; font-weight: 700; text-align: center; } .crm-date-day, .crm-date-empty { min-height: 2.25rem; } .crm-date-day { border: 1px solid transparent; border-radius: .45rem; background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-tertiary-bg)); color: var(--bs-body-color); } .crm-date-day:hover:not(.is-disabled), .crm-date-day:focus-visible:not(.is-disabled) { border-color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 22%, var(--bs-tertiary-bg)); } .crm-date-day.is-selected { border-color: var(--bs-primary); background: var(--bs-primary); color: #fff; font-weight: 700; } .crm-date-day.is-exception:not(.is-selected):not(.is-disabled) { border-color: color-mix(in srgb, var(--bs-warning) 72%, var(--bs-border-color)); background: color-mix(in srgb, var(--bs-warning) 25%, var(--bs-body-bg)); color: var(--bs-warning-text-emphasis); } .crm-date-day.is-disabled { cursor: not-allowed; background: color-mix(in srgb, var(--bs-secondary-color) 16%, var(--bs-body-bg)); color: var(--bs-secondary-color); opacity: .5; text-decoration: line-through; } .crm-date-actions { display: flex; align-items: center; gap: .75rem; justify-content: flex-end; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--bs-border-color); } .crm-date-exception-legend, .crm-date-unavailable-legend { display: inline-flex; align-items: center; gap: .35rem; color: var(--bs-secondary-color); font-size: .75rem; } .crm-date-clear { margin-left: auto; } .crm-date-exception-legend > span, .crm-date-unavailable-legend > span { width: .85rem; height: .85rem; border: 1px solid var(--bs-warning); border-radius: .25rem; background: color-mix(in srgb, var(--bs-warning) 25%, var(--bs-body-bg)); } .crm-date-unavailable-legend > span { border-color: var(--bs-secondary-color); background: color-mix(in srgb, var(--bs-secondary-color) 16%, var(--bs-body-bg)); opacity: .5; } @media (max-width: 575.98px) { .crm-datetime-picker .crm-date-controls { grid-template-columns: minmax(0, 1fr); } .crm-date-calendar { position: fixed; top: 50%; left: 50%; width: calc(100vw - 1.5rem); max-width: 24rem; transform: translate(-50%, -50%); } .crm-date-day, .crm-date-empty { min-height: 2.65rem; } }