vue3-calendar-component/dist/styles.css

A comprehensive Vue 3 Calendar component with Vuetify 3, TypeScript, and advanced features

.calendar-toolbar[data-v-ce23c6f9]{border-bottom:1px solid rgba(0,0,0,.12)}.calendar-title[data-v-ce23c6f9]{text-align:center;min-width:200px}.agenda-view[data-v-fde84cc6]{height:100%;display:flex;flex-direction:column;padding:16px}.agenda-header[data-v-fde84cc6]{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.12)}.agenda-content[data-v-fde84cc6]{flex:1;overflow-y:auto}.no-events[data-v-fde84cc6]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;text-align:center}.events-list[data-v-fde84cc6]{max-width:800px;margin:0 auto}.agenda-event[data-v-fde84cc6]{transition:transform .2s,box-shadow .2s;cursor:pointer}.agenda-event[data-v-fde84cc6]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026!important}.agenda-event.event-completed[data-v-fde84cc6]{opacity:.7}.agenda-event.event-completed .event-title[data-v-fde84cc6]{text-decoration:line-through}.agenda-event.event-cancelled[data-v-fde84cc6]{opacity:.5}.agenda-event.event-cancelled .event-title[data-v-fde84cc6]{text-decoration:line-through}.agenda-event.event-overdue[data-v-fde84cc6]{border-left-color:#f44336!important}.event-header[data-v-fde84cc6]{align-items:flex-start}.event-title[data-v-fde84cc6]{line-height:1.2}.event-subtitle[data-v-fde84cc6]{color:#000000b3;font-style:italic}.event-description[data-v-fde84cc6]{color:#000c;line-height:1.4}.event-metadata[data-v-fde84cc6]{margin-top:12px}.gap-2[data-v-fde84cc6]{gap:8px}.day-event[data-v-69ba6863]{border-radius:8px;padding:12px;font-size:.875rem;cursor:pointer;border:1px solid rgba(0,0,0,.1);transition:opacity .2s,transform .1s;box-shadow:0 2px 4px #0000001a}.day-event[data-v-69ba6863]:hover{opacity:.9}.day-event.event-completed .event-title[data-v-69ba6863]{text-decoration:line-through}.day-event[draggable=true][data-v-69ba6863]:hover{transform:scale(1.02);transition:transform .1s ease}.event-content[data-v-69ba6863]{height:100%;display:flex;flex-direction:column}.event-header[data-v-69ba6863]{display:flex;align-items:center;margin-bottom:4px}.event-title[data-v-69ba6863]{font-weight:600;line-height:1.2;flex:1}.event-subtitle[data-v-69ba6863]{font-size:.8rem;opacity:.9;line-height:1.2;margin-bottom:4px}.event-time[data-v-69ba6863]{font-size:.8rem;opacity:.9;margin-bottom:4px;font-weight:500}.event-location[data-v-69ba6863]{font-size:.75rem;opacity:.8;margin-bottom:4px;display:flex;align-items:center}.event-description[data-v-69ba6863]{font-size:.75rem;opacity:.8;line-height:1.3;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}.day-view[data-v-217d3814]{height:100%;min-height:500px;display:flex;flex-direction:column}.show-time-grid[data-v-217d3814]{grid-template-columns:60px 1fr}.hide-time-grid[data-v-217d3814]{grid-template-columns:1fr}.day-header[data-v-217d3814]{display:grid;border-bottom:2px solid rgba(0,0,0,.12);background-color:#f5f5f5}.time-column-header[data-v-217d3814]{border-right:1px solid rgba(0,0,0,.12)}.day-header-content[data-v-217d3814]{padding:16px;text-align:center;cursor:pointer}.day-header-content[data-v-217d3814]:hover{background-color:#0000000a}.day-header-content.today[data-v-217d3814]{background-color:#1976d20a}.day-header-content.weekend[data-v-217d3814]{background-color:#00000005}.day-name[data-v-217d3814]{font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em}.day-number[data-v-217d3814]{font-size:2rem;font-weight:500;margin:8px 0}.today .day-number[data-v-217d3814]{color:#1976d2}.day-month[data-v-217d3814]{font-size:.875rem;color:#0009}.day-body[data-v-217d3814]{flex:1;display:grid;overflow-y:hidden;min-height:0}@media (min-width: 1920px){.show-time-grid[data-v-217d3814]{grid-template-columns:80px 1fr}}.time-column[data-v-217d3814]{border-right:1px solid rgba(0,0,0,.12);background-color:#fafafa;min-height:100%;overflow:hidden}.time-slot[data-v-217d3814]{border-bottom:1px solid rgba(0,0,0,.06);position:relative;box-sizing:border-box}.time-label[data-v-217d3814]{position:absolute;top:-8px;right:8px;font-size:.75rem;color:#0009}.day-content[data-v-217d3814]{position:relative;cursor:pointer;min-height:100%}.day-content .time-slot[data-v-217d3814]{flex-shrink:0}.day-content[data-v-217d3814]:hover{background-color:#00000003}.day-content .time-slot[data-v-217d3814]{border-bottom:none}.day-content .time-slot.time-grid[data-v-217d3814]{border-bottom:1px solid rgba(0,0,0,.06)}.drag-highlight[data-v-217d3814]{background-color:#1976d21a!important;border:2px dashed rgba(25,118,210,.5)!important}.drag-highlight-slot[data-v-217d3814]{background-color:#1976d214!important;border:1px solid rgba(25,118,210,.3)!important}.month-event[data-v-73ce43ec]{padding:2px 6px;border-radius:3px;font-size:.75rem;line-height:1.2;cursor:pointer;display:flex;align-items:center;transition:opacity .2s}.month-event[data-v-73ce43ec]:hover{opacity:.8}.month-event.event-completed .event-title[data-v-73ce43ec]{text-decoration:line-through}.event-title[data-v-73ce43ec]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.month-event[draggable=true][data-v-73ce43ec]:hover{transform:scale(1.02);transition:transform .1s ease}.month-view[data-v-a30ad79d]{height:100%;display:flex;flex-direction:column}.month-header[data-v-a30ad79d]{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid rgba(0,0,0,.12);background-color:#f5f5f5}.month-header-day[data-v-a30ad79d]{padding:12px 8px;text-align:center;font-weight:500;text-transform:uppercase;font-size:.875rem}.month-grid[data-v-a30ad79d]{flex:1;display:flex;flex-direction:column}.month-week[data-v-a30ad79d]{display:grid;grid-template-columns:repeat(7,1fr);flex:1}.month-day[data-v-a30ad79d]{border-right:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);padding:8px;min-height:120px;cursor:pointer;position:relative}.month-day[data-v-a30ad79d]:hover{background-color:#0000000a}.month-day.other-month[data-v-a30ad79d]{background-color:#fafafa;color:#00000061}.month-day.today[data-v-a30ad79d]{background-color:#1976d20a}.month-day.weekend[data-v-a30ad79d]{background-color:#00000005}.day-number[data-v-a30ad79d]{font-weight:500;margin-bottom:4px}.today .day-number[data-v-a30ad79d]{background-color:#1976d2;color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.875rem}.day-events[data-v-a30ad79d]{display:flex;flex-direction:column;gap:2px}.drag-highlight[data-v-a30ad79d]{background-color:#1976d21a!important;border:2px dashed rgba(25,118,210,.5)!important}.week-event[data-v-13ca397d]{border-radius:4px;padding:4px 8px;font-size:.875rem;cursor:pointer;border:1px solid rgba(0,0,0,.1);transition:opacity .2s,transform .1s}.week-event[data-v-13ca397d]:hover{opacity:.9}.week-event.event-completed .event-title[data-v-13ca397d]{text-decoration:line-through}.event-content[data-v-13ca397d]{display:flex;align-items:flex-start;height:100%}.event-text[data-v-13ca397d]{flex:1;min-width:0}.event-title[data-v-13ca397d]{font-weight:500;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-subtitle[data-v-13ca397d]{font-size:.75rem;opacity:.8;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-time[data-v-13ca397d]{font-size:.75rem;opacity:.9;margin-top:2px}.week-event[draggable=true][data-v-13ca397d]:hover{transform:scale(1.02);transition:transform .1s ease}.week-view[data-v-81f49a20]{height:100%;min-height:500px;display:flex;flex-direction:column}.show-time-grid[data-v-81f49a20]{grid-template-columns:60px 1fr}.hide-time-grid[data-v-81f49a20]{grid-template-columns:1fr}.week-header.show-time-grid[data-v-81f49a20]{grid-template-columns:60px repeat(7,1fr)}.week-header.hide-time-grid[data-v-81f49a20]{grid-template-columns:repeat(7,1fr)}.week-header[data-v-81f49a20]{display:grid;border-bottom:2px solid rgba(0,0,0,.12);background-color:#f5f5f5}.time-column-header[data-v-81f49a20]{border-right:1px solid rgba(0,0,0,.12)}.day-header[data-v-81f49a20]{padding:12px 8px;text-align:center;cursor:pointer;border-right:1px solid rgba(0,0,0,.12)}.day-header[data-v-81f49a20]:hover{background-color:#0000000a}.day-header.today[data-v-81f49a20]{background-color:#1976d20a}.day-header.weekend[data-v-81f49a20]{background-color:#00000005}.day-name[data-v-81f49a20]{font-size:.875rem;font-weight:500;text-transform:uppercase}.day-number[data-v-81f49a20]{font-size:1.25rem;font-weight:500;margin-top:4px}.today .day-number[data-v-81f49a20]{background-color:#1976d2;color:#fff;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin:4px auto 0}.week-body[data-v-81f49a20]{flex:1;display:grid;overflow-y:auto;min-height:0}@media (min-width: 1920px){.week-header.show-time-grid[data-v-81f49a20]{grid-template-columns:80px repeat(7,1fr)}.week-body.show-time-grid[data-v-81f49a20]{grid-template-columns:80px 1fr}}.time-column[data-v-81f49a20]{border-right:1px solid rgba(0,0,0,.12);background-color:#fafafa;min-height:100%;overflow:hidden}.time-slot[data-v-81f49a20]{border-bottom:1px solid rgba(0,0,0,.06);position:relative;box-sizing:border-box}.show-time-grid .time-slot:first-child .time-label[data-v-81f49a20]{visibility:hidden}.time-label[data-v-81f49a20]{position:absolute;top:-8px;right:8px;font-size:.75rem;color:#0009}.days-container[data-v-81f49a20]{display:grid;grid-template-columns:repeat(7,1fr);min-height:100%;overflow:hidden}.day-column[data-v-81f49a20]{border-right:1px solid rgba(0,0,0,.12);position:relative;cursor:pointer;min-height:100%}.day-column .time-slot[data-v-81f49a20]{flex-shrink:0}.day-column[data-v-81f49a20]:hover{background-color:#00000005}.day-column.today[data-v-81f49a20]{background-color:#1976d205}.day-column.weekend[data-v-81f49a20]{background-color:#00000003}.day-column .time-slot[data-v-81f49a20]{border-bottom:none}.day-column .time-slot.time-grid[data-v-81f49a20]{border-bottom:1px solid rgba(0,0,0,.06)}.drag-highlight[data-v-81f49a20]{background-color:#1976d21a!important;border:2px dashed rgba(25,118,210,.5)!important}.drag-highlight-slot[data-v-81f49a20]{background-color:#1976d214!important;border:1px solid rgba(25,118,210,.3)!important}.calendar-component[data-v-811d71fb]{display:flex;flex-direction:column;height:100%;width:100%}.calendar-container[data-v-811d71fb]{flex:1;overflow:hidden;min-height:0;position:relative}.calendar-filters[data-v-04076b1f]{border:1px solid rgba(0,0,0,.12)}