/*! * custom.css — eigen aanpassingen voor eCommerce-app * Plaats onderaan in je na theme.css */ /* ----------------------------------------------------------------------------- 0) Full-height flex layout zodat footer altijd onderaan blijft -----------------------------------------------------------------------------*/ html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; } .content-wrapper { flex: 1 0 auto; } /* De bestaande footer styling blijft geldig */ footer { flex-shrink: 0; } /* Sticky footer support */ section.body { flex: 1 0 auto; } /* ----------------------------------------------------------------------------- 1) Fixed header -----------------------------------------------------------------------------*/ /* Maak de header altijd zichtbaar door 'm vast te zetten */ header.header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 2000; /* hoger dan de rest */ background: #fff; /* of jouw header-kleur */ } body { padding-top: 60px; /* pas 60px aan als jouw navbar hoger/lager is */ } /* ----------------------------------------------------------------------------- 2) Header / Offcanvas overrides -----------------------------------------------------------------------------*/ /* Verberg lege navigatie‐sectie in de header */ .header .header-nav { display: none !important; } /* Shrink de header tot zijn daadwerkelijke inhoud */ .header { height: auto !important; min-height: 0 !important; padding: 5px 20px !important; } /* Pas de breedte van het offcanvas menu aan (std. 300px) */ .offcanvas-start { width: 240px !important; } /* ----------------------------------------------------------------------------- 3) Navigatie link-kleuren -----------------------------------------------------------------------------*/ .navbar-light .nav-link, .offcanvas .nav-link { color: #333 !important; } .navbar-light .nav-link:hover, .offcanvas .nav-link:hover, .navbar-light .nav-link.active, .offcanvas .nav-link.active { color: #000 !important; font-weight: 600 !important; } /* ----------------------------------------------------------------------------- 4) Status‐dot styling -----------------------------------------------------------------------------*/ .status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; transition: transform .15s ease-in-out; } .status-dot:hover { transform: scale(1.2); } /* ----------------------------------------------------------------------------- 5) Tabel responsive tweaks -----------------------------------------------------------------------------*/ .table-responsive { margin-bottom: 1rem; } #datatable-ecommerce-list { min-width: 0 !important; } /* ----------------------------------------------------------------------------- 6) Utility fixes -----------------------------------------------------------------------------*/ .table-ecommerce-simple .checkbox-style-1 { margin: 0; transform: scale(1); } html .call-to-action.featured.featured-primary { border-top-color: #1D99EE; } /* ----------------------------------------------------------------------------- 7) Datatables controls verbergen (Show entries / Search) -----------------------------------------------------------------------------*/ /* Specifiek voor alle DataTables */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { display: none !important; } /* Optioneel ook info en pagination (pas aan indien gewenst) */ /* .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { display: none !important; } */ /* ===== Compact dashboard ===== */ .compact-dash .card-body { padding: .75rem; } .compact-dash .card-header { padding: .5rem .75rem; } .compact-dash .table > :not(caption) > * > * { padding: .35rem .5rem; } .compact-dash .list-group-item { padding: .5rem .75rem; } .compact-dash .badge { font-size: .72rem; } .compact-dash .display-6 { font-size: 1.5rem; } /* Cards met scrollbare inhoud zodat de pagina kort blijft */ .dash-scroll { max-height: 340px; /* pas aan als je meer/minder wil tonen */ overflow: auto; } /* Kleine statusdot (op orders) */ .status-dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; vertical-align:middle; } /* ----------------------------------------------------------------------------- SPECIFIEK VOOR order-create.php -----------------------------------------------------------------------------*/ /* De kaart wordt lekker breed (max 800px) en altijd 100% binnen container */ .page-order-create .card { max-width: 800px; /* of je gewenste breedte */ width: 100%; margin: 2rem auto; } /* --- Uniforme icon-knoppen in tabellen --- */ .btn-icon { --icon-size: 34px; /* pas aan naar wens */ width: var(--icon-size); height: var(--icon-size); padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn-icon i { font-size: 18px; /* icoonmaat */ line-height: 1; } .table .btn-icon { vertical-align: middle; } /* ----------------------------------------------------------------------------- 8) Mobile tweaks -----------------------------------------------------------------------------*/ @media (max-width: 767px) { .modal-content input, .modal-content select { box-shadow: none !important; } } @media (max-width: 575.98px) { #datatable-ecommerce-list th.status-col, #datatable-ecommerce-list td.status-col { width: 40px; padding: 0.25rem; } #datatable-ecommerce-list td.status-col .status-dot { margin: 0 auto; } }