whensday-calendar-lib/dist/index.css

A flexible calendar library with Whensday/Gregorian calendar systems, event management, and customizable UI components

.whensday-calendar{background-color:var(--calendar-background,#111827);border-radius:var(--calendar-border-radius-lg,.75rem);color:var(--calendar-text,#f9fafb);font-family:var(--calendar-font-primary,"Inter, system-ui, sans-serif");overflow:hidden}.calendar-container,.whensday-calendar{display:flex;flex-direction:column;height:100%}.calendar-container{flex:1}.calendar-header{background-color:var(--calendar-surface,#1f2937);border-bottom:1px solid var(--calendar-border,#374151);flex-shrink:0;padding:var(--calendar-spacing-md,1rem)}.calendar-header-top{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--calendar-spacing-md,1rem)}.calendar-title{font-size:1.5rem;font-weight:700;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-year{color:var(--calendar-text-secondary,#9ca3af);font-weight:400}.calendar-system-toggle{background-color:var(--calendar-surface,#1f2937);border:1px solid var(--calendar-border,#374151);border-radius:var(--calendar-border-radius-md,.5rem);color:var(--calendar-text,#f9fafb);cursor:pointer;flex-shrink:0;font-weight:700;padding:var(--calendar-spacing-sm,.5rem) var(--calendar-spacing-md,1rem);transition:all .2s ease}.calendar-system-toggle:hover{background-color:var(--calendar-accent,#f59e0b);border-color:var(--calendar-accent,#f59e0b)}.calendar-header-bottom{align-items:center;display:flex;justify-content:space-between}.calendar-navigation{align-items:center;display:flex;gap:var(--calendar-spacing-xs,.25rem)}.calendar-nav-button{align-items:center;background:none;border:none;border-radius:50%;color:var(--calendar-text-secondary,#9ca3af);cursor:pointer;display:flex;justify-content:center;padding:var(--calendar-spacing-sm,.5rem);transition:all .2s ease}.calendar-nav-button:hover{background-color:var(--calendar-surface,#1f2937);color:var(--calendar-text,#f9fafb)}.calendar-nav-button svg{height:1.25rem;width:1.25rem}.calendar-today-button{background-color:var(--calendar-surface,#1f2937);border:none;border-radius:var(--calendar-border-radius-md,.5rem);color:var(--calendar-text,#f9fafb);cursor:pointer;font-size:.875rem;font-weight:600;margin:0 var(--calendar-spacing-xs,.25rem);padding:var(--calendar-spacing-xs,.25rem) var(--calendar-spacing-sm,.5rem);transition:all .2s ease}.calendar-today-button:hover{background-color:var(--calendar-accent,#f59e0b)}.calendar-view-toggles{align-items:center;background-color:var(--calendar-background,#111827);border-radius:var(--calendar-border-radius-lg,.75rem);display:flex;gap:var(--calendar-spacing-xs,.25rem);padding:var(--calendar-spacing-xs,.25rem)}.calendar-view-button{border:none;border-radius:var(--calendar-border-radius-md,.5rem);cursor:pointer;font-size:.875rem;font-weight:600;padding:var(--calendar-spacing-xs,.25rem) var(--calendar-spacing-sm,.5rem);text-transform:capitalize;transition:all .2s ease}.calendar-view-button-active{background-color:var(--calendar-accent,#f59e0b);color:#fff}.calendar-view-button-inactive{background-color:var(--calendar-surface,#1f2937);color:var(--calendar-text-secondary,#9ca3af)}.calendar-view-button-inactive:hover{background-color:var(--calendar-border,#374151)}.calendar-content{display:flex;flex:1;flex-direction:column;overflow:hidden}.calendar-month-view{display:flex;flex-direction:column;height:100%}.calendar-month-weekdays{background-color:var(--calendar-surface,#1f2937);border-bottom:1px solid var(--calendar-border,#374151);display:grid;grid-template-columns:repeat(7,1fr)}.calendar-month-weekday{border-right:1px solid var(--calendar-border,#374151);color:var(--calendar-text-secondary,#9ca3af);font-size:.875rem;font-weight:600;padding:var(--calendar-spacing-sm,.5rem);text-align:center}.calendar-month-weekday:last-child{border-right:none}.calendar-month-grid{display:grid;flex:1;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);min-height:0}.calendar-month-day{border-bottom:1px solid var(--calendar-border,#374151);border-right:1px solid var(--calendar-border,#374151);cursor:pointer;display:flex;flex-direction:column;min-height:120px;overflow:hidden;position:relative;transition:background-color .2s ease}.calendar-month-day:nth-child(7n){border-right:none}.calendar-month-day-current{background-color:var(--calendar-background,#111827)}.calendar-month-day-other{background-color:var(--calendar-border,#374151);opacity:.3}.calendar-month-day-today{background-color:var(--calendar-today,#f59e0b)!important;color:#fff}.calendar-month-day-dragging{background-color:var(--calendar-surface,#1f2937)!important}.calendar-month-day-header{align-items:flex-start;display:flex;flex-shrink:0;justify-content:space-between;padding:var(--calendar-spacing-xs,.25rem)}.calendar-month-schedule-pills{display:flex;gap:2px;height:12px}.calendar-month-schedule-pill{border-radius:3px;cursor:pointer;height:6px;transition:all .2s ease;width:16px}.calendar-month-schedule-pill:hover{transform:scale(1.25)}.calendar-month-day-info{align-items:center;display:flex;gap:var(--calendar-spacing-xs,.25rem)}.calendar-month-bonus-indicator,.calendar-month-holiday-indicator{color:var(--calendar-accent,#f59e0b);height:1.25rem;width:1.25rem}.calendar-month-bonus-indicator{color:#fbbf24}.calendar-month-day-number{font-size:1.125rem;font-weight:700;margin:0}.calendar-whensday-leap{background-color:var(--calendar-whensday-leap,#ec4899);border-radius:var(--calendar-border-radius-sm,.25rem);color:#fff;flex-shrink:0;font-size:.75rem;font-weight:700;margin:0 var(--calendar-spacing-xs,.25rem);padding:2px;text-align:center}.calendar-month-events{-ms-overflow-style:none;display:flex;flex:1;flex-direction:column;gap:2px;overflow-y:auto;padding:0 var(--calendar-spacing-xs,.25rem);scrollbar-width:none}.calendar-month-events::-webkit-scrollbar{display:none}.calendar-month-events-scrolled:before{background:linear-gradient(180deg,rgba(0,0,0,.2),transparent);content:"";height:4px;left:0;pointer-events:none;position:absolute;right:0;top:0}.calendar-event-pill{border-radius:var(--calendar-border-radius-sm,.25rem);color:#fff;cursor:pointer;flex-shrink:0;font-size:.75rem;font-weight:600;overflow:hidden;padding:2px 6px;text-overflow:ellipsis;transition:filter .2s ease;white-space:nowrap}.calendar-event-pill:hover{filter:brightness(1.25)}.calendar-task-pill{align-items:center;border-radius:var(--calendar-border-radius-sm,.25rem);cursor:pointer;display:flex;flex-shrink:0;font-size:.75rem;font-weight:600;gap:6px;padding:2px 6px;transition:filter .2s ease}.calendar-task-pill:hover{filter:brightness(1.25)}.calendar-task-checkbox{border-radius:50%;padding:2px;transition:background-color .2s ease}.calendar-task-checkbox:hover{background-color:rgba(0,0,0,.2)}.calendar-checkbox{border-radius:var(--calendar-border-radius-sm,.25rem);height:16px;pointer-events:none;width:14px}.calendar-task-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-task-completed{opacity:.7;text-decoration:line-through}.calendar-month-overflow{flex-shrink:0;padding:0 var(--calendar-spacing-xs,.25rem) var(--calendar-spacing-xs,.25rem)}.calendar-month-overflow-text{color:var(--calendar-text-secondary,#9ca3af);font-size:.75rem;font-weight:500}.calendar-week-view{background-color:var(--calendar-surface,#1f2937);display:flex;flex-direction:column;height:100%}.calendar-week-header{display:flex;flex-shrink:0}.calendar-week-header-spacer{flex-shrink:0;width:4rem}.calendar-week-header-days{display:grid;flex:1;grid-template-columns:repeat(7,1fr)}.calendar-week-day-header{border-bottom:1px solid var(--calendar-border,#374151);border-right:1px solid var(--calendar-border,#374151);transition:background-color .2s ease}.calendar-week-day-header:last-child{border-right:none}.calendar-week-day-header-dragging{background-color:var(--calendar-surface,#1f2937)}.calendar-week-day-header-content{align-items:center;display:flex;flex-direction:column;gap:var(--calendar-spacing-xs,.25rem);padding:var(--calendar-spacing-xs,.25rem);text-align:center}.calendar-schedule-pills{align-items:center;display:flex;gap:6px;height:12px;justify-content:center;padding:0 var(--calendar-spacing-xs,.25rem);width:100%}.calendar-schedule-pill{border-radius:3px;cursor:pointer;height:6px;transition:all .2s ease;width:16px}.calendar-schedule-pill:hover{transform:scale(1.25)}.calendar-week-day-info{align-items:center;display:flex;gap:var(--calendar-spacing-sm,.5rem);justify-content:center;padding-top:var(--calendar-spacing-xs,.25rem)}.calendar-bonus-indicator,.calendar-holiday-indicator{color:var(--calendar-accent,#f59e0b);height:1.25rem;width:1.25rem}.calendar-bonus-indicator{color:#fbbf24}.calendar-week-day-name{color:var(--calendar-text-secondary,#9ca3af);font-size:.75rem;text-transform:uppercase}.calendar-week-day-number{font-size:1.125rem;font-weight:700;margin:0}.calendar-week-day-today{color:var(--calendar-today,#f59e0b)}.calendar-all-day-events{display:flex;flex-direction:column;gap:2px;padding:var(--calendar-spacing-xs,.25rem)}.calendar-all-day-event{border-radius:var(--calendar-border-radius-sm,.25rem);color:#fff;cursor:pointer;font-size:.75rem;font-weight:600;overflow:hidden;padding:2px 8px;text-overflow:ellipsis;transition:filter .2s ease;white-space:nowrap}.calendar-all-day-event:hover{filter:brightness(1.25)}.calendar-week-timeline{flex:1;overflow-y:auto}.calendar-week-timeline-content{display:flex;min-height:100%;width:100%}.calendar-week-days{display:grid;flex:1;grid-template-columns:repeat(7,1fr)}.calendar-day-view{background-color:var(--calendar-surface,#1f2937);display:flex;flex-direction:column;height:100%}.calendar-day-view-header{display:flex;flex-shrink:0}.calendar-day-view-header-spacer{flex-shrink:0;width:4rem}.calendar-day-view-header-content{flex:1}.calendar-day-header{border-bottom:1px solid var(--calendar-border,#374151);border-right:1px solid var(--calendar-border,#374151);transition:background-color .2s ease}.calendar-day-header-dragging{background-color:var(--calendar-surface,#1f2937)}.calendar-day-header-content{align-items:center;display:flex;flex-direction:column;gap:var(--calendar-spacing-xs,.25rem);padding:var(--calendar-spacing-xs,.25rem);text-align:center}.calendar-day-info{align-items:center;display:flex;gap:var(--calendar-spacing-sm,.5rem);justify-content:center;padding-top:var(--calendar-spacing-xs,.25rem)}.calendar-day-name{color:var(--calendar-text-secondary,#9ca3af);font-size:.875rem;text-transform:uppercase}.calendar-day-number{font-size:1.25rem;font-weight:700;margin:0}.calendar-day-today{color:var(--calendar-today,#f59e0b)}.calendar-day-view-timeline{flex:1;overflow-y:auto}.calendar-day-view-timeline-content{display:flex;min-height:100%;width:100%}.calendar-day-view-column{display:grid;flex:1;grid-template-columns:1fr}.calendar-time-gutter{flex-shrink:0;padding-right:var(--calendar-spacing-sm,.5rem);padding-top:0;text-align:right;width:4rem}.calendar-time-slot{position:relative;transform:translateY(-.75rem)}.calendar-time-label{color:var(--calendar-text-secondary,#9ca3af);font-size:.75rem}.calendar-day-column{border-right:1px solid var(--calendar-border,#374151);cursor:pointer;position:relative;transition:background-color .2s ease}.calendar-day-column:last-child{border-right:none}.calendar-day-column-dragging{background-color:rgba(75,85,99,.5)}.calendar-schedule-background{inset:0;position:absolute}.calendar-hour-line{border-top:1px solid var(--calendar-border,#374151)}.calendar-events-container{inset:0;position:absolute}.calendar-event{cursor:pointer;padding:var(--calendar-spacing-xs,.25rem);position:absolute;transition:opacity .2s ease;width:100%;z-index:10}.calendar-event-dragging{opacity:.4}.calendar-event-content{border-radius:var(--calendar-border-radius-lg,.75rem);display:flex;flex-direction:column;height:100%;justify-content:flex-start;overflow:hidden;padding:var(--calendar-spacing-sm,.5rem);transition:filter .2s ease;width:100%}.calendar-event-content:hover{filter:brightness(1.25)}.calendar-event-title{color:#fff;font-family:var(--calendar-font-secondary,"Bangers, cursive");font-size:.875rem;letter-spacing:.05em}.calendar-event-time,.calendar-event-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-event-time{color:hsla(0,0%,100%,.8);font-size:.75rem}.calendar-event-ghost{opacity:.7;z-index:20}.calendar-event-ghost,.calendar-travel-time{padding:var(--calendar-spacing-xs,.25rem);pointer-events:none;position:absolute;width:100%}.calendar-travel-time{z-index:0}.calendar-travel-time-bar{border-radius:var(--calendar-border-radius-lg,.75rem);height:100%;width:100%}@media (max-width:768px){.calendar-header{padding:var(--calendar-spacing-sm,.5rem)}.calendar-title{font-size:1.25rem}.calendar-month-day{min-height:80px}.calendar-time-gutter,.calendar-week-header-spacer{width:3rem}.calendar-time-label{font-size:.625rem}}@media (max-width:480px){.calendar-header-bottom,.calendar-header-top{flex-direction:column;gap:var(--calendar-spacing-sm,.5rem)}.calendar-month-day{min-height:60px}.calendar-month-day-number{font-size:1rem}}