vexip-ui/css/calendar-panel.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-calendar-vars{--vxp-calendar-index-color-hover:var(--vxp-content-color-base);--vxp-calendar-index-color-selected:var(--vxp-color-white);--vxp-calendar-index-color-outside:var(--vxp-content-color-disabled);--vxp-calendar-index-color-today:var(--vxp-color-primary-base);--vxp-calendar-index-color-disabled:var(--vxp-content-color-humble);--vxp-calendar-index-bg-color:transparent;--vxp-calendar-index-bg-color-week:transparent;--vxp-calendar-index-bg-color-hover:var(--vxp-color-primary-opacity-7);--vxp-calendar-index-bg-color-selected:var(--vxp-color-primary-base);--vxp-calendar-index-bg-color-disabled:var(--vxp-calendar-index-bg-color);--vxp-calendar-index-bg-color-today:var(--vxp-calendar-index-bg-color);--vxp-calendar-index-bg-color-outside:var(--vxp-calendar-index-bg-color);--vxp-calendar-index-b-width:0;--vxp-calendar-index-b-style:var(--vxp-border-style);--vxp-calendar-index-b-color:var(--vxp-border-color-base);--vxp-calendar-index-b-color-selected:var(--vxp-color-primary-opacity-2);--vxp-calendar-index-b-color-disabled:var(--vxp-border-color-opacity-2);--vxp-calendar-index-b-color-outside:var(--vxp-border-color-opacity-1);--vxp-calendar-index-width:100%;--vxp-calendar-index-height:auto;--vxp-calendar-index-border:var(--vxp-calendar-index-b-width) var(--vxp-calendar-index-b-style) var(--vxp-calendar-index-b-color);--vxp-calendar-index-radius:var(--vxp-radius-base);--vxp-calendar-range-bg-color:var(--vxp-color-primary-opacity-8);--vxp-calendar-range-opacity:60%}.vxp-calendar__panel{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;flex-direction:column;align-items:center;justify-content:center}.vxp-calendar__panel,.vxp-calendar__panel *,.vxp-calendar__panel ::after,.vxp-calendar__panel ::before{box-sizing:border-box}.vxp-calendar__panel--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-calendar__action{display:flex}.vxp-calendar__row{display:flex;padding:2px 0}.vxp-calendar__cell{display:flex;padding:0 2px}.vxp-calendar__index{position:relative;display:flex;align-items:center;justify-content:center;width:var(--vxp-calendar-index-width);height:var(--vxp-calendar-index-height);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border-radius:var(--vxp-calendar-index-radius);outline:0}.vxp-calendar__index-inner{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--vxp-calendar-index-bg-color);border:var(--vxp-calendar-index-border);border-radius:var(--vxp-calendar-index-radius);transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-calendar__index--today .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-today);background-color:var(--vxp-calendar-index-bg-color-today);border-color:var(--vxp-calendar-index-b-color-today)}.vxp-calendar__index--next .vxp-calendar__index-inner,.vxp-calendar__index--prev .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-outside);background-color:var(--vxp-calendar-index-bg-color-outside);border-color:var(--vxp-calendar-index-b-color-outside)}.vxp-calendar__index--hovered .vxp-calendar__index-inner,.vxp-calendar__index:focus .vxp-calendar__index-inner,.vxp-calendar__index:hover .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-hover);background-color:var(--vxp-calendar-index-bg-color-hover);border-color:var(--vxp-calendar-index-b-color-hover)}.vxp-calendar__index--selected .vxp-calendar__index-inner,.vxp-calendar__index--selected.vxp-calendar__index--hovered .vxp-calendar__index-inner,.vxp-calendar__index--selected:focus .vxp-calendar__index-inner,.vxp-calendar__index--selected:hover .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-selected);background-color:var(--vxp-calendar-index-bg-color-selected);border-color:var(--vxp-calendar-index-b-color-selected)}.vxp-calendar__index--disabled .vxp-calendar__index-inner,.vxp-calendar__index--disabled.vxp-calendar__index--hovered .vxp-calendar__index-inner,.vxp-calendar__index--disabled:focus .vxp-calendar__index-inner,.vxp-calendar__index--disabled:hover .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-disabled);cursor:not-allowed;background-color:var(--vxp-calendar-index-bg-color-disabled);border-color:var(--vxp-calendar-index-b-color-disabled)}.vxp-calendar__index::before{position:absolute;inset:2px -2px;display:none;pointer-events:none;content:"";background-color:var(--vxp-calendar-range-bg-color);opacity:var(--vxp-calendar-range-opacity)}.vxp-calendar__index--in-range::before{display:block}.vxp-calendar__panel--select-row .vxp-calendar__index,.vxp-calendar__panel--select-row .vxp-calendar__index-inner{border-radius:0}.vxp-calendar__panel--select-row .vxp-calendar__cell{padding:0}.vxp-calendar__panel--select-row .vxp-calendar__cell:first-child .vxp-calendar__index,.vxp-calendar__panel--select-row .vxp-calendar__cell:first-child .vxp-calendar__index-inner{border-start-start-radius:var(--vxp-calendar-index-radius);border-end-start-radius:var(--vxp-calendar-index-radius)}.vxp-calendar__panel--select-row .vxp-calendar__cell:last-child .vxp-calendar__index,.vxp-calendar__panel--select-row .vxp-calendar__cell:last-child .vxp-calendar__index-inner{border-start-end-radius:var(--vxp-calendar-index-radius);border-end-end-radius:var(--vxp-calendar-index-radius)}.vxp-calendar__row--week .vxp-calendar__index{cursor:default}.vxp-calendar__row--week .vxp-calendar__index:hover{background-color:var(--vxp-calendar-index-bg-color-week)}.vxp-calendar__row--week .vxp-calendar__index::before,.vxp-calendar__row--week .vxp-calendar__index:hover::before{display:none;content:none}