389 lines
14 KiB
CSS
389 lines
14 KiB
CSS
/* ─── FLEET OPERATOR LIGHT THEME OVERRIDES ─────────────────────────────────── */
|
|
|
|
/* 1. Main Dashboard Shell Background & Text Colors */
|
|
.fleet-dashboard-container {
|
|
background: #F8FAFC !important;
|
|
/* Elegant light background */
|
|
color: #1E293B !important;
|
|
/* Deep slate gray for body text */
|
|
}
|
|
|
|
/* 2. Top Navigation Bar */
|
|
.fleet-dashboard-header {
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
|
|
}
|
|
|
|
.fleet-dashboard-header h1 {
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
.fleet-dashboard-header .desc,
|
|
.fleet-dashboard-header div[style*="color: #94A3B8"],
|
|
.fleet-dashboard-header div[style*="color:#94A3B8"] {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
/* 3. Search Bar and Wrapper in Header */
|
|
.fleet-search-container,
|
|
div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
|
|
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"] {
|
|
background: #F1F5F9 !important;
|
|
border: 1px solid #CBD5E1 !important;
|
|
}
|
|
|
|
.fleet-search-container input,
|
|
input[placeholder*="Search"] {
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
.fleet-search-container input::placeholder,
|
|
input[placeholder*="Search"]::placeholder {
|
|
color: #94A3B8 !important;
|
|
}
|
|
|
|
/* 4. Action Buttons in Header */
|
|
.fleet-header-btn,
|
|
button[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
|
|
button[style*="background:rgba(255, 255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"] {
|
|
background: #FFFFFF !important;
|
|
border: 1px solid #E2E8F0 !important;
|
|
color: #475569 !important;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
|
|
}
|
|
|
|
.fleet-header-btn:hover {
|
|
background: #F8FAFC !important;
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* Vertical divider in header */
|
|
.fleet-header-divider {
|
|
background: #E2E8F0 !important;
|
|
}
|
|
|
|
/* Profile username & user details in header */
|
|
.fleet-profile-name,
|
|
.fleet-profile-title,
|
|
div[style*="color: #fff"][style*="font-size: 0.8rem"],
|
|
div[style*="color:#fff"][style*="font-size:0.8rem"],
|
|
div[style*="font-size: 0.8rem"][style*="color: #fff"],
|
|
div[style*="font-size:0.8rem"][style*="color:#fff"] {
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* 5. Sub-page Tab Toggle Selection Pill Containers */
|
|
div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"][style*="padding: 4px"],
|
|
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"][style*="padding:4px"],
|
|
div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"][style*="padding: 3px"],
|
|
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"][style*="padding:3px"] {
|
|
background: #E2E8F0 !important;
|
|
border: 1px solid #CBD5E1 !important;
|
|
}
|
|
|
|
/* Unselected buttons in Tab Toggles */
|
|
div[style*="background: rgba(255, 255, 255, 0.03)"] button[style*="background: transparent"],
|
|
div[style*="background:rgba(255,255,255,0.03)"] button[style*="background:transparent"],
|
|
div[style*="background: rgba(255, 255, 255, 0.03)"] button:not([style*="background: linear-gradient"]),
|
|
div[style*="background:rgba(255,255,255,0.03)"] button:not([style*="background:linear-gradient"]) {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
/* 6. Cards and Main Content Panels (Overriding semi-transparent dark blocks) */
|
|
div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
|
|
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.08)"],
|
|
div[style*="background: rgba(255, 255, 255, 0.02)"][style*="border: 1px solid rgba(255, 255, 255, 0.07)"],
|
|
div[style*="background:rgba(255,255,255,0.02)"][style*="border:1px solid rgba(255,255,255,0.07)"],
|
|
div[style*="background: rgba(255, 255, 255, 0.01)"][style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
|
|
div[style*="background:rgba(255,255,255,0.01)"][style*="border:1px solid rgba(255,255,255,0.08)"],
|
|
div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(255,255,255,0.07)"],
|
|
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.07)"],
|
|
div[style*="background: rgba(255,255,255,0.02)"][style*="border: 1px solid rgba(255,255,255,0.06)"],
|
|
div[style*="background:rgba(255,255,255,0.02)"][style*="border:1px solid rgba(255,255,255,0.06)"],
|
|
.glass {
|
|
background: #FFFFFF !important;
|
|
border: 1px solid rgba(15, 23, 42, 0.08) !important;
|
|
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03), 0 2px 8px rgba(15, 23, 42, 0.01) !important;
|
|
}
|
|
|
|
/* Card titles inside components */
|
|
.fleet-dashboard-content h1,
|
|
.fleet-dashboard-content h2,
|
|
.fleet-dashboard-content h3,
|
|
.fleet-dashboard-content h4,
|
|
.fleet-dashboard-content .card-title {
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* Overriding white texts to clean slate-dark */
|
|
span[style*="color: #fff"],
|
|
span[style*="color:#fff"],
|
|
div[style*="color: #fff"],
|
|
div[style*="color:#fff"],
|
|
h3[style*="color: #fff"],
|
|
h3[style*="color:#fff"],
|
|
h1[style*="color: #fff"],
|
|
h1[style*="color:#fff"] {
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* Secondary descriptions */
|
|
div[style*="color: #E2E8F0"],
|
|
div[style*="color:#E2E8F0"],
|
|
span[style*="color: #E2E8F0"],
|
|
span[style*="color:#E2E8F0"],
|
|
div[style*="color: #F1F5F9"],
|
|
div[style*="color:#F1F5F9"] {
|
|
color: #1E293B !important;
|
|
}
|
|
|
|
/* Muted labels & dates */
|
|
div[style*="color: #94A3B8"],
|
|
div[style*="color:#94A3B8"],
|
|
span[style*="color: #94A3B8"],
|
|
span[style*="color:#94A3B8"],
|
|
p[style*="color: #94A3B8"],
|
|
p[style*="color:#94A3B8"],
|
|
div[style*="color: #64748B"],
|
|
div[style*="color:#64748B"] {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
/* 7. Inner Stats Grid and Blocks (e.g. Station detail stats cards) */
|
|
div[style*="background: #040B16"],
|
|
div[style*="background:#040B16"] {
|
|
background: #F1F5F9 !important;
|
|
border-color: #CBD5E1 !important;
|
|
}
|
|
|
|
div[style*="background: #040B16"] div[style*="color: #fff"],
|
|
div[style*="background:#040B16"] div[style*="color:#fff"] {
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* Separator lines in cards */
|
|
div[style*="border-bottom: 1px solid rgba(255,255,255,0.04)"],
|
|
div[style*="border-bottom:1px solid rgba(255,255,255,0.04)"],
|
|
div[style*="border-top: 1px solid rgba(255,255,255,0.04)"],
|
|
div[style*="border-top:1px solid rgba(255,255,255,0.04)"],
|
|
div[style*="border-top: 1px solid rgba(255,255,255,0.06)"],
|
|
div[style*="border-top:1px solid rgba(255,255,255,0.06)"] {
|
|
border-color: #E2E8F0 !important;
|
|
}
|
|
|
|
/* 8. Forms & Inputs */
|
|
/* Field Labels */
|
|
label[style*="color: #64748B"],
|
|
label[style*="color:#64748B"],
|
|
label[style*="color: #475569"],
|
|
label[style*="color:#475569"] {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
/* Input Fields and Select Dropdowns */
|
|
input[style*="background: rgba(255, 255, 255, 0.04)"],
|
|
input[style*="background:rgba(255,255,255,0.04)"],
|
|
select[style*="background: rgba(255, 255, 255, 0.04)"],
|
|
select[style*="background:rgba(255,255,255,0.04)"],
|
|
textarea[style*="background: rgba(255, 255, 255, 0.04)"],
|
|
textarea[style*="background:rgba(255,255,255,0.04)"] {
|
|
background: #FFFFFF !important;
|
|
border: 1px solid #CBD5E1 !important;
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
input[style*="background: rgba(255, 255, 255, 0.04)"]:focus,
|
|
select[style*="background: rgba(255, 255, 255, 0.04)"]:focus,
|
|
textarea[style*="background: rgba(255, 255, 255, 0.04)"]:focus {
|
|
border-color: #06B6D4 !important;
|
|
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1) !important;
|
|
}
|
|
|
|
/* Select options backgrounds */
|
|
option[style*="background: #0F172A"],
|
|
option[style*="background:#0F172A"],
|
|
option[style*="background: #0D1526"],
|
|
option[style*="background:#0D1526"] {
|
|
background: #FFFFFF !important;
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* Optgroups */
|
|
optgroup {
|
|
background: #FFFFFF !important;
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* 9. Secondary Buttons (e.g. Cancel, Edit, Sync, etc) */
|
|
button[style*="background: rgba(255, 255, 255, 0.04)"],
|
|
button[style*="background:rgba(255,255,255,0.04)"],
|
|
button[style*="background: rgba(255,255,255,0.03)"],
|
|
button[style*="background:rgba(255,255,255,0.03)"] {
|
|
background: #FFFFFF !important;
|
|
border: 1px solid #CBD5E1 !important;
|
|
color: #475569 !important;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
|
|
}
|
|
|
|
button[style*="background: rgba(255, 255, 255, 0.04)"]:hover,
|
|
button[style*="background:rgba(255,255,255,0.04)"]:hover {
|
|
background: #F8FAFC !important;
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* 10. Modals */
|
|
/* Background backdrop layer */
|
|
div[style*="background: rgba(0,0,0,0.7)"],
|
|
div[style*="background:rgba(0,0,0,0.7)"],
|
|
div[style*="background: rgba(0,0,0,0.75)"],
|
|
div[style*="background:rgba(0,0,0,0.75)"] {
|
|
background: rgba(15, 23, 42, 0.3) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
}
|
|
|
|
/* Modal box wrapper styling */
|
|
div[style*="background: #0F172A"][style*="border: 1px solid rgba(255,255,255,0.1)"],
|
|
div[style*="background:#0F172A"][style*="border:1px solid rgba(255,255,255,0.1)"],
|
|
div[style*="background: #0D1526"][style*="border: 1px solid rgba(255,255,255,0.1)"],
|
|
div[style*="background:#0D1526"][style*="border:1px solid rgba(255,255,255,0.1)"] {
|
|
background: #FFFFFF !important;
|
|
border: 1px solid rgba(15, 23, 42, 0.08) !important;
|
|
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
|
|
color: #1E293B !important;
|
|
}
|
|
|
|
/* Modal Inner Header */
|
|
div[style*="background: linear-gradient(135deg,rgba(6,182,212,0.12),transparent)"],
|
|
div[style*="background:linear-gradient(135deg,rgba(6,182,212,0.12),transparent)"] {
|
|
background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), transparent) !important;
|
|
border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
|
|
}
|
|
|
|
/* Modal close button */
|
|
div[style*="background: #0F172A"] button[style*="background: rgba(255, 255, 255, 0.05)"],
|
|
div[style*="background:#0F172A"] button[style*="background:rgba(255,255,255,0.05)"],
|
|
div[style*="background: #0D1526"] button[style*="background: rgba(255, 255, 255, 0.06)"],
|
|
div[style*="background:#0D1526"] button[style*="background:rgba(255,255,255,0.06)"] {
|
|
background: #F1F5F9 !important;
|
|
border: 1px solid #E2E8F0 !important;
|
|
color: #475569 !important;
|
|
}
|
|
|
|
/* GPS input coordination section in modal */
|
|
div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(255,255,255,0.06)"],
|
|
div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"],
|
|
div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(16,185,129,0.3)"] {
|
|
background: #F1F5F9 !important;
|
|
border-color: #E2E8F0 !important;
|
|
color: #475569 !important;
|
|
}
|
|
|
|
/* 11. Tables inside components */
|
|
table th {
|
|
color: #475569 !important;
|
|
background: #F1F5F9 !important;
|
|
border-bottom: 1px solid #CBD5E1 !important;
|
|
}
|
|
|
|
table tr {
|
|
border-bottom: 1px solid #E2E8F0 !important;
|
|
}
|
|
|
|
table tr:hover {
|
|
background: #F8FAFC !important;
|
|
}
|
|
|
|
/* 12. Crew Scheduling Page Specific Items */
|
|
/* Roster timeline assignments list containers */
|
|
div[style*="background: rgba(6,182,212,0.04)"][style*="border: 1px solid rgba(6,182,212,0.08)"],
|
|
div[style*="background:rgba(6,182,212,0.04)"][style*="border:1px solid rgba(6,182,212,0.08)"] {
|
|
background: rgba(6, 182, 212, 0.06) !important;
|
|
border: 1px solid rgba(6, 182, 212, 0.15) !important;
|
|
}
|
|
|
|
div[style*="background: rgba(59,130,246,0.04)"][style*="border: 1px solid rgba(59,130,246,0.08)"],
|
|
div[style*="background:rgba(59,130,246,0.04)"][style*="border:1px solid rgba(59,130,246,0.08)"] {
|
|
background: rgba(59, 130, 246, 0.06) !important;
|
|
border: 1px solid rgba(59, 130, 246, 0.15) !important;
|
|
}
|
|
|
|
div[style*="background: rgba(16,185,129,0.04)"][style*="border: 1px solid rgba(16,185,129,0.08)"],
|
|
div[style*="background:rgba(16,185,129,0.04)"][style*="border:1px solid rgba(16,185,129,0.08)"] {
|
|
background: rgba(16, 185, 129, 0.06) !important;
|
|
border: 1px solid rgba(16, 185, 129, 0.15) !important;
|
|
}
|
|
|
|
/* 13. Empty / Placeholder States */
|
|
div[style*="border: 1px dashed rgba(255,255,255,0.08)"],
|
|
div[style*="border:1px dashed rgba(255,255,255,0.08)"],
|
|
div[style*="border: 1px dashed rgba(255,255,255,0.1)"],
|
|
div[style*="border:1px dashed rgba(255,255,255,0.1)"] {
|
|
background: #FFFFFF !important;
|
|
border: 1px dashed #CBD5E1 !important;
|
|
}
|
|
|
|
/* 14. Broad Wildcard Overrides (Ensuring 100% full light theme coverage) */
|
|
.fleet-dashboard-content div[style*="rgba(255, 255, 255, 0.0"],
|
|
.fleet-dashboard-content div[style*="rgba(255,255,255,0.0"],
|
|
.fleet-dashboard-content div[style*="rgba(255, 255, 255, 0.1"],
|
|
.fleet-dashboard-content div[style*="rgba(255,255,255,0.1"] {
|
|
background: #FFFFFF !important;
|
|
border-color: rgba(15, 23, 42, 0.08) !important;
|
|
color: #1E293B !important;
|
|
}
|
|
|
|
.fleet-dashboard-content div[style*="color: #fff"],
|
|
.fleet-dashboard-content div[style*="color:#fff"],
|
|
.fleet-dashboard-content div[style*="color: #FFFFFF"],
|
|
.fleet-dashboard-content div[style*="color:#FFFFFF"],
|
|
.fleet-dashboard-content div[style*="color: rgb(255, 255, 255)"],
|
|
.fleet-dashboard-content p[style*="color: #fff"],
|
|
.fleet-dashboard-content p[style*="color:#fff"],
|
|
.fleet-dashboard-content span[style*="color: #fff"],
|
|
.fleet-dashboard-content span[style*="color:#fff"] {
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
.fleet-dashboard-content div[style*="color: rgb(148, 163, 184)"],
|
|
.fleet-dashboard-content div[style*="color: #94A3B8"],
|
|
.fleet-dashboard-content div[style*="color:#94A3B8"] {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
.fleet-dashboard-content input,
|
|
.fleet-dashboard-content select,
|
|
.fleet-dashboard-content textarea {
|
|
background: #FFFFFF !important;
|
|
border: 1px solid #CBD5E1 !important;
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
/* 15. Global Uniform Font Family */
|
|
.fleet-dashboard-container,
|
|
.fleet-dashboard-container *,
|
|
.sidebar,
|
|
.sidebar * {
|
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
|
|
}
|
|
|
|
/* 16. Custom Stations Search Input override (High-specificity to beat broad content overrides) */
|
|
.fleet-dashboard-content .stations-search-input,
|
|
.fleet-dashboard-content input.stations-search-input {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
width: 100% !important;
|
|
color: #0F172A !important;
|
|
}
|
|
|
|
.fleet-dashboard-content .stations-search-input:focus,
|
|
.fleet-dashboard-content input.stations-search-input:focus {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
} |