premiumcalendar
Version:
A lightweight and customizable JavaScript + CSS calendar library for modern web applications.
1 lines • 3.49 kB
CSS
:root{--selected-color:#4f46e5;--button-bg:#4f46e5;--highlight-color:#4f46e5;--today-color:#22c55e;--border-color:#e5e7eb}.mmk-calendar-container{border-radius:1rem;max-width:400px;margin:auto;padding:1rem}.mmk-calendar-container .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}#MmktodayBtn,.mmk-calendar-container .calendar-header button{background:var(--button-bg);color:#fff;border:none;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;font-weight:700;transition:background .3s ease}.mmk-calendar-container .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}.mmk-calendar-container .day-name{font-weight:700;text-align:center;color:#6b7280}.mmk-calendar-container .day{text-align:center;padding:.5rem;cursor:pointer;border:1px solid var(--border-color)}.mmk-calendar-container .day.today{background-color:var(--today-color);color:#fff}.mmk-calendar-container .day.selected{background-color:var(--selected-color);color:#fff}.mmk-calendar-container .day.disabled{opacity:.4;pointer-events:none;background-color:#f3f4f6}.mmk-calendar-container .calendar-btn-align{margin-top:1rem;text-align:center}.mmk-calendar-container .in-range{background-color:var(--highlight-color);color:#fff;opacity:60%}.mmk-calendar-input{padding:.5rem .75rem;border:1px solid #ccc;border-radius:.5rem;font-size:1rem;width:120px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:all .2s ease}.mmk-calendar-input:focus{border-color:var(--highlight-color);outline:0;box-shadow:0 0 0 3px rgba(79,70,229,.2)}#MmkmonthSelect{background-color:#fff;cursor:pointer}.mmk-icon{width:20px;height:15px;display:block;background-size:contain;background-repeat:no-repeat;background-position:center}.left-chevron{background-image:url("https://cdn.malleeshkanna.com/mmkpremiumcalendar/assets/left-chevron.svg")}.right-chevron{background-image:url("https://cdn.malleeshkanna.com/mmkpremiumcalendar/assets/right-chevron.svg")}.calendar-grid.fade.fade-in{animation:fadein .3s ease}@keyframes fadein{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@media only screen and (max-width:440px){.mmk-calendar-input{width:62px}.mmk-calendar-container .day{font-size:10px}.mmk-calendar-container .day-name{font-size:12px}#MmktodayBtn,.mmk-calendar-container .calendar-header button{padding:10px}.mmk-calendar-container .calendar-header{gap:10px}#MmkmonthSelect{font-size:10px}input#yearInput{font-size:10px}}.dark{--border-color:#374151;background-color:#111827;color:#f9fafb}.dark .mmk-calendar-container{background-color:#1f2937;color:#f9fafb}.dark #MmktodayBtn,.dark .mmk-calendar-container .calendar-header button{background:var(--button-bg);color:#fff}.dark .mmk-calendar-container .calendar-grid{background-color:#1f2937}.dark .mmk-calendar-container .day-name{color:#9ca3af}.dark .mmk-calendar-container .day{background-color:transparent;border:1px solid var(--border-color);color:#e5e7eb}.dark .mmk-calendar-container .day.today{background-color:var(--today-color);color:#fff}.dark .mmk-calendar-container .day.selected{background-color:var(--selected-color);color:#fff}.dark .day.disabled{background-color:#fefeff;opacity:.3;color:#000}.dark .mmk-calendar-input{background-color:#1f2937;color:#f9fafb;border:1px solid var(--border-color)}.dark .mmk-calendar-input:focus{border-color:var(--highlight-color);box-shadow:0 0 0 3px rgba(129,140,248,.2)}.dark #MmkmonthSelect{background-color:#1f2937;color:#f9fafb}