mamweb/mamweb/static/css/modules.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 .mam-org-only {
	border: 0;
}

li.mam-org-only {
	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) */
.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;
}

/* 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; }
}

/* 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: 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;
}

.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), .barevna_tabulka 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 */

/* Omezí výšku a šířku, aby bylo příjemné na scrollování a zapne scrollování */
.tabulka_s_uchycenym_radkem_a_sloupcem {
	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;
}

/* (Snad) zneprůhlednění prvního řádku (a sloupce) */
.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
{
	background: inherit;
}
/*******************************************************/

/** 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;
}
/***************************************/

/** 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, .moje_reseni tr td { text-align: center; }
.moje_reseni tr 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;
}

.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;
}

@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;
}
p.gdpr {
	font-size: 6pt;
	margin-bottom: .66em;
}
div.gdpr {
	font-size: 6pt;
}

/* registrace */
label[for=id_skola] {
	font-weight: bold;
}

/*******************/