/* ============================================================ CoinAura Admin Theme · v2 (smooth + colorful) Brand: gold #FFD166 + deep purple #1A1B2E Load LAST in (after style.css + developer.css). Safe override: colors / radius / shadow / transitions only — no layout/position changes. Revert = remove this one . ============================================================ */ :root{ --ca-purple:#1A1B2E; --ca-purple-2:#23253D; --ca-purple-3:#2C2E4A; --ca-gold:#FFD166; --ca-gold-deep:#F2B23C; --ca-gold-soft:#FFF4D6; --ca-on-dark:#F0EDFF; --ca-on-dark-mut:#A6A8C4; --ca-text:#1A1B2E; --ca-muted:#6B6E85; --ca-border:#E7E5F0; --ca-surface:#FFFFFF; --ca-bg:#F5F4FA; --ca-info:#3B82F6; --ca-info-d:#2563EB; --ca-success:#22C55E; --ca-success-d:#16A34A; --ca-warning:#F59E0B; --ca-warning-d:#D97706; --ca-danger:#EF4444; --ca-danger-d:#DC2626; --ca-r:10px; --ca-r-lg:14px; --ca-r-pill:999px; --ca-shadow:0 2px 8px rgba(26,27,46,.06); --ca-shadow-lg:0 10px 30px rgba(26,27,46,.10); --ca-ease:all .2s cubic-bezier(.4,0,.2,1); } /* ---------- GLOBAL SMOOTHNESS ---------- */ .btn, a, .panel, .card-view, .form-control, .label, .badge, .pagination > li > a, .nav-tabs > li > a, .dropdown-menu > li > a, .list-group-item, .modal-content, .sm-data-box [class^="das"]{ transition:var(--ca-ease); } *::-webkit-scrollbar{ width:10px; height:10px; } *::-webkit-scrollbar-thumb{ background:rgba(242,178,60,.55); border-radius:8px; } *::-webkit-scrollbar-thumb:hover{ background:var(--ca-gold-deep); } *::-webkit-scrollbar-track{ background:transparent; } /* ============================================================ TOP NAVBAR ============================================================ */ .wrapper .navbar.navbar-inverse, .wrapper.theme-5-active .navbar.navbar-inverse, .navbar.navbar-inverse.navbar-fixed-top{ background:var(--ca-purple) !important; border-bottom:1px solid rgba(255,209,102,.15) !important; } .navbar .mobile-only-brand,.navbar-fixed-top .nav-header,.navbar-fixed-top .logo-wrap{ background:var(--ca-purple) !important; } .navbar.navbar-inverse .nav > li > a,.navbar.navbar-inverse .top-nav > li > a, .navbar.navbar-inverse .dropdown-toggle,.navbar.navbar-inverse .toggle-left-nav-btn, .navbar.navbar-inverse a,.navbar.navbar-inverse i{ color:var(--ca-on-dark) !important; } .navbar.navbar-inverse .nav > li > a:hover,.navbar.navbar-inverse .nav > li > a:focus, .navbar.navbar-inverse .nav > li > a:active,.navbar.navbar-inverse .dropdown-toggle:hover{ color:var(--ca-gold) !important; } .nav-header .logo-wrap .brand-text,.navbar .brand-text{ color:var(--ca-gold) !important; } .nav-header .logo-wrap .brand-img,.navbar .brand-img{ height:34px; width:auto; margin-top:0 !important; } .navbar .user-auth-dropdown a{ color:var(--ca-text) !important; } .navbar .user-auth-dropdown a:hover{ color:var(--ca-gold-deep) !important; background:var(--ca-gold-soft) !important; } /* ============================================================ LEFT SIDEBAR ============================================================ */ .wrapper .fixed-sidebar-left .side-nav, .wrapper.theme-5-active .fixed-sidebar-left .side-nav{ background:var(--ca-purple) !important; border-right:1px solid rgba(255,209,102,.10) !important; } .fixed-sidebar-left .side-nav > li > a, .fixed-sidebar-left .side-nav > li > ul > li a{ color:var(--ca-on-dark) !important; } .fixed-sidebar-left .side-nav > li > a i, .fixed-sidebar-left .side-nav > li > ul > li a i{ color:var(--ca-on-dark-mut) !important; } .fixed-sidebar-left .side-nav > li > a:hover{ color:var(--ca-gold) !important; background:rgba(255,209,102,.08) !important; border-radius:10px !important; } .fixed-sidebar-left .side-nav > li > a:hover i{ color:var(--ca-gold) !important; } .wrapper.theme-5-active.pimary-color-green .fixed-sidebar-left .side-nav > li > a.active, .fixed-sidebar-left .side-nav > li > a.active{ color:var(--ca-purple) !important; background:var(--ca-gold) !important; border-radius:10px !important; font-weight:600 !important; box-shadow:0 4px 12px rgba(255,209,102,.25); } .fixed-sidebar-left .side-nav > li > a.active i{ color:var(--ca-purple) !important; } .fixed-sidebar-left .side-nav .collapse,.fixed-sidebar-left .side-nav .collapse.in{ background:rgba(0,0,0,.18) !important; } .fixed-sidebar-left .side-nav > li > ul > li a.active, .fixed-sidebar-left .side-nav > li > ul > li a:hover{ color:var(--ca-gold) !important; background:transparent !important; } .fixed-sidebar-left .navigation-header span{ color:var(--ca-gold) !important; opacity:.75; letter-spacing:.04em; } .fixed-sidebar-left .light-grey-hr{ border-color:rgba(255,209,102,.12) !important; } .fixed-sidebar-left .side-nav .right-nav-text{ color:var(--ca-on-dark) !important; } /* ============================================================ BUTTONS base = smooth radius + lift; success/primary = gold; info/warning/danger kept vivid for colour. ============================================================ */ .btn{ border-radius:var(--ca-r) !important; padding:9px 22px; font-weight:600; text-transform:none !important; box-shadow:var(--ca-shadow); transition:var(--ca-ease) !important; } .btn:hover{ transform:translateY(-1px); box-shadow:var(--ca-shadow-lg); } .btn:active{ transform:translateY(0); box-shadow:var(--ca-shadow); } .btn-sm,.btn-small{ padding:6px 14px !important; border-radius:8px !important; } .btn-xs{ padding:3px 10px !important; border-radius:7px !important; } .btn-lg{ padding:12px 30px !important; border-radius:12px !important; } .btn-rounded{ border-radius:var(--ca-r-pill) !important; } .btn-circle{ border-radius:50% !important; } /* primary CTA = gold (btn-success is this template's main action button) */ .btn-anim,.btn.btn-primary,.btn-primary,.btn.btn-success,.btn-success{ background:var(--ca-gold) !important; border:1px solid var(--ca-gold-deep) !important; color:var(--ca-purple) !important; box-shadow:0 4px 14px rgba(255,209,102,.32) !important; } .btn-anim:hover,.btn.btn-primary:hover,.btn-primary:hover,.btn-primary:focus, .btn.btn-success:hover,.btn-success:hover,.btn-success:focus{ background:var(--ca-gold-deep) !important; border-color:var(--ca-gold-deep) !important; color:var(--ca-purple) !important; } /* default / white */ .btn-default,.btn-white{ background:#fff !important; color:var(--ca-text) !important; border:1px solid var(--ca-border) !important; box-shadow:var(--ca-shadow) !important; } .btn-default:hover,.btn-white:hover{ background:var(--ca-gold-soft) !important; border-color:var(--ca-gold) !important; color:var(--ca-gold-deep) !important; } /* semantic — vivid */ .btn-info{ background:var(--ca-info) !important; border-color:var(--ca-info) !important; color:#fff !important; box-shadow:0 4px 14px rgba(59,130,246,.3) !important; } .btn-info:hover{ background:var(--ca-info-d) !important; border-color:var(--ca-info-d) !important; } .btn-warning{ background:var(--ca-warning) !important; border-color:var(--ca-warning) !important; color:#3a2600 !important; box-shadow:0 4px 14px rgba(245,158,11,.3) !important; } .btn-warning:hover{ background:var(--ca-warning-d) !important; border-color:var(--ca-warning-d) !important; color:#fff !important; } .btn-danger{ background:var(--ca-danger) !important; border-color:var(--ca-danger) !important; color:#fff !important; box-shadow:0 4px 14px rgba(239,68,68,.3) !important; } .btn-danger:hover{ background:var(--ca-danger-d) !important; border-color:var(--ca-danger-d) !important; } /* outline variants */ .btn-outline{ background:transparent !important; } .btn-outline.btn-primary,.btn-outline.btn-success{ color:var(--ca-gold-deep) !important; border:1px solid var(--ca-gold) !important; box-shadow:none !important; } .btn-outline.btn-primary:hover,.btn-outline.btn-success:hover{ background:var(--ca-gold) !important; color:var(--ca-purple) !important; } .btn-outline.btn-info{ color:var(--ca-info) !important; border:1px solid var(--ca-info) !important; box-shadow:none !important; } .btn-outline.btn-danger{ color:var(--ca-danger) !important; border:1px solid var(--ca-danger) !important; box-shadow:none !important; } /* ============================================================ CARDS / PANELS ============================================================ */ .card-view,.panel,.panel-default{ border-radius:var(--ca-r-lg) !important; border:1px solid var(--ca-border) !important; box-shadow:var(--ca-shadow) !important; background:var(--ca-surface); } .card-view:hover{ box-shadow:var(--ca-shadow-lg) !important; } .card-view.panel.panel-default > .panel-heading, .panel-default > .panel-heading{ background:var(--ca-purple) !important; color:var(--ca-gold) !important; border-radius:var(--ca-r-lg) var(--ca-r-lg) 0 0 !important; border:none !important; padding:14px 18px; } .card-view.panel.panel-default > .panel-heading h6, h6.panel-title.txt-dark,.panel-title{ color:var(--ca-gold) !important; font-weight:600; } .panel-heading .pull-right a,.panel-heading .pull-right i{ color:var(--ca-on-dark) !important; } /* ============================================================ TABLES (+ DataTables) ============================================================ */ .table thead > tr > th, .table > thead > tr > th{ background:#F2EFFA !important; color:var(--ca-purple) !important; border-bottom:2px solid var(--ca-gold) !important; font-weight:600; text-transform:none; padding:12px 14px; } .table > tbody > tr > td{ padding:11px 14px; vertical-align:middle; border-top:1px solid var(--ca-border) !important; } .table-hover > tbody > tr:hover, .table > tbody > tr:hover{ background:var(--ca-gold-soft) !important; } .table-striped > tbody > tr:nth-of-type(odd){ background:#FAFAFD; } table.dataTable thead th{ border-bottom:2px solid var(--ca-gold) !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{ border:1px solid var(--ca-border) !important; border-radius:8px !important; height:38px; padding:0 10px; box-shadow:none !important; } .dataTables_wrapper .dataTables_filter input:focus{ border-color:var(--ca-gold-deep) !important; box-shadow:0 0 0 3px rgba(255,209,102,.25) !important; outline:none; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background:var(--ca-gold) !important; color:var(--ca-purple) !important; border:1px solid var(--ca-gold-deep) !important; border-radius:8px !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--ca-gold-soft) !important; color:var(--ca-gold-deep) !important; border:1px solid var(--ca-gold) !important; border-radius:8px !important; } /* ============================================================ FORMS ============================================================ */ .form-control{ border:1px solid var(--ca-border) !important; border-radius:var(--ca-r) !important; box-shadow:none !important; color:var(--ca-text); transition:var(--ca-ease) !important; } .form-control:focus{ border-color:var(--ca-gold-deep) !important; box-shadow:0 0 0 3px rgba(255,209,102,.22) !important; outline:none; } .control-label,label{ color:#4B4D66; } .select2-container--default .select2-selection--single, .select2-selection.select2-selection--multiple{ border:1px solid var(--ca-border) !important; border-radius:var(--ca-r) !important; } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--single:focus{ border-color:var(--ca-gold-deep) !important; } /* checkbox / radio accent */ .checkbox-primary input[type="checkbox"]:checked + label::before, .radio-primary input[type="radio"]:checked + label::before{ background:var(--ca-gold) !important; border-color:var(--ca-gold-deep) !important; } .checkbox-primary input[type="checkbox"]:checked + label::after{ color:var(--ca-purple) !important; } input[type="checkbox"],input[type="radio"]{ accent-color:var(--ca-gold-deep); } /* ============================================================ LABELS / BADGES (colourful pills) ============================================================ */ .label,.badge{ border-radius:var(--ca-r-pill) !important; font-weight:600; padding:.35em .7em; font-size:11px; } .label-primary,.badge-primary{ background:var(--ca-gold) !important; color:var(--ca-purple) !important; } .label-success,.badge-success{ background:var(--ca-success) !important; color:#fff !important; } .label-info,.badge-info{ background:var(--ca-info) !important; color:#fff !important; } .label-warning,.badge-warning{ background:var(--ca-warning) !important; color:#3a2600 !important; } .label-danger,.badge-danger{ background:var(--ca-danger) !important; color:#fff !important; } .label-default,.badge-default{ background:#EAE8F2 !important; color:var(--ca-muted) !important; } /* ============================================================ ALERTS (soft tinted + colour accent) ============================================================ */ .alert{ border-radius:var(--ca-r) !important; border:none !important; border-left:4px solid !important; font-size:13.5px; } .alert-success{ background:#E9F9F0 !important; color:#15803D !important; border-left-color:var(--ca-success) !important; } .alert-info{ background:#E8F1FE !important; color:#1E40AF !important; border-left-color:var(--ca-info) !important; } .alert-warning{ background:#FEF4DE !important; color:#92600A !important; border-left-color:var(--ca-warning) !important; } .alert-danger{ background:#FDECEC !important; color:#B91C1C !important; border-left-color:var(--ca-danger) !important; } /* ============================================================ PAGINATION ============================================================ */ .pagination > li > a,.pagination > li > span{ color:var(--ca-gold-deep) !important; border-color:var(--ca-border) !important; border-radius:8px !important; margin:0 2px; } .pagination > li > a:hover{ background:var(--ca-gold-soft) !important; border-color:var(--ca-gold) !important; } .pagination > li.active > a,.pagination > li.active > span, .pagination > li.active > a:hover,.pagination > li.active > a:focus{ background:var(--ca-gold) !important; border-color:var(--ca-gold-deep) !important; color:var(--ca-purple) !important; } /* ============================================================ TABS / PILLS ============================================================ */ .nav-tabs{ border-bottom:1px solid var(--ca-border) !important; } .nav-tabs > li > a{ color:var(--ca-muted) !important; border:none !important; border-radius:8px 8px 0 0 !important; } .nav-tabs > li > a:hover{ background:var(--ca-gold-soft) !important; color:var(--ca-gold-deep) !important; } .nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{ color:var(--ca-purple) !important; background:transparent !important; border:none !important; border-bottom:3px solid var(--ca-gold) !important; font-weight:600; } .nav-pills > li.active > a,.nav-pills > li.active > a:hover{ background:var(--ca-gold) !important; color:var(--ca-purple) !important; border-radius:var(--ca-r-pill) !important; } /* ============================================================ PROGRESS ============================================================ */ .progress{ border-radius:var(--ca-r-pill) !important; height:10px; background:#ECEAF4 !important; box-shadow:none !important; } .progress-bar{ background:var(--ca-gold) !important; border-radius:var(--ca-r-pill) !important; } .progress-bar-success{ background:var(--ca-success) !important; } .progress-bar-info{ background:var(--ca-info) !important; } .progress-bar-warning{ background:var(--ca-warning) !important; } .progress-bar-danger{ background:var(--ca-danger) !important; } /* ============================================================ MODAL / DROPDOWN / TOOLTIP ============================================================ */ .modal-content{ border-radius:var(--ca-r-lg) !important; border:none !important; box-shadow:var(--ca-shadow-lg) !important; } .modal-header{ background:var(--ca-purple) !important; border-radius:var(--ca-r-lg) var(--ca-r-lg) 0 0 !important; border:none !important; } .modal-header .modal-title{ color:var(--ca-gold) !important; } .modal-header .close{ color:var(--ca-on-dark) !important; opacity:.8; text-shadow:none; } .modal-footer{ border-top:1px solid var(--ca-border) !important; } .dropdown-menu{ border-radius:var(--ca-r) !important; border:1px solid var(--ca-border) !important; box-shadow:var(--ca-shadow-lg) !important; padding:6px; } .dropdown-menu > li > a{ border-radius:8px; padding:8px 12px; } .dropdown-menu > li > a:hover{ background:var(--ca-gold-soft) !important; color:var(--ca-gold-deep) !important; } .tooltip-inner{ background:var(--ca-purple) !important; color:var(--ca-on-dark) !important; border-radius:8px; } .tooltip.top .tooltip-arrow{ border-top-color:var(--ca-purple) !important; } /* ============================================================ DASHBOARD STAT BOXES (das1..das8) + misc accents ============================================================ */ .sm-data-box .das1,.sm-data-box .das2,.sm-data-box .das3,.sm-data-box .das4, .sm-data-box .das5,.sm-data-box .das6,.sm-data-box .das7,.sm-data-box .das8{ background:var(--ca-purple) !important; border:1px solid rgba(255,209,102,.18) !important; border-radius:12px !important; } .sm-data-box .das1,.sm-data-box .das4,.sm-data-box .das7{ background:var(--ca-purple-2) !important; } .sm-data-box [class^="das"] i,.sm-data-box [class^="das"] .zmdi{ color:var(--ca-gold) !important; } .preloader-it .la-anim-1{ background:var(--ca-gold) !important; } .text-primary{ color:var(--ca-gold-deep) !important; } .txt-success,.text-success{ color:var(--ca-success-d) !important; } .well{ border-radius:var(--ca-r-lg) !important; border:1px solid var(--ca-border) !important; background:#FAFAFD !important; } .list-group-item.active{ background:var(--ca-gold) !important; border-color:var(--ca-gold-deep) !important; color:var(--ca-purple) !important; } a{ color:var(--ca-gold-deep); } a:hover{ color:var(--ca-purple); } hr{ border-top-color:var(--ca-border) !important; } /* ============================================================ DISTINCT ACTION-BUTTON COLORS (.btn-ca-*) Use one unique colour per action so bulk-action rows are never confusing at click time. Pair with: class="btn btn-sm btn-ca-X" These bypass the template's btn-info(#e7368d pink)/btn-success etc. ============================================================ */ .btn[class*="btn-ca-"]{ color:#fff !important; border:none !important; font-weight:600; } .btn-ca-green { background:#16A34A !important; box-shadow:0 4px 12px rgba(22,163,74,.30) !important; } .btn-ca-green:hover { background:#15803D !important; } .btn-ca-blue { background:#2563EB !important; box-shadow:0 4px 12px rgba(37,99,235,.30) !important; } .btn-ca-blue:hover { background:#1D4ED8 !important; } .btn-ca-teal { background:#0D9488 !important; box-shadow:0 4px 12px rgba(13,148,136,.30) !important; } .btn-ca-teal:hover { background:#0F766E !important; } .btn-ca-amber { background:#D97706 !important; box-shadow:0 4px 12px rgba(217,119,6,.30) !important; } .btn-ca-amber:hover { background:#B45309 !important; } .btn-ca-purple { background:#7C3AED !important; box-shadow:0 4px 12px rgba(124,58,237,.30) !important; } .btn-ca-purple:hover { background:#6D28D9 !important; } .btn-ca-indigo { background:#4F46E5 !important; box-shadow:0 4px 12px rgba(79,70,229,.30) !important; } .btn-ca-indigo:hover { background:#4338CA !important; } .btn-ca-cyan { background:#06B6D4 !important; box-shadow:0 4px 12px rgba(6,182,212,.30) !important; } .btn-ca-cyan:hover { background:#0891B2 !important; } .btn-ca-slate { background:#64748B !important; box-shadow:0 4px 12px rgba(100,116,139,.28) !important; } .btn-ca-slate:hover { background:#475569 !important; } .btn-ca-dark { background:#1E293B !important; box-shadow:0 4px 12px rgba(30,41,59,.30) !important; } .btn-ca-dark:hover { background:#0F172A !important; } .btn-ca-red { background:#DC2626 !important; box-shadow:0 4px 12px rgba(220,38,38,.30) !important; } .btn-ca-red:hover { background:#B91C1C !important; } /* light-background variants -> dark text */ .btn.btn-ca-gold { background:#F2B23C !important; color:#1A1B2E !important; box-shadow:0 4px 12px rgba(242,178,60,.34) !important; } .btn.btn-ca-gold:hover { background:#E0A12B !important; color:#1A1B2E !important; } .btn.btn-ca-light{ background:#E2E8F0 !important; color:#1A1B2E !important; box-shadow:0 2px 6px rgba(26,27,46,.08) !important; } .btn.btn-ca-light:hover{ background:#CBD5E1 !important; color:#1A1B2E !important; }