/* ================================================================= * portal/css/portal.css * Styly portálu (index.php) + sdílené login styly + sjednocený horní pruh * (.app-topbar) + Delta launcher. * * Téma: tmavé (default) / světlé (přepínač v topbaru = data-theme="light" * na ). Barvy se řídí CSS proměnnými v :root, světlá varianta je * override v [data-theme="light"]. Žádné hardcoded barvy v selektorech - * vše přes var(--*). * * Pozn.: DevExtreme používá vlastní stylesheet (dx.material.blue.dark.css). * Ten zůstává tmavý i ve světlém tématu (přepnutí na light variantu by * vyžadovalo úpravu importu v každém modulu - V2 vylepšení). * ================================================================= */ /* ----- CSS proměnné: tmavé téma (default) -------------------------- */ :root { /* Pozadí */ --bg: #303030; /* hlavní body bg */ --bg-elevated: #262626; /* topbar, header */ --bg-card: #3a3a3a; /* portal cards, login card */ --bg-card-hover: #444; --bg-popover: #2b2b2b; /* launcher popover */ --bg-input: #2a2a2a; /* form inputs (login) */ --bg-tag: rgba(255,255,255,0.06); /* Text */ --text: #fff; /* hlavní text */ --text-strong: #fff; /* titulky */ --text-muted: #b8b8b8; /* sekundární */ --text-faint: #999; --text-subtle: #888; --text-light: #ddd; /* Hranice */ --border: #444; --border-soft: #3c3c3c; --border-input: #555; --border-strong: #4a4a4a; /* Akcent (modrá Hanák/portal) */ --accent: #6cb2f0; --accent-hover: #99cfff; --accent-soft: rgba(108, 182, 255, 0.08); --accent-soft-hover: rgba(108, 182, 255, 0.14); --accent-focus-ring: rgba(108, 178, 240, 0.25); /* Hover overlay */ --hover-overlay: rgba(255,255,255,0.06); --hover-overlay-strong:rgba(255,255,255,0.14); /* Stíny */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.35); --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5); --logo-shadow: rgba(0, 0, 0, 0.4); /* Accent řádků v gridech (poznámka / status / pozor / demont / special). V tmavém tématu = tlumené tóny na tmavém podkladu. V light tématu se převádí na pastelové bg s tmavým textem (definováno v [data-theme="light"]). Tyhle vars se používají v zakazky/css/style.css (a kdekoli jinde, kde chceš stejné semantické zvýraznění). */ --row-yellow-bg: #5a4d1a; --row-yellow-text: #fff8d8; --row-yellow-bg-hover: #6a5a1f; --row-green-bg: #1e4d2b; --row-green-text: #d6f0d8; --row-green-bg-hover: #265a36; --row-red-bg: #5a2828; --row-red-text: #ffd6d6; --row-red-bg-hover: #6a3030; --row-orange-bg: #5a3a1a; --row-orange-text: #ffe0c0; --row-orange-bg-hover: #6a4520; --row-blue-bg: #1a3a5a; --row-blue-text: #d6e4ff; --row-blue-bg-hover: #224a6a; } /* ----- Světlé téma (override) ------------------------------------- */ /* Pozadí má jemný modrý nádech (ne čistá šedá) - ladí s brand modrou (--accent: #0d6efd) a bílé karty (--bg-card: #ffffff) hezky "vyplývají" z plochy. Pokud bys chtěl víc/míň modré, mění se tu --bg + --bg-card-hover. Card a topbar zůstávají čistě bílé záměrně - kontrast s modravou plochou dělá hierarchii zřejmou. */ [data-theme="light"] { --bg: #e9f0fa; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-card-hover: #dde7f4; --bg-popover: #ffffff; --bg-input: #ffffff; --bg-tag: rgba(13, 110, 253, 0.06); --text: #1c1f24; --text-strong: #000; --text-muted: #4a5159; --text-faint: #6c757d; --text-subtle: #8a9097; --text-light: #495057; --border: #d8dce0; --border-soft: #e6e8eb; --border-input: #c4c9cf; --border-strong: #c0c5ca; --accent: #0d6efd; --accent-hover: #0a58ca; --accent-soft: rgba(13, 110, 253, 0.08); --accent-soft-hover: rgba(13, 110, 253, 0.14); --accent-focus-ring: rgba(13, 110, 253, 0.25); --hover-overlay: rgba(0,0,0,0.04); --hover-overlay-strong:rgba(0,0,0,0.08); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.12); --logo-shadow: rgba(0, 0, 0, 0.15); /* Accent řádků - light varianty (Bootstrap-like pastelové tóny). Pozadí mají dost saturace na to, aby se odlišily od bílého řádku, text je tmavý pro plnou čitelnost. */ --row-yellow-bg: #fff3cd; --row-yellow-text: #664d03; --row-yellow-bg-hover: #ffe89c; --row-green-bg: #d1e7dd; --row-green-text: #0f5132; --row-green-bg-hover: #b8dac6; --row-red-bg: #f8d7da; --row-red-text: #842029; --row-red-bg-hover: #f1b9bf; --row-orange-bg: #ffe5d0; --row-orange-text: #8b3d00; --row-orange-bg-hover: #fdd5b3; --row-blue-bg: #cfe2ff; --row-blue-text: #084298; --row-blue-bg-hover: #b6d4fe; } /* ----- Module body - sjednocené pozadí podle tématu --------------- */ /* Každý modul má svou class na (nastavená v jeho index.php). Aplikujeme přes ni base bg+text, které pak modul-specifická CSS může přebít. V tmavém tématu zůstávají hardcoded barvy v modulech (zpětná kompatibilita), ve světlém je přebíjíme tady. */ [data-theme="light"] body.portal-body, [data-theme="light"] body.zakazky-body, [data-theme="light"] body.expedice-body, [data-theme="light"] body.ctecka-body, [data-theme="light"] body.agent-body, [data-theme="light"] body.dilny-body, [data-theme="light"] body.katalog-body, [data-theme="light"] body.napoveda-body, [data-theme="light"] body.nv-body, [data-theme="light"] body.login-body, [data-theme="light"] body.exp-body { background: var(--bg); color: var(--text); } /* ----- Sjednocený horní pruh modulů (partials/topbar.php) --------- Title vlevo (me-auto), modul-specifické extras, user, Portál, Odhlásit vpravo. Nízká, kompaktní, matchuje motiv tmavé DevExtreme. ------------------------------------------------------------------ */ .app-topbar { background: var(--bg-elevated); /* Modul-specifický spodní border - 3px v barvě modulu (z $APPS registru, propisováno přes inline --app-color v partials/topbar.php). Fallback na neutrální border pokud --app-color není nastavená (např. hlavní portál index.php nebo modul bez topbarApp). */ border-bottom: 3px solid var(--app-color, var(--border)); padding: 6px 0; margin-bottom: 6px; transition: background-color 0.15s, border-color 0.15s; } /* Opt-in sticky topbar (partials/topbar.php přidá tuto třídu když volající nastaví $topbarSticky=true). Používá se v dlouhých čtecích modulech (Nápověda, Novinky), kde má smysl mít jméno + menu pořád na očích. z-index drží topbar nad DX widgety a sticky sidebars (np-sidebar má top posunutý, ať pod topbar nezalézá). */ .app-topbar--sticky { position: sticky; top: 0; z-index: 1030; /* Bootstrap fixed-top range, nad DX overlay (~1000). */ } .app-topbar-title { font-size: 15px; font-weight: 500; letter-spacing: 0.3px; color: var(--text); } /* User blok v modul-topbaru. Bez ikonky, 2 řádky: jméno (nahoře) + role (dole). Column flex se zarovnáním vpravo (align-items:flex-end), ať se text v topbaru ráhuje k pravé hraně mezi sebou (= klidnější "lego" v řadě s tlačítky). */ .app-topbar-user { color: var(--text-light); display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-right: 6px; user-select: none; } .app-topbar-user-name { font-size: 13px; font-weight: 500; color: var(--text-strong); } .app-topbar-user-role { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.3px; text-transform: uppercase; margin-top: 1px; } /* Legacy class - emoji ikonka už nerendrujeme, ale CSS ponecháno pro případ, že by ji starý kód někde jinde používal. */ .app-topbar-user-icon { font-size: 14px; } .app-topbar-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 12px; } .app-topbar-btn-ico { font-size: 13px; line-height: 1; } /* Icon-only varianta - kulatý badge s SVG ikonou uprostřed. Ve světlém tématu přidáváme okraj - bootstrap btn-outline-light v light-mode není vidět (bílý rámeček na bílém pozadí). */ .app-topbar-btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 50%; justify-content: center; display: inline-flex; align-items: center; } .app-topbar-btn-icon:hover { transform: scale(1.05); transition: transform 0.12s ease; } [data-theme="light"] .app-topbar-btn-icon { color: var(--text); border-color: var(--border-input); } [data-theme="light"] .app-topbar-btn-icon:hover { background: var(--hover-overlay); color: var(--text-strong); border-color: var(--text-muted); } .app-topbar-svg { width: 16px; height: 16px; display: block; } /* ====== Sjednocený link-strip mezi admin sekcemi ====== Renderuje partials/admin_nav.php a vkládá ho admin_users.php, ctecka/admin_mista.php a dilny/admin_stroje.php do svého header bloku. Vizuálně stejný pattern napříč všemi 3 admin stránkami, ať admin neztrácí kontext při přepínání. Aktivní stav = modré pozadí (#2b5fa1), ať uživatel hned vidí na které admin obrazovce právě je. */ .admin-nav { display: flex; gap: 6px; margin-left: 12px; flex-wrap: wrap; } .admin-nav-link { font-size: 12.5px; padding: 4px 10px; border-radius: 4px; color: #cdd; text-decoration: none; background: #1c1c1c; border: 1px solid #444; line-height: 1.4; white-space: nowrap; } .admin-nav-link:hover { background: #333; color: #fff; text-decoration: none; } .admin-nav-link.is-active { background: #2b5fa1; color: #fff; border-color: #2b5fa1; } .admin-nav-link.is-active:hover { background: #316bb3; /* slightly lighter shade than is-active */ } /* Admin cross-nav - světlá varianta (data-theme=light). Doteď byla nav jen tmavá; admin stránky se světlým režimem (admin_users, admin_pracoviste) ji potřebují čitelnou i na světlém podkladu. */ [data-theme="light"] .admin-nav-link { color: var(--text-light); background: var(--bg-elevated); border-color: var(--border-input); } [data-theme="light"] .admin-nav-link:hover { background: #e9ecef; color: var(--text-strong); } [data-theme="light"] .admin-nav-link.is-active, [data-theme="light"] .admin-nav-link.is-active:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* ====== Admin gear menu (ozubené kolo) ====== Tlačítko v topbaru + dropdown menu vedle. Identický wrapper na obou variantách (portál module topbar + admin pages inline topbars). */ .app-topbar-admin-wrap { position: relative; display: inline-flex; } .app-topbar-admin-btn.is-active, .app-topbar-admin-btn[aria-expanded="true"] { background: var(--hover-overlay, rgba(255,255,255,0.12)); border-color: var(--text-muted, #888); } .app-topbar-admin-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px; background: #1d1d1d; border: 1px solid #444; border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); padding: 4px; opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden; transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s; z-index: 1100; } .app-topbar-admin-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s; } .app-topbar-admin-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #cdd; text-decoration: none; border-radius: 4px; font-size: 13px; } .app-topbar-admin-menu a:hover { background: #2b5fa1; color: #fff; } .app-topbar-admin-menu .adm-menu-ico { font-size: 14px; width: 18px; text-align: center; flex: 0 0 auto; } .app-topbar-extra { display: inline-flex; align-items: center; gap: 6px; } /* ----- Theme toggle ikony (sun / moon) ---------------------------- */ /* Společné styly pro SVG ikony v theme toggleru. Přepínač samotný je v launcher popoveru (footer .app-launcher-footer níž), ne v topbaru. .app-theme-btn = společná class buttonu, dvě SVG vrstvy, CSS vždy zobrazí jen jednu podle data-theme. */ .app-theme-btn .app-theme-svg { width: 18px; height: 18px; display: block; flex-shrink: 0; } /* Default (dark theme): zobrazí se moon (akce = přepnout na light) */ .app-theme-btn .app-theme-sun { display: none; } .app-theme-btn .app-theme-moon { display: block; } /* Light theme: zobrazí se sun (akce = přepnout na dark) */ [data-theme="light"] .app-theme-btn .app-theme-sun { display: block; } [data-theme="light"] .app-theme-btn .app-theme-moon { display: none; } /* Stejně pro textový label - "Světlé téma" v dark, "Tmavé téma" v light */ .app-launcher-theme-text-dark { display: inline; } .app-launcher-theme-text-light { display: none; } [data-theme="light"] .app-launcher-theme-text-dark { display: none; } [data-theme="light"] .app-launcher-theme-text-light { display: inline; } /* ----- Delta launcher (vlevo v topbaru) ---------------------------- */ /* Logo = SVG trojúhelník v gradientové modré. Klik otevře popover s aplikacemi (níž). Hover má jemné světlé pozadí + scale. */ .app-topbar-logo { width: 38px; height: 38px; padding: 4px; margin-right: 4px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.12s, transform 0.12s; flex-shrink: 0; color: inherit; } .app-topbar-logo:hover { background: var(--hover-overlay); } .app-topbar-logo:active, .app-topbar-logo[aria-expanded="true"] { background: var(--hover-overlay-strong); transform: scale(0.96); } .app-topbar-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .app-topbar-logo-svg { width: 26px; height: 26px; display: block; filter: drop-shadow(0 1px 2px var(--logo-shadow)); } /* ----- App launcher popover --------------------------------------- */ .app-launcher-popover { position: fixed; top: 50px; left: 12px; /* Sirsi, aby se vesly 2 sloupce aplikaci (nizsi menu na tabletu). */ width: 520px; max-width: calc(100vw - 24px); max-height: calc(100vh - 70px); background: var(--bg-popover); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-popover); z-index: 1080; display: none; flex-direction: column; overflow: hidden; } .app-launcher-popover.open { display: flex; animation: app-launcher-fadein 0.14s ease-out; } @keyframes app-launcher-fadein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .app-launcher-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); /* Mírné modré podbarvení prvního řádku ("Přepnout modul") - tmavé téma ztlumená modrá, světlé téma jemně modrá (viz override níž). */ background: rgba(96, 150, 230, 0.14); } [data-theme="light"] .app-launcher-header { background: #e9f0fb; } .app-launcher-title { font-size: 13px; font-weight: 600; color: var(--text-strong); letter-spacing: 0.3px; } .app-launcher-portal-link { font-size: 11px; color: var(--accent); text-decoration: none; white-space: nowrap; } .app-launcher-portal-link:hover { color: var(--accent-hover); text-decoration: underline; } .app-launcher-empty { padding: 24px 14px; text-align: center; color: var(--text-subtle); font-size: 13px; } .app-launcher-list { overflow-y: auto; padding: 8px; flex: 1; /* Matice ikon - 3-4 sloupce dle sirky popoveru (auto-fill). */ display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; } /* Karta jedné aplikace v launcheru = ctverec s oblymi rohy ve stylu dlazdic na uvodni strane (ikona nahore, nazev pod ni). --app-color zděděno z inline stylu na ; ikona ma neutralni pozadi + barevny spodni okraj v teto barve. */ .app-launcher-app { position: relative; /* kotva pro .current badge */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 12px 8px; border-radius: 12px; text-decoration: none; color: var(--text); transition: background-color 0.12s, transform 0.12s; text-align: center; border: 1px solid transparent; } .app-launcher-app:hover { background: var(--hover-overlay); color: var(--text); } .app-launcher-app.current { background: var(--accent-soft); border-color: var(--app-color, var(--accent)); } .app-launcher-app.current:hover { background: var(--accent-soft-hover); } .app-launcher-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; /* Office-styl (jako ikony na uvodu): neutralni pozadi dle motivu + jemny barevny spodni okraj, barevnost drzi jen SVG. */ background: var(--bg-elevated); border: 1px solid var(--border-soft); border-bottom: 2px solid var(--app-color, #555); color: var(--app-color, #555); padding: 6px; transition: border-bottom-width 0.15s ease; } .app-launcher-app:hover .app-launcher-icon { border-bottom-width: 3px; } .app-launcher-icon svg { width: 100%; height: 100%; display: block; } /* Zjednoduseni: v menu staci nazev modulu (jako dlazdice na uvodu), popisek skryjeme - polozky jsou kompaktni a menu nizsi. */ .app-launcher-desc { display: none; } .app-launcher-info { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .app-launcher-name { font-size: 13px; font-weight: 500; color: var(--text-strong); line-height: 1.2; text-align: center; /* Delsi nazvy se zalomi pod ikonu (max 2 radky). */ white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .app-launcher-desc { font-size: 11px; color: var(--text-faint); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-launcher-current-badge { position: absolute; top: 6px; right: 8px; color: var(--app-color, var(--accent)); font-size: 10px; line-height: 1; flex-shrink: 0; text-shadow: 0 0 6px var(--app-color, var(--accent)); } /* ----- Launcher footer s theme toggle ----------------------------- */ .app-launcher-footer { border-top: 1px solid var(--border-soft); background: var(--bg-elevated); padding: 6px; } .app-launcher-theme-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; color: var(--text); font-size: 13px; cursor: pointer; text-align: left; transition: background-color 0.12s, color 0.12s; } .app-launcher-theme-btn:hover { background: var(--hover-overlay); color: var(--text-strong); } .app-launcher-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .app-launcher-theme-label { flex: 1; font-weight: 500; } /* Mobil: launcher přes celou šířku, pod topbarem */ @media (max-width: 480px) { .app-launcher-popover { left: 6px; right: 6px; width: auto; max-width: none; } } /* Uzky telefon: zpet na 1 sloupec (2 sloupce by byly stesnane). */ @media (max-width: 440px) { .app-launcher-list { grid-template-columns: 1fr; } } /* ----- Portál (index.php) ----------------------------------------- */ .portal-body { background: var(--bg); color: var(--text); margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Stack context pro tečkovanou animaci - obsah portálu (header/main) musí být nad ::before vrstvou (z-index: 0 -> 1). */ position: relative; overflow-x: hidden; } /* ====== Tečkované pozadí reagující na myš ====== Dvouvrstvý radial-gradient dot pattern v různých roztečích a alfa hodnotách (vrstvený dojem hloubky). Pozadí se posouvá podle pozice myši - dvě vrstvy jedou různou rychlostí, takže vzniká parallax efekt (přední vrstva běží rychleji než pozadí). Pohyb se ovládá CSS proměnnými --dot-mx, --dot-my (-1..+1) nastavovanými JS handlerem v portal/index.php a portal/login.php. Mezi pohyby dotahuje pozici cubic-bezier transition, takže když uživatel přestane pohybovat myší, dotečky doplujou tam kde právě stál kurzor. pointer-events: none = kliky/výběr procházejí na obsah pod ním. */ .portal-body::before, .login-body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; --dot-size: 20px; /* Conic gradient v jediném hue (slate blue ~210°) - same hue, varying lightness. Když to promaskujeme do mřížky bodů, každá tečka má jen jinou jasovou variantu téže barvy = monochromatické pozadí bez duhových přechodů. Subtle depth bez vizuálního rušení (předchozí 5-barevný rainbow byl barevně bohatý, ale s 11 různě barevnými modul ikonkami nahoře to vytvářelo barevný šum). Pokud chceš ladit jiný odstín, stačí změnit první číslo (hue, 0-360): 210 = slate blue (current), 180 = teal, 0 = warm white, 50 = warm amber. */ background: conic-gradient( from 180deg at 50% 70%, rgba(78, 96, 112, 0.322) 0deg, rgba(120, 130, 139, 0.363) 90deg, hsla(210, 38%, 52%, 1) 180deg, rgba(52, 75, 99, 0.521) 270deg, rgba(70, 88, 104, 0.349) 360deg ); /* Dvojitá maska: 1) Radial gradient = mřížka teček (2 px průměr) po --dot-size pixelech. Viditelné jen body, nikoli plocha mezi nimi. 2) Noise PNG = nepravidelný šum 256x256 px. Posouvá se v X, takže každou chvíli osvětluje jiné tečky = blikání jako hvězdy. mask-composite: intersect = tečka svítí JEN když ji v dané chvíli povolí oba masky najednou (existence v mřížce ∧ šum nad ní). */ mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--dot-size) var(--dot-size), url("noise-mask.png") 256px 50% / 256px 256px; -webkit-mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--dot-size) var(--dot-size), url("noise-mask.png") 256px 50% / 256px 256px; mask-composite: intersect; -webkit-mask-composite: source-in; /* WebKit ekvivalent intersect pro 2 vrstvy */ animation: portal-dot-flicker 40s infinite linear; } /* Posuv noise masky o 256 px za 20 s = nepřetržitý blikací efekt. První maska (mřížka teček) zůstává staticky uprostřed (50% 50%), posouvá se jen druhá (noise) z 256 px na 0 px na ose X. */ @keyframes portal-dot-flicker { to { mask-position: 50% 50%, 0 50%; -webkit-mask-position: 50% 50%, 0 50%; } } /* Reduced-motion uživatelé - bez blikání, tečky zůstávají statické, ale viditelné. */ @media (prefers-reduced-motion: reduce) { .portal-body::before, .login-body::before { animation: none; } } /* Header a main musí být nad pozadím (z-index 0 z ::before), jinak by tečky překreslily karty. Stejné pro login content. */ .portal-main, .login-body .container { position: relative; z-index: 1; } /* Header zvlášť s vyšším z-index než main - jinak by absolutně-pozicované dropdown menu uvnitř headeru (.portal-actions-menu) bylo prebito stejnopozicovaným .portal-main (dva stacking contexts s z-index: 1, pozdějši v DOM vyhrává). Hodinová sekce je v main, takže byla nad menu. Header s z-index 10 ji odsune pod. */ .portal-header { position: relative; z-index: 10; } .portal-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding: 18px 0; margin-bottom: 32px; } .portal-title { font-size: 22px; font-weight: 500; letter-spacing: 0.3px; color: var(--text-strong); /* Inline-flex aby se SVG logo, text a verze srovnaly podle baselinu (resp. vertical-center). */ display: inline-flex; align-items: center; gap: 12px; } /* Velký Delta logo v hlavičce portál home - většinou ~48 px. SVG má vlastní gradient + outline. drop-shadow zlehka odsadí logo od bg (subtle 3D pocit, žádný harsh efekt). Periodický světelný puls (každých 8 s krátký záblesk modré záře). Pomáhá vizuálně "ožít" stránce, ale dost vzácně, aby to nerozptylovalo. Drop-shadow filter sleduje tvar trojúhelníku (na rozdíl od box-shadow, která by byla obdélníková). */ .portal-home-logo { /* Sjednoceno s velikostí avataru (.portal-avatar = 56 px), ať logo a profilový blok na hlavní straně mají vizuální rovnováhu. */ width: 56px; height: 56px; flex: 0 0 auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); animation: portal-logo-pulse 8s ease-in-out infinite; } @keyframes portal-logo-pulse { /* 0-70 %: klid - jen baseline drop-shadow. 70-90 %: záře nabíhá a vrcholí (~85 %) - modrá v tónu loga. 90-100 %: zpět do klidu. */ 0%, 70% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); } 78% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 6px rgba(126, 200, 255, 0.55)) drop-shadow(0 0 14px rgba(126, 200, 255, 0.30)); } 85% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 10px rgba(126, 200, 255, 0.75)) drop-shadow(0 0 22px rgba(126, 200, 255, 0.45)); } 100% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); } } /* Respekt k uživatelské volbě "omezit pohyb" (Win / macOS / iOS settings). Animace se vypne, baseline drop-shadow zůstane. */ @media (prefers-reduced-motion: reduce) { .portal-home-logo { animation: none; } } /* Stacked title-text - "Delta" velký, verze pod ním v jednom sloupci. Logo vedle zůstává vertikálně vycentrované na celý blok (parent .portal-title je inline-flex align-items: center). */ .portal-title-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; gap: 1px; } .portal-title-name { font-size: 24px; font-weight: 500; color: var(--text-strong); } /* Verze portálu - drobný subtilní text pod hlavním nadpisem na portal/index.php a vedle nadpisu na login.php. Žádný jiný modul tuto třídu nepoužívá (vědomě - topbar modulů zůstává kompaktní). */ .portal-version { color: var(--text-faint); font-size: 12px; font-weight: 400; letter-spacing: 0; cursor: help; } /* Na portal/index.php = pod nadpisem ve sloupcové struktuře - není potřeba margin-left ani vertical-align. */ .portal-title-text .portal-version { margin-left: 0; } /* Na login obrazovce vedle "Delta portál" - menší a zarovnaný baseline, ať nevyčuhuje z nadpisu h2. */ .login-version { font-size: 11px; } .portal-user { font-size: 14px; color: var(--text-light); display: inline-flex; align-items: center; gap: 6px; } .portal-user-icon { font-size: 18px; } /* Role na samostatném řádku pod jménem (3-řádkový stack jméno/role/firmy). Bez závorek - layout sám říká, že je to upřesnění jména. Drobnější font + uppercase letter-spacing, ať vypadá jako "tag" než další jméno. */ .portal-user-role { color: var(--text-faint); font-size: 11px; margin-top: 1px; letter-spacing: 0.3px; font-weight: 500; text-transform: uppercase; } /* ====== Profil uživatele v hlavičce portálu ====== Avatar (kruh s iniciálami) vlevo, dva řádky info vpravo (jméno+role a seznam firem). Layout: horizontal flex, vertikální zarovnání na střed. Avatar má deterministickou barvu (CSS proměnná --avatar-color z PHP), ať se shoduje napříč sessions stejného uživatele. */ .portal-user-block { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-light); /* Max-width pro firmy řádek - dlouhé seznamy se zalomí, ne aby narostl header do šířky. ellipsis fallback pro extrémně dlouhé. */ max-width: 360px; } /* Avatar - kruh 56px, buď uploadnutý obrázek (img dovnitř, object-fit:cover) nebo iniciály fallback. Renderovaný jako