/* ========================================================================== OpenCart Admin — Afilli Override Theme Drop this file AFTER the default admin stylesheet to modernize the look. Safe, non-destructive overrides; keeps original layout intact. Author: ChatGPT (for Serdar) Version: 1.0 ========================================================================== */ /* ----------------------------- CSS Variables (Light Theme) ----------------------------- */ :root{ --oc-font: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --oc-bg: #f3f5f8; --oc-card: #ffffff; --oc-muted: #7a8190; --oc-text: #2b2f36; --oc-primary: #0aa2ff; --oc-primary-600:#108be0; --oc-primary-700:#0b6ec0; --oc-accent: #7c3aed; /* purple */ --oc-success:#22c55e; --oc-warning:#f59e0b; --oc-danger:#ef4444; --oc-border:#e6e9ef; --oc-shadow: 0 10px 25px rgba(24,39,75,.08), 0 4px 10px rgba(24,39,75,.05); --oc-radius: 14px; --oc-radius-sm: 10px; --oc-radius-xs: 8px; --oc-focus: 0 0 0 3px rgba(10,162,255,.25); --oc-transition: 220ms cubic-bezier(.22,.61,.36,1); } /* ----------------------------- Optional Dark Theme Add `theme-dark` to to enable. ----------------------------- */ .theme-dark{ --oc-bg:#0f1722; --oc-card:#141b28; --oc-muted:#a5b0c2; --oc-text:#e9eef7; --oc-primary:#22b3ff; --oc-primary-600:#1899e1; --oc-primary-700:#1579bf; --oc-accent:#8b5cf6; --oc-success:#34d399; --oc-warning:#fbbf24; --oc-danger:#f87171; --oc-border:#1e293b; --oc-shadow: 0 10px 30px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25); --oc-focus: 0 0 0 3px rgba(34,179,255,.28); } /* ----------------------------- Base ----------------------------- */ html, body{ background: var(--oc-bg); color: var(--oc-text); font-family: var(--oc-font); text-rendering: optimizeLegibility; } .container-fluid{ padding: 0 22px; } /* Smooth hover motion */ a,button,.btn,[role="button"],.panel,.tile,.nav-tabs>li>a, #header .nav>li>a, #menu li a{ transition: all var(--oc-transition); } /* ----------------------------- Header / Topbar ----------------------------- */ #header{ background: linear-gradient(180deg, #ffffff, #f9fbff); border-bottom: 1px solid var(--oc-border); box-shadow: var(--oc-shadow); } .theme-dark #header{ background: linear-gradient(180deg, #121a28, #0f1722); border-bottom: 1px solid var(--oc-border); } #button-menu{ color: var(--oc-text); border-right: 1px solid var(--oc-border); } #header .nav>li>a{ color: var(--oc-muted); line-height: 58px; } #header .nav>li>a:hover{ color: var(--oc-text); background: rgba(10,162,255,.06); } /* ----------------------------- Sidebar ----------------------------- */ #column-left{ background: linear-gradient(180deg, #19222e, #111826 60%); box-shadow: 8px 0 24px rgba(15,23,42,.22); } .theme-dark #column-left{ background: linear-gradient(180deg, #0b111b, #0a0f1a 60%); } #navigation{ letter-spacing:.04em; font-weight:600; background: transparent; text-transform: none; color: #a2b6cf; } #menu>li{ border-bottom: 1px solid rgba(255,255,255,.06); } #menu>li>a{ color:#c5d6ea; padding:12px 18px 12px 22px; border-radius: var(--oc-radius-xs); margin: 6px 8px; } #menu>li>a i{ width: 22px; margin-right:8px; font-size:18px; opacity:.9; } #menu>li>a:hover{ background: rgba(255,255,255,.05); transform: translateX(2px); } #menu>li.active>a{ color:#fff; background: linear-gradient(90deg, var(--oc-primary) 0%, var(--oc-accent) 100%); box-shadow: 0 8px 18px rgba(10,162,255,.28); } #menu li li a{ color:#90a3bd; border-radius: 10px; } #menu li li a:hover{ background: rgba(255,255,255,.06); color:#fff; transform: translateX(4px); } /* ----------------------------- Page header & breadcrumbs ----------------------------- */ .page-header{ border-bottom: 1px solid var(--oc-border); margin: 18px 0 12px; } .page-header h1{ color: var(--oc-text); font-weight: 600; text-shadow:none; } .breadcrumb{ background: transparent; padding: 0 6px; } .breadcrumb li a{ color: var(--oc-muted); } .breadcrumb li a:hover{ color: var(--oc-text); } /* ----------------------------- Cards / Panels ----------------------------- */ .panel{ border: 1px solid var(--oc-border) !important; background: var(--oc-card); border-radius: var(--oc-radius); box-shadow: var(--oc-shadow); } .panel-default .panel-heading, .panel-primary .panel-heading{ background: transparent; border-bottom: 1px solid var(--oc-border); color: var(--oc-text); border-top-left-radius: var(--oc-radius); border-top-right-radius: var(--oc-radius); padding: 14px 16px; } .panel-primary{ border-top: 2px solid var(--oc-primary) !important; } .panel-default{ border-top: 2px solid #dbe4f0 !important; } /* ----------------------------- Tabs ----------------------------- */ .nav-tabs{ border-bottom: 1px solid var(--oc-border); margin-bottom: 18px; } .nav-tabs>li>a{ color: var(--oc-muted); border: 1px solid transparent; border-radius: var(--oc-radius-xs) var(--oc-radius-xs) 0 0; font-weight:600; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{ color: var(--oc-text); border: 1px solid var(--oc-border); border-bottom-color: transparent; background: var(--oc-card); } /* ----------------------------- Buttons (Bootstrap flavors) ----------------------------- */ .btn{ border-radius: 10px; border:1px solid var(--oc-border); padding: 9px 14px; font-weight: 600; box-shadow: 0 2px 0 rgba(0,0,0,.02); } .btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.06); } .btn-default{ background:#f6f8fb; color:#1f2937; } .btn-default:hover{ background:#eef2f8; } .btn-primary{ background: linear-gradient(180deg, var(--oc-primary), var(--oc-primary-600)); color: #fff; border: 1px solid var(--oc-primary-700); } .btn-primary:hover{ filter: brightness(1.05); } .btn-success{ background: linear-gradient(180deg, var(--oc-success), #18a957); color:#fff; border:1px solid #168b49; } .btn-warning{ background: linear-gradient(180deg, var(--oc-warning), #d88500); color:#111827; border:1px solid #b87400; } .btn-danger{ background: linear-gradient(180deg, var(--oc-danger), #c93232); color:#fff; border:1px solid #a92727; } /* Ghost buttons */ .btn-link, .btn-ghost{ background: transparent; border-color: transparent; color: var(--oc-primary); } .btn-link:hover, .btn-ghost:hover{ background: rgba(10,162,255,.08); border-color: rgba(10,162,255,.16); } /* ----------------------------- Forms ----------------------------- */ .form-control{ background: #fff; border: 1px solid var(--oc-border); border-radius: 10px; box-shadow: none; } .form-control:focus{ outline: none; border-color: var(--oc-primary); box-shadow: var(--oc-focus); } .input-group-addon{ background: #f2f5fb; border: 1px solid var(--oc-border); color: var(--oc-muted); } /* Required asterisk color */ div.required .control-label:not(span):before, td.required:before{ color: var(--oc-danger); } /* Switch-style checkboxes/radios (subtle) */ input[type="checkbox"], input[type="radio"]{ border-radius: 6px; border: 1px solid var(--oc-border); } input[type="radio"]{ border-radius: 999px; } input[type="checkbox"]:focus, input[type="radio"]:focus{ box-shadow: var(--oc-focus); } /* ----------------------------- Tables ----------------------------- */ .table{ background: var(--oc-card); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); overflow: hidden; } .table thead td{ background: linear-gradient(180deg, #f7f9fd, #eef2f8); border-bottom: 1px solid var(--oc-border); color:#374151; } .theme-dark .table thead td{ background: linear-gradient(180deg, #162033, #10182a); color:#cbd5e1; } .table tbody>tr{ transition: background var(--oc-transition); } .table tbody>tr:hover{ background: rgba(10,162,255,.05); } /* Compact badge helpers */ .badge{ display:inline-block; padding:4px 8px; border-radius: 999px; font-weight:700; font-size:12px; } .badge-success{ background: rgba(34,197,94,.15); color:#16a34a; } .badge-warning{ background: rgba(245,158,11,.18); color:#b45309; } .badge-danger{ background: rgba(239,68,68,.18); color:#b91c1c; } .badge-info{ background: rgba(14,165,233,.18); color:#0369a1; } /* ----------------------------- Tiles / Dashboard Cards ----------------------------- */ .tile{ border-radius: var(--oc-radius); box-shadow: var(--oc-shadow); transform: translateZ(0); } .tile-heading{ background: transparent; color: var(--oc-muted); font-weight:700; text-shadow:none; } .tile .tile-body{ color: var(--oc-text); } .tile-primary{background: linear-gradient(160deg, #ffffff, #eeeeee);} .tile-success{ background: linear-gradient(160deg, #22c55e, #16a34a); } .tile-warning{ background: linear-gradient(160deg, #f59e0b, #d97706); } .tile-danger{ background: linear-gradient(160deg, #ef4444, #dc2626); } .tile a{ color:#fff; } /* ----------------------------- Alerts & Modals ----------------------------- */ .alert{ border:1px solid var(--oc-border); border-left:4px solid var(--oc-primary); border-radius: 12px; background: var(--oc-card); box-shadow: var(--oc-shadow); } .alert-danger{ border-left-color: var(--oc-danger); } .alert-warning{ border-left-color: var(--oc-warning); } .alert-success{ border-left-color: var(--oc-success); } .modal-content{ border-radius: var(--oc-radius); border: 1px solid var(--oc-border); box-shadow: var(--oc-shadow); background: var(--oc-card); } /* ----------------------------- Marketplace & Extension list polish ----------------------------- */ #extension-list section{ border-radius: var(--oc-radius); border: 1px solid var(--oc-border); overflow: hidden; box-shadow: var(--oc-shadow); } #extension-list section:hover{ border-color: var(--oc-primary); box-shadow: 0 10px 28px rgba(10,162,255,.18); } #extension-list .extension-preview .extension-description{ backdrop-filter: blur(4px); } /* ----------------------------- Micro-interactions ----------------------------- */ .hover-float:hover{ transform: translateY(-2px); box-shadow: var(--oc-shadow); } .scale-on-hover:hover{ transform: scale(1.02); } .fade-in{ animation: fadeIn .5s ease-out both; } @keyframes fadeIn{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: translateY(0); } } /* ----------------------------- Footer ----------------------------- */ #footer{ color: var(--oc-muted); } /* ----------------------------- Utilities ----------------------------- */ .rounded-xl{ border-radius: var(--oc-radius) !important; } .rounded-lg{ border-radius: var(--oc-radius-sm) !important; } .shadow-pop{ box-shadow: var(--oc-shadow) !important; } .text-muted-oc{ color: var(--oc-muted) !important; } .bg-card{ background: var(--oc-card) !important; } /* End of Afilli Overrides */