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