/*! * digilogic.custom.css — Egyéni (fejlesztői) stílusok. * * Ez a fájl a -ben az UTOLSÓ stíluslapként töltődik be, így bármely * téma- (Digilogic/Bootstrap) szabályt felülírhat. A téma-frissítés NEM írja * felül, mert a vendor bundle-ön (public/assets/digilogic/) KÍVÜL van. * * BRANDING-INTEGRÁCIÓ: a layout mindig kiteszi a márka-színt CSS-változóként, * domain-tudatosan (admin → Branding → elsődleges szín). Használd bátran: * color: var(--brand-primary); * background: rgba(var(--brand-primary-rgb), .12); * * PER-DOMAIN: domainenként eltérő felülírást a * public/assets/custom/domains/{domain-slug}/digilogic.custom.css * fájlba tehetsz — az ITT lévő globális UTÁN töltődik, így felülírja. * * Ide írd a saját, projektspecifikus CSS-felülírásaidat. */ /* ── SSO / auth felületek ───────────────────────────────────────────── * A rendszernév-cím (sys-name-title) elrejtése MINDEN oldalon (a logó alatt * felesleges duplikáció), és az digilogic-copyright egységes formázása a * karbantartás (maintenance) oldalakkal: kis, halvány, nem félkövér szöveg. */ .sys-name-title { display: none !important; } .digilogic-copyright p { margin: 0; line-height: 1.5; font-size: 12px; color: #8094ae; font-weight: 400; } /* ════════════════════════════════════════════════════════════════════ * FRONTEND-FINOMÍTÁS (2.99.78) — egységes, visszafogott polish-réteg. * Csak megjelenést finomít (méret / rés / lekerekítés / hover / fókusz), * Digilogic-komponens szerkezetet NEM ír át. Dark-mode-tudatos: fix világos * hátteret nem használ, a .dark-mode felülírások a szakasz végén. * ════════════════════════════════════════════════════════════════════ */ /* ── Tipográfia ──────────────────────────────────────────────────── */ .nk-block-title.page-title { font-weight: 700; letter-spacing: -0.01em; } .nk-block-des p { font-size: 0.8125rem; } .form-label { font-weight: 600; font-size: 0.8125rem; } .form-note, .text-soft.small, small.text-soft { font-size: 0.75rem; line-height: 1.5; } /* ── Gombok: egységes lekerekítés + ikon–szöveg rés ──────────────── */ .btn { border-radius: 5px; } .btn-sm, .btn-xs { border-radius: 4px; } .btn > .icon + span, .btn > .icon + * { margin-left: 0.35rem; } .btn:focus-visible { outline: 2px solid rgba(var(--brand-primary-rgb, 8, 55, 124), 0.55); outline-offset: 1px; } /* ── Kártyák: finom lekerekítés + kattintható kártya hover ───────── */ .card-bordered { border-radius: 6px; } a.card-bordered { transition: border-color .15s ease, box-shadow .15s ease; } a.card-bordered:hover { border-color: rgba(var(--brand-primary-rgb, 8, 55, 124), 0.55); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } /* ── Oldalsáv (menü): kompaktabb sorok + brand-színű aktív jelölés ── */ .nk-menu-link { padding-top: 0.5rem; padding-bottom: 0.5rem; } .nk-menu-item.active > .nk-menu-link, .nk-menu-item.current-page > .nk-menu-link { position: relative; } .nk-menu-item.active > .nk-menu-link::before, .nk-menu-item.current-page > .nk-menu-link::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--brand-primary, #08377c); } .nk-menu-heading .overline-title { letter-spacing: 0.08em; } /* ── Fejléc: eszköz-ikonok egyenletes rése + hover ───────────────── */ .nk-quick-nav > li { padding: 0 4px; } .nk-quick-nav-icon { transition: color .12s ease, background-color .12s ease; border-radius: 50%; } .nk-quick-nav-icon:hover { background: rgba(var(--brand-primary-rgb, 8, 55, 124), 0.08); } /* ── Táblázatok: olvashatóbb fejléc + sor-hover ──────────────────── */ .nk-tb-list .nk-tb-head .nk-tb-col, table thead th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; } .table-hover > tbody > tr:hover, .nk-tb-item:not(.nk-tb-head):hover { background: rgba(var(--brand-primary-rgb, 8, 55, 124), 0.04); } /* ── Űrlapok: brand-színű fókusz ─────────────────────────────────── */ .form-control:focus, .form-select:focus { border-color: rgba(var(--brand-primary-rgb, 8, 55, 124), 0.65); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 8, 55, 124), 0.12); } /* ── Jelvények / riasztások / legördülők / modálok ───────────────── */ .badge { border-radius: 4px; font-weight: 600; } .badge.rounded-pill, .badge-pill { border-radius: 50rem; } .alert { border-radius: 6px; } .alert-icon > .icon { margin-right: 0.5rem; } .dropdown-menu { border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10); } .modal-content { border-radius: 8px; } /* ── Toastr (felugró értesítések): finomabb doboz ────────────────── */ #toast-container > div { border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); opacity: 0.97; font-size: 0.8125rem; padding: 12px 40px 12px 48px; } #toast-container > div:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); opacity: 1; } #toast-container .toast-title { font-size: 0.875rem; } /* ── SweetAlert2 (megerősítő párbeszéd): a témával egyező gombok ─── */ .swal2-popup { border-radius: 8px; font-size: 0.875rem; } .swal2-styled.swal2-confirm { border-radius: 5px; } .swal2-styled.swal2-cancel { border-radius: 5px; } /* ── Kompakt mód (admin-kapcsolható: ui.compact_mode) ────────────── */ body.ui-compact .card-inner { padding: 1rem; } body.ui-compact .nk-content { padding-top: 1.25rem; padding-bottom: 1.25rem; } body.ui-compact .nk-block-head { padding-bottom: 0.75rem; } body.ui-compact .nk-menu-link { padding-top: 0.375rem; padding-bottom: 0.375rem; } body.ui-compact .form-group { margin-bottom: 0.75rem; } /* ── Breadcrumb (oldal-fejléc, DashLite arrow-stílus) ────────────── */ .nk-block-head .breadcrumb { padding: 0; margin-bottom: .35rem; background: transparent; } .nk-block-head .breadcrumb .breadcrumb-item { font-size: .75rem; } .nk-block-head .breadcrumb .breadcrumb-item a { color: #8094ae; } .nk-block-head .breadcrumb .breadcrumb-item a:hover { color: var(--brand-primary, #08377c); } .nk-block-head .breadcrumb .breadcrumb-item .icon { font-size: .9rem; vertical-align: -.06em; } /* Az oldalcím (H1) a téma-osztályból méreteződik — a tag h1, a kinézet változatlan. */ h1.nk-block-title.page-title { margin-bottom: 0; } /* ── Skeleton (placeholder) betöltés — kép-shimmer + a11y ────────── */ .en-skeleton .placeholder { border-radius: 4px; } .en-img-skeleton { background-color: rgba(128, 148, 174, .12); background-image: linear-gradient(100deg, rgba(128,148,174,.04) 30%, rgba(128,148,174,.18) 50%, rgba(128,148,174,.04) 70%); background-size: 200% 100%; animation: enImgShimmer 1.4s ease-in-out infinite; min-height: 1.5rem; } @keyframes enImgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Csökkentett-mozgás igény: nincs animált csillogás (akadálymentesítés). */ @media (prefers-reduced-motion: reduce) { .placeholder-wave, .en-img-skeleton { animation: none !important; } } /* ── Kártya-fejléc védőszabályok (globális): a cím zsugorodhasson, az eszköz-oldal (ikon-kör/badge/link) SOSE nyomódjon össze ───── */ .card-title-group > .card-title { min-width: 0; } .card-title-group > .card-tools { flex-shrink: 0; } /* ── Dark-mode kiigazítások ──────────────────────────────────────── */ .dark-mode a.card-bordered:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .dark-mode .nk-quick-nav-icon:hover { background: rgba(255, 255, 255, 0.06); } .dark-mode .table-hover > tbody > tr:hover, .dark-mode .nk-tb-item:not(.nk-tb-head):hover { background: rgba(255, 255, 255, 0.03); } /* ── Felső sáv (nk-quick-nav) elem-egységesítés ────────────────────── A fejléc-chipek — karbantartás-timer, „bypass mód" gomb, nyelvváltó, szerep/SUDO jelvény, cég-váltó — külön komponensekből jönnek, ezért eltérő a magasságuk. Egységes chip-magasság + betűméret + függőleges igazítás, hogy egy vonalban, egyforma méretben álljanak. (2.99.109) */ .nk-header .nk-quick-nav { align-items: center; } .nk-header .nk-quick-nav .btn, .nk-header .nk-quick-nav .badge, .nk-header #mbp-timer .badge, .nk-header .nk-quick-nav .company-chip, .nk-header .cms_lang_selector.is-inline .dropdown-toggle { height: 30px; display: inline-flex; align-items: center; font-size: .78rem; line-height: 1; white-space: nowrap; } .nk-header .nk-quick-nav .btn { padding-top: 0; padding-bottom: 0; box-shadow: none !important; } .nk-header .nk-quick-nav .badge, .nk-header #mbp-timer .badge, .nk-header .nk-quick-nav .company-chip { padding-top: 0; padding-bottom: 0; } /* A chip-ikonok legyenek arányosak a szöveggel */ .nk-header .nk-quick-nav .btn .icon, .nk-header .nk-quick-nav .badge .icon, .nk-header #mbp-timer .badge .icon, .nk-header .nk-quick-nav .company-chip .icon { font-size: .9rem; } /* A jobb-oldali „online / név" blokk és az avatar maradjon a saját méretén, de a chipek közti térköz legyen egységes. */ .nk-header .nk-quick-nav > li { margin-left: 0; margin-right: 0; padding: 0 4px; } /* ════════════════════════════════════════════════════════════════════ * LAGERMAX BRANDING — Droulers dekoratív számozó betűtípus (CD 3.1) * -------------------------------------------------------------------- * A SZÖVEG-betűtípust (Neue Haas Grotesk) NEM itt kötjük be — azt a `fonts` * modul kezeli (public/assets/custom/fonts/neue-haas-grotesk/, /adminarea/fonts). * A Droulers a Lagermax CD szerint KIZÁRÓLAG nagy méretű, dekoratív SZÁMOZÁShoz * való (soha folyó szöveghez) — ezért külön @font-face + segéd-osztály. * ════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Droulers"; font-style: normal; font-weight: 400; font-display: swap; src: url("brand/fonts/droulers/Droulers_WEB-Regular.woff2") format("woff2"), url("brand/fonts/droulers/Droulers_WEB-Regular.woff") format("woff"); } /* Nagy, dekoratív számok (lépés-sorszám, kiemelt statisztika, „hero" szám). NEM folyó szöveghez! Fallback: Neue Haas Grotesk → Arial. */ .dl-num-display { font-family: "Droulers", "Neue Haas Grotesk", Arial, sans-serif; font-weight: 400; line-height: 1; letter-spacing: 0.01em; } /* ════════════════════════════════════════════════════════════════════ * LAGERMAX DESIGN MOTÍVUMOK — hullámvonalak (CD 6.1) + nyíl (CD 6.2) * -------------------------------------------------------------------- * A hullám a claim vizuális kifejezése („together in motion"), ezért ahol * a média engedi, MOZOG (vízszintes, varrat nélküli csúszás). A színt a * currentColor hordozza (theme-szín-vezérelt). Reszponzív, reduced-motion-tudatos. * Komponensek: , . Kapcsoló: theme.motifs_enabled. * ════════════════════════════════════════════════════════════════════ */ /* ── Hullám (animált, beágyazott SVG a komponensben) ─────────────────── */ .dl-wave { display: block; width: 100%; height: var(--dl-wave-h, 60px); overflow: hidden; line-height: 0; pointer-events: none; } .dl-wave .dl-wave-svg { display: block; width: 100%; height: 100%; } .dl-wave-flip { transform: scaleY(-1); } /* A belső csoport egy fél-tartalomnyit (1200 user-unit = 2 periódus) csúszik → varrat nélküli loop. */ .dl-wave .dl-wave-anim { animation: dl-wave-drift 16s linear infinite; will-change: transform; } .dl-wave-static .dl-wave-anim { animation: none; } @keyframes dl-wave-drift { from { transform: translateX(0); } to { transform: translateX(-1200px); } } /* ── Hullám-elválasztó (statikus, könnyű: mask-alapú, nem inline) ───── * Footerhez / szakasz-határhoz. A theme márka-színt veszi fel, a wave.svg * alfa-maszkja adja a vonal-mintát (mélység a vonal-opacitásból). */ .dl-wave-divider { width: 100%; height: 24px; background-color: var(--brand-primary); opacity: .45; -webkit-mask: url("brand/motif/wave.svg") repeat-x center / auto 100%; mask: url("brand/motif/wave.svg") repeat-x center / auto 100%; } .dl-wave-divider.is-accent { background-color: var(--brand-accent); } /* ── Nyíl (tömör, forgatható; a komponens állítja a méretet/forgatást) ── */ .dl-arrow { display: inline-block; vertical-align: middle; line-height: 0; } .dl-arrow .dl-arrow-svg { display: block; width: 100%; height: 100%; } /* Akadálymentesítés: csökkentett-mozgás igény esetén a hullám nem animál. */ @media (prefers-reduced-motion: reduce) { .dl-wave .dl-wave-anim { animation: none !important; } } /* Mobil-modul: kattintható KPI csempék a modul kezdőlapján */ .js-kpi-card { transition: box-shadow .15s ease, transform .15s ease; color: inherit; } .js-kpi-card:hover { box-shadow: 0 .25rem .75rem rgba(16, 25, 40, .12); transform: translateY(-2px); } .js-kpi-card:focus-visible { outline: 2px solid var(--brand-primary, #08377c); outline-offset: 2px; } /* Sidebar fejléc — NYITOTT állapot: a menü-kapcsoló a jobb szélre kerül, nem tapad közvetlenül a logóhoz. */ .nk-sidebar:not(.is-compact) .nk-sidebar-head { justify-content: space-between; } .nk-sidebar:not(.is-compact) .nk-sidebar-head .nk-menu-trigger { margin-left: auto; } .nk-sidebar-head .nk-sidebar-brand { display: flex; align-items: center; min-width: 0; } .nk-sidebar-head .nk-sidebar-logo .logo-img { width: auto; height: auto; } .nk-sidebar-head .nk-menu-trigger { display: flex; align-items: center; } .nk-sidebar-head .nk-menu-trigger .nk-quick-nav-icon { display: inline-flex; align-items: center; justify-content: center; } /* Sidebar fejléc — ÖSSZECSUKOTT (compact) állapot. A téma ilyenkor 74px-re szűkíti a sávot, a fejléc viszont 290px széles marad: a jobbra igazított kapcsoló kicsúszna a látható részből, és nem lenne mivel visszanyitni a menüt. Ezért itt a logót elrejtjük (a téma amúgy is átlátszóvá teszi), a kapcsolót pedig a szűk sáv közepére igazítjuk. */ .nk-sidebar.is-compact:not(.has-hover) .nk-sidebar-head { width: 100%; justify-content: center; padding-left: 0; padding-right: 0; } .nk-sidebar.is-compact:not(.has-hover) .nk-sidebar-head .nk-sidebar-brand { display: none; } .nk-sidebar.is-compact:not(.has-hover) .nk-sidebar-head .nk-menu-trigger { margin: 0; } /* Aktív cég-váltó a fejlécben: teljes cégnév, kör alakú hover-háttér nélkül */ .company-switch-link { display: inline-flex; align-items: center; padding: 0; line-height: 1; } .company-switch-link::after { display: none; } /* bootstrap caret elrejtése */ .company-switch-link:hover, .company-switch-link:focus { background: none; box-shadow: none; } .company-chip { max-width: 22rem; white-space: nowrap; transition: background-color .15s ease; } .company-switch-link:hover .company-chip { background-color: var(--bs-secondary-bg, #e5e9f2) !important; } @media (max-width: 1200px) { .company-chip { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; } } /* A KPI csempe link-kártya: a téma kártya-elrendezését kövesse (az alapból inline) */ .js-kpi-card { display: flex; flex-direction: column; } .js-kpi-card .card-inner { flex: 1 1 auto; } /* ────────────────────────────────────────────────────────────────────────────── * Badge-ek olvashatósága * * A téma a badge szövegét fehérre állítja (--bs-badge-color: #fff), a `bg-*-dim` * háttér viszont nagyon világos — így fehér szöveg került világos alapra, ami * gyakorlatilag olvashatatlan. Itt minden halvány badge-nek erős, a jelentéséhez * illő szövegszínt és halvány keretet adunk, hogy jól elkülönüljön és olvasható legyen. * ────────────────────────────────────────────────────────────────────────────── */ .badge[class*="-dim"] { font-weight: 600; border: 1px solid rgba(0, 0, 0, .06); } /* A színséma-skin a primary badge-et TÖMÖR márkaszínre állítja — ott fehér szöveg kell, nem sötét (az olvashatatlan lenne a sötét háttéren). */ .badge.bg-primary-dim { color: #ffffff !important; } .badge.bg-info-dim { color: #0a7e91 !important; } .badge.bg-success-dim { color: #0e8a68 !important; } .badge.bg-warning-dim { color: #8a6800 !important; } .badge.bg-danger-dim { color: #b03a30 !important; } .badge.bg-secondary-dim { color: #364a63 !important; } .badge.bg-dark-dim { color: #1f2b3a !important; } .badge.bg-purple-dim { color: #4a37b8 !important; } .badge.bg-pink-dim { color: #b02a6b !important; } .badge.bg-teal-dim { color: #0d7a70 !important; } .badge.bg-orange-dim { color: #a34a00 !important; } .badge.bg-blue-dim { color: #0959c4 !important; } .badge.bg-gray-dim { color: #4b5a6f !important; } /* A világos és a körvonalas badge is kapjon olvasható szöveget */ .badge.bg-light { color: #364a63 !important; border: 1px solid #dbdfea; } .badge[class*="bg-outline-"] { font-weight: 600; } /* Sötét téma: a halvány háttér ilyenkor sötét, ezért világos szövegszín kell */ @media (prefers-color-scheme: dark) { .badge[class*="-dim"] { border-color: rgba(255, 255, 255, .08); } .badge.bg-primary-dim { color: #ffffff !important; } .badge.bg-info-dim { color: #5fd8ea !important; } .badge.bg-success-dim { color: #4ee7bd !important; } .badge.bg-warning-dim { color: #f6cf55 !important; } .badge.bg-danger-dim { color: #ff8a80 !important; } .badge.bg-secondary-dim { color: #b6c6db !important; } .badge.bg-light { color: #1f2b3a !important; } } .dark-mode .badge[class*="-dim"] { border-color: rgba(255, 255, 255, .08); } .dark-mode .badge.bg-primary-dim { color: #ffffff !important; } .dark-mode .badge.bg-info-dim { color: #5fd8ea !important; } .dark-mode .badge.bg-success-dim { color: #4ee7bd !important; } .dark-mode .badge.bg-warning-dim { color: #f6cf55 !important; } .dark-mode .badge.bg-danger-dim { color: #ff8a80 !important; } .dark-mode .badge.bg-secondary-dim { color: #b6c6db !important; } /* Egymás alatti választók (rádió/jelölő): a téma custom-control eleme inline-flex, alacsony min-height-tel. Ha több kerül egymás alá, a következő mező rácsúszhat — ezért blokk-elrendezést és elegendő sormagasságot adunk nekik. */ .form-group > .custom-control, .mb-1 > .custom-control { display: flex; min-height: 1.5rem; align-items: center; } .custom-control-sm { min-height: 1.375rem; } /* ────────────────────────────────────────────────────────────────────────────── * Mobil modul — Folyamatok (guide) oldal * * A téma alaphelyzetbe állítja az
    számozását, ezért a lépések sorszám nélkül, * egymásba folyva jelentek meg. Saját, jól olvasható lépés-listát adunk: körbe zárt * sorszám + a szöveg, elegendő térközzel. * ────────────────────────────────────────────────────────────────────────────── */ .ma-guide-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; margin-right: .75rem; flex: 0 0 auto; } .accordion-s3 .accordion-button { display: flex; align-items: center; } .ma-guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; } .ma-guide-steps > li { display: flex; align-items: flex-start; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid #f0f2f7; } .ma-guide-steps > li:last-child { border-bottom: 0; padding-bottom: 0; } .ma-guide-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 11px; font-weight: 700; flex: 0 0 auto; margin-top: .1rem; } .ma-guide-text { line-height: 1.5; } @media (max-width: 576px) { .ma-guide-icon { width: 1.75rem; height: 1.75rem; margin-right: .5rem; } } /* ───────────────────────────────────────────────────────────────────────── SELECT2 A KIS (sm) URLAP-SOROKBAN Problema: a tema a Select2 dobozat FIX magassagra allitja (.select2-container--default .select2-selection--single { height: calc(2.125rem + 2px) } = ~36px), fuggetlenul attol, hogy az eredeti UTAN kerul a DOM-ba, ezert a szomszed-valaszto (+) alapjan pontosan azok a konteneretek celozhatok, amelyek `form-select-sm`-bol szulettek. Nem kell hozza sem tema-modositas (ami frissiteskor elveszne), sem JS ujrainicializalas. A magassag Bootstrap keplete a kis vezerlokre: calc(1.5em + .5rem + 2px). ───────────────────────────────────────────────────────────────────────── */ select.form-select-sm + .select2-container--default .select2-selection--single, select.form-control-sm + .select2-container--default .select2-selection--single { height: calc(1.5em + .5rem + 2px); font-size: .875rem; } select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__rendered, select.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em); padding: .25rem calc(1.75rem + 2px) .25rem .5rem; } /* A nyil-doboz is kovesse a kisebb magassagot, kulonben tulnyulik a mezon. */ select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__arrow, select.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .5rem + 2px); width: calc(1.75rem + 2px); } /* ───────────────────────────────────────────────────────────────────────── ARNYALT KARTYAK (kereso-/szuro-dobozok, kiemelt urlapok) Egy helyen definialva, mert a rendszerben sok ilyen doboz van, es inline stilussal minden oldalon kulon kellene karbantartani - elobb-utobb elternenek egymastol. Igy egyetlen osztaly a jeloles, es a szin a MARKA-VALTOZOBOL jon: a domain-/ceg-branding es a Szinsema admin atallitasa automatikusan koveti. A Corporate Design szerint a telt marka-kek NAGY FELULETEN nem hasznalhato, ezert 6%-os arnyalat + finom, ugyanabbol a szinbol vett szegely. ───────────────────────────────────────────────────────────────────────── */ .card-tint-brand { background: rgba(var(--brand-primary-rgb, 8, 55, 124), .06); border-color: rgba(var(--brand-primary-rgb, 8, 55, 124), .18); } /* Muveleti szinek: a zold a HOZZAADAS/felrakas, a sarga az ELVETEL/levetel - a ket ellentetes muvelet igy ranezesre megkulonboztetheto. Ezek szandekosan NEM marka-szinek: allapotot jeleznek, nem arculatot. */ .card-tint-success { background: rgba(28, 187, 140, .07); border-color: rgba(28, 187, 140, .22); } .card-tint-warning { background: rgba(245, 176, 26, .09); border-color: rgba(245, 176, 26, .26); }