Added dark theme to admin portal. Fixes #7
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,249 @@
|
||||
/*
|
||||
* 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);
|
||||
}
|
||||
Reference in New Issue
Block a user