rezervovator/assets/css/dark.css

/*
* Dark theme of the admin portal.
*
* The file is linked only from the admin portal (src/components/admin_portal.rs) and switched
* on and off with the media attribute of the link, so the rules are not scoped by any class.
* It overrides colours of the vendor template for the components the admin portal uses.
******************************************************************************/

:root {
  color-scheme: dark;

  --dark-bg: #232333;
  --dark-card: #2b2c40;
  --dark-text: #a3a4cc;
  --dark-heading: #cbcbe2;
  --dark-muted: #7071a4;
  --dark-border: #444564;
  --dark-hover: rgba(255, 255, 255, 0.06);

  --bs-body-bg: var(--dark-bg);
  --bs-body-bg-rgb: 35, 35, 51;
  --bs-body-color: var(--dark-text);
  --bs-body-color-rgb: 163, 164, 204;
}

/* Typography */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--dark-heading);
}

hr {
  color: var(--dark-border);
}

.text-muted {
  color: var(--dark-muted) !important;
}

/* Layout: side menu, navbar, footer */

.bg-menu-theme,
.bg-navbar-theme {
  background-color: var(--dark-card) !important;
  color: var(--dark-text);
}

.bg-footer-theme {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text);
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next,
.bg-navbar-theme .navbar-nav > .nav-link,
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link,
.bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link {
  color: var(--dark-text);
}

.bg-menu-theme .menu-link:hover,
.bg-menu-theme .menu-link:focus,
.bg-navbar-theme .navbar-nav > .nav-link:hover,
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link:hover,
.bg-navbar-theme .navbar-nav > .nav-item > .nav-link:focus {
  color: var(--dark-heading);
}

.bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover {
  background-color: var(--dark-hover);
}

.layout-navbar,
.layout-navbar h4 {
  color: var(--dark-heading);
}

.layout-menu,
.layout-navbar.navbar-detached {
  box-shadow: 0 0 0.375rem 0.25rem rgba(0, 0, 0, 0.2);
}

.layout-overlay {
  background: #000;
}

/* Year and month bar on the booking overview */

.filter-bar.bg-light {
  background-color: var(--dark-card) !important;
  border-radius: 0.5rem;
}

.filter-bar .nav-link {
  color: var(--dark-text);
}

/* Cards */

.card {
  background-color: var(--dark-card);
  border-color: var(--dark-border);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.card-link.disabled,
a.disabled {
  color: var(--dark-border);
}

/* Tables */

.table {
  --bs-table-striped-color: var(--dark-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-active-color: var(--dark-text);
  --bs-table-active-bg: rgba(255, 255, 255, 0.08);
  --bs-table-hover-color: var(--dark-text);
  --bs-table-hover-bg: var(--dark-hover);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

.table:not(.table-dark) th {
  color: var(--dark-heading);
}

.table > :not(:first-child) {
  border-top-color: var(--dark-border);
}

/* Forms */

.form-label,
.col-form-label,
.form-check-label {
  color: var(--dark-heading);
}

.form-control,
.form-select,
.input-group-text {
  color: var(--dark-heading);
  background-color: var(--dark-card);
  border-color: var(--dark-border);
}

.form-control::placeholder {
  color: var(--dark-muted);
}

.form-control:focus,
.form-select:focus {
  color: var(--dark-heading);
  background-color: var(--dark-card);
  border-color: #696cff;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--dark-bg);
}

.form-control[type="file"]::file-selector-button {
  color: var(--dark-heading);
  background-color: var(--dark-bg);
}

.form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--dark-border);
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3a4cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

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

/* Buttons */

.btn-outline-secondary {
  color: var(--dark-text);
  border-color: var(--dark-muted);
}

.btn-outline-secondary:hover {
  color: var(--dark-heading);
  background-color: var(--dark-hover);
  border-color: var(--dark-text);
}

.btn.p-0,
.btn:not([class*="btn-"]) {
  color: var(--dark-text);
}

/* Dropdown menus */

.dropdown-menu {
  color: var(--dark-text);
  background-color: var(--dark-card);
  border-color: var(--dark-border);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
}

.dropdown-item {
  color: var(--dark-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--dark-heading);
  background-color: var(--dark-hover);
}

.dropdown-divider {
  border-top-color: var(--dark-border);
}

/* Dialogs */

.modal-content {
  background-color: var(--dark-card);
  box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.5);
}

.modal .btn-close {
  background-color: var(--dark-border);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
}

/* Alerts */

.alert-danger {
  background-color: #55303a;
  border-color: #6b3540;
  color: #ff8a75;
}

/* Public booking form embedded in the "Create booking" dialog */

.leptos-captcha {
  color: var(--dark-text);
}