mirror of
https://github.com/itflow-org/itflow
synced 2026-08-24 08:25:14 +00:00
433 lines
14 KiB
CSS
433 lines
14 KiB
CSS
/*
|
|
For screens below 576px (xs):
|
|
- Make the button full-width, display:block
|
|
*/
|
|
@media (max-width: 575.98px) {
|
|
.btn-responsive {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/*
|
|
For screens 576px (sm) and above:
|
|
- Revert to an inline style
|
|
*/
|
|
@media (min-width: 576px) {
|
|
.btn-responsive {
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.drag-handle {
|
|
cursor: grab !important;
|
|
}
|
|
|
|
.drag-handle:active {
|
|
cursor: grabbing !important;
|
|
}
|
|
|
|
.star-toggle input {
|
|
display: none;
|
|
}
|
|
|
|
.star-toggle i {
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
color: #adb5bd;
|
|
}
|
|
|
|
.star-toggle input:checked + i {
|
|
color: #f1c40f;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.checkbox-column {
|
|
width: 40px;
|
|
min-width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.checkbox-column .form-check {
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.checkbox-column .form-check-input {
|
|
position: static;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------
|
|
AdminLTE 4 compatibility.
|
|
v4 dropped .text-sm and the accent-* / navbar-* / sidebar-dark-*
|
|
trio that ITFlow's 16 theme choices were built on. In v3 the theme
|
|
colour drove the TOP NAVBAR, link colours and the active sidebar
|
|
item - the sidebar itself was always dark. That is reproduced here.
|
|
--------------------------------------------------------------- */
|
|
/* Font stack. v3 led with "Source Sans Pro" then -apple-system; v4/BS5 leads
|
|
with "Source Sans 3" then system-ui. ITFlow loads neither webfont, so the
|
|
two stacks fall through to different system fonts. Pinned to v3's. */
|
|
:root {
|
|
--bs-font-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
}
|
|
|
|
/* The full .text-sm cascade. AdminLTE 3 shipped ~100 rules for this; these are
|
|
the ones that actually set sizing, and without them the app renders a step
|
|
larger everywhere than it used to. */
|
|
.text-sm {
|
|
font-size: .875rem;
|
|
}
|
|
.text-sm .form-control,
|
|
.text-sm .form-select,
|
|
.text-sm .input-group-text,
|
|
.text-sm table {
|
|
font-size: .875rem;
|
|
}
|
|
.text-sm .btn,
|
|
.text-sm .dropdown-menu {
|
|
font-size: .875rem !important;
|
|
}
|
|
.text-sm .card-title {
|
|
font-size: 1rem;
|
|
}
|
|
.text-sm .content-header h1,
|
|
.text-sm .app-content-header h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
.text-sm .brand-link {
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Sidebar density. v3 tightened nav-link padding under .text-sm to .4rem .8rem;
|
|
BS5's default is .5rem 1rem, which is what made the menu items taller. */
|
|
.text-sm .nav-link {
|
|
padding: .4rem .8rem;
|
|
}
|
|
/* v3 nav-icon metrics - v4 switched these to a 1.5rem flex box */
|
|
.sidebar-menu .nav-icon {
|
|
min-width: 1.6rem;
|
|
max-width: 1.6rem;
|
|
margin-left: .05rem;
|
|
margin-right: .2rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
/* one accent per theme - v3 used the same hex for navbar, links and
|
|
the active sidebar item */
|
|
.theme-black { --itflow-accent: #000000; }
|
|
.theme-blue { --itflow-accent: #007bff; }
|
|
.theme-cyan { --itflow-accent: #17a2b8; }
|
|
.theme-fuchsia { --itflow-accent: #f012be; }
|
|
.theme-gray { --itflow-accent: #6c757d; }
|
|
.theme-green { --itflow-accent: #28a745; }
|
|
.theme-indigo { --itflow-accent: #6610f2; }
|
|
.theme-lightblue { --itflow-accent: #3c8dbc; }
|
|
.theme-maroon { --itflow-accent: #d81b60; }
|
|
.theme-navy { --itflow-accent: #001f3f; }
|
|
.theme-olive { --itflow-accent: #3d9970; }
|
|
.theme-orange { --itflow-accent: #fd7e14; }
|
|
.theme-pink { --itflow-accent: #e83e8c; }
|
|
.theme-purple { --itflow-accent: #6f42c1; }
|
|
.theme-red { --itflow-accent: #dc3545; }
|
|
.theme-teal { --itflow-accent: #20c997; }
|
|
|
|
/* top navbar takes the theme colour */
|
|
.app-header.navbar {
|
|
background-color: var(--itflow-accent, #007bff) !important;
|
|
}
|
|
|
|
/* sidebar stays dark; only the ACTIVE item picks up the theme */
|
|
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active,
|
|
.app-sidebar .nav-treeview > .nav-item > .nav-link.active {
|
|
background-color: var(--itflow-accent, #007bff);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Bootstrap 5's reboot underlines every link; Bootstrap 4 did not, and
|
|
AdminLTE 3 additionally suppressed the hover underline. Restored so links
|
|
read the way they did before the migration. */
|
|
a,
|
|
a:hover,
|
|
a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* links and accented controls */
|
|
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.badge):not(.btn):not(.small-box):not(.info-box) {
|
|
color: var(--itflow-accent, #007bff);
|
|
}
|
|
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.badge):not(.btn):not(.small-box):not(.info-box):hover,
|
|
.btn-link:hover,
|
|
.nav-tabs .nav-link:hover {
|
|
/* v3 darkened the accent by exactly 15% HSL lightness on hover */
|
|
color: color-mix(in srgb, var(--itflow-accent, #007bff) 70%, #000);
|
|
color: hsl(from var(--itflow-accent, #007bff) h s calc(l - 15%));
|
|
}
|
|
.nav-tabs .nav-link.active { color: var(--itflow-accent, #007bff); }
|
|
/* Pagination. Driving Bootstrap's own variables rather than overriding
|
|
.page-link directly: a flat `.page-item .page-link{color:...}` ties with
|
|
BS5's `.active>.page-link` and `.disabled>.page-link` on specificity and,
|
|
because this sheet loads last, silently won both - so the active number was
|
|
accent-on-accent (invisible) and disabled Prev/Next lost their muted grey. */
|
|
.pagination {
|
|
--bs-pagination-color: var(--itflow-accent, #007bff);
|
|
--bs-pagination-hover-color: color-mix(in srgb, var(--itflow-accent, #007bff) 70%, #000);
|
|
--bs-pagination-hover-color: hsl(from var(--itflow-accent, #007bff) h s calc(l - 15%));
|
|
--bs-pagination-focus-color: var(--itflow-accent, #007bff);
|
|
--bs-pagination-active-color: #fff;
|
|
--bs-pagination-active-bg: var(--itflow-accent, #007bff);
|
|
--bs-pagination-active-border-color: var(--itflow-accent, #007bff);
|
|
}
|
|
.dropdown-item.active, .dropdown-item:active {
|
|
background-color: var(--itflow-accent, #007bff);
|
|
}
|
|
.form-control:focus, .form-select:focus, .form-check-input:focus {
|
|
border-color: var(--itflow-accent, #007bff);
|
|
}
|
|
.form-check-input:checked {
|
|
background-color: var(--itflow-accent, #007bff);
|
|
border-color: var(--itflow-accent, #007bff);
|
|
}
|
|
|
|
/* sidebar is ALWAYS dark - v4 gives .app-sidebar no background at all.
|
|
These are AdminLTE 3.2.0's [class*=sidebar-dark-] values verbatim. */
|
|
.app-sidebar {
|
|
background-color: #343a40;
|
|
}
|
|
/* Sidebar header. v4 scopes its brand rules under .sidebar-brand, and its own
|
|
defaults centre the brand in a fixed 2.75rem box. v3's .brand-link was a
|
|
left-aligned block, and several of these headers carry a "Back | ..." line
|
|
that is taller than that, so height is relaxed and alignment restored. */
|
|
.app-sidebar .sidebar-brand {
|
|
/* v4 deliberately pairs .sidebar-brand{height:2.75rem} with
|
|
.app-header{max-height:2.75rem} so the sidebar header lines up with the
|
|
top bar. Keep that height and cut the vertical padding instead - v4's
|
|
.8125rem leaves only 18px of the 44px box, which clips even an h6. */
|
|
height: 2.75rem;
|
|
padding: .25rem .5rem;
|
|
justify-content: flex-start;
|
|
background-color: #343a40;
|
|
border-bottom: 1px solid #4b545c;
|
|
}
|
|
.app-sidebar .sidebar-brand .brand-link {
|
|
width: 100%;
|
|
color: #fff;
|
|
}
|
|
.app-sidebar .sidebar-brand .brand-text {
|
|
color: #fff;
|
|
}
|
|
.app-sidebar .sidebar-menu .nav-link,
|
|
.app-sidebar .nav-header {
|
|
color: #c2c7d0;
|
|
}
|
|
.app-sidebar .sidebar-menu > .nav-item > .nav-link:focus,
|
|
.app-sidebar .sidebar-menu > .nav-item:hover > .nav-link,
|
|
.app-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link {
|
|
background-color: rgba(255, 255, 255, .1);
|
|
color: #fff;
|
|
}
|
|
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active {
|
|
color: #fff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
|
|
}
|
|
.app-sidebar .nav-treeview {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Navbar search. v3 tinted the field with a LIGHTENED version of the theme
|
|
colour (navy #001f3f -> #002953 at rest, lighter again on focus) rather
|
|
than a fixed grey. The color-mix line is the fallback; the relative-colour
|
|
line reproduces v3's HSL lighten exactly where the browser supports it. */
|
|
.app-header .form-control-navbar,
|
|
.app-header .btn-navbar {
|
|
background-color: color-mix(in srgb, var(--itflow-accent, #007bff) 90%, #fff);
|
|
background-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 4%));
|
|
border-color: color-mix(in srgb, var(--itflow-accent, #007bff) 78%, #fff);
|
|
border-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 9%));
|
|
color: rgba(255, 255, 255, .8);
|
|
box-shadow: none;
|
|
}
|
|
.app-header .form-control-navbar::placeholder {
|
|
color: rgba(255, 255, 255, .6);
|
|
}
|
|
.app-header .form-control-navbar:focus,
|
|
.app-header .form-control-navbar:focus + .btn-navbar {
|
|
background-color: color-mix(in srgb, var(--itflow-accent, #007bff) 82%, #fff);
|
|
background-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 9%));
|
|
border-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 14%));
|
|
color: #fff;
|
|
box-shadow: none;
|
|
}
|
|
.app-header .form-control-navbar:focus::placeholder {
|
|
color: #fff;
|
|
}
|
|
|
|
/* --- Bootstrap 5 unpaired background utilities -------------------------
|
|
BS4 + AdminLTE 3 shipped `.bg-dark,.card.bg-dark .card-body{color:#fff}`.
|
|
BS5 split the pair: .bg-* sets ONLY a background and you are expected to
|
|
use .text-bg-* for the pairing. ITFlow uses bg-dark 303 times (every modal
|
|
header, most card headers), so without this the header text is dark on
|
|
dark and effectively invisible. Contrast choices below mirror Bootstrap's
|
|
own .text-bg-* decisions. */
|
|
.bg-dark, .bg-primary, .bg-secondary, .bg-success, .bg-danger,
|
|
.bg-navy, .bg-indigo, .bg-purple, .bg-maroon, .bg-red, .bg-blue, .bg-black {
|
|
color: #fff;
|
|
}
|
|
.bg-info, .bg-warning, .bg-light, .bg-teal, .bg-olive, .bg-lightblue,
|
|
.bg-orange, .bg-pink, .bg-cyan, .bg-green, .bg-gray, .bg-fuchsia {
|
|
color: #000;
|
|
}
|
|
.card.bg-dark .card-body {
|
|
color: #fff;
|
|
}
|
|
/* keep close buttons visible on the dark headers they sit in */
|
|
.bg-dark > .btn-close, .modal-header.bg-dark .btn-close {
|
|
filter: var(--bs-btn-close-white-filter, invert(1) grayscale(100%) brightness(200%));
|
|
}
|
|
|
|
/* --- dashboard small-box ------------------------------------------------
|
|
AdminLTE 4 kept .small-box but dropped the watermark .icon entirely, along
|
|
with the paragraph sizing and the stacking context that keeps the text
|
|
above the icon. Without these the 19 dashboard boxes render their icon
|
|
inline at body size and shove the layout around. v3 values restored. */
|
|
.small-box > .inner {
|
|
padding: 10px;
|
|
}
|
|
.small-box .icon {
|
|
color: rgba(0, 0, 0, .15);
|
|
z-index: 0;
|
|
}
|
|
.small-box .icon > i,
|
|
.small-box .icon > svg {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
font-size: 90px;
|
|
transition: transform .3s linear;
|
|
}
|
|
.small-box:hover .icon > i,
|
|
.small-box:hover .icon > svg {
|
|
transform: scale(1.1);
|
|
}
|
|
.small-box h3,
|
|
.small-box .h3,
|
|
.small-box p {
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
.small-box p {
|
|
font-size: 1rem;
|
|
}
|
|
.small-box p > small {
|
|
display: block;
|
|
margin-top: 5px;
|
|
font-size: .9rem;
|
|
color: #f8f9fa;
|
|
}
|
|
.small-box hr {
|
|
opacity: .25;
|
|
}
|
|
.small-box > .small-box-footer {
|
|
color: rgba(255, 255, 255, .8);
|
|
}
|
|
.small-box > .small-box-footer:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
/* --- utility classes AdminLTE 4 dropped -------------------------------- */
|
|
.text-bold, .text-bold.table td, .text-bold.table th {
|
|
font-weight: 700;
|
|
}
|
|
.text-xs {
|
|
font-size: .75rem !important;
|
|
}
|
|
.btn-default {
|
|
color: #6c757d;
|
|
background-color: #f8f9fa;
|
|
border-color: #ced4da;
|
|
}
|
|
.btn-default:hover {
|
|
color: #495057;
|
|
background-color: #e2e6ea;
|
|
border-color: #adb5bd;
|
|
}
|
|
.btn-flat {
|
|
border-radius: 0;
|
|
border-width: 1px;
|
|
box-shadow: none;
|
|
}
|
|
/* sidebar count badges - v3 positioned these absolutely */
|
|
.sidebar-menu .nav-link > .right,
|
|
.sidebar-menu .nav-link > p > .right {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: .7rem;
|
|
}
|
|
/* alert icons */
|
|
.alert .icon {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* box/card colours AdminLTE 4 also dropped (bg-purple, bg-pink,
|
|
bg-olive and bg-gray are still used on a few pages) */
|
|
.bg-black { background-color: #000 !important; }
|
|
.bg-blue { background-color: rgba(63,103,145,.9) !important; }
|
|
.bg-cyan { background-color: rgba(52,152,219,.9) !important; }
|
|
.bg-fuchsia { background-color: rgba(246,114,216,.9) !important; }
|
|
.bg-gray { background-color: rgba(108,117,125,.9) !important; }
|
|
.bg-green { background-color: rgba(0,188,140,.9) !important; }
|
|
.bg-indigo { background-color: rgba(102,16,242,.9) !important; }
|
|
.bg-lightblue { background-color: rgba(134,186,216,.9) !important; }
|
|
.bg-maroon { background-color: rgba(237,108,155,.9) !important; }
|
|
.bg-navy { background-color: rgba(0,44,89,.9) !important; }
|
|
.bg-olive { background-color: rgba(116,200,163,.9) !important; }
|
|
.bg-orange { background-color: rgba(253,126,20,.9) !important; }
|
|
.bg-pink { background-color: rgba(232,62,140,.9) !important; }
|
|
.bg-purple { background-color: rgba(111,66,193,.9) !important; }
|
|
.bg-red { background-color: rgba(231,76,60,.9) !important; }
|
|
.bg-teal { background-color: rgba(32,201,151,.9) !important; }
|
|
|
|
/* --- Flatpickr date-filter preset panel ---------------------------------
|
|
Flatpickr has no preset-ranges feature; js/date_filter.js injects this
|
|
panel to reproduce the nine ranges daterangepicker used to provide. */
|
|
.flatpickr-calendar.itflow-fp-with-ranges {
|
|
width: auto;
|
|
padding-right: 0;
|
|
}
|
|
.itflow-fp-ranges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .25rem;
|
|
padding: .5rem;
|
|
border-top: 1px solid var(--bs-border-color, #dee2e6);
|
|
}
|
|
.itflow-fp-range {
|
|
padding: .2rem .5rem;
|
|
font-size: .8125rem;
|
|
color: var(--itflow-accent, #007bff);
|
|
white-space: nowrap;
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
border-radius: .25rem;
|
|
}
|
|
.itflow-fp-range:hover,
|
|
.itflow-fp-range:focus {
|
|
color: #fff;
|
|
background-color: var(--itflow-accent, #007bff);
|
|
border-color: var(--itflow-accent, #007bff);
|
|
}
|
|
|
|
/* --- Toast fade ---------------------------------------------------------
|
|
Bootstrap's .fade is a .15s transition, which next to toastr's old 1s
|
|
fadeOut reads as a blink. Bootstrap uses the same .showing class for both
|
|
directions, so in and out cannot be timed separately without JS - .5s is
|
|
the compromise. Change the duration here to taste. */
|
|
#itflowFlashToast.toast.fade,
|
|
.itflow-toast-js .toast.fade {
|
|
transition: opacity .5s linear;
|
|
}
|