476 lines
9 KiB
CSS
476 lines
9 KiB
CSS
@charset "utf-8"; /* vynuť utf-8 */
|
|
|
|
/* Bloky použité na webu */
|
|
|
|
|
|
.horizonatlni_scrollovani { overflow-x: auto; }
|
|
|
|
/* Používá se pro podproblémy ve výsledkovkách -- zesvětlí se daný sloupec */
|
|
.zesvetleni { color: gray; }
|
|
|
|
|
|
/**** 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 {
|
|
border: 0;
|
|
}
|
|
|
|
&li {
|
|
padding: 3px 0;
|
|
margin: -2px 0;
|
|
}
|
|
}
|
|
/**********************************/
|
|
|
|
|
|
/**** 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) */
|
|
|
|
/** Samotné karty **/
|
|
.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-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 {
|
|
transform: rotateY(180deg);
|
|
padding: 10px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
/* 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-foto a { pointer-events: none; }
|
|
}
|
|
/*******************/
|
|
|
|
|
|
.flip-card-back {
|
|
background-color: var(--svetla-oranzova);
|
|
color: black;
|
|
}
|
|
|
|
.otaceci_cisla .flip-card-back {
|
|
background-color: white;
|
|
color: unset;
|
|
}
|
|
|
|
/* Otáčecí karta musí mít kolem sebe nějaké místo a mívá nějaký nadpis */
|
|
.flip_card_container {
|
|
display: inline-block;
|
|
width: 30%;
|
|
min-width: 300px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/** Jednotlivá použití **/
|
|
.seznam_orgu, .seznam_archiv, .rozcestnik_temat {
|
|
text-align: center; /* zarovná karty na střed */
|
|
}
|
|
|
|
.seznam_orgu .flip-card {
|
|
width: 200px;
|
|
height: 250px;
|
|
}
|
|
|
|
.seznam_orgu .flip_card_container h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.seznam_archiv .flip-card {
|
|
width: 210px;
|
|
height: 298px;
|
|
}
|
|
|
|
|
|
.cisla-v-rocniku .flip-card {
|
|
width: 144px;
|
|
height: 205px;
|
|
}
|
|
|
|
.cisla-v-rocniku .flip_card_container {
|
|
width: 15%;
|
|
min-width: 165px;
|
|
padding: 10px;
|
|
}
|
|
|
|
|
|
.rozcestnik_temat .flip-card {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.rozcestnik_temat .flip_card_container {
|
|
width: 40%;
|
|
min-width: 350px;
|
|
padding-bottom: 20px;
|
|
}
|
|
/************************/
|
|
|
|
|
|
|
|
/* 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: unset;
|
|
}
|
|
|
|
div.popis_rocniku a:hover,
|
|
div.cislo_odkazy a:hover {
|
|
color: var(--tmava-oranzova);
|
|
}
|
|
|
|
div.cislo_odkazy ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* karty orgů */
|
|
div.org_email {
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
}
|
|
/***********************/
|
|
|
|
|
|
/**** TABULKY ****/
|
|
|
|
/** Tabulka s čárami mezi sloupci **/
|
|
/* Např. výsledkovky */
|
|
|
|
.tabulka_oramovane_sloupce {
|
|
border: solid 2px;
|
|
|
|
td, th {
|
|
&:first-child, &:first-child {
|
|
border-left: none;
|
|
border-right: solid 1px;
|
|
}
|
|
|
|
&:nth-child(2), &:nth-child(2) {
|
|
border-left: none;
|
|
}
|
|
|
|
padding: 0.1em 0.3em;
|
|
border-left: solid 1px;
|
|
}
|
|
|
|
thead { th, 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;
|
|
}
|
|
|
|
tbody tr:nth-child(even), thead tr {
|
|
background: var(--svetlounka-oranzova);
|
|
}
|
|
|
|
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 */
|
|
thead tr {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Uchytí první sloupec */
|
|
td, th { &:first-child {
|
|
position: sticky;
|
|
left: 0;
|
|
background: inherit; /* (Snad) zneprůhlední první sloupec */
|
|
z-index: 1;
|
|
} }
|
|
}
|
|
|
|
/* (Snad) zneprůhlednění prvního řádku (a sloupce) FIXME: tohle je trochu hack a potenciálně může něco rozbít */
|
|
.tabulka_s_uchycenym_radkem_a_sloupcem,
|
|
.tabulka_s_uchycenym_radkem_a_sloupcem thead,
|
|
.tabulka_s_uchycenym_radkem_a_sloupcem tbody,
|
|
.tabulka_s_uchycenym_radkem_a_sloupcem tr,
|
|
.kontejner,
|
|
.kontent-wrapper,
|
|
.kontent
|
|
{
|
|
background: inherit;
|
|
}
|
|
/*******************************************************/
|
|
|
|
/** Tabulka mající všechna ohraničení **/
|
|
.plne_ohranicena_tabulka {
|
|
border-collapse: collapse;
|
|
|
|
tr { th, td {
|
|
border: 1px solid black;
|
|
padding: 1px 10px 1px 10px;
|
|
} }
|
|
}
|
|
/***************************************/
|
|
|
|
/** Tabulka odevzdaných a došlých řešení **/
|
|
.tabulka_doslych_reseni td {
|
|
min-width: 8em; /* Nastřeleno, aby se řádky s řešeními nezalamovaly. */
|
|
}
|
|
/******************************************/
|
|
|
|
/** Výsledkovky **/
|
|
.vysledkovka td:first-child, .tabulka_oramovane_sloupce th:first-child {
|
|
position: unset;
|
|
}
|
|
|
|
.vysledkovka td:nth-child(2), .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 td:nth-child(3), .tabulka_oramovane_sloupce th:nth-child(3) {
|
|
border-left: none;
|
|
}
|
|
/*****************/
|
|
|
|
|
|
/** Tabulka mých (řešitelových) řešení **/
|
|
.moje_reseni tr {
|
|
th, td {
|
|
text-align: center;
|
|
}
|
|
|
|
td.problem { text-align: left; }
|
|
}
|
|
|
|
/* Různá šířka problému */
|
|
.odevzdanareseni_mid, .odevzdanareseni_small, .odevzdanareseni_mini { display: none; }
|
|
|
|
@media (max-width: 970px) {
|
|
.odevzdanareseni_big { display: none; }
|
|
.odevzdanareseni_mid { display: table-cell; }
|
|
}
|
|
|
|
@media(max-width: 800px) {
|
|
.odevzdanareseni_mid { display: none; }
|
|
.odevzdanareseni_small { display: table-cell; }
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
.odevzdanareseni_small { display: none; }
|
|
.odevzdanareseni_mini { display: table-cell; }
|
|
}
|
|
/****************************************/
|
|
|
|
|
|
/** Detail řešení **/
|
|
.bodovani>input {
|
|
width: 4em;
|
|
|
|
&::placeholder {
|
|
color: lightgray;
|
|
opacity: 1;
|
|
}
|
|
|
|
&::-webkit-input-placeholder { /* Edge */
|
|
color: lightgray;
|
|
}
|
|
}
|
|
|
|
/* td obsahující křížek v detailu řešení se nesmí smrštit na 0 */
|
|
.td: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;
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
table.form td, table.form tr {
|
|
display: inherit;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 800px) {
|
|
|
|
table#reseni.form td, table#reseni.form tr {
|
|
display: inline-grid;
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
.field-with-comment{
|
|
position:relative;
|
|
}
|
|
|
|
.field-comment{
|
|
display:none;
|
|
text-shadow: 0 1px 0 #fff;
|
|
background-color: #f0f0f0 ;
|
|
position:absolute;
|
|
z-index:100;
|
|
border-width:1px;
|
|
border-color: #dbdbdb;
|
|
border-style:solid;
|
|
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: 0;
|
|
}
|
|
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;
|
|
}
|
|
div.gdpr {
|
|
font-size: 6pt;
|
|
|
|
p {
|
|
font-size: 6pt;
|
|
margin-bottom: .66em;
|
|
}
|
|
}
|
|
|
|
/* registrace */
|
|
label[for=id_skola] {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*******************/
|
|
|