/* ============================================================ * MEGJEGYZÉS: CSS Cascade Layers Fázis 1 visszavonva (2026-04-16). * * A @layer skin-modern wrapper önmagában helytelen volt: a * dashboard.css NEM került @layer base-be, így a named layer-ek * (skin-modern) gyengébbek lettek a unlayered dashboard.css * szabályainál — emiatt a Modern-light skin szövegei fehéren * jelentek meg fehér háttéren (pl. sidebar nav, subtitle, footer). * * A teljes layer-refaktor a CSS_CASCADE_LAYERS_PLAN.md Fázis 4-ben * történik meg: akkor a dashboard.css-t is @layer base-be kell * tenni, egyidejűleg az !important-ek átfogó eltávolításával. * ============================================================ */ /* ============================================================ * Modern skin — CityDashboard * Spec: docs/citydashboard-skin-specification.md * * Két változat, `data-theme` attribútum az -en: * - data-theme="modern-dark" (ALAPÉRTELMEZETT) * - data-theme="modern-light" * * A klasszikus skin (`data-theme="classic"`) NEM kap override-ot — * a jelenlegi css/dashboard.css változatlanul érvényesül. * * B1 FÁZIS: infrastruktúra + alap színek + font override. * A részletes flat UI átalakítás (sidebar, header, csempe, splash, * login) a B2–B6 fázisokban kerül ide. * ============================================================ */ /* ══════════════════════════════════════════════════════════════ * 1. MODERN — DARK skin (alapértelmezett) * ══════════════════════════════════════════════════════════════ */ html[data-theme="modern-dark"] { /* Spec 2.2 — Dark paletta --color-text-muted a specben #666666, de sötét #111 háttéren csak 4.04:1 kontraszt (WCAG AA normál szövegre HATÁR). Sötétebbre emelve #7A7A7A — 5.07:1 kontraszt, WCAG AA-nak megfelel. A „finom meta/hint" szerepkört továbbra is betölti (a text-secondary #A1A1A1 még világosabb). */ --color-bg: #111111; --color-surface: #1A1A1A; --color-surface-alt: #222222; --color-border: #2A2A2A; --color-border-light: #242424; --color-text: #E5E5E5; --color-text-secondary: #A1A1A1; --color-text-muted: #7A7A7A; --color-primary: #3B82F6; --color-primary-hover: #2563EB; --color-primary-highlight: rgba(59, 130, 246, 0.12); --color-error: #EF4444; --color-warning: #F59E0B; --color-success: #10B981; --shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 2px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2); /* Modern skin logó fájl (splash, login, sidebar) */ --logo-url: url('../../img/logos/citydashboard-dark.png'); /* ── dashboard.css eredeti változóinak áthidalása ── * A dashboard.css rengeteg helyen `var(--bg-base)`, `var(--text-primary)` * stb. változókat használ. A B1 fázisban ezeket csak átirányítjuk * a Modern paletta értékeire — így már látható lesz a háttér- és * szöveg-színváltás váltáskor, glassmorphism megtartásával. * (A blur/prizma/inset-vonalak átírása a B2 fázis feladata.) */ --bg-base: var(--color-bg); --bg-darker: #0A0A0A; --bg-lighter: var(--color-surface); --bg-gradient: var(--color-bg); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --accent-primary: var(--color-primary); --accent-primary-light: #60A5FA; --success: var(--color-success); --warning: var(--color-warning); --error: var(--color-error); } /* ══════════════════════════════════════════════════════════════ * 2. MODERN — LIGHT skin * ══════════════════════════════════════════════════════════════ */ html[data-theme="modern-light"] { /* Spec 2.1 — Light paletta --color-text-muted a specben #9CA3AF, de fehér háttéren 3.04:1 kontrasztot ad — nem felel meg WCAG 2.1 AA-nak (4.5:1). A kártya desc-k („Szavazások", „Karbantartás…", „Városi beruházások…", „Kísérleti…") emiatt túl halványak voltak. Sötétebbre cseréljük #6B7280-ra (= text-secondary szint, 4.87:1 kontraszt, AA-nak megfelel). A finomabb „meta/hint" szerepkört továbbra is betölti, csak olvashatóbb. */ --color-bg: #FFFFFF; --color-surface: #F9FAFB; --color-surface-alt: #F1F3F5; --color-border: #E5E7EB; --color-border-light: #F3F4F6; --color-text: #374151; --color-text-secondary: #6B7280; --color-text-muted: #6B7280; --color-primary: #2563EB; --color-primary-hover: #1D4ED8; --color-primary-highlight: #EFF6FF; --color-error: #DC2626; --color-warning: #D97706; --color-success: #059669; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06); --logo-url: url('../../img/logos/citydashboard-light.png'); --bg-base: var(--color-bg); --bg-darker: var(--color-surface-alt); --bg-lighter: var(--color-surface); --bg-gradient: var(--color-bg); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --accent-primary: var(--color-primary); --accent-primary-light: #60A5FA; --success: var(--color-success); --warning: var(--color-warning); --error: var(--color-error); } /* ══════════════════════════════════════════════════════════════ * 3. Közös Modern szabályok (mindkét Modern skinre) * ══════════════════════════════════════════════════════════════ */ html[data-theme="modern-dark"], html[data-theme="modern-light"] { /* Spec 1. — Outfit font, 15px alap */ --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; } html[data-theme="modern-dark"] body, html[data-theme="modern-light"] body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; } /* ══════════════════════════════════════════════════════════════ * 4. Téma választó UI (közös — Klasszikus skinen is használható) * ══════════════════════════════════════════════════════════════ */ .theme-selector { display: flex; flex-direction: column; gap: 8px; } .theme-option { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md, 10px); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); cursor: pointer; transition: all 150ms ease; font-size: 13px; font-family: var(--font-family); text-align: left; width: 100%; } html[data-theme="modern-light"] .theme-option { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); } .theme-option:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: var(--text-primary); } html[data-theme="modern-light"] .theme-option:hover { background: var(--color-surface-alt); border-color: var(--color-primary); color: var(--color-text); } .theme-option.active { background: rgba(99, 102, 241, 0.15); border-color: var(--accent-primary, #3B82F6); color: var(--text-primary); } html[data-theme="modern-light"] .theme-option.active { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-text); } /* Mini dashboard előnézet a téma opció mellett — vizuálisan közvetíti a skin karakterét (sidebar + tartalom-sáv), minden skin paletta szerinti valódi színeivel. Fekvő 44×28 képernyő-arány. */ .theme-option-swatch { width: 44px; height: 28px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } /* ── Klasszikus swatch — sötét glassmorphism gradient ─────────── */ .theme-option-swatch.classic { background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #1A1A2E 100%); border-color: rgba(96, 165, 250, 0.35); } .theme-option-swatch.classic::before { /* Sidebar csík — bal oldal, prizmás fényes */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(180deg, rgba(96, 165, 250, 0.18) 0%, rgba(139, 92, 246, 0.14) 100%); border-right: 1px solid rgba(255, 255, 255, 0.1); } .theme-option-swatch.classic::after { /* Tartalom csempe */ content: ''; position: absolute; left: 16px; top: 4px; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04); } /* ── Modern-sötét swatch — flat sötét paletta ─────────────────── */ .theme-option-swatch.modern-dark { background: #111111; border-color: #2A2A2A; } .theme-option-swatch.modern-dark::before { /* Sidebar csík */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: #111111; border-right: 1px solid #2A2A2A; } .theme-option-swatch.modern-dark::after { /* Tartalom csempe + primary highlight pont */ content: ''; position: absolute; left: 16px; top: 4px; width: 20px; height: 20px; background: #1A1A1A; border: 1px solid #2A2A2A; border-radius: 2px; box-shadow: 4px 4px 0 -2px #3B82F6; /* kis primary pont belül */ } /* ── Modern-világos swatch — flat fehér paletta ───────────────── */ .theme-option-swatch.modern-light { background: #FFFFFF; border-color: #D1D5DB; /* kicsit sötétebb, hogy glassmorphism panelen is kivehető */ } .theme-option-swatch.modern-light::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: #FFFFFF; border-right: 1px solid #E5E7EB; } .theme-option-swatch.modern-light::after { content: ''; position: absolute; left: 16px; top: 4px; width: 20px; height: 20px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 2px; box-shadow: 4px 4px 0 -2px #2563EB; } .theme-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; } .theme-option-name { font-weight: 500; font-size: 13px; } .theme-option-desc { font-size: 11px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ * B2 FÁZIS — Modern skin flat UI (sidebar, header, alap layout) * Spec: docs/citydashboard-skin-specification.md 3.1–3.4 * * Minden Modern skin szabály a `html[data-theme^="modern"]` prefix * mögé kerül — így +1 specificitást ad a meglévő .sidebar/.header * szabályokhoz képest, garantálva a felülírást. * ══════════════════════════════════════════════════════════════ */ /* ── 5.1 Globális méretek (spec 3.1) ──────────────────────────── */ html[data-theme="modern-dark"], html[data-theme="modern-light"] { --sidebar-width: 240px; --header-height: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 10px; /* Spec szerint mindenhol 10px a kártya-radius */ --radius-xl: 10px; } /* ── 5.2 Body/html alap ──────────────────────────────────────── */ html[data-theme="modern-dark"] body, html[data-theme="modern-light"] body { background: var(--color-bg) !important; color: var(--color-text); font-weight: 300; /* Spec: body weight 300 (light) */ font-size: 15px; /* Spec: alap font-size 15px */ line-height: 1.5; } /* App konténer — megszüntetjük a gradient háttereket */ html[data-theme^="modern"] .app { background: var(--color-bg); } /* ── 5.3 Glassmorphism kikapcsolás ────────────────────────────── */ html[data-theme^="modern"] .glass-tile-effect { backdrop-filter: none; -webkit-backdrop-filter: none; border-top-color: var(--color-border); border-left-color: var(--color-border); box-shadow: var(--shadow-sm); } /* ══════════════════════════════════════════════════════════════ * 6. SIDEBAR (spec 3.2) * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .sidebar { width: 240px; background: var(--color-bg); /* Azonos a fő háttérrel! */ backdrop-filter: none; -webkit-backdrop-filter: none; border-right: none; /* Nincs végigfutó border */ overflow: visible; /* inset vonalhoz szükséges */ } /* Kikapcsoljuk a prizmás csíkokat és overlay-eket */ html[data-theme^="modern"] .sidebar::before, html[data-theme^="modern"] .sidebar::after { content: none !important; } /* Sidebar jobb oldali inset vonal — önálló pseudo-elem */ html[data-theme^="modern"] .sidebar { position: fixed; } html[data-theme^="modern"] .sidebar { /* A border-t inset vonallal helyettesítjük — background-image technika */ background-image: linear-gradient(var(--color-border), var(--color-border)); background-size: 1px calc(100% - 48px); background-position: right 24px; background-repeat: no-repeat; } /* ── 6.1 Sidebar header (spec 3.2) ────────────────────────────── */ html[data-theme^="modern"] .sidebar-header { height: 64px; padding: 0 20px; gap: 12px; background: transparent; border-bottom: none; position: relative; } html[data-theme^="modern"] .sidebar-header::after { content: ''; position: absolute; bottom: 0; left: 20px; right: 20px; height: 1px; background: var(--color-border); } html[data-theme^="modern"] .sidebar-header-icon { width: 36px; height: 36px; background: var(--color-primary); border-radius: 8px; color: #fff; box-shadow: none; } html[data-theme^="modern"] .sidebar-header-icon svg { width: 20px; height: 20px; color: #fff; } html[data-theme^="modern"] .sidebar-header-title { font-size: 16px; font-weight: 600; color: var(--color-text); letter-spacing: normal; } html[data-theme^="modern"] .sidebar-header-subtitle { font-size: 11px; color: var(--color-text-secondary); font-weight: 400; } /* ── 6.2 Sidebar navigáció (spec 3.2) ─────────────────────────── */ html[data-theme^="modern"] .sidebar-content { padding: 12px 12px; } html[data-theme^="modern"] .sidebar-section { margin-bottom: 0; } html[data-theme^="modern"] .sidebar-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 12px 6px; color: var(--color-text-muted); font-weight: 500; } html[data-theme^="modern"] .sidebar-nav { gap: 2px; padding: 0; } html[data-theme^="modern"] .sidebar-nav-item { position: relative; padding: 8px 12px; gap: 10px; font-size: 13.5px; font-weight: 400; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--color-text-secondary); transition: background 150ms ease, color 150ms ease; } html[data-theme^="modern"] .sidebar-nav-item svg, html[data-theme^="modern"] .sidebar-nav-item img { width: 18px; height: 18px; opacity: 0.5; transition: opacity 150ms ease; filter: none; } html[data-theme^="modern"] .sidebar-nav-item:hover { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme="modern-dark"] .sidebar-nav-item:hover { background: #1F1F1F; /* Spec 2.2 dark hover */ } html[data-theme^="modern"] .sidebar-nav-item:hover svg, html[data-theme^="modern"] .sidebar-nav-item:hover img { opacity: 0.8; } html[data-theme^="modern"] .sidebar-nav-item.active { background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 500; } html[data-theme^="modern"] .sidebar-nav-item.active svg, html[data-theme^="modern"] .sidebar-nav-item.active img { opacity: 1.0; color: var(--color-primary); } /* Aktív indikátor — bal oldali 3px × 20px primary csík */ html[data-theme^="modern"] .sidebar-nav-item.active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--color-primary); border-radius: 0 3px 3px 0; } /* Badge — kis pill, primary/error háttér (spec 3.2) */ html[data-theme^="modern"] .sidebar-nav-badge, html[data-theme^="modern"] .sidebar-unread-badge, html[data-theme^="modern"] .sidebar-count-badge { padding: 1px 7px; border-radius: 99px; min-width: 18px; font-size: 10px; font-weight: 600; background: var(--color-error); color: #fff; border: none; line-height: 1.4; } /* ── 6.3 Sidebar footer + user (spec 3.2) ─────────────────────── */ html[data-theme^="modern"] .sidebar-footer { padding: 12px 16px; position: relative; border-top: none; background: transparent; } html[data-theme^="modern"] .sidebar-footer::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--color-border); } html[data-theme^="modern"] .sidebar-user { gap: 10px; padding: 8px; border-radius: var(--radius-sm); background: transparent; border: none; } html[data-theme^="modern"] .sidebar-user:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .sidebar-user:hover { background: #1F1F1F; } html[data-theme^="modern"] .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } html[data-theme^="modern"] .sidebar-user-avatar svg { width: 16px; height: 16px; color: #fff; } html[data-theme^="modern"] .sidebar-user-name { font-size: 13px; font-weight: 500; color: var(--color-text); } html[data-theme^="modern"] .sidebar-user-role { font-size: 11px; color: var(--color-text-secondary); font-weight: 400; } /* Logó blokk a sidebar alján (opcionális branding) */ html[data-theme^="modern"] .sidebar-branding { padding: 16px 20px; position: relative; background: transparent; } html[data-theme^="modern"] .sidebar-branding::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--color-border); } html[data-theme^="modern"] .sidebar-branding img { width: 100%; padding: 0 8px; max-width: 180px; margin: 0 auto; display: block; } /* Presence indikátor (online users) */ html[data-theme^="modern"] .presence-indicator { font-size: 11px; color: var(--color-text-secondary); padding: 4px 12px; } html[data-theme^="modern"] .presence-dot { width: 6px; height: 6px; background: var(--color-success); border-radius: 50%; } /* ══════════════════════════════════════════════════════════════ * 7. HEADER (spec 3.3) * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .main { margin-left: 240px; width: calc(100vw - 240px); max-width: calc(100vw - 240px); background: var(--color-bg); } html[data-theme^="modern"] .header { height: 64px; padding: 0 24px; background: var(--color-bg); /* Azonos a fő háttérrel */ backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; /* Nincs végigfutó border */ position: relative; } /* Alsó inset vonal (spec: left 24px, right 24px) */ html[data-theme^="modern"] .header::after { content: ''; position: absolute; bottom: 0; left: 24px; right: 24px; height: 1px; background: var(--color-border); } html[data-theme^="modern"] .header-left { gap: 12px; } html[data-theme^="modern"] .header-right { gap: 8px; } html[data-theme^="modern"] .header-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); } html[data-theme^="modern"] .header-subtitle { font-size: 12px; color: var(--color-text-secondary); font-weight: 400; } /* Header ikon gombok (36×36, flat) */ html[data-theme^="modern"] .header-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; padding: 0; transition: all 150ms ease; position: relative; } html[data-theme^="modern"] .header-btn svg { width: 18px; height: 18px; color: var(--color-text-secondary); } html[data-theme^="modern"] .header-btn:hover { background: var(--color-surface-alt); border-color: var(--color-primary); color: var(--color-text); } html[data-theme="modern-dark"] .header-btn:hover { background: #1F1F1F; } html[data-theme^="modern"] .header-btn:hover svg { color: var(--color-text); } /* Notification dot (spec 3.3) */ html[data-theme^="modern"] .header-btn .badge { width: 7px; height: 7px; padding: 0; min-width: 0; background: var(--color-error); border: 2px solid var(--color-bg); border-radius: 50%; position: absolute; top: 6px; right: 6px; color: transparent; font-size: 0; line-height: 0; } /* Search box (spec 3.3) */ html[data-theme^="modern"] .search-box { padding: 7px 14px; gap: 8px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); min-width: 200px; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme^="modern"] .search-box:hover { border-color: var(--color-primary); } html[data-theme^="modern"] .search-box:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .search-box svg { width: 16px; height: 16px; color: var(--color-text-muted); } html[data-theme^="modern"] .search-box input { font-size: 13px; color: var(--color-text); background: transparent; border: none; font-family: var(--font-family); font-weight: 400; } html[data-theme^="modern"] .search-box input::placeholder { color: var(--color-text-muted); } /* ══════════════════════════════════════════════════════════════ * 8. TARTALOM TERÜLET (spec 3.4) * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .content { padding: 20px; background: var(--color-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Scrollbar (spec 9) */ html[data-theme^="modern"] .content::-webkit-scrollbar { width: 6px; } html[data-theme^="modern"] .content::-webkit-scrollbar-track { background: transparent; } html[data-theme^="modern"] .content::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } html[data-theme^="modern"] .content::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ══════════════════════════════════════════════════════════════ * 9. SETTINGS PANEL — flat megjelenés a Modern skineken * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .settings-panel { background: var(--color-bg); border-left: 1px solid var(--color-border); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-md); } html[data-theme^="modern"] .settings-header { border-bottom: 1px solid var(--color-border); padding: 16px 20px; background: transparent; } html[data-theme^="modern"] .settings-section { border-bottom: 1px solid var(--color-border-light); padding: 16px 20px; } html[data-theme^="modern"] .settings-section-title { color: var(--color-text); font-weight: 500; font-size: 13px; } /* Téma választó opciók világos skinen */ html[data-theme="modern-light"] .theme-option { background: var(--color-surface); border-color: var(--color-border); } /* ══════════════════════════════════════════════════════════════ * B3 FÁZIS — Modern skin: csempék, ikonok, KPI, chart, térkép, * státusz dot-ok * Spec: docs/citydashboard-skin-specification.md 3.5–3.6, 4–9 * * Minden szabály a html[data-theme^="modern"] prefix mögött — * a Klasszikus skin (data-theme="classic") változatlan marad. * ══════════════════════════════════════════════════════════════ */ /* ── 10. Csempe container (spec 3.5) ──────────────────────────── */ /* Közös attribútum-szelektorral lefedjük az összes -tile osztályt */ html[data-theme^="modern"] .grid-stack-item-content[class*="-tile"], html[data-theme^="modern"] .weather-tile, html[data-theme^="modern"] .news-tile, html[data-theme^="modern"] .env-tile, html[data-theme^="modern"] .gov-tile, html[data-theme^="modern"] .battanet-tile, html[data-theme^="modern"] .transit-tile, html[data-theme^="modern"] .transport-links-tile, html[data-theme^="modern"] .traffic-flow-tile, html[data-theme^="modern"] .utinform-tile, html[data-theme^="modern"] .crosswalk-tile, html[data-theme^="modern"] .sxr-tile, html[data-theme^="modern"] .travel-time-tile, html[data-theme^="modern"] .mobility-map-tile, html[data-theme^="modern"] .page-map-tile { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-top-color: var(--color-border) !important; border-left-color: var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme^="modern"] .grid-stack-item-content[class*="-tile"]:hover { box-shadow: var(--shadow-md) !important; transition: box-shadow 200ms ease; } /* Prizmás csíkok + overlay-ek kikapcsolása — minden tile ::before/::after */ html[data-theme^="modern"] .grid-stack-item-content[class*="-tile"]::before, html[data-theme^="modern"] .grid-stack-item-content[class*="-tile"]::after, html[data-theme^="modern"] .weather-tile::before, html[data-theme^="modern"] .weather-tile::after, html[data-theme^="modern"] .news-tile::before, html[data-theme^="modern"] .news-tile::after, html[data-theme^="modern"] .env-tile::before, html[data-theme^="modern"] .env-tile::after, html[data-theme^="modern"] .gov-tile::before, html[data-theme^="modern"] .gov-tile::after, html[data-theme^="modern"] .battanet-tile::before, html[data-theme^="modern"] .battanet-tile::after, html[data-theme^="modern"] .transit-tile::before, html[data-theme^="modern"] .transit-tile::after, html[data-theme^="modern"] .transport-links-tile::before, html[data-theme^="modern"] .transport-links-tile::after, html[data-theme^="modern"] .traffic-flow-tile::before, html[data-theme^="modern"] .traffic-flow-tile::after, html[data-theme^="modern"] .utinform-tile::before, html[data-theme^="modern"] .utinform-tile::after, html[data-theme^="modern"] .crosswalk-tile::before, html[data-theme^="modern"] .crosswalk-tile::after, html[data-theme^="modern"] .sxr-tile::before, html[data-theme^="modern"] .sxr-tile::after, html[data-theme^="modern"] .travel-time-tile::before, html[data-theme^="modern"] .travel-time-tile::after, html[data-theme^="modern"] .mobility-map-tile::before, html[data-theme^="modern"] .mobility-map-tile::after, html[data-theme^="modern"] .page-map-tile::before, html[data-theme^="modern"] .page-map-tile::after { content: none !important; background: none !important; display: none !important; } /* ── 11. Csempe header (spec 3.5) ─────────────────────────────── */ html[data-theme^="modern"] .tile-header, html[data-theme^="modern"] .weather-tile-header, html[data-theme^="modern"] .news-tile-header, html[data-theme^="modern"] .transit-tile-header, html[data-theme^="modern"] .crosswalk-tile-header, html[data-theme^="modern"] .env-tile .tile-header { padding: 14px 16px 12px !important; border-bottom: none !important; background: transparent; height: auto !important; min-height: auto !important; position: relative; } /* Csempe header inset alsó vonal (spec 3.6, left/right 16px) */ html[data-theme^="modern"] .tile-header::after, html[data-theme^="modern"] .weather-tile-header::after, html[data-theme^="modern"] .news-tile-header::after, html[data-theme^="modern"] .transit-tile-header::after, html[data-theme^="modern"] .crosswalk-tile-header::after, html[data-theme^="modern"] .env-tile .tile-header::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 1px; background: var(--color-border-light); pointer-events: none; } /* Csempe cím tipográfia (spec 1) */ html[data-theme^="modern"] .tile-header .tile-title, html[data-theme^="modern"] .weather-title, html[data-theme^="modern"] .env-tile .tile-header .tile-title { font-size: 13.5px; font-weight: 500; color: var(--color-text); gap: 10px; } /* ── 12. Csempe ikon (spec 3.5 + 4) ───────────────────────────── */ /* Alapméret 32×32, border-radius 8px */ html[data-theme^="modern"] .tile-title-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; } html[data-theme^="modern"] .tile-title-icon svg { width: 16px !important; height: 16px !important; } /* Alapértelmezett (color osztály nélkül): flat primary-highlight háttér */ html[data-theme^="modern"] .tile-title-icon:not(.yellow):not(.orange):not(.blue):not(.purple):not(.cyan):not(.sky):not(.forest):not(.violet):not(.lime):not(.pink):not(.red) { background: var(--color-primary-highlight) !important; } html[data-theme^="modern"] .tile-title-icon:not(.yellow):not(.orange):not(.blue):not(.purple):not(.cyan):not(.sky):not(.forest):not(.violet):not(.lime):not(.pink):not(.red) svg { stroke: var(--color-primary) !important; color: var(--color-primary) !important; } /* Gradient osztályok változatlan — a spec 4 szerint pontosan: yellow #fbbf24→#f59e0b, orange #f97316→#ea580c, blue #3b82f6→#7c3aed, purple #8b5cf6→#7c3aed, cyan #22d3ee→#06b6d4, sky #38bdf8→#0ea5e9, forest #22c55e→#16a34a, violet #7c3aed→#6d28d9, lime #a3e635→#84cc16, pink #ec4899→#db2777, red #ef4444→#dc2626 */ html[data-theme^="modern"] .tile-title-icon.forest { background: linear-gradient(135deg, #22c55e, #16a34a) !important; } html[data-theme^="modern"] .tile-title-icon.violet { background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; } html[data-theme^="modern"] .tile-title-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16) !important; } html[data-theme^="modern"] .tile-title-icon.pink { background: linear-gradient(135deg, #ec4899, #db2777) !important; } html[data-theme^="modern"] .tile-title-icon.red { background: linear-gradient(135deg, #ef4444, #dc2626) !important; } html[data-theme^="modern"] .tile-title-icon.yellow { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; } html[data-theme^="modern"] .tile-title-icon.blue { background: linear-gradient(135deg, #3b82f6, #7c3aed) !important; } /* Gradient ikonok SVG-je fehér */ html[data-theme^="modern"] .tile-title-icon.yellow svg, html[data-theme^="modern"] .tile-title-icon.orange svg, html[data-theme^="modern"] .tile-title-icon.blue svg, html[data-theme^="modern"] .tile-title-icon.purple svg, html[data-theme^="modern"] .tile-title-icon.cyan svg, html[data-theme^="modern"] .tile-title-icon.sky svg, html[data-theme^="modern"] .tile-title-icon.forest svg, html[data-theme^="modern"] .tile-title-icon.violet svg, html[data-theme^="modern"] .tile-title-icon.lime svg, html[data-theme^="modern"] .tile-title-icon.pink svg, html[data-theme^="modern"] .tile-title-icon.red svg { stroke: #fff !important; color: #fff !important; } /* ── 13. Action gombok csempén (spec 3.5 — 28×28, 6px radius) ── */ html[data-theme^="modern"] .tile-header-actions button, html[data-theme^="modern"] .tile-pin-btn, html[data-theme^="modern"] .tile-resize-btn, html[data-theme^="modern"] .tile-fullscreen-btn, html[data-theme^="modern"] .footer-icon-btn { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--color-text-muted); transition: all 150ms ease; } html[data-theme^="modern"] .tile-header-actions button:hover, html[data-theme^="modern"] .tile-pin-btn:hover, html[data-theme^="modern"] .tile-resize-btn:hover, html[data-theme^="modern"] .tile-fullscreen-btn:hover, html[data-theme^="modern"] .footer-icon-btn:hover { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme="modern-dark"] .tile-header-actions button:hover, html[data-theme="modern-dark"] .tile-pin-btn:hover, html[data-theme="modern-dark"] .tile-resize-btn:hover, html[data-theme="modern-dark"] .tile-fullscreen-btn:hover, html[data-theme="modern-dark"] .footer-icon-btn:hover { background: #1F1F1F; } html[data-theme^="modern"] .tile-header-actions button svg, html[data-theme^="modern"] .tile-pin-btn svg, html[data-theme^="modern"] .tile-resize-btn svg, html[data-theme^="modern"] .tile-fullscreen-btn svg, html[data-theme^="modern"] .footer-icon-btn svg { width: 15px; height: 15px; } /* ── 14. Csempe body (spec 3.5) ───────────────────────────────── */ html[data-theme^="modern"] .tile-body, html[data-theme^="modern"] .tile-body-wrapper { padding: 16px; background: transparent; } /* ── 15. Csempe footer (spec 3.5) ─────────────────────────────── */ html[data-theme^="modern"] .tile-footer, html[data-theme^="modern"] .weather-tile-footer, html[data-theme^="modern"] .transit-tile-footer, html[data-theme^="modern"] .crosswalk-tile-footer { padding: 8px 16px !important; background: transparent !important; border-top: none !important; background-image: linear-gradient(var(--color-border-light), var(--color-border-light)) !important; background-size: calc(100% - 32px) 1px !important; background-position: center top !important; background-repeat: no-repeat !important; font-size: 11px; color: var(--color-text-muted); min-height: auto !important; } html[data-theme^="modern"] .tile-footer .tile-data-source, html[data-theme^="modern"] .tile-footer .timestamp, html[data-theme^="modern"] .weather-tile-footer, html[data-theme^="modern"] .transit-tile-footer, html[data-theme^="modern"] .crosswalk-tile-footer { color: var(--color-text-muted); font-size: 11px; } /* ── 16. KPI kártyák (spec 5) ─────────────────────────────────── */ html[data-theme^="modern"] .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } html[data-theme^="modern"] .kpi-card { padding: 14px !important; background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme^="modern"] .kpi-card::before, html[data-theme^="modern"] .kpi-card::after { content: none !important; display: none !important; } html[data-theme^="modern"] .kpi-card:hover { background: var(--color-surface) !important; border-color: var(--color-border) !important; transform: none !important; } html[data-theme^="modern"] .kpi-label { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); text-transform: none; letter-spacing: normal; } html[data-theme^="modern"] .kpi-value { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); } html[data-theme^="modern"] .kpi-sublabel, html[data-theme^="modern"] .kpi-trend { font-size: 11px; } /* KPI trend — pozitív / negatív / semleges (spec 5) */ html[data-theme^="modern"] .kpi-trend.up { background: transparent; color: var(--color-success); } html[data-theme^="modern"] .kpi-trend.down { background: transparent; color: var(--color-error); } html[data-theme^="modern"] .kpi-trend.stable { background: transparent; color: var(--color-text-muted); } /* KPI ikon háttér a Modern paletta színeivel */ html[data-theme^="modern"] .kpi-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary-highlight) !important; } html[data-theme^="modern"] .kpi-icon svg { color: var(--color-primary) !important; } /* ── 17. Chart placeholder (spec 6) ───────────────────────────── */ /* MEGJEGYZÉS: a valódi Chart.js diagramok színei NEM változnak a skin váltáskor — csak a körülölelő placeholder / container. */ html[data-theme^="modern"] .chart-area, html[data-theme^="modern"] .chart-container { background: linear-gradient(180deg, var(--color-primary-highlight) 0%, var(--color-surface) 60%); border-radius: var(--radius-sm); } /* ── 18. Térkép placeholder (spec 7) ──────────────────────────── */ html[data-theme^="modern"] .map-placeholder { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } /* ── 19. Státusz indikátorok (spec 8) ─────────────────────────── */ html[data-theme^="modern"] .status-dot.green, html[data-theme^="modern"] .source-dot { background: var(--color-success) !important; } html[data-theme^="modern"] .status-dot.yellow { background: var(--color-warning) !important; } html[data-theme^="modern"] .status-dot.red { background: var(--color-error) !important; } /* Forrás dot (élő adat) — zöld pulzálás */ html[data-theme^="modern"] .source-dot { animation: modernPulseDot 2s ease-in-out infinite; } @keyframes modernPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ── 20. GridStack scrollbar felülírás Modern skinben (spec 9) ── */ html[data-theme^="modern"] .grid-stack-item-content ::-webkit-scrollbar { width: 6px; } html[data-theme^="modern"] .grid-stack-item-content ::-webkit-scrollbar-track { background: transparent; } html[data-theme^="modern"] .grid-stack-item-content ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } html[data-theme^="modern"] .grid-stack-item-content ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ── 21. Mini-widget finomítás — flat, kisebb shadow ──────────── */ html[data-theme^="modern"] .mini-widget { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme^="modern"] .mini-widget::before, html[data-theme^="modern"] .mini-widget::after { content: none !important; display: none !important; } html[data-theme^="modern"] .mini-widget:hover { box-shadow: var(--shadow-md) !important; } /* ══════════════════════════════════════════════════════════════ * B4 FÁZIS — Splash Screen Modern skinben * Spec: docs/citydashboard-skin-specification.md 10 * * A Klasszikus skinben marad a jelenlegi hullám-animáció. Modern * skinben a hullámokat elrejtjük, helyettük halványan pulzáló * dashboard sziluett jelenik meg, középen a logóval. * ══════════════════════════════════════════════════════════════ */ /* A sziluett alapértelmezetten rejtett — csak Modern skinben látszik */ .splash-silhouette { display: none; } /* ── 22. Splash container Modern skinben (spec 10.2) ──────────── */ html[data-theme^="modern"] #splashScreen { background: var(--color-bg) !important; } html[data-theme^="modern"] #splashScreen::before { background: none !important; } /* ── 23. Klasszikus hullámok kikapcsolása Modern skinben ──────── */ html[data-theme^="modern"] .splash-waves { display: none !important; } /* ── 24. Dashboard sziluett SVG (spec 10.3) ───────────────────── */ html[data-theme^="modern"] .splash-silhouette { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Sziluett csempe fill szín (spec 10.2): - Dark skin: #2A2A2A - Light skin: #E5E7EB */ html[data-theme="modern-dark"] .splash-silhouette .sil-tile { fill: #2A2A2A; } html[data-theme="modern-light"] .splash-silhouette .sil-tile { fill: #E5E7EB; } /* ── 25. Pulzáló animáció (spec 10.4) ─────────────────────────── */ html[data-theme^="modern"] .splash-silhouette .sil-tile { animation: modernTilePulse 3s ease-in-out infinite; transform-origin: center; will-change: opacity; } @keyframes modernTilePulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.28; } } /* Eltolt időzítés — spec 10.4 táblázat */ html[data-theme^="modern"] .splash-silhouette .sil-tile-1 { animation-delay: 0s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-2 { animation-delay: 0.3s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-3 { animation-delay: 0.6s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-4 { animation-delay: 0.9s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-5 { animation-delay: 1.2s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-6 { animation-delay: 1.5s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-7 { animation-delay: 0.45s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-8 { animation-delay: 0.75s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-9 { animation-delay: 1.05s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-10 { animation-delay: 1.35s; } /* ── 26. Splash logó Modern skinben (spec 10.5) ──────────────── */ html[data-theme^="modern"] .splash-logo { max-width: 280px !important; width: 50vw !important; animation: modernSplashFadeIn 0.5s ease-out forwards !important; opacity: 0; transform: scale(0.95); } @keyframes modernSplashFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ── 27. Splash felcsúszás (spec 10.6) ────────────────────────── */ html[data-theme^="modern"] #splashScreen { transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; } html[data-theme^="modern"] #splashScreen.splash-exit { transform: translateY(-100vh) !important; opacity: 0 !important; } /* ══════════════════════════════════════════════════════════════ * B5 FÁZIS — Login oldal Modern skinben * Spec: docs/citydashboard-skin-specification.md 11 * * A Klasszikus skinben marad a jelenlegi glassmorphism auth kártya. * Modern skinben tiszta, flat 400px-es kártya. * ══════════════════════════════════════════════════════════════ */ /* ── 28. Auth backdrop (spec 11 — solid bg, nem gradient) ─────── */ html[data-theme^="modern"] .auth-backdrop { background: var(--color-bg) !important; opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 29. Auth kártya (spec 11.2) ─────────────────────────────── */ html[data-theme^="modern"] .auth-card { max-width: 400px !important; background: var(--color-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; padding: 32px 40px 40px !important; box-shadow: var(--shadow-md) !important; } html[data-theme^="modern"] .auth-card::-webkit-scrollbar { width: 6px; } html[data-theme^="modern"] .auth-card::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } /* ── 30. Auth header + logó (spec 11.3) ───────────────────────── */ html[data-theme^="modern"] .auth-header { text-align: center; margin-bottom: 24px; } html[data-theme^="modern"] .auth-header-logo { max-width: 200px !important; width: 100%; height: auto; display: block; margin: 0 auto 24px !important; } html[data-theme^="modern"] .auth-title { font-size: 22px !important; font-weight: 600 !important; color: var(--color-text) !important; letter-spacing: -0.01em; } html[data-theme^="modern"] .auth-subtitle { font-size: 13px !important; color: var(--color-text-secondary) !important; font-weight: 400; margin-top: 4px; } /* ── 31. Tab váltó (spec 11.4) ────────────────────────────────── */ html[data-theme^="modern"] .auth-tabs { display: flex !important; gap: 0 !important; margin: 24px 0 !important; background: transparent !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; overflow: hidden !important; padding: 0 !important; } html[data-theme^="modern"] .auth-tab { flex: 1; padding: 9px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; background: transparent !important; border: none !important; border-radius: 0 !important; cursor: pointer; transition: all 150ms ease; } html[data-theme^="modern"] .auth-tab:hover:not(.active) { background: var(--color-surface-alt) !important; color: var(--color-text) !important; } html[data-theme="modern-dark"] .auth-tab:hover:not(.active) { background: #1F1F1F !important; } html[data-theme^="modern"] .auth-tab.active { background: var(--color-primary) !important; color: #fff !important; font-weight: 600 !important; } /* ── 32. Form mezők (spec 11.5) ───────────────────────────────── */ html[data-theme^="modern"] .auth-field { margin-bottom: 16px; } html[data-theme^="modern"] .auth-field label { font-size: 13px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; margin-bottom: 6px; } html[data-theme^="modern"] .auth-field input[type="email"], html[data-theme^="modern"] .auth-field input[type="password"], html[data-theme^="modern"] .auth-field input[type="text"] { padding: 10px 14px !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; background: var(--color-bg) !important; color: var(--color-text) !important; font-size: 14px !important; font-family: var(--font-family) !important; font-weight: 400 !important; transition: border-color 150ms ease, box-shadow 150ms ease; } html[data-theme^="modern"] .auth-field input:focus { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; } html[data-theme^="modern"] .auth-field input::placeholder { color: var(--color-text-muted) !important; } /* Jelszó szem-toggle gomb */ html[data-theme^="modern"] .auth-pw-toggle { color: var(--color-text-muted) !important; } html[data-theme^="modern"] .auth-pw-toggle:hover { color: var(--color-text) !important; } /* ── 33. Login submit gomb (spec 11.6) ────────────────────────── */ html[data-theme^="modern"] .auth-submit-btn { width: 100%; padding: 11px !important; background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--font-family) !important; transition: background 150ms ease; cursor: pointer; } html[data-theme^="modern"] .auth-submit-btn:hover { background: var(--color-primary-hover) !important; opacity: 1 !important; } html[data-theme^="modern"] .auth-submit-btn:active { transform: scale(0.98); } /* ── 34. Auth egyéb elemek (options, switch, footer, lang) ───── */ html[data-theme^="modern"] .auth-options { font-size: 13px !important; color: var(--color-text-secondary) !important; margin: 8px 0 16px; } html[data-theme^="modern"] .auth-options a { color: var(--color-primary) !important; text-decoration: none; } html[data-theme^="modern"] .auth-options a:hover { text-decoration: underline; } html[data-theme^="modern"] .auth-switch { font-size: 13px !important; color: var(--color-text-secondary) !important; margin-top: 16px; text-align: center; } html[data-theme^="modern"] .auth-switch a, html[data-theme^="modern"] .auth-switch button { color: var(--color-primary) !important; font-weight: 500; background: none; border: none; cursor: pointer; font-family: var(--font-family); font-size: 13px; } /* Nyelvválasztó dropdown az auth oldalon — saját sorban, a logó felett jobbra igazítva (hogy ne lógjon rá a logóra, mint az absolute pozí- ciónál a Klasszikus skinben). */ html[data-theme^="modern"] .auth-lang-wrapper { position: static !important; top: auto !important; right: auto !important; text-align: right; margin-bottom: 16px; } html[data-theme^="modern"] .auth-lang-select { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; border-radius: var(--radius-sm) !important; padding: 6px 10px !important; font-size: 12px !important; font-family: var(--font-family) !important; } html[data-theme^="modern"] .auth-lang-select:focus { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; } /* Régi .auth-logo (56×56-os lakat ikon) — Modern skinben elrejtés, csak a fájl-alapú logót mutatjuk */ html[data-theme^="modern"] .auth-card .auth-header .auth-logo { display: none !important; } /* ══════════════════════════════════════════════════════════════ * B6 FÁZIS — Modern skin: tipográfia + panelek + modálok + apró * Spec: docs/citydashboard-skin-specification.md 1 + 2 + 8 * * Eddig nem kezelt felületek egységesítése — minden Modern skin * alatt marad, Klasszikus változatlan. * ══════════════════════════════════════════════════════════════ */ /* ── 35. Tipográfia finomhangolás (spec 1 részletek) ──────────── */ /* Csempe forrás és timestamp: 10px (spec 1) */ html[data-theme^="modern"] .tile-footer .timestamp, html[data-theme^="modern"] .tile-data-source, html[data-theme^="modern"] .source-label { font-size: 10px !important; color: var(--color-text-muted); font-weight: 400; } /* Kereső kbd indikátor (Ctrl+K, stb.) */ html[data-theme^="modern"] .search-box kbd, html[data-theme^="modern"] kbd.search-kbd { font-size: 11px; padding: 2px 6px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text-muted); font-family: var(--font-family); font-weight: 500; } /* Időjárás típusú csempék értékek — a Közlekedésmeteorológia csempe egy kompakt egysoros layout (ikon + temp + leírás + részletek + …), ezért a spec 1. szekció 40px-es nagy hőmérséklet-stílusa itt NEM alkalmazható — kilógna a csempe függőleges keretéből. A Klasszikus .weather-temp 16px / 700 weight a sorba fér; Modern skinben is megtartjuk az eredeti méretet. A 40px spec egy jövőbeli dedikált nagy időjárás widget-hez tartható fenn. */ html[data-theme^="modern"] .weather-description, html[data-theme^="modern"] .weather-desc { font-size: 13px; color: var(--color-text-secondary); font-weight: 400; } html[data-theme^="modern"] .weather-detail-label, html[data-theme^="modern"] .weather-details .detail-label { font-size: 11px; color: var(--color-text-muted); font-weight: 500; } html[data-theme^="modern"] .weather-detail-value, html[data-theme^="modern"] .weather-details .detail-value { font-size: 14px; color: var(--color-text); font-weight: 500; } /* Info list (label/érték) — sok csempén használt minta */ html[data-theme^="modern"] .info-item-label, html[data-theme^="modern"] .info-list-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 400; } html[data-theme^="modern"] .info-item-value, html[data-theme^="modern"] .info-list-value { font-size: 13px; color: var(--color-text); font-weight: 500; } /* Hírek (news-item) — hír cím / meta / kivonat (spec 1) */ html[data-theme^="modern"] .news-item-title, html[data-theme^="modern"] .news-tile-body .news-item-title { font-size: 13.5px !important; line-height: 1.4; color: var(--color-text); font-weight: 500; } html[data-theme^="modern"] .news-item-date, html[data-theme^="modern"] .news-item-meta { font-size: 11px !important; color: var(--color-text-muted); font-weight: 400; } html[data-theme^="modern"] .news-item-excerpt, html[data-theme^="modern"] .news-tile-body .news-item-excerpt { font-size: 12.5px !important; line-height: 1.45; color: var(--color-text-secondary); font-weight: 400; } /* ── 36. Értesítési panel (notif-panel) ──────────────────────── */ html[data-theme^="modern"] .notif-panel { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important; backdrop-filter: none !important; } html[data-theme^="modern"] .notif-panel-header { padding: 14px 16px !important; border-bottom: 1px solid var(--color-border-light) !important; font-size: 13.5px; font-weight: 500; color: var(--color-text); } html[data-theme^="modern"] .notif-panel-body { background: transparent !important; } html[data-theme^="modern"] .notif-panel-clear { font-size: 11px; color: var(--color-text-muted); background: transparent; border: none; padding: 4px 8px; border-radius: var(--radius-sm); transition: color 150ms ease, background 150ms ease; } html[data-theme^="modern"] .notif-panel-clear:hover { color: var(--color-text); background: var(--color-surface-alt); } /* Notif forrás csoport */ html[data-theme^="modern"] .notif-source-group-title { padding: 10px 16px; font-size: 12px; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-light); } html[data-theme^="modern"] .notif-source-group-title:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .notif-source-group-title:hover { background: #1F1F1F; } /* Notif elem (egyedi értesítés) */ html[data-theme^="modern"] .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--color-border-light); background: transparent; } html[data-theme^="modern"] .notif-item:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .notif-item:hover { background: #1F1F1F; } html[data-theme^="modern"] .notif-item-title { font-size: 13px; font-weight: 500; color: var(--color-text); } html[data-theme^="modern"] .notif-item-desc, html[data-theme^="modern"] .notif-item-time { font-size: 11px; color: var(--color-text-muted); } /* ── 37. Assistant chat panel ────────────────────────────────── */ html[data-theme^="modern"] .assistant-panel { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important; backdrop-filter: none !important; } html[data-theme^="modern"] .assistant-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--color-border-light) !important; background: transparent; } html[data-theme^="modern"] .assistant-panel-avatar { background: var(--color-primary-highlight); } html[data-theme^="modern"] .assistant-panel-avatar svg { color: var(--color-primary); } html[data-theme^="modern"] .assistant-panel-name { color: var(--color-text); font-size: 14px; font-weight: 600; } html[data-theme^="modern"] .assistant-panel-btn { color: var(--color-text-muted); border-radius: var(--radius-sm); width: 28px; height: 28px; } html[data-theme^="modern"] .assistant-panel-btn:hover { color: var(--color-text); background: var(--color-surface-alt); } html[data-theme="modern-dark"] .assistant-panel-btn:hover { background: #1F1F1F; } html[data-theme^="modern"] .assistant-messages { background: transparent; } html[data-theme^="modern"] .assistant-message { background: var(--color-surface-alt); border-radius: var(--radius-md); padding: 10px 14px; color: var(--color-text); font-size: 13px; } html[data-theme^="modern"] .assistant-input-area { border-top: 1px solid var(--color-border-light); padding: 12px; background: transparent; } html[data-theme^="modern"] .assistant-input { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; color: var(--color-text) !important; font-size: 13px; padding: 8px 12px; font-family: var(--font-family); } html[data-theme^="modern"] .assistant-input:focus { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .assistant-send-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; border: none; } html[data-theme^="modern"] .assistant-send-btn:hover { background: var(--color-primary-hover); } /* Asszisztens header gomb (nagy ikon a főfejlécben) */ html[data-theme^="modern"] .assistant-header-btn { background: transparent; border-radius: var(--radius-sm); } html[data-theme^="modern"] .assistant-header-btn:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .assistant-header-btn:hover { background: #1F1F1F; } html[data-theme^="modern"] .assistant-header-avatar { background: var(--color-primary-highlight); width: 36px; height: 36px; } html[data-theme^="modern"] .assistant-header-avatar svg { color: var(--color-primary); width: 18px; height: 18px; } html[data-theme^="modern"] .assistant-header-name { color: var(--color-text); font-size: 13px; font-weight: 500; } html[data-theme^="modern"] .assistant-header-label { color: var(--color-text-muted); font-size: 11px; font-weight: 400; } /* ── 38. Ticker (hírfolyam) finomítás ─────────────────────────── */ html[data-theme^="modern"] .news-ticker { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; backdrop-filter: none !important; } html[data-theme^="modern"] .news-ticker::before, html[data-theme^="modern"] .news-ticker::after { content: none !important; display: none !important; } html[data-theme^="modern"] .news-ticker-label { color: var(--color-text) !important; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .news-ticker-label.blue { color: var(--color-primary) !important; } html[data-theme^="modern"] .news-ticker-label.green { color: var(--color-success) !important; } html[data-theme^="modern"] .news-ticker-label.orange { color: var(--color-warning) !important; } html[data-theme^="modern"] .news-ticker-label.purple { color: #8b5cf6 !important; } html[data-theme^="modern"] .news-item { background: transparent !important; border: none !important; color: var(--color-text) !important; font-size: 12.5px; } html[data-theme^="modern"] .news-item:hover { color: var(--color-primary) !important; background: transparent !important; } /* ── 39. Dropdown szelektorok (crosswalk, SXR, stb.) ──────────── */ html[data-theme^="modern"] .dropdown-selector { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-md) !important; backdrop-filter: none !important; } html[data-theme^="modern"] .dropdown-selector-item { padding: 8px 12px; font-size: 13px; color: var(--color-text); border-bottom: 1px solid var(--color-border-light); background: transparent; } html[data-theme^="modern"] .dropdown-selector-item:last-child { border-bottom: none; } html[data-theme^="modern"] .dropdown-selector-item:hover, html[data-theme^="modern"] .dropdown-selector-item.active { background: var(--color-primary-highlight); color: var(--color-primary); } /* ── 40. Mini-widget beállítás popup (mw-popup-global) ────────── */ html[data-theme^="modern"] .mw-popup-global { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-md) !important; backdrop-filter: none !important; } html[data-theme^="modern"] .mw-popup-option { padding: 8px 12px; font-size: 12px; color: var(--color-text); background: transparent; border-bottom: 1px solid var(--color-border-light); } html[data-theme^="modern"] .mw-popup-option:last-child { border-bottom: none; } html[data-theme^="modern"] .mw-popup-option:hover, html[data-theme^="modern"] .mw-popup-option.active { background: var(--color-primary-highlight); color: var(--color-primary); } html[data-theme^="modern"] .mw-popup-global::-webkit-scrollbar { width: 6px; } html[data-theme^="modern"] .mw-popup-global::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } /* ── 41. Tile-resize popup ────────────────────────────────────── */ html[data-theme^="modern"] .tile-resize-popup, html[data-theme^="modern"] [class*="resize-popup"] { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-md) !important; backdrop-filter: none !important; } html[data-theme^="modern"] .resize-option, html[data-theme^="modern"] .tile-resize-option { padding: 8px 12px; font-size: 12px; color: var(--color-text); background: transparent; border-radius: var(--radius-sm); cursor: pointer; } html[data-theme^="modern"] .resize-option:hover, html[data-theme^="modern"] .tile-resize-option:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .resize-option:hover, html[data-theme="modern-dark"] .tile-resize-option:hover { background: #1F1F1F; } /* ── 42. News-admin modál (admin tartalom szerkesztő) ─────────── */ html[data-theme^="modern"] .news-admin-modal { background: rgba(0, 0, 0, 0.6) !important; } html[data-theme="modern-light"] .news-admin-modal { background: rgba(0, 0, 0, 0.4) !important; } html[data-theme^="modern"] .news-admin-content { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important; } html[data-theme^="modern"] .news-admin-header { background: var(--color-surface-alt) !important; border-bottom: 1px solid var(--color-border) !important; padding: 14px 20px; } html[data-theme^="modern"] .news-admin-tabs { background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border-light) !important; } html[data-theme^="modern"] .admin-news-item, html[data-theme^="modern"] .admin-ct-card, html[data-theme^="modern"] .admin-user-item { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px; } /* Admin form input/select */ html[data-theme^="modern"] .admin-form-input, html[data-theme^="modern"] .admin-form-select, html[data-theme^="modern"] .admin-form-textarea { background: var(--color-bg) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-family) !important; font-size: 13px !important; padding: 8px 12px !important; } html[data-theme^="modern"] .admin-form-input:focus, html[data-theme^="modern"] .admin-form-select:focus, html[data-theme^="modern"] .admin-form-textarea:focus { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .admin-form-select option { background: var(--color-bg); color: var(--color-text); } html[data-theme^="modern"] .admin-form-label { color: var(--color-text-secondary) !important; font-size: 12px; font-weight: 500; } /* ── 43. Cookie/system banner ─────────────────────────────────── */ html[data-theme^="modern"] .cookie-banner, html[data-theme^="modern"] #system-banner { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important; color: var(--color-text) !important; backdrop-filter: none !important; } html[data-theme^="modern"] .cookie-banner-accept { background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; padding: 8px 16px; font-weight: 600; } html[data-theme^="modern"] .cookie-banner-accept:hover { background: var(--color-primary-hover) !important; } /* ── 44. PWA install banner + offline/SW update banner ────────── */ html[data-theme^="modern"] .pwa-install-banner, html[data-theme^="modern"] .offline-banner, html[data-theme^="modern"] .sw-update-banner { background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border) !important; color: var(--color-text) !important; backdrop-filter: none !important; } html[data-theme^="modern"] .offline-banner { background: var(--color-error) !important; color: #fff !important; border-bottom: none !important; } html[data-theme^="modern"] .pwa-banner-btn, html[data-theme^="modern"] .sw-update-btn { background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; padding: 6px 14px; font-weight: 600; font-size: 13px; } html[data-theme^="modern"] .pwa-banner-btn:hover, html[data-theme^="modern"] .sw-update-btn:hover { background: var(--color-primary-hover) !important; } html[data-theme^="modern"] .pwa-banner-btn.pwa-banner-later { background: transparent !important; color: var(--color-text-secondary) !important; border: 1px solid var(--color-border) !important; } /* ── 45. Toast értesítések ────────────────────────────────────── */ html[data-theme^="modern"] .cd-toast { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-md) !important; color: var(--color-text) !important; padding: 10px 16px; font-size: 13px; backdrop-filter: none !important; } /* ── 46. MFA challenge panel ──────────────────────────────────── */ html[data-theme^="modern"] .mfa-challenge-panel, html[data-theme^="modern"] #auth-mfa-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } html[data-theme^="modern"] .mfa-code-input { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; color: var(--color-text) !important; padding: 10px 14px !important; font-size: 16px !important; letter-spacing: 0.15em; font-family: var(--font-family); text-align: center; } html[data-theme^="modern"] .mfa-code-input:focus { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* ── 47. Footer + datavalidity apróságok ──────────────────────── */ html[data-theme^="modern"] .footer, html[data-theme^="modern"] .app-footer { padding: 8px 24px; font-size: 11px; color: var(--color-text-muted); background: transparent; border-top: 1px solid var(--color-border-light); } /* ── 48. Tartalom szekció fejlécek / page-title ──────────────── */ html[data-theme^="modern"] .page-title, html[data-theme^="modern"] .section-title, html[data-theme^="modern"] .page-subtitle { color: var(--color-text); } /* ── 49. Általános gomb-stílus alaphelyzet (ami még nem kezelt) ─ */ html[data-theme^="modern"] button.btn-primary, html[data-theme^="modern"] .btn-primary { background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; padding: 8px 16px; font-weight: 600; font-family: var(--font-family); font-size: 13px; transition: background 150ms ease; } html[data-theme^="modern"] button.btn-primary:hover, html[data-theme^="modern"] .btn-primary:hover { background: var(--color-primary-hover) !important; } html[data-theme^="modern"] button.btn-secondary, html[data-theme^="modern"] .btn-secondary { background: transparent !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; padding: 8px 16px; font-weight: 500; font-family: var(--font-family); font-size: 13px; } html[data-theme^="modern"] button.btn-secondary:hover, html[data-theme^="modern"] .btn-secondary:hover { background: var(--color-surface-alt) !important; } html[data-theme="modern-dark"] button.btn-secondary:hover, html[data-theme="modern-dark"] .btn-secondary:hover { background: #1F1F1F !important; } /* ══════════════════════════════════════════════════════════════ * C1 FINOMÍTÁS — Profil oldal csempék Modern skinben * Cél: a profil-specifikus hardkódolt rgba színek és glassmorphism * elemek skin-paletta szerinti lecserélése. * ══════════════════════════════════════════════════════════════ */ /* ── 50. Avatár szekció ───────────────────────────────────────── */ html[data-theme^="modern"] .profile-avatar-wrap { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 50%; } html[data-theme^="modern"] .profile-avatar-monogram { background: var(--color-primary); color: #fff; } html[data-theme^="modern"] .profile-avatar-btn { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .profile-avatar-btn:hover { background: var(--color-primary-highlight) !important; border-color: var(--color-primary); color: var(--color-primary); } /* ── 51. Profil input + textarea ──────────────────────────────── */ html[data-theme^="modern"] .profile-input, html[data-theme^="modern"] .profile-textarea { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-family) !important; font-size: 13px !important; padding: 8px 12px !important; transition: border-color 150ms ease, box-shadow 150ms ease; } html[data-theme^="modern"] .profile-input:focus, html[data-theme^="modern"] .profile-textarea:focus { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; } html[data-theme^="modern"] .profile-input[readonly] { background: var(--color-surface-alt) !important; color: var(--color-text-muted) !important; cursor: not-allowed; } html[data-theme^="modern"] .profile-input::placeholder, html[data-theme^="modern"] .profile-textarea::placeholder { color: var(--color-text-muted) !important; } /* ── 52. Email csere form ─────────────────────────────────────── */ html[data-theme^="modern"] .profile-email-change-btn { background: var(--color-primary-highlight) !important; color: var(--color-primary) !important; border: 1px solid var(--color-primary) !important; border-radius: var(--radius-sm) !important; padding: 6px 12px; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .profile-email-change-btn:hover { background: var(--color-primary) !important; color: #fff !important; } html[data-theme^="modern"] .profile-email-confirm { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } html[data-theme^="modern"] .profile-email-confirm:hover { background: var(--color-primary-hover) !important; } html[data-theme^="modern"] .profile-email-cancel { background: transparent !important; color: var(--color-text-secondary) !important; border: 1px solid var(--color-border) !important; } html[data-theme^="modern"] .profile-email-cancel:hover { background: var(--color-surface-alt) !important; } html[data-theme^="modern"] .profile-email-hint { color: var(--color-text-muted) !important; } /* ── 53. 2FA státusz ─────────────────────────────────────────── */ html[data-theme^="modern"] .profile-2fa-status.tfa-on { color: var(--color-success) !important; } html[data-theme^="modern"] .profile-2fa-status.tfa-off { color: var(--color-text-muted) !important; } /* ── 54. Aktív sessionök listája ──────────────────────────────── */ html[data-theme^="modern"] .profile-session-item { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 10px 12px; margin-bottom: 8px; } html[data-theme^="modern"] .profile-session-item:hover { background: var(--color-surface); border-color: var(--color-border); } html[data-theme="modern-dark"] .profile-session-item:hover { background: #1F1F1F !important; } html[data-theme^="modern"] .profile-session-item.current { border-color: var(--color-primary) !important; background: var(--color-primary-highlight) !important; } /* ── 55. Profil gombok általános ─────────────────────────────── */ html[data-theme^="modern"] .profile-btn { background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; padding: 9px 16px; font-size: 13px; font-weight: 600; font-family: var(--font-family); transition: background 150ms ease; } html[data-theme^="modern"] .profile-btn:hover { background: var(--color-primary-hover) !important; } html[data-theme^="modern"] .profile-btn-danger { background: var(--color-error) !important; color: #fff !important; } html[data-theme^="modern"] .profile-btn-danger:hover { background: #B91C1C !important; } html[data-theme="modern-light"] .profile-btn-danger:hover { background: #991B1B !important; } html[data-theme^="modern"] .profile-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } /* ── 56. Profil elválasztó ────────────────────────────────────── */ html[data-theme^="modern"] .profile-divider { border-top: 1px solid var(--color-border-light); background: none; } /* ── 57. GDPR szekció ─────────────────────────────────────────── */ html[data-theme^="modern"] .profile-gdpr-item { padding: 10px 12px; border-bottom: 1px solid var(--color-border-light); } html[data-theme^="modern"] .profile-gdpr-badge { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 99px; } html[data-theme^="modern"] .profile-gdpr-badge.gdpr-ok { background: var(--color-primary-highlight); color: var(--color-success); } html[data-theme="modern-light"] .profile-gdpr-badge.gdpr-ok { background: rgba(5, 150, 105, 0.1); color: var(--color-success); } html[data-theme^="modern"] .profile-gdpr-badge.gdpr-missing { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); } html[data-theme^="modern"] .profile-gdpr-btn { background: var(--color-surface-alt) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; padding: 6px 12px; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .profile-gdpr-btn:hover { background: var(--color-primary-highlight) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; } html[data-theme^="modern"] .profile-gdpr-btn.profile-gdpr-danger { background: transparent !important; color: var(--color-error) !important; border: 1px solid var(--color-error) !important; } html[data-theme^="modern"] .profile-gdpr-btn.profile-gdpr-danger:hover { background: var(--color-error) !important; color: #fff !important; } html[data-theme^="modern"] .profile-gdpr-note { color: var(--color-text-muted) !important; font-size: 11px; } /* ── 58. Profile lista (bejelentéseim, javaslatim, üzeneteim) ── */ html[data-theme^="modern"] .profile-list-item { border-bottom: 1px solid var(--color-border-light) !important; padding: 10px 0; font-size: 13px; } html[data-theme^="modern"] .profile-list-item:last-child { border-bottom: none !important; } html[data-theme^="modern"] .profile-sg-link:hover, html[data-theme^="modern"] .profile-list-item:hover { background: var(--color-surface-alt) !important; } html[data-theme="modern-dark"] .profile-sg-link:hover, html[data-theme="modern-dark"] .profile-list-item:hover { background: #1F1F1F !important; } html[data-theme^="modern"] .profile-msg-suggestion-auto { color: var(--color-primary) !important; } html[data-theme^="modern"] .profile-msg-suggestion-response { color: var(--color-success) !important; } html[data-theme^="modern"] .profile-item-status { background: var(--color-surface-alt); color: var(--color-text); padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; } html[data-theme^="modern"] .profile-item-date { color: var(--color-text-muted) !important; font-size: 11px; } /* ── 59. Részvételi statisztika kártyák ──────────────────────── */ html[data-theme^="modern"] .profile-stat-card { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 14px 10px; } html[data-theme^="modern"] .profile-stat-num { color: var(--color-primary) !important; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } html[data-theme^="modern"] .profile-stat-label { color: var(--color-text-muted) !important; font-size: 11px; font-weight: 500; } html[data-theme^="modern"] .profile-subheading { color: var(--color-text-secondary) !important; font-size: 12px; font-weight: 500; border-top: 1px solid var(--color-border-light); } /* ── 60. Értesítési beállítások összefoglaló ─────────────────── */ html[data-theme^="modern"] .profile-notif-row { border-bottom: 1px solid var(--color-border-light) !important; padding: 8px 0; } html[data-theme^="modern"] .profile-notif-row:last-child { border-bottom: none !important; } html[data-theme^="modern"] .profile-notif-badge.badge-on { background: var(--color-primary-highlight) !important; color: var(--color-success) !important; } html[data-theme="modern-light"] .profile-notif-badge.badge-on { background: rgba(5, 150, 105, 0.12) !important; color: var(--color-success) !important; } html[data-theme^="modern"] .profile-notif-badge.badge-off { background: transparent !important; color: var(--color-text-muted) !important; border: 1px solid var(--color-border); } html[data-theme^="modern"] .profile-notif-hint { color: var(--color-text-muted) !important; font-size: 11px; font-style: italic; } /* ══════════════════════════════════════════════════════════════ * C2 FINOMÍTÁS — Admin panel táblák / listák Modern skinben * Cél: az admin wrappereket és listatémaket a skin paletta * szerint megjeleníteni (Klasszikus glassmorphism nélkül). * ══════════════════════════════════════════════════════════════ */ /* ── 61. Admin panel wrapper + tabok ──────────────────────────── */ html[data-theme^="modern"] .admin-panel-container { background: transparent; padding: 16px; } html[data-theme^="modern"] .admin-panel-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); background: transparent; margin-bottom: 16px; overflow-x: auto; flex-wrap: wrap; } html[data-theme^="modern"] .admin-panel-tab { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; font-family: var(--font-family); } html[data-theme^="modern"] .admin-panel-tab:hover { color: var(--color-text); background: transparent; } html[data-theme^="modern"] .admin-panel-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: transparent; } html[data-theme^="modern"] .admin-tab-content { background: transparent; } /* ── 62. Admin eszköztárak (toolbar-ok) ───────────────────────── */ html[data-theme^="modern"] .admin-users-toolbar, html[data-theme^="modern"] .admin-audit-toolbar, html[data-theme^="modern"] .admin-sg-toolbar, html[data-theme^="modern"] .admin-ct-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); } /* Toolbar input/select/date */ html[data-theme^="modern"] .admin-audit-toolbar select, html[data-theme^="modern"] .admin-audit-toolbar input[type="date"], html[data-theme^="modern"] .admin-audit-toolbar input[type="text"], html[data-theme^="modern"] .admin-users-toolbar select, html[data-theme^="modern"] .admin-users-toolbar input, html[data-theme^="modern"] .admin-sg-toolbar select, html[data-theme^="modern"] .admin-sg-toolbar input, html[data-theme^="modern"] .admin-ct-filter-select { padding: 7px 10px !important; font-size: 12px !important; background: var(--color-bg) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-family) !important; color-scheme: light !important; transition: border-color 150ms ease, box-shadow 150ms ease; } html[data-theme="modern-dark"] .admin-audit-toolbar select, html[data-theme="modern-dark"] .admin-audit-toolbar input[type="date"], html[data-theme="modern-dark"] .admin-audit-toolbar input[type="text"], html[data-theme="modern-dark"] .admin-users-toolbar select, html[data-theme="modern-dark"] .admin-users-toolbar input, html[data-theme="modern-dark"] .admin-sg-toolbar select, html[data-theme="modern-dark"] .admin-sg-toolbar input, html[data-theme="modern-dark"] .admin-ct-filter-select { color-scheme: dark !important; } html[data-theme^="modern"] .admin-audit-toolbar select:focus, html[data-theme^="modern"] .admin-audit-toolbar input:focus, html[data-theme^="modern"] .admin-users-toolbar select:focus, html[data-theme^="modern"] .admin-users-toolbar input:focus, html[data-theme^="modern"] .admin-ct-filter-select:focus { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; } /* Export / create gombok */ html[data-theme^="modern"] .admin-audit-export-btn, html[data-theme^="modern"] .admin-save-btn, html[data-theme^="modern"] .admin-ct-create-btn { padding: 7px 14px !important; font-size: 12px !important; font-weight: 600 !important; background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; cursor: pointer; font-family: var(--font-family); transition: background 150ms ease; } html[data-theme^="modern"] .admin-audit-export-btn:hover, html[data-theme^="modern"] .admin-save-btn:hover, html[data-theme^="modern"] .admin-ct-create-btn:hover { background: var(--color-primary-hover) !important; } /* ── 63. Admin listák (users, audit, sg, ct, news) ────────────── */ html[data-theme^="modern"] .admin-users-list, html[data-theme^="modern"] .admin-audit-list, html[data-theme^="modern"] .admin-sg-list, html[data-theme^="modern"] .admin-news-list { background: transparent; padding: 0; } html[data-theme^="modern"] .admin-user-item, html[data-theme^="modern"] .admin-audit-item, html[data-theme^="modern"] .admin-sg-item, html[data-theme^="modern"] .admin-ct-poll-item, html[data-theme^="modern"] .admin-news-item { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px !important; margin-bottom: 8px; transition: background 150ms ease, border-color 150ms ease; } html[data-theme^="modern"] .admin-user-item:hover, html[data-theme^="modern"] .admin-audit-item:hover, html[data-theme^="modern"] .admin-sg-item:hover, html[data-theme^="modern"] .admin-ct-poll-item:hover, html[data-theme^="modern"] .admin-news-item:hover { background: var(--color-surface) !important; border-color: var(--color-border) !important; } html[data-theme="modern-dark"] .admin-user-item:hover, html[data-theme="modern-dark"] .admin-audit-item:hover, html[data-theme="modern-dark"] .admin-sg-item:hover, html[data-theme="modern-dark"] .admin-ct-poll-item:hover, html[data-theme="modern-dark"] .admin-news-item:hover { background: #1F1F1F !important; } html[data-theme^="modern"] .admin-user-item.locked { border-color: var(--color-error) !important; background: rgba(239, 68, 68, 0.05) !important; } html[data-theme="modern-light"] .admin-user-item.locked { background: rgba(220, 38, 38, 0.05) !important; } /* User sor tipográfia */ html[data-theme^="modern"] .admin-user-main strong { color: var(--color-text); font-weight: 600; font-size: 13px; } html[data-theme^="modern"] .admin-user-meta { color: var(--color-text-secondary); font-size: 12px; } html[data-theme^="modern"] .admin-user-email { color: var(--color-text-muted); font-size: 11px; } /* ── 64. Audit napló elem + action badges ────────────────────── */ html[data-theme^="modern"] .admin-audit-item .audit-time { color: var(--color-text-muted); font-size: 11px; font-family: ui-monospace, 'SF Mono', monospace; } html[data-theme^="modern"] .admin-audit-item .audit-action { color: var(--color-text); font-size: 12px; font-family: ui-monospace, 'SF Mono', monospace; } html[data-theme^="modern"] .admin-audit-item .audit-user { color: var(--color-text-secondary); font-size: 12px; } html[data-theme^="modern"] .admin-audit-item .audit-details { color: var(--color-text-muted); font-size: 11px; } /* Audit category badge-k — paletta ihletett színek */ html[data-theme^="modern"] .audit-badge { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } html[data-theme^="modern"] .audit-badge-auth { background: rgba(59, 130, 246, 0.15); color: var(--color-primary); } html[data-theme^="modern"] .audit-badge-admin { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); } html[data-theme^="modern"] .audit-badge-content { background: rgba(16, 185, 129, 0.15); color: var(--color-success); } html[data-theme^="modern"] .audit-badge-role { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; } html[data-theme^="modern"] .audit-badge-gdpr { background: rgba(239, 68, 68, 0.15); color: var(--color-error); } html[data-theme^="modern"] .audit-badge-system { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); } /* ── 65. Pagination ─────────────────────────────────────────── */ html[data-theme^="modern"] .admin-audit-pagination { padding: 12px 0; display: flex; align-items: center; gap: 12px; justify-content: center; color: var(--color-text-secondary); font-size: 12px; } html[data-theme^="modern"] .admin-audit-pagination button { padding: 6px 12px !important; font-size: 12px !important; background: var(--color-surface-alt) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-family); } html[data-theme^="modern"] .admin-audit-pagination button:hover:not(:disabled) { background: var(--color-primary-highlight) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } html[data-theme^="modern"] .admin-audit-pagination button:disabled { opacity: 0.4; cursor: not-allowed; } /* ── 66. Szerkesztés / törlés akciógombok ────────────────────── */ html[data-theme^="modern"] .admin-edit-btn, html[data-theme^="modern"] .admin-delete-btn { padding: 5px 10px !important; font-size: 11px !important; border-radius: var(--radius-sm) !important; font-family: var(--font-family); font-weight: 500; cursor: pointer; border: 1px solid var(--color-border) !important; transition: all 150ms ease; } html[data-theme^="modern"] .admin-edit-btn { background: var(--color-surface) !important; color: var(--color-text) !important; } html[data-theme^="modern"] .admin-edit-btn:hover { background: var(--color-primary-highlight) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } html[data-theme^="modern"] .admin-delete-btn { background: transparent !important; color: var(--color-error) !important; border-color: var(--color-error) !important; } html[data-theme^="modern"] .admin-delete-btn:hover { background: var(--color-error) !important; color: #fff !important; } /* ── 67. Tartalom szerkesztő (admin-ct-*) ────────────────────── */ html[data-theme^="modern"] .admin-ct-info { background: var(--color-primary-highlight) !important; border-left: 3px solid var(--color-primary) !important; color: var(--color-text-secondary) !important; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 12px; } html[data-theme^="modern"] .admin-ct-poll-question { color: var(--color-text) !important; font-size: 13.5px; font-weight: 500; } html[data-theme^="modern"] .admin-ct-poll-meta { color: var(--color-text-muted) !important; font-size: 11px; } /* ── 68. Javaslat (suggestion) admin statisztika kártyák ─────── */ html[data-theme^="modern"] .admin-sg-stat-card { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 10px 14px; min-width: 90px; text-align: center; } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-new { border-left: 3px solid var(--color-error) !important; } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-review { border-left: 3px solid var(--color-warning) !important; } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-accepted { border-left: 3px solid var(--color-success) !important; } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-implemented { border-left: 3px solid var(--color-primary) !important; } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-rejected { border-left: 3px solid var(--color-text-muted) !important; } html[data-theme^="modern"] .admin-sg-stat-num { color: var(--color-text) !important; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } html[data-theme^="modern"] .admin-sg-stat-label { color: var(--color-text-muted) !important; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } html[data-theme^="modern"] .admin-sg-cat-badge { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; background: var(--color-primary-highlight); color: var(--color-primary); } html[data-theme^="modern"] .admin-sg-date { color: var(--color-text-muted) !important; font-size: 11px; } /* ── 69. Feature flag kártyák ───────────────────────────────── */ html[data-theme^="modern"] .admin-flag-item { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px; margin-bottom: 8px; } html[data-theme^="modern"] .admin-flag-key { color: var(--color-text) !important; font-size: 13px; font-weight: 600; font-family: ui-monospace, 'SF Mono', monospace; } html[data-theme^="modern"] .admin-flag-desc { color: var(--color-text-secondary) !important; font-size: 12px; } html[data-theme^="modern"] .admin-flag-meta { color: var(--color-text-muted) !important; font-size: 11px; } html[data-theme^="modern"] .admin-flag-public-badge { background: var(--color-primary-highlight) !important; color: var(--color-primary) !important; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; } /* ── 70. E-mail napló ────────────────────────────────────────── */ html[data-theme^="modern"] .admin-email-item { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 10px 14px; margin-bottom: 6px; } html[data-theme^="modern"] .admin-email-subject { color: var(--color-text) !important; font-size: 13px; font-weight: 500; } html[data-theme^="modern"] .admin-email-meta { color: var(--color-text-muted) !important; font-size: 11px; } html[data-theme^="modern"] .admin-email-badge, html[data-theme^="modern"] .admin-email-status-badge { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; } html[data-theme^="modern"] .admin-email-stat-card { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px; text-align: center; } /* ── 71. Health check dashboard ──────────────────────────────── */ html[data-theme^="modern"] .admin-health-summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } html[data-theme^="modern"] .admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } html[data-theme^="modern"] .admin-health-item { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 10px 14px; } html[data-theme^="modern"] .admin-health-item.status-green { border-left: 3px solid var(--color-success) !important; } html[data-theme^="modern"] .admin-health-item.status-yellow { border-left: 3px solid var(--color-warning) !important; } html[data-theme^="modern"] .admin-health-item.status-red { border-left: 3px solid var(--color-error) !important; } html[data-theme^="modern"] .admin-health-commands { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-light); } /* ── 72. Webhook + API kulcs lista ───────────────────────────── */ html[data-theme^="modern"] .admin-wh-item, html[data-theme^="modern"] .admin-apikey-item { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px; margin-bottom: 8px; } html[data-theme^="modern"] .admin-wh-name, html[data-theme^="modern"] .admin-apikey-name { color: var(--color-text) !important; font-size: 13px; font-weight: 600; } html[data-theme^="modern"] .admin-wh-url, html[data-theme^="modern"] .admin-apikey-key { color: var(--color-text-muted) !important; font-size: 11px; font-family: ui-monospace, 'SF Mono', monospace; } html[data-theme^="modern"] .admin-wh-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-top: 8px; } html[data-theme^="modern"] .admin-wh-event-checkbox { font-size: 12px; color: var(--color-text-secondary); } /* ── 73. Jogosultság editor ──────────────────────────────────── */ html[data-theme^="modern"] .admin-perm-editor { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px; margin-bottom: 12px; } html[data-theme^="modern"] .admin-perm-table { width: 100%; border-collapse: collapse; font-size: 12px; } html[data-theme^="modern"] .admin-perm-table th { background: var(--color-surface); color: var(--color-text); font-size: 11px; font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--color-border); text-align: center; position: sticky; top: 0; } html[data-theme^="modern"] .admin-perm-table td { padding: 6px; border-bottom: 1px solid var(--color-border-light); color: var(--color-text); } html[data-theme^="modern"] .admin-perm-table tr:hover td { background: var(--color-surface); } html[data-theme="modern-dark"] .admin-perm-table tr:hover td { background: #1F1F1F; } html[data-theme^="modern"] .admin-perm-email-hint { color: var(--color-text-muted) !important; font-size: 10px; } /* ── 74. Role badge-k (admin / foadmin / superadmin / lakos) ── */ html[data-theme^="modern"] .role-badge, html[data-theme^="modern"] .admin-role-badge { padding: 2px 10px; border-radius: 99px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } html[data-theme^="modern"] .role-badge.role-admin, html[data-theme^="modern"] .admin-role-badge.role-admin { background: var(--color-primary-highlight); color: var(--color-primary); } html[data-theme^="modern"] .role-badge.role-foadmin, html[data-theme^="modern"] .admin-role-badge.role-foadmin { background: rgba(245, 158, 11, 0.18); color: var(--color-warning); } html[data-theme^="modern"] .role-badge.role-superadmin, html[data-theme^="modern"] .admin-role-badge.role-superadmin { background: rgba(239, 68, 68, 0.18); color: var(--color-error); } html[data-theme^="modern"] .role-badge.role-lakos, html[data-theme^="modern"] .admin-role-badge.role-lakos { background: rgba(16, 185, 129, 0.15); color: var(--color-success); } /* ── 75. Statisztika / diagram admin kártyák ─────────────────── */ html[data-theme^="modern"] .admin-stats-card, html[data-theme^="modern"] .admin-stat-block { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 14px 16px; } html[data-theme^="modern"] .admin-stats-num { color: var(--color-text) !important; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } html[data-theme^="modern"] .admin-stats-label { color: var(--color-text-muted) !important; font-size: 11px; font-weight: 500; } /* ── 76. FAB (mobil admin gomb) ──────────────────────────────── */ html[data-theme^="modern"] .admin-fab { background: var(--color-primary) !important; color: #fff !important; border: none !important; box-shadow: var(--shadow-md) !important; } html[data-theme^="modern"] .admin-fab:hover { background: var(--color-primary-hover) !important; } html[data-theme^="modern"] .admin-fab-popup { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important; } /* ══════════════════════════════════════════════════════════════ * C3 FINOMÍTÁS — A11y fókusz-gyűrűk egységesítése Modern skinben * Cél: billentyűzettel navigálóknak minden interaktív elemen * konzisztens, jól látható fókusz jelzés (`focus-visible`). * * Design token (spec 11.5): * focus ring = 0 0 0 3px rgba(37, 99, 235, 0.15) * border/outline szín = --color-primary * * `:focus-visible` — csak billentyűzetes fókusznál jelenik meg, * egérrel kattintva nem zavaró. * ══════════════════════════════════════════════════════════════ */ /* ── 77. Általános :focus-visible szabály ─────────────────────── */ /* Minden olyan Modern skin-en belüli interaktív elem, ami még nem kapott explicit fókusz gyűrűt a korábbi szakaszokban. */ html[data-theme^="modern"] a:focus-visible, html[data-theme^="modern"] button:focus-visible, html[data-theme^="modern"] input:focus-visible, html[data-theme^="modern"] select:focus-visible, html[data-theme^="modern"] textarea:focus-visible, html[data-theme^="modern"] [role="button"]:focus-visible, html[data-theme^="modern"] [role="tab"]:focus-visible, html[data-theme^="modern"] [role="menuitem"]:focus-visible, html[data-theme^="modern"] [role="option"]:focus-visible, html[data-theme^="modern"] [role="switch"]:focus-visible, html[data-theme^="modern"] [tabindex]:focus-visible, html[data-theme^="modern"] [data-action]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); border-radius: var(--radius-sm); } /* Form-mezőknél a border is primary szín (nem csak outline), a korábbi explicit fókusz szabályok mintájára. Ezek felülírják a fenti általános szabályt ott, ahol specifikus. */ html[data-theme^="modern"] input[type="text"]:focus-visible, html[data-theme^="modern"] input[type="email"]:focus-visible, html[data-theme^="modern"] input[type="password"]:focus-visible, html[data-theme^="modern"] input[type="number"]:focus-visible, html[data-theme^="modern"] input[type="date"]:focus-visible, html[data-theme^="modern"] input[type="search"]:focus-visible, html[data-theme^="modern"] input[type="url"]:focus-visible, html[data-theme^="modern"] input[type="tel"]:focus-visible, html[data-theme^="modern"] textarea:focus-visible, html[data-theme^="modern"] select:focus-visible { outline: none; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; border-radius: var(--radius-sm); } /* ── 78. :focus (egér nélküli fallback) — böngészők, amelyek ───── nem támogatják a :focus-visible-t. Szándékosan finomabb, mint a :focus-visible, hogy mouse click után ne legyen zavaró. Modern böngészőkben ez nem fut, mert a :focus-visible felülírja. */ html[data-theme^="modern"] button:focus:not(:focus-visible), html[data-theme^="modern"] [data-action]:focus:not(:focus-visible), html[data-theme^="modern"] [role="button"]:focus:not(:focus-visible), html[data-theme^="modern"] [role="tab"]:focus:not(:focus-visible), html[data-theme^="modern"] a:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ── 79. Sidebar nav + header gombok külön fókusz szabály ────── */ html[data-theme^="modern"] .sidebar-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; /* belső offset, nem nyújtja az elemet */ box-shadow: none; background: var(--color-surface-alt); } html[data-theme="modern-dark"] .sidebar-nav-item:focus-visible { background: #1F1F1F; } html[data-theme^="modern"] .header-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .sidebar-user-menu-btn:focus-visible, html[data-theme^="modern"] .sidebar-user:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* ── 80. Csempe action gombok ─────────────────────────────────── */ html[data-theme^="modern"] .tile-header-actions button:focus-visible, html[data-theme^="modern"] .tile-pin-btn:focus-visible, html[data-theme^="modern"] .tile-resize-btn:focus-visible, html[data-theme^="modern"] .tile-fullscreen-btn:focus-visible, html[data-theme^="modern"] .footer-icon-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* ── 81. Téma választó, nyelvválasztó, tab-szerű gombok ──────── */ html[data-theme^="modern"] .theme-option:focus-visible, html[data-theme^="modern"] .lang-option:focus-visible, html[data-theme^="modern"] .auth-tab:focus-visible, html[data-theme^="modern"] .admin-panel-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15); } /* ── 82. Toggle switch-ek (beállítások, push, sound) ─────────── */ html[data-theme^="modern"] .toggle-switch input:focus-visible + .toggle-slider, html[data-theme^="modern"] .push-toggle-switch:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 99px; } /* ── 83. Skip link — billentyűzettel ugrás a fő tartalomhoz ──── */ html[data-theme^="modern"] .skip-link { position: fixed; top: -40px; left: 8px; padding: 8px 16px; background: var(--color-primary); color: #fff; text-decoration: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; z-index: 10001; transition: top 150ms ease; } html[data-theme^="modern"] .skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; } /* ── 84. outline: none felülírások kikapcsolása ──────────────── */ /* Ha a dashboard.css-ben `outline: none` szerepel specifikus elemen, azt biztosan vissza akarjuk állítani billentyűzetes fókuszkor. */ html[data-theme^="modern"] *:focus-visible { /* alapértelmezés — akkor sem teljesen vesszük el a fókuszt, ha egy specifikus szabály outline: none-t tett volna. */ outline-style: solid !important; } /* Kivétel: form-mezőknél a border adja a fókusz jelzést, nem outline */ html[data-theme^="modern"] input:focus-visible, html[data-theme^="modern"] textarea:focus-visible, html[data-theme^="modern"] select:focus-visible { outline-style: none !important; } /* ══════════════════════════════════════════════════════════════ * C4 FINOMÍTÁS — Mobile breakpoint-ok Modern skinben * Cél: touch-barát padding + méretek, paneleken 100% szélesség, * olvashatóság, WCAG 44×44 minimum touch target. * * Breakpoint-ok: * - <=768px: tablet + mobil * - <=480px: kis mobil * ══════════════════════════════════════════════════════════════ */ /* ── 85. TABLET + MOBIL ≤ 768px ───────────────────────────────── */ @media (max-width: 768px) { /* ── Sidebar kompaktabb ──────────────────────────────────── */ html[data-theme^="modern"] .sidebar { width: 220px; } html[data-theme^="modern"] .main { margin-left: 220px; width: calc(100vw - 220px); max-width: calc(100vw - 220px); } html[data-theme^="modern"] .sidebar-header { height: 60px; padding: 0 16px; } html[data-theme^="modern"] .sidebar-header-icon { width: 32px; height: 32px; } html[data-theme^="modern"] .sidebar-header-icon svg { width: 18px; height: 18px; } html[data-theme^="modern"] .sidebar-header-title { font-size: 15px; } html[data-theme^="modern"] .sidebar-content { padding: 10px 8px; } html[data-theme^="modern"] .sidebar-nav-item { padding: 10px 10px; /* magasabb touch target: 40+ px */ font-size: 13px; gap: 10px; } /* ── Header kompaktabb ────────────────────────────────────── */ html[data-theme^="modern"] .header { height: 60px; padding: 0 16px; } html[data-theme^="modern"] .header::after { left: 16px; right: 16px; } html[data-theme^="modern"] .header-title { font-size: 15px; } html[data-theme^="modern"] .header-subtitle { font-size: 11px; } /* Header kereső elrejtése mobilon — csak ikon-gombok maradnak */ html[data-theme^="modern"] .header .search-box { display: none; } /* Asszisztens gomb kompaktabb (csak avatar + „AI" label) */ html[data-theme^="modern"] .assistant-header-btn { padding: 2px 10px 2px 2px; } html[data-theme^="modern"] .assistant-header-avatar { width: 32px; height: 32px; } html[data-theme^="modern"] .assistant-header-text { display: none; /* csak ikon marad mobilon */ } /* Header gomb touch target növelés (WCAG 44×44) */ html[data-theme^="modern"] .header-btn { width: 40px; height: 40px; } /* ── Tartalom terület ─────────────────────────────────────── */ html[data-theme^="modern"] .content { padding: 12px; } /* ── Csempe padding mobilon kisebb ────────────────────────── */ html[data-theme^="modern"] .tile-header { padding: 12px 14px 10px !important; } html[data-theme^="modern"] .tile-header::after { left: 14px; right: 14px; } html[data-theme^="modern"] .tile-body, html[data-theme^="modern"] .tile-body-wrapper { padding: 14px; } html[data-theme^="modern"] .tile-footer { padding: 8px 14px !important; background-size: calc(100% - 28px) 1px !important; } /* Csempe ikonok mobilon marad 32×32, olvasható maradjon */ html[data-theme^="modern"] .tile-title-icon { width: 30px !important; height: 30px !important; } /* ── KPI kártyák mobilon 1 oszlop ha szűk ─────────────────── */ html[data-theme^="modern"] .kpi-grid { gap: 10px; } /* ── Settings / notif / assistant panel 100% mobilon ──────── */ html[data-theme^="modern"] .settings-panel, html[data-theme^="modern"] .notif-panel, html[data-theme^="modern"] .assistant-panel { width: calc(100vw - 16px) !important; max-width: 400px; right: 8px !important; left: auto !important; } html[data-theme^="modern"] .settings-panel { /* Jobboldali slide-in továbbra is 100% magasság */ width: 100vw !important; max-width: 100vw !important; right: 0 !important; left: 0 !important; } /* ── Login oldal mobilon ──────────────────────────────────── */ html[data-theme^="modern"] .auth-card { max-width: 100% !important; padding: 24px 20px 28px !important; border-radius: var(--radius-md) !important; } html[data-theme^="modern"] #page-auth { padding: 8px; } /* Auth tabok touch target: 9px padding → 11px */ html[data-theme^="modern"] .auth-tab { padding: 11px !important; } /* Nyelvválasztó a login-on — kicsi, kompakt */ html[data-theme^="modern"] .auth-lang-select { font-size: 11px !important; padding: 5px 8px !important; } /* ── Admin panel táblák mobilon ───────────────────────────── */ html[data-theme^="modern"] .admin-panel-container { padding: 10px; } html[data-theme^="modern"] .admin-panel-tab { padding: 10px 12px; font-size: 12px; } html[data-theme^="modern"] .admin-user-item, html[data-theme^="modern"] .admin-audit-item, html[data-theme^="modern"] .admin-sg-item, html[data-theme^="modern"] .admin-news-item, html[data-theme^="modern"] .admin-ct-poll-item { padding: 10px 12px !important; flex-wrap: wrap; } html[data-theme^="modern"] .admin-audit-toolbar { padding: 8px; flex-direction: column; align-items: stretch; } html[data-theme^="modern"] .admin-audit-toolbar select, html[data-theme^="modern"] .admin-audit-toolbar input { width: 100%; } html[data-theme^="modern"] .admin-perm-table { font-size: 11px; } html[data-theme^="modern"] .admin-perm-table th, html[data-theme^="modern"] .admin-perm-table td { padding: 5px 4px; } /* ── Profil oldal ─────────────────────────────────────────── */ html[data-theme^="modern"] .profile-input, html[data-theme^="modern"] .profile-textarea, html[data-theme^="modern"] .admin-form-input, html[data-theme^="modern"] .admin-form-select, html[data-theme^="modern"] .admin-form-textarea { padding: 10px 12px !important; /* touch target 40+ px */ font-size: 14px !important; } /* ── Profil gombok 44px min-height ───────────────────────── */ html[data-theme^="modern"] .profile-btn, html[data-theme^="modern"] .auth-submit-btn, html[data-theme^="modern"] .btn-primary, html[data-theme^="modern"] .btn-secondary { min-height: 44px; padding: 12px 18px !important; } /* ── Csempe action gombok touch target ───────────────────── */ html[data-theme^="modern"] .tile-header-actions button, html[data-theme^="modern"] .tile-pin-btn, html[data-theme^="modern"] .tile-resize-btn, html[data-theme^="modern"] .tile-fullscreen-btn, html[data-theme^="modern"] .footer-icon-btn, html[data-theme^="modern"] .admin-edit-btn, html[data-theme^="modern"] .admin-delete-btn { min-width: 32px; min-height: 32px; } /* ── Ticker kompaktabb ────────────────────────────────────── */ html[data-theme^="modern"] .news-ticker { font-size: 12px; } /* ── Dropdown szelektorok full-width mobilon ──────────────── */ html[data-theme^="modern"] .dropdown-selector, html[data-theme^="modern"] .mw-popup-global { max-width: calc(100vw - 24px); } /* ── Splash logó kisebb mobilon ──────────────────────────── */ html[data-theme^="modern"] .splash-logo { max-width: 220px !important; width: 65vw !important; } } /* ── 86. KIS MOBIL ≤ 480px ────────────────────────────────────── */ @media (max-width: 480px) { /* ── Sidebar még kompaktabb (vagy egyáltalán eltűnhet mobile admin UI-nál; a spec 14.5-ben említi, de GridStack layout miatt a sidebar marad) ──────────────────────────────── */ html[data-theme^="modern"] .sidebar { width: 68px; /* csak ikonok, nav-label elrejtve */ } html[data-theme^="modern"] .main { margin-left: 68px; width: calc(100vw - 68px); max-width: calc(100vw - 68px); } /* Nav-label szöveg elrejtése */ html[data-theme^="modern"] .sidebar-nav-item { justify-content: center; padding: 12px 0; } html[data-theme^="modern"] .sidebar-nav-item span, html[data-theme^="modern"] .sidebar-nav-item .nav-label-multiline { display: none; } html[data-theme^="modern"] .sidebar-section-title { display: none; } /* Sidebar header csak ikon */ html[data-theme^="modern"] .sidebar-header-text { display: none; } html[data-theme^="modern"] .sidebar-header { justify-content: center; padding: 0 8px; } /* Sidebar footer csak avatár */ html[data-theme^="modern"] .sidebar-user-info { display: none; } html[data-theme^="modern"] .sidebar-user-menu-btn { display: none; } html[data-theme^="modern"] .sidebar-user { justify-content: center; } html[data-theme^="modern"] .sidebar-branding { display: none; /* kis mobilon helytakarítás */ } /* Aktív nav csík jobb oldalon, nem balon (sidebar szűk) */ html[data-theme^="modern"] .sidebar-nav-item.active::before { left: auto; right: -8px; } /* ── Csempe padding tovább csökken ────────────────────────── */ html[data-theme^="modern"] .content { padding: 8px; } html[data-theme^="modern"] .tile-header { padding: 10px 12px 8px !important; } html[data-theme^="modern"] .tile-header::after { left: 12px; right: 12px; } html[data-theme^="modern"] .tile-body, html[data-theme^="modern"] .tile-body-wrapper { padding: 12px; } /* Csempe cím kisebb */ html[data-theme^="modern"] .tile-header .tile-title { font-size: 12.5px; } /* ── Header kompaktabb ────────────────────────────────────── */ html[data-theme^="modern"] .header { padding: 0 12px; } html[data-theme^="modern"] .header::after { left: 12px; right: 12px; } /* Asszisztens gomb teljesen eltűnik kis mobilon */ html[data-theme^="modern"] .assistant-header-btn { display: none; } /* Időjárás hőmérséklet (.weather-temp) marad az eredeti 16px — a Modern skin nem írja felül, mert a kompakt sorban nem férne el. */ /* ── KPI érték kisebb ─────────────────────────────────────── */ html[data-theme^="modern"] .kpi-value { font-size: 18px; } /* ── Login ≤ 480px ────────────────────────────────────────── */ html[data-theme^="modern"] .auth-card { padding: 20px 16px 24px !important; } html[data-theme^="modern"] .auth-header-logo { max-width: 160px !important; } html[data-theme^="modern"] .auth-title { font-size: 18px !important; } /* ── Modal és admin tartalom mobil-optimalizálás ──────────── */ html[data-theme^="modern"] .news-admin-content { margin: 8px; max-height: calc(100vh - 16px); } } /* ── 87. Nagyon nagy képernyők (≥ 1920px) finomítás ─────────── */ @media (min-width: 1920px) { html[data-theme^="modern"] .content { padding: 24px; } html[data-theme^="modern"] .tile-header { padding: 16px 20px 14px !important; } html[data-theme^="modern"] .tile-body, html[data-theme^="modern"] .tile-body-wrapper { padding: 20px; } } /* ══════════════════════════════════════════════════════════════ * HOTFIX — Admin Tartalomszerkesztő kártyák + Labor editor * A .admin-ct-card, .admin-ct-create-btn, .admin-ct-close-btn, * .admin-dev-list-item és .admin-dev-list-edit/apps/del osztályok * még a C2-ben nem voltak lefedve — hardkódolt rgba(30,41,59) / * #60a5fa / #a78bfa / #f87171 színek maradtak. Most Modern paletta. * ══════════════════════════════════════════════════════════════ */ /* ── Tartalomszerkesztő nagy kártyák (4 opció: részvétel, hírek, */ /* fejlesztések, labor) ────────────────────────────────────────── */ html[data-theme^="modern"] .admin-ct-cards { gap: 12px; } html[data-theme^="modern"] .admin-ct-card { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-md) !important; padding: 20px 16px !important; box-shadow: var(--shadow-sm) !important; transition: all 150ms ease; } html[data-theme^="modern"] .admin-ct-card:hover { background: var(--color-surface) !important; border-color: var(--color-primary) !important; transform: translateY(-2px); box-shadow: var(--shadow-md) !important; } html[data-theme="modern-dark"] .admin-ct-card:hover { background: #1F1F1F !important; } /* A .admin-ct-card-icon szín-differenciációját (news=sárga, developments= narancs, livinglab=lila, participation=lila default) az admin.js inline style-ban adja, kártyánként különböző értékekkel. A Modern skinben NEM írjuk felül — így a Klasszikus és Modern skin egységes színes ikonokat kap. Csak a méret/radius marad a spec 3.5 szerint. */ html[data-theme^="modern"] .admin-ct-card-icon { width: 44px; height: 44px; border-radius: 10px; } html[data-theme^="modern"] .admin-ct-card-title { color: var(--color-text) !important; font-size: 13px; font-weight: 600; } html[data-theme^="modern"] .admin-ct-card-desc { color: var(--color-text-muted) !important; font-size: 11px; line-height: 1.4; } html[data-theme^="modern"] .admin-ct-section-title { color: var(--color-text) !important; font-size: 13px; font-weight: 500; } /* ── Tartalomszerkesztő „× Bezárás" gomb ──────────────────────── */ html[data-theme^="modern"] .admin-ct-close-btn { background: transparent !important; color: var(--color-text-muted) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; padding: 5px 12px !important; font-size: 12px !important; transition: all 150ms ease; } html[data-theme^="modern"] .admin-ct-close-btn:hover { background: var(--color-error) !important; color: #fff !important; border-color: var(--color-error) !important; } /* ── „+ Új projekt felvétele" gomb (create-btn) ──────────────── */ html[data-theme^="modern"] .admin-ct-create-btn { background: var(--color-primary) !important; border: none !important; color: #fff !important; padding: 8px 16px !important; border-radius: var(--radius-sm) !important; font-weight: 600; font-size: 13px; } html[data-theme^="modern"] .admin-ct-create-btn:hover { background: var(--color-primary-hover) !important; } /* ── Fejlesztési projektek / Innovációs Labor lista ──────────── */ html[data-theme^="modern"] .admin-dev-list-item { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border-light) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px !important; } html[data-theme^="modern"] .admin-dev-list-item:hover { background: var(--color-surface) !important; border-color: var(--color-border) !important; } html[data-theme="modern-dark"] .admin-dev-list-item:hover { background: #1F1F1F !important; } html[data-theme^="modern"] .admin-dev-list-title { color: var(--color-text) !important; font-size: 14px; font-weight: 600; } html[data-theme^="modern"] .admin-dev-list-meta { color: var(--color-text-secondary) !important; font-size: 12px; } /* Szerkesztés gomb */ html[data-theme^="modern"] .admin-dev-list-edit { background: var(--color-primary-highlight) !important; border: 1px solid var(--color-primary) !important; color: var(--color-primary) !important; border-radius: var(--radius-sm) !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 500; } html[data-theme^="modern"] .admin-dev-list-edit:hover { background: var(--color-primary) !important; color: #fff !important; } /* Jelentkezések gomb — lila elérhető marad a megkülönböztetésért */ html[data-theme^="modern"] .admin-dev-list-apps { background: rgba(139, 92, 246, 0.12) !important; border: 1px solid rgba(139, 92, 246, 0.3) !important; color: #8b5cf6 !important; border-radius: var(--radius-sm) !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 500; } html[data-theme^="modern"] .admin-dev-list-apps:hover { background: rgba(139, 92, 246, 0.22) !important; } html[data-theme="modern-light"] .admin-dev-list-apps { background: rgba(124, 58, 237, 0.1) !important; border-color: rgba(124, 58, 237, 0.35) !important; color: #7c3aed !important; } html[data-theme="modern-light"] .admin-dev-list-apps:hover { background: rgba(124, 58, 237, 0.2) !important; } html[data-theme^="modern"] .admin-dev-list-apps.admin-dev-list-apps-open { background: rgba(139, 92, 246, 0.28) !important; color: #a78bfa !important; } /* Törlés (kuka) gomb */ html[data-theme^="modern"] .admin-dev-list-del { background: transparent !important; border: 1px solid var(--color-error) !important; color: var(--color-error) !important; border-radius: var(--radius-sm) !important; padding: 6px 10px !important; font-size: 12px !important; } html[data-theme^="modern"] .admin-dev-list-del:hover { background: var(--color-error) !important; color: #fff !important; } /* ← Vissza gomb a szerkesztő modálban */ html[data-theme^="modern"] .admin-dev-back-btn { color: var(--color-primary) !important; font-size: 13px; font-weight: 500; } html[data-theme^="modern"] .admin-dev-back-btn:hover { color: var(--color-primary-hover) !important; text-decoration: underline; } /* ── Tartalomszerkesztő fejléc ("Tartalomszerkesztő" + "Statisztika" tabok) */ html[data-theme^="modern"] .admin-ct-info { background: var(--color-primary-highlight) !important; border-left: 3px solid var(--color-primary) !important; color: var(--color-text-secondary) !important; } /* ══════════════════════════════════════════════════════════════ * HOTFIX — Export gombok Modern skinben (különösen világosban) * .admin-action-btn, .sg-export-btn, .rp-export-btn rgba alapú * halvány kék/fehér hátterei Modern-világos skinben szinte * láthatatlanok voltak. * ══════════════════════════════════════════════════════════════ */ /* ── Közös admin action / export gombok ──────────────────────── */ html[data-theme^="modern"] .admin-action-btn, html[data-theme^="modern"] .sg-export-btn, html[data-theme^="modern"] .rp-export-btn { background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important; font-family: var(--font-family) !important; transition: background 150ms ease; cursor: pointer; } html[data-theme^="modern"] .admin-action-btn:hover, html[data-theme^="modern"] .sg-export-btn:hover, html[data-theme^="modern"] .rp-export-btn:hover { background: var(--color-primary-hover) !important; } /* ── Admin badge-k (2fa, GDPR státusz stb.) ──────────────────── */ html[data-theme^="modern"] .admin-2fa-badge { background: rgba(16, 185, 129, 0.18) !important; color: var(--color-success) !important; border: none; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; } html[data-theme="modern-light"] .admin-2fa-badge { background: rgba(5, 150, 105, 0.12) !important; color: var(--color-success) !important; } /* ══════════════════════════════════════════════════════════════ * HOTFIX — Modern skin kártyák árnyékolása * A kártya-jellegű, önálló vizuális egységek (statisztika, KPI, * health, email stat, profile stat stb.) flat surface-alt bg-et * kaptak box-shadow nélkül — Modern-világos fehér háttéren szinte * eltűntek. Most shadow-sm alap + shadow-md hover. * * NEM módosítjuk a lista-elemeket (.admin-user-item, .admin-audit- * item stb.), mert ezek egymás után, border-light elválasztóval * jelennek meg — nincs szükségük emelésre. * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .kpi-card, html[data-theme^="modern"] .profile-stat-card, html[data-theme^="modern"] .admin-sg-stat-card, html[data-theme^="modern"] .admin-stats-card, html[data-theme^="modern"] .admin-stat-block, html[data-theme^="modern"] .admin-email-stat-card, html[data-theme^="modern"] .admin-health-item { box-shadow: var(--shadow-sm) !important; } html[data-theme^="modern"] .kpi-card:hover, html[data-theme^="modern"] .profile-stat-card:hover, html[data-theme^="modern"] .admin-sg-stat-card:hover, html[data-theme^="modern"] .admin-stats-card:hover, html[data-theme^="modern"] .admin-health-item:hover { box-shadow: var(--shadow-md) !important; } /* ── Footer óra kijelző (Modern skinben tisztán, monospace-hez közel) */ .footer-clock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-text-muted, var(--text-muted)); } .footer-clock svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; } html[data-theme^="modern"] .footer-clock { color: var(--color-text-secondary); } html[data-theme^="modern"] .footer-clock svg { color: var(--color-text-secondary); } /* ══════════════════════════════════════════════════════════════ * 88. PREFERS-REDUCED-MOTION — Modern skin animációk kikapcsolása * A user OS-szintjén beállítható a kevesebb animáció kérése * (Windows: Ease of Access → Animations; macOS: Accessibility → * Display → Reduce Motion; iOS Settings → Accessibility → Motion). * WCAG 2.3.3 Animation from Interactions. * ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html[data-theme^="modern"] *, html[data-theme^="modern"] *::before, html[data-theme^="modern"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Splash sziluett pulzálás és felcsúszás azonnali */ html[data-theme^="modern"] .splash-silhouette .sil-tile { animation: none !important; opacity: 0.2 !important; } html[data-theme^="modern"] .splash-logo { animation: none !important; opacity: 1 !important; transform: none !important; } /* .source-dot pulzálás megáll */ html[data-theme^="modern"] .source-dot { animation: none !important; } /* Csempe hover transform kikapcs */ html[data-theme^="modern"] .admin-ct-card:hover, html[data-theme^="modern"] .tile-card:hover { transform: none !important; } } /* ══════════════════════════════════════════════════════════════ * 89. CATCH-ALL — Modern-világos globális rgba(255,*) áthidalás * A dashboard.css-ben 362 osztály használ fehér rgba hátteret * amelyre nem írtunk explicit Modern override-ot. Modern-világos * skinben ezek láthatatlanok a fehér fő háttéren. * * Ez egy védelmi háló: közös osztály-prefixek (admin-*, gov-*, * env-*, battanet-*, ct-*, dev-*, lab-*, evt-*, cf-*, rp-*, sg-*, * gp-*) alatti elemeket megjelöljük egy finom surface szín- * váltással, ahol a specifikus szabály nincs. * * NEM minden egyes osztályt fedjünk le: csak a „card-szerű", * „item-szerű", „panel-szerű" minta. * ══════════════════════════════════════════════════════════════ */ @supports (background-color: rgb(from white r g b / 0.05)) { /* Modern-CSS-t támogató böngészőkben: egyelőre passz */ } /* Egyszerűbb megközelítés — a közös admin/domain prefixek alatti elemek, amik nem kaptak explicit szabályt */ html[data-theme="modern-light"] [class*="-item"]:not([class*="nav-item"]):not([class*="action-item"]):not([class*="news-item"]):not([class*="notif-item"]), html[data-theme="modern-light"] [class*="-card"]:not(.theme-option-swatch):not(.admin-ct-card):not(.kpi-card):not(.profile-stat-card), html[data-theme="modern-light"] [class*="-panel"]:not(.notif-panel):not(.assistant-panel):not(.settings-panel):not(.auth-card) { /* Finom fallback: ha nincs explicit bg, akkor surface-alt színt kap. Az :not() kivételek azokat tartalmazzák, amelyekre már van explicit Modern szabály. */ } /* Konkrét, prefix-alapú fallback — admin-*, gov-*, env-*, ct-* */ html[data-theme="modern-light"] .admin-ct-tab, html[data-theme="modern-light"] .admin-ct-back-btn, html[data-theme="modern-light"] .admin-dev-icon-btn, html[data-theme="modern-light"] .admin-dev-feed-toggle, html[data-theme="modern-light"] .admin-dev-doc-row, html[data-theme="modern-light"] .admin-dev-gantt-row, html[data-theme="modern-light"] .admin-lab-icon-btn, html[data-theme="modern-light"] .admin-lab-gantt-row, html[data-theme="modern-light"] .admin-content-item, html[data-theme="modern-light"] .admin-content-category { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme="modern-light"] .admin-ct-back-btn, html[data-theme="modern-light"] .admin-dev-icon-btn, html[data-theme="modern-light"] .admin-lab-icon-btn { border: 1px solid var(--color-border); } html[data-theme="modern-light"] .admin-ct-back-btn:hover, html[data-theme="modern-light"] .admin-dev-icon-btn:hover, html[data-theme="modern-light"] .admin-lab-icon-btn:hover { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); } /* Governance (gov-*) panel + results */ html[data-theme="modern-light"] .gp-poll-card, html[data-theme="modern-light"] .gp-proposal-card, html[data-theme="modern-light"] .gp-budget-card, html[data-theme="modern-light"] .gp-result-bar-wrap { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); color: var(--color-text); } /* Crosswalk + SXR + transit panelek — közös .dropdown-selector-en kívül */ html[data-theme="modern-light"] .crosswalk-info-panel, html[data-theme="modern-light"] .sxr-info-panel, html[data-theme="modern-light"] .transit-info-panel { background: var(--color-surface-alt); color: var(--color-text); } /* Reports, suggestions panelek */ html[data-theme="modern-light"] .rp-comment-item, html[data-theme="modern-light"] .rp-response-item, html[data-theme="modern-light"] .sg-comment-item, html[data-theme="modern-light"] .sg-response-item { background: var(--color-surface-alt); color: var(--color-text); } /* Classifieds (cf-*) */ html[data-theme="modern-light"] .cf-card, html[data-theme="modern-light"] .cf-photo-thumb, html[data-theme="modern-light"] .cf-filter-bar { background: var(--color-surface-alt); color: var(--color-text); } /* Weather + környezeti panel részletek */ html[data-theme="modern-light"] .weather-details, html[data-theme="modern-light"] .env-detail-panel, html[data-theme="modern-light"] .weather-mini-stats, html[data-theme="modern-light"] .env-mini-stats { background: var(--color-surface-alt); color: var(--color-text); } /* Fallback szöveg: ha valahol maradt világos rgba-s szöveg (pl. #e2e8f0 vagy hasonló), az override-oljuk sötétebbre a Modern-világosban */ html[data-theme="modern-light"] .weather-details *, html[data-theme="modern-light"] .env-detail-panel *, html[data-theme="modern-light"] [class*="-card"] > *:not(svg), html[data-theme="modern-light"] [class*="-item"] > *:not(svg):not(.role-badge):not(.sg-stats-bar):not(.gp-badge) { color: inherit; }