/* h:\var\www\fly\www\assets\css\admin-style.css */ /* * Vlastné štýly pre administráciu Fly E-shopu. * Tento súbor by mal obsahovať len špecifické úpravy a doplnky k Bootstrapu. */ /* Globálne CSS premenné pre Administráciu */ :root { /* CI Farby pre Admin - tieto hodnoty si prispôsob podľa firemnej identity administrácie */ --admin-ci-primary: #4e73df; /* Hlavná farba pre admin (napr. SB Admin modrá) */ --admin-ci-secondary: #858796; /* Doplnková farba pre admin (napr. SB Admin sivá) */ --admin-ci-accent: #f6c23e; /* Akcentová farba pre admin (napr. SB Admin žltá) */ --admin-ci-text-dark: #5a5c69; /* Tmavý text v admine */ --admin-ci-text-light: #f8f9fc; /* Svetlý text na tmavom pozadí v admine */ --admin-ci-background-light: #f8f9fc; /* Svetlé pozadie pre hlavný obsah adminu */ --admin-ci-background-dark: #2c3e50; /* Tmavé pozadie pre prvky ako sidebar alebo header */ --admin-ci-border-color: #e3e6f0; /* Farba okrajov a oddeľovačov v admine */ /* Sémantické farby odvodené od CI alebo štandardných stavov */ --admin-primary-color: var(--admin-ci-primary); --admin-secondary-color: var(--admin-ci-secondary); --admin-success-color: #1cc88a; /* Zelená pre úspešné akcie */ --admin-danger-color: #e74a3b; /* Červená pre chybové stavy alebo mazanie */ --admin-warning-color: var(--admin-ci-accent); /* Žltá/oranžová pre varovania */ --admin-info-color: #36b9cc; /* Modrozelená pre informačné správy */ --admin-light-color: var(--admin-ci-background-light); --admin-dark-color: var(--admin-ci-text-dark); /* Písmo pre Admin */ --admin-font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Príklad písma často používaného v admin šablónach */ --admin-body-font-size: 0.9rem; /* Mierne menšie písmo pre hustejšie admin rozhrania */ --admin-body-line-height: 1.6; /* Ostatné premenné pre Admin */ --admin-border-radius-base: 0.35rem; /* Zaoblenie pre admin prvky */ --admin-box-shadow-base: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); /* Jemný tieň pre karty a boxy */ } /* Základné nastavenie pre body administrácie */ body.admin-body { /* Pridaj triedu 'admin-body' k elementu v @adminLayout.latte */ display: flex; flex-direction: column; min-height: 100vh; font-family: var(--admin-font-family-sans-serif); font-size: var(--admin-body-font-size); line-height: var(--admin-body-line-height); background-color: var(--admin-ci-background-light); color: var(--admin-ci-text-dark); } /* Základné rozloženie pre administráciu, aby footer bol vždy dole */ /* Cielenie na Bootstrap štruktúru, ktorú môže používať napr. SB Admin alebo podobný layout. */ /* V tvojom @adminLayout.latte je použitá flex štruktúra priamo na body a .container-fluid/.container */ .admin-body .container-fluid, .admin-body #wrapper #content-wrapper { /* Cielenie na Bootstrap štruktúru SB Admin */ flex: 1; display: flex; flex-direction: column; } .admin-body #content { flex: 1 0 auto; } .admin-body .footer { flex-shrink: 0; } /* Sidebar - špecifické úpravy, ak sú potrebné nad rámec Bootstrapu alebo admin šablóny. */ /* Tvoj @adminLayout.latte momentálne nemá explicitný sidebar, ale navigáciu v

. */ /* Tieto štýly by boli relevantné, ak by si pridal dedikovaný bočný panel. */ .sidebar { /* Príklad použitia CI farby pre pozadie sidebaru, ak nie je riešené Bootstrap triedami */ /* background-color: var(--admin-ci-background-dark); */ /* Napr. pre tmavý sidebar */ } .sidebar .nav-link { /* color: var(--admin-ci-text-light); */ /* Ak je pozadie sidebaru tmavé */ /* font-weight: 500; */ /* Mierne tučnejšie písmo pre lepšiu čitateľnosť */ } .sidebar .nav-link.active { /* color: var(--admin-ci-accent); */ /* Zvýraznenie aktívnej položky */ /* background-color: color-mix(in srgb, var(--admin-ci-primary) 15%, transparent); */ /* Jemné pozadie pre aktívnu položku */ } .sidebar .nav-link i.bi { /* Ikony v sidebare */ margin-right: 0.5rem; /* font-size: 1.1em; */ /* Mierne väčšie ikony */ } /* Hlavička stránky v admine (nadpis a tlačidlá akcií pod hlavným menu) */ /* Toto je pre blok, ktorý typicky obsahuje H1 nadpis stránky a akčné tlačidlá ako "Pridať nový". */ .admin-page-header { padding-top: 1.5rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--admin-ci-border-color); } .admin-page-header h1.h2 { margin-bottom: 0; } /* Karty v admine - pre obaľovanie obsahu, formulárov, tabuliek */ /* Používame shadow-sm z Bootstrapu, ale môžeme pridať vlastný tieň cez premennú, ak je to preferované. */ .card.shadow-sm { /* Používame shadow-sm z Bootstrapu, ale môžeme pridať vlastný tieň cez premennú */ box-shadow: var(--admin-box-shadow-base); border-radius: var(--admin-border-radius-base); border-color: var(--admin-ci-border-color); } .card-header.bg-light { /* Hlavička karty */ background-color: #f8f9fc !important; /* Svetlejšia ako default Bootstrap .bg-light pre lepší kontrast */ border-bottom: 1px solid var(--admin-ci-border-color); } /* Tabuľky v admine - všeobecné vylepšenia pre tabuľky */ .table { /* Všeobecné úpravy pre tabuľky */ /* font-size: 0.85rem; */ /* Ešte menšie písmo pre tabuľky, ak je potrebné */ } .table thead.table-light th { /* Hlavička tabuľky */ background-color: #eaecf4 !important; /* Mierne tmavšia ako .bg-light pre odlíšenie */ border-bottom-width: 1px; font-weight: 600; /* Tučnejšie písmo v hlavičke */ } .table td, .table th { vertical-align: middle; /* Vertikálne zarovnanie obsahu buniek */ } .table-hover tbody tr:hover { background-color: color-mix(in srgb, var(--admin-ci-primary) 5%, transparent); /* Jemný hover efekt */ } /* Tlačidlá v admine - základné štýly a hover efekty */ .btn { border-radius: var(--admin-border-radius-base); /* font-weight: 500; */ } .btn-primary { background-color: var(--admin-primary-color); border-color: var(--admin-primary-color); /* color: var(--admin-ci-text-light); /* Ak je primárna farba tmavá, text by mal byť svetlý */ } .btn-primary:hover { background-color: color-mix(in srgb, var(--admin-primary-color) 85%, black); border-color: color-mix(in srgb, var(--admin-primary-color) 80%, black); } .btn-sm { /* padding: 0.25rem 0.5rem; */ /* Bootstrap default, môžeš upraviť pre menšie tlačidlá */ /* font-size: 0.75rem; */ /* Bootstrap default pre .btn-sm */ } /* Formulárové prvky */ .form-control, .form-select { border-radius: var(--admin-border-radius-base); border-color: var(--admin-ci-border-color); } .form-control:focus, .form-select:focus { border-color: var(--admin-primary-color); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--admin-primary-color) 25%, transparent); } .form-check-input:checked { background-color: var(--admin-primary-color); border-color: var(--admin-primary-color); } .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/%3e%3c/svg%3e"); } /* AJAX loading indikátor (progress bar na vrchu stránky) - aktivuje sa pridaním triedy .ajax-loading na */ body.ajax-loading::after { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 4px; /* Výška progress baru */ background-color: var(--admin-primary-color); /* Použitie admin primárnej farby */ z-index: 9999; animation: ajaxProgress 1.5s infinite ease-out; } @keyframes ajaxProgress { 0% { width: 0%; opacity: 1; } 50% { width: 70%; opacity: 0.8; } 95% { width: 100%; opacity: 0.5; } 100% { width: 100%; opacity: 0; } } /* Štýly pre color swatches (použité napr. pri formulári pre hodnoty atribútov typu color_swatch) */ .color-swatches .form-check-input.visually-hidden + .swatch { transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; } .color-swatches .form-check-input.visually-hidden:checked + .swatch { transform: scale(1.2); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--admin-primary-color); /* Použitie admin primárnej farby */ } .color-swatches .form-check-input.visually-hidden:focus + .swatch { box-shadow: 0 0 0 2px white, 0 0 0 4px color-mix(in srgb, var(--admin-primary-color) 50%, transparent); /* Focus štýl */ } /* Pomocná trieda pre odstránenie marginu, ak je potrebná */ .nemargin { margin: 0px auto; } /* Štýly pre strom kategórií v administrácii (napr. pri editácii produktu pre výber kategórií) */ .category-tree .list-group-item { border-left: 3px solid transparent; /* Priestor pre indikátor úrovne */ padding-left: calc(1.25rem + var(--level, 0) * 1.5rem); /* Odsadenie podľa úrovne */ } .category-tree .list-group-item-action:hover { background-color: var(--admin-ci-border-color); /* Jemný hover efekt */ } .category-tree .list-group-item.active { /* Zvýraznenie aktívnej kategórie v strome */ background-color: color-mix(in srgb, var(--admin-primary-color) 10%, transparent); border-left-color: var(--admin-primary-color); } /* Pomocná trieda pre veľmi malé písmo, ak je potrebná */ .text-xxsmall { font-size: 0.75em; } /* Flash správy v admine - cielenie na kontajner definovaný v @adminLayout.latte */ .flash-messages-container .alert { /* Predpokladáme, že kontajner je rovnaký */ /* Štýly môžu byť rovnaké ako vo frontend style.css, alebo špecifické pre admin */ /* napr. iné pozicovanie alebo vzhľad */ z-index: 1100; /* Zabezpečí, aby boli nad ostatným obsahom, ale pod modalmi (Bootstrap modaly majú z-index okolo 1050-1070) */ /* min-width: 300px; */ /* Pre lepšiu čitateľnosť na menších obrazovkách */ } /* Breadcrumbs v admine - ak by si ich používal a chcel špecificky štýlovať */ .breadcrumb-admin .breadcrumb-item a { color: var(--admin-secondary-color); } .breadcrumb-admin .breadcrumb-item a:hover { color: var(--admin-primary-color); } .breadcrumb-admin .breadcrumb-item.active { color: var(--admin-text-dark); } .breadcrumb-admin .breadcrumb-item + .breadcrumb-item::before { color: var(--admin-secondary-color); } /* Fix for sidebar link clicks being intercepted by user dropdown */ #sidebar-wrapper { position: relative; z-index: 1000; } #sidebar-wrapper .list-group-item { position: relative; z-index: 1001; } .navbar .dropdown-menu { z-index: 1050; } /* Ensure sidebar links are clickable and not covered by navbar elements */ @media (max-width: 991.98px) { #sidebar-wrapper { position: fixed; top: 0; left: -250px; width: 250px; height: 100vh; transition: left 0.3s ease; z-index: 1040; } #sidebar-wrapper.toggled { left: 0; } #page-content-wrapper { margin-left: 0; width: 100%; } }