.rsv-cal-month { font-size: 15px; font-weight: 600; } .rsv-cal-dow, .rsv-cal-header th { text-align: center; font-size: 11px; font-weight: 600; color: #999; padding: 4px 0 8px; text-transform: uppercase; letter-spacing: .04em; } .rsv-cal-cell { aspect-ratio: 1; /*border-radius: 50%;*/ font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s; color: #0f0f0f; user-select: none; } /* Days outside the current month */ .rsv-cal-cell-dimmed { color: #ccc; pointer-events: none; } /* Today's date — bold, no fill */ .rsv-cal-cell-today { font-weight: 700; } /* Selected date */ .rsv-calendar .rsv-cal-cell input:checked+label { background: #2563eb; color: #fff; } /* Hover (only meaningful on non-selected, non-dimmed cells) */ .rsv-cal-cell:hover:not(.cell-dimmed) label { background: #f0f4ff; color: #2563eb; } /* Past dates — visual only, pointer-events handled in JS */ .rsv-cal-cell-past { color: #ccc; pointer-events: none; } .rsv-cal-month { font-size: 15px; font-weight: 600; } .rsv-calendar { padding: 1rem; } .rsv-calendar table { font-size: 0.875rem; font-weight: 600; table-layout: fixed; border-collapse: separate; /*border-radius: var(--container-border-radius);*/ width: 100%; border-spacing: 0; overflow: hidden; } /* The component renders inside the host page (e.g. wp-admin in the form editor preview), whose form/table stylesheets restyle bare table cells and reveal the day radios that only carry the [hidden] attribute. Assert the calendar's own appearance here, scoped tightly enough to win that cascade. */ .rsv-calendar input[type="radio"] { display: none; } .rsv-calendar table, .rsv-calendar th, .rsv-calendar td { border: 0; background: none; } /*.calendar button { border: none; background-color: transparent; border-radius: var(--s-2); }*/ /*.calendar button:focus { border: none; outline: none; } .calendar button:hover { background-color: var(--hover-bg); }*/ .rsv-calendar button svg { vertical-align: middle; } .rsv-calendar tr { text-align: center; } .rsv-calendar th { padding: var(--s-2); color: gray; } .rsv-calendar .rsv-cal-controls { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .rsv-calendar th.rsv-cal-controls>* { flex-grow: 1; } .rsv-calendar td { -webkit-user-select:none;user-select:none; padding: 0; z-index: -1; } .rsv-calendar td label { display: block; padding: 0.25em; border-radius: var(--s-4); transition: background-color 0.3s ease; } /*.calendar td:hover label { background-color: var(--color-gray-100); }*/ .rsv-calendar td>div { background-color: white; padding: 0.5rem; transition: background-color 0.3s ease; } .rsv-calendar td.today { color: var(--selected); } .rsv-calendar td button { transition: background-color 0.3s ease; padding: 0.5rem; } /*.calendar td button:hover { cursor: pointer; background-color: var(--hover-bg); }*/ .rsv-calendar td.selected>div { position: relative; color: white; background-color: var(--color-blue-500); } .rsv-calendar td.dimm { /*background-color: var(--dimm-bg);*/ } .rsv-calendar tr:last-child>td { border-bottom: none; } .rsv-calendar tr>td:last-child { border-right: none; } .rsv-calendar td label { width: 100%; height: 100%; padding: 0; line-height: 2.4rem; margin: 0; } .rsv-calendar input[type="radio"]:checked+label { background-color: var(--color-blue-500); color: white; } .rsv-cal-cell.dimm { color: gray; } /* CALENDAR END */