3 changed files with 731 additions and 1 deletions
@ -0,0 +1,728 @@ |
|||
@charset "utf-8"; /* vynuť utf-8 */ |
|||
|
|||
.button { |
|||
margin: 10px 0 10px 0; |
|||
padding: 4px 0; /*vertikální centování textu*/ |
|||
text-align: center; |
|||
background-color: var(--hlavni-oranzova); |
|||
color: var(--barva-pozadi); |
|||
font-size: 150%; |
|||
font-weight: bold; |
|||
font-variant: small-caps; |
|||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); |
|||
} |
|||
.button:hover { |
|||
position: relative; |
|||
top: 2px; |
|||
left: 2px; |
|||
background-color: #df490e; |
|||
} |
|||
/******************/ |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/* Rozložení webu a jeho prvky (hlavička, menu, footer) */ |
|||
|
|||
/**** KONTEJNER ****/ |
|||
div.kontejner { /* Ne container, aby se to netlouklo s bootstrapem. */ |
|||
width: 970px; |
|||
margin: auto; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
padding: 0; |
|||
} |
|||
|
|||
.org-logged-in div.kontejner { |
|||
margin-top: var(--login-bar-height); |
|||
} |
|||
|
|||
div.kontejner div.kontent-wrapper { |
|||
padding-bottom: var(--footer-height); |
|||
} |
|||
|
|||
div.kontejner div.kontent-wrapper div.kontent { |
|||
padding: 15px 30px; |
|||
} |
|||
|
|||
/* Roztáhne obsah z containeru na celou šířku obrazovky: */ |
|||
.full_width { |
|||
width: 100vw; |
|||
margin-left: calc(-50vw + 485px); |
|||
} |
|||
|
|||
/* Na úzkém displeji nechceme nic dělat. */ |
|||
@media(max-width: 860px) { |
|||
.full_width { |
|||
margin-left: 0; |
|||
width: unset; |
|||
} |
|||
} |
|||
/*******************/ |
|||
|
|||
|
|||
/**** HLAVIČKA ****/ |
|||
#header { |
|||
position: relative; |
|||
background: url("../images/header/vikendovka.jpg") no-repeat center top; /* poměr 350:970, TODO: aby to nemuselo být přesně na pixely */ |
|||
background-size: 100%; |
|||
top: 58px; |
|||
} |
|||
|
|||
#header img.logo { |
|||
width: 100%; |
|||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); |
|||
} |
|||
|
|||
#header img.logo-mobile { |
|||
display: none; |
|||
} |
|||
|
|||
#header .no-mobile { |
|||
background-size: contain; |
|||
} |
|||
/******************/ |
|||
|
|||
|
|||
/**** Footer ****/ |
|||
#footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: url("../images/mozaika-footer.svg") no-repeat top center; |
|||
height: var(--footer-height); |
|||
background-size: 100%; |
|||
filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.4)); |
|||
padding-top: 3.5%; |
|||
} |
|||
|
|||
#footer p.license { |
|||
text-align: center; |
|||
font-weight: 400; |
|||
bottom: 0; |
|||
} |
|||
|
|||
#footer p.license a { |
|||
color: #333; |
|||
} |
|||
|
|||
@media (max-width: 650px) { |
|||
#footer { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
p.license-mobile { |
|||
display: none; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
@media (max-width: 650px) { |
|||
p.license-mobile { |
|||
position: relative; |
|||
display: block; |
|||
font-size: 90%; |
|||
background-color: var(--hlavni-oranzova); |
|||
padding: 5%; |
|||
text-align: justify; |
|||
} |
|||
} |
|||
/****************/ |
|||
|
|||
|
|||
/**** LOGIN BAR ****/ |
|||
div.login-bar { |
|||
background: var(--orgovska-fialova); |
|||
color: var(--svetla-oranzova); |
|||
width: 100%; |
|||
|
|||
position: fixed; |
|||
margin-top: calc(-1 * var(--login-bar-height)); |
|||
min-height: var(--login-bar-height); |
|||
z-index: 4086; |
|||
|
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
div.login-bar div { |
|||
display: inline; |
|||
} |
|||
|
|||
div.login-bar a.LOGIN-ref-admin { |
|||
display: inline; |
|||
color: var(--barva-pozadi); |
|||
} |
|||
|
|||
div.login-bar .LOGIN_napis-webarum { |
|||
display: inline; |
|||
color: var(--barva-pozadi); |
|||
float: right; |
|||
} |
|||
|
|||
div.login-bar .LOGIN_napis-webarum a { |
|||
color: var(--svetla-oranzova); |
|||
text-decoration: underline; |
|||
} |
|||
/*******************/ |
|||
|
|||
|
|||
/* stránka přes celý displej */ |
|||
@media (max-width: 970px) { |
|||
#header { |
|||
background-size: 100%; |
|||
} |
|||
|
|||
#header img.logo { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
/* malý tablet, mobil */ |
|||
@media (max-width: 650px) { |
|||
#header { |
|||
width: 100%; |
|||
top: 0; |
|||
background-image: none; |
|||
} |
|||
|
|||
#header img.logo { |
|||
display: none; |
|||
} |
|||
|
|||
#header img.logo-mobile { |
|||
display: block; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
filter: drop-shadow(0px 0 5px rgba(0, 0, 0, 0.4)); |
|||
margin-bottom: 3px; |
|||
} |
|||
|
|||
#header .no-mobile{ |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/**** MENU ****/ |
|||
|
|||
ul.menu { |
|||
width: 100%; |
|||
padding: 0; |
|||
margin-top: -5px; /* posune celé menu nahoru (pak potřeba zvětšit mezeru mezi menu a submenu) */ |
|||
|
|||
font-variant: small-caps; |
|||
} |
|||
|
|||
ul.menu a { |
|||
text-decoration: none; |
|||
font-weight: bold; |
|||
font-size: 105%; |
|||
} |
|||
|
|||
ul.menu li { |
|||
margin: 0; |
|||
display: inline-block; |
|||
width: 16.666667%; |
|||
text-align: center; |
|||
|
|||
font-size: 140%; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
ul.menu li >a:hover, >a:active { |
|||
color: black; |
|||
} |
|||
|
|||
ul.menu li.active>a { |
|||
color: var(--svetla-oranzova); |
|||
} |
|||
|
|||
ul.menu ul.submenu { |
|||
background-color: var(--hlavni-oranzova); |
|||
margin-top: 10px; /* mezera mezi hlavním menu a submenu */ |
|||
margin-bottom: 10px; |
|||
padding-top: 10px; |
|||
padding-bottom: 5px; |
|||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); |
|||
|
|||
z-index: 50; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
ul.menu ul.submenu li { |
|||
width: auto; |
|||
padding: 0 20px 0 20px; |
|||
display: inline-block; |
|||
} |
|||
|
|||
ul.menu ul.submenu li >a { |
|||
color: var(--svetla-oranzova); |
|||
text-decoration: none; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
ul.menu ul.submenu li >a :hover { |
|||
color: black; |
|||
} |
|||
|
|||
ul.menu ul.submenu li.active>a, .parentactive ul li:first-child>a { |
|||
color: black; |
|||
} |
|||
|
|||
@media (max-width: 970px) { |
|||
ul.menu { |
|||
font-size: 90%; |
|||
margin-top: -7px; |
|||
} |
|||
|
|||
ul.menu li { |
|||
margin-top: 10px; /* posunutí textu hlavního menu níže */ |
|||
} |
|||
|
|||
ul.submenu { |
|||
margin-top: 8px; /* mezera mezi hlavním menu a submenu */ |
|||
} |
|||
|
|||
ul.submenu li { |
|||
margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */ |
|||
} |
|||
} |
|||
|
|||
@media(max-width: 800px) { |
|||
ul.menu { |
|||
font-size: 80%; |
|||
margin-top: -2px; |
|||
} |
|||
|
|||
ul.menu li { |
|||
margin-top: 10px; /* posunutí textu hlavního menu níže */ |
|||
} |
|||
|
|||
ul.submenu { |
|||
margin-top: 8px; /* mezera mezi hlavním menu a submenu */ |
|||
} |
|||
ul.submenu li { |
|||
margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */ |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 650px) { |
|||
ul.menu { |
|||
display: none; |
|||
} |
|||
|
|||
ul.menu_mobile { |
|||
display: block; |
|||
z-index: 10; |
|||
position: sticky; |
|||
font-variant: small-caps; |
|||
font-size: 150%; |
|||
font-weight: bold; |
|||
list-style-type: none; |
|||
padding-top: 3px; |
|||
padding-bottom: 3px; |
|||
padding-left: 12px; |
|||
} |
|||
|
|||
ul.menu_mobile a:active, ul.menu_mobile a:hover, ul.menu_mobile a:focus { |
|||
text-decoration: none; |
|||
color: black; |
|||
} |
|||
|
|||
ul.menu_mobile ul { |
|||
list-style-type: none; |
|||
font-size: 90%; |
|||
color: black; /*černé šipky submenu*/ |
|||
} |
|||
|
|||
ul.menu_mobile ul li > a { |
|||
color: black; |
|||
} |
|||
|
|||
ul.menu_mobile ul li::before { |
|||
content: ' \276D '; /*https://www.w3schools.com/cssref/css_entities.asp*/ |
|||
} |
|||
|
|||
ul.menu_mobile br { |
|||
display: none; |
|||
} |
|||
} /* konec @media */ |
|||
/**************/ |
|||
|
|||
/**** ZBYTEK ****/ |
|||
/* (konkrétní stránky) */ |
|||
|
|||
/* Titulní stránka */ |
|||
.titulnistrana { |
|||
display: flex; |
|||
text-align: justify; |
|||
|
|||
@media(max-width: 800px){ |
|||
.titulnistrana { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.titulnistrana h1 { text-align: center; } |
|||
|
|||
.titulnistrana .TITULNI_STRANA_zjistit_vic { |
|||
text-align: center; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.titulnistrana .TITULNI_STRANA_zjistit_vic hr { |
|||
display: none; |
|||
} |
|||
|
|||
@media(max-width: 800px){ |
|||
.titulnistrana .TITULNI_STRANA_zjistit_vic hr { |
|||
display: flex; |
|||
} |
|||
} |
|||
|
|||
@media(max-width: 800px) { |
|||
.titulnistrana .TITULNI_STRANA_graf { |
|||
padding-top: 40px; |
|||
} |
|||
} |
|||
|
|||
.titulnistrana .TITULNI_STRANA_graf .TITULNI_STRANA_graf-svg { |
|||
display: flex; |
|||
} |
|||
|
|||
.titulnistrana .TITULNI_STRANA_graf .TITULNI_STRANA_graf-svg #svg-graf { |
|||
width: 100%; |
|||
height: auto; |
|||
margin: 30px; |
|||
} |
|||
|
|||
@media(max-width: 800px){ |
|||
.titulnistrana .TITULNI_STRANA_graf .TITULNI_STRANA_graf-svg #svg-graf { |
|||
max-width: 500px; |
|||
padding: 10px; |
|||
margin: auto; |
|||
} |
|||
} |
|||
|
|||
.titulnistrana .TITULNI_STRANA_obsah { |
|||
width: 66%; |
|||
} |
|||
|
|||
@media(max-width: 800px){ |
|||
.titulnistrana .TITULNI_STRANA_obsah { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.titulnistrana .TITULNI_STRANA_vitej_titulka, .TITULNI_STRANA_temata_titulka { |
|||
width: 49%; |
|||
padding: 10px; |
|||
display: table-cell; |
|||
} |
|||
|
|||
@media (max-width: 650px) { |
|||
.titulnistrana .TITULNI_STRANA_vitej_titulka, .TITULNI_STRANA_temata_titulka { |
|||
width: 100%; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.titulnistrana .TITULNI_STRANA_novinky { |
|||
width: 33%; |
|||
padding: 10px; |
|||
} |
|||
|
|||
@media(max-width: 800px){ |
|||
.titulnistrana .TITULNI_STRANA_novinky { |
|||
width: 100%; |
|||
max-width: 500px; |
|||
margin: auto; |
|||
} |
|||
} |
|||
|
|||
|
|||
/* Stránky Aktuální ročník */ |
|||
.stranka_aktualni_zadani { |
|||
text-align: center; |
|||
} |
|||
|
|||
.stranka_aktualni_zadani #AKTUALNI_ZADADNI_obrazek { |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
.stranka_aktualni_zadani div.AKTUALNI_ZADANI_termin { |
|||
text-align: center; |
|||
font-size: large; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
@media (max-width: 420px) { |
|||
.stranka_aktualni_zadani div.AKTUALNI_ZADANI_termin { |
|||
font-size: small; |
|||
} |
|||
} |
|||
|
|||
.stranka_aktualni_zadani .AKTUALNI_ZADANI_datum { |
|||
color: var(--hlavni-oranzova); |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
/* Stránka Jak řešit */ |
|||
.jakresit svg { |
|||
width: 33%; |
|||
padding: 10px; |
|||
filter: none; |
|||
} |
|||
|
|||
@media(max-width: 860px) { |
|||
.jakresit svg { |
|||
margin: auto; |
|||
display: grid; |
|||
width: 100%; |
|||
max-width: 360px; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/**** OZNAČENÍ NE-PUBLIC ČÁSTÍ ****/ |
|||
.mam-org-only { |
|||
background: var(--orgovska-svetla-fialova); |
|||
padding: 10px; |
|||
margin: 10px -10px; |
|||
border: var(--orgovska-fialova) 2px dashed; |
|||
} |
|||
|
|||
.mam-org-only .mam-org-only { |
|||
border: 0; |
|||
} |
|||
|
|||
.mam-org-only li { |
|||
padding: 3px 0; |
|||
margin: -2px 0; |
|||
} |
|||
/**********************************/ |
|||
|
|||
|
|||
|
|||
/**** OTÁČECÍ KARTY ****/ |
|||
/* (orgové, archiv) */ |
|||
.flip-card { |
|||
perspective: 1000px; /* Remove this if you don't want the 3D effect */ |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
/* This container is needed to position the front and back side */ |
|||
.flip-card .flip-card-inner { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: transform 0.8s; |
|||
transform-style: preserve-3d; |
|||
} |
|||
|
|||
/* Do an horizontal flip when you move the mouse over the flip box container */ |
|||
.flip-card:hover .flip-card-inner { |
|||
transform: rotateY(180deg); |
|||
} |
|||
|
|||
/* Position the front and back side */ |
|||
.flip-card .flip-card-front, .flip-card-back { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
-webkit-backface-visibility: hidden; /* Safari */ |
|||
backface-visibility: hidden; |
|||
} |
|||
|
|||
.flip-card div.flip-card-foto, div.flip-card-foto img { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
/* Pokud je na přední straně něco proklikávacího (třeba celá fotka), tak na dotykových zařízeních nemůže proklikávat, aby se dalo otáčet */ |
|||
@media(hover: none) { |
|||
.flip-card div.flip-card-foto, div.flip-card-foto img a { pointer-events: none; } |
|||
} |
|||
|
|||
/* Style the back side */ |
|||
.flip-card-back { |
|||
transform: rotateY(180deg); |
|||
padding: 10px; |
|||
padding-top: 20px; |
|||
} |
|||
} |
|||
/***********************/ |
|||
|
|||
|
|||
/**** TABULKY ****/ |
|||
|
|||
/** Tabulka s čárami mezi sloupci **/ |
|||
/* Např. výsledkovky */ |
|||
|
|||
.tabulka_oramovane_sloupce { |
|||
border: solid 2px; |
|||
} |
|||
|
|||
.tabulka_oramovane_sloupce td:first-child, .tabulka_oramovane_sloupce th:first-child { |
|||
border-left: none; |
|||
border-right: solid 1px; |
|||
} |
|||
|
|||
.tabulka_oramovane_sloupce td:nth-child(2), .tabulka_oramovane_sloupce th:nth-child(2) { |
|||
border-left: none; |
|||
} |
|||
|
|||
.tabulka_oramovane_sloupce td, .tabulka_oramovane_sloupce th { |
|||
padding: 0.1em 0.3em; |
|||
border-left: solid 1px; |
|||
} |
|||
|
|||
.tabulka_oramovane_sloupce thead th, .tabulka_oramovane_sloupce thead td { |
|||
border-bottom: solid 1px; |
|||
} |
|||
/***********************************/ |
|||
|
|||
|
|||
/** Tabulka se střídajícími se barvami řádků **/ |
|||
/* Skoro jakákoliv tabulka kromě výsledkovek */ |
|||
|
|||
.barevna_tabulka td th { |
|||
padding: 1px 10px 1px 10px; |
|||
} |
|||
|
|||
.barevna_tabulka tbody tr:nth-child(even), thead tr { |
|||
background: var(--svetlounka-oranzova); |
|||
} |
|||
|
|||
.barevna_tabulka tbody tr:nth-child(odd) { |
|||
background: var(--barva-pozadi); |
|||
} |
|||
/**********************************************/ |
|||
|
|||
|
|||
/** Tabulka, kde první řádek a sloupec je pořád vidět **/ |
|||
/* Např. tabulka odevzdaných řešení, nebo výsledkovky */ |
|||
.tabulka_s_uchycenym_radkem_a_sloupcem { |
|||
/* Omezí výšku a šířku, aby bylo příjemné na scrollování a zapne scrollování */ |
|||
display: block; |
|||
width: fit-content; /* display: block; roztahuje na celou šířku */ |
|||
max-height: 80vh; |
|||
overflow: auto; |
|||
max-width: 90%; /* (FIXME asi není potřeba u tabulek, co nejsou na celou obrazovku) */ |
|||
margin-left: 5%; /* Vystředování (FIXME není potřeba u tabulek, co nejsou na celou obrazovku) */ |
|||
|
|||
border-collapse: separate; /* Pokud má tabulka orámování, je potřeba ho separovat, aby dodrželo position: sticky; */ |
|||
border-spacing: 0; |
|||
} |
|||
|
|||
/* Uchytí první řádek */ |
|||
.tabulka_s_uchycenym_radkem_a_sloupcem thead tr { |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 2; |
|||
} |
|||
|
|||
/* Uchytí první sloupec */ |
|||
.tabulka_s_uchycenym_radkem_a_sloupcem td:first-child, .tabulka_s_uchycenym_radkem_a_sloupcem th:first-child { |
|||
position: sticky; |
|||
left: 0; |
|||
background: inherit; /* (Snad) zneprůhlední první sloupec */ |
|||
z-index: 1; |
|||
} |
|||
/*******************************************************/ |
|||
|
|||
/** Tabulka mající všechna ohraničení **/ |
|||
.plne_ohranicena_tabulka { |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
.plne_ohranicena_tabulka tr th, .plne_ohranicena_tabulka tr td { |
|||
border: 1px solid black; |
|||
padding: 1px 10px 1px 10px; |
|||
} |
|||
/***************************************/ |
|||
|
|||
/** Výsledkovky **/ |
|||
.vysledkovka, .tabulka_oramovane_sloupce td:first-child, .vysledkovka, .tabulka_oramovane_sloupce th:first-child { position: unset; } |
|||
.vysledkovka, .tabulka_oramovane_sloupce td:nth-child(2), .vysledkovka, .tabulka_oramovane_sloupce th:nth-child(2) { |
|||
border-right: solid 1px; |
|||
|
|||
position: sticky; |
|||
left: 0; |
|||
background: inherit; /* (Snad) zneprůhlední druhý sloupec */ |
|||
z-index: 1; |
|||
} |
|||
.vysledkovka, .tabulka_oramovane_sloupce td:nth-child(3), .vysledkovka, .tabulka_oramovane_sloupce th:nth-child(3) { |
|||
border-left: none; |
|||
} |
|||
/*****************/ |
|||
|
|||
|
|||
/** Tabulka mých (řešitelových) řešení **/ |
|||
.moje_reseni tr th, .moje_reseni tr td { |
|||
text-align: center; |
|||
} |
|||
|
|||
.moje_reseni tr td.problem { text-align: left; } |
|||
/****************************************/ |
|||
|
|||
|
|||
/** Detail řešení **/ |
|||
.bodovani>input { |
|||
width: 4em; |
|||
} |
|||
|
|||
.bodovani>input::placeholder { |
|||
color: lightgray; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.bodovani>input::-webkit-input-placeholder { /* Edge */ |
|||
color: lightgray; |
|||
} |
|||
|
|||
/*******************/ |
|||
/*****************/ |
|||
|
|||
|
|||
.novinka .novinka_obrazek { |
|||
margin: 10px 0 10px 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.novinka .novinka_datum { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.novinka .novinka_autor { |
|||
text-align: right; |
|||
font-style: italic; |
|||
} |
|||
|
|||
/**** FORMULÁŘE ****/ |
|||
div.gdpr { |
|||
font-size: 6pt; |
|||
} |
|||
|
|||
div.gdpr p { |
|||
font-size: 6pt; |
|||
margin-bottom: .66em; |
|||
} |
|||
|
|||
/*******************/ |
|||
|
|||
|
|||
Loading…
Reference in new issue