/* * Self Made Up — brand téma-override réteg (SMU-343 / arculat). * * Karbantartható elv: NEM forkoljuk a Radzen témákat. A Radzen minden színt * `:root { --rz-* }` CSS-változóként definiál; itt ezeket írjuk felül a brand * palettára. Mivel a változókat `body.smu-theme`-re tesszük (a `body` közelebbi * ős, mint a `:root`/`html`), ezek nyernek — a body alá tartozó összes elemre, * a body-ba fűzött Radzen popup/dialog/tooltip elemekre is. * * Hatókör: csak akkor aktív, ha a -n ott a `smu-theme` osztály. Ezt a * material / material-dark (= Self Made Up világos/sötét) témákra tesszük rá; * a többi beépített Radzen téma érintetlen marad. * * A zöld brand-szín mindkét megjelenésben (light/dark) működik, ezért egyetlen * blokk kiszolgálja mindkettőt; a surface-eket (háttér, szöveg) a Radzen base * téma adja. */ body.smu-theme { /* ---- Brand paletta (a logó zöld→teal gradiense alapján) ---- */ --smu-lime: #A3E635; --smu-green: #22C55E; --smu-green-strong: #16A34A; --smu-green-deep: #0D9488; --smu-on-green: #06210F; --smu-gradient: linear-gradient(135deg, #A3E635 0%, #22C55E 45%, #0D9488 100%); --smu-header-bg: #0B0F0C; --smu-header-color: #F4F8F4; /* ---- Primary (kék/indigó → brand zöld) ---- */ --rz-primary: var(--smu-green); --rz-primary-light: #4ADE80; --rz-primary-lighter: rgba(34, 197, 94, 0.12); --rz-primary-dark: var(--smu-green-strong); --rz-primary-darker: #15803D; --rz-on-primary: #ffffff; /* ---- Info (kék → brand teal-zöld, hogy a "kék" gombok is brand-színűek) ---- */ --rz-info: var(--smu-green-deep); --rz-info-light: #2DD4BF; --rz-info-lighter: rgba(13, 148, 136, 0.2); --rz-info-dark: #0B7A70; --rz-info-darker: #095F57; /* ---- Success (zöld "+"/hozzáadás gombok) = brand zöld, hogy a Bejelentkezés gombbal (Primary) egyezzen ---- */ --rz-success: var(--smu-green); --rz-success-light: #4ADE80; --rz-success-lighter: rgba(34, 197, 94, 0.12); --rz-success-dark: var(--smu-green-strong); --rz-success-darker: #15803D; --rz-on-success: #ffffff; /* ---- Oldalsó menü (RadzenPanelMenu) aktív elem: brand-zöld a lila helyett ---- */ --rz-panel-menu-item-active-color: var(--smu-green); --rz-panel-menu-item-active-background-color: rgba(34, 197, 94, 0.14); --rz-panel-menu-item-active-indicator: var(--smu-green); /* ---- Felső tabok (ELEM/LISTA/...) kijelölt: brand-zöld szöveg + aláhúzás a lila helyett ---- */ --rz-tabs-tab-selected-color: var(--smu-green); --rz-tabs-tab-selected-top-border-color: var(--smu-green); /* ---- DataGrid lapozó (RadzenPager) kijelölt oldal: brand-zöld szám + halvány zöld kör a lila helyett ---- */ --rz-pager-numeric-button-selected-color: var(--smu-green); --rz-pager-numeric-button-selected-background-color: rgba(34, 197, 94, 0.16); /* ---- Linkek ---- */ --rz-link-color: var(--smu-green); --rz-link-hover-color: var(--smu-green-strong); /* ---- Fejléc-menü ikon: ne legyen kitöltött (primary) háttér a branded sávon ---- */ --rz-menu-top-item-background-color: transparent; /* ---- SelectBar kijelölt elem (pl. Havi/Éves kapcsoló): tömör brand zöld ---- */ --rz-selectbar-selected-background-color: var(--smu-green); --rz-selectbar-selected-color: #ffffff; /* ---- Scheduler nézet-váltó (NAP/HÉT/HÓNAP/ÉV) aktív gombja: tömör brand zöld (mint a SelectBar). Ez NEM selectbar, hanem .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active — saját --rz-scheduler-view-selected-* változókkal. Az alap háttér halvány lila (--rz-primary-lighter), a szöveg lila (--rz-on-primary-lighter); toggle-gombcsoport, ezért itt tömör zöld a kívánatos. ---- */ --rz-scheduler-view-selected-background-color: var(--smu-green); --rz-scheduler-view-selected-color: #ffffff; --rz-scheduler-view-selected-border-color: var(--smu-green-strong); /* ---- Form-mező fókusz + checkbox: brand-zöld a Radzen alap lila (--rz-primary #bb86fc) helyett. Ezek a leaf-változók közvetlenül a lila --rz-primary-ra hivatkoznak, ezért külön kell őket zöldre húzni. ---- */ --rz-checkbox-checked-background-color: var(--smu-green); --rz-checkbox-checked-border: 1px solid var(--smu-green); --rz-checkbox-checked-hover-background-color: var(--smu-green-strong); --rz-checkbox-checked-hover-border: 1px solid var(--smu-green-strong); --rz-form-field-label-focus-color: var(--smu-green); --rz-outline-color: var(--smu-green); /* A mező fókusz-kerete box-shadow (--rz-form-field-focus-shadow → --rz-input-focus-shadow), nem border */ --rz-input-focus-shadow: inset 0 0 0 1px var(--smu-green); --rz-form-field-focus-shadow: inset 0 0 0 1px var(--smu-green); /* ---- DropDown / MultiSelect / ListBox kijelölt-kiemelt elem: brand-zöld szöveg + halvány zöld háttér. A háttér-változó (--rz-dropdown-item-selected-background-color → --rz-primary-lighter) már zöld a primary-override miatt, DE a szöveg (--rz-dropdown-item-selected-color → --rz-on-primary-lighter) a Radzen alap lila (#bb86fc) marad, mert az --rz-on-primary-lighter leaf-változót nem húztuk zöldre. Ezért a kijelölt-elem szöveg-változóit közvetlenül brand-zöldre állítjuk. Ez érinti az összes RadzenDropDown / RadzenListBox kijelölt elemét app-szerte (e-mail sablon-lista, csoport-lista is). ---- */ --rz-dropdown-item-selected-color: var(--smu-green); --rz-dropdown-item-selected-hover-color: var(--smu-green); /* ---- Branded fejléc-sáv (állandó, mindkét megjelenésben) ---- */ --rz-header-background-color: var(--smu-header-bg); --rz-header-color: var(--smu-header-color); } /* DropDown / MultiSelect / ListBox kijelölt-kiemelt elem — közvetlen szabály biztosítékként (halvány zöld háttér + zöld szöveg, a menü-mintát követve). A változó-út megbízhatatlan lehet, ezért a leaf-változók mellé direkt szelektort is teszünk !important-tal. */ body.smu-theme .rz-dropdown-item.rz-state-highlight, body.smu-theme .rz-multiselect-item.rz-state-highlight, body.smu-theme .rz-listbox-item.rz-state-highlight, body.smu-theme .rz-dropdown-items li.rz-state-highlight, body.smu-theme .rz-multiselect-items li.rz-state-highlight { background-color: rgba(34, 197, 94, 0.14) !important; color: var(--smu-green) !important; } /* A kijelölt ListBox-elem szövege gyakran (saját .rz-text span, saját színnel) vagy más gyermek elem — az item-szintű color: green NEM öröklődik rá, ezért fehér marad. A kijelölt item ÖSSZES leszármazott szöveg-elemét (RadzenText span, link) közvetlenül brand-zöldre húzzuk. A gombok (pl. törlés ikon) saját ButtonStyle-t kapnak, azokat a :not(.rz-button) kizárás érintetlenül hagyja. */ body.smu-theme .rz-listbox-item.rz-state-highlight :not(.rz-button):not(.rz-button *), body.smu-theme .rz-dropdown-item.rz-state-highlight :not(.rz-button):not(.rz-button *), body.smu-theme .rz-multiselect-item.rz-state-highlight :not(.rz-button):not(.rz-button *) { color: var(--smu-green) !important; } /* RadzenListBox kerete — alaphelyzetben semleges szürke, fókuszban brand-zöld (a lila helyett). A keret a --rz-listbox-border → --rz-input-border → --rz-border-normal láncból jön (alap szürke), a fókusz-keret a --rz-listbox-focus-border → --rz-input-focus-border → --rz-border-focus (= --rz-primary). Direkt szabállyal biztosítjuk, hogy se resting, se focus állapotban ne legyen lila/kék. */ body.smu-theme .rz-listbox { border: 1px solid rgba(148, 148, 148, 0.35) !important; } body.smu-theme .rz-listbox:focus, body.smu-theme .rz-listbox:focus-within { border: 1px solid var(--smu-green) !important; box-shadow: inset 0 0 0 1px var(--smu-green) !important; outline: none !important; } /* Checkbox bepipált állapot — közvetlen szabály biztosítékként (a Radzen checked = .rz-chkbox-box.rz-state-active) */ body.smu-theme .rz-chkbox-box.rz-state-active { background-color: var(--smu-green) !important; border-color: var(--smu-green) !important; } /* Fókuszált mező kerete (box-shadow + border minden él) brand-zöld — a label-bevágásnál maradó lila felső él felülírása */ body.smu-theme .rz-form-field.rz-state-focused .rz-form-field-content { box-shadow: inset 0 0 0 1px var(--smu-green) !important; border-color: var(--smu-green) !important; } /* Böngésző-autofill (Chrome/Edge világoskék-lila háttér) elnyomása: a mező megtartja a témához illő (átlátszó/sötét) hátterét, a szöveg a téma színét kapja. A nagy transition-idő miatt a böngésző által animált autofill-háttér gyakorlatilag sosem jelenik meg. */ body.smu-theme input:-webkit-autofill, body.smu-theme input:-webkit-autofill:hover, body.smu-theme input:-webkit-autofill:focus, body.smu-theme input:-webkit-autofill:active, body.smu-theme textarea:-webkit-autofill { transition: background-color 600000s 0s, color 600000s 0s !important; -webkit-text-fill-color: var(--rz-text-color, #f4f8f4) !important; caret-color: var(--rz-text-color, #f4f8f4); } /* Bootstrap list-group (pl. rekord-lista a nézet mellett) témakövető háttere: a --rz-* változók light/dark szerint váltanak, így sötét módban nem fehér, világos módban pedig változatlanul jó marad. */ body.smu-theme .list-group-item { background-color: var(--rz-base-background-color, #fff); /* halvány fehér fátyol = elevation: sötétben kissé világosabb (kiemelkedik), világosban láthatatlan */ background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); color: var(--rz-text-color, #1a1a1a); border-color: rgba(148, 148, 148, 0.35); } body.smu-theme .list-group-item-action:hover:not(.active) { /* a Bootstrap világos hover-hátterét felülírjuk (különben eltűnik a szöveg); hoveren csak a szöveg zöld */ background-color: var(--rz-base-background-color, #fff) !important; background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); color: var(--smu-green) !important; } /* Kiválasztott (aktív) lista-elem: zöld szöveg + halvány zöld háttér (mint a menü), nem tömör zöld */ body.smu-theme .list-group-item.active { background-color: rgba(34, 197, 94, 0.14) !important; background-image: none !important; border-color: var(--smu-green) !important; color: var(--smu-green) !important; } /* Bootstrap .btn-success (pl. dokumentum-panel "Új hozzáadása") = brand zöld, mint a Radzen "+" gombok */ body.smu-theme .btn-success { background-color: var(--smu-green); border-color: var(--smu-green-strong); color: #fff; } body.smu-theme .btn-success:hover, body.smu-theme .btn-success:focus, body.smu-theme .btn-success:active { background-color: var(--smu-green-strong) !important; border-color: var(--smu-green-strong) !important; color: #fff; } /* Oldalmenü kijelölt/aktív elem (megnyitott űrlap, pl. "Projekt") szöveg + ikon brand-zöld — közvetlen szabály, mert a kijelölt al-elemnél egy specifikusabb Radzen-szabály lilát (--rz-primary) ad. */ body.smu-theme .rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link, body.smu-theme .rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-text, body.smu-theme .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-link, body.smu-theme .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-link .rz-navigation-item-text, body.smu-theme .rz-panel-menu .rz-navigation-item-link.active, body.smu-theme .rz-panel-menu .rz-navigation-item-link.active .rz-navigation-item-text { color: var(--smu-green) !important; } /* Felső RadzenMenu (pl. fejléc könyv/„demo" ikon): aktív/nyitott állapotban is brand-zöld az ikon és a lenyíló nyíl — a Radzen alap --rz-primary lila helyett. A hover már zöld; ez egyezteti az aktív állapotot. Külön szabály, mert ez .rz-menu (nem .rz-panel-menu), így a fenti nem fogja. */ body.smu-theme .rz-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link, body.smu-theme .rz-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-icon, body.smu-theme .rz-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-icon-children { color: var(--smu-green) !important; } /* Oldalmenü kijelölt elem HÁTTERE halvány brand-zöld (a Radzen lila/mauve aktív-bg helyett) */ body.smu-theme .rz-panel-menu .rz-navigation-item-wrapper-active, body.smu-theme .rz-panel-menu .rz-navigation-item-active { background-color: rgba(34, 197, 94, 0.14) !important; } /* Rekord-lista keresőmező (sima ) témakövető háttérrel — sötét módban ne legyen fehér */ body.smu-theme .list-item-side-bar input[type="text"] { background-color: var(--rz-base-background-color, #fff); background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); color: var(--rz-text-color, #1a1a1a); border: 1px solid rgba(148, 148, 148, 0.35); border-radius: var(--rz-border-radius, 4px); } body.smu-theme .list-item-side-bar input[type="text"]::placeholder { color: var(--rz-text-secondary-color, #888); } /* Lapozó (Bootstrap .pagination): témakövető háttér + brand-zöld aktív oldal (a fehér/kék helyett) */ body.smu-theme .pagination .page-link { background-color: var(--rz-base-background-color, #fff); background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); color: var(--rz-text-color, #1a1a1a); border-color: rgba(148, 148, 148, 0.35); } body.smu-theme .pagination .page-item.active .page-link { background-color: rgba(34, 197, 94, 0.16); background-image: none; border-color: var(--smu-green); color: var(--smu-green); } body.smu-theme .pagination .page-item.disabled .page-link { color: var(--rz-text-disabled-color, rgba(127, 127, 127, 0.5)); } body.smu-theme .pagination .page-link:hover { background-color: var(--rz-base-300, rgba(127, 127, 127, 0.12)); color: var(--rz-text-color, #1a1a1a); } /* DataGrid lapozó (RadzenPager) — kijelölt oldal brand-zöld (közvetlen biztosíték a változó mellé) */ body.smu-theme .rz-pager .rz-pager-page.rz-state-active { background-color: rgba(34, 197, 94, 0.16) !important; color: var(--smu-green) !important; } /* DataGrid lapozó nav-gombjai (|< < > >|): a letiltottak ne olvadjanak a sötét háttérbe */ body.smu-theme .rz-pager .rz-pager-element.rz-state-disabled { opacity: 0.5 !important; } /* Elem-hivatkozás chip-badge (ChipSelect / SelfMadeFormItemReferenceComponent): halvány zöld háttér + zöld szöveg (mint a multipicker chip és a menü). A :has(.rz-button) csak a link/open gombot tartalmazó chip-badge-eket célozza — a sima státusz/típus-badge-eket NEM érinti. A belső gombok (Info, teal) maradnak. */ body.smu-theme .rz-badge.rz-badge-pill:has(.rz-button) { background-color: rgba(34, 197, 94, 0.14) !important; color: var(--smu-green, #22C55E) !important; border: 1px solid rgba(34, 197, 94, 0.45); } /* MultiChipSelect chip eltávolító "x" gomb: halvány piros háttér (törlés-jelleg). Az x egy .rz-button.rz-base (szürke), a link/open gombok .rz-info (teal) — a .rz-base-re szűrve csak az x-et érintjük. */ body.smu-theme .rz-dropdown-chips .rz-chip .rz-button.rz-base { background-color: rgba(239, 68, 68, 0.18) !important; color: var(--rz-danger, #ef4444) !important; } body.smu-theme .rz-dropdown-chips .rz-chip .rz-button.rz-base:hover { background-color: rgba(239, 68, 68, 0.34) !important; } /* Scheduler nézet-váltó aktív gombja — közvetlen szabály biztosítékként (tömör brand zöld + fehér szöveg) */ body.smu-theme .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--smu-green) !important; border-color: var(--smu-green-strong) !important; color: #ffffff !important; } /* E-mail "Előnézet" dialógus — elkülönüljön a sötét háttértől: halvány fehér fátyol (elevation) a base háttér fölött + finom keret + árnyék, így kiemelkedik. A .rz-dialog a body-ba fűzött popup gyökere. */ body.smu-theme .rz-dialog.preview-dialog-size { background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(148, 148, 148, 0.35); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); } /* Felhasználók-lista (ListUsers) kijelölt eleme: a Bootstrap NEM kap .active osztályt, így navigáláskor a :focus marad a kijelölés-jelző. A Bootstrap :focus fehér hátteret ad — ezt a menü-mintára (halvány zöld háttér + zöld szöveg) írjuk felül, hogy ne legyen fehér. (A .active esetet a fenti .list-group-item.active szabály már lefedi, ahol használják.) */ body.smu-theme .list-group-item-action:not(.active):focus, body.smu-theme .list-group-item-action:not(.active):focus-visible { background-color: rgba(34, 197, 94, 0.14) !important; background-image: none !important; border-color: var(--smu-green) !important; color: var(--smu-green) !important; } /* Oldalsáv össze-/kinyitó gomb (SideNavToggleButton, #menuToggleButton) — alapból a Radzen Variant.Text gomb a primary színt veszi fel (most zöld, korábban lila). A kívánt minta: fehér ikon alapból, brand-zöld CSAK hoveren. Scope csak erre a gombra. */ body.smu-theme #menuToggleButton { color: var(--smu-header-color, #f4f8f4) !important; } body.smu-theme #menuToggleButton:hover { color: var(--smu-green) !important; background-color: transparent !important; } /* App-kezelő rács-ikon (AppSelector, #appManager > RadzenIcon) — alapból a link-szín (kék/zöld). A kívánt minta: fehér ikon alapból, brand-zöld hoveren, mint a toggle gomb. */ body.smu-theme #appManager a, body.smu-theme #appManager .rz-icon { color: var(--smu-header-color, #f4f8f4) !important; } body.smu-theme #appManager a:hover, body.smu-theme #appManager a:hover .rz-icon { color: var(--smu-green) !important; }