/* =========================================================
Backpack 7 - aansluiting op de huisstijl
---------------------------------------------------------
Backpack 7 bouwt de lijstweergave anders op dan versie 5: DataTables 2
(andere klassen), een eigen zoekveld, Bootstrap 5-klassen voor de keuzelijst
en de paginering, en een koptekst met en
in plaats van
met
. De huisstijl in panel.css is op de oude opbouw gemaakt. Dit bestand
zet de nieuwe onderdelen terug op dezelfde maten en kleuren, met dezelfde
tokens, zodat het licht en het donker thema allebei blijven werken.
Wordt na panel.css ingeladen.
========================================================= */
/* ---------- Kop boven de lijst ----------
Was een van 1.45rem met het aantal regels als ernaast. */
body.app [bp-section=page-header].datatable-header {
margin-bottom: .725rem !important;
}
/* De oude kop was een met de ondertitel als erin: op een smal scherm
liep die als tekst door naar de volgende regel. De flexkop van Backpack 7 drukte
hem in een smalle kolom naast de titel. */
body.app [bp-section=page-header] {
flex-wrap: wrap;
}
body.app [bp-section=page-header] h1[bp-section=page-heading] {
font-size: 1.45rem;
line-height: 1.2;
}
body.app [bp-section=page-header] [bp-section=page-subheading] {
margin-left: .375rem !important;
padding-left: .2125rem;
font-size: .85rem;
color: var(--p-muted);
}
/* Lege strook met gekozen filterwaarden: DataTables zet die altijd neer, met
ruimte eronder, ook als er geen filterwaarden getoond worden. */
body.app .active-filter-badges:empty {
display: none !important;
}
/* ---------- Zoekveld ----------
Stond aan het begin van de rechterhelft, 220px breed, zonder vergrootglas.
Backpack 7 zet het in een smalle kolom helemaal rechts en houdt links ruimte
vrij voor een pictogram dat het CoreUI-thema juist verbergt. */
@media (min-width: 576px) {
body.app .row:has(> .col-sm-3 > .datatable_search_stack) > .col-sm-9,
body.app .row:has(> .col-sm-3 > .datatable_search_stack) > .col-sm-3 {
flex: 0 0 50%;
max-width: 50%;
}
}
/* Het zoekveld stond bovenaan de rij, ook als de knoppen ernaast over twee regels
liepen; Backpack 7 centreert de rij verticaal. */
body.app .row:has(> .col-sm-3 > .datatable_search_stack) {
align-items: flex-start !important;
margin-bottom: 0 !important;
}
/* Het oude zoekveld had een label met 8px ondermarge; daarmee was die kolom 46px
hoog en begon de filterbalk altijd op dezelfde afstand. */
body.app .datatable_search_stack {
min-height: 46px;
}
body.app .datatable_search_stack .input-icon {
display: block;
}
body.app .datatable_search_stack input.datatable-search-input {
width: 220px;
max-width: 100%;
padding: 6px 12px;
}
/* ---------- Aantal per pagina ----------
Bootstrap 5-klasse (form-select) die Bootstrap 4 niet kent: daardoor verscheen
de kale keuzelijst van de browser, met pijltje. */
body.app .dt-length select.form-select {
display: inline-block;
width: auto;
height: 38px;
padding: 6px 12px;
margin-right: .25rem;
font-size: 15px;
line-height: 24px;
-webkit-appearance: none;
appearance: none;
background-image: none;
}
/* ---------- Paginering ----------
Het CoreUI-thema maakt er losse knopjes van zonder rand. Terug naar de
aaneengesloten reeks van Bootstrap 4, met de kleuren uit panel.css. */
body.app div.dt-container .dt-paging .dt-paging-button {
margin: 0 !important;
}
body.app div.dt-container .dt-paging .dt-paging-button .page-link {
margin: 0 0 0 -1px;
padding: 8px 12px;
font-size: 15px;
line-height: 18.75px;
border: 1px solid var(--p-line);
border-radius: 0;
background-color: var(--p-surface);
color: var(--p-accent);
}
body.app div.dt-container .dt-paging .dt-paging-button:first-child .page-link {
margin-left: 0;
border-radius: 4px 0 0 4px;
}
body.app div.dt-container .dt-paging .dt-paging-button:last-child .page-link {
border-radius: 0 4px 4px 0;
}
body.app div.dt-container .dt-paging .dt-paging-button.active .page-link {
background-color: var(--p-action);
border-color: var(--p-action);
color: var(--p-on-accent);
}
body.app div.dt-container .dt-paging .dt-paging-button.disabled .page-link {
background-color: var(--p-surface-2);
border-color: #d9e2ef; /* zoals onder Backpack 5: de standaardrand van Bootstrap */
color: var(--p-muted);
}
body.app div.dt-container .dt-paging .dt-paging-button:not(.disabled):not(.active) .page-link:hover {
background-color: var(--p-surface-2);
border-color: var(--p-line);
color: var(--p-accent-strong);
}
/* ---------- Tabelrijen ----------
De Bootstrap 5-stylesheet van DataTables 2 legt op oneven rijen nog een grijze
laag (box-shadow) over de cellen, bovenop de eigen zebrastrepen van panel.css,
en geeft de eerste rij een bovenrand die er onder Backpack 5 niet was. */
body.app table.table.dataTable.table-striped > tbody > tr:nth-of-type(n) > * {
box-shadow: none;
}
/* De even rijen hadden de lichte tint van blue-bundle; DataTables 2 zet de
rijachtergrond met een zwaardere selector terug op transparant. */
body.app table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n) {
background-color: rgba(0, 0, 0, .02);
}
/* DataTables 2 herkent kolommen met getallen en zet die rechts uit (dt-type-numeric).
DataTables 1 deed dat niet; in de huisstijl staat alles links. */
body.app table.dataTable th.dt-type-numeric,
body.app table.dataTable td.dt-type-numeric,
body.app table.dataTable th.dt-type-date,
body.app table.dataTable td.dt-type-date {
text-align: left;
}
body.app table.dataTable th.dt-type-numeric div.dt-column-header,
body.app table.dataTable th.dt-type-date div.dt-column-header {
flex-direction: row;
}
body.app table.table.dataTable > tbody > tr:first-child > td {
border-top: 0;
}
/* ---------- Datumkiezer ----------
Onder Backpack 5 was het tekstvak van de datumkiezer altijd readonly (je kiest
een datum in de kalender), en blue-bundle geeft readonly-velden grijze, gewone
tekst in plaats van vet. Backpack 7 laat typen toe (inputmode=none) en zet
readonly er niet meer op, waardoor de datum ineens vet en donker stond. */
body.app .form-control[data-init-function=bpFieldInitDatePickerElement] {
color: #888 !important;
font-weight: normal;
}
/* ---------- Herhaalbare regels ----------
coreuiv2.css maakt de knoppen links van een regel 24px met een klein kruisje.
Onder Backpack 5 waren ze 30px met een kruisje van 24px. */
body.app .container-repeatable-elements .controls button {
height: 30px !important;
width: 30px !important;
margin: 0 0 2px !important;
padding: 0;
font-size: 24px;
color: #161c2d;
}
/* ---------- Sorteerpijltjes in de kop ----------
DataTables 1 (Bootstrap 4) zette rechts in de kopcel een ↑ en ↓, doorschijnend,
met de actieve richting vol. DataTables 2 tekent kleine driehoekjes onder elkaar.
Hier weer de oude pijltjes, op dezelfde plek. */
body.app table.dataTable thead > tr > th span.dt-column-order {
position: static;
width: 0;
}
body.app table.dataTable thead > tr > th:is(.dt-orderable-asc, .dt-orderable-desc, .dt-ordering-asc, .dt-ordering-desc) span.dt-column-order:before,
body.app table.dataTable thead > tr > th:is(.dt-orderable-asc, .dt-orderable-desc, .dt-ordering-asc, .dt-ordering-desc) span.dt-column-order:after {
position: absolute;
display: block;
top: auto;
left: auto;
bottom: .9em;
font-size: inherit;
line-height: inherit;
opacity: .3;
}
body.app table.dataTable thead > tr > th:is(.dt-orderable-asc, .dt-ordering-asc) span.dt-column-order:before {
right: 1em;
content: "\2191";
}
body.app table.dataTable thead > tr > th:is(.dt-orderable-desc, .dt-ordering-desc) span.dt-column-order:after {
right: .5em;
content: "\2193";
}
body.app table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
body.app table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after {
opacity: 1;
}
/* ---------- Knop "Annuleren" onder formulieren ----------
Backpack 5 gaf die knop btn-default (lichtblauwgrijs, uit blue-bundle), Backpack 7
btn-secondary, en die heeft in de huisstijl de zandkleur van de andere knoppen. */
body.app .saveActions > a.btn-secondary {
background-color: #d9e2ef;
border-color: #d9e2ef;
color: #1b2a4e;
}
body.app .saveActions > a.btn-secondary:hover {
background-color: #becde4;
border-color: #b5c7e0;
color: #1b2a4e;
}
body.app .saveActions > a.btn-secondary:active {
background-color: #b5c7e0;
border-color: #acc0dc;
}
/* ---------- Select2 in formulieren ----------
common.css van Backpack 7 zet de rand om de hele select2-container en maakt het
veld 38px hoog. Onder Backpack 5 zat de rand op het selectievak zelf (dat ook de
kleuren van het donkere thema krijgt) en was het veld 34px. */
body.app form .select2.select2-container {
border: 0 !important;
}
body.app form .select2-container--bootstrap .select2-selection {
border: 1px solid rgba(0, 40, 100, 0.12) !important;
}
body.app form .select2-container--bootstrap .select2-selection--single {
height: 34px;
min-height: 0;
padding-top: 6px;
padding-bottom: 6px;
}
body.app form .select2-container--bootstrap .select2-selection--multiple {
min-height: 34px;
}
body.app form .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
min-height: 0;
}
body.app form .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
margin-top: 5px;
}
body.app form .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
margin-top: 0;
}
/* Acties-dropdown in de lijsten: Backpack zet het menu met position:fixed op de
schermcoördinaten van de knop. De paginacontainer (.animated.fadeIn) hield na de
fade-in een transform vast (fill-mode both), en een element met transform wordt het
referentiekader voor fixed. Het menu schoof daardoor op met de containerpositie.
Eigen fade-in met alleen opacity: die maakt geen referentiekader. */
@keyframes sf-panel-fade {
from { opacity: 0; }
to { opacity: 1; }
}
body.app .container-fluid.animated.fadeIn {
animation-name: sf-panel-fade;
}
/* Zijbalk, Backpack 7:
1. De menulijst krijgt van het thema class="overflow-hidden"; CoreUI scrolde daarin
met perfect-scrollbar, en dat laadt Backpack 7 niet meer. Het onderste deel van
het menu was daardoor onbereikbaar. Gewoon zelf laten scrollen.
2. Deze paneelstijl zet de zijbalk als vaste kolom in de flexrij (sticky, 225px).
CoreUI verbergt hem bij het inklappen met een negatieve marge op een fixed
zijbalk; die regel greep hier niet, dus de knop wisselde wel de class maar de
zijbalk bleef staan. */
body.app .sidebar .sidebar-nav {
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
/* Rustige scrollbalk: dun en bijna doorzichtig, iets duidelijker onder de muis. */
scrollbar-width: thin;
scrollbar-color: rgba(42, 33, 27, 0.12) transparent;
}
body.app .sidebar .sidebar-nav:hover { scrollbar-color: rgba(42, 33, 27, 0.28) transparent; }
body.app .sidebar .sidebar-nav::-webkit-scrollbar { width: 6px; }
body.app .sidebar .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
body.app .sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(42, 33, 27, 0.12); border-radius: 999px; }
body.app .sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(42, 33, 27, 0.28); }
html.theme-dark body.app .sidebar .sidebar-nav { scrollbar-color: rgba(244, 242, 238, 0.14) transparent; }
html.theme-dark body.app .sidebar .sidebar-nav:hover { scrollbar-color: rgba(244, 242, 238, 0.3) transparent; }
html.theme-dark body.app .sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(244, 242, 238, 0.14); }
html.theme-dark body.app .sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(244, 242, 238, 0.3); }
@media (min-width: 992px) {
body.app .app-body > .sidebar {
transition: margin-left .25s ease;
}
body.app:not(.sidebar-lg-show) .app-body > .sidebar {
margin-left: -225px;
visibility: hidden;
transition: margin-left .25s ease, visibility 0s linear .25s;
}
}