/* ============================================ Dark Mode - RailSysteem Toggle via data-theme="dark" op Alle regels zijn geschoond onder [data-theme="dark"] zodat light mode volledig onaangetast blijft. ============================================ */ /* ---- Smooth transitions (altijd actief voor vloeiend schakelen) ---- */ body, .panel, .panel-heading, .panel-body, .panel-footer, .navbar-default, .form-control, .modal-content, .dropdown-menu, .list-group-item, .well, .table, .btn-default, .btn-grey, .btn-grey-wide, .btn-docs, .catbox, .legaldesk-rootcats, .nav-justified > li > a, .nav-tabs.nav-justified > li > a, footer.content-info { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Dark mode toggle button (altijd zichtbaar in navbar) */ .dark-mode-toggle { cursor: pointer; padding: 27px 15px; color: #ffffff; font-size: 16px; background: none; border: none; line-height: 1; vertical-align: middle; } .dark-mode-toggle:hover { color: #ee721f; } .dark-mode-toggle .fa { transition: transform 0.3s ease; } /* ============================================ Alle dark mode overrides - alleen actief wanneer data-theme="dark" is gezet ============================================ */ /* Body */ [data-theme="dark"] body { background-color: #1b1b2f; color: #e2e8f0; } /* Links */ [data-theme="dark"] a { color: #63b3ed; } [data-theme="dark"] a:hover, [data-theme="dark"] a:focus { color: #90cdf4; } /* Headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #e2e8f0; } /* Navbar */ [data-theme="dark"] .navbar-default { background-color: #111827; border-color: #111827; } [data-theme="dark"] .navbar-default .navbar-nav > li > a { color: #ffffff; } /* Panels (Bootstrap 3) */ [data-theme="dark"] .panel { background-color: #1f2940; border-color: #2d3748; } [data-theme="dark"] .panel-default { border-color: #2d3748; } [data-theme="dark"] .panel-default > .panel-heading { background-color: #162038; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .panel-body { color: #e2e8f0; } [data-theme="dark"] .panel-footer { background-color: #162038; border-color: #2d3748; } [data-theme="dark"] .panel-heading { color: #e2e8f0; } /* Tables */ [data-theme="dark"] .table { color: #e2e8f0; } [data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > tbody > tr > th, [data-theme="dark"] .table > tfoot > tr > th, [data-theme="dark"] .table > thead > tr > td, [data-theme="dark"] .table > tbody > tr > td, [data-theme="dark"] .table > tfoot > tr > td { border-color: #2d3748; } [data-theme="dark"] .table > thead > tr > th { border-bottom-color: #2d3748; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #182030; } [data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #1e2a42; } [data-theme="dark"] .table-bordered { border-color: #2d3748; } [data-theme="dark"] .table-bordered > thead > tr > th, [data-theme="dark"] .table-bordered > tbody > tr > th, [data-theme="dark"] .table-bordered > tfoot > tr > th, [data-theme="dark"] .table-bordered > thead > tr > td, [data-theme="dark"] .table-bordered > tbody > tr > td, [data-theme="dark"] .table-bordered > tfoot > tr > td { border-color: #2d3748; } /* Form controls */ [data-theme="dark"] .form-control, [data-theme="dark"] textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] select { background-color: #253550; color: #e2e8f0; border-color: #3d4f6a; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] input:focus, [data-theme="dark"] select:focus { border-color: #ee721f; } [data-theme="dark"] select.form-control { background-color: #253550; color: #e2e8f0; } [data-theme="dark"] .input-group-addon { background-color: #162038; color: #a0aec0; border-color: #2d3748; } /* Modals */ [data-theme="dark"] .modal-content { background-color: #1f2940; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .modal-header { border-bottom-color: #2d3748; } [data-theme="dark"] .modal-footer { border-top-color: #2d3748; background-color: #162038; } /* Announcement modal */ [data-theme="dark"] #announcementModal .modal-header { background-color: #1a3a5c !important; border-bottom-color: #2d3748; } [data-theme="dark"] #announcementModal .modal-header .close { color: #e2e8f0 !important; } /* Announcement markdown content */ .announcement-content h1, .announcement-content h2, .announcement-content h3, .announcement-content h4 { margin-top: 0.8em; margin-bottom: 0.4em; } .announcement-content h1:first-child, .announcement-content h2:first-child, .announcement-content h3:first-child { margin-top: 0; } .announcement-content ul, .announcement-content ol { padding-left: 1.5em; margin-bottom: 0.8em; } .announcement-content p { margin-bottom: 0.6em; } .announcement-content code { padding: 2px 5px; border-radius: 3px; } .announcement-content blockquote { border-left: 3px solid #337ab7; padding-left: 1em; margin-left: 0; color: #666; } [data-theme="dark"] .announcement-content blockquote { color: #a0aec0; border-left-color: #4a90d9; } [data-theme="dark"] .announcement-content a { color: #63b3ed; } [data-theme="dark"] .announcement-content code { background-color: #2d3748; color: #e2e8f0; } /* Announcement history dropdown */ .announcement-history-dropdown { min-width: 320px; max-height: 400px; overflow-y: auto; } .announcement-history-dropdown .dropdown-header { font-weight: bold; font-size: 13px; } .announcement-history-dropdown .announcement-date { display: inline-block; min-width: 80px; color: #999; font-size: 12px; margin-right: 8px; } .announcement-history-dropdown .announcement-title-text { font-size: 13px; } [data-theme="dark"] .announcement-history-dropdown .announcement-date { color: #718096; } /* Announcement history read-only modals */ [data-theme="dark"] [id^="announcementHistoryModal"] .modal-header { background-color: #1a3a5c !important; border-bottom-color: #2d3748; } [data-theme="dark"] [id^="announcementHistoryModal"] .modal-header .close { color: #e2e8f0 !important; } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background-color: #1f2940; border-color: #2d3748; } [data-theme="dark"] .dropdown-menu > li > a { color: #e2e8f0; } [data-theme="dark"] .dropdown-menu > li > a:hover, [data-theme="dark"] .dropdown-menu > li > a:focus { background-color: #1e2a42; color: #e2e8f0; } [data-theme="dark"] .dropdown-menu .divider { background-color: #2d3748; } /* List groups */ [data-theme="dark"] .list-group-item { background-color: #1f2940; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .list-group-item:hover { background-color: #1e2a42; } [data-theme="dark"] a.list-group-item { color: #63b3ed; } [data-theme="dark"] a.list-group-item:hover, [data-theme="dark"] a.list-group-item:focus { color: #90cdf4; background-color: #1e2a42; } /* Wells */ [data-theme="dark"] .well { background-color: #162038; border-color: #2d3748; color: #e2e8f0; } /* Jumbotron */ [data-theme="dark"] .jumbotron { background-color: #1f2940; color: #e2e8f0; } /* Breadcrumbs */ [data-theme="dark"] .breadcrumb > li { color: #718096; } [data-theme="dark"] .breadcrumb > li + li:before { color: #718096; } [data-theme="dark"] .breadcrumb > .active { color: #718096; } /* Buttons */ [data-theme="dark"] .btn-default { background-color: #162038; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .btn-default:hover, [data-theme="dark"] .btn-default:focus, [data-theme="dark"] .btn-default:active { background-color: #1e2a42; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .btn-grey, [data-theme="dark"] .btn-grey-wide { background-color: #162038; border-color: #2d3748; } [data-theme="dark"] .btn-docs { background-color: #162038; border-color: #2d3748; } /* Submenu / Nav tabs */ [data-theme="dark"] .nav-justified > li > a, [data-theme="dark"] .nav-tabs.nav-justified > li > a { background-color: #162038; color: #e2e8f0; } [data-theme="dark"] .nav-tabs { border-bottom-color: #2d3748; } [data-theme="dark"] .nav-tabs > li > a { color: #63b3ed; } [data-theme="dark"] .nav-tabs > li > a:hover { border-color: #2d3748; background-color: #162038; } [data-theme="dark"] .nav-tabs > li.active > a, [data-theme="dark"] .nav-tabs > li.active > a:hover, [data-theme="dark"] .nav-tabs > li.active > a:focus { color: #e2e8f0; background-color: #1f2940; border-color: #2d3748; border-bottom-color: #1f2940; } /* Alle gekleurde tiles uniform blauw-grijs in dark mode */ [data-theme="dark"] .module-row li a.home-block, [data-theme="dark"] .module-row li a.darkgrey, [data-theme="dark"] .module-row li a.slategrey, [data-theme="dark"] .module-row li a.darkblue, [data-theme="dark"] .module-row li a.midblue, [data-theme="dark"] .module-row li a.lightblue, [data-theme="dark"] .module-row li a.darkgreen, [data-theme="dark"] .module-row li a.midgreen, [data-theme="dark"] .module-row li a.lightgreen, [data-theme="dark"] .module-row li a.khaki, [data-theme="dark"] .module-row li a.midyellow, [data-theme="dark"] .module-row li a.midorange, [data-theme="dark"] .module-row li a.darkorange, [data-theme="dark"] .module-row li a.midred, [data-theme="dark"] .module-row li a.darkred, [data-theme="dark"] .module-row li a.darkpurple, [data-theme="dark"] .module-row li a.green, [data-theme="dark"] .module-row li a.aqua, [data-theme="dark"] .module-row li a.maroon, [data-theme="dark"] .module-row li a.purple, [data-theme="dark"] .module-row li a.tomato, [data-theme="dark"] .module-row li a.violet, [data-theme="dark"] .module-row li a.abbblue { background-color: #4a5568; } [data-theme="dark"] .module-row li a.home-block:hover, [data-theme="dark"] .module-row li a.darkgrey:hover, [data-theme="dark"] .module-row li a.slategrey:hover, [data-theme="dark"] .module-row li a.darkblue:hover, [data-theme="dark"] .module-row li a.midblue:hover, [data-theme="dark"] .module-row li a.lightblue:hover, [data-theme="dark"] .module-row li a.darkgreen:hover, [data-theme="dark"] .module-row li a.midgreen:hover, [data-theme="dark"] .module-row li a.lightgreen:hover, [data-theme="dark"] .module-row li a.khaki:hover, [data-theme="dark"] .module-row li a.midyellow:hover, [data-theme="dark"] .module-row li a.midorange:hover, [data-theme="dark"] .module-row li a.darkorange:hover, [data-theme="dark"] .module-row li a.midred:hover, [data-theme="dark"] .module-row li a.darkred:hover, [data-theme="dark"] .module-row li a.darkpurple:hover, [data-theme="dark"] .module-row li a.green:hover, [data-theme="dark"] .module-row li a.aqua:hover, [data-theme="dark"] .module-row li a.maroon:hover, [data-theme="dark"] .module-row li a.purple:hover, [data-theme="dark"] .module-row li a.tomato:hover, [data-theme="dark"] .module-row li a.violet:hover, [data-theme="dark"] .module-row li a.abbblue:hover { background-color: #3d4756; } /* Passes en documents tiles ook uniform */ [data-theme="dark"] .documents li a, [data-theme="dark"] .root-categories .catbox { background-color: #4a5568 !important; color: #ffffff; } [data-theme="dark"] .documents li a:hover, [data-theme="dark"] .root-categories .catbox:hover a { background-color: #3d4756 !important; } /* Gebruikers knop op pas-tiles */ [data-theme="dark"] .documents li a.btn { background-color: #1f2940 !important; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .documents li a.btn:hover { background-color: #162038 !important; } /* Categories */ [data-theme="dark"] .catbox { border-color: #2d3748; background-color: #1f2940; color: #e2e8f0; } /* LegalDesk */ [data-theme="dark"] .legaldesk-rootcats { border-color: #2d3748; background-color: #1f2940; color: #e2e8f0; } /* Sortable / icon buttons */ [data-theme="dark"] #sortablediv a { color: #a0aec0; } [data-theme="dark"] a.icon-btn { background: #2d3748; } /* Footer */ [data-theme="dark"] footer.content-info { color: #a0aec0; } [data-theme="dark"] footer.content-info #copyright { color: #a0aec0; } /* Pagination */ [data-theme="dark"] .pagination > li > a, [data-theme="dark"] .pagination > li > span { background-color: #1f2940; border-color: #2d3748; color: #63b3ed; } [data-theme="dark"] .pagination > li > a:hover, [data-theme="dark"] .pagination > li > a:focus { background-color: #1e2a42; border-color: #2d3748; color: #90cdf4; } [data-theme="dark"] .pagination > .active > a, [data-theme="dark"] .pagination > .active > a:hover, [data-theme="dark"] .pagination > .active > a:focus, [data-theme="dark"] .pagination > .active > span { background-color: #ee721f; border-color: #ee721f; color: #fff; } [data-theme="dark"] .pagination > .disabled > a, [data-theme="dark"] .pagination > .disabled > span { background-color: #1f2940; border-color: #2d3748; color: #718096; } /* Alerts */ [data-theme="dark"] .alert-info { background-color: #1a365d; border-color: #2a4a7f; color: #bee3f8; } [data-theme="dark"] .alert-success { background-color: #1a4731; border-color: #276749; color: #c6f6d5; } [data-theme="dark"] .alert-warning { background-color: #5a3e1b; border-color: #744210; color: #fefcbf; } [data-theme="dark"] .alert-danger { background-color: #4a1a1a; border-color: #742a2a; color: #fed7d7; } /* Alert validation overrides (light mode had inline antiquewhite, nu via CSS) */ .alert.alert-error { border-color: #E91E63; background-color: antiquewhite; } .alert.alert-danger { border-color: #E91E63; background-color: antiquewhite; } [data-theme="dark"] .alert.alert-error { background-color: #4a1a1a; border-color: #742a2a; color: #fed7d7; } [data-theme="dark"] .alert.alert-danger { background-color: #4a1a1a; border-color: #742a2a; color: #fed7d7; } /* Form validation states */ [data-theme="dark"] .has-error .help-block, [data-theme="dark"] .has-error .control-label, [data-theme="dark"] .has-error .radio, [data-theme="dark"] .has-error .checkbox, [data-theme="dark"] .has-error .radio-inline, [data-theme="dark"] .has-error .checkbox-inline { color: #fc8181; } [data-theme="dark"] .has-error .form-control { border-color: #fc8181; background-color: #2d1f1f; color: #fed7d7; } [data-theme="dark"] .has-error .input-group-addon { background-color: #4a1a1a; border-color: #fc8181; color: #fed7d7; } /* Primary buttons - minder fel oranje, beter passend bij dark UI */ [data-theme="dark"] .btn-primary { background-color: #c05a10; border-color: #a04d0e; color: #ffffff; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="dark"] .btn-primary:active { background-color: #a04d0e; border-color: #8a420c; color: #ffffff; } /* Danger button */ [data-theme="dark"] .btn-danger { background-color: #9b2c2c; border-color: #822727; color: #ffffff; } [data-theme="dark"] .btn-danger:hover, [data-theme="dark"] .btn-danger:focus, [data-theme="dark"] .btn-danger:active { background-color: #822727; border-color: #6b2020; color: #ffffff; } /* Success button */ [data-theme="dark"] .btn-success { background-color: #276749; border-color: #22543d; color: #ffffff; } [data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-success:focus, [data-theme="dark"] .btn-success:active { background-color: #22543d; border-color: #1a4731; color: #ffffff; } /* Warning button */ [data-theme="dark"] .btn-warning { background-color: #975a16; border-color: #7b4c12; color: #ffffff; } [data-theme="dark"] .btn-warning:hover, [data-theme="dark"] .btn-warning:focus, [data-theme="dark"] .btn-warning:active { background-color: #7b4c12; border-color: #5f3a0e; color: #ffffff; } /* Info button */ [data-theme="dark"] .btn-info { background-color: #2b6cb0; border-color: #2c5282; color: #ffffff; } [data-theme="dark"] .btn-info:hover, [data-theme="dark"] .btn-info:focus, [data-theme="dark"] .btn-info:active { background-color: #2c5282; border-color: #234e7a; color: #ffffff; } /* Labels / badges */ [data-theme="dark"] .label-default { background-color: #4a5568; } /* HR */ [data-theme="dark"] hr { border-top-color: #2d3748; } /* Blockquote */ [data-theme="dark"] blockquote { border-left-color: #2d3748; color: #a0aec0; } /* Code */ [data-theme="dark"] code { color: #e2e8f0; background-color: #162038; } [data-theme="dark"] pre { background-color: #162038; border-color: #2d3748; color: #e2e8f0; } /* Popover */ [data-theme="dark"] .popover { background-color: #1f2940; border-color: #2d3748; color: #e2e8f0; } /* Frontpage */ [data-theme="dark"] body.frontpage { background-color: #111827; } /* jQuery UI overrides */ [data-theme="dark"] .ui-widget-content { background-color: #1f2940; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .ui-widget-header { background-color: #162038; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .ui-state-default, [data-theme="dark"] .ui-widget-content .ui-state-default { background-color: #162038; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .ui-state-hover, [data-theme="dark"] .ui-widget-content .ui-state-hover { background-color: #1e2a42; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .ui-state-active, [data-theme="dark"] .ui-widget-content .ui-state-active { background-color: #ee721f; color: #fff; } /* Typeahead overrides */ [data-theme="dark"] .typeahead__container .typeahead__field input { background-color: #1f2940; color: #e2e8f0; border-color: #2d3748; } [data-theme="dark"] .typeahead__container .typeahead__list { background-color: #1f2940; } [data-theme="dark"] .typeahead__container .typeahead__list > li { background-color: #1f2940; border-color: #2d3748; } [data-theme="dark"] .typeahead__container .typeahead__list > li > a { color: #e2e8f0; } [data-theme="dark"] .typeahead__container .typeahead__list > li:hover, [data-theme="dark"] .typeahead__container .typeahead__list > li.active { background-color: #1e2a42; } /* Spectrum colorpicker */ [data-theme="dark"] .sp-container { background-color: #1f2940; border-color: #2d3748; } [data-theme="dark"] .sp-replacer { border-color: #2d3748; background-color: #1f2940; } /* Featherlight lightbox */ [data-theme="dark"] .featherlight .featherlight-content { background-color: #1f2940; color: #e2e8f0; border-color: #2d3748; } /* ============================================ Pagina-specifieke overrides ============================================ */ /* Gebruikersadministratie - users list */ [data-theme="dark"] .ul-striped { color: #e2e8f0; } [data-theme="dark"] .ul-striped .modules { color: #718096; } [data-theme="dark"] .ul-striped > li:nth-child(odd) { background-color: #182030; } [data-theme="dark"] .ul-striped > li:nth-child(even) { background-color: #1f2940; } [data-theme="dark"] .users-list thead { background-color: #162038; color: #e2e8f0; } /* Soft-deleted users inline style="color: grey" - verhoog leesbaarheid */ [data-theme="dark"] .list-group-item span[style*="color: grey"], [data-theme="dark"] .list-group-item span[style*="color:grey"] { color: #5a6577 !important; } /* Tooltips in users view */ [data-theme="dark"] .pull-right .tooltiptext { background-color: #2d3748; color: #e2e8f0; } [data-theme="dark"] .tooltip-left::after { border-color: transparent transparent transparent #2d3748; } /* Icon buttons (download, mail, add user) */ [data-theme="dark"] a.icon-btn { background: #2d3748; color: #ffffff; } /* Search/filter area */ [data-theme="dark"] .typeahead__container .email { color: #718096; } [data-theme="dark"] .typeahead__container .name.green { color: #68d391; } [data-theme="dark"] .typeahead__container .name.blue { color: #63b3ed; } [data-theme="dark"] .typeahead__container .name.red { color: #fc8181; } [data-theme="dark"] .typeahead__container .login { color: #ed8936; } /* Text helper classes */ [data-theme="dark"] .text-muted { color: #718096 !important; } [data-theme="dark"] .text-primary { color: #63b3ed !important; } /* Images - lichte dimming voor comfort */ [data-theme="dark"] img { opacity: 0.92; } [data-theme="dark"] img:hover { opacity: 1; } /* Logo's niet dimmen */ [data-theme="dark"] .navbar-brand img, [data-theme="dark"] #footer-logo { opacity: 1; } /* ============================================ CRM tiles met inline styles - !important nodig ============================================ */ [data-theme="dark"] .module-row li a.home-block[style*="background-color"] { background-color: #4a5568 !important; } [data-theme="dark"] .module-row li a.home-block[style*="background-color"]:hover { background-color: #3d4756 !important; } /* ============================================ E-Learning / ELVW / Cursussen / Examens ============================================ */ /* Exam container - lichtgrijze achtergrond → donker NB: exam.blade.php heeft inline