; href-reload (NEM AJAX),
ezért az aktív jelölés szerver-oldali: .ns-filter-active osztály (a blade adja).
Mindkét családot EGYSÉGES borostyán GYŰRŰ-lüktetés (mint az ns-dtf-pulse:
245,159,0 kiterjedő box-shadow) + jobb-felső PONT-jelző jelzi. (A bp-unsaved-pulse
MÁR NEM box-shadow-gyűrű, hanem piros ::before jelvény — lásd P2/B.)
A ns_date_filter (P3) KÜLÖN komponens (külön DOM, saját ns-dtf-pulse) — ITT NEM
duplikáljuk és NEM írjuk felül (egy család, nem két versengő effekt).
Sáv-szintű jelzés modern CSS :has()-sel (az admin Chrome-központú), JS NÉLKÜL —
a kliensoldali .active-váltásokra a :has élőben újraértékel. A remove_filters_button
láthatóságát a filters_navbar.blade.php a TÉNYLEGES szűrő-paramokhoz köti (lásd ott).
Csökkentett animációnál (prefers-reduced-motion) statikus borostyán kiemelés.
============================================================================= */
/* --- (A) Szűrőnkénti jelzés: aktív szűrő-chip borostyán gyűrű-lüktetés + pont --- */
.navbar-filters li[filter-name].active,
.navbar-filters .dropdown.filter.ns-filter-active {
position: relative;
}
/* A chip (stock: .nav-link, egyedi: .dropdown-toggle gomb) kiterjedő borostyán gyűrű */
.navbar-filters li[filter-name].active > .nav-link,
.navbar-filters .dropdown.filter.ns-filter-active > .dropdown-toggle {
position: relative;
z-index: 1;
border-radius: 6px;
animation: ns-filter-chip-pulse 2s ease-out infinite;
}
@keyframes ns-filter-chip-pulse {
0% { box-shadow: 0 0 0 0 rgba(245, 159, 0, 0.50); }
70% { box-shadow: 0 0 0 6px rgba(245, 159, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 159, 0, 0); }
}
/* Pont-jelző a chip jobb felső sarkában — a wrapper (li / div) ::after-jén, NEM a
gomb/link ::after-jén, mert azt a Bootstrap dropdown-caret (::after) foglalja. */
.navbar-filters li[filter-name].active::after,
.navbar-filters .dropdown.filter.ns-filter-active::after {
content: '';
position: absolute;
top: 1px;
right: 1px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #f59f00;
animation: ns-filter-dot-pulse 2s ease-in-out infinite;
pointer-events: none;
z-index: 3;
}
@keyframes ns-filter-dot-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* --- (B) Sáv-szintű jelzés: ha LEGALÁBB EGY szűrő aktív (:has, JS nélkül) --- */
.navbar-filters {
position: relative;
}
/* Bal szegély-csík pseudo-elemmel (a .shadow-none !important miatt box-shadow nem
járható, a border viszont layout-eltolást okozna) — alapból átlátszó, aktívan borostyán */
.navbar-filters::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: transparent;
transition: background-color 0.3s ease;
pointer-events: none;
}
.navbar-filters:has(li[filter-name].active, .dropdown.filter.ns-filter-active)::before {
background-color: rgba(245, 159, 0, 0.60);
}
/* A „szűrő" ikon(ok) borostyánra váltanak és halkan lüktetnek — az asztali brand-ikon
ÉS a mobil toggler ikonja is (mindkettő .la-filter) */
.navbar-filters:has(li[filter-name].active, .dropdown.filter.ns-filter-active) .la-filter {
color: #f59f00;
animation: ns-filter-icon-pulse 2s ease-in-out infinite;
}
@keyframes ns-filter-icon-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* --- (C) „Szűrők törlése" gomb: amíg rejtett (.invisible = nincs aktív szűrő) nem
látszik; amikor megjelenik, a chip-pulzálás családdal egyező borostyán gyűrű
lükteti, hogy észrevehető legyen (a gomb MINDEN szűrést töröl, a részleteset is) --- */
.navbar-filters #remove_filters_button:not(.invisible) {
position: relative;
z-index: 1;
border-radius: 6px;
/* !important kell: a téma .navbar.navbar-filters .nav-link color-ja is !important */
color: #f59f00 !important;
animation: ns-filter-chip-pulse 2s ease-out infinite;
}
/* --- (D) Szűrősor bal széle: hint2 súgó-ikon + kicsit nagyobb szűrő-ikon.
line-height: 1 + vertical-align, hogy a sor magassága NE nőjön meg tőlük --- */
.navbar-filters .ns-filter-hint2 {
line-height: 1;
margin-right: 0.35rem;
}
.navbar-filters .ns-filter-hint2 .la-question-circle {
font-size: 1.15rem;
line-height: 1;
vertical-align: middle;
}
.navbar-filters .ns-filter-brand-icon {
font-size: 1.35rem;
line-height: 1;
vertical-align: middle;
}
/* --- Csökkentett animáció: statikus borostyán kiemelés, lüktetés nélkül --- */
@media (prefers-reduced-motion: reduce) {
.navbar-filters li[filter-name].active > .nav-link,
.navbar-filters .dropdown.filter.ns-filter-active > .dropdown-toggle {
animation: none;
box-shadow: 0 0 0 2px rgba(245, 159, 0, 0.45);
}
.navbar-filters li[filter-name].active::after,
.navbar-filters .dropdown.filter.ns-filter-active::after {
animation: none;
opacity: 0.95;
}
.navbar-filters:has(li[filter-name].active, .dropdown.filter.ns-filter-active) .la-filter {
animation: none;
opacity: 1;
}
.navbar-filters #remove_filters_button:not(.invisible) {
animation: none;
box-shadow: 0 0 0 2px rgba(245, 159, 0, 0.45);
}
}
/* =============================================================================
ns-slug — központi slug-mező (P9): ceruza-felold gomb + readonly jelzés
A markupot a custom.js ns-slug szekciója injektálja (.ns-slug-holder tartó +
.ns-slug-unlock gomb az input MELLETT — így a Bootstrap is-valid/is-invalid
ikonokkal nem ütközik). Szín: tabler CSS-változók, fallback-kel (a --nasa-*
változók az admin témában nincsenek — a szekció önálló).
============================================================================= */
.ns-slug-holder {
display: flex;
align-items: stretch;
}
.ns-slug-holder > .form-control {
flex: 1 1 auto;
min-width: 0;
}
/* Amíg a felold gomb ott van, az input jobb sarka a gombhoz simul */
.ns-slug-holder.has-btn > .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.ns-slug-unlock {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 0 10px;
border: 1px solid var(--tblr-border-color, #dadce0);
border-left: 0;
border-radius: 0 4px 4px 0;
background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
color: var(--tblr-secondary, #6c757d);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.ns-slug-unlock:hover,
.ns-slug-unlock:focus-visible {
background-color: var(--tblr-active-bg, #eef0f2);
color: var(--tblr-body-color, #333);
}
/* Readonly (még fel nem oldott / zárolt) slug input — halvány háttér jelzi,
hogy nem kézi szerkesztésre vár */
input[data-ns-slug][readonly] {
background-color: var(--tblr-bg-surface-secondary, #f1f3f5);
}
/* =====================================================================
ns-dialog — KÖZPONTI felugró ablak (párja: custom.js nsDialog kezelő)
Középre nyíló, fejlécnél fogva mozgatható, kicsinyíthető panel.
Szín-variánsok a Bootstrap alap-színekkel (danger/info/primary/…).
===================================================================== */
.ns-dialog {
display: none;
position: fixed;
top: 16vh;
left: 50%;
transform: translateX(-50%);
width: 420px;
max-width: 94vw;
max-height: 80vh;
background: #fff;
color: #212529;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
z-index: 99990;
flex-direction: column;
overflow: hidden;
}
.ns-dialog.open {
display: flex;
}
.ns-dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
padding: 10px 14px;
font-weight: 700;
cursor: move;
user-select: none;
touch-action: none; /* pointer-drag érintőn is */
flex: 0 0 auto;
}
.ns-dialog-head-btns {
display: inline-flex;
align-items: center;
gap: 2px;
}
.ns-dialog-head-btns button {
border: 0;
background: none;
color: inherit;
cursor: pointer;
padding: 0 5px;
line-height: 1;
opacity: .85;
}
.ns-dialog-head-btns button:hover {
opacity: 1;
}
.ns-dialog-body {
padding: 12px 14px;
overflow-y: auto;
flex: 1 1 auto;
}
/* Kicsinyítve: csak a fejléc marad (a pozíció, ahova húzták, megmarad) */
.ns-dialog.ns-dialog-min {
width: 260px;
max-height: none;
}
.ns-dialog.ns-dialog-min .ns-dialog-body {
display: none;
}
/* Szín-variánsok — Bootstrap alap-színek a fejlécen */
.ns-dialog-danger > .ns-dialog-head { background: var(--bs-danger, #dc3545); color: #fff; }
.ns-dialog-info > .ns-dialog-head { background: var(--bs-info, #0dcaf0); color: #052c33; }
.ns-dialog-primary > .ns-dialog-head { background: var(--bs-primary, #0d6efd); color: #fff; }
.ns-dialog-success > .ns-dialog-head { background: var(--bs-success, #198754); color: #fff; }
.ns-dialog-warning > .ns-dialog-head { background: var(--bs-warning, #ffc107); color: #3d3000; }
.ns-dialog-dark > .ns-dialog-head { background: var(--bs-dark, #212529); color: #fff; }
/* =====================================================================
Admin értesítés-felugró (#nsNotifDialog) — a harang a KÖZPONTI ns-dialog
ablakban nyitja a listát (2026-07-25; a sidebar navbar-kontextusában a
Bootstrap dropdown static → sorban nyílt ki, átlátszóan — kivezetve).
===================================================================== */
#nsNotifDialog {
width: 380px;
}
/* A lista-sorok a fehér felületen mindig sötét szöveggel (a sötét sidebar
link-színei ne öröklődjenek be, bárhonnan nyílik) */
#nsNotifDialog .dropdown-item {
color: #212529;
white-space: normal;
}
#nsNotifDialog .dropdown-item:hover {
background: #f1f3f5;
}
#nsNotifDialog .text-muted {
color: #6c757d !important;
}
/* =====================================================================
NS-CHECKLIST — KÖZPONTI pipálható lista (D38, 2026-08-17)
Markup: crud::fields.ns-checklist (+ ns-role-checklist wrapper);
viselkedés: custom.js „NS-CHECKLIST" szekció.
===================================================================== */
.ns-checklist .ns-checklist-items {
/* görgethető doboz nagy listánál (a max-height inline, a mezőből) */
padding-top: .125rem;
}
.ns-checklist .ns-checklist-item .form-check-label {
/* hosszú címke (név + e-mail) törhető, ne csússzon ki az oszlopból */
word-break: break-word;
}
.ns-checklist .ns-checklist-tools .ns-checklist-filter {
max-width: 16rem;
}
/* ── Social ikon-készletek a láblécben (2026-08-23, 4. session) ─────────────
A lábléc közösségi ikonjai SVG-fájlok (public/images/social/{készlet}/…),
a weboldal beállításából (site_meta.social_icon_set) — nsSocialIconUrl().
Em-alapú méret: a hívó
betűmérete (pl. fs-5) skálázza. */
.ns-social-icon {
width: 1.35em;
height: 1.35em;
vertical-align: -0.28em;
}
/* ── Fiókom hub-kártyák (2026-08-29, vegyes apróságok 2.) ──────────────────
A /fiokom áttekintő kártyái EGÉSZBEN kattinthatók (a cím-link
stretched-linkje fedi a kártyát, a gombok kikerültek) — a hover jelzi. */
.ns-hub-card {
transition: box-shadow .15s ease, transform .15s ease;
}
.ns-hub-card:hover {
box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .12);
transform: translateY(-2px);
}
/* ── App-oldalak világos háttere (2026-08-29, vegyes apróságok 2.) ─────────
A body sötétzöld landing-háttere (#252926, fent a body{} szabály) a
FRONTEND dizajné. Az alkalmazás-oldalak (body.ns-app-layout: fiókom,
Planner, Mentoráltjaim, Kifizetési adatok, promó-anyagok, Google Ads
dashboard) panel nélkül ültek rajta, és a text-muted feliratok
olvashatatlanok voltak (kontraszt ~1,03:1 — cetli: fiokom-kontraszt.md,
mérés: 2026-08-14). Az app-oldalak világos hátteret + szabvány sötét
szövegszínt kapnak; a .nasa-manual-os oldalak (statisztika, PM, Testing)
saját világos paneljét ez nem érinti, a frontend (rendelés, landing)
sötét dizajnja változatlan. */
body.ns-app-layout {
background-color: #f8f9fa;
color: #212529;
}
/* ── Összecsukható kártya-fejléc nyila (ns-collapse-caret) ──────────────────
2026-08-30 (jelszó-egységesítés): a fejléc-gombban álló chevron nyitáskor
lefordul. Általános — bármely data-bs-toggle="collapse" fejléc használhatja. */
.ns-collapse-caret {
transition: transform 0.2s ease;
}
button.collapsed .ns-collapse-caret {
transform: rotate(-90deg);
}