/* ===================================================================== SwatTech Milk — global UI override layer Loaded in AFTER skin-blue.min.css / AdminLTE.min.css / bootstrap (see application/views/layouts/header.php). Pure cosmetic overrides — no markup or behaviour changes. Safe to delete to revert the look. Palette (Aquatic Mist — teal): Source swatches: Aquatic Mist #9DF0F1 · Morning Dew #D5F5F5 · Glacier Ice #B5ECEB Misty Blue #69C5C7 · Deep Current #26A4A6 --teal #26a4a6 header / primary (Deep Current) --teal-dark #1e8688 logo / hover (derived darker) --teal-accent #2fb0b2 active / focus accent (derived from Misty Blue) --sidebar #0e3e3f sidebar bg (deep teal) --sidebar-sub #14504f submenu / active row --content-bg #e8f6f6 app background (Morning Dew tint) --card-border #d5ecec --ink #2b3a3a body text --muted #6f8c8c ===================================================================== */ /* ---- legacy helper kept from original file ---- */ .set_border { border-top: 1px solid black; border-bottom: 1px solid black; } /* ===================== 1. THEME (skin-blue overrides) ===================== */ .skin-blue .main-header .navbar { background-color: #26a4a6; } .skin-blue .main-header .logo { background-color: #1e8688; } .skin-blue .main-header .logo:hover { background-color: #1a7779; } .skin-blue .main-header .navbar .sidebar-toggle:hover { background-color: #1e8688; } .input-group .input-group-addon { border-radius: 0; color: #fff; background-color: #1a7779 !important; } @media (min-width:768px) { .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu { display: block !important; position: absolute; width: 205px !important; left: 50px } .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right) { width: 205px !important; } } tr.row_error input, tr.row_error input:focus { border-color: #e53935 !important; } .skin-blue .main-header li.user-header { background-color: #26a4a6; } .skin-blue.layout-top-nav .main-header>.logo, .skin-blue.layout-top-nav .main-header>.logo:hover { background-color: #26a4a6; } .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side { background-color: #0e3e3f; } .skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a { background: #14504f; border-left-color: #2fb0b2; } .skin-blue .sidebar-menu>li>.treeview-menu, .skin-blue .treeview-menu { background: #14504f; } /* ===================== 2. BASE / TYPOGRAPHY ===================== */ body, .skin-blue, .content-wrapper, .main-footer { font-family: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: #2b3a3a; -webkit-font-smoothing: antialiased; } .content-wrapper, .right-side { background-color: #e8f6f6; } /* Links on theme. The agency/client portals (DashboardAgency / DashboardUser) render via Layouts with $default=false, so their has no .skin-blue class and the chrome-scoped rules above never reach them — but AdminLTE's global blue link colour (user.min.css) still does. Override it here, un-scoped, so portal cards / welcome bar / logout links match the teal theme. On admin pages the more-specific .skin-blue navbar/sidebar link rules still win. */ a { color: #26a4a6; } a:hover, a:focus, a:active { color: #1e8688; } input[type="checkbox"] { accent-color: #1a7779 !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #1a7779 !important; color: white; } select option:hover, select option:focus, select option:active, select option:checked { box-shadow: 0 0 10px 100px #1a7779 inset !important; /* Your custom hex color */ background-color: #1a7779 !important; /* Light gray background */ color: #ffffff !important; /* Dark text color */ } /* page title */ .content-header>h1 { font-size: 22px; font-weight: 600; color: #1f3536; letter-spacing: .2px; } .content-header>h1>small { color: #6f8c8c; font-weight: 400; } .content-header { padding: 18px 20px 6px; } /* ===================== 3. HEADER POLISH ===================== */ .main-header .navbar, .main-header .logo { box-shadow: 0 1px 4px rgba(0, 0, 0, .12); } .main-header .logo .logo-lg { font-weight: 600; letter-spacing: .3px; } .skin-blue .main-header .navbar .nav>li>a { transition: background-color .15s ease; } /* sidebar user name a touch cleaner */ .skin-blue .sidebar-menu>li>a { transition: background-color .15s ease, border-color .15s ease; } /* ===================== 4. BOXES -> CARDS ===================== */ .box { border-radius: 10px; border: 1px solid #d5ecec; border-top: 1px solid #d5ecec; /* drop the heavy colored top bar */ box-shadow: 0 1px 3px rgba(16, 33, 24, .06), 0 1px 2px rgba(16, 33, 24, .04); transition: box-shadow .18s ease; } .box:hover { box-shadow: 0 4px 14px rgba(16, 33, 24, .08); } .box.box-primary, .box.box-success { border-top: 3px solid #2fb0b2; } .box.box-info { border-top: 3px solid #0288d1; } .box.box-warning { border-top: 3px solid #f9a825; } .box.box-danger { border-top: 3px solid #e53935; } .box-header { padding: 14px 18px; border-bottom: 1px solid #e1f2f2; } .box-header.with-border { border-bottom: 1px solid #e1f2f2; } .box-header .box-title { font-size: 16px; font-weight: 600; color: #1f3536; } .box-body { padding: 16px 18px; } /* Coloured section header bars used across the agency/client portals (manageClient, sales reports, order/crate report) — AdminLTE-blue by default (.box_header_color in user.min.css). Re-tint to the theme teal. */ .box_header_color { background: #26a4a6; color: #fff; } /* ===================== 5. BUTTONS ===================== */ .btn { border-radius: 6px; font-weight: 500; padding: 7px 16px; border: 1px solid transparent; box-shadow: none; text-shadow: none; transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } .btn-flat { border-radius: 6px; } .btn-primary { background-color: #26a4a6; border-color: #26a4a6; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #1e8688; border-color: #1e8688; } .btn-success { background-color: #2fb0b2; border-color: #2fb0b2; } .btn-success:hover, .btn-success:focus { background-color: #2a9fa1; border-color: #2a9fa1; } .btn-info { background-color: #0288d1; border-color: #0288d1; } .btn-info:hover, .btn-info:focus { background-color: #0277b5; border-color: #0277b5; } .btn-warning { background-color: #f9a825; border-color: #f9a825; color: #fff; } .btn-warning:hover, .btn-warning:focus { background-color: #f29100; border-color: #f29100; color: #fff; } .btn-danger { background-color: #e53935; border-color: #e53935; } .btn-danger:hover, .btn-danger:focus { background-color: #c62828; border-color: #c62828; } .btn-default { background-color: #fff; border-color: #cfe5e5; color: #3d4f4e; } .btn-default:hover, .btn-default:focus { background-color: #ecf8f8; border-color: #bedcdc; } .btn-sm, .btn-xs { border-radius: 5px; } /* ===================== 6. FORM CONTROLS ===================== */ .form-control { border-radius: 6px; border: 1px solid #cfe5e5; box-shadow: none; color: #2b3a3a; transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus { border-color: #2fb0b2 !important; box-shadow: 0 0 0 3px rgba(47, 176, 178, .15); } label, .control-label { color: #344544; font-weight: 600; } .has-error .form-control { border-color: #e53935; } .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(229, 57, 53, .15); } /* select2 (v3 and v4 selectors) to match inputs */ .select2-container .select2-choice, .select2-container--default .select2-selection--single { border-radius: 6px !important; border: 1px solid #cfe5e5 !important; height: 34px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; } /* ===================== 7. TABLES (general) ===================== */ .table>thead>tr>th { border-bottom: 2px solid #d5ecec; /* background: #eef8f8; color: #2e3f3e; */ background: #26a4a6; color: #fff; font-weight: 600; text-transform: none; } .table>tbody>tr>td, .table>thead>tr>th { padding: 11px 14px; vertical-align: middle; } .table-bordered, .table-bordered>thead>tr>th, .table-bordered>tbody>tr>td { border-color: #dcefef; } .table-striped>tbody>tr:nth-of-type(odd) { background-color: #f1fbfb; } .table-hover>tbody>tr:hover { background-color: #e3f4f4; } /* ---- KEEP THE SALES ENTRY GRID DENSE (must come after the rules above) ---- The add/edit sales grid is a wide clients x products matrix with its own fixed columns / fixed header. Reset the generous padding so rows stay tight and the layout the JS measures does not change. */ .form_product_sales_table>thead>tr>th, .form_product_sales_table>tbody>tr>td, .form_product_sales_table>tfoot>tr>td, .table1>thead>tr>th, .table1>tbody>tr>td, .table1>tfoot>tr>td { padding: 3px 4px !important; vertical-align: middle; } .form_product_sales_table>thead>tr>th { background: #26a4a6; color: #fff; } .form_product_sales_table { font-size: 12px; } /* ===================== 8. DATATABLES CHROME ===================== */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 6px; border: 1px solid #cfe5e5; padding: 4px 8px; } .dataTables_wrapper .dataTables_paginate .paginate_button { /* border-radius: 6px !important; padding: 5px 11px !important; margin-left: 3px; border: 1px solid #d6eded !important; background: #fff !important; color: #344544 !important; */ } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #26a4a6 !important; border-color: #26a4a6 !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #e3f4f4 !important; border-color: #c4e6e6 !important; color: #1f3536 !important; } /* ===================== 9. DASHBOARD WIDGETS ===================== */ .small-box, .info-box { border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 33, 24, .08), 0 1px 2px rgba(16, 33, 24, .04); overflow: hidden; transition: transform .12s ease, box-shadow .18s ease; } .small-box:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 33, 24, .12); } .small-box .icon { transition: transform .2s ease; } .small-box:hover .icon { transform: scale(1.06); } .info-box-icon { border-radius: 10px 0 0 10px; } /* badges / labels */ .label { border-radius: 5px; font-weight: 600; padding: .25em .55em; } .badge { border-radius: 10px; } /* nav tabs */ .nav-tabs-custom { border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 33, 24, .06); } .nav-tabs-custom>.nav-tabs>li.active>a { border-top-color: #2fb0b2; } /* modals */ .modal-content { border-radius: 12px; border: none; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); } .modal-header { border-bottom: 1px solid #e1f2f2; } .modal-footer { border-top: 1px solid #e1f2f2; } /* alerts / callouts a touch softer */ .callout { border-radius: 8px; } /* ===================== 10. LOGIN PAGE ===================== */ .login-page, .register-page { background: linear-gradient(135deg, #1e8688 0%, #26a4a6 60%, #2fb0b2 100%); } .login-logo, .register-logo { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .login-logo a, .login-logo strong, .login-logo p { color: #fff !important; } .login-box-body, .register-box-body { border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); border: none; padding: 28px 26px; } .login-box-msg { color: #3d4f4e; font-weight: 600; } .login-page .btn-primary, .login-page .btn-block { background-color: #26a4a6; border-color: #26a4a6; } .login-page .btn-primary:hover { background-color: #1e8688; border-color: #1e8688; }