diff --git a/css/itflow_custom.css b/css/itflow_custom.css index 7ea35c4bd..95af1097b 100644 --- a/css/itflow_custom.css +++ b/css/itflow_custom.css @@ -55,8 +55,12 @@ } .checkbox-column .form-check-input { + /* BS5 uses float:left here where BS4 used position:absolute - without + float:none the box ignores the cell's text-align and pins to the left */ + float: none; position: static; margin: 0; + vertical-align: middle; } /* --------------------------------------------------------------- @@ -263,8 +267,17 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li --bs-list-group-active-bg: var(--itflow-accent, #007bff); --bs-list-group-active-border-color: var(--itflow-accent, #007bff); } -.form-control:focus, .form-select:focus, .form-check-input:focus { +.form-control:focus, +.form-select:focus, +.form-check-input:focus { border-color: var(--itflow-accent, #007bff); + /* the border was themed but the 0 0 0 .25rem glow was still Bootstrap blue */ + box-shadow: var(--bs-box-shadow-inset, 0 0 #0000), + 0 0 0 .25rem color-mix(in srgb, var(--itflow-accent, #007bff) 25%, transparent); +} +/* Bootstrap's generic focus ring (buttons, links, .btn-check labels) */ +:root { + --bs-focus-ring-color: color-mix(in srgb, var(--itflow-accent, #007bff) 25%, transparent); } .form-check-input:checked { background-color: var(--itflow-accent, #007bff); @@ -690,3 +703,83 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li outline-offset: 2px; } +/* --- Dark mode ------------------------------------------------------------ + Bootstrap treats .bg-light / .text-dark / .bg-white as ABSOLUTE colours, so + none of them flip under [data-bs-theme=dark] - 69 bg-light and 425 text-dark + usages stayed bright. Overriding the utilities rather than the underlying + --bs-light-rgb / --bs-dark-rgb variables, because those same two variables + also drive .text-light and .bg-dark, which must NOT flip. */ +[data-bs-theme=dark] .bg-light { + background-color: var(--bs-secondary-bg) !important; +} +[data-bs-theme=dark] .bg-white { + background-color: var(--bs-body-bg) !important; +} +[data-bs-theme=dark] .text-dark { + color: var(--bs-body-color) !important; +} +[data-bs-theme=dark] .border-light { + border-color: var(--bs-border-color) !important; +} +/* .table-light hardcodes #f8f9fa and #000 outright */ +[data-bs-theme=dark] .table-light { + --bs-table-bg: var(--bs-secondary-bg); + --bs-table-color: var(--bs-body-color); + --bs-table-border-color: var(--bs-border-color); + --bs-table-striped-bg: var(--bs-tertiary-bg); + --bs-table-striped-color: var(--bs-body-color); + --bs-table-hover-bg: var(--bs-tertiary-bg); + --bs-table-hover-color: var(--bs-body-color); +} + +/* Secondary and light buttons are fixed greys - #6c757d and #f8f9fa - so in + dark mode one goes muddy and the other glares. 260 btn-light and 185 + btn-secondary uses, so these matter more than most. */ +[data-bs-theme=dark] .btn-secondary { + --bs-btn-color: #dee2e6; + --bs-btn-bg: #3d4349; + --bs-btn-border-color: #495057; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #495057; + --bs-btn-hover-border-color: #565e64; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #565e64; + --bs-btn-active-border-color: #6c757d; + --bs-btn-disabled-color: #adb5bd; + --bs-btn-disabled-bg: #3d4349; + --bs-btn-disabled-border-color: #495057; +} +[data-bs-theme=dark] .btn-light { + --bs-btn-color: #dee2e6; + --bs-btn-bg: #343a40; + --bs-btn-border-color: #454d55; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #454d55; + --bs-btn-hover-border-color: #565e64; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #565e64; + --bs-btn-active-border-color: #6c757d; + --bs-btn-disabled-color: #6c757d; + --bs-btn-disabled-bg: #343a40; + --bs-btn-disabled-border-color: #454d55; +} +[data-bs-theme=dark] .btn-outline-secondary { + --bs-btn-color: #adb5bd; + --bs-btn-border-color: #6c757d; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #6c757d; + --bs-btn-hover-border-color: #6c757d; +} +/* .btn-default is my own AdminLTE 3 shim and hardcodes a light grey, so it + glares in dark mode like the Bootstrap greys above. */ +[data-bs-theme=dark] .btn-default { + color: #dee2e6; + background-color: #343a40; + border-color: #454d55; +} +[data-bs-theme=dark] .btn-default:hover { + color: #fff; + background-color: #454d55; + border-color: #565e64; +} +