Doplnění nepovinného nesting selektoru &, abychom rozšířili support na starší prohlížeče

mamweb/static/css/layout.css

@@ -19,10 +19,10 @@ div.kontejner {/* Ne container, aby se to netlouklo s bootstrapem. */
 		margin-top: var(--login-bar-height);
 	}
 
-	div.kontent-wrapper {
+	& div.kontent-wrapper {
 		padding-bottom: var(--footer-height);
 
-		div.kontent {
+		& div.kontent {
 			padding: 15px 30px;
 		}
 	}
@@ -67,16 +67,16 @@ div.kontejner {/* Ne container, aby se to netlouklo s bootstrapem. */
 	background-size: 100%;
 	top: 58px;
 
-	img.logo {
+	& img.logo {
 		width: 100%;
 		filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
 	}
 
-	img.logo-mobile {
+	& img.logo-mobile {
 		display: none;
 	}
 
-	.no-mobile {
+	& .no-mobile {
 		background-size: contain;
 	}
 }
@@ -94,12 +94,12 @@ div.kontejner {/* Ne container, aby se to netlouklo s bootstrapem. */
 	filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.4));
 	padding-top: 3.5%;
 
-	p.license {
+	& p.license {
 		text-align: center;
 		font-weight: 400;
 		bottom: 0;
 
-		a {
+		& a {
 			color: #333;
 		}
 	}
@@ -139,21 +139,21 @@ div.login-bar {
 	padding-left: 5px;
 	padding-right: 5px;
 
-	div {
+	& div {
 		display: inline;
 	}
 
-	a.LOGIN-ref-admin {
+	& a.LOGIN-ref-admin {
 		display: inline;
 		color: var(--barva-pozadi);
 	}
 
-	.LOGIN_napis-webarum {
+	& .LOGIN_napis-webarum {
 		display: inline;
 		color: var(--barva-pozadi);
 		float: right;
 
-		a {
+		& a {
 			color: var(--svetla-oranzova);
 			text-decoration: underline;
 		}
@@ -176,7 +176,7 @@ div.login-bar {
 	#header {
 		background-size: 100%;
 
-		img.logo {
+		& img.logo {
 			width: 100%;
 		}
 	}
@@ -202,11 +202,11 @@ div.login-bar {
 		top: 0;
 		background-image: none;
 
-		img.logo {
+		& img.logo {
 			display: none;
 		}
 
-		img.logo-mobile {
+		& img.logo-mobile {
 			display: block;
 			top: 0;
 			left: 0;
@@ -215,7 +215,7 @@ div.login-bar {
 			margin-bottom: 3px;
 		}
 
-		.no-mobile{
+		& .no-mobile{
 			display: none;
 		}
 	}
@@ -241,13 +241,13 @@ ul.menu {
 
 	font-variant: small-caps;
 
-	a {
+	& a {
 		text-decoration: none;
 		font-weight: bold;
 		font-size: 105%;
 	}
 
-	li {
+	& li {
 		margin: 0;
 		display: inline-block;
 		width: 16.666667%;
@@ -256,7 +256,7 @@ ul.menu {
 		font-size: 140%;
 		font-weight: 400;
 
-		>a:hover, >a:active {
+		&>a:hover, &>a:active {
 			color: black;
 		}
 
@@ -265,7 +265,7 @@ ul.menu {
 		}
 	}
 
-	ul.submenu {
+	& ul.submenu {
 
 		background-color: var(--hlavni-oranzova);
 		margin-top: 10px; /* mezera mezi hlavním menu a submenu */
@@ -277,24 +277,24 @@ ul.menu {
 		z-index: 50;
 		font-weight: 400;
 
-		li {
+		& li {
 			width: auto;
 			padding: 0 20px 0 20px;
 			display: inline-block;
 
-			>a {
+			&>a {
 				color: var(--svetla-oranzova);
 				text-decoration: none;
 				text-shadow: none;
 
-				:hover {
+				&:hover {
 					color: black;
 				}
 			}
 		}
 	}
 
-	ul.submenu li.active>a, .parentactive ul li:first-child>a {
+	& ul.submenu li.active>a, & .parentactive ul li:first-child>a {
 		color: black;
 	}
 }
@@ -304,7 +304,7 @@ ul.menu {
 		font-size: 90%;
 		margin-top: -7px;
 
-		li {
+		& li {
 			margin-top: 10px; /* posunutí textu hlavního menu níže */
 		}
 	}
@@ -312,7 +312,7 @@ ul.menu {
 	ul.submenu {
 		margin-top: 8px; /* mezera mezi hlavním menu a submenu */
 
-		li {
+		& li {
 			margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
 		}
 	}
@@ -323,7 +323,7 @@ ul.menu {
 		font-size: 80%;
 		margin-top: -2px;
 
-		li {
+		& li {
 			margin-top: 10px; /* posunutí textu hlavního menu níže */
 		}
 	}
@@ -331,7 +331,7 @@ ul.menu {
 	ul.submenu {
 		margin-top: 8px; /* mezera mezi hlavním menu a submenu */
 
-		li {
+		& li {
 			margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
 		}
 	}
@@ -354,20 +354,20 @@ ul.menu {
 		padding-bottom: 3px;
 		padding-left: 12px;
 
-		a {
+		& a {
 			&:active, &:hover, &:focus {
 				text-decoration: none;
 				color: black;
 			}
 		}
 
-		ul {
+		& ul {
 			list-style-type: none;
 			font-size: 90%;
 			color: black; /*černé šipky submenu*/
 
-			li {
-				> a {
+			& li {
+				&>a {
 					color: black;
 				}
 
@@ -377,7 +377,7 @@ ul.menu {
 			}
 		}
 
-		br {
+		& br {
 			display: none;
 		}
 	}
@@ -459,13 +459,13 @@ body.suprodweb { &:before, &:after { background: red; } }
 		display: block;
 	}
 
-	h1 { text-align: center; }
+	& h1 { text-align: center; }
 
-	.TITULNI_STRANA_zjistit_vic{
+	& .TITULNI_STRANA_zjistit_vic{
 		text-align: center;
 		margin-bottom: 30px;
 
-		hr {
+		& hr {
 			display: none;
 
 			@media(max-width: 800px){
@@ -474,15 +474,15 @@ body.suprodweb { &:before, &:after { background: red; } }
 		}
 	}
 
-	.TITULNI_STRANA_graf {
+	& .TITULNI_STRANA_graf {
 		@media(max-width: 800px) {
 			padding-top: 40px;
 		}
 
-		.TITULNI_STRANA_graf-svg {
+		& .TITULNI_STRANA_graf-svg {
 			display: flex;
 
-			#svg-graf {
+			& #svg-graf {
 				width: 100%;
 				height: auto;
 				margin: 30px;
@@ -496,7 +496,7 @@ body.suprodweb { &:before, &:after { background: red; } }
 		}
 	}
 
-	.TITULNI_STRANA_obsah {
+	& .TITULNI_STRANA_obsah {
 		width: 66%;
 
 		@media(max-width: 800px){
@@ -504,7 +504,7 @@ body.suprodweb { &:before, &:after { background: red; } }
 		}
 	}
 
-	.TITULNI_STRANA_vitej_titulka, .TITULNI_STRANA_temata_titulka {
+	& .TITULNI_STRANA_vitej_titulka, & .TITULNI_STRANA_temata_titulka {
 		width: 49%;
 		padding: 10px;
 		display: table-cell;
@@ -515,7 +515,7 @@ body.suprodweb { &:before, &:after { background: red; } }
 		}
 	}
 
-	.TITULNI_STRANA_novinky {
+	& .TITULNI_STRANA_novinky {
 		width: 33%;
 		padding: 10px;
 
@@ -540,11 +540,11 @@ div.odpocet {
 .stranka_aktualni_zadani {
 	text-align: center;
 
-	#AKTUALNI_ZADADNI_obrazek {
+	& #AKTUALNI_ZADADNI_obrazek {
 		margin-top: 15px;
 	}
 
-	div.AKTUALNI_ZADANI_termin {
+	& div.AKTUALNI_ZADANI_termin {
 		text-align: center;
 		font-size: large;
 		font-weight: bold;
@@ -553,7 +553,7 @@ div.odpocet {
 			font-size: small;
 		}
 
-		.AKTUALNI_ZADANI_datum {
+		& .AKTUALNI_ZADANI_datum {
 			color: var(--hlavni-oranzova);
 			margin: 0;
 		}

mamweb/static/css/modules.css

@@ -20,7 +20,7 @@
 		border: 0;
 	}
 
-	&li {
+	& li {
 		padding: 3px 0;
 		margin: -2px 0;
 	}
@@ -57,7 +57,7 @@
 	margin-right: auto;
 
 	/* This container is needed to position the front and back side */
-	.flip-card-inner {
+	& .flip-card-inner {
 		position: relative;
 		width: 100%;
 		height: 100%;
@@ -71,7 +71,7 @@
 	}
 
 	/* Position the front and back side */
-	.flip-card-front, .flip-card-back {
+	& .flip-card-front, & .flip-card-back {
 		position: absolute;
 		width: 100%;
 		height: 100%;
@@ -79,18 +79,18 @@
 		backface-visibility: hidden;
 	}
 
-	div.flip-card-foto, div.flip-card-foto img {
+	& 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) {
-			a { pointer-events: none; }
+			& a { pointer-events: none; }
 		}
 	}
 
 	/* Style the back side */
-	.flip-card-back {
+	& .flip-card-back {
 		transform: rotateY(180deg);
 		padding: 10px;
 		padding-top: 20px;
@@ -203,7 +203,7 @@ div.org_email {
 .tabulka_oramovane_sloupce {
 	border: solid 2px;
 
-	td, th {
+	& td, & th {
 		&:first-child, &:first-child {
 			border-left: none;
 			border-right: solid 1px;
@@ -217,7 +217,7 @@ div.org_email {
 		border-left: solid 1px;
 	}
 
-	thead { th, td {
+	& thead { & th, & td {
 			border-bottom: solid 1px;
 	} }
 }
@@ -228,15 +228,15 @@ div.org_email {
 /* Skoro jakákoliv tabulka kromě výsledkovek */
 
 .barevna_tabulka {
-	td th {
+	& td th {
 		padding: 1px 10px 1px 10px;
 	}
 
-	tbody tr:nth-child(even), thead tr {
+	& tbody tr:nth-child(even), & thead tr {
 		background: var(--svetlounka-oranzova);
 	}
 
-	tbody tr:nth-child(odd) {
+	& tbody tr:nth-child(odd) {
 		background: var(--barva-pozadi);
 	}
 }
@@ -258,14 +258,14 @@ div.org_email {
 	border-spacing: 0;
 
 	/* Uchytí první řádek */
-	thead tr {
+	& thead tr {
 		position: sticky;
 		top: 0;
 		z-index: 2;
 	}
 
 	/* Uchytí první sloupec */
-	td, th { &:first-child {
+	& td, & th { &:first-child {
 		position: sticky;
 		left: 0;
 		background: inherit; /* (Snad) zneprůhlední první sloupec */
@@ -290,7 +290,7 @@ div.org_email {
 .plne_ohranicena_tabulka {
 	border-collapse: collapse;
 
-	tr { th, td {
+	& tr { & th, & td {
 		border: 1px solid black;
 		padding: 1px 10px 1px 10px;
 	} }
@@ -305,7 +305,7 @@ div.org_email {
 
 /** Výsledkovky **/
 .vysledkovka, .tabulka_oramovane_sloupce {
-	td, th {
+	& td, & th {
 		&:first-child { position: unset; }
 
 		&:nth-child(2) {
@@ -327,11 +327,11 @@ div.org_email {
 
 /** Tabulka mých (řešitelových) řešení **/
 .moje_reseni tr {
-	th, td {
+	& th, & td {
 		text-align: center;
 	}
 
-	td.problem { text-align: left; }
+	& td.problem { text-align: left; }
 }
 
 /* Různá šířka problému */
@@ -378,16 +378,16 @@ div.org_email {
 
 
 .novinka {
-	.novinka_obrazek {
+	& .novinka_obrazek {
 		margin: 10px 0 10px 0;
 		width: 100%;
 	}
 
-	.novinka_datum {
+	& .novinka_datum {
 		font-weight: bold;
 	}
 
-	.novinka_autor {
+	& .novinka_autor {
 		text-align: right;
 		font-style: italic;
 	}
@@ -413,7 +413,6 @@ table#reseni.form td,  table#reseni.form tr {
 }
 
 @media(max-width: 800px) {
-
 	table#reseni.form td, table#reseni.form tr {
 		display: inline-grid;
 		max-width: 300px;
@@ -473,7 +472,7 @@ ul.form li{
 div.gdpr {
 	font-size: 6pt;
 
-	p {
+	& p {
 		font-size: 6pt;
 		margin-bottom: .66em;
 	}

mamweb/templates/base.html

@@ -8,12 +8,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="{% static 'images/MATFYZ_MM_barevne.svg' %}" type="image/x-icon">
     {% 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/mamweb_legacy.css' %}?version=2" rel="stylesheet">
-    <link href="{% static 'css/base.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 'bootstrap/css/bootstrap.css' %}?version=3" rel="stylesheet">
+    <link href="{% static 'css/constants.css' %}?version=3" rel="stylesheet">
+    <link href="{% static 'css/mamweb_legacy.css' %}?version=3" rel="stylesheet">
+    <link href="{% static 'css/base.css' %}?version=3" rel="stylesheet">
+    <link href="{% static 'css/layout.css' %}?version=3" rel="stylesheet">
+    <link href="{% static 'css/modules.css' %}?version=3" rel="stylesheet">
     <script src="{% static 'js/jquery-1.11.1.js' %}"></script>
     <script src="{% static 'js/jquery-3.4.1.js' %}"></script>