initial
This commit is contained in:
Martin Slachta
@@ -0,0 +1,3 @@
|
||||
# Styles
|
||||
|
||||
All stylesheet files are here. Each must have a `Rsv` prefix and be named in SnakeCase.
|
||||
@@ -0,0 +1,23 @@
|
||||
/* ─── Two-column admin layout (Forms page) ──────────────────────────────── */
|
||||
|
||||
/*#col-left { width: 30%; }
|
||||
#col-right { width: 70%; }*/
|
||||
|
||||
/* ─── Inline detail expand row (Reservations page) ──────────────────────── */
|
||||
|
||||
.rsv-detail-expand { padding: 1rem 1.5rem; }
|
||||
.rsv-detail-heading { margin: 0 0 0.5rem; }
|
||||
.rsv-detail-empty { margin-bottom: 1rem; }
|
||||
.rsv-detail-table { margin-bottom: 1rem; }
|
||||
.rsv-detail-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
|
||||
|
||||
/* ─── Action buttons ─────────────────────────────────────────────────────── */
|
||||
|
||||
.rsv-btn-refuse { color: #b32d2e; }
|
||||
|
||||
/* ─── Form-values key/value table ────────────────────────────────────────── */
|
||||
|
||||
/* Depth-based indent: JS sets --rsv-depth on the cell, CSS does the math. */
|
||||
.rsv-form-key { padding-left: calc(0.5rem + var(--rsv-depth, 0) * 1.5rem); }
|
||||
.rsv-form-key--group { font-weight: 600; }
|
||||
.rsv-form-val--null { color: #aaa; }
|
||||
@@ -0,0 +1,187 @@
|
||||
:root {
|
||||
--color-gray-50: oklch(0.985 0.002 247.839); --color-gray-100: oklch(0.967 0.003 264.542); --color-gray-200: oklch(0.928 0.006 264.531); --color-gray-300: oklch(0.872 0.01 258.338); --color-gray-400: oklch(0.707 0.022 261.325); --color-gray-500: oklch(0.551 0.027 264.364); --color-gray-600: oklch(0.446 0.03 256.802); --color-gray-700: oklch(0.373 0.034 259.733); --color-gray-800: oklch(0.278 0.033 256.848); --color-gray-900: oklch(0.21 0.034 264.665); --color-gray-950: oklch(0.13 0.028 261.692);
|
||||
|
||||
--container-bg: var(--color-gray-50);
|
||||
--border: 1px solid var(--color-gray-300);
|
||||
--hover-bg: var(--color-blue-300);
|
||||
--dimm-bg: var(--color-gray-200);
|
||||
--selected-bg: var(--color-blue-400);
|
||||
|
||||
--container-border-radius: 1rem;
|
||||
|
||||
--s-1: 0.25rem;
|
||||
--s-2: 0.5rem;
|
||||
--s-3: 1rem;
|
||||
--s-4: 1.5rem;
|
||||
--s-5: 3rem;
|
||||
|
||||
--color-blue-50: oklch(97% .014 254.604);
|
||||
--color-blue-100: oklch(93.2% .032 255.585);
|
||||
--color-blue-200: oklch(88.2% .059 254.128);
|
||||
--color-blue-300: oklch(80.9% .105 251.813);
|
||||
--color-blue-400: oklch(70.7% .165 254.624);
|
||||
--color-blue-500: oklch(62.3% .214 259.815);
|
||||
--color-blue-600: oklch(54.6% .245 262.881);
|
||||
--color-blue-700: oklch(48.8% .243 264.376);
|
||||
--color-blue-800: oklch(42.4% .199 265.638);
|
||||
--color-blue-900: oklch(37.9% .146 265.522);
|
||||
--color-blue-950: oklch(28.2% .091 267.935);
|
||||
|
||||
|
||||
--color-green-50: oklch(98.2% .018 155.826);
|
||||
--color-green-100: oklch(96.2% .044 156.743);
|
||||
--color-green-200: oklch(92.5% .084 155.995);
|
||||
--color-green-300: oklch(87.1% .15 154.449);
|
||||
--color-green-400: oklch(79.2% .209 151.711);
|
||||
--color-green-500: oklch(72.3% .219 149.579);
|
||||
--color-green-600: oklch(62.7% .194 149.214);
|
||||
--color-green-700: oklch(52.7% .154 150.069);
|
||||
--color-green-800: oklch(44.8% .119 151.328);
|
||||
--color-green-900: oklch(39.3% .095 152.535);
|
||||
--color-green-950: oklch(26.6% .065 152.934);
|
||||
|
||||
--color-red-50: oklch(97.1% .013 17.38);
|
||||
--color-red-100: oklch(93.6% .032 17.717);
|
||||
--color-red-200: oklch(88.5% .062 18.334);
|
||||
--color-red-300: oklch(80.8% .114 19.571);
|
||||
--color-red-400: oklch(70.4% .191 22.216);
|
||||
--color-red-500: oklch(63.7% .237 25.331);
|
||||
--color-red-600: oklch(57.7% .245 27.325);
|
||||
--color-red-700: oklch(50.5% .213 27.518);
|
||||
--color-red-800: oklch(44.4% .177 26.899);
|
||||
--color-red-900: oklch(39.6% .141 25.723);
|
||||
--color-red-950: oklch(25.8% .092 26.042);
|
||||
}
|
||||
|
||||
|
||||
rsv-reservation-selector {
|
||||
border: var(--border);
|
||||
border-radius: var(--container-border-radius);
|
||||
}
|
||||
|
||||
/* ----- Widget shell ----- */
|
||||
/*.widget {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 2px 24px rgba(0, 0, 0, .07);
|
||||
overflow: hidden;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
|
||||
.widget-header {
|
||||
padding: 22px 28px 18px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.02em;
|
||||
}
|
||||
|
||||
.widget-subtitle {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.widget-body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.widget-calendar {
|
||||
flex: 1;
|
||||
padding: 20px 24px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.widget-slots {
|
||||
width: 240px;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.widget-form {
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
/* Nav arrows (prev / next month) */
|
||||
.rsv-cal-btn-nav {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background .12s;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.rsv-cal-btn-nav {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rsv-cal-btn-nav:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* WIDGET START */
|
||||
|
||||
.reservation-list {
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
background-color: #f6f7f7;
|
||||
margin: 0 -12px 6px -12px;
|
||||
}
|
||||
|
||||
.reservation-list li {
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
color: #2c3338;
|
||||
box-shadow: inset 0 1px 0 rgba(0,0,0,.06);
|
||||
}
|
||||
|
||||
.reservation-list li:hover .row-actions {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.reservation-list .row-actions {
|
||||
margin: 3px 0 0;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* WIDGET END */
|
||||
|
||||
.rsv-success-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rsv-reset-button {
|
||||
border: 1.5px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
font-family: var(--wp--preset--font-family--manrope);
|
||||
}
|
||||
@@ -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