rezervovator/assets/css/public.css

/*
* Public booking page.
*
* The customer's appearance settings come as CSS variables in style attributes
* (Colors::style in src/backend/color.rs, Appearance::banner_style in src/backend/data.rs),
* so nothing here is generated. The rules are scoped by .public-page, which wraps the public
* route and the preview in the appearance settings; the admin portal keeps its own colours.
* They override the colours that the vendor template hard-codes, and they set everything
* that assets/css/dark.css sets, so the preview looks the same in both admin themes.
******************************************************************************/

.public-page {
  --rz-primary: #696cff;
  --rz-bg: #f5f5f9;
  --rz-card: #ffffff;
  --rz-text: #566a7f;
  --rz-on-primary: #ffffff;
  --rz-scheme: light;

  /* Shades derived from the settings */
  --rz-body: color-mix(in srgb, var(--rz-text) 89%, var(--rz-card));
  --rz-muted: color-mix(in srgb, var(--rz-text) 50%, var(--rz-card));
  --rz-border: color-mix(in srgb, var(--rz-text) 22%, var(--rz-card));
  --rz-primary-hover: color-mix(in srgb, var(--rz-primary) 90%, var(--rz-on-primary));
  --rz-primary-shadow: color-mix(in srgb, var(--rz-primary) 40%, transparent);

  min-height: 100vh;
  color: var(--rz-body);
  background-color: var(--rz-bg);
  color-scheme: var(--rz-scheme);
}

/* Preview in the appearance settings */
.public-page.public-preview {
  min-height: 0;
  border: 1px solid var(--rz-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Typography */

.public-page h1, .public-page h2, .public-page h3,
.public-page h4, .public-page h5, .public-page h6 {
  color: var(--rz-text);
}

.public-page a {
  color: var(--rz-primary);
}

.public-page a:hover {
  color: var(--rz-primary-hover);
}

/* Cards and dialogs */

.public-page .card {
  background-color: var(--rz-card);
  border-color: var(--rz-border);
  box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.public-page .modal-content {
  color: var(--rz-body);
  background-color: var(--rz-card);
  box-shadow: 0 2px 20px 0 rgba(67, 89, 113, 0.45);
}

/* Forms */

.public-page .form-label,
.public-page .form-check-label {
  color: var(--rz-text);
}

.public-page .form-control {
  color: var(--rz-body);
  background-color: var(--rz-card);
  border-color: var(--rz-border);
}

.public-page .form-control::placeholder {
  color: var(--rz-muted);
}

.public-page .form-control:focus {
  color: var(--rz-body);
  background-color: var(--rz-card);
  border-color: var(--rz-primary);
  box-shadow: 0 0 0.25rem 0.05rem color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.public-page .form-check-input:not(:checked) {
  background-color: var(--rz-card);
  border-color: var(--rz-border);
}

.public-page .form-check-input:focus {
  border-color: var(--rz-primary);
  box-shadow: 0 2px 4px 0 var(--rz-primary-shadow);
}

.public-page .form-check-input:checked {
  background-color: var(--rz-primary);
  border-color: var(--rz-primary);
  box-shadow: 0 2px 4px 0 var(--rz-primary-shadow);
}

/* Buttons */

.public-page .btn-primary {
  color: var(--rz-on-primary);
  background-color: var(--rz-primary);
  border-color: var(--rz-primary);
  box-shadow: 0 0.125rem 0.25rem 0 var(--rz-primary-shadow);
}

.public-page .btn-primary:hover,
.public-page .btn-primary:focus {
  color: var(--rz-on-primary);
  background-color: var(--rz-primary-hover);
  border-color: var(--rz-primary-hover);
}

.public-page .btn-outline-secondary {
  color: var(--rz-body);
  border-color: var(--rz-muted);
}

.public-page .btn-outline-secondary:hover,
.public-page .btn-outline-secondary:focus {
  color: var(--rz-card);
  background-color: var(--rz-body);
  border-color: var(--rz-body);
}

/* Time slots: a hidden checkbox followed by its label */

.public-page .btn-outline-primary {
  color: var(--rz-primary);
  border-color: var(--rz-primary);
  background: transparent;
}

.public-page .btn-outline-primary:hover,
.public-page .btn-check:checked + .btn-outline-primary {
  color: var(--rz-on-primary);
  background-color: var(--rz-primary);
  border-color: var(--rz-primary);
  box-shadow: 0 0.125rem 0.25rem 0 var(--rz-primary-shadow);
}

.public-page .btn-check:focus + .btn-outline-primary {
  border-color: var(--rz-primary-hover);
}

/* Captcha */

.public-page .leptos-captcha {
  color: var(--rz-body);
}

/* Banner */

.public-banner {
  height: 100px;
  clip-path: inset(0 0 0 0);
  background-image: var(--rz-banner-image, none);
  background-size: cover;
  padding: 30px;
  color: white;
}

/* Two classes, to win over the heading colour above */
.public-banner .public-banner-title {
  font-size: x-large;
  color: white;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
}

.public-banner-text {
  padding: 10px;
}

@media (min-width: 1200px) {
  .public-banner {
    height: 200px;
  }

  .public-banner .public-banner-title {
    font-size: xxx-large;
  }
}

/* The preview is narrow whatever the width of the window */
.public-preview .public-banner {
  height: 100px;
}

.public-preview .public-banner .public-banner-title {
  font-size: x-large;
}