vue3-mycalendar/dist/style.css

A calendar and scheduling package for Vue 3

.popup[data-v-f2be054c]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content[data-v-f2be054c]{background-color:#fff;padding:1rem;border-radius:5px;max-width:400px;width:100%}.popup-field[data-v-f2be054c]{margin-bottom:.5rem}.button-container[data-v-f2be054c]{margin-top:1rem;text-align:center}.close-button[data-v-f2be054c],.delete-button[data-v-f2be054c]{width:120px;background-color:#007bff;color:#fff;border:none;padding:.6rem;margin:.5rem 15px;cursor:pointer;border-radius:8px;font-size:1rem;font-weight:700;transition:background-color .3s ease,transform .2s ease;box-shadow:0 4px 6px #0000001a}.close-button[data-v-f2be054c]:hover,.delete-button[data-v-f2be054c]:hover{background-color:#0056b3;transform:scale(1.05)}.delete-button[data-v-f2be054c]{background-color:#e53e3e}.delete-button[data-v-f2be054c]:hover{background-color:#cc2e2e}.small-logo{width:20px;height:20px}.form-container{display:flex;flex-wrap:wrap;gap:var(--form-gap, 1rem);background-color:var(--form-bg-color);padding:var(--form-padding);border-radius:var(--form-border-radius);border:var(--form-border);margin-bottom:20px}.form-group{flex:1;min-width:200px;margin-bottom:10px}.form-label{display:block;color:var(--label-color);font-weight:var(--label-font-weight);margin-bottom:4px}.form-input,.form-select{width:100%;height:var(--input-height, 40px);padding:var(--input-padding);font-size:var(--input-font-size);border:var(--input-border);border-radius:var(--input-border-radius);box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.submit-button{background-color:var(--button-bg-color);color:var(--button-color);padding:var(--button-padding);border-radius:var(--button-border-radius);border:none;cursor:pointer;transition:background-color .3s ease;font-size:1rem}.submit-button:hover{background-color:var(--button-hover-bg-color)}.weekdays{list-style-type:none;display:flex;justify-content:center;align-items:center;padding:0;border-bottom:1px solid #ccc;margin:0;height:40px}.weekday{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-bottom:13px}.calendar{display:flex;flex-direction:column}.hours-and-days{display:flex;align-items:stretch}.hours{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:50px;height:100%}.hours .hour{min-height:40px;border-bottom:1px solid #ccc;display:flex;align-items:center;justify-content:center;box-sizing:border-box;flex-grow:1}.weekdays-container{display:flex;flex-direction:column;width:100%}.days{display:flex;flex-grow:1}.day{flex:1;border-left:1px solid #ccc;position:relative}.day .hour{min-height:40px;border-bottom:1px solid #ccc;display:flex;align-items:center;box-sizing:border-box;flex-grow:1}.event{background-color:#a4d8ff;padding:2px;font-size:12px;border-radius:8px;width:95%;box-sizing:border-box;position:absolute}.remove-button{background-color:#e53e3e;color:#fff;border:none;padding:.5rem 1rem;cursor:pointer;border-radius:5px;margin-top:1rem}.empty-slot{height:40px}.navigation{display:flex;justify-content:center;align-items:center;margin-bottom:2rem}.arrow-button{background-color:#007bff;color:#fff;border:none;padding:.5rem 1rem;cursor:pointer;border-radius:5px;margin:0 1rem}.current-week{font-size:1.2rem;font-weight:700}.info-button{position:absolute;top:2px;right:2px;background-color:transparent;border:none;color:#00f;font-weight:700;cursor:pointer}.popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{background-color:#fff;padding:1rem;border-radius:5px;max-width:400px;width:100%}.close-button{background-color:#007bff;color:#fff;border:none;padding:.5rem 1rem;cursor:pointer;border-radius:5px;margin-top:1rem}