initial
This commit is contained in:
Martin Slachta
@@ -0,0 +1,187 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
/*.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;
|
||||
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 */
|
||||
@@ -0,0 +1,217 @@
|
||||
/* Primary CTA (submit / confirm) */
|
||||
.rsv-form-btn-primary {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
|
||||
border-radius: 1.375rem;
|
||||
font-size: 1rem;
|
||||
padding: 0 calc(1.25rem + 4px);
|
||||
line-height: 140%;
|
||||
height: 3.5rem;
|
||||
|
||||
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
transition: background .12s;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.rsv-form-btn-primary:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.rsv-form-btn-primary:disabled {
|
||||
background: #e0e0e0;
|
||||
color: #aaa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* FORM */
|
||||
.reservair-form {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
.rsv-form-input-short {
|
||||
max-width: 320px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/*.reservair-form button {
|
||||
padding: var(--s-3) !important;
|
||||
font-weight: 400 !important;
|
||||
}*/
|
||||
|
||||
/*.reservair-form button,*/
|
||||
.rsv-form-input {
|
||||
border: 1px solid var(--color-gray-300);
|
||||
outline: none;
|
||||
padding: var(--s-2);
|
||||
border-radius: var(--s-2);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-gray-50);
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
/*.reservair-form button,*/
|
||||
.rsv-form-input[type="submit"] {
|
||||
background-color: var(--color-blue-500);
|
||||
padding: 0.5rem;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.rsv-form-input[type="submit"]:hover {
|
||||
background-color: var(--color-blue-400);
|
||||
}
|
||||
|
||||
.reservair-form button.rsv-loading {
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.reservair-form button.rsv-loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: 2px solid white;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: rsv-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rsv-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.rsv-form-input:focus {
|
||||
box-shadow: 0 0 0 4px color-mix(in oklab,var(--color-blue-500)25%,transparent);
|
||||
border-color: var(--color-blue-500);
|
||||
}
|
||||
|
||||
.rsv-form-input input:user-invalid {
|
||||
border-color: var(--color-red-500);
|
||||
box-shadow: 0 0 0 4px color-mix(in oklab,var(--color-red-500)25%,transparent);
|
||||
}
|
||||
|
||||
.rsv-form-section {
|
||||
margin-bottom: var(--s-5);
|
||||
}
|
||||
|
||||
.rsv-form-input-group>* {
|
||||
margin-bottom: var(--s-1);
|
||||
}
|
||||
|
||||
.rsv-form-input-group {
|
||||
margin-bottom: var(--s-4);
|
||||
}
|
||||
|
||||
.rsv-form-label,
|
||||
.rsv-form-small {
|
||||
padding-left: 5pt;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rsv-form-small {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
/*.confirmation small {
|
||||
color: var(--color-gray-500);
|
||||
}*/
|
||||
|
||||
.rsv-error-summary {
|
||||
background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
|
||||
border: 1px solid var(--color-red-400);
|
||||
border-radius: var(--s-2);
|
||||
padding: var(--s-2) var(--s-3);
|
||||
margin-bottom: var(--s-3);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-red-800);
|
||||
}
|
||||
|
||||
.rsv-error-summary ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.rsv-field-error {
|
||||
display: block;
|
||||
color: var(--color-red-600);
|
||||
font-size: 0.8rem;
|
||||
margin-top: var(--s-1);
|
||||
padding-left: 5pt;
|
||||
}
|
||||
|
||||
.rsv-invalid {
|
||||
border-color: var(--color-red-500) !important;
|
||||
box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-red-500) 25%, transparent) !important;
|
||||
}
|
||||
|
||||
.rsv-success-message {
|
||||
text-align: center;
|
||||
padding: var(--s-5);
|
||||
color: var(--color-green-700);
|
||||
}
|
||||
|
||||
.rsv-success-message p {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.mesg {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1rem;
|
||||
margin-top: var(--s-5);
|
||||
margin-bottom: var(--s-5);
|
||||
padding: var(--s-4) 0;
|
||||
}
|
||||
|
||||
.success-mesg-icon {
|
||||
}
|
||||
|
||||
.mesg-icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: var(--s-2);
|
||||
border-radius: 50%;
|
||||
color: #00000094;
|
||||
}
|
||||
|
||||
.error-mesg svg {
|
||||
background-color: var(--color-red-200);
|
||||
}
|
||||
|
||||
.success-mesg svg {
|
||||
background-color: rgba(0, 201, 80, 0.36);
|
||||
}
|
||||
/* FORM END */
|
||||
|
||||
.rsv-timetable-selector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rsv-timetable-selector {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/* ----- Summary (selected slots + price) ----- */
|
||||
rsv-reservation-summary {
|
||||
display: block;
|
||||
margin-bottom: var(--s-4);
|
||||
}
|
||||
|
||||
rsv-reservation-summary {
|
||||
padding: 14px 20px;
|
||||
background: #f8faff;
|
||||
border: 1px solid #e8f0fe;
|
||||
border-radius: 1.375rem;
|
||||
|
||||
box-sizing: border-box;
|
||||
max-width: 320px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.rsv-summary-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rsv-summary-title {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #2563eb;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.rsv-summary-clear {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #aaa;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rsv-summary-clear:hover { color: #e53e3e; }
|
||||
|
||||
.rsv-summary-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.rsv-summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
border: 1.5px solid #e8f0fe;
|
||||
border-radius: 10px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.rsv-summary-item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.rsv-summary-item-date {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.rsv-summary-item-time {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
|
||||
.rsv-summary-item-price {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.rsv-summary-item-remove {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: #f0f0f0;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
transition: all .12s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rsv-summary-item-remove:hover {
|
||||
background: #fee2e2;
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.rsv-summary-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #e8f0fe;
|
||||
}
|
||||
|
||||
.rsv-summary-count {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.rsv-summary-price {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0f0f0f;
|
||||
letter-spacing: -.02em;
|
||||
}
|
||||
|
||||
.rsv-summary-price span {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
margin-left: 2px;
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
/* TIME SLOTS */
|
||||
.rsv-time-slots {
|
||||
padding: 1rem;
|
||||
border-left: var(--border);
|
||||
}
|
||||
|
||||
.rsv-slots-notice {
|
||||
display: block;
|
||||
text-align: center;
|
||||
grid-column-start: 0;
|
||||
grid-column-end: 1;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.rsv-slots-slot-time {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem;
|
||||
-webkit-user-select:none;user-select:none;
|
||||
}
|
||||
|
||||
.rsv-slots-slot-time>.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.rsv-slots-slot-time .capacity {
|
||||
font-size: 1rem;
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
|
||||
.rsv-slots-slot-time .capacity>* {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label.rsv-slots-slot-time>input:checked + .content>.capacity {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.reservation-block.blocked>.rsv-slots-slot-time>.content {
|
||||
opacity: 0.8;
|
||||
color: var(--color-gray-500);
|
||||
text-decoration: line-through;
|
||||
|
||||
}
|
||||
|
||||
.rsv-slots-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
margin-bottom: 12px;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.rsv-slots-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
list-style: none;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Base slot */
|
||||
.rsv-slots-slot {
|
||||
margin-top: 0.375rem;
|
||||
border: 1.5px solid #e8e8e8;
|
||||
border-radius: 10px;
|
||||
padding: 9px 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color .12s, background .12s, color .12s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rsv-slots-slot:hover:not(.rsv-slots-slot-full):not(.rsv-slots-slot-selected) {
|
||||
border-color: #2563eb;
|
||||
background: #f5f8ff;
|
||||
}
|
||||
|
||||
/* Available — plenty of spots */
|
||||
.rsv-slots-slot-available {
|
||||
background: #f0fdf4;
|
||||
border-color: #86efac;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
/* Few spots left */
|
||||
.rsv-slots-slot-few {
|
||||
background: #fff8f0;
|
||||
border-color: #f59e0b;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
/* Fully booked */
|
||||
.rsv-slots-slot-full {
|
||||
background: #fafafa;
|
||||
border-color: #e8e8e8;
|
||||
color: #bbb;
|
||||
text-decoration: line-through;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Selected */
|
||||
.rsv-slots-slot-selected {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Availability badge (small pill inside slot) */
|
||||
.rsv-slots-slot-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
.rsv-slots-slot-badge-available {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.rsv-slots-slot-badge-few {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.rsv-slots-slot-badge-full {
|
||||
background: #f3f4f6;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.rsv-slots-slot-badge-selected {
|
||||
background: rgba(255, 255, 255, .2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* TIMELINE END */
|
||||
Reference in New Issue
Block a user