/* ============================================================================= STARGATE — sci-fi tema pro Control Room (vrstva nad Tablerem/Bootstrapem 5). Nacita se jako posledni, takze prepisuje vychozi styly. Paleta: hluboky vesmir + cyan "event horizon" + jantarove chevrony. ============================================================================= */ /* ---- Font Orbitron (lokalne) ---- */ @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400; font-display: swap; src: url('../libs/fonts/orbitron/orbitron-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 500; font-display: swap; src: url('../libs/fonts/orbitron/orbitron-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap; src: url('../libs/fonts/orbitron/orbitron-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 900; font-display: swap; src: url('../libs/fonts/orbitron/orbitron-latin-900-normal.woff2') format('woff2'); } :root { --sg-bg: #050912; --sg-bg2: #0a1426; --sg-surface: rgba(12, 24, 43, 0.78); --sg-cyan: #2ad4ff; --sg-cyan-soft: rgba(42, 212, 255, 0.55); --sg-cyan-dim: rgba(42, 212, 255, 0.18); --sg-amber: #ff9b3d; --sg-gold: #d9b15a; --sg-heading: #eaf2fb; /* neutralni svetla pro nadpisy a hlavicky - drive azurova */ --sg-text: #d4e9ff; --sg-muted: #7fa6c9; --sg-border: rgba(42, 212, 255, 0.28); /* prepis Tabler/Bootstrap promennych */ --tblr-primary: #2ad4ff; --tblr-primary-rgb: 42, 212, 255; --tblr-body-bg: #050912; --tblr-body-color: #d4e9ff; --tblr-bg-surface: rgba(12, 24, 43, 0.78); --tblr-border-color: rgba(42, 212, 255, 0.28); --tblr-card-bg: rgba(12, 24, 43, 0.78); --tblr-dark: #050912; --bs-primary: #2ad4ff; --bs-link-color: #5fe0ff; --bs-link-hover-color: #aef0ff; } /* ---- Vesmirne pozadi: mapa site bran + hvezdy + vesmirny zaklad ---- Vsechny vrstvy jsou na position:fixed pseudo-elementu pres cely viewport. background-attachment:fixed na body NEFUNGUJE na iOS Safari (pocita cover pres celou vysku dokumentu -> na dlouhych strankach obrazek "zmizel"). POZOR na vrstveni: body NESMI mit vlastni nepruhledne pozadi, jinak by prekrylo z-index:-1 pseudo-element (kresli se az po pozadi ). */ html { background-color: var(--sg-bg); } body { background: none; color: var(--sg-text); min-height: 100vh; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(180deg, #060b16 0%, #050912 60%, #04070e 100%); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Mapa bran a hvezdy zustavaji jen na prihlasovaci strance, protoze pod obsahem aplikace prosvitaly do tabulek */ body:has(.sg-login-wrap)::before { background-image: url('../images/gate-network.svg'), radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.6), transparent), radial-gradient(2px 2px at 85% 20%, rgba(173,240,255,.5), transparent), radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,.4), transparent), radial-gradient(1200px 700px at 80% -10%, rgba(42,212,255,.10), transparent), radial-gradient(900px 600px at 0% 110%, rgba(255,155,61,.06), transparent), linear-gradient(180deg, #060b16 0%, #050912 60%, #04070e 100%); } /* ---- Typografie ---- */ .navbar-brand, h1, .page-title { font-family: 'Orbitron', 'Segoe UI', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; color: #eaf6ff; } h1 { font-weight: 700; } /* ---- Navbar = velitelska konzole ---- */ .navbar.navbar-dark { --tblr-navbar-bg: rgba(4, 9, 18, 0.92); background: linear-gradient(180deg, rgba(8,18,34,.96), rgba(4,9,18,.92)) !important; border-bottom: 1px solid var(--sg-border); box-shadow: inset 0 -1px 0 var(--sg-cyan-soft); } .navbar.navbar-dark .navbar-brand { color: #eaf6ff; } .navbar.navbar-dark .navbar-brand .bi { color: var(--sg-cyan); } .navbar.navbar-dark .nav-link { color: #dfe8f2; letter-spacing: .04em; } .navbar.navbar-dark .nav-link:hover, .navbar.navbar-dark .nav-link:focus, .navbar.navbar-dark .show > .nav-link { color: #fff; } /* ---- Karty = hologramove panely ---- */ .card { background: var(--sg-surface) !important; border: 1px solid var(--sg-border) !important; border-radius: 6px; box-shadow: 0 0 0 1px rgba(42,212,255,.05), 0 8px 30px rgba(0,0,0,.45); backdrop-filter: blur(3px); position: relative; } .card::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--sg-cyan), transparent); opacity: .7; } .card-header { background: transparent; border-bottom: 1px solid var(--sg-border); } /* ---- Nadpisy stranek ---- */ .page-body, .container-xl { color: var(--sg-text); } a { color: #5fe0ff; } a:hover { color: #aef0ff; } /* ---- Tlacitka ---- */ .btn-primary { background: linear-gradient(180deg, #2ad4ff, #1390c4); border-color: #2ad4ff; color: #04121c; font-weight: 600; text-shadow: none; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, #59e2ff, #1aa6e0); } .btn-outline-secondary { color: #bfe6ff; border-color: var(--sg-border); background: rgba(42,212,255,.04); } .btn-outline-secondary:hover, .btn-outline-secondary.active { color: #04121c; background: var(--sg-cyan); border-color: var(--sg-cyan); } /* ---- Tabulky + datagrid ---- */ .table { --tblr-table-bg: transparent; /* prepis svetlych Tabler hodnot (jinak table-striped delal svetle radky) */ --tblr-table-striped-bg: rgba(255, 255, 255, .03); --tblr-table-striped-color: var(--sg-text); --tblr-table-accent-bg: transparent; --tblr-table-hover-bg: rgba(255, 255, 255, .07); --tblr-table-hover-color: #fff; --tblr-table-active-bg: rgba(42, 212, 255, .12); --tblr-table-color: var(--sg-text); color: var(--sg-text); } .table > thead th, .datagrid thead th { font-size: .8rem; font-weight: 600; letter-spacing: .02em; /* Tabler sam dava hlavickam text-transform: uppercase - prebijime, bezne psani je citelnejsi */ text-transform: none; color: var(--sg-heading) !important; border-bottom: 1px solid var(--sg-border) !important; background: rgba(255, 255, 255, .04) !important; padding-top: .7rem; padding-bottom: .7rem; white-space: nowrap; } /* radiaci sloupce (klikaci hlavicky) */ .table > thead th[role="button"], .table > thead th[data-sort], .datagrid thead th a { cursor: pointer; /* jinak by radici sloupec zdedil azurovou barvu odkazu a byl jediny modry mezi bilymi */ color: var(--sg-heading) !important; } .table > thead th[role="button"]:hover, .datagrid thead th a:hover { color: #ffffff !important; } .table > tbody > tr { border-color: rgba(42,212,255,.10); transition: background-color .12s ease, box-shadow .12s ease; } .table > tbody > tr:hover > * { background: rgba(255, 255, 255, .07) !important; box-shadow: inset 2px 0 0 var(--sg-cyan); } .table-striped > tbody > tr:nth-of-type(odd) > * { --tblr-table-accent-bg: rgba(255, 255, 255, .03); background: rgba(255, 255, 255, .03); } .table > tbody > td, .table > tbody > tr > td { padding-top: .6rem; padding-bottom: .6rem; } /* ---- Datagrid (contributte) = hologramovy panel ---- */ .datagrid { background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.45); padding: .25rem; } .datagrid .table, .datagrid .table > thead > tr > th, .datagrid .table > tbody > tr, .datagrid .table > tbody > tr > td, .datagrid .table > tfoot > tr > td { background-color: transparent !important; color: var(--sg-text); border-color: rgba(42,212,255,.12) !important; } .datagrid .table > tbody > tr:hover > * { background: rgba(42,212,255,.08) !important; box-shadow: inset 3px 0 0 var(--sg-cyan); } .datagrid .row-group-actions, .datagrid .datagrid-toolbar, .datagrid .datagrid-footer, .datagrid .card, .datagrid thead .datagrid-th-form-inline { background: transparent !important; color: var(--sg-text); } .datagrid a { color: #6fe4ff; } /* ---- Filtrace (datagrid + dropdown filtry) ---- */ /* radek filtru pod hlavickami */ .datagrid thead .datagrid-th-form-inline .form-control, .datagrid thead .datagrid-th-form-inline .form-select, .datagrid .datagrid-row-filter td .form-control, .datagrid .datagrid-row-filter td .form-select { background-color: rgba(4, 10, 20, .9) !important; height: calc(1.5em + .6rem); font-size: .85rem; } /* dropdown filtry ("Frekvence vystavovani", "Televize"...) */ .dropdown-menu { background: #08111f !important; border: 1px solid var(--sg-border) !important; box-shadow: 0 10px 32px rgba(0, 0, 0, .55) !important; border-radius: 6px; } .dropdown-menu .dropdown-header { color: var(--sg-muted) !important; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; } .dropdown-item { color: var(--sg-text) !important; } .dropdown-item:hover, .dropdown-item:focus { background: rgba(42, 212, 255, .14) !important; color: #fff !important; } /* legacy BS3 polozky filtru (ul.dropdown-menu > li > a.no-ajax) */ .dropdown-menu > li > a { display: block; padding: .4rem 1rem; color: #bfe6ff !important; text-decoration: none; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: rgba(42, 212, 255, .14) !important; color: #fff !important; } .dropdown-item.active, .dropdown-item:active { background: var(--sg-cyan) !important; color: #04121c !important; } .dropdown-divider { border-color: var(--sg-border) !important; } /* toggle filtru jako jemne ramecky misto holych odkazu */ .datagrid .dropdown-toggle, .datagrid-toolbar .dropdown-toggle { color: #bfe6ff; } .datagrid .dropdown-toggle:hover { color: #fff; } /* filtracni "menu" nad datagridem (legacy BS3 ul.nav.navbar-nav v .container) - z holeho odrazkoveho seznamu udelame radu pilulkovych tlacitek */ .container > ul.navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem; align-items: center; list-style: none; padding: .5rem .65rem; margin: 0 0 1rem 0; background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: 8px; } .container > ul.navbar-nav > li { display: inline-block; list-style: none; margin: 0; } .container > ul.navbar-nav > li.dropdown > a.dropdown-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border: 1px solid var(--sg-border); border-radius: 6px; background: rgba(42, 212, 255, .05); color: #bfe6ff !important; text-decoration: none; font-size: .85rem; letter-spacing: .02em; white-space: nowrap; transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .container > ul.navbar-nav > li.dropdown > a.dropdown-toggle:hover, .container > ul.navbar-nav > li.dropdown.show > a.dropdown-toggle { color: #04121c !important; background: var(--sg-cyan); border-color: var(--sg-cyan); } /* prazdny BS3 caret schovame - sipku resi BS5 .dropdown-toggle::after */ .container > ul.navbar-nav .caret { display: none; } /* "Group actions" select + reset filtru */ .datagrid .row-group-actions .form-select { min-width: 12rem; } .datagrid .btn-link, .datagrid .reset-filter { color: var(--sg-amber) !important; } /* ---- Strankovani ---- */ .pagination .page-link { background: rgba(6, 14, 26, .7); border-color: var(--sg-border); color: #bfe6ff; } .pagination .page-link:hover { background: rgba(42, 212, 255, .15); border-color: var(--sg-cyan); color: #fff; } .pagination .page-item.active .page-link { background: var(--sg-cyan); border-color: var(--sg-cyan); color: #04121c; } .pagination .page-item.disabled .page-link { background: rgba(6, 14, 26, .4); color: var(--sg-muted); border-color: rgba(42, 212, 255, .12); } /* ---- Formularove prvky = ovladaci panel ---- */ .form-control, .form-select, .container-fluid input[type=text]:not(.form-control), .container-xl input[type=text], .container-xl input[type=password], .container-xl input[type=email], .container-xl input[type=number], .container-xl input[type=date], .container-xl input[type=search], .container-xl input[type=tel], .container-xl textarea, .container-xl select { background-color: rgba(6, 14, 26, .85) !important; border: 1px solid var(--sg-border) !important; color: var(--sg-text) !important; border-radius: 5px; box-shadow: inset 0 1px 6px rgba(0, 0, 0, .5); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } /* hover (jeste bez fokusu) jemne rozsviti ramecek */ .form-control:hover:not(:focus), .form-select:hover:not(:focus), .container-xl input:hover:not(:focus), .container-xl textarea:hover:not(:focus), .container-xl select:hover:not(:focus) { border-color: var(--sg-cyan-soft) !important; } .form-control:focus, .form-select:focus, .container-xl input:focus, .container-xl textarea:focus, .container-xl select:focus { border-color: var(--sg-cyan) !important; background-color: rgba(8, 20, 36, .96) !important; box-shadow: 0 0 0 .18rem var(--sg-cyan-dim), inset 0 1px 6px rgba(0, 0, 0, .5) !important; outline: none; } ::placeholder { color: var(--sg-muted) !important; opacity: 1; } label, .form-label { color: var(--sg-text); letter-spacing: .02em; } /* vlastni cyan sipka u selectu */ .form-select, .container-xl select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2rem !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232ad4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .6rem center !important; background-size: 14px 14px !important; } /* checkboxy / radia v cyan */ .form-check-input { background-color: rgba(6, 14, 26, .9) !important; border: 1px solid var(--sg-border) !important; } .form-check-input:checked { background-color: var(--sg-cyan) !important; border-color: var(--sg-cyan) !important; } .form-check-input:focus { border-color: var(--sg-cyan) !important; box-shadow: 0 0 0 .18rem var(--sg-cyan-dim) !important; } /* legacy "holé" checkboxy/radia (napr. login) obarvime nativne */ .container-xl input[type=checkbox], .container-xl input[type=radio] { accent-color: var(--sg-cyan); width: 1.05em; height: 1.05em; vertical-align: -.15em; } /* datum/cas pickery a jejich tlacitka */ .input-group-text { background: rgba(42, 212, 255, .08) !important; border: 1px solid var(--sg-border) !important; color: var(--sg-cyan) !important; } /* ---- Badge ---- */ .badge { font-size: .8rem; } .badge.bg-primary { background: var(--sg-cyan) !important; color: #04121c !important; } .badge.bg-success { color: #fff !important; } .text-muted { color: var(--sg-muted) !important; } /* ---- Modaly ---- */ .modal-content { background: #08111f; border: 1px solid var(--sg-border); } .modal-header, .modal-footer { border-color: var(--sg-border); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #04070e; } ::-webkit-scrollbar-thumb { background: rgba(42,212,255,.3); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--sg-cyan-soft); } /* ============================================================================= STARGATE RING — dekorativni prvek (login + brand) ============================================================================= */ /* ----- Realisticka Hvezdna brana, ktera se vytaci (login) ----- Struktura: .stargate > .sg-body (kovovy prstenec) + .sg-track (rotujici prstenec s 39 glyfy) + 9x .sg-chev (chevrony, ktere se zamykaji) + .sg-eh (horizont udalosti). Sekvenci vytaceni ridi JS v Sign/in.latte. */ .stargate { --sg-d: 360px; /* prumer brany */ --sg-glyph-r: 140px; /* polomer glyfoveho prstence */ --sg-chev-r: 171px; /* polomer chevronu */ position: relative; width: var(--sg-d); height: var(--sg-d); margin: 0 auto 2.2rem; filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); } /* telo brany - kovovy prstenec se segmenty */ .sg-body { position: absolute; inset: 0; border-radius: 50%; background: /* horni svetlo dopadajici na kov */ radial-gradient(circle at 50% 30%, rgba(150,172,196,.22), transparent 55%), /* kovovy prstenec s bevelem (naquadah - tmava modrosseda) */ radial-gradient(circle at 50% 50%, #04070c 0 49.5%, /* tmavy stred (pred otevrenim) */ #243440 50.5% 54%, /* svetla vnitrni hrana (lip) */ #16222d 56%, #34495c 65%, /* vrchol bevelu - nejsvetlejsi kov */ #3d556a 70%, #283b4b 80%, #16222d 90%, #0a131a 96%, #05090e 100%); box-shadow: inset 0 0 0 1px rgba(155,182,208,.28), inset 0 12px 28px rgba(0,0,0,.8), inset 0 -10px 22px rgba(150,180,210,.09), 0 16px 44px rgba(0,0,0,.65); } /* radialni delici cary -> 39 segmentu (glyfove bloky) */ .sg-body::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -4.615deg, rgba(0,0,0,.55) 0deg .9deg, transparent .9deg 9.23deg); -webkit-mask: radial-gradient(circle, transparent 0 51%, #000 52% 92%, transparent 93%); mask: radial-gradient(circle, transparent 0 51%, #000 52% 92%, transparent 93%); } /* rotujici prstenec s glyfy */ .sg-track { position: absolute; inset: 0; border-radius: 50%; transform: rotate(0deg); will-change: transform; } .sg-glyph { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'DejaVu Sans', sans-serif; font-variant-emoji: text; /* nutit textovy (ne barevny emoji) render */ font-size: 17px; line-height: 1; /* vyryté symboly - tmavy kov, ne svitici (jako na realne brane) */ color: #586a78; text-shadow: 0 1px 0 rgba(0,0,0,.85), 0 -1px 0 rgba(170,195,220,.10); /* uhel pocita calc z celociselnych --i/--n (float v inline stylu se neserializuje spravne) */ transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(-1 * var(--sg-glyph-r))); transition: color .25s ease, text-shadow .25s ease; } /* glyf nasvícený pod horni chevron pri vytaceni */ .sg-glyph.lit { color: #ffcf6e; text-shadow: 0 0 9px rgba(255,160,50,.95), 0 0 18px rgba(255,110,25,.65); } /* chevrony */ .sg-chev { position: absolute; left: 50%; top: 50%; width: 30px; height: 34px; margin: -17px 0 0 -15px; transform: rotate(var(--a)) translateY(calc(-1 * var(--sg-chev-r))); } .sg-chev i { /* svitici trojuhelnik */ position: absolute; inset: 0; clip-path: polygon(50% 100%, 6% 8%, 24% 8%, 50% 60%, 76% 8%, 94% 8%); background: linear-gradient(180deg, #38485a, #1a2734); box-shadow: inset 0 0 3px rgba(0,0,0,.6); transition: background .18s ease, box-shadow .25s ease, filter .25s ease; } .sg-chev::before { /* kovove pouzdro chevronu */ content: ''; position: absolute; inset: -4px -5px 2px -5px; clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(180deg, #2a3a49, #141d27); box-shadow: inset 0 0 0 1px rgba(140,170,200,.18); z-index: -1; } .sg-chev.locked i { background: linear-gradient(180deg, #ffe39a 0%, #ff8a23 45%, #ff5a14 100%); box-shadow: 0 0 16px 4px rgba(255,120,30,.95), 0 0 32px rgba(255,80,20,.6), inset 0 0 5px rgba(255,235,200,.7); filter: saturate(1.25); } /* zablesk pri zamknuti */ .stargate.lock-flash .sg-chev.locked i { filter: brightness(1.4) saturate(1.3); } /* horizont udalosti = realne video vodni hladiny obarvene do modra */ .sg-eh { position: absolute; left: 50%; top: 50%; /* 71% = presne prumer vnitrniho otvoru prstence (kaluz vyplni celou branu) */ width: 71%; height: 71%; margin: -35.5% 0 0 -35.5%; border-radius: 50%; overflow: hidden; /* iOS Safari neorezava kompozitovane