/* ============================================================================
LIQUID GLASS SKIN — Apple-style translucent material system
----------------------------------------------------------------------------
One overlay stylesheet, loaded LAST (end of , media="screen").
Kill switch: remove its in _Layout.cshtml (and the standalone pages).
HARD RULES honoured by this file (do not violate when editing):
- PAINT ONLY. No width/height/margin/padding/position/display changes to
layout containers. No new z-index values anywhere.
- backdrop-filter ONLY on singleton floating chrome that is itself the
fixed/overlay element (topbar, sidebars, modals, dropdowns, pickers,
alerts). NEVER on body, #main-wrapper, .page-wrapper, .card or any
ancestor of position:fixed content (it would re-anchor the FAB and
.right-sidebar) and never on dense clinical surfaces (DataTables rows,
FullCalendar grid, odontogram, perio chart).
- Corporate accents are NOT restated as hex on surfaces. Neutral white
glass + CSS variables keep the Grand Artius gold tenant intact:
the host-gated block after this repoints --lg-accent* / --lg-tint*.
- .preloader stays opaque. .calendarContainer untouched. FullCalendar
sticky headers keep their opaque backgrounds.
- media="screen" on the keeps this file out of jquery.PrintArea's
print iframe; the @media print block below is belt-and-braces.
========================================================================== */
/* ------------------------------------------------------------------ tokens */
:root {
/* corporate accent (Grand Artius host overrides these variables) */
--lg-accent: #1976d2;
--lg-accent-rgb: 25, 118, 210;
--lg-accent-soft: #76b9da;
--lg-tint-rgb: 118, 185, 218;
/* glass material */
--lg-blur: 22px;
--lg-blur-heavy: 30px;
--lg-saturate: 165%;
--lg-white-thin: rgba(255, 255, 255, 0.68);
--lg-white: rgba(255, 255, 255, 0.78);
--lg-white-heavy: rgba(255, 255, 255, 0.86);
--lg-hairline: rgba(23, 43, 77, 0.10);
--lg-specular: rgba(255, 255, 255, 0.65);
/* depth */
--lg-shadow-sm: 0 1px 2px rgba(23, 43, 77, 0.06), 0 4px 12px rgba(23, 43, 77, 0.06);
--lg-shadow-md: 0 2px 6px rgba(23, 43, 77, 0.07), 0 12px 32px rgba(23, 43, 77, 0.10);
--lg-shadow-lg: 0 4px 12px rgba(23, 43, 77, 0.10), 0 24px 64px rgba(23, 43, 77, 0.16);
/* concentric radii */
--lg-radius-ctrl: 10px;
--lg-radius-panel: 14px;
--lg-radius-card: 16px;
--lg-radius-modal: 20px;
}
/* ------------------------------------------------- ambient refraction bed */
/* A soft corporate-tinted wash the glass can visibly refract, painted */
/* directly on body's background (we load last, so we override style.css */
/* body{#fff}). Pure background paint: no pseudo layers, no z-index, no */
/* filters on ancestors. .page-wrapper goes transparent so it shows through.*/
body {
background:
radial-gradient(1100px 620px at 85% -10%, rgba(var(--lg-tint-rgb), 0.50), transparent 62%),
radial-gradient(900px 600px at -10% 25%, rgba(var(--lg-accent-rgb), 0.20), transparent 58%),
radial-gradient(760px 540px at 50% 115%, rgba(var(--lg-tint-rgb), 0.34), transparent 62%),
radial-gradient(520px 420px at 30% 65%, rgba(255, 255, 255, 0.65), transparent 60%),
linear-gradient(180deg, #f5f7f9 0%, #eef1f4 100%);
background-attachment: fixed;
}
.page-wrapper {
background: transparent;
}
/* ------------------------------------------------------- top chrome (bar) */
/* .topbar is position:relative (style.css:1881) and contains NO fixed
descendants (verified) — safe to blur. */
.topbar {
background: linear-gradient(180deg,
rgba(var(--lg-tint-rgb), 0.90) 0%,
rgba(var(--lg-tint-rgb), 0.78) 100%);
-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.40),
0 1px 0 rgba(255, 255, 255, 0.18),
0 8px 24px rgba(23, 43, 77, 0.10);
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.topbar .navbar-header {
background: transparent;
}
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
text-shadow: 0 1px 2px rgba(23, 43, 77, 0.18);
}
/* profile / notification dropdowns floating off the topbar */
body .dropdown-menu {
background: var(--lg-white);
-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--lg-radius-panel);
box-shadow: inset 0 1px 0 var(--lg-specular), var(--lg-shadow-md);
overflow: hidden;
}
body .dropdown-menu .dropdown-item:hover,
body .dropdown-menu a:hover {
background: rgba(var(--lg-tint-rgb), 0.16);
}
/* dropdowns INSIDE blurred chrome cannot re-blur (nested backdrop roots) and
style.css .topbar .dropdown-menu out-specifies the generic rule — restate
at matching specificity with near-opaque glass for legibility. */
.topbar .dropdown-menu,
.left-sidebar .dropdown-menu {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--lg-radius-panel);
box-shadow: inset 0 1px 0 var(--lg-specular), var(--lg-shadow-md);
}
/* picker panels carry .dropdown-menu; their outside-the-box caret arrows get
clipped by the rounded overflow — hide them for a clean floating panel. */
body .datepicker-dropdown::before,
body .datepicker-dropdown::after,
body .daterangepicker::before,
body .daterangepicker::after,
body .bootstrap-datetimepicker-widget.dropdown-menu::before,
body .bootstrap-datetimepicker-widget.dropdown-menu::after {
display: none;
}
/* ------------------------------------------------------------- sidebars */
/* .left-sidebar / .right-sidebar are the fixed elements — safe to blur. */
.left-sidebar {
background: var(--lg-white-thin);
-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
border-right: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: 1px 0 0 var(--lg-hairline), 8px 0 32px rgba(23, 43, 77, 0.05);
}
.sidebar-nav {
background: transparent;
}
.sidebar-nav ul li a {
border-radius: var(--lg-radius-ctrl);
}
.sidebar-nav ul li a:hover {
background: rgba(var(--lg-tint-rgb), 0.18);
}
/* mini-sidebar flyout renders OUTSIDE the blurred sidebar box over arbitrary
page content and cannot blur (nested backdrop root) — keep it near-opaque */
.mini-sidebar .sidebar-nav #sidebarnav > li > ul {
background: rgba(255, 255, 255, 0.97);
border-radius: 0 var(--lg-radius-panel) var(--lg-radius-panel) 0;
box-shadow: var(--lg-shadow-md);
}
.right-sidebar {
background: var(--lg-white-heavy);
-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
box-shadow: -8px 0 32px rgba(23, 43, 77, 0.14);
}
/* --------------------------------------------------------------- cards */
/* THIN GLASS: translucent + specular edge + float, deliberately WITHOUT */
/* backdrop-filter (cards host fixed FABs, 68 DataTable views, the perio */
/* chart's 704 inputs — blur here is both a trap and a perf cliff). */
/* .card-no-border .card is restated because the app body always carries */
/* card-no-border (style.css:1776 would out-specify a bare .card rule). */
.card-no-border .card,
.card {
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(255, 255, 255, 0.60);
border-radius: var(--lg-radius-card);
box-shadow:
inset 0 1px 0 var(--lg-specular),
0 0 0 1px var(--lg-hairline),
var(--lg-shadow-sm);
}
/* nested cards flatten (avoid stacked frosting) */
.card-no-border .card .card,
.card .card {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(23, 43, 77, 0.06);
}
/* fullscreen card mode must stay fully legible over anything */
.card-fullscreen {
background: #ffffff;
}
/* page header zone (shadow killed too — a transparent bar must not cast) */
.page-titles {
background: transparent;
box-shadow: none;
}
.page-titles .breadcrumb {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
padding-left: 8px;
padding-right: 8px;
}
/* ------------------------------------------------------------- buttons */
/* Colour comes from the theme (blue or gold tenant) — we add only gloss, */
/* shape and depth via background-IMAGE so background-color is untouched. */
.btn {
border-radius: var(--lg-radius-ctrl);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.04) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 1px 2px rgba(23, 43, 77, 0.12);
}
.btn:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(23, 43, 77, 0.18);
}
.btn:focus,
.btn.focus {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 0 0 3px rgba(var(--lg-accent-rgb), 0.30);
}
.btn:active {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(255, 255, 255, 0.04) 100%);
}
/* quiet buttons keep the glass treatment subtle */
.btn-default,
.btn-secondary,
.btn-light {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 100%);
}
/* the circular FAB keeps its circle */
.btn-circle {
border-radius: 100% !important;
}
/* ---------------------------------------------------------------- forms */
.form-control {
background-color: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(23, 43, 77, 0.14);
border-radius: var(--lg-radius-ctrl);
box-shadow: inset 0 1px 2px rgba(23, 43, 77, 0.05);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.form-control:focus {
background-color: rgba(255, 255, 255, 0.92);
border-color: rgba(var(--lg-accent-rgb), 0.65);
box-shadow: inset 0 1px 2px rgba(23, 43, 77, 0.04), 0 0 0 3px rgba(var(--lg-accent-rgb), 0.22);
}
/* select2 closed control matches inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background-color: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(23, 43, 77, 0.14);
border-radius: var(--lg-radius-ctrl);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
border-color: rgba(var(--lg-accent-rgb), 0.65);
box-shadow: 0 0 0 3px rgba(var(--lg-accent-rgb), 0.20);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: rgba(var(--lg-tint-rgb), 0.28);
border: 1px solid rgba(var(--lg-tint-rgb), 0.45);
border-radius: 999px;
}
/* select2 open panel — body-appended floating chrome: full glass */
body .select2-dropdown {
background: var(--lg-white-heavy);
-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--lg-radius-panel);
box-shadow: inset 0 1px 0 var(--lg-specular), var(--lg-shadow-md);
overflow: hidden;
}
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: rgba(var(--lg-accent-rgb), 0.88);
}
body .select2-search--dropdown .select2-search__field {
border-radius: 8px;
border: 1px solid rgba(23, 43, 77, 0.14);
background: rgba(255, 255, 255, 0.85);
}
/* ----------------------------------------------------------------- tabs */
/* Segmented-control feel: paint only, hit targets unchanged. */
.nav-tabs {
border-bottom: 1px solid var(--lg-hairline);
}
.nav-tabs .nav-link {
border-radius: var(--lg-radius-ctrl) var(--lg-radius-ctrl) 0 0;
}
.nav-tabs .nav-link:hover {
background: rgba(var(--lg-tint-rgb), 0.14);
border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.65) rgba(255, 255, 255, 0.65) transparent;
box-shadow: inset 0 1px 0 var(--lg-specular), 0 -2px 10px rgba(23, 43, 77, 0.05);
}
/* ---------------------------------------------------------------- tables */
/* Rows stay opaque-legible; only the shell is tinted. NO blur here. */
/* DataTables resets sortable headers to transparent at (0,2,1) — the sorting
classes are restated so every header cell tints uniformly. */
.table thead th,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled,
table.dataTable thead .sorting_disabled {
background: rgba(var(--lg-tint-rgb), 0.14);
border-bottom: 1px solid rgba(var(--lg-tint-rgb), 0.35);
}
.table-hover tbody tr:hover {
background: rgba(var(--lg-tint-rgb), 0.10);
}
/* DataTables chrome — dimensions preserved (90x30 paginate fix intact) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
background-color: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(23, 43, 77, 0.14);
border-radius: var(--lg-radius-ctrl);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: var(--lg-radius-ctrl) !important;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(23, 43, 77, 0.10) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: rgba(var(--lg-accent-rgb), 0.92) !important;
border-color: rgba(var(--lg-accent-rgb), 0.92) !important;
color: #fff !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 2px 8px rgba(var(--lg-accent-rgb), 0.35);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
background: rgba(var(--lg-tint-rgb), 0.22);
color: inherit !important;
}
/* ---------------------------------------------------------------- modals */
/* .modal-content is inside the fixed .modal — safe to blur. */
.modal-content {
background: var(--lg-white);
-webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturate));
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--lg-radius-modal);
box-shadow: inset 0 1px 0 var(--lg-specular), var(--lg-shadow-lg);
}
.modal-header {
background: transparent;
border-bottom: 1px solid var(--lg-hairline);
border-radius: var(--lg-radius-modal) var(--lg-radius-modal) 0 0;
}
.modal-footer {
background: transparent;
border-top: 1px solid var(--lg-hairline);
border-radius: 0 0 var(--lg-radius-modal) var(--lg-radius-modal);
}
.modal-backdrop.show {
opacity: 0.35;
}
/* modals hosting a summernote editor must NOT blur: the editor's fullscreen
mode is position:fixed and backdrop-filter would re-anchor it to the modal */
.modal-content:has(.note-editor) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(255, 255, 255, 0.96);
}
/* legacy SweetAlert dialog (position:absolute via custom.css:210, appended to
body; contains no fixed descendants — safe to blur) */
.sweet-alert {
background: var(--lg-white);
-webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturate));
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--lg-radius-modal);
box-shadow: inset 0 1px 0 var(--lg-specular), var(--lg-shadow-lg);
}
/* ------------------------------------------------- pickers + context menu */
/* All body/inline-appended floating panels; loaded after us in source */
/* order, so selectors are body-prefixed for specificity. */
body .datepicker.dropdown-menu,
body .datepicker-dropdown,
body .daterangepicker,
body .bootstrap-datetimepicker-widget.dropdown-menu,
body .dtp .dtp-content {
background: var(--lg-white-heavy);
-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--lg-radius-panel);
box-shadow: inset 0 1px 0 var(--lg-specular), var(--lg-shadow-md);
}
body .datepicker table tr td.active.active,
body .datepicker table tr td.active.highlighted.active,
body .daterangepicker td.active,
body .daterangepicker td.active:hover {
background-color: rgba(var(--lg-accent-rgb), 0.92);
background-image: none;
}
body .datepicker table tr td.day:hover,
body .daterangepicker td.available:hover {
background: rgba(var(--lg-tint-rgb), 0.22);
/* no border-radius: override.css forces 0 !important on datepicker cells */
}
/* NO overflow:hidden here — jquery.contextMenu nests submenu s INSIDE the
parent list (appointment Status flyout) and clipping would amputate them.
Corner rounding is done on the end items instead. */
body .context-menu-list {
background: var(--lg-white-heavy);
-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--lg-radius-panel);
box-shadow: inset 0 1px 0 var(--lg-specular), var(--lg-shadow-md);
}
body .context-menu-list > .context-menu-item:first-child,
body .context-menu-list > .context-menu-item:first-child > span {
border-radius: var(--lg-radius-panel) var(--lg-radius-panel) 0 0;
}
body .context-menu-list > .context-menu-item:last-child,
body .context-menu-list > .context-menu-item:last-child > span {
border-radius: 0 0 var(--lg-radius-panel) var(--lg-radius-panel);
}
body .context-menu-item.context-menu-hover {
background-color: rgba(var(--lg-accent-rgb), 0.88);
}
/* --------------------------------------------------------- FullCalendar */
/* Toolbar chrome only. Grid, events, sticky headers, status colours and */
/* the #76b9da active state from override.css are deliberately untouched. */
body .fc .fc-button-primary {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(0, 0, 0, 0.03) 100%);
border-radius: var(--lg-radius-ctrl);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body .fc .fc-toolbar-title {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
body .fc-event {
border-radius: 6px;
box-shadow: 0 1px 3px rgba(23, 43, 77, 0.18);
}
/* ------------------------------------------------------------ polish */
.label,
.badge {
border-radius: 999px;
}
.jq-toast-single {
border-radius: var(--lg-radius-panel);
box-shadow: var(--lg-shadow-md);
overflow: hidden;
}
/* the countdown loader normally hangs below the box (bottom:-3px) — re-seat
it inside so the rounded overflow doesn't hide the 5s auto-close cue */
body .jq-toast-loader {
top: auto;
bottom: 0;
height: 3px;
border-radius: 0;
}
/* Tooltips stay the app's deliberate white-on-black-text scheme (override.css
builds dense white calendar tooltips) — shape polish only. */
.tooltip-inner {
border-radius: 8px;
box-shadow: var(--lg-shadow-md);
}
.user-profile .profile-img img {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 2px 8px rgba(23, 43, 77, 0.20);
}
/* NOTE: no global scrollbar restyle. Any ::-webkit-scrollbar rule converts
macOS overlay scrollbars into space-consuming classic ones — a layout
change this paint-only skin is not allowed to make. */
/* ------------------------------------------------------------- login */
/* Standalone page (Layout="") — gets its own . The card floats */
/* as heavy glass over the photo; .login-box made relative (no z-index) */
/* so it paints above the ::before wash by tree order. */
.login-register::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(900px 600px at 80% 0%, rgba(var(--lg-tint-rgb), 0.30), transparent 60%),
linear-gradient(200deg, rgba(23, 43, 77, 0.42) 0%, rgba(23, 43, 77, 0.18) 55%, rgba(var(--lg-accent-rgb), 0.22) 100%);
}
.login-register .login-box {
position: relative;
}
.login-register .login-box.card {
background: rgba(255, 255, 255, 0.68);
-webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturate));
backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturate));
border: 1px solid rgba(255, 255, 255, 0.60);
border-radius: 24px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), var(--lg-shadow-lg);
}
/* login forms use .form-material (padding:0, borderless underline at (0,2,0))
— restate the full control at (0,3,0)/(0,3,1) so the glass field is whole */
.login-register .login-box .form-control {
background-color: rgba(255, 255, 255, 0.55);
background-image: none;
padding: 8px 12px;
border: 1px solid rgba(23, 43, 77, 0.14);
border-radius: var(--lg-radius-ctrl);
box-shadow: inset 0 1px 2px rgba(23, 43, 77, 0.05);
}
.login-register .login-box .form-control:focus {
background-color: rgba(255, 255, 255, 0.90);
background-image: none;
border-color: rgba(var(--lg-accent-rgb), 0.65);
box-shadow: 0 0 0 3px rgba(var(--lg-accent-rgb), 0.22);
}
/* =================================================================== */
/* GUARDS */
/* =================================================================== */
/* browsers without backdrop-filter: solidify the glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.topbar { background: rgba(var(--lg-tint-rgb), 0.97); }
.left-sidebar,
.right-sidebar,
body .dropdown-menu,
.modal-content,
.sweet-alert,
body .select2-dropdown,
body .datepicker.dropdown-menu,
body .datepicker-dropdown,
body .daterangepicker,
body .bootstrap-datetimepicker-widget.dropdown-menu,
body .dtp .dtp-content,
body .context-menu-list,
.login-register .login-box.card {
background: rgba(255, 255, 255, 0.97);
}
}
/* users who ask for less transparency get solid surfaces */
@media (prefers-reduced-transparency: reduce) {
body { background: linear-gradient(0deg, rgba(var(--lg-tint-rgb), 0.10), rgba(var(--lg-tint-rgb), 0.10)) #fff; }
.topbar { background: rgb(var(--lg-tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.left-sidebar,
.right-sidebar,
body .dropdown-menu,
.modal-content,
.sweet-alert,
.card,
body .select2-dropdown,
body .datepicker.dropdown-menu,
body .datepicker-dropdown,
body .daterangepicker,
body .bootstrap-datetimepicker-widget.dropdown-menu,
body .dtp .dtp-content,
body .context-menu-list,
.login-register .login-box.card {
background: #ffffff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.form-control,
.btn,
.card {
transition: none !important;
}
}
/* belt-and-braces print reset (link is media="screen", so normally unused) */
@media print {
body { background: #fff; }
.topbar, .left-sidebar, .right-sidebar,
.card, .modal-content, .sweet-alert,
body .dropdown-menu, body .select2-dropdown,
body .datepicker-dropdown, body .daterangepicker,
body .context-menu-list {
background: #fff !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
.page-wrapper { background: #fff; }
}