/******************* /*CIRCET custom CSS (based on previous CNORTH file)*******************/ /******************* /*Theme tokens (CIRCET Variant A) ************************************/ /* Primary: #f17f00 | Hover: #d86f00 | Active/Focus: #b85e00 Accent: #fce2ba | Accent hover: #f7d39a Light BG: #fffdf5 Text: #672901 Alert/Error (brand style): #f17f00 | Hover: #d86f00 */ :root { --ci-primary: #f17f00; --ci-primary-hover: #d86f00; --ci-primary-active: #b85e00; --ci-accent: #fce2ba; --ci-accent-hover: #f7d39a; --ci-bg-light: #fffdf5; --ci-text: #672901; /* Brand-style alerts (not red) */ --ci-alert: #f17f00; --ci-alert-hover: #d86f00; } /******************* /*Top bar *******************/ .topbar { background: var(--ci-primary); } .topbar .navbar-header { background: #ffffff; } .topbar .top-navbar .navbar-header .navbar-brand .light-logo { display: none; color: rgba(255, 255, 255, 0.85); } .topbar .navbar-light .navbar-nav .nav-item > a.nav-link { color: #ffffff !important; } .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover, .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus { color: rgba(255, 255, 255, 0.78) !important; } /******************* /*General Elements *******************/ a.link:hover, a.link:focus { color: var(--ci-accent) !important; } .bg-theme { background-color: var(--ci-accent) !important; } .ng5-slider .ng5-slider-pointer { background-color: var(--ci-accent) !important; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: var(--ci-accent); border-color: var(--ci-accent); } .right-sidebar .rpanel-title { background: var(--ci-accent); } .stylish-table tbody tr:hover, .stylish-table tbody tr.active { border-left: 4px solid var(--ci-accent); } .text-themecolor { color: var(--ci-primary) !important; } .profile-tab li a.nav-link.active, .customtab li a.nav-link.active { border-bottom: 2px solid var(--ci-accent); color: var(--ci-accent); } .profile-tab li a.nav-link:hover, .customtab li a.nav-link:hover { color: var(--ci-accent); } /* Kept from your file, but recolored */ title[_ngcontent-aqi-c2] { color: var(--ci-accent) !important; text-decoration: none !important; } title[_ngcontent-aqi-c2]:hover { font-weight: bold; } /******************* /*Buttons *******************/ /* Note: In the original, btn-themecolor behaved like the “main CTA”. Here we keep it as ACCENT (light) to match your accent color, with hover. */ .btn-themecolor { background: var(--ci-accent); color: var(--ci-text); border: 1px solid var(--ci-accent); box-shadow: 0 2px 2px 0 rgb(103, 41, 1, 0.10), 0 3px 1px -2px rgb(103, 41, 1, 0.10), 0 1px 5px 0 rgb(103, 41, 1, 0.10); } .btn-themecolor:disabled { box-shadow: none; } .btn-themecolor:disabled:hover { box-shadow: none !important; cursor: default; } .btn-themecolor:hover { background: var(--ci-accent-hover); border: 1px solid var(--ci-accent-hover); box-shadow: 0 14px 26px -12px rgb(103, 41, 1, 0.10), 0 4px 23px 0 rgb(103, 41, 1, 0.10), 0 8px 10px -5px rgb(103, 41, 1, 0.10) !important; } .btn-themecolor:focus { background: var(--ci-primary-active); border: 1px solid var(--ci-primary-active); color: #fff; box-shadow: 0 14px 26px -12px rgb(103, 41, 1, 0.10), 0 4px 23px 0 rgb(103, 41, 1, 0.10), 0 8px 10px -5px rgb(103, 41, 1, 0.10); } .btn-themecolor.active { background: var(--ci-primary-active); border-color: var(--ci-primary-active); color: #fff; } .multiselect-dropdown .dropdown-btn .selected-item { background: var(--ci-accent) !important; color: var(--ci-text) !important; } .multiselect-item-checkbox input[type="checkbox"] + div:before { color: var(--ci-accent) !important; border: 2px solid var(--ci-accent) !important; } .btn-themecolor-default { background: #ffffff; color: var(--ci-primary); border: 1px solid var(--ci-primary); box-shadow: 0 2px 2px 0 rgb(241, 127, 0, 0.18), 0 3px 1px -2px rgb(241, 127, 0, 0.18), 0 1px 5px 0 rgb(241, 127, 0, 0.18); } .btn-themecolor-default:disabled { box-shadow: none; } .btn-themecolor-default:disabled:hover { box-shadow: none; cursor: default; background: unset; color: unset; } .multiselect-item-checkbox input[type="checkbox"]:checked + div:before { background: var(--ci-accent) !important; } /* Border button uses PRIMARY */ .btn-themecolor-border { color: var(--ci-primary); border: 1px solid var(--ci-primary); box-shadow: 0 2px 2px 0 rgb(241, 127, 0, 0.18), 0 3px 1px -2px rgb(241, 127, 0, 0.18), 0 1px 5px 0 rgb(241, 127, 0, 0.18); } input[type="radio"], input[type="checkbox"] { border: 1px solid var(--ci-primary); } input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="checkbox"]:focus { border: 1px solid var(--ci-primary); box-shadow: 0 2px 2px 0 rgb(241, 127, 0, 0.14), 0 3px 1px -2px rgb(241, 127, 0, 0.14), 0 1px 5px 0 rgb(241, 127, 0, 0.14); } input[type="checkbox"]:checked { border-color: var(--ci-primary-active); } input[type="checkbox"]:disabled { box-shadow: none; background-color: #dddddd; cursor: initial; border: 1px solid var(--ci-primary); } .btn-themecolor-border:hover { background: var(--ci-primary-hover); box-shadow: 0 2px 2px 0 rgb(241, 127, 0, 0.18), 0 3px 1px -2px rgb(241, 127, 0, 0.18), 0 1px 5px 0 rgb(241, 127, 0, 0.18); border: 1px solid var(--ci-primary-hover); color: #fff; } .btn-themecolor-border:disabled:hover { box-shadow: none; cursor: default; background: unset; color: var(--ci-primary); } .btn-themecolor-border:disabled { box-shadow: none; } .btn-themecolor-border:focus { background: var(--ci-primary-active); color: #fff; border: 1px solid var(--ci-primary-active); box-shadow: 0 2px 2px 0 rgb(241, 127, 0, 0.18), 0 3px 1px -2px rgb(241, 127, 0, 0.18), 0 1px 5px 0 rgb(241, 127, 0, 0.18); } /******************* /*sidebar navigation *******************/ .label-themecolor { background: var(--ci-accent); color: var(--ci-text); } .sidebar-nav > ul > li.active > a { color: var(--ci-primary); border-color: var(--ci-primary); } .sidebar-nav > ul > li.active > a i { color: var(--ci-primary); } .sidebar-nav ul li a.active, .sidebar-nav ul li a:hover { color: var(--ci-primary) !important; } .sidebar-nav ul li a.active i, .sidebar-nav ul li a:hover i { color: var(--ci-primary); } .lighten-2 .fa { background: var(--ci-primary) !important; } .page-item .page-link { color: var(--ci-primary) !important; } .topbar ul.dropdown-user li a:hover { color: var(--ci-primary); } /* Tabs: primary */ .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: var(--ci-primary) !important; border-bottom: 2px solid var(--ci-primary) !important; } /* Was previously red-ish hover -> now brand-alert */ .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { color: var(--ci-alert); } input[type="checkbox"]:checked:before { color: var(--ci-primary); } .nav-pills .nav-link.active:after { background: var(--ci-primary) !important; } .btn-link { color: var(--ci-primary) !important; } /* Was error-red -> now brand-alert */ .btn-link:focus, .btn-link:hover { color: var(--ci-alert) !important; } .q_icon { color: var(--ci-primary) !important; } .swal2-popup .swal2-styled.swal2-confirm { background: var(--ci-primary) !important; } input[type="radio"] { border: 2px solid var(--ci-primary) !important; } input[type="radio"]:checked:before { color: var(--ci-primary) !important; background: var(--ci-primary) !important; } .custom-day.focused { background-color: var(--ci-primary) !important; color: #fff; } .quote_bit { background: var(--ci-primary) !important; color: #fff; } .title { color: var(--ci-primary); } .title:hover { text-decoration: underline; } input[type="checkbox"]:focus { outline: auto !important; box-shadow: 0 2px 2px 0 rgb(241, 127, 0, 0.14), 0 3px 1px -2px rgb(241, 127, 0, 0.14), 0 1px 5px 0 rgb(241, 127, 0, 0.14); } /* Keep coherent hover rule (original had duplicates) */ .btn-themecolor-border:hover { background: var(--ci-primary-hover); box-shadow: 0 2px 2px 0 rgb(241, 127, 0, 0.18), 0 3px 1px -2px rgb(241, 127, 0, 0.18), 0 1px 5px 0 rgb(241, 127, 0, 0.18); border: 1px solid var(--ci-primary); color: #fff; } .btn-themecolor-border:disabled { background: #fff !important; box-shadow: none !important; color: var(--ci-primary) !important; border: 1px solid var(--ci-primary) !important; cursor: default !important; } .message-center::-webkit-scrollbar-track { background-color: #f2efe8; } .message-center::-webkit-scrollbar-thumb { background-color: var(--ci-primary) !important; } .message-center::-webkit-scrollbar-thumb:hover { background-color: var(--ci-primary-hover) !important; } /* Selected items: accent */ .multiselect-dropdown .dropdown-btn .selected-item { background: var(--ci-accent) !important; } .multiselect-item-checkbox input[type="checkbox"]:checked + div:before { background: var(--ci-primary) !important; } .multiselect-item-checkbox input[type="checkbox"] + div:before { color: var(--ci-accent) !important; border: 2px solid var(--ci-primary) !important; } /* List group active: brand alert (since you asked alert colors in brand style) */ .list-group-item.pointer.active { background-color: var(--ci-alert); border-color: var(--ci-alert); } .list-group-item.active, .list-group .list-group-item.active:hover { background-color: var(--ci-alert); border-color: var(--ci-alert); } /* Info/success were primary in the previous file; keep consistent */ .bg-info { background-color: var(--ci-primary) !important; } .bg-success { background-color: var(--ci-primary) !important; } .accordion-bg-color { background-color: var(--ci-primary) !important; } .text-themecolor-hover { color: var(--ci-primary) !important; } .owl-dt-calendar-table .owl-dt-calendar-cell-selected { color: rgba(255, 255, 255, 0.92); background-color: var(--ci-primary) !important; } .owl-dt-control-button-content { color: var(--ci-primary) !important; } .progress-bar { background-color: var(--ci-primary) !important; } input[type="checkbox"]:disabled, input[type="checkbox"]:checked:disabled { border-color: #888888; background: #e0e0e0; box-shadow: none; } input[type="checkbox"]:disabled:checked:before { color: #888888; } /* Sidebar active: in your earlier file you ended with active = accent. Keep that pattern: */ .sidebar-nav > ul > li.active > a, .sidebar-nav > ul > li.active > a i { color: var(--ci-accent); border-color: var(--ci-accent); } .release-highlight-class { background-color: var(--ci-primary) !important; } .gantt_task_line .gantt_task_content { color: white; background-color: var(--ci-primary) !important; }