/* PrincePOS Enterprise Custom Stylesheet */ /* ================================================================ * GLOBAL PALETTE — DEEP BLUE / NAVY / CYAN -> OLIVE GREEN + GREY * ================================================================ * Goal: nothing deep blue should render anywhere in the platform, * WITHOUT touching anything that isn't actually blue. * * This version only targets exact, known Bootstrap/AdminLTE class * names that are genuinely tied to the blue brand color. It does * NOT use substring wildcards (which can accidentally match * unrelated classes — e.g. the Font Awesome "fa-skype" icon class * contains "sky" as a substring and was being wrongly recolored * by an earlier version of this file). It does NOT force a * global body text/background color or force white backgrounds * onto cards/modals, because those broke contrast on dark * sections and hid white icons/text platform-wide. * * FIX IN THIS VERSION: removed two blanket rules that were here * before — * a, a:visited { color: #556B2F !important; } * *:hover { color: #556B2F !important; } * These forced EVERY link (and everything on hover) to the same * dark olive as the new background color, which is also what * .bg-navy / the footer background got recolored to. Text color * === background color made footer links, contact info, and * policy links invisible even though the HTML was correct — * it wasn't missing content, it was unreadable content. Scoped, * lower-priority link/hover colors are defined further down * instead, so dark-background areas (like the footer) keep their * own light text color rather than being force-overridden. * * If any blue still appears after this loads, it is one of: * 1) An inline style in the HTML (style="color:#...") — CSS * cannot override that without matching the exact element. * 2) A hardcoded hex value in ANOTHER stylesheet that loads * AFTER this file — move this file's tag to be the * LAST stylesheet in , after adminlte.css, custom.css, * fontawesome, etc. * 3) A color set via JS/inline SVG fill attribute rather than CSS. * Send me the specific page/element and I'll target it precisely * rather than guessing with a broad rule. * ================================================================ */ :root { /* Core palette */ --deep-blue: #556B2F !important; /* dark olive green (was navy/deep blue) */ --accent-cyan: #9ACD32 !important; /* yellow-green accent (was cyan) */ --olive-primary: #556B2F !important; --olive-dark: #3B4D23 !important; --olive-light: #9ACD32 !important; --grey-dark: #374151 !important; --grey-mid: #6B7280 !important; --grey-light: #9CA3AF !important; --grey-bg: #F3F4F6 !important; /* Common Bootstrap/theme variable names, redefined defensively in case the base theme sets these instead of --deep-blue */ --primary: #556B2F !important; --bs-primary: #556B2F !important; --info: #6B7280 !important; --bs-info: #6B7280 !important; --secondary: #6B7280 !important; --bs-secondary: #6B7280 !important; --navy: #556B2F !important; --sidebar-bg: #3B4D23 !important; --navbar-bg: #556B2F !important; } /* ================================================================ * BACKGROUNDS — known blue/navy background utility & theme classes * ================================================================ */ .bg-navy, .bg-deep-blue, .bg-primary, .bg-info, .bg-blue, .bg-cyan, .bg-indigo, .bg-sky, .navbar-navy, .navbar-primary, .main-header, .main-sidebar, .brand-link, .card-primary > .card-header, .card-info > .card-header, .modal-header.bg-primary, .table-primary, .badge-primary, .badge-info, .alert-primary, .alert-info, .progress-bar { background-color: #556B2F !important; border-color: #3B4D23 !important; } /* ================================================================ * TEXT — known blue/navy text utility & theme classes only * ================================================================ */ .text-accent-cyan, .text-deep-blue, .text-primary, .text-info, .text-blue, .text-cyan, .text-indigo, .text-sky, .nav-link.active { color: #556B2F !important; } /* Icons/svg nested specifically inside the known blue-background elements above should use the lighter olive for contrast */ .bg-navy i, .bg-navy svg, .bg-navy span, .bg-primary i, .bg-primary svg, .bg-primary span, .main-header i, .main-header svg, .main-sidebar i, .main-sidebar svg, .brand-link i, .brand-link svg { color: #9ACD32 !important; } /* ================================================================ * BUTTONS * ================================================================ */ .btn-primary, .btn-info, .btn-navy, .btn-blue, .btn-cyan { background-color: #556B2F !important; border-color: #3B4D23 !important; color: #FFFFFF !important; } .btn-primary:hover, .btn-info:hover, .btn-navy:hover, .btn-blue:hover { background-color: #3B4D23 !important; border-color: #2C3A1A !important; } .btn-outline-primary, .btn-outline-info { color: #556B2F !important; border-color: #556B2F !important; } .btn-outline-primary:hover, .btn-outline-info:hover { background-color: #556B2F !important; color: #FFFFFF !important; } /* ================================================================ * BORDERS * ================================================================ */ .border-primary, .border-info, .border-navy, .border-blue { border-color: #556B2F !important; } /* ================================================================ * FORM FOCUS RINGS / SELECTION HIGHLIGHTS * (cosmetic only — does not affect layout, visibility or contrast * of existing content, safe to keep) * ================================================================ */ input:focus, select:focus, textarea:focus, .form-control:focus { border-color: #556B2F !important; box-shadow: 0 0 0 0.2rem rgba(85, 107, 47, 0.25) !important; } /* ================================================================ * SCROLLBAR (Chrome/Edge) — cosmetic only, does not affect page * content or visibility * ================================================================ */ ::-webkit-scrollbar-thumb { background-color: #556B2F !important; } ::-webkit-scrollbar-track { background-color: #F3F4F6 !important; } /* ================================================================ * LINKS ON LIGHT BACKGROUNDS ONLY (replaces the old blanket * "a, a:visited" rule). Scoped to normal content areas so links * inside dark sections — the footer, sidebar, dark cards — are * left alone and keep their own (usually light) color for * contrast. * ================================================================ */ .content-wrapper a, .card-body a, .modal-body a, .policy-modal-body a { color: #556B2F; } .content-wrapper a:hover, .card-body a:hover, .modal-body a:hover, .policy-modal-body a:hover { color: #3B4D23; text-decoration: underline; } /* ================================================================ * ORIGINAL RULES (unchanged, preserved as-is) * ================================================================ */ .text-accent-cyan { color: var(--accent-cyan) !important; } .bg-navy { background-color: var(--deep-blue) !important; } /* Modern responsive animations and utility classes */ .hover-scale { transition: transform 0.2s ease-in-out; } .hover-scale:hover { transform: scale(1.03); } /* Text selection highlight */ ::selection { background-color: #556B2F !important; color: #ffffff !important; } ::-moz-selection { background-color: #556B2F !important; color: #ffffff !important; }