/* ================================================================ THEME VARIABLES Chcete-li změnit barvy celé aplikace, upravte jen tuto sekci. Každá stránka může přepsat --page-accent pro vlastní gradient. ================================================================ */ /* ---------- Tmavé téma (výchozí) ---------- */ :root { /* Pozadí */ --bg-base: #020617; /* hlavní pozadí */ --bg-deep: #000000; /* nejhlubší tmavina */ --bg-surface: #0f172a; /* povrch / sidebar */ --bg-surface-a85: rgba(15, 23, 42, 0.85); --bg-surface-a90: rgba(15, 23, 42, 0.90); --bg-surface-a95: rgba(15, 23, 42, 0.95); --bg-surface-a98: rgba(15, 23, 42, 0.98); /* Text */ --text-primary: #e5e7eb; /* hlavní text */ --text-muted: #9ca3af; /* tlumený text */ --text-subtle: #cbd5f5; /* jemný text */ --text-on-dark: #f9fafb; /* text na tmavém prvku */ /* Rámečky */ --border: rgba(148, 163, 184, 0.50); --border-subtle: rgba(148, 163, 184, 0.30); --border-accent: rgba(96, 165, 250, 0.90); /* hover / aktivní */ /* Akcenty */ --accent: #1d4ed8; --accent-indigo: #6366f1; --accent-cyan: #22d3ee; --accent-sky: #0ea5e9; --accent-a25: rgba(37, 99, 235, 0.25); --accent-a35: rgba(37, 99, 235, 0.35); --accent-glow: rgba(129, 140, 248, 0.15); /* Odkazy a tlačítka */ --link-color: #006bb7; --btn-primary-bg: #1b6ec2; --btn-primary-border: #1861ac; /* Navigace (sidebar) */ --sidebar-bg: #0f172a; --sidebar-shadow: 2px 0 12px rgba(15, 23, 42, 0.6); --nav-link-color: #c7d2fe; --nav-active-from: #6366f1; --nav-active-to: #22d3ee; --nav-separator-color: #6b7280; /* Stíny */ --shadow-card: 0 18px 45px rgba(15, 23, 42, 0.90); --shadow-card-lg: 0 26px 60px rgba(15, 23, 42, 1.00); --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.90); /* Validace */ --color-valid: #26b050; --color-invalid: #e50000; /* Akcentní barva gradientu stránky – přepište v .xxx-root každé stránky */ --page-accent: #1d4ed8; } /* ---------- Světlé téma – automatické (podle OS, pokud není ručně přepsáno) ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-base: #f8fafc; --bg-deep: #e2e8f0; --bg-surface: #ffffff; --bg-surface-a85: rgba(255, 255, 255, 0.85); --bg-surface-a90: rgba(255, 255, 255, 0.90); --bg-surface-a95: rgba(255, 255, 255, 0.95); --bg-surface-a98: rgba(255, 255, 255, 0.98); --text-primary: #0f172a; --text-muted: #64748b; --text-subtle: #334155; --text-on-dark: #ffffff; --border: rgba(100, 116, 139, 0.40); --border-subtle: rgba(100, 116, 139, 0.20); --border-accent: rgba(37, 99, 235, 0.70); --accent-a25: rgba(37, 99, 235, 0.10); --accent-a35: rgba(37, 99, 235, 0.15); --accent-glow: rgba(99, 102, 241, 0.10); --link-color: #1d4ed8; --sidebar-bg: #1e293b; --sidebar-shadow: 2px 0 12px rgba(15, 23, 42, 0.15); --nav-link-color: #bfdbfe; --nav-separator-color: #94a3b8; --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.10); --shadow-card-lg: 0 8px 28px rgba(15, 23, 42, 0.18); --shadow-modal: 0 24px 70px rgba(15, 23, 42, 0.50); } } /* ---------- Světlé téma – ruční přepnutí (přidejte data-theme="light" na ) ---------- */ [data-theme="light"] { --bg-base: #f8fafc; --bg-deep: #e2e8f0; --bg-surface: #ffffff; --bg-surface-a85: rgba(255, 255, 255, 0.85); --bg-surface-a90: rgba(255, 255, 255, 0.90); --bg-surface-a95: rgba(255, 255, 255, 0.95); --bg-surface-a98: rgba(255, 255, 255, 0.98); --text-primary: #0f172a; --text-muted: #64748b; --text-subtle: #334155; --text-on-dark: #ffffff; --border: rgba(100, 116, 139, 0.40); --border-subtle: rgba(100, 116, 139, 0.20); --border-accent: rgba(37, 99, 235, 0.70); --accent-a25: rgba(37, 99, 235, 0.10); --accent-a35: rgba(37, 99, 235, 0.15); --accent-glow: rgba(99, 102, 241, 0.10); --link-color: #1d4ed8; --sidebar-bg: #1e293b; --sidebar-shadow: 2px 0 12px rgba(15, 23, 42, 0.15); --nav-link-color: #bfdbfe; --nav-separator-color: #94a3b8; --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.10); --shadow-card-lg: 0 8px 28px rgba(15, 23, 42, 0.18); --shadow-modal: 0 24px 70px rgba(15, 23, 42, 0.50); } /* ---------- Tmavé téma – ruční přepnutí (přidejte data-theme="dark" na ) ---------- */ [data-theme="dark"] { --bg-base: #020617; --bg-deep: #000000; --bg-surface: #0f172a; --bg-surface-a85: rgba(15, 23, 42, 0.85); --bg-surface-a90: rgba(15, 23, 42, 0.90); --bg-surface-a95: rgba(15, 23, 42, 0.95); --bg-surface-a98: rgba(15, 23, 42, 0.98); --text-primary: #e5e7eb; --text-muted: #9ca3af; --text-subtle: #cbd5f5; --text-on-dark: #f9fafb; --border: rgba(148, 163, 184, 0.50); --border-subtle: rgba(148, 163, 184, 0.30); --border-accent: rgba(96, 165, 250, 0.90); --accent-a25: rgba(37, 99, 235, 0.25); --accent-a35: rgba(37, 99, 235, 0.35); --accent-glow: rgba(129, 140, 248, 0.15); --link-color: #006bb7; --sidebar-bg: #0f172a; --sidebar-shadow: 2px 0 12px rgba(15, 23, 42, 0.6); --nav-link-color: #c7d2fe; --nav-separator-color: #6b7280; --shadow-card: 0 18px 45px rgba(15, 23, 42, 0.90); --shadow-card-lg: 0 26px 60px rgba(15, 23, 42, 1.00); --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.90); } /* ================================================================ ZÁKLAD ================================================================ */ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow-x: hidden; } /* ---------- GLOBAL PAGE / SECTION STYLES ---------- */ .page-root { min-height: calc(100vh - 3rem); padding: 3rem 2.5rem 2.5rem; color: var(--text-primary); } .section-header { max-width: 900px; margin: 0 auto 2rem; } .section-kicker { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; } .section-header h1 { font-size: clamp(2rem, 2.3vw + 1rem, 2.6rem); font-weight: 700; margin-bottom: 0.6rem; } .section-intro { max-width: 40rem; font-size: 1rem; color: var(--text-primary); } /* ---------- Buttons ---------- */ a, .btn-link { color: var(--link-color); } .btn-primary { color: #fff; background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } /* ---------- PAGE TRANSITIONS ---------- */ .page-wrapper { animation: page-fade-slide 320ms ease-out; will-change: transform, opacity; } /* jemný fade + mírné vyjetí nahoru */ @keyframes page-fade-slide { from { opacity: 0; transform: translateY(12px) scale(0.99); filter: blur(1px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-valid); } .invalid { outline: 1px solid var(--color-invalid); } .validation-message { color: var(--color-invalid); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ---------- IMAGE MODAL (LIGHTBOX) ---------- */ .image-modal-backdrop { position: fixed; inset: 0; background: var(--bg-surface-a85); display: flex; align-items: center; /* vertikální centrování */ justify-content: center; /* horizontální centrování */ z-index: 2000; /* nad vším */ } .image-modal { position: relative; max-width: min(1000px, 96vw); max-height: 90vh; animation: image-modal-zoom 200ms ease-out; } .image-modal img { display: block; width: auto; max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 0.75rem; box-shadow: var(--shadow-modal); } /* zavírací tlačítko */ .image-modal-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 2rem; height: 2rem; border-radius: 999px; border: none; background: var(--bg-surface-a90); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 120ms ease-out, transform 120ms ease-out; } .image-modal-close:hover { background: rgba(30, 64, 175, 0.95); transform: scale(1.05); } /* jemný efekt při otevření */ @keyframes image-modal-zoom { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Slidebar analytics status bar */ .sidebar { display: flex; flex-direction: column; } .sidebar-nav { flex: 1 1 auto; } /* widget návštěv dole v menu */ .sidebar-stats { padding: 1rem 1.3rem 1.4rem; border-top: 1px solid var(--border-subtle); font-size: .8rem; color: var(--text-muted); } .sidebar-stats-label { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; margin-bottom: .4rem; color: #6b7280; } .sidebar-stats-main { font-size: 1.4rem; font-weight: 600; color: #e5e7eb; } .sidebar-stats-main-caption { font-size: .7rem; margin-left: .35rem; text-transform: uppercase; letter-spacing: .14em; color: #9ca3af; } .sidebar-stats-rows { margin-top: .5rem; display: flex; flex-direction: column; gap: .25rem; } @media (max-width: 600px) { .image-modal { max-width: 100vw; max-height: 92vh; } } /* ========== SIDEBAR COLLAPSE ========== */ /* výchozí stav – texty viditelné vždy */ .sidebar .nav-text, .sidebar .sidebar-title { display: inline; } /* Desktop: efekt "jen ikony" */ @media (min-width: 769px) { .sidebar.collapsed { width: 4rem; } .sidebar.collapsed .nav-text, .sidebar.collapsed .sidebar-title { display: none; } .sidebar.collapsed .sidebar-nav { align-items: center; } } /* ---------- LAYOUT (PAGE + SIDEBAR) ---------- */ /* MOBILNÍ REŽIM do 768px: sidebar nahoře */ @media (max-width: 768px) { .page { display: flex; flex-direction: column; /* sidebar nahoru */ min-height: 100vh; } .page > .sidebar, .page > nav.sidebar { width: 100%; height: auto; position: sticky; /* drží menu nahoře při scrollu */ top: 0; z-index: 50; border-right: none; border-bottom: 1px solid rgba(148, 163, 184, .3); } .page > main { width: 100%; min-width: 0; /* zabrání horizontálnímu overflow */ } /* schovat spodní statistiky v menu na mobilu */ .sidebar-stats { display: none; } /* volitelné: horizontální „pill“ menu */ .sidebar-menu { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.75rem; padding: 0.5rem 1rem 0.75rem; scroll-behavior: smooth; } .sidebar-menu .nav-item { white-space: nowrap; } } /* Desktop od 769px: sidebar vlevo */ @media (min-width: 769px) { .page { display: flex; min-height: 100vh; } .page > .sidebar, .page > nav.sidebar { width: 260px; flex-shrink: 0; } .page > main { flex: 1 1 auto; min-width: 0; /* zabrání horizontálnímu overflow */ } } /* výchozí stav – obě tlačítka schovaná, řešíme v media queries */ .sidebar-toggle-desktop, .sidebar-toggle-mobile { display: none; } /* Mobil do 768px: jen hamburger */ @media (max-width: 768px) { .sidebar-toggle-mobile { display: inline-flex; } } /* Desktop od 769px: jen desktop toggle (kolaps na ikony) */ @media (min-width: 769px) { .sidebar-toggle-desktop { display: inline-flex; } }