/** * ========================================================================== * style.css — Hlavný štýlopis aplikácie Olympionici SR [BOD 10] * ========================================================================== * * ÚČEL: * Vlastné CSS štýly pre celú aplikáciu. Dopĺňa Bootstrap 5.3.0. * Definuje vizuálny štýl navbar, tabuliek, formulárov, kariet, * tlačidiel, alertov, badge a cookie banneru. * * ZODPOVEDÁ ZA BODY: * (10) — „Grafický dizajn" (jednotný vzhľad, responzívny layout) * (4) — Štýl tabuliek s výsledkami * * KONCEPT — CSS Specifickosť: * Čím špecifickejší selektor, tým väčšia priorita. * element (1) < .trieda (10) < #id (100) < inline style (1000) * !important prekoná všetko (používať opatrne). * * KONCEPT — box-sizing: border-box: * width a height zahŕňajú padding aj border (nie len obsah). * Jednoduchšie počítanie rozmerov. * * KONCEPT — rem vs px: * rem = relatívne k root font-size (zvyčajne 16px). * 1rem = 16px, 0.85rem ≈ 13.6px. * Výhoda rem: rešpektuje používateľské nastavenie veľkosti textu. * * KONCEPT — @media queries (Responsive Design): * @media (max-width: 768px) — pravidlá platia len ak šírka < 768px. * Umožňuje prispôsobiť layout pre mobily, tablety aj desktop. */ /* ═══════════════════════════════════════════════════════════════════════════ GLOBÁLNE ŠTÝLY ═══════════════════════════════════════════════════════════════════════════ */ /* box-sizing pre VŠETKY elementy — zjednodušuje layout kalkulácie */ * { box-sizing: border-box; } /* Základné nastavenie pre */ body { font-family: 'Roboto', sans-serif; /* Google Font pre bežný text */ background: #f5f5f5; /* Svetlo-šedé pozadie */ color: #333; /* Tmavo-šedý text */ min-height: 100vh; /* Minimálna výška = celá obrazovka */ } /* Nadpisy a brand používajú pätkovú fontu pre eleganciu */ h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: 'Merriweather', serif; /* Google Font — serif */ } /* ═══════════════════════════════════════════════════════════════════════════ NAVBAR (navigačný panel hore) [BOD 10] ═══════════════════════════════════════════════════════════════════════════ */ /* Tieň pod navbarom pre oddelenie od obsahu */ .navbar { padding: 10px 0; box-shadow: 0 2px 6px rgba(0,0,0,.25); /* x-offset y-offset blur farba */ } /* Väčší a tučný brand text */ .navbar-brand { font-size: 1.25rem; font-weight: 700; } /* Zaoblené navigačné odkazy s plynulým hover efektom */ .navbar-nav .nav-link { padding: 6px 12px; /* Vnútorný odsadenie */ border-radius: 4px; /* Zaoblené rohy */ transition: background .2s; /* Plynulá zmena pozadia (200ms) */ margin-left: 4px; /* Medzera medzi odkazmi */ } /* Hover efekt — polopriesvitný biely podklad */ .navbar-nav .nav-link:hover { background: rgba(255,255,255,.15); } /* Aktívna položka — výraznejšie zvýraznenie */ .navbar-nav .nav-link.active { background: rgba(255,255,255,.2); font-weight: 600; /* Semi-bold */ } /* ═══════════════════════════════════════════════════════════════════════════ TABUĽKY (zoznam olympionikov, história prihlásení) [BOD 4, 10] ═══════════════════════════════════════════════════════════════════════════ */ /* Základný border a zaoblenie tabuľky */ .table { border: 1px solid #dee2e6; /* Svetlo-šedý border */ border-radius: 8px; /* Zaoblené rohy */ overflow: hidden; /* Skryje obsah presahujúci zaoblenie */ } /* Tmavé hlavičky stĺpcov */ .table th { font-family: 'Merriweather', serif; /* Serif font pre hlavičky */ font-size: .85rem; /* Menšie písmo */ padding: 11px 14px; /* Vnútorný odsadenie */ background: #212529; /* Bootstrap dark farba */ color: #fff; /* Biely text */ border: none; /* Bez vnútorných čiar */ } /* Bunky tabuľky */ .table td { padding: 9px 14px; /* Rovnomerné odsadenie */ vertical-align: middle; /* Vertikálne centrovanie textu */ border-color: #eee; /* Svetlejšie oddelovacie čiary */ } /* Hover efekt na riadkoch — žlté zvýraznenie */ .table tbody tr:hover { background: #fff3cd; /* Svetlo-žltá (Bootstrap warning light) */ cursor: pointer; /* Kurzor ako ruka */ transition: background .15s; /* Plynulá zmena */ } /* Odkazy v tabuľke (meno atleta) */ .table a { color: #0d6efd; /* Bootstrap primary modrá */ text-decoration: none; /* Bez podčiarknutia */ font-weight: 600; /* Semi-bold */ } /* Hover — podčiarknutie a tmavšia modrá */ .table a:hover { text-decoration: underline; color: #0a58ca; } /* ═══════════════════════════════════════════════════════════════════════════ FORMULÁRE (login, register, profile, import) [BOD 5, 10] ═══════════════════════════════════════════════════════════════════════════ */ /* Štýl input a select polí */ .form-control, .form-select { border: 2px solid #dee2e6; /* Hrubší border pre lepšiu viditeľnosť */ border-radius: 5px; /* Mierne zaoblenie */ padding: 9px 13px; /* Pohodlné odsadenie */ font-size: .95rem; /* Mierne menšie písmo */ background: #fff; /* Biele pozadie */ transition: border-color .2s, box-shadow .2s; /* Plynulé zmeny */ } /* Hover na inpute — tmavší border */ .form-control:hover, .form-select:hover { border-color: #adb5bd; } /* Focus stav (keď je input aktívny/kliknutý) */ .form-control:focus, .form-select:focus { border-color: #0d6efd; /* Modrý border */ box-shadow: 0 0 0 3px rgba(13,110,253,.15); /* Modrý glow efekt */ outline: none; /* Zrušíme defaultný outline */ } /* Nevalidný input (is-invalid z validation.js) — červená */ .form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; /* Bootstrap danger červená */ background: #fff8f8; /* Mierne ružové pozadie */ } /* Validný input (is-valid z validation.js) — zelená */ .form-control.is-valid, .form-select.is-valid { border-color: #198754; /* Bootstrap success zelená */ background: #f8fff9; /* Mierne zelenkavé pozadie */ } /* ═══════════════════════════════════════════════════════════════════════════ TLAČIDLÁ [BOD 10] ═══════════════════════════════════════════════════════════════════════════ */ /* Základný štýl pre všetky tlačidlá */ .btn { padding: 9px 18px; border-radius: 5px; /* Zaoblené rohy */ font-weight: 600; /* Semi-bold text */ transition: all .2s; /* Plynulé zmeny pri hover */ border: 2px solid transparent; /* Transparentný border (pre outline variant) */ } /* Tmavé primárne tlačidlo */ .btn-dark { background: #212529; border-color: #212529; color: #fff; } /* Hover — mierne svetlejšie */ .btn-dark:hover { background: #343a40; border-color: #343a40; } /* Sivé sekundárne tlačidlo */ .btn-secondary { background: #6c757d; border-color: #6c757d; color: #fff; } .btn-secondary:hover { background: #5c636a; } /* Obrysové červené tlačidlo (vymazanie dát) */ .btn-outline-danger { border: 2px solid #dc3545; /* Červený obrys */ color: #dc3545; /* Červený text */ background: transparent; /* Priehľadné pozadie */ } /* Hover — vyplnené červené */ .btn-outline-danger:hover { background: #dc3545; color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ KARTY (cards — import, profil, detail) [BOD 10] ═══════════════════════════════════════════════════════════════════════════ */ /* Jemný tieň a zaoblenie pre karty */ .card { border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); /* Jemný tieň */ margin-bottom: 18px; } /* Hlavička karty — vyplnená tmavým */ .card-header { padding: 12px 18px; border-radius: 8px 8px 0 0 !important; /* Zaoblenie len hore */ font-weight: 600; } /* Telo karty */ .card-body { padding: 20px; } /* ═══════════════════════════════════════════════════════════════════════════ ALERTY (výsledky akcií — úspech, chyba, výstraha) [BOD 10] ═══════════════════════════════════════════════════════════════════════════ */ /* Základný alert štýl */ .alert { border-radius: 6px; border: none; /* Bez border (nahradený left border) */ padding: 12px 16px; margin-bottom: 18px; font-size: .95rem; } /* Úspech — zelený ľavý pás */ .alert-success { background: #d1e7dd; /* Svetlo-zelená */ color: #0a3622; /* Tmavo-zelený text */ border-left: 4px solid #198754; /* Plný zelený ľavý border */ } /* Chyba — červený ľavý pás */ .alert-danger { background: #f8d7da; /* Svetlo-ružová */ color: #58151c; /* Tmavo-červený text */ border-left: 4px solid #dc3545; } /* Výstraha — žltý ľavý pás */ .alert-warning { background: #fff3cd; /* Svetlo-žltá */ color: #664d03; /* Tmavo-hnedý text */ border-left: 4px solid #ffc107; } /* ═══════════════════════════════════════════════════════════════════════════ BADGES (štítky — Google/Lokálne, umiestnenia) [BOD 10] ═══════════════════════════════════════════════════════════════════════════ */ .badge { padding: 5px 9px; border-radius: 4px; font-size: .8rem; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE (mobilný layout) [BOD 10] ═══════════════════════════════════════════════════════════════════════════ */ /** * KONCEPT — @media (max-width: 768px): * Pravidlá sa aplikujú LEN keď šírka viewportu < 768px (tablety, mobily). * Zmenšujeme fonty, padding, a prispôsobujeme layout pre menšie obrazovky. */ @media (max-width: 768px) { .container { padding-left: 14px; padding-right: 14px; } h1 { font-size: 1.4rem; } /* Menšie nadpisy na mobile */ .table th, .table td { padding: 7px 9px; /* Menší padding v tabuľke */ font-size: .85rem; /* Menší text */ } .card-body { padding: 14px; } /* Menší padding v kartách */ .navbar-brand { font-size: 1.1rem; } /* Menší brand */ } /* ═══════════════════════════════════════════════════════════════════════════ COOKIE CONSENT BANNER (GDPR) [BOD 10] ═══════════════════════════════════════════════════════════════════════════ */ /** * KONCEPT — position: fixed: * Element je pripnutý relatívne k viewportu (nie k dokumentu). * bottom:0, left:0, right:0 — zaberá celú šírku na spodku. * z-index: 9999 — vždy navrchu (nad ostatným obsahom). */ #cookieBanner { position: fixed; bottom: 0; left: 0; right: 0; background: #212529; /* Tmavé pozadie (konzistentné s navbarom) */ color: #fff; padding: 14px 22px; display: flex; /* Flexbox — horizontálny layout */ align-items: center; /* Vertikálne centrovanie */ justify-content: space-between; /* Text vľavo, tlačidlá vpravo */ gap: 14px; /* Medzera medzi text a tlačidlami */ z-index: 9999; /* Vždy navrchu */ box-shadow: 0 -3px 10px rgba(0,0,0,.25); /* Tieň smerom hore */ font-size: .9rem; } /* Odkazy v banneri — žltá farba pre kontrast */ #cookieBanner a { color: #ffc107; text-decoration: underline; } /* Tlačidlá v banneri */ #cookieBanner .btn { white-space: nowrap; /* Zabrániť zalamovaniu textu */ padding: 7px 18px; font-size: .9rem; } /* Na úzkych obrazovkách — stĺpcový layout banneru */ @media (max-width: 576px) { #cookieBanner { flex-direction: column; /* Stĺpcový layout */ text-align: center; /* Centrovanie textu */ } } /* ═══════════════════════════════════════════════════════════════════════════ TOAST NOTIFIKÁCIE **[2.7]** ═══════════════════════════════════════════════════════════════════════════ */ /** * KONCEPT — Bootstrap Toast: * Malé notifikačné okno v rohu obrazovky pre informáciu o výsledku * operácie. Automaticky zmizne po niekoľkých sekundách. * Štýlujeme cez text-bg-success/danger triedy priamo v JS. */ .toast { min-width: 280px; font-size: .95rem; box-shadow: 0 4px 12px rgba(0,0,0,.2); } /* ═══════════════════════════════════════════════════════════════════════════ CRUD AKČNÉ TLAČIDLÁ (manage.php) **[2.5]** ═══════════════════════════════════════════════════════════════════════════ */ .btn-outline-primary { border: 2px solid #0d6efd; color: #0d6efd; background: transparent; font-size: .8rem; padding: 4px 10px; } .btn-outline-primary:hover { background: #0d6efd; color: #fff; } /* Menšie danger tlačidlo pre riadky tabuľky */ .table .btn-sm { font-size: .78rem; padding: 3px 8px; }