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 */ | ||||
| 
 | ||||
| @import "mamweb_legacy.css" supports((-webkit-touch-callout: none) and (not (offset-position: normal))); | ||||
| 
 | ||||
| /* Obecné styly pro html tagy */ | ||||
| 
 | ||||
| @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 %} | ||||
|     <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/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/modules.css' %}?version=2" rel="stylesheet"> | ||||
|     <script src="{% static 'js/jquery-1.11.1.js' %}"></script> | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue