@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Space+Grotesk:wght@400;600;700&display=swap"); /*@import "calendarboard.css";*/ /* * { margin: 0; padding: 0; box-sizing: border-box; } */ body { font-family:"DM Sans", 'Verdana', sans-serif !important; background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url(../wm.svg); background-color: aliceblue; background-size: cover; background-attachment: fixed; display: grid; grid-template-rows: auto auto 1fr auto; } .sl-app a { text-decoration: none; } .sl-app .page-footer a { color: #1f4fd1; } /* Bootstrap 5.3's reboot sets an unlayered `color` on h1–h6 (var(--bs-heading-color), default `inherit` → body color). Unlayered rules beat sl_components' layered `.sl-page-title`/`.sl-drawer__title`, which made sl headings invisible in dark mode. Re-assert here (unlayered) so the design-system heading colors win. Tokens resolve per theme, so this is correct in both light and dark. */ .sl-app .sl-page-title, .sl-app .sl-drawer__title { color: var(--sl-text-strong); } /* Same cascade problem for Bootstrap *components* used inside sl surfaces: .nav-link, .dropdown-menu, .form-label etc. carry unlayered Bootstrap colors/ backgrounds that beat the layered sl_components rules — worst-visible in dark (white dropdowns, dark-on-dark topbar text & form labels). Re-assert the few clobbered properties here (unlayered, higher specificity than the Bootstrap class). Tokens/values mirror sl_components. */ /* Topbar nav links (carry Bootstrap .nav-link). NB: .sl-app IS the , so dark rules use body[data-theme="dark"] .X (not ... .sl-app .X). */ .sl-app .sl-topbar-link { color: #1f2937; } .sl-app .sl-topbar-link ion-icon { color: #6b7280; } .sl-app .sl-topbar-item.is-active > .sl-topbar-link, .sl-app .sl-topbar-item.is-active > .sl-topbar-link ion-icon { color: #2563eb; } body[data-theme="dark"] .sl-topbar-link { color: #93a1b3; } body[data-theme="dark"] .sl-topbar-link ion-icon { color: #7b8ca0; } body[data-theme="dark"] .sl-topbar-item.is-active > .sl-topbar-link, body[data-theme="dark"] .sl-topbar-item.is-active > .sl-topbar-link ion-icon { color: #2f6bff; } /* Topbar dropdown (carries Bootstrap .dropdown-menu white bg + .dropdown-item color) */ .sl-app .sl-topbar-menu { background: #ffffff; border-color: #e6e8ec; } .sl-app .sl-topbar-menu .dropdown-item { color: #1f2937; } .sl-app .sl-topbar-menu .dropdown-item:hover, .sl-app .sl-topbar-menu .dropdown-item:focus { background: #f3f6ff; color: #2563eb; } body[data-theme="dark"] .sl-topbar-menu { background: #121821; border-color: #232a36; } body[data-theme="dark"] .sl-topbar-menu .dropdown-item { color: #93a1b3; } body[data-theme="dark"] .sl-topbar-menu .dropdown-item:hover, body[data-theme="dark"] .sl-topbar-menu .dropdown-item:focus { background: rgba(47, 107, 255, 0.08); color: #e6edf3; } /* Bootstrap form labels (render_form) on dark sl surfaces */ body[data-theme="dark"] .sl-page-surface label, body[data-theme="dark"] .sl-page-surface .form-label, body[data-theme="dark"] .sl-page-surface .form-check-label { color: var(--sl-text-primary); } body[data-theme="dark"] .sl-page-surface .form-control, body[data-theme="dark"] .sl-page-surface .form-select { background-color: #121821; border-color: #2b3648; color: var(--sl-text-primary); } body[data-theme="dark"] .sl-page-surface .form-control:focus, body[data-theme="dark"] .sl-page-surface .form-select:focus { background-color: #121821; border-color: var(--sl-color-brand-600); color: var(--sl-text-primary); box-shadow: 0 0 0 0.2rem rgba(47, 107, 255, 0.18); } body[data-theme="dark"] .sl-page-surface .form-control::placeholder { color: var(--sl-text-muted); } /* Bootstrap tabs inside sl_page need explicit theme colors because .nav-tabs and .nav-link rules are unlayered and otherwise leave light active tabs. */ body[data-theme="dark"] .sl-page-surface .nav-tabs { border-bottom-color: rgba(99, 122, 164, 0.18); } body[data-theme="dark"] .sl-page-surface .nav-tabs .nav-link { background: transparent; border-color: transparent; color: var(--sl-text-muted); } body[data-theme="dark"] .sl-page-surface .nav-tabs .nav-link:hover, body[data-theme="dark"] .sl-page-surface .nav-tabs .nav-link:focus { border-color: rgba(99, 122, 164, 0.18); color: var(--sl-text-primary); } body[data-theme="dark"] .sl-page-surface .nav-tabs .nav-link.active { background: #121821; border-color: rgba(99, 122, 164, 0.22); border-bottom-color: #121821; color: var(--sl-text-strong); } /* Legacy global table rules in this file target bare `th`/`td` and Bootstrap tables. Re-assert sl table surfaces unlayered so they keep design-system colors in both themes. */ .sl-app .sl-page-surface .sl-table-wrap { background: transparent; border-color: rgba(0, 0, 0, 0.06); } .sl-app .sl-page-surface .sl-table, .sl-app .sl-page-surface .sl-table tbody, .sl-app .sl-page-surface .sl-table tr { background: transparent; } .sl-app .sl-page-surface .sl-table th { background: rgba(0, 0, 0, 0.02); border-bottom-color: rgba(0, 0, 0, 0.06); color: var(--sl-text-muted); } .sl-app .sl-page-surface .sl-table td { background: transparent; border-bottom-color: rgba(0, 0, 0, 0.04); color: var(--sl-text-primary); } body[data-theme="dark"] .sl-page-surface .sl-table-wrap { border-color: rgba(99, 122, 164, 0.18); } body[data-theme="dark"] .sl-page-surface .sl-table th { background: rgba(255, 255, 255, 0.03); border-bottom-color: rgba(99, 122, 164, 0.18); color: rgba(236, 243, 255, 0.7); } body[data-theme="dark"] .sl-page-surface .sl-table td { background: transparent; border-bottom-color: rgba(99, 122, 164, 0.1); color: rgba(236, 243, 255, 0.85); } body[data-theme="dark"] .sl-page-surface .sl-table tbody tr:hover { background: rgba(151, 181, 255, 0.16); } /* React workspaces mount inside sl_page but still emit Bootstrap and MUI surfaces. Keep those controls/tables dark without depending on CSS-module generated class names. */ body[data-theme="dark"] #react-root { color: var(--sl-text-primary); } body[data-theme="dark"] #react-root .text-muted { color: var(--sl-text-muted) !important; } body[data-theme="dark"] #react-root .form-control, body[data-theme="dark"] #react-root .form-select { background-color: #121821; border-color: #2b3648; color: var(--sl-text-primary); } body[data-theme="dark"] #react-root .form-control:focus, body[data-theme="dark"] #react-root .form-select:focus { background-color: #121821; border-color: var(--sl-color-brand-600); color: var(--sl-text-primary); box-shadow: 0 0 0 0.2rem rgba(47, 107, 255, 0.18); } body[data-theme="dark"] #react-root .dropdown-menu { background: #121821; border-color: #2b3648; } body[data-theme="dark"] #react-root .dropdown-item { color: var(--sl-text-primary); } body[data-theme="dark"] #react-root .dropdown-item:hover, body[data-theme="dark"] #react-root .dropdown-item:focus { background: rgba(47, 107, 255, 0.12); color: var(--sl-text-strong); } body[data-theme="dark"] #react-root .list-group-item { background-color: #121821; border-color: #2b3648; color: var(--sl-text-primary); } body[data-theme="dark"] #react-root .list-group-item small, body[data-theme="dark"] #react-root .list-group-item p { color: var(--sl-text-muted); } body[data-theme="dark"] #react-root [class*="leftColumn"], body[data-theme="dark"] #react-root [class*="rightColumn"], body[data-theme="dark"] #react-root [class*="rightColumnsBonusArea"] { background-color: transparent; border-color: rgba(99, 122, 164, 0.18); color: var(--sl-text-primary); } body[data-theme="dark"] #react-root .table { --bs-table-bg: #121821; --bs-table-color: var(--sl-text-primary); --bs-table-border-color: rgba(99, 122, 164, 0.18); --bs-table-striped-bg: #17202d; --bs-table-striped-color: var(--sl-text-primary); --bs-table-hover-bg: rgba(151, 181, 255, 0.16); --bs-table-hover-color: var(--sl-text-strong); color: var(--sl-text-primary); } body[data-theme="dark"] #react-root .table th { background: #151d29; color: rgba(236, 243, 255, 0.78); } body[data-theme="dark"] #react-root .table td { color: var(--sl-text-primary); } body[data-theme="dark"] #react-root .MuiDataGrid-root { background: #121821 !important; border-color: rgba(99, 122, 164, 0.18) !important; color: var(--sl-text-primary) !important; } body[data-theme="dark"] #react-root .MuiDataGrid-columnHeaders, body[data-theme="dark"] #react-root .MuiDataGrid-columnHeader { background: #151d29 !important; border-color: rgba(99, 122, 164, 0.18) !important; color: rgba(236, 243, 255, 0.78) !important; } body[data-theme="dark"] #react-root .MuiDataGrid-columnHeaderTitle, body[data-theme="dark"] #react-root .MuiDataGrid-iconButtonContainer, body[data-theme="dark"] #react-root .MuiDataGrid-sortIcon, body[data-theme="dark"] #react-root .MuiDataGrid-menuIconButton, body[data-theme="dark"] #react-root .MuiDataGrid-cell { color: var(--sl-text-primary) !important; } body[data-theme="dark"] #react-root .MuiDataGrid-cell, body[data-theme="dark"] #react-root .MuiDataGrid-row { border-color: rgba(99, 122, 164, 0.12) !important; } body[data-theme="dark"] #react-root .MuiDataGrid-row:hover { background: rgba(151, 181, 255, 0.16) !important; } body[data-theme="dark"] #react-root .MuiDataGrid-footerContainer { background: #121821 !important; border-color: rgba(99, 122, 164, 0.18) !important; color: var(--sl-text-primary) !important; } body[data-theme="dark"] #react-root .MuiTablePagination-root, body[data-theme="dark"] #react-root .MuiInputBase-root, body[data-theme="dark"] #react-root .MuiSvgIcon-root { color: var(--sl-text-primary) !important; } /* Let the browser render native controls (number steppers, date-picker icons, checkboxes, scrollbars) in the active theme. Fixes light-on-dark native controls like input[type=number] steppers in dispatched. */ body { color-scheme: light; } body[data-theme="dark"] { color-scheme: dark; } /* Footer: the light glass footer must match the dark palette in dark mode. */ body[data-theme="dark"] .page-footer { background: rgba(15, 22, 38, 0.72); border-top-color: #232a36; color: var(--sl-text-muted); } body[data-theme="dark"] .page-footer a { color: var(--sl-color-brand-600); } .sidebar { position: -webkit-sticky; background-color: gainsboro; position: sticky; size: auto; top: 20vh; width: 15%; border-radius: 10px; /*border-style: 3px solid black;*/ border: 3px solid black; } .suche { margin-right: 20px; } .wellenstart { margin-left: 5px; } .actions { padding-top: 5px; } .myDropdownTable { display: none; position: absolute; width: 160px; background-color: honeydew; box-shadow: gray; z-index: 1; } .myDropdown { margin-top: auto; position: relative; display: inline-block; } .myDropdown:hover .myDropdownTable { display: block; } .ratio { font-size: smaller; } .mensch { width: 50px; } .highlightAvailable a { background-color: chartreuse !important; } .highlightTaken a { background-color: red !important; } .erfassen-button-fresh { margin-right: 30px; } .routeTable { border-style: solid 1px black; } .tablerow { max-height: fit-content; font-size: x-small; } td { font-size: small; } th { font-size: small; top: 0; position: sticky; background-color: darkgrey; } td th .payment_type { width: 10%; } td.payment_type select { width: 100%; } td.plannedkm { width: 2%; } td.maxkm { width: 2% } td.routenalenge { width: 2% } .table td, .table th { padding: .4rem !important; } table { font-family: "Verdana", sans-serif; background-color: inherit; } /* ALTERNATIVE DSP VIEW */ /* TARIFSS -------------- */ .rate-price { width: 100px; } .tariff-dashboard { position: relative; top: 0; left: 0; background-color: #e5e5e5; display: grid; grid-template-columns: 1fr 4fr 1fr; padding: 15px; } .left-panel { position: relative; background-color: darkgrey; } .right-panel { position: relative; background-color: darkgrey; } .middle { display: grid; grid-template-columns: 50% 50%; /* grid-template-rows: repeat(5, 1fr); */ grid-template-areas: 'a b'; /* 'a b' 'a b' 'a b' 'a b'; */ } .middle2 { padding: 20px; } .pricelist { display: none; padding: 10px; border: solid black 1px; } li:hover div.pricelist { display: block; position: absolute; left: 150px; top: 50px; padding: 10px; background-color: white; } .left-side li:hover { background-color: darkturquoise; } .banner { background-image: url("./pics/freshlogo.png"); background-size: 100% 100%; /* background-position: cover; */ /* background-color: aliceblue; */ } .heading-primary { font-weight: 700; display: inline-block; width: 95vw; padding: 1.5rem; margin-left: calc((100% - 95vw) / 2); margin-right: calc((100% - 95vw) / 2); text-align: center; background-color: rgba(#e5e5e5, .5); border-radius: .5rem; } /* #footer { position: relative; bottom:0; left:50%; transform: translate(-50%,-50%) } */ /* section ul { position:relative; left: 0; } .first-column:hover { display: grid; grid-template-columns: 1fr 1fr; width: 25%; border-top-right-radius: 2%; transition: 0.2s; } .first-column:hover section.sidemenu { visibility: visible; } .menu-items { list-style: none; margin-left: 0px; padding-left: 5px; } .menu-item { font-size: large; height: 2rem; width: 100%; border-radius: 1%; } .menu-item:hover { background-color: cornflowerblue; transform: translate(10px); transition: .2s; } .items { position: relative; z-index: 2; display:none; float: right; } */ .result-table { z-index: 1; font-size: small; position: fixed; bottom: -2rem; right: 6rem; color: white; background-color: black; border-radius: 3px; transition: all .5s ease-out; } .move-result-table { transform: translateY(-3rem); } .rotating { animation: rotating 2s linear infinite; } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .custom-height-form-field { height: 2.25rem; }