/* ============================================================ ECUCODEX — Modern Panel Theme (light + dark) Loaded LAST, after main.css + vendor CSS. Redefines main.css design tokens for a modern look and restyles shared components. Layout/positioning untouched. Theme is driven by (existing toggle). ============================================================ */ /* ---------- Design tokens : LIGHT (default) ---------- */ :root{ --accent:#ff1f3d; --accent-2:#ff4d63; --accent-3:#d6112c; --accent-ink:#ffffff; --accent-glow:255,31,61; --dark-color:#14161a; --heading-color:#14161a; --font-color:#4a4e57; --font-white:#ffffff; --font-light:#8b909a; --text-muted:#8b909a; --border-color:#e7e9ee; --card-color:#ffffff; --white-color:#ffffff; --body-color:#f4f5f7; --box-shadow:#d9dce2; --box-shadow-light:#eef0f3; /* modern surface + effect tokens */ --surface-1:#ffffff; /* sidebar / navbar */ --surface-2:#f4f5f7; /* page bg */ --surface-3:#f8f9fb; /* subtle raised (thead, hover) */ --line-soft:#eef0f3; --ink-strong:#14161a; --ink:#3a3e46; --ink-dim:#6b7078; --ink-faint:#9aa0aa; --radius:14px; --radius-sm:10px; --radius-xs:8px; --radius-pill:999px; --pad:22px; --trans:.2s cubic-bezier(.4,0,.2,1); --shadow-sm:0 1px 2px rgba(16,18,22,.05), 0 1px 3px rgba(16,18,22,.06); --shadow:0 2px 6px rgba(16,18,22,.05), 0 10px 26px rgba(16,18,22,.06); --shadow-lg:0 12px 40px rgba(16,18,22,.12); --shadow-accent:0 8px 26px rgba(var(--accent-glow),.30); --sidebar-bg:#ffffff; --sidebar-ink:#3a3e46; --sidebar-ink-dim:#7a8089; --navbar-bg:rgba(255,255,255,.86); } /* ---------- Design tokens : DARK ---------- */ [data-theme="dark"]{ --dark-color:#f3f4f6; --heading-color:#f3f4f6; --font-color:#b6bac2; --font-white:#ffffff; --font-light:#8b909a; --text-muted:#7c828d; --border-color:#282a31; --card-color:#17181c; --white-color:#0b0c0f; --body-color:#0b0c0f; --box-shadow:#000000; --box-shadow-light:#111216; --surface-1:#121317; --surface-2:#0b0c0f; --surface-3:#1c1d22; --line-soft:#22242a; --ink-strong:#f3f4f6; --ink:#c8ccd3; --ink-dim:#9aa0aa; --ink-faint:#6b7078; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 8px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.5); --shadow-lg:0 18px 50px rgba(0,0,0,.6); --shadow-accent:0 10px 30px rgba(var(--accent-glow),.30); --sidebar-bg:#121317; --sidebar-ink:#c8ccd3; --sidebar-ink-dim:#8b909a; --navbar-bg:rgba(15,16,20,.82); } /* ---------- Base ---------- */ /* NOTE: keep #wrapper transparent — auth pages paint a full-screen background image on .auth-main::after (z-index:-2); an opaque #wrapper would cover it. The page background lives on instead. */ body{ background:var(--body-color); color:var(--font-color); transition:background .3s ease; } #wrapper{ background:transparent; } body.font-nunito, body{ font-family:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif; } body h1,body h2,body h3,body h4,body h5,body h6{ color:var(--heading-color); } a{ transition:color var(--trans); } a:hover{ color:var(--accent); } /* modern scrollbars */ *{ scrollbar-width:thin; scrollbar-color:var(--accent) transparent; } *::-webkit-scrollbar{ width:9px; height:9px; } *::-webkit-scrollbar-thumb{ background:rgba(var(--accent-glow),.55); border-radius:999px; border:2px solid transparent; background-clip:padding-box; } *::-webkit-scrollbar-thumb:hover{ background:var(--accent); background-clip:padding-box; } *::-webkit-scrollbar-track{ background:transparent; } /* ---------- Page loader ---------- */ #wrapper .page-loader-wrapper{ background:var(--body-color); } #wrapper .page-loader-wrapper .loader p{ color:var(--text-muted); letter-spacing:.14em; text-transform:uppercase; font-size:12px; } /* ============================================================ NAVBAR (top) ============================================================ */ #wrapper .navbar-fixed-top{ background:var(--navbar-bg); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--border-color); box-shadow:none; } #wrapper .navbar .navbar-brand .btn-toggle-offcanvas, #wrapper .navbar .navbar-brand .btn-toggle-fullwidth{ color:var(--ink-dim); background:transparent; border-radius:var(--radius-xs); transition:background var(--trans),color var(--trans); } #wrapper .navbar .navbar-brand .btn-toggle-offcanvas:hover, #wrapper .navbar .navbar-brand .btn-toggle-fullwidth:hover{ color:var(--accent); background:rgba(var(--accent-glow),.10); } #wrapper .navbar-center img{ filter:none; } /* theme switch (sun/moon pill) */ #wrapper .toggle-switch.theme-switch{ position:relative; } #wrapper .theme-switch .toggle-switch-slider{ background:var(--surface-3); border:1px solid var(--border-color); box-shadow:inset 0 1px 2px rgba(0,0,0,.06); } [data-theme="dark"] #wrapper .theme-switch .toggle-switch-slider{ background:#26282e; } /* ============================================================ SIDEBAR ============================================================ */ #wrapper .sidebar, #wrapper #left-sidebar{ background:var(--sidebar-bg); border-right:1px solid var(--border-color); box-shadow:var(--shadow-sm); } /* user account block — üst boşluğu artırma (orijinal margin:20px 0 korunur), sadece yatay iç boşluk */ #wrapper .sidebar .user-account{ padding:0 20px 10px; } #wrapper .sidebar .user-account .user-photo{ border:2px solid var(--accent); padding:2px; background:var(--card-color); box-shadow:var(--shadow-accent); } #wrapper .sidebar .user-account .dropdown > span{ color:var(--ink-faint); font-size:11px; letter-spacing:.14em; text-transform:uppercase; } #wrapper .sidebar .user-account .user-name{ color:var(--ink-strong); font-weight:800; } #wrapper .sidebar .user-account .user-name:hover{ color:var(--accent); } #wrapper .sidebar .user-account hr{ border-color:var(--border-color); opacity:.9; margin:14px 0 4px; } #wrapper .sidebar .dropdown-menu.account{ background:var(--card-color); border:1px solid var(--border-color); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:6px; } #wrapper .sidebar .dropdown-menu.account li a{ color:var(--ink); border-radius:var(--radius-xs); padding:8px 12px; } #wrapper .sidebar .dropdown-menu.account li a:hover{ background:rgba(var(--accent-glow),.10); color:var(--accent); } /* nav items */ #wrapper .sidebar .sidebar-nav .metismenu a{ color:var(--sidebar-ink); border-radius:var(--radius-sm); margin:2px 12px; padding:11px 14px; font-weight:600; font-size:14px; transition:background var(--trans),color var(--trans),box-shadow var(--trans); } #wrapper .sidebar .sidebar-nav .metismenu a > i, #wrapper .sidebar .sidebar-nav .metismenu a > span > i{ color:var(--sidebar-ink-dim); transition:color var(--trans); min-width:22px; text-align:center; } #wrapper .sidebar .sidebar-nav .metismenu a:hover{ background:rgba(var(--accent-glow),.08); color:var(--accent); } #wrapper .sidebar .sidebar-nav .metismenu a:hover > i{ color:var(--accent); } #wrapper .sidebar .sidebar-nav .metismenu li.active > a, #wrapper .sidebar .sidebar-nav .metismenu li a.active{ background:linear-gradient(135deg,var(--accent),var(--accent-3)); color:#fff; box-shadow:var(--shadow-accent); } #wrapper .sidebar .sidebar-nav .metismenu li.active > a > i, #wrapper .sidebar .sidebar-nav .metismenu li a.active > i{ color:#fff; } /* submenus */ #wrapper .sidebar .sidebar-nav .metismenu ul{ background:transparent; } #wrapper .sidebar .sidebar-nav .metismenu ul a{ font-size:13px; padding:9px 14px 9px 42px; margin:1px 12px; } #wrapper .sidebar .sidebar-nav .metismenu .has-arrow::after{ border-color:var(--sidebar-ink-dim); } #wrapper .btn-toggle-offcanvas{ background:var(--accent); color:#fff; border-radius:var(--radius-xs); } /* ============================================================ MAIN CONTENT / block header / breadcrumb ============================================================ */ #wrapper #main-content{ background:var(--body-color); } #wrapper .block-header{ padding:26px 8px 10px; } #wrapper .block-header h2{ font-weight:800; letter-spacing:-.01em; color:var(--ink-strong); position:relative; padding-left:14px; } #wrapper .block-header h2::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:22px; border-radius:2px; background:var(--accent); } #wrapper .breadcrumb{ background:transparent; padding:6px 0 0; margin:0; } #wrapper .breadcrumb .breadcrumb-item, #wrapper .breadcrumb .breadcrumb-item a{ color:var(--ink-faint); font-size:13px; } #wrapper .breadcrumb .breadcrumb-item a:hover{ color:var(--accent); } #wrapper .breadcrumb .breadcrumb-item.active{ color:var(--ink-dim); } #wrapper .breadcrumb-item + .breadcrumb-item::before{ color:var(--ink-faint); } /* ============================================================ CARDS ============================================================ */ #wrapper .card{ background:var(--card-color); border:1px solid var(--border-color); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:box-shadow var(--trans),border-color var(--trans),transform var(--trans); } #wrapper .card:hover{ box-shadow:var(--shadow); } #wrapper .card > .header{ padding:18px 22px; border-bottom:1px solid var(--border-color); position:relative; } #wrapper .card > .header h2{ font-size:16px; font-weight:800; color:var(--ink-strong); margin:0; display:flex; align-items:center; gap:9px; } #wrapper .card > .header h2 i, #wrapper .card > .header h2 svg{ color:var(--accent); } #wrapper .card > .header h2 small{ color:var(--text-muted); } #wrapper .card > .body{ padding:22px; color:var(--font-color); } #wrapper .card .body.table-responsive{ padding:8px 10px 10px; } /* ============================================================ STAT WIDGETS (top_widget) ============================================================ */ #wrapper .card.top_widget{ border:none; border-radius:var(--radius); overflow:hidden; position:relative; box-shadow:var(--shadow); } #wrapper .card.top_widget:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); } #wrapper .card.top_widget .body{ padding:24px 22px; position:relative; z-index:1; } #wrapper .card.top_widget a{ text-decoration:none; display:block; } #wrapper .card.top_widget .icon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18)!important; backdrop-filter:blur(4px); position:absolute; right:20px; left:auto; top:50%; transform:translateY(-50%); } #wrapper .card.top_widget .icon i{ font-size:24px; color:#fff; } #wrapper .card.top_widget .content .text{ font-size:12px; letter-spacing:.1em; font-weight:700; opacity:.92; color:#fff; } #wrapper .card.top_widget .content .number{ font-size:34px; font-weight:800; line-height:1.1; color:#fff; } #wrapper .card.top_widget .content{ color:#fff; } /* variants */ #wrapper .card.top_widget.primary-bg{ background:linear-gradient(135deg,var(--accent),var(--accent-3)); } #wrapper .card.top_widget.secondary-bg{ background:linear-gradient(135deg,#2b3550,#1a2138); } #wrapper .card.top_widget.bg-dark{ background:linear-gradient(135deg,#23262c,#111216)!important; } #wrapper .card.top_widget::after{ content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%); pointer-events:none; } /* master-status toggle card */ #wrapper .card.top_widget.checkbox-switch, #wrapper .card.top_widget.checkbox-switch-user{ box-shadow:var(--shadow); border-radius:var(--radius); } #wrapper .checkbox-switch .checkbox-animate, #wrapper .checkbox-switch-user .checkbox-animate-user{ background:linear-gradient(135deg,#e23b3b,#a11)!important; min-height:104px; border-radius:var(--radius); } #wrapper .checkbox-switch input.input-checkbox:checked + .checkbox-animate{ background:linear-gradient(135deg,#25c268,#12924a)!important; } #wrapper .checkbox-switch-user input.input-checkbox:checked + .checkbox-animate-user{ background:linear-gradient(135deg,#25c268,#12924a)!important; } /* ============================================================ TABLES ============================================================ */ #wrapper .table{ color:var(--font-color); margin-bottom:0; } #wrapper .table thead th{ background:var(--surface-3)!important; color:var(--ink-dim)!important; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; border:none!important; border-bottom:1px solid var(--border-color)!important; padding:14px 16px; white-space:nowrap; } #wrapper .table tbody td{ border-top:1px solid var(--line-soft)!important; padding:14px 16px; vertical-align:middle; color:var(--font-color); } #wrapper .table tbody tr{ transition:background var(--trans); } #wrapper .table.table-hover tbody tr:hover{ background:rgba(var(--accent-glow),.05)!important; } #wrapper .table tbody tr td a:not(.btn){ color:var(--accent); font-weight:700; } #wrapper .table tbody tr td a:not(.btn):hover{ color:var(--accent-2); text-decoration:underline; } #wrapper .table thead th::after{ display:none; } /* dataTables chrome */ #wrapper .dataTables_wrapper .dataTables_filter input, #wrapper .dataTables_wrapper .dataTables_length select{ background:var(--card-color); border:1px solid var(--border-color); border-radius:var(--radius-xs); color:var(--font-color); padding:6px 10px; } #wrapper .dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:var(--radius-xs)!important; border:1px solid var(--border-color)!important; color:var(--font-color)!important; background:var(--card-color)!important; margin:0 2px; } #wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current, #wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; } #wrapper .dataTables_wrapper .dataTables_info, #wrapper .dataTables_wrapper .dataTables_length, #wrapper .dataTables_wrapper .dataTables_filter{ color:var(--text-muted); } /* ============================================================ BUTTONS ============================================================ */ #wrapper .btn{ border-radius:var(--radius-xs); font-weight:700; letter-spacing:.01em; padding:9px 16px; transition:all var(--trans); border:1px solid transparent; } #wrapper .btn:focus{ box-shadow:0 0 0 3px rgba(var(--accent-glow),.25); } #wrapper .btn-primary, #wrapper .theme-red .btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-3)); border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(var(--accent-glow),.25); } #wrapper .btn-primary:hover, #wrapper .theme-red .btn-primary:hover{ background:linear-gradient(135deg,var(--accent-2),var(--accent)); transform:translateY(-1px); box-shadow:var(--shadow-accent); color:#fff; } #wrapper .btn-danger{ background:#e0294a; border-color:transparent; color:#fff; } #wrapper .btn-danger:hover{ background:#c11f3d; transform:translateY(-1px); color:#fff; } #wrapper .btn-success{ background:#22a55e; border-color:transparent; color:#fff; } #wrapper .btn-success:hover{ background:#1c8f50; transform:translateY(-1px); color:#fff; } #wrapper .btn-secondary{ background:var(--surface-3); border-color:var(--border-color); color:var(--ink); } #wrapper .btn-secondary:hover{ background:var(--border-color); color:var(--ink-strong); } #wrapper .btn-info{ background:#2b83c4; border-color:transparent; color:#fff; } #wrapper .btn-warning{ background:#e8a33d; border-color:transparent; color:#fff; } #wrapper .btn-sm{ padding:6px 12px; font-size:12.5px; border-radius:7px; } #wrapper .btn-edit{ background:linear-gradient(135deg,var(--accent),var(--accent-3)); color:#fff; } #wrapper .btn.float-right{ float:right; } /* ============================================================ BADGES ============================================================ */ #wrapper .badge{ border-radius:var(--radius-pill); padding:5px 12px; font-weight:800; font-size:11px; letter-spacing:.03em; } #wrapper .badge-warning{ background:rgba(232,163,61,.16); color:#c6832a; } #wrapper .badge-success{ background:rgba(34,165,94,.16); color:#1c8f50; } #wrapper .badge-info{ background:rgba(43,131,196,.16); color:#2277b8; } #wrapper .badge-danger{ background:rgba(224,41,74,.16); color:#d0203f; } [data-theme="dark"] #wrapper .badge-warning{ color:#f0b866; } [data-theme="dark"] #wrapper .badge-success{ color:#4cd489; } [data-theme="dark"] #wrapper .badge-info{ color:#69b4e8; } [data-theme="dark"] #wrapper .badge-danger{ color:#ff6b83; } /* ============================================================ FORMS ============================================================ */ #wrapper .form-control, #wrapper .form-group .form-control, #wrapper select.form-control, #wrapper textarea.form-control{ background:var(--card-color); border:1px solid var(--border-color); border-radius:var(--radius-xs); color:var(--font-color); padding:10px 14px; transition:border-color var(--trans),box-shadow var(--trans),background var(--trans); } #wrapper .form-control::placeholder{ color:var(--ink-faint); } #wrapper .form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-glow),.16); background:var(--card-color); color:var(--ink-strong); } #wrapper label, #wrapper .form-group label{ color:var(--ink-dim); font-weight:700; font-size:13px; margin-bottom:6px; } #wrapper .form-line{ border-color:var(--border-color); } /* Native