t-fighting-design/theme/calendar.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-calendar{flex-direction:column;justify-content:center;align-items:center;cursor:default}.f-calendar__header{width:100%;background:#eee;display:flex;justify-content:space-between;align-items:center;padding:7px 10px;box-sizing:border-box}.f-calendar__header .f-calendar__time{display:flex;justify-content:center;align-items:center}.f-calendar__header .f-calendar__time .f-calendar__time-now{font-weight:700;color:#333}.f-calendar__header .f-calendar__option{display:flex;justify-content:space-between;align-items:center;min-width:250px}.f-calendar__header .f-calendar__option .f-calendar__last,.f-calendar__header .f-calendar__option .f-calendar__now,.f-calendar__header .f-calendar__option .f-calendar__next{margin:0 5px}.f-calendar__week{padding:0;margin:0;width:100%;list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.f-calendar__week .f-calendar__week-li{height:var(--f-calendar-week-height, 50px);box-sizing:border-box;padding:10px;display:flex;justify-content:center;align-items:center}.f-calendar__day{padding:0;margin:0;list-style:none;cursor:pointer;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.f-calendar__day .f-calendar__day-li{height:var(--f-calendar-day-height, 90px);box-sizing:border-box;padding:10px;display:flex;align-items:center;flex-direction:column;transition:.3s;overflow:auto;position:relative;border-top:3px solid transparent}.f-calendar__day .f-calendar__day-li:hover{background:rgb(247,247,247)}.f-calendar__day .f-calendar__day-li.f-calendar__day-li-last{color:#c6c6c6}.f-calendar__day .f-calendar__day-li .f-calendar__solar{font-size:15px}.f-calendar__day .f-calendar__day-li .f-calendar__lunar{font-size:14px}.f-calendar__day .f-calendar__day-li.f-calendar__day-today{color:#2d5af1;background:#dee5fd;border-top:3px solid #2d5af1;transition:.3s}.f-calendar__day .f-calendar__day-li.f-calendar__not-month{color:#cecece}.f-calendar__day .f-calendar__day-li .f-calendar__memorandum{position:absolute;height:26px;bottom:0px;right:0;left:0;overflow:auto;background:#fff;cursor:pointer;-ms-overflow-style:none;scrollbar-width:none;overflow-x:hidden;overflow-y:auto;transition:height .5s;padding:10px;box-sizing:border-box;box-shadow:0 -6px 12px #5b78d817}.f-calendar__day .f-calendar__day-li .f-calendar__memorandum::-webkit-scrollbar{display:none}.f-calendar__day .f-calendar__day-li .f-calendar__memorandum:hover{height:100%}.f-calendar__day .f-calendar__day-li .f-calendar__memorandum .f-calendar__memorandum-item{margin-bottom:8px;cursor:pointer}.f-calendar.f-calendar__border{border-top:1px solid var(--f-calendar-border-color, #eee);border-left:1px solid var(--f-calendar-border-color, #eee)}.f-calendar.f-calendar__border .f-calendar__header{border-right:1px solid var(--f-calendar-border-color, #eee)}.f-calendar.f-calendar__border .f-calendar__week{border-bottom:1px solid var(--f-calendar-border-color, #eee);border-top:1px solid var(--f-calendar-border-color, #eee)}.f-calendar.f-calendar__border .f-calendar__week .f-calendar__week-li{border-right:1px solid var(--f-calendar-border-color, #eee)}.f-calendar.f-calendar__border .f-calendar__day .f-calendar__day-li{border-right:1px solid var(--f-calendar-border-color, #eee);border-bottom:1px solid var(--f-calendar-border-color, #eee)}