490 lines
17 KiB
CSS
490 lines
17 KiB
CSS
/* ════════════════════════════════════════════════════════════════════════
|
|
Janitorial QC — MODERN design skin (design A/B test — "modern")
|
|
────────────────────────────────────────────────────────────────────────
|
|
Loaded ONLY by templates/layouts/modern.html, and always AFTER
|
|
theme.css, so every token below overrides the classic one.
|
|
|
|
The classic design is completely untouched by this file.
|
|
|
|
Palette sampled from the JQC_design deck:
|
|
brand #155F82 deep teal-blue top bar / table headers
|
|
brand-700 #0F4A66 hover / pressed
|
|
brand-050 #DCEBF5 soft icon tiles, active rail rows
|
|
page #EAEEF1 page background
|
|
surface #FFFFFF cards
|
|
ink #1D2A32 headings
|
|
muted #6B7A85 secondary text
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
|
|
body.jqc-modern {
|
|
--jqc-brand: #155F82;
|
|
--jqc-brand-700: #0F4A66;
|
|
--jqc-brand-600: #1B6E93;
|
|
--jqc-brand-050: #DCEBF5;
|
|
--jqc-brand-025: #E9F0F8;
|
|
--jqc-page: #EAEEF1;
|
|
--jqc-ink: #1D2A32;
|
|
--jqc-heading: #1D2A32;
|
|
--jqc-muted: #6B7A85;
|
|
--jqc-faint: #93A1AB;
|
|
--jqc-border: #E3E8EC;
|
|
--jqc-border-2: #CFD9E0;
|
|
--jqc-surface: #F5F8FA; /* subtle fill — hovers, muted rows (theme.css) */
|
|
--jqc-surface-2: #EEF3F6;
|
|
--jqc-card-bg: #FFFFFF; /* raised surfaces — cards, KPI tiles, sidebar */
|
|
--jqc-accent: #155F82;
|
|
--jqc-accent-700: #0F4A66;
|
|
--jqc-accent-50: #DCEBF5;
|
|
--jqc-shadow: 0 1px 2px rgba(21, 46, 62, .05), 0 6px 18px rgba(21, 46, 62, .06);
|
|
--jqc-shadow-md: 0 10px 30px rgba(21, 46, 62, .12);
|
|
|
|
--bs-primary: #155F82;
|
|
--bs-primary-rgb: 21, 95, 130;
|
|
--bs-link-color: #155F82;
|
|
--bs-link-color-rgb: 21, 95, 130;
|
|
--bs-link-hover-color: #0F4A66;
|
|
--bs-link-hover-color-rgb: 15, 74, 102;
|
|
--bs-body-bg: #EAEEF1;
|
|
--bs-body-color: #1D2A32;
|
|
--bs-border-color: #E3E8EC;
|
|
--bs-border-radius: .6rem;
|
|
--bs-border-radius-sm: .45rem;
|
|
--bs-border-radius-lg: 1rem;
|
|
--bs-border-radius-xl: 1.15rem;
|
|
|
|
--jqc-topbar-h: 72px;
|
|
--jqc-sidebar-w: 232px;
|
|
|
|
background-color: var(--jqc-page);
|
|
color: var(--jqc-ink);
|
|
font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
/* ── 2. Top bar ──────────────────────────────────────────────────────────── */
|
|
.jqc-modern .jqc-topbar {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
height: var(--jqc-topbar-h);
|
|
z-index: 1035;
|
|
background: var(--jqc-brand);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 0 20px;
|
|
padding-top: env(safe-area-inset-top);
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, .10);
|
|
}
|
|
.jqc-modern .jqc-brand {
|
|
text-decoration: none;
|
|
color: #fff;
|
|
line-height: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
.jqc-modern .jqc-brand-mark {
|
|
display: block;
|
|
font-size: 1.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: -.02em;
|
|
}
|
|
.jqc-modern .jqc-brand-sub {
|
|
display: block;
|
|
font-size: .68rem;
|
|
opacity: .82;
|
|
margin-top: 3px;
|
|
}
|
|
.jqc-modern .jqc-search {
|
|
position: relative;
|
|
margin-left: auto;
|
|
width: min(420px, 42vw);
|
|
}
|
|
.jqc-modern .jqc-search i {
|
|
position: absolute;
|
|
left: 16px; top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--jqc-muted);
|
|
pointer-events: none;
|
|
}
|
|
.jqc-modern .jqc-search .form-control {
|
|
border: none;
|
|
border-radius: 999px;
|
|
height: 42px;
|
|
padding-left: 44px;
|
|
background: #fff;
|
|
font-size: .92rem;
|
|
}
|
|
.jqc-modern .jqc-search .form-control:focus {
|
|
box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35);
|
|
}
|
|
.jqc-modern .jqc-topbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 0 0 auto;
|
|
}
|
|
.jqc-modern .jqc-icon-btn {
|
|
color: #fff;
|
|
font-size: 1.2rem;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px; height: 40px;
|
|
border-radius: 50%;
|
|
transition: background-color .15s;
|
|
}
|
|
.jqc-modern .jqc-icon-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
|
|
.jqc-modern .jqc-avatar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px; height: 44px;
|
|
border-radius: 50%;
|
|
background: var(--jqc-brand-700);
|
|
border: 2px solid rgba(255, 255, 255, .85);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
font-size: .9rem;
|
|
letter-spacing: .02em;
|
|
text-decoration: none;
|
|
}
|
|
.jqc-modern .jqc-avatar:hover { background: #0b3b53; color: #fff; }
|
|
.jqc-modern .jqc-hamburger {
|
|
background: transparent;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
/* ── 3. Sidebar ──────────────────────────────────────────────────────────── */
|
|
.jqc-modern .jqc-sidebar {
|
|
position: fixed;
|
|
top: var(--jqc-topbar-h);
|
|
bottom: 0;
|
|
left: 0;
|
|
width: var(--jqc-sidebar-w);
|
|
background: var(--jqc-card-bg);
|
|
border-right: 1px solid var(--jqc-border);
|
|
overflow-y: auto;
|
|
z-index: 1030;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 10px;
|
|
}
|
|
.jqc-modern .jqc-nav { flex: 1 1 auto; }
|
|
.jqc-modern .jqc-nav-link {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 13px 18px 13px 22px;
|
|
color: #43525C;
|
|
text-decoration: none;
|
|
font-size: .95rem;
|
|
font-weight: 500;
|
|
transition: background-color .15s, color .15s;
|
|
}
|
|
.jqc-modern .jqc-nav-link i { font-size: 1.15rem; width: 22px; text-align: center; }
|
|
.jqc-modern .jqc-nav-link span { flex: 1 1 auto; }
|
|
.jqc-modern .jqc-nav-link:hover { background: var(--jqc-brand-025); color: var(--jqc-brand); }
|
|
.jqc-modern .jqc-nav-link.active {
|
|
background: var(--jqc-brand-025);
|
|
color: var(--jqc-brand);
|
|
font-weight: 700;
|
|
}
|
|
.jqc-modern .jqc-nav-link.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 5px;
|
|
background: var(--jqc-brand);
|
|
}
|
|
.jqc-modern .jqc-nav-caret { font-size: .7rem !important; width: auto !important; opacity: .6; }
|
|
.jqc-modern .jqc-nav-badge {
|
|
background: #D9534F;
|
|
color: #fff;
|
|
border-radius: 999px;
|
|
font-size: .68rem;
|
|
font-weight: 700;
|
|
padding: 1px 7px;
|
|
line-height: 1.5;
|
|
}
|
|
.jqc-modern .jqc-nav-sublink {
|
|
display: block;
|
|
padding: 9px 18px 9px 58px;
|
|
font-size: .88rem;
|
|
color: #5A6A75;
|
|
text-decoration: none;
|
|
}
|
|
.jqc-modern .jqc-nav-sublink:hover { background: var(--jqc-brand-025); color: var(--jqc-brand); }
|
|
.jqc-modern .jqc-nav-sublink.active { color: var(--jqc-brand); font-weight: 700; }
|
|
.jqc-modern .jqc-sidebar-foot {
|
|
flex: 0 0 auto;
|
|
padding: 14px 16px 20px;
|
|
border-top: 1px solid var(--jqc-border);
|
|
}
|
|
.jqc-modern .jqc-switch-btn {
|
|
width: 100%;
|
|
background: #fff;
|
|
border: 1.5px solid var(--jqc-brand);
|
|
color: var(--jqc-brand);
|
|
border-radius: 999px;
|
|
font-size: .82rem;
|
|
font-weight: 600;
|
|
padding: 8px 10px;
|
|
transition: background-color .15s, color .15s;
|
|
}
|
|
.jqc-modern .jqc-switch-btn:hover { background: var(--jqc-brand); color: #fff; }
|
|
.jqc-modern .jqc-sidebar-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 34, 46, .45);
|
|
z-index: 1029;
|
|
display: none;
|
|
}
|
|
.jqc-modern .jqc-sidebar-backdrop.show { display: block; }
|
|
|
|
/* ── 4. Main region ──────────────────────────────────────────────────────── */
|
|
.jqc-modern .jqc-main {
|
|
margin-left: var(--jqc-sidebar-w);
|
|
padding: calc(var(--jqc-topbar-h) + 22px) 10px 40px;
|
|
min-height: 100vh;
|
|
}
|
|
.jqc-modern .jqc-main > .container-fluid { padding-inline: 14px; }
|
|
|
|
@media (max-width: 991.98px) {
|
|
.jqc-modern .jqc-sidebar {
|
|
transform: translateX(-100%);
|
|
transition: transform .2s ease;
|
|
box-shadow: 0 0 24px rgba(15, 34, 46, .18);
|
|
}
|
|
.jqc-modern .jqc-sidebar.open { transform: translateX(0); }
|
|
.jqc-modern .jqc-main { margin-left: 0; }
|
|
.jqc-modern .jqc-search { width: auto; flex: 1 1 auto; }
|
|
.jqc-modern .jqc-brand-sub { display: none; }
|
|
}
|
|
|
|
/* ── 5. Page heading block (used by the rebuilt modern pages) ────────────── */
|
|
.jqc-modern .jqc-page-head { margin-bottom: 20px; }
|
|
.jqc-modern .jqc-page-head h1,
|
|
.jqc-modern .jqc-page-title {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
letter-spacing: -.02em;
|
|
color: var(--jqc-ink);
|
|
margin: 0;
|
|
}
|
|
/* Opt-in centring — the default is left-aligned. `.center` on the head block
|
|
centres the title and its sub-line together. */
|
|
.jqc-modern .jqc-page-head.center,
|
|
.jqc-modern .jqc-page-title.center { text-align: center; }
|
|
.jqc-modern .jqc-page-sub {
|
|
color: var(--jqc-muted);
|
|
font-size: .95rem;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ── 6. Cards / surfaces (applies to every page, rebuilt or not) ─────────── */
|
|
.jqc-modern .card {
|
|
border: 1px solid var(--jqc-border);
|
|
border-radius: 16px;
|
|
box-shadow: var(--jqc-shadow);
|
|
}
|
|
.jqc-modern .card-header {
|
|
background: var(--jqc-card-bg);
|
|
border-bottom: 1px solid var(--jqc-border);
|
|
color: var(--jqc-ink);
|
|
font-weight: 700;
|
|
padding: .9rem 1.15rem;
|
|
}
|
|
.jqc-modern .card-header.bg-light,
|
|
.jqc-modern .card-header.bg-white { background: var(--jqc-card-bg) !important; }
|
|
.jqc-modern .card-body { padding: 1.15rem; }
|
|
|
|
.jqc-modern .jqc-card {
|
|
background: var(--jqc-card-bg);
|
|
border: 1px solid var(--jqc-border);
|
|
border-radius: 16px;
|
|
box-shadow: var(--jqc-shadow);
|
|
padding: 20px 22px;
|
|
margin-bottom: 22px;
|
|
}
|
|
.jqc-modern .jqc-card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
color: var(--jqc-ink);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Soft square icon tile — the deck's signature element */
|
|
.jqc-modern .jqc-tile-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 42px; height: 42px;
|
|
border-radius: 11px;
|
|
background: var(--jqc-brand-050);
|
|
color: var(--jqc-brand);
|
|
font-size: 1.15rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
.jqc-modern .jqc-tile-icon.lg { width: 74px; height: 74px; border-radius: 18px; font-size: 2rem; }
|
|
|
|
/* KPI tiles */
|
|
.jqc-modern .jqc-kpi {
|
|
background: var(--jqc-card-bg);
|
|
border: 1px solid var(--jqc-border);
|
|
border-radius: 16px;
|
|
box-shadow: var(--jqc-shadow);
|
|
padding: 18px 20px;
|
|
height: 100%;
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: box-shadow .15s, transform .15s;
|
|
}
|
|
a.jqc-kpi:hover { box-shadow: var(--jqc-shadow-md); transform: translateY(-1px); color: inherit; }
|
|
.jqc-modern .jqc-kpi-value {
|
|
font-size: 2.1rem;
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
color: var(--jqc-ink);
|
|
margin-top: 10px;
|
|
}
|
|
.jqc-modern .jqc-kpi-label { font-size: .85rem; color: var(--jqc-muted); margin-top: 2px; }
|
|
|
|
/* Label / value rows inside summary cards */
|
|
.jqc-modern .jqc-stat-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 11px 2px;
|
|
border-bottom: 1px solid var(--jqc-border);
|
|
text-decoration: none;
|
|
color: var(--jqc-ink);
|
|
}
|
|
.jqc-modern .jqc-stat-row:last-child { border-bottom: none; }
|
|
.jqc-modern .jqc-stat-row:hover { color: var(--jqc-brand); }
|
|
.jqc-modern .jqc-stat-label { font-size: .95rem; display: flex; align-items: center; gap: 9px; }
|
|
.jqc-modern .jqc-stat-value { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
|
|
.jqc-modern .jqc-dot {
|
|
width: 9px; height: 9px; border-radius: 50%;
|
|
display: inline-block; flex: 0 0 auto;
|
|
}
|
|
|
|
/* Hub cards (Facility / Support pages) */
|
|
.jqc-modern .jqc-hub-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--jqc-card-bg);
|
|
border: 1px solid var(--jqc-border);
|
|
border-radius: 16px;
|
|
box-shadow: var(--jqc-shadow);
|
|
padding: 24px 26px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: box-shadow .15s, transform .15s;
|
|
}
|
|
.jqc-modern .jqc-hub-card:hover { box-shadow: var(--jqc-shadow-md); transform: translateY(-2px); color: inherit; }
|
|
.jqc-modern .jqc-hub-title { font-size: 1.3rem; font-weight: 800; color: var(--jqc-ink); }
|
|
.jqc-modern .jqc-hub-text { color: var(--jqc-muted); font-size: .93rem; margin-top: 6px; }
|
|
.jqc-modern .jqc-hub-open { color: var(--jqc-brand); font-weight: 700; font-size: .9rem; margin-top: auto; padding-top: 18px; }
|
|
.jqc-modern .jqc-hub-card.dark { background: var(--jqc-brand); border-color: var(--jqc-brand); }
|
|
.jqc-modern .jqc-hub-card.dark .jqc-hub-title,
|
|
.jqc-modern .jqc-hub-card.dark .jqc-hub-text { color: #fff; }
|
|
.jqc-modern .jqc-hub-card.dark .jqc-tile-icon { background: #fff; }
|
|
/* The default .jqc-hub-open is brand-coloured, which is invisible on the dark
|
|
(brand-filled) card — it needs its own colour. */
|
|
.jqc-modern .jqc-hub-card.dark .jqc-hub-open { color: #fff; }
|
|
|
|
/* ── 7. Tables — dark teal header, as in the deck ────────────────────────── */
|
|
.jqc-modern .table { --bs-table-border-color: var(--jqc-border); margin-bottom: 0; }
|
|
|
|
/* Recoloured via Bootstrap's own table CSS variables rather than !important, so
|
|
a page that deliberately wants a different header (table-dark, a tinted
|
|
report header) can still override it with a normal rule. */
|
|
.jqc-modern .table > thead > tr > th,
|
|
.jqc-modern .table thead.table-light > tr > th,
|
|
.jqc-modern .table > thead th {
|
|
--bs-table-bg: var(--jqc-brand);
|
|
--bs-table-color: #fff;
|
|
background-color: var(--jqc-brand);
|
|
color: #fff;
|
|
border-color: var(--jqc-brand-700);
|
|
font-weight: 600;
|
|
font-size: .88rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* nowrap only where the column set is known-narrow (dashboard panels); wide
|
|
tables such as the issues list and audit trail must be free to wrap rather
|
|
than force a horizontal scroll on iPad portrait. */
|
|
.jqc-modern .jqc-card .table > thead th { white-space: nowrap; }
|
|
.jqc-modern .table > tbody > tr > td { vertical-align: middle; font-size: .92rem; }
|
|
.jqc-modern .table-hover > tbody > tr:hover > * { background-color: var(--jqc-brand-025); }
|
|
.jqc-modern .jqc-table-wrap {
|
|
border: 1px solid var(--jqc-border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── 8. Buttons, badges, forms ───────────────────────────────────────────── */
|
|
.jqc-modern .btn { border-radius: .6rem; font-weight: 600; }
|
|
.jqc-modern .btn-primary {
|
|
--bs-btn-bg: var(--jqc-brand); --bs-btn-border-color: var(--jqc-brand);
|
|
--bs-btn-hover-bg: var(--jqc-brand-700); --bs-btn-hover-border-color: var(--jqc-brand-700);
|
|
--bs-btn-active-bg: var(--jqc-brand-700); --bs-btn-active-border-color: var(--jqc-brand-700);
|
|
--bs-btn-disabled-bg: var(--jqc-brand); --bs-btn-disabled-border-color: var(--jqc-brand);
|
|
}
|
|
.jqc-modern .btn-outline-primary {
|
|
--bs-btn-color: var(--jqc-brand); --bs-btn-border-color: var(--jqc-brand);
|
|
--bs-btn-hover-bg: var(--jqc-brand); --bs-btn-hover-border-color: var(--jqc-brand);
|
|
--bs-btn-active-bg: var(--jqc-brand); --bs-btn-active-border-color: var(--jqc-brand);
|
|
}
|
|
.jqc-modern .bg-primary { background-color: var(--jqc-brand) !important; }
|
|
.jqc-modern .text-primary { color: var(--jqc-brand) !important; }
|
|
.jqc-modern .badge { border-radius: 999px; font-weight: 700; padding: .35em .7em; }
|
|
.jqc-modern .form-control,
|
|
.jqc-modern .form-select {
|
|
border-radius: .6rem;
|
|
border-color: var(--jqc-border-2);
|
|
}
|
|
.jqc-modern .form-control:focus,
|
|
.jqc-modern .form-select:focus {
|
|
border-color: var(--jqc-brand);
|
|
box-shadow: 0 0 0 .18rem rgba(21, 95, 130, .18);
|
|
}
|
|
|
|
/* Filter bar — the rounded pill row from the deck */
|
|
.jqc-modern .jqc-filter-bar {
|
|
background: var(--jqc-card-bg);
|
|
border: 1px solid var(--jqc-border);
|
|
border-radius: 16px;
|
|
box-shadow: var(--jqc-shadow);
|
|
padding: 14px 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.jqc-modern .jqc-filter-bar .form-control,
|
|
.jqc-modern .jqc-filter-bar .form-select { border-radius: 999px; padding-inline: 16px; }
|
|
|
|
/* ── 9. Alerts / misc ────────────────────────────────────────────────────── */
|
|
.jqc-modern .alert { border-radius: 12px; border: 1px solid var(--jqc-border); }
|
|
.jqc-modern .dropdown-menu { border-radius: 12px; border-color: var(--jqc-border); box-shadow: var(--jqc-shadow-md); }
|
|
.jqc-modern .nav-tabs .nav-link.active { color: var(--jqc-brand); }
|
|
.jqc-modern .progress-bar.bg-success { background-color: #2E7D4F !important; }
|
|
|
|
/* Print: drop the chrome entirely */
|
|
@media print {
|
|
.jqc-modern .jqc-topbar,
|
|
.jqc-modern .jqc-sidebar,
|
|
.jqc-modern .jqc-sidebar-backdrop { display: none !important; }
|
|
.jqc-modern .jqc-main { margin-left: 0; padding-top: 0; }
|
|
}
|