/* * Dark Mode Overrides fuer Bootstrap 3 * Aktiv wenn . Standard (hell) bleibt unveraendert. * Die Sidebar (#sidebar-wrapper) ist bereits dunkel und wird nur leicht angepasst. */ /* Native Controls (Scrollbars, Select-Popups, Datepicker der Inputs) dunkel rendern */ html[data-theme="dark"] { color-scheme: dark; } /* Grundflaechen */ html[data-theme="dark"] body { background-color: #1a1d21; color: #cfd3d8; } html[data-theme="dark"] #page-content-wrapper a:not(.btn) { color: #5aa9e6; } html[data-theme="dark"] #page-content-wrapper a:not(.btn):hover, html[data-theme="dark"] #page-content-wrapper a:not(.btn):focus { color: #85c1f0; } html[data-theme="dark"] hr { border-top-color: #3a3f46; } html[data-theme="dark"] .text-muted { color: #9aa0a6; } html[data-theme="dark"] .page-header { border-bottom-color: #3a3f46; } /* Tabellen */ html[data-theme="dark"] .table { color: #cfd3d8; } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > th, html[data-theme="dark"] .table > tfoot > tr > th, html[data-theme="dark"] .table > thead > tr > td, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tfoot > tr > td { border-top-color: #3a3f46; } html[data-theme="dark"] .table > thead > tr > th { border-bottom-color: #4a505a; } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > thead > tr > th, html[data-theme="dark"] .table-bordered > tbody > tr > th, html[data-theme="dark"] .table-bordered > tfoot > tr > th, html[data-theme="dark"] .table-bordered > thead > tr > td, html[data-theme="dark"] .table-bordered > tbody > tr > td, html[data-theme="dark"] .table-bordered > tfoot > tr > td { border-color: #3a3f46; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #202429; } html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #2a2f36; } /* Panels */ html[data-theme="dark"] .panel { background-color: #23272d; border-color: #3a3f46; } html[data-theme="dark"] .panel-default { border-color: #3a3f46; } html[data-theme="dark"] .panel-default > .panel-heading { background-color: #2b3037; border-color: #3a3f46; color: #cfd3d8; } html[data-theme="dark"] .panel-footer { background-color: #2b3037; border-top-color: #3a3f46; } /* Wells / Boxen */ html[data-theme="dark"] .well { background-color: #202429; border-color: #3a3f46; } /* Formularfelder */ html[data-theme="dark"] .form-control { background-color: #2a2e34; border-color: #454b52; color: #e2e5e9; } html[data-theme="dark"] .form-control:focus { border-color: #5aa9e6; box-shadow: inset 0 1px 1px rgba(0,0,0,.2), 0 0 6px rgba(90,169,230,.4); } html[data-theme="dark"] .form-control::placeholder { color: #7a8189; } html[data-theme="dark"] .form-control[disabled], html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] fieldset[disabled] .form-control { background-color: #23262b; color: #8a9098; } html[data-theme="dark"] .input-group-addon { background-color: #2b3037; border-color: #454b52; color: #cfd3d8; } /* Buttons: bootstrap-theme.min.css legt einen hellen Verlauf (background-image) ueber alle Buttons -> im Dunkelmodus flach machen, sonst wirken sie hell/grau */ html[data-theme="dark"] .btn { background-image: none; text-shadow: none; } /* Farbige Buttons: solide Bootstrap-Grundfarben behalten, Text weiss sicherstellen */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-success, html[data-theme="dark"] .btn-info, html[data-theme="dark"] .btn-warning, html[data-theme="dark"] .btn-danger { color: #fff; } /* Buttons: Default-Button hell -> dunkel */ html[data-theme="dark"] .btn-default { background-color: #2d3238; border-color: #4a505a; color: #d4d7db; } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus, html[data-theme="dark"] .btn-default:active, html[data-theme="dark"] .btn-default.active, html[data-theme="dark"] .open > .dropdown-toggle.btn-default { background-color: #3a4048; border-color: #5a616b; color: #fff; } /* Dropdowns / Typeahead */ html[data-theme="dark"] .dropdown-menu { background-color: #26292e; border-color: #3a3f46; box-shadow: 0 6px 12px rgba(0,0,0,.45); } html[data-theme="dark"] .dropdown-menu > li > a { color: #cfd3d8; } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: #2f353c; color: #fff; } html[data-theme="dark"] .dropdown-menu .divider { background-color: #3a3f46; } /* Nav-Tabs */ html[data-theme="dark"] .nav-tabs { border-bottom-color: #3a3f46; } html[data-theme="dark"] .nav-tabs > li > a:hover { background-color: #2a2f36; border-color: #3a3f46 #3a3f46 #3a3f46; } html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs > li.active > a:hover, html[data-theme="dark"] .nav-tabs > li.active > a:focus { background-color: #1a1d21; border-color: #3a3f46 #3a3f46 transparent; color: #cfd3d8; } /* List-Groups */ html[data-theme="dark"] .list-group-item { background-color: #23272d; border-color: #3a3f46; color: #cfd3d8; } /* Modals */ html[data-theme="dark"] .modal-content { background-color: #23272d; border-color: #3a3f46; box-shadow: 0 5px 15px rgba(0,0,0,.6); } html[data-theme="dark"] .modal-header { border-bottom-color: #3a3f46; } html[data-theme="dark"] .modal-footer { border-top-color: #3a3f46; } html[data-theme="dark"] .close { color: #e2e5e9; text-shadow: 0 1px 0 #000; opacity: .6; } html[data-theme="dark"] .close:hover, html[data-theme="dark"] .close:focus { color: #fff; opacity: 1; } /* Code */ html[data-theme="dark"] code { background-color: #2b1216; color: #ff9aa2; } html[data-theme="dark"] pre { background-color: #202429; border-color: #3a3f46; color: #cfd3d8; } /* Alerts: gedaempfte, dunkle Varianten statt greller Pastellflaechen. background-image:none entfernt den hellen Verlauf aus bootstrap-theme.min.css (sonst ueberdeckt der Verlauf das dunkle background-color -> heller td-Grund). Gilt auch fuer als Zell-/Zeilen-Markierung genutzte .alert-*-Klassen. */ html[data-theme="dark"] .alert-success { background-color: #16321f; background-image: none; border-color: #245231; color: #b6e0bf; } html[data-theme="dark"] .alert-info { background-color: #16323a; background-image: none; border-color: #22525f; color: #a9dbe6; } html[data-theme="dark"] .alert-warning { background-color: #3d3417; background-image: none; border-color: #6b5a1f; color: #ecd591; } html[data-theme="dark"] .alert-danger { background-color: #3b1a1e; background-image: none; border-color: #642a30; color: #f0b3b8; } /* Farbige Tabellenzeilen (Status-Hervorhebung in Rechnungs-/Listenansichten). Verwendet werden .alert-* sowie die Bootstrap-Kontextklassen auf . Hintergrund direkt auf die Zellen (td/th) + !important, damit die .table-striped-Regeln nicht gewinnen; Text hell fuer Lesbarkeit. */ html[data-theme="dark"] .table > tbody > tr.alert-success > td, html[data-theme="dark"] .table > tbody > tr.alert-success > th, html[data-theme="dark"] .table > tbody > tr.success > td, html[data-theme="dark"] .table > tbody > tr.success > th { background-color: #17321e !important; color: #cbe6d1; } html[data-theme="dark"] .table > tbody > tr.alert-warning > td, html[data-theme="dark"] .table > tbody > tr.alert-warning > th, html[data-theme="dark"] .table > tbody > tr.warning > td, html[data-theme="dark"] .table > tbody > tr.warning > th { background-color: #38300f !important; color: #ecd591; } html[data-theme="dark"] .table > tbody > tr.alert-danger > td, html[data-theme="dark"] .table > tbody > tr.alert-danger > th, html[data-theme="dark"] .table > tbody > tr.danger > td, html[data-theme="dark"] .table > tbody > tr.danger > th { background-color: #381a1d !important; color: #f0b3b8; } html[data-theme="dark"] .table > tbody > tr.alert-info > td, html[data-theme="dark"] .table > tbody > tr.alert-info > th, html[data-theme="dark"] .table > tbody > tr.info > td, html[data-theme="dark"] .table > tbody > tr.info > th { background-color: #14313a !important; color: #a9dbe6; } html[data-theme="dark"] .table > tbody > tr.active > td, html[data-theme="dark"] .table > tbody > tr.active > th { background-color: #2a2f36 !important; color: #cfd3d8; } /* Links in farbigen Zeilen an die jeweilige Tonalitaet anpassen */ html[data-theme="dark"] .table > tbody > tr.alert-success a:not(.btn), html[data-theme="dark"] .table > tbody > tr.success a:not(.btn) { color: #8fd6a2; } html[data-theme="dark"] .table > tbody > tr.alert-warning a:not(.btn), html[data-theme="dark"] .table > tbody > tr.warning a:not(.btn) { color: #e8c85f; } html[data-theme="dark"] .table > tbody > tr.alert-danger a:not(.btn), html[data-theme="dark"] .table > tbody > tr.danger a:not(.btn) { color: #f2a6ae; } html[data-theme="dark"] .table > tbody > tr.alert-info a:not(.btn), html[data-theme="dark"] .table > tbody > tr.info a:not(.btn) { color: #7ecfe0; } /* Bootstrap-Datepicker Dropdown */ html[data-theme="dark"] .datepicker.dropdown-menu { background-color: #26292e; border-color: #3a3f46; color: #cfd3d8; } html[data-theme="dark"] .datepicker table tr td, html[data-theme="dark"] .datepicker table tr th { color: #cfd3d8; } html[data-theme="dark"] .datepicker table tr td.day:hover, html[data-theme="dark"] .datepicker table tr td.focused { background-color: #3a4048; } html[data-theme="dark"] .datepicker table tr td.old, html[data-theme="dark"] .datepicker table tr td.new { color: #777c83; } html[data-theme="dark"] .datepicker table tr td.disabled, html[data-theme="dark"] .datepicker table tr td.disabled:hover { color: #555b62; } html[data-theme="dark"] .datepicker .datepicker-switch:hover, html[data-theme="dark"] .datepicker .prev:hover, html[data-theme="dark"] .datepicker .next:hover { background-color: #3a4048; } /* Wells/Borders im Login-Formular */ html[data-theme="dark"] .form-signin { color: #cfd3d8; }