Pokus o opravu stylů na starých iOSech
This commit is contained in:
parent
c7910ed72a
commit
788e8d22a2
3 changed files with 731 additions and 1 deletions
|
|
@ -1,5 +1,7 @@
|
||||||
@charset "utf-8"; /* vynuť utf-8 */
|
@charset "utf-8"; /* vynuť utf-8 */
|
||||||
|
|
||||||
|
@import "mamweb_legacy.css" supports((-webkit-touch-callout: none) and (not (offset-position: normal)));
|
||||||
|
|
||||||
/* Obecné styly pro html tagy */
|
/* Obecné styly pro html tagy */
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|
|
||||||
728
mamweb/static/css/mamweb_legacy.css
Normal file
728
mamweb/static/css/mamweb_legacy.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******************/
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
{% block custom_css %}{% endblock %}
|
{% block custom_css %}{% endblock %}
|
||||||
<link href="{% static 'bootstrap/css/bootstrap.css' %}?version=2" rel="stylesheet">
|
<link href="{% static 'bootstrap/css/bootstrap.css' %}?version=2" rel="stylesheet">
|
||||||
<link href="{% static 'css/constants.css' %}?version=2" rel="stylesheet">
|
<link href="{% static 'css/constants.css' %}?version=2" rel="stylesheet">
|
||||||
<link href="{% static 'css/base.css' %}?version=2" rel="stylesheet">
|
<link href="{% static 'css/base.css' %}?version=3" rel="stylesheet">
|
||||||
<link href="{% static 'css/layout.css' %}?version=2" rel="stylesheet">
|
<link href="{% static 'css/layout.css' %}?version=2" rel="stylesheet">
|
||||||
<link href="{% static 'css/modules.css' %}?version=2" rel="stylesheet">
|
<link href="{% static 'css/modules.css' %}?version=2" rel="stylesheet">
|
||||||
<script src="{% static 'js/jquery-1.11.1.js' %}"></script>
|
<script src="{% static 'js/jquery-1.11.1.js' %}"></script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue