/* * SmartEdu — štýly témy. * * Farby, písma, medzery, šírky, tlačidlá a okraje patria do theme.json. * Sem píšeme len to, čo theme.json nevie: stavy pri prejazde myšou, karty, * značky a projektorový režim. Všetko naše má predponu .se-. * Hodnoty berieme z premenných z theme.json, nie natvrdo. */ /* --- Prístupnosť ------------------------------------------------------- */ /* Viditeľné zameranie klávesnicou. Nikdy neodstraňovať. */ :where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } /* Text len pre čítačky obrazovky. */ .se-skryte-vizualne { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect( 0 0 0 0 ); clip-path: inset( 50% ); white-space: nowrap; border: 0; } /* Odkaz „Preskočiť na obsah“ — viditeľný až pri zameraní klávesnicou. */ .se-preskoc:not( :focus ):not( :focus-within ) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect( 0 0 0 0 ); clip-path: inset( 50% ); white-space: nowrap; } /* Kto si vypol animácie, nech ich nemá. */ @media ( prefers-reduced-motion: reduce ) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Karty a dlaždice --------------------------------------------------- */ .se-karta, .se-dlazdica { background-color: var( --wp--preset--color--podklad ); box-shadow: var( --wp--preset--shadow--jemny ); transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease; } .se-karta:hover, .se-dlazdica:hover, .se-karta:focus-within, .se-dlazdica:focus-within { border-color: var( --wp--preset--color--primarna ); box-shadow: var( --wp--preset--shadow--karta ); } .se-dlazdica:hover { transform: translateY( -2px ); } /* Dlaždice v stĺpcoch majú rovnakú výšku. */ .wp-block-column > .se-dlazdica, .wp-block-column > .se-karta { height: 100%; } /* --- Značka (typ hry, typ materiálu) ----------------------------------- */ .se-znacka { display: inline-block; padding: 0.125rem 0.75rem; border: 1px solid var( --wp--preset--color--okraj ); border-radius: 999px; background-color: var( --wp--preset--color--podklad-jemny ); color: var( --wp--preset--color--text ); font-weight: 600; } /* --- Odkazy na tmavom páse --------------------------------------------- */ /* Pás s podkladom farby „text“ je tmavý (vo tmavom variante naopak svetlý). Bežné odkazy v ňom musia prevziať farbu podkladu, aby zostali čitateľné. */ .has-text-background-color a:not( .wp-block-button__link ) { color: var( --wp--preset--color--podklad ); } /* --- Obsah ------------------------------------------------------------- */ /* Citát dostane jemnú zvislú linku namiesto úvodzoviek. */ .wp-block-quote { padding-left: var( --wp--preset--spacing--30 ); border-left: 4px solid var( --wp--preset--color--akcent ); font-style: normal; } /* Obrázky nikdy nepretečú a nepokazia rozloženie. */ img { max-width: 100%; height: auto; } /* Tabuľky sa na mobile dajú posunúť do strany namiesto pretečenia stránky. */ .wp-block-table { overflow-x: auto; } /* --- Projektorový režim ------------------------------------------------ */ /* * Trieda .se-projektor na zväčší písmo a tlačidlá pre premietanie * na tabuľu. Prepínač a automatické zapnutie pribudnú pri hrách a nástrojoch * (fázy F3 a F5) — tam, kde to má zmysel. Na bežnom webe sa nezapína samo, * aby web na notebooku s veľkou obrazovkou nebol zbytočne obrovský. */ .se-projektor { font-size: 1.5rem; line-height: 1.5; } .se-projektor :where( h1, h2, h3 ) { line-height: 1.15; } .se-projektor :where( h1 ) { font-size: 3.25rem; } .se-projektor :where( h2 ) { font-size: 2.5rem; } .se-projektor :where( h3 ) { font-size: 2rem; } .se-projektor .wp-element-button { padding: 1rem 2rem; font-size: 1.375rem; } .se-projektor :where( .se-karta, .se-dlazdica ) { border-width: 2px; } /* --- Formuláre ---------------------------------------------------------- */ /* * Polia majú okraj s kontrastom aspoň 3:1 (WCAG 1.4.11) a výšku 44 px, * aby sa dali pohodlne trafiť prstom na tablete. * Tlačidlá formulárov majú triedu wp-element-button, takže preberajú * vzhľad tlačidiel z theme.json a netreba ich tu riešiť. */ input[ type="text" ], input[ type="search" ], input[ type="email" ], input[ type="url" ], input[ type="password" ], input[ type="number" ], input[ type="tel" ], input[ type="date" ], textarea, select, .wp-block-search__input { min-height: 44px; padding: 0.5rem 0.75rem; border: 1px solid var( --wp--preset--color--text-jemny ); border-radius: 8px; background-color: var( --wp--preset--color--podklad ); color: var( --wp--preset--color--text ); font-family: inherit; font-size: var( --wp--preset--font-size--medium ); } textarea { min-height: 8rem; } /* Popis poľa nad poľom, nie vedľa — lepšie sa číta a funguje na mobile. */ label { display: block; margin-bottom: var( --wp--preset--spacing--10 ); font-size: var( --wp--preset--font-size--small ); font-weight: 600; }