10 changed files with 1421 additions and 1360 deletions
@ -0,0 +1,28 @@ |
|||
CSS (a další styly na webu) |
|||
=========================== |
|||
|
|||
Inspirován `css-trick článkem <https://css-tricks.com/methods-organize-css/>`_ jsem se rozhodl rozdělit |
|||
CSSka do |
|||
|
|||
- Konstant (``constants.css``), které jsou využívány na mnoha místech CSSek |
|||
- Nastylování html tagů (``base.css``) |
|||
- Layoutu (``layout.css``), což je to, co určuje celkové rozložení stránky |
|||
- Jednotlivých prvků (``modules.css``) |
|||
|
|||
Dále jsem separoval CSSka pro **galerii** (potřebuje hodně specifických stylů). Stejně tak **korekturovátko** má styly separátně. |
|||
|
|||
Dále web (asi) používá dva externí frameworky (v separátních složkách – mají k sobě i JS a podobné věci): |
|||
|
|||
- bootstrap: dělá nějaké basic stylování, *web je na něm hodně závislý* (například jsem zjistil, že bootstrap přidává ``font-size:14px``, bez čehož se web úplně rozpadne) |
|||
- pretty photo: ??? (něco s obrázky) |
|||
|
|||
Pak jsou tu ``mamweb-dev.css`` a ``printtable.css``, co jsem si ještě nerozmyslel, co s tím. |
|||
|
|||
Pár myšlenek |
|||
------------ |
|||
|
|||
- Až na pár výjimek (galerii a korekturovátko) bych styly držel v jedné složce a málo souborech, |
|||
protože CSS šíleně dědí všechno možné |
|||
- Chce to dobře pojmenovávat třídy (speciálně aby bylo vidět, co ta třída dělá nebo kde se používá) |
|||
- Chce to hodně komentovat kód (speciálně tam, kde není splněn předchozí bod) |
|||
|
|||
@ -0,0 +1,87 @@ |
|||
@charset "utf-8"; /* vynuť utf-8 */ |
|||
|
|||
/* Obecné styly pro html tagy */ |
|||
|
|||
@font-face { |
|||
font-family: 'OpenSans'; |
|||
src: url("../fonts/OpenSans/OpenSans-Regular.ttf"); |
|||
font-weight: normal; |
|||
} |
|||
|
|||
body { |
|||
font-family: 'OpenSans'; |
|||
background-color: var(--barva-pozadi); |
|||
min-height: 100%; |
|||
} |
|||
|
|||
p { |
|||
/* zarovnání odstavců do bloku */ |
|||
text-align: justify; |
|||
} |
|||
|
|||
|
|||
/**** NADPISY ****/ |
|||
h1, h2, h3, h4 { color: var(--tmava-oranzova); } |
|||
h5, h6 { color: black; } |
|||
|
|||
h1, h2, h3, h4, h5, h6 { |
|||
font-variant: small-caps; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* TODO: odlišit 1 a 2 */ |
|||
h1 { font-size: 200%; } |
|||
h2 { font-size: 200%; } |
|||
h3 { font-size: 160%; } |
|||
h4 { font-size: 140%; } |
|||
h5 { font-size: 140%; } |
|||
h6 { font-size: 120%; } |
|||
|
|||
h1 { |
|||
margin-top: 0px; |
|||
} |
|||
/*****************/ |
|||
|
|||
|
|||
/**** TLAČÍTKA ****/ |
|||
a { |
|||
color: var(--tmava-oranzova); |
|||
} |
|||
|
|||
a:focus, a:hover, a:active { |
|||
color: var(--hlavni-oranzova); |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.button { |
|||
margin: 10px 0px 10px 0px; |
|||
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; |
|||
} |
|||
/******************/ |
|||
|
|||
|
|||
/**** Divné (aneb nevím, co bylo cílem) ****/ |
|||
h1 a:hover { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
img { |
|||
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4)); |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
/*******************************************/ |
|||
@ -0,0 +1,16 @@ |
|||
@charset "utf-8"; /* vynuť utf-8 */ |
|||
|
|||
/* Konstanty (převážně barvy) pro užití v dalších css */ |
|||
|
|||
:root { |
|||
--hlavni-oranzova: #e84e10; |
|||
--tmava-oranzova: #6f2509; |
|||
--svetla-oranzova: #f9d59e; |
|||
--svetlounka-oranzova: rgb(253, 237, 213); |
|||
|
|||
--orgovska-fialova: #6a0043; |
|||
--orgovska-svetla-fialova: #eee4ec; |
|||
|
|||
--barva-pozadi: #fffbf6; |
|||
} |
|||
|
|||
@ -0,0 +1,167 @@ |
|||
@charset "utf-8"; /* vynuť utf-8 */ |
|||
|
|||
/* Galerie */ |
|||
|
|||
|
|||
/* velká fotka */ |
|||
/* zmenšování spolu s oknem prohlížeče */ |
|||
.galerie .obrazek, .titulni_obrazek { |
|||
max-width: 100%; |
|||
height: auto; |
|||
width: auto\9; /* ie8 */ |
|||
} |
|||
|
|||
.predchozi_obrazek{ |
|||
position: absolute; |
|||
z-index: 1; |
|||
width: 33%; |
|||
height: 100%; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.predchozi_obrazek:hover{ |
|||
background-image: url("/static/galerie/prvky/predchozi.svg"); |
|||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); |
|||
background-position: left center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.dalsi_obrazek{ |
|||
position: absolute; |
|||
z-index: 1; |
|||
width: 33%; |
|||
height: 100%; |
|||
left: 67%; |
|||
top: 0; |
|||
} |
|||
.dalsi_obrazek:hover{ |
|||
background-image: url("/static/galerie/prvky/dalsi.svg"); |
|||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); |
|||
background-position: right center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.galerie { |
|||
position: relative; |
|||
text-align: center; |
|||
margin: 20px auto 0 auto; |
|||
} |
|||
|
|||
.galerie h1 { |
|||
text-align: center; |
|||
} |
|||
|
|||
.galerie_hlavicka { |
|||
margin: 30px auto 30px auto; |
|||
} |
|||
|
|||
.popis { |
|||
margin: 10px 10px 30px 0px; |
|||
text-align: center; |
|||
} |
|||
|
|||
#nahoru { |
|||
text-align: center; |
|||
} |
|||
|
|||
/* titulní obrázek hlavní galerie soustředění */ |
|||
|
|||
.galerie_nahledy{ |
|||
/*margin: 1em 0;*/ |
|||
margin: auto; |
|||
padding: 10px; |
|||
text-align: center; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.galerie_nahledy img { |
|||
margin: 10px; |
|||
} |
|||
|
|||
.galerie_nahledy div.navigace { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.galerie_nahled, .podgalerie_nahled { /* frame */ |
|||
display: block; |
|||
position: relative; |
|||
float: left; |
|||
width: 200px; |
|||
height: 200px; |
|||
text-align: center; |
|||
border: solid; |
|||
border-width: 1px; |
|||
border-radius: 4px; |
|||
border-color: var(--svetla-oranzova); |
|||
background-color: var(--barva-pozadi); |
|||
white-space: nowrap; |
|||
margin: 10px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.galerie_nahled:hover, .podgalerie_nahled:hover { |
|||
background-color: var(--svetla-oranzova); |
|||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); |
|||
color: var(--tmava-oranzova); |
|||
} |
|||
|
|||
.vystredeno{ /* helper */ |
|||
display: inline-block; |
|||
height: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.galerie_nahled img { |
|||
vertical-align: middle; |
|||
max-height: 180px; |
|||
max-width: 180px; |
|||
} |
|||
|
|||
.galerie_nahled div { |
|||
position: absolute; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
|
|||
.podgalerie_nahled img { |
|||
margin-top: 20px; |
|||
margin-bottom: 15px; |
|||
max-height: 125px; |
|||
max-width: 167px; |
|||
} |
|||
|
|||
.podgalerie_nahled .nazev_galerie { |
|||
position: absolute; |
|||
width: 100%; |
|||
top: 160px; |
|||
} |
|||
|
|||
|
|||
/* Odkazy na předchozí a následující podgalerii */ |
|||
.galerie_predchozi_nasledujici { |
|||
overflow: auto; |
|||
margin: 10px auto 10px auto; |
|||
} |
|||
|
|||
.galerie_predchozi_nasledujici .predchozi { |
|||
float: left; |
|||
} |
|||
|
|||
.galerie_predchozi_nasledujici .nasledujici { |
|||
float: right; |
|||
} |
|||
|
|||
/* posune kotvu obrázku v galerii o oranžový pruh dolu, aby se pod ním obrázek neschovával */ |
|||
/* https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header */ |
|||
.kotva_obrazku { |
|||
position: absolute; |
|||
width: 0; |
|||
height: 55px; /* viz #title */ |
|||
margin-top: -55px; /* viz #title */ |
|||
} |
|||
@media(max-width: 860px) { |
|||
.kotva_obrazku { |
|||
height: 3em; /* #FIXME nemám páru, jak zjistit výšku toho elementu */ |
|||
margin-top: -3em; /* #FIXME */ |
|||
} |
|||
} |
|||
@ -0,0 +1,766 @@ |
|||
@charset "utf-8"; /* vynuť utf-8 */ |
|||
|
|||
/* Rozložení webu a jeho prvky (hlavička, menu, footer) */ |
|||
|
|||
:root { |
|||
--footer-height: 200px; |
|||
--login-bar-height: 20px; |
|||
} |
|||
|
|||
/**** KONTEJNER ****/ |
|||
div.container { |
|||
width: 970px; |
|||
margin: auto; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
padding: 0px; |
|||
} |
|||
|
|||
|
|||
.org-logged-in div.container { |
|||
margin-top: var(--login-bar-height); |
|||
} |
|||
|
|||
div.content-wrapper { |
|||
padding-bottom: var(--footer-height); |
|||
} |
|||
|
|||
|
|||
div.content { |
|||
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 ****/ |
|||
#title { /*dělá blbosti šířka, je to kvůli fixed pozici, zatím natvrdo, vyřešit*/ |
|||
height: 55px; |
|||
width: 970px; |
|||
position: fixed; |
|||
z-index: 2048; |
|||
background-color: var(--hlavni-oranzova); |
|||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); |
|||
|
|||
font-size: 28px; |
|||
color: var(--barva-pozadi); |
|||
font-weight: 400; |
|||
font-variant: small-caps; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
padding-top: 8px; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
#title-mobile { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
#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 { |
|||
position: absolute center; |
|||
width: 100%; |
|||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); |
|||
} |
|||
|
|||
#header img.logo-mobile { |
|||
display: none; |
|||
} |
|||
|
|||
.no-mobile { |
|||
background-size: contain; |
|||
} |
|||
/******************/ |
|||
|
|||
|
|||
/**** MENU ****/ |
|||
ul.menu_mobile { |
|||
display: none; |
|||
} |
|||
|
|||
nav.nav-button { |
|||
display: none; |
|||
} |
|||
|
|||
div.dropdown-backdrop { /* tohle způsobuje, že funguje mobilní menu */ |
|||
z-index: -1; |
|||
} |
|||
|
|||
/* nové menu */ |
|||
|
|||
ul.menu { |
|||
width: 100%; |
|||
padding: 0px; |
|||
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: 0px; |
|||
display: inline-block; |
|||
width: 16.666667%; |
|||
text-align: center; |
|||
|
|||
font-size: 140%; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
ul.menu li>a:hover { |
|||
color: black; |
|||
} |
|||
|
|||
ul.menu li>a:active { /* TODO: nefunfuje */ |
|||
color: black; |
|||
} |
|||
|
|||
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)); |
|||
} |
|||
|
|||
ul.submenu { |
|||
background-color: var(--hlavni-oranzova); |
|||
z-index: 50; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
ul.submenu li { |
|||
width: auto; |
|||
padding: 0px 20px 0px 20px; |
|||
display: inline-block; |
|||
} |
|||
ul.submenu li>a { |
|||
color: var(--svetla-oranzova); |
|||
text-decoration: none; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
ul.submenu li>a:hover { |
|||
color: black; |
|||
} |
|||
|
|||
ul.menu li.active>a { |
|||
color: var(--svetla-oranzova); |
|||
} |
|||
|
|||
ul.submenu li.active>a, .parentactive ul li:first-child>a { |
|||
color: black; |
|||
} |
|||
/**************/ |
|||
|
|||
|
|||
/**** Footer ****/ |
|||
#footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: url("../images/mozaika-footer.svg") no-repeat top center; |
|||
height: var(--footer-height); |
|||
background-position: relative; |
|||
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: 0px; |
|||
} |
|||
|
|||
#footer p.license a { |
|||
color: #333; |
|||
} |
|||
|
|||
p.license-mobile { |
|||
display: none; |
|||
margin-bottom: 0px; |
|||
} |
|||
/****************/ |
|||
|
|||
|
|||
/**** 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; |
|||
} |
|||
|
|||
a.login-ref-admin { |
|||
display: inline; |
|||
color: var(--barva-pozadi); |
|||
} |
|||
|
|||
.napis-webarum { |
|||
display: inline; |
|||
color: var(--barva-pozadi); |
|||
float: right; |
|||
} |
|||
|
|||
.napis-webarum a { |
|||
color: var(--svetla-oranzova); |
|||
text-decoration: underline; |
|||
} |
|||
/*******************/ |
|||
|
|||
|
|||
/**** ROZLIŠENÍ MEZI LOKÁLNÍM, TESTOVACÍM A PRODUKČNÍM WEBEM ****/ |
|||
body.localweb:before, body.localweb:after, |
|||
body.testweb:before, body.testweb:after, |
|||
body.suprodweb:before, body.suprodweb:after { |
|||
content: ""; |
|||
position: fixed; |
|||
width: 20px; |
|||
height: 100%; |
|||
top: 0; |
|||
} |
|||
|
|||
body.localweb:before, body.testweb:before, body.suprodweb:before { |
|||
left: 0; |
|||
} |
|||
body.localweb:after, body.testweb:after, body.suprodweb:after { |
|||
right: 0; |
|||
} |
|||
|
|||
body.localweb:before, body.localweb:after { background: greenyellow; } |
|||
body.testweb:before, body.testweb:after { background: darkorange; } |
|||
body.suprodweb:before, body.suprodweb:after { background: red; } |
|||
/****************************************************************/ |
|||
|
|||
|
|||
/**** ZBYTEK ****/ |
|||
/* (konkrétní stránky) */ |
|||
|
|||
/* titulni stranka */ |
|||
.titulnistrana { |
|||
display: flex; |
|||
text-align: justify; |
|||
} |
|||
|
|||
.titulnistrana h1 { |
|||
text-align: center; |
|||
} |
|||
|
|||
.zjistit_vic{ |
|||
text-align: center; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.zjistit_vic hr { |
|||
display: none; |
|||
} |
|||
|
|||
.graf-svg { |
|||
display: flex; |
|||
} |
|||
|
|||
#svg-graf { |
|||
width: 100%; |
|||
height: auto; |
|||
margin: 30px; |
|||
} |
|||
|
|||
.titulnistrana_obsah { |
|||
width: 66%; |
|||
} |
|||
|
|||
.vitej_titulka, .temata_titulka { |
|||
width: 49%; |
|||
padding: 10px; |
|||
display: table-cell; |
|||
} |
|||
|
|||
.titulnistrana_novinky { |
|||
width: 33%; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.novinka_obrazek { |
|||
margin: 10px 0px 10px 0px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.novinka_datum { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.novinka_autor { |
|||
text-align: right; |
|||
font-style: italic; |
|||
} |
|||
|
|||
div.org-text { |
|||
font-style: italic; |
|||
} |
|||
|
|||
div.odpocet { |
|||
margin: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.odevzdanareseni_mid, .odevzdanareseni_small, .odevzdanareseni_mini { |
|||
display: none; |
|||
} |
|||
|
|||
/*stránka organizátorů*/ |
|||
|
|||
div.seznam_orgu, div.rozcestnik_temat, div.seznam_archiv { |
|||
text-align: center; |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
div.org_pole, div.rocnik_pole, div.tema_pole { |
|||
display: inline-block; |
|||
width: 30%; |
|||
min-width: 300px; |
|||
text-align: center; |
|||
} |
|||
|
|||
div.tema_pole { |
|||
display: inline-block; |
|||
width: 40%; |
|||
min-width: 350px; |
|||
padding-bottom: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
div.cislo_pole { |
|||
display: inline-block; |
|||
width: 15%; |
|||
min-width: 165px; |
|||
text-align: center; |
|||
padding: 10px; |
|||
} |
|||
|
|||
div.seznam_orgu h3 { |
|||
text-align: center; |
|||
margin-top: 10px; |
|||
margin-bottom: 0px; |
|||
} |
|||
|
|||
div.org_email { |
|||
margin-bottom: 10px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* aktuální zadání */ |
|||
.stranka_aktualni_zadani { |
|||
text-align: center; |
|||
} |
|||
|
|||
#azad_obrazek { |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
div.zadani_termin { |
|||
text-align: center; |
|||
font-size: large; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
@media (max-width: 420px) { |
|||
div.zadani_termin { |
|||
font-size: small; |
|||
} |
|||
} |
|||
|
|||
div.zadani_termin .datum { |
|||
color:var(--hlavni-oranzova); |
|||
margin:0px; |
|||
} |
|||
|
|||
#obrazek_cisla_archiv { |
|||
text-align: center; |
|||
margin: 10px; |
|||
} |
|||
|
|||
|
|||
/* 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; |
|||
} |
|||
} |
|||
/****************/ |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/********************** |
|||
* Zmenšování displeje |
|||
***********************/ |
|||
|
|||
|
|||
/* stránka přes celý displej */ |
|||
@media (max-width: 970px) { |
|||
|
|||
div.container { |
|||
width: 100%; |
|||
} |
|||
|
|||
#title { |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
|
|||
#header { |
|||
background-size: 100%; |
|||
} |
|||
|
|||
#header img.logo { |
|||
width: 100%; |
|||
} |
|||
|
|||
#footer { |
|||
width: 100%; |
|||
} |
|||
|
|||
ul.menu { |
|||
font-size: 90%; |
|||
margin-top: -7px; |
|||
} |
|||
|
|||
ul.menu li { |
|||
margin-top: 10px; /* posunutí textu hlavního menu níže */ |
|||
} |
|||
|
|||
ul.submenu li { |
|||
margin-top: 0px; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */ |
|||
} |
|||
|
|||
ul.submenu { |
|||
margin-top: 8px; /* mezera mezi hlavním menu a submenu */ |
|||
} |
|||
|
|||
.odevzdanareseni_big { |
|||
display: none; |
|||
} |
|||
|
|||
.odevzdanareseni_mid { |
|||
display: table-cell; |
|||
} |
|||
|
|||
} |
|||
|
|||
/* stránka přes celý menší displej, větší mobil, tablet */ |
|||
@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 li { |
|||
margin-top: 0px; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */ |
|||
} |
|||
|
|||
ul.submenu { |
|||
margin-top: 8px; /* mezera mezi hlavním menu a submenu */ |
|||
} |
|||
|
|||
a.ref-org-foto { |
|||
pointer-events: none; |
|||
} |
|||
|
|||
table#reseni.form td, table#reseni.form tr { |
|||
display: inline-grid; |
|||
max-width: 300px; |
|||
} |
|||
|
|||
/* titulni stranka */ |
|||
|
|||
.titulnistrana { |
|||
display: block; |
|||
} |
|||
|
|||
.graf { |
|||
padding-top: 40px; |
|||
} |
|||
|
|||
.titulnistrana_obsah { |
|||
width: 100%; |
|||
} |
|||
|
|||
.vitej_titulka, .temata_titulka { |
|||
width: 49%; |
|||
padding: 10px; |
|||
display: table-cell; |
|||
} |
|||
|
|||
.titulnistrana_novinky { |
|||
width: 100%; |
|||
max-width: 500px; |
|||
padding: 10px; |
|||
margin: auto; |
|||
} |
|||
|
|||
#svg-graf { |
|||
width: 100%; |
|||
max-width: 500px; |
|||
padding: 10px; |
|||
margin: auto; |
|||
} |
|||
|
|||
.zjistit_vic hr { |
|||
display: flex; |
|||
} |
|||
|
|||
.odevzdanareseni_mid { |
|||
display: none; |
|||
} |
|||
|
|||
.odevzdanareseni_small { |
|||
display: table-cell; |
|||
} |
|||
} |
|||
|
|||
/* malý tablet, mobil */ |
|||
@media (max-width: 650px) { |
|||
|
|||
.no-mobile{ |
|||
display: none; |
|||
} |
|||
|
|||
#hide-if-small.login-bar-flatpage { |
|||
display: none; |
|||
} |
|||
|
|||
#title { |
|||
display: none; |
|||
} |
|||
|
|||
#header { |
|||
width: 100%; |
|||
top: 0px; |
|||
background-image: none; |
|||
} |
|||
|
|||
#header.cojemam, |
|||
#header.soustredeni, |
|||
#header.zadani, |
|||
#header.clanky, |
|||
#header.archiv, |
|||
#header.NOC, |
|||
#header.NOCcojemam, |
|||
#header.NOCsoustredeni, |
|||
#header.NOCzaani, |
|||
#header.NOCclanky, |
|||
#header.NOCarchiv { |
|||
background-image: none; |
|||
} |
|||
|
|||
#header img.logo { |
|||
display: none; |
|||
} |
|||
|
|||
#header img.logo-mobile { |
|||
display: block; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4)); |
|||
margin-bottom: 3px; |
|||
} |
|||
|
|||
/* mobilní menu */ |
|||
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; |
|||
} |
|||
|
|||
nav.nav-button { |
|||
display: block; |
|||
position: sticky; |
|||
position: -webkit-sticky; |
|||
top: 0; |
|||
z-index: 10; |
|||
} |
|||
|
|||
#navbar-content { |
|||
background-color: var(--hlavni-oranzova); |
|||
} |
|||
|
|||
button.navbar-button { |
|||
color: #f9d59e; |
|||
background-color: var(--hlavni-oranzova); |
|||
font-variant: small-caps; |
|||
font-size: 160%; |
|||
border-radius: 0px; |
|||
border-width: 0px; |
|||
width: 100%; |
|||
text-align: right; |
|||
} |
|||
|
|||
button.navbar-button span::after{ |
|||
content: ' \2261 '; |
|||
font-size: 120%; |
|||
} |
|||
|
|||
li.dropdown div.submenu_mobile{ |
|||
display: none; |
|||
} |
|||
|
|||
li.dropdown.open div.submenu_mobile{ |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/*patička mobil*/ |
|||
|
|||
#footer { |
|||
display: none; |
|||
} |
|||
|
|||
p.license-mobile { |
|||
position: relative; |
|||
display: block; |
|||
font-size: 90%; |
|||
background-color: var(--hlavni-oranzova); |
|||
padding: 5%; |
|||
text-align: justify; |
|||
} |
|||
|
|||
table.form td, table.form tr { |
|||
display: inherit; |
|||
} |
|||
|
|||
/* titulni stranka */ |
|||
|
|||
.titulnistrana { |
|||
display: block; |
|||
} |
|||
|
|||
.graf { |
|||
padding-top: 40px; |
|||
} |
|||
|
|||
.titulnistrana_obsah { |
|||
width: 100%; |
|||
} |
|||
|
|||
.vitej_titulka, .temata_titulka { |
|||
width: 100%; |
|||
padding: 10px; |
|||
display: block; |
|||
} |
|||
|
|||
.titulnistrana_novinky { |
|||
width: 100%; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.odevzdanareseni_small { |
|||
display: none; |
|||
} |
|||
|
|||
.odevzdanareseni_mini { |
|||
display: table-cell; |
|||
} |
|||
|
|||
} |
|||
|
|||
File diff suppressed because it is too large
@ -0,0 +1,347 @@ |
|||
@charset "utf-8"; /* vynuť utf-8 */ |
|||
|
|||
/* Bloky použité na webu */ |
|||
|
|||
|
|||
/**** 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: 0px; |
|||
} |
|||
|
|||
li.mam-org-only { |
|||
padding: 3px 0px; |
|||
margin: -2px 0px; |
|||
} |
|||
|
|||
/* plus a minus tlacitka */ |
|||
.mam-org-only-galerie { |
|||
background: var(--orgovska-svetla-fialova); |
|||
padding: 10px; |
|||
margin: 10px 10px 10px -20px; |
|||
border: #333 2px dashed; |
|||
float: left; |
|||
} |
|||
|
|||
.mam-org-only-galerie a{ |
|||
padding: 3px 5px; |
|||
margin: 5px; |
|||
border-radius: 20px; |
|||
background-color: var(--tmava-oranzova);; |
|||
color: var(--barva-pozadi); |
|||
float: left; |
|||
} |
|||
/**********************************/ |
|||
|
|||
|
|||
/**** ZAŠKRTÁVÁTKO ****/ |
|||
/* Select2 používaný hlavně multiple selectem. Přidání checkboxů a změna barvy. */ |
|||
/* Podle https://stackoverflow.com/a/48290544 */ |
|||
/* U autocomplete.ModelSelect2Multiple vyžaduje 'data-dropdown-css-class': 's2m-se-zaskrtavatky' */ |
|||
.s2m-se-zaskrtavatky .select2-results__option[aria-selected=true]:before { |
|||
content: '☑ '; |
|||
padding: 0 0 0 8px; |
|||
} |
|||
|
|||
.s2m-se-zaskrtavatky .select2-results__option[aria-selected=false]:before { |
|||
content: '◻ '; |
|||
padding: 0 0 0 8px; |
|||
} |
|||
|
|||
/* Oranžové zvýraznění v Select2 */ |
|||
.select2-results__option--highlighted { |
|||
background-color: var(--hlavni-oranzova) !important; |
|||
} |
|||
/**********************/ |
|||
|
|||
|
|||
/**** 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; |
|||
} |
|||
|
|||
#organizatori.flip-card { |
|||
width: 200px; |
|||
height: 250px; |
|||
} |
|||
|
|||
#archiv.flip-card { |
|||
width: 210px; |
|||
height: 298px; |
|||
} |
|||
|
|||
#archiv-rocnik.flip-card { |
|||
width: 144px; |
|||
height: 205px; |
|||
} |
|||
|
|||
#tema-rozcestnik.flip-card { |
|||
width: 300px; |
|||
height: 300px; |
|||
} |
|||
|
|||
/* This container is needed to position the front and back side */ |
|||
.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-front, .flip-card-back { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
-webkit-backface-visibility: hidden; /* Safari */ |
|||
backface-visibility: hidden; |
|||
} |
|||
|
|||
|
|||
div.flip-card-foto, div.flip-card-foto img { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
} |
|||
|
|||
/* Style the back side */ |
|||
.flip-card-back { |
|||
background-color: var(--svetla-oranzova); |
|||
color: black; |
|||
transform: rotateY(180deg); |
|||
padding: 10px; |
|||
padding-top: 20px; |
|||
} |
|||
|
|||
#archiv.flip-card-back { |
|||
background-color: white; |
|||
} |
|||
|
|||
/* karty archiv */ |
|||
|
|||
div.popis_rocniku { |
|||
text-align: left; |
|||
font-weight: bold; |
|||
margin: 20px; |
|||
} |
|||
|
|||
|
|||
div.popis_rocniku a, div.cislo_odkazy a { |
|||
font-weight: bold; |
|||
color: black; |
|||
} |
|||
|
|||
div.popis_rocniku a:hover, |
|||
div.cislo_odkazy a:hover { |
|||
color: var(--tmava-oranzova); |
|||
} |
|||
|
|||
div.cislo_odkazy ul { |
|||
margin: 0px; |
|||
padding: 0px; |
|||
} |
|||
/***********************/ |
|||
|
|||
|
|||
/**** TABULKY ****/ |
|||
/** Výsledkovky **/ |
|||
table .border-r { |
|||
border-right: solid 1px; |
|||
} |
|||
|
|||
table .border-b { |
|||
border-bottom: solid 1px; |
|||
} |
|||
|
|||
.vysledkovka td, .vysledkovka th { |
|||
padding: 0.1em 0.3em; |
|||
} |
|||
|
|||
.vysledkovka { |
|||
border: solid 2px; |
|||
} |
|||
|
|||
.podproblem { |
|||
color: gray; |
|||
} |
|||
/*****************/ |
|||
|
|||
|
|||
/** Tabulka odevzdaných a došlých řešení **/ |
|||
.dosla_reseni tr th, .dosla_reseni tr td { |
|||
padding: 1px 10px 1px 10px; |
|||
border-collapse: collapse; |
|||
min-width: 8em; /*Nastřeleno, aby se řádky s řešeními nezalamovaly. Teoreticky není potřeba pro th, ale whatever.*/ |
|||
} |
|||
|
|||
.dosla_reseni tr:nth-child(even) { |
|||
background: var(--svetlounka-oranzova); |
|||
} |
|||
|
|||
/*Přichycování prvního sloupce a řádku*/ |
|||
.dosla_reseni { |
|||
display: block; |
|||
max-height: 90vh; |
|||
max-width: 90vw; |
|||
overflow: auto; |
|||
margin-left: 5vw; |
|||
} |
|||
|
|||
.dosla_reseni thead tr { |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.dosla_reseni tr:nth-child(even) td:first-child, .dosla_reseni thead tr, .dosla_reseni thead tr:first-child td:first-child { |
|||
background: var(--svetlounka-oranzova); |
|||
} |
|||
|
|||
.dosla_reseni tr:nth-child(odd) td:first-child { |
|||
background: var(--barva-pozadi); |
|||
} |
|||
|
|||
.dosla_reseni tr td:first-child { |
|||
position: sticky; |
|||
left: 0; |
|||
} |
|||
/******************************************/ |
|||
|
|||
|
|||
/** Tabulka mých (řešitelových) řešení **/ |
|||
.odevzdana_reseni tr th, .odevzdana_reseni tr td { |
|||
border: 1px solid black; |
|||
padding: 1px 10px 1px 10px; |
|||
border-collapse: collapse; |
|||
text-align: center; |
|||
} |
|||
|
|||
.odevzdana_reseni.problem tr td { |
|||
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; |
|||
} |
|||
|
|||
/* td obsahující křížek v detailu řešení se nesmí smrštit na 0 */ |
|||
/* FIXME až bude firefox příčetný, nahradit td:has(.smazat_hodnoceni) */ |
|||
.has_smazat_hodnoceni { |
|||
min-width: 20px; |
|||
padding: 3px; |
|||
} |
|||
/*******************/ |
|||
/*****************/ |
|||
|
|||
|
|||
/**** FORMULÁŘE ****/ |
|||
/* přihláška a další formuláře */ |
|||
|
|||
table.form td, table.form tr { |
|||
table-layout: fixed; |
|||
word-wrap: break-word; |
|||
padding: 5px; |
|||
} |
|||
|
|||
table#reseni.form td, table#reseni.form tr { |
|||
display: inline-table; |
|||
} |
|||
|
|||
input[type="file"] { |
|||
max-width: 250px; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.field-with-comment{ |
|||
position:relative; |
|||
} |
|||
|
|||
.field-comment{ |
|||
display:none; |
|||
text-shadow: 0 1px 0 #fff; |
|||
background-color: #f0f0f0 ; |
|||
border-color: #dbdbdb; |
|||
position:absolute; |
|||
z-index:100; |
|||
border:1px; |
|||
border-style:solid; |
|||
border-width:1px; |
|||
border-radius: 5px; |
|||
padding:3px; |
|||
top:50px; |
|||
left:10px; |
|||
} |
|||
|
|||
.field-with-comment:hover span.field-comment{ |
|||
display: block; |
|||
} |
|||
|
|||
input { |
|||
margin: 5px; |
|||
} |
|||
|
|||
textarea.feedback { |
|||
margin: 5px; |
|||
} |
|||
|
|||
|
|||
|
|||
ul.form { |
|||
list-style-type: none; |
|||
padding-left: 0px; |
|||
} |
|||
label.field-label { |
|||
font-weight: normal; |
|||
} |
|||
label.field-required { |
|||
font-weight: bold; |
|||
} |
|||
.field-error { |
|||
font-size: 14px; |
|||
color: red; |
|||
} |
|||
ul.form li{ |
|||
margin-bottom: 3px; |
|||
} |
|||
p.gdpr { |
|||
font-size: 6pt; |
|||
margin-bottom: .66em; |
|||
} |
|||
div.gdpr { |
|||
font-size: 6pt; |
|||
} |
|||
|
|||
/* registrace */ |
|||
label[for=id_skola] { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/*******************/ |
|||
|
|||
@ -1,35 +0,0 @@ |
|||
/* Rozlišení mezi lokálním, test a produkčním webem */ |
|||
|
|||
body.localweb:before, body.localweb:after, |
|||
body.testweb:before, body.testweb:after, |
|||
body.suprodweb:before, body.suprodweb:after { |
|||
content: ""; |
|||
position: fixed; |
|||
width: 20px; |
|||
height: 100%; |
|||
top: 0; |
|||
} |
|||
|
|||
body.localweb:before, |
|||
body.testweb:before, |
|||
body.suprodweb:before { |
|||
left: 0; |
|||
} |
|||
|
|||
body.localweb:after, |
|||
body.testweb:after, |
|||
body.suprodweb:after { |
|||
right: 0; |
|||
} |
|||
|
|||
body.localweb:before, body.localweb:after { |
|||
background: greenyellow; |
|||
} |
|||
|
|||
body.testweb:before, body.testweb:after { |
|||
background: darkorange; |
|||
} |
|||
|
|||
body.suprodweb:before, body.suprodweb:after { |
|||
background: red; |
|||
} |
|||
Loading…
Reference in new issue