Nějaký základ nové verze CSSek

mamweb/static/css/layout.css

@@ -14,11 +14,10 @@ div.kontejner {
 	min-height: 100vh;
 	position: relative;
 	padding: 0;
-}
-
 
-.org-logged-in div.kontejner {
-	margin-top: var(--login-bar-height);
+	.org-logged-in & {
+		margin-top: var(--login-bar-height);
+	}
 }
 
 div.kontent-wrapper {
@@ -34,10 +33,9 @@ div.kontent {
 .full_width {
 	width: 100vw;
 	margin-left: calc(-50vw + 485px);
-}
-/* Na úzkém displeji nechceme nic dělat. */
-@media(max-width: 860px) {
-	.full_width{
+
+	/* Na úzkém displeji nechceme nic dělat. */
+	@media(max-width: 860px) {
 		margin-left: 0;
 		width: unset;
 	}
@@ -69,15 +67,15 @@ div.kontent {
 	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));
-}
+	img.logo {
+		width: 100%;
+		filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
+	}
 
-#header img.logo-mobile {
-	display: none;
+	img.logo-mobile {
+		display: none;
+	}
 }
 
 .no-mobile {
@@ -96,29 +94,27 @@ div.kontent {
 	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;
-}
+	p.license {
+		text-align: center;
+		font-weight: 400;
+		bottom: 0;
 
-#footer p.license a {
-	color: #333;
+		a {
+			color: #333;
+		}
+	}
+
+	@media (max-width: 650px) {
+		display: none;
+	}
 }
 
 p.license-mobile {
 	display: none;
 	margin-bottom: 0;
-}
 
-@media (max-width: 650px) {
-	#footer {
-		display: none;
-	}
-
-	p.license-mobile {
+	@media (max-width: 650px) {
 		position: relative;
 		display: block;
 		font-size: 90%;
@@ -143,10 +139,10 @@ div.login-bar {
 
 	padding-left: 5px;
 	padding-right: 5px;
-}
 
-div.login-bar div {
-	display: inline;
+	div {
+		display: inline;
+	}
 }
 
 a.login-ref-admin {
@@ -158,11 +154,11 @@ a.login-ref-admin {
 	display: inline;
 	color: var(--barva-pozadi);
 	float: right;
-}
 
-.napis-webarum a {
-	color: var(--svetla-oranzova);
-	text-decoration: underline;
+	a {
+		color: var(--svetla-oranzova);
+		text-decoration: underline;
+	}
 }
 /*******************/
 
@@ -250,30 +246,34 @@ ul.menu {
 	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%;
-}
+	a {
+		text-decoration: none;
+		font-weight: bold;
+		font-size: 105%;
+	}
 
-ul.menu li {
-	margin: 0;
-	display: inline-block;
-	width: 16.666667%;
-	text-align: center;
+	li {
+		margin: 0;
+		display: inline-block;
+		width: 16.666667%;
+		text-align: center;
 
-	font-size: 140%;
-	font-weight: 400;
-}
+		font-size: 140%;
+		font-weight: 400;
 
-ul.menu li>a:hover {
-	color: black;
-}
+		>a:hover {
+			color: black;
+		}
 
-ul.menu li>a:active { /* TODO:  nefunfuje */
-	color: black;
+		>a:active { /* TODO:  nefunfuje */
+			color: black;
+		}
+
+		&.active>a {
+			color: var(--svetla-oranzova);
+		}
+	}
 }
 
 ul.submenu {
@@ -284,31 +284,25 @@ ul.submenu {
 	padding-top: 10px;
 	padding-bottom: 5px;
 	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
-}
 
-ul.submenu {
-	background-color: var(--hlavni-oranzova);
 	z-index: 50;
 	font-weight: 400;
-}
 
-ul.submenu li {
-	width: auto;
-	padding: 0 20px 0 20px;
-	display: inline-block;
-}
-ul.submenu li>a {
-	color: var(--svetla-oranzova);
-	text-decoration: none;
-	text-shadow: none;
-}
+	li {
+		width: auto;
+		padding: 0 20px 0 20px;
+		display: inline-block;
 
-ul.submenu li>a:hover {
-	color: black;
-}
+		>a {
+			color: var(--svetla-oranzova);
+			text-decoration: none;
+			text-shadow: none;
 
-ul.menu li.active>a {
-	color: var(--svetla-oranzova);
+			:hover {
+				color: black;
+			}
+		}
+	}
 }
 
 ul.submenu li.active>a, .parentactive ul li:first-child>a {
@@ -316,22 +310,21 @@ ul.submenu li.active>a, .parentactive ul li:first-child>a {
 }
 
 @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 li {
-		margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
+		li {
+			margin-top: 10px; /* posunutí textu hlavního menu níže */
+		}
 	}
 
 	ul.submenu {
 		margin-top: 8px; /* mezera mezi hlavním menu a submenu */
+
+		li {
+			margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
+		}
 	}
 }
 
@@ -339,18 +332,18 @@ ul.submenu li.active>a, .parentactive ul li:first-child>a {
 	ul.menu {
 		font-size: 80%;
 		margin-top: -2px;
-	}
 
-	ul.menu li {
-		margin-top: 10px; /* posunutí textu hlavního menu níže */
-	}
-
-	ul.submenu li {
-		margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
+		li {
+			margin-top: 10px; /* posunutí textu hlavního menu níže */
+		}
 	}
 
 	ul.submenu {
 		margin-top: 8px; /* mezera mezi hlavním menu a submenu */
+
+		li {
+			margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
+		}
 	}
 }
 
@@ -370,31 +363,33 @@ ul.submenu li.active>a, .parentactive ul li:first-child>a {
 		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;
-	}
+		a {
+			&:active, &:hover, &:focus {
+				text-decoration: none;
+				color: black;
+			}
+		}
 
-	ul.menu_mobile ul {
-		list-style-type: none;
-		font-size: 90%;
-		color: black; /*černé šipky submenu*/
-	}
+		ul {
+			list-style-type: none;
+			font-size: 90%;
+			color: black; /*černé šipky submenu*/
 
-	ul.menu_mobile ul li > a {
-		color: black;
-	}
+			li {
+				> a {
+					color: black;
+				}
 
-	ul.menu_mobile ul li::before {
-		content: ' \276D  '; /*https://www.w3schools.com/cssref/css_entities.asp*/
-	}
+				&::before {
+					content: ' \276D  '; /*https://www.w3schools.com/cssref/css_entities.asp*/
+				}
+			}
+		}
 
-	ul.menu_mobile br {
-		display: none;
+		br {
+			display: none;
+		}
 	}
 
 	nav.nav-button {
@@ -442,27 +437,23 @@ ul.submenu li.active>a, .parentactive ul li:first-child>a {
 
 
 /**** ROZLIŠENÍ MEZI LOKÁLNÍM, TESTOVACÍM A PRODUKČNÍM WEBEM ****/
-body.localweb:before, body.localweb:after,
-body.testweb:before, body.testweb:after,
-body.suprodweb:before, body.suprodweb:after {
-	content: "";
-	position: fixed;
-	width: 20px;
-	height: 100%;
-	top: 0;
-	z-index: -1000;
-}
+body.localweb, body.testweb, body.suprodweb {
+	&:before, &:after {
+		content: "";
+		position: fixed;
+		width: 20px;
+		height: 100%;
+		top: 0;
+		z-index: -1000;
+	}
 
-body.localweb:before, body.testweb:before, body.suprodweb:before {
-	left: 0;
-}
-body.localweb:after, body.testweb:after, body.suprodweb:after {
-	right: 0;
+	&:before { left: 0; }
+	&:after { right: 0; }
 }
 
-body.localweb:before, body.localweb:after { background: greenyellow; }
-body.testweb:before, body.testweb:after { background: darkorange; }
-body.suprodweb:before, body.suprodweb:after { background: red; }
+body.localweb { &:before, &:after { background: greenyellow; } }
+body.testweb { &:before, &:after { background: darkorange; } }
+body.suprodweb { &:before, &:after { background: red; } }
 /****************************************************************/
 
 
@@ -473,19 +464,15 @@ body.suprodweb:before, body.suprodweb:after { background: red; }
 .titulnistrana {
 	display: flex;
 	text-align: justify;
-}
 
-.titulnistrana h1 {
-	text-align: center;
+	h1 { text-align: center; }
 }
 
 .zjistit_vic{
 	text-align: center;
 	margin-bottom: 30px;
-}
 
-.zjistit_vic hr {
-	display: none;
+	hr { display: none; }
 }
 
 .graf-svg {
@@ -513,18 +500,20 @@ body.suprodweb:before, body.suprodweb:after { background: red; }
 	padding: 10px;
 }
 
-.novinka_obrazek {
-	margin: 10px 0 10px 0;
-	width: 100%;
-}
+.novinka {
+	.novinka_obrazek {
+		margin: 10px 0 10px 0;
+		width: 100%;
+	}
 
-.novinka_datum {
-	font-weight: bold;
-}
+	.novinka_datum {
+		font-weight: bold;
+	}
 
-.novinka_autor {
-	text-align: right;
-	font-style: italic;
+	.novinka_autor {
+		text-align: right;
+		font-style: italic;
+	}
 }
 
 div.org-text {

mamweb/static/css/modules.css

@@ -15,15 +15,15 @@
 	padding: 10px;
 	margin: 10px -10px;
 	border: var(--orgovska-fialova) 2px dashed;
-}
 
-.mam-org-only .mam-org-only {
-	border: 0;
-}
+	& .mam-org-only {
+		border: 0;
+	}
 
-li.mam-org-only {
-	padding: 3px 0;
-	margin: -2px 0;
+	&li {
+		padding: 3px 0;
+		margin: -2px 0;
+	}
 }
 /**********************************/
 
@@ -208,24 +208,24 @@ div.org_email {
 
 .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;
-}
+	td, th {
+		&:first-child, &: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;
-}
+		&:nth-child(2), &:nth-child(2) {
+			border-left: none;
+		}
 
-.tabulka_oramovane_sloupce td, .tabulka_oramovane_sloupce th {
-	padding: 0.1em 0.3em;
-	border-left: solid 1px;
-}
+		padding: 0.1em 0.3em;
+		border-left: solid 1px;
+	}
 
-.tabulka_oramovane_sloupce thead th, .tabulka_oramovane_sloupce thead td {
-	border-bottom: solid 1px;
+	thead { th, td {
+			border-bottom: solid 1px;
+	} }
 }
 /***********************************/
 
@@ -233,25 +233,26 @@ div.org_email {
 /** 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 {
+	td th {
+		padding: 1px 10px 1px 10px;
+	}
 
-.barevna_tabulka tbody tr:nth-child(even), .barevna_tabulka thead tr {
-	background: var(--svetlounka-oranzova);
-}
+	tbody tr:nth-child(even), thead tr {
+		background: var(--svetlounka-oranzova);
+	}
 
-.barevna_tabulka tbody tr:nth-child(odd) {
-	background: var(--barva-pozadi);
+	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 {
+	/* 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;
@@ -261,21 +262,21 @@ div.org_email {
 
 	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í řádek */
+	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;
+	/* 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 */
@@ -294,11 +295,11 @@ div.org_email {
 /** 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;
+	tr { th, td {
+		border: 1px solid black;
+		padding: 1px 10px 1px 10px;
+	} }
 }
 /***************************************/
 
@@ -329,8 +330,13 @@ div.org_email {
 
 
 /** 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; }
+.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; }
@@ -355,20 +361,19 @@ div.org_email {
 /** Detail řešení **/
 .bodovani>input {
 	width: 4em;
-}
 
-.bodovani>input::placeholder {
-	color: lightgray;
-	opacity: 1;
-}
+	&::placeholder {
+		color: lightgray;
+		opacity: 1;
+	}
 
-.bodovani>input::-webkit-input-placeholder { /* Edge */
-	color: lightgray;
+	&::-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 {
+.td:has(.smazat_hodnoceni) {
 	min-width: 20px;
 	padding: 3px;
 }
@@ -453,12 +458,13 @@ label.field-required {
 ul.form li{
 	margin-bottom: 3px;
 }
-p.gdpr {
-	font-size: 6pt;
-	margin-bottom: .66em;
-}
 div.gdpr {
 	font-size: 6pt;
+
+	p {
+		font-size: 6pt;
+		margin-bottom: .66em;
+	}
 }
 
 /* registrace */

odevzdavatko/templates/odevzdavatko/detail.html

@@ -119,7 +119,7 @@
 		<td class="bodovani teamovaCast">{{ subform.body_neprepocitane_celkem }}</td>
 		<td>{{ subform.deadline_body }}</td>
 		<td>{{ subform.feedback }}</td>
-		<td class="has_smazat_hodnoceni"><a href="#" class="smazat_hodnoceni" id="id_{{subform.prefix}}-jsremove" title="Smazat hodnocení"><img src="{% static "odevzdavatko/cross.png" %}" alt="Smazat"></a></td>
+		<td><a href="#" class="smazat_hodnoceni" id="id_{{subform.prefix}}-jsremove" title="Smazat hodnocení"><img src="{% static "odevzdavatko/cross.png" %}" alt="Smazat"></a></td>
 	</tr>
     </tbody>
 {% endfor %}
@@ -138,7 +138,7 @@
 		<td class="bodovani teamovaCast">{{ form.empty_form.body_neprepocitane_celkem }}</td>
 		<td>{{ form.empty_form.deadline_body }}</td>
 		<td>{{ form.empty_form.feedback }}</td>
-		<td class="has_smazat_hodnoceni"><a href="#" class="smazat_hodnoceni" id="id_{{form.empty_form.prefix}}-jsremove" title="Smazat hodnocení"><img src="{% static "odevzdavatko/cross.png" %}" alt="Smazat"></a></td>
+		<td><a href="#" class="smazat_hodnoceni" id="id_{{form.empty_form.prefix}}-jsremove" title="Smazat hodnocení"><img src="{% static "odevzdavatko/cross.png" %}" alt="Smazat"></a></td>
 	</tr>
 </table>
 

personalni/templates/personalni/udaje/gdpr.html

@@ -4,37 +4,37 @@ K tomu, abychom mohli zpracovávat Tvá data (uložit si tvou adresu, zobrazit T
 Pokud se zpracováváním souhlasíš dle níže uvedených podmínek, zaškrtni políčko níže.
 </p>
 <div class="gdpr">
-<p class="gdpr">
+<p>
 Získáváme od Tebe údaje vyplněné v přihlášce do semináře (jméno, příjmení, poštovní a e-mailovou adresu, školu, kterou navštěvuješ a rok maturity), případně v přihlášce na soustředění (navíc datum narození, telefonní číslo). Také uchováváme všechna řešení, která nám pošleš, a jejich hodnocení.
 </p>
-<p class="gdpr">
+<p>
 Slibujeme Ti, že Tvá osobní data nezneužijeme k ničemu, co by nesouviselo s M&amp;M nebo s dalšími aktivitami Matfyzu, a nikdy je nepředáme nikomu cizímu. Údaje využíváme k zajištění chodu semináře a také je sdílíme s ostatními propagačními akcemi Matfyzu, abychom mohli vyhodnocovat úspěšnost akcí. Pokud budeš mít zájem, budeme Ti také posílat zajímavé zprávy a novinky týkajíci se Matfyzu.
 </p>
-<p class="gdpr">
+<p>
 Veřejně vystavujeme pouze seznam přezdívek (pro výběr spoluřešitelů k řešení) a výsledkové listiny, které také uchováváme pro archivní účely. Pokud ale z nějakého důvodu nebudeš chtít mít své jméno či školu uvedené ve výsledkové listině, není problém to zařídit, napiš nám. Z tištěných materiálů samozřejmě údaje už odstranit nemůžeme.
 </p>
-<p class="gdpr">
+<p>
 Na soustředěních a dalších akcích semináře navíc pořizujeme fotografie a videozáznamy a používáme je ke zpravodajským a propagačním účelům. Pro propagační účely si od Tebe vyžádáme samostatný souhlas na začátku akce.
 </p>
-<p class="gdpr">
+<p>
 <i>Souhlas se zpracováním osobních údajů pro potřeby chodu semináře</i>
 </p>
-<p class="gdpr">
+<p>
 Tímto uděluji souhlas Univerzitě Karlově, se sídlem Ovocný trh 560/5, 116 36 Praha 1, IČO 00216208 (dále jen UK), která je správcem osobních údajů všech fakult a součástí UK, ke zpracování osobních údajů pro potřeby Korespondenčního semináře M&amp;M a Matematicko-fyzikální fakulty UK (dále jen M&amp;M a MFF UK).
 </p>
-<p class="gdpr">
+<p>
 Tento souhlas uděluji pro všechny výše uvedené osobní údaje, a to po dobu účasti v semináři a 10 let poté, a dále souhlasím s uchováváním potřebných dat pro archivní účely i po této lhůtě (vystavené výsledkové listiny aj.).
 </p>
-<p class="gdpr">
+<p>
 MFF UK tyto údaje zpracovává za účelem evidence řešitelů a účastníků M&amp;M, k zajištění celoročního fungování semináře, analýze účinnosti jednotlivých propagačních akcí MFF UK a zpravodajským účelům. Osobám, které o to projeví zájem v nastavení svého účtu, bude MFF UK také zasílat propagační materiály.
 </p>
-<p class="gdpr">
+<p>
 Údaje nebudou předány třetí osobě ani využívány k jiným účelům, než ke kterým byly poskytnuty.
 </p>
-<p class="gdpr">
+<p>
 Tento souhlas uděluji ze své vlastní a svobodné vůle a beru na vědomí, že jej mohu kdykoliv odvolat zasláním e-mailu na adresu mam@matfyz.cz. Stejně tak může být požadováno vymazání i z archivních údajů M&M, pokud to bude technicky možné. Beru na vědomí, že údaje z tištěných publikací není možné zpětně odstranit.
 </p>
-<p class="gdpr">
+<p>
 Dále máte právo:
 </p>
 <ul>
@@ -44,7 +44,7 @@ Dále máte právo:
 <li>požadovat, aby byly vaše osobní údaje předány jinému správci,
 <li>podat stížnost u dozorového úřadu.
 </ul>
-<p class="gdpr">
+<p>
 V případě jakéhokoliv dotazu nebo uplatnění svých práv můžete kontaktovat pověřence pro ochranu osobních údajů na e-mailové adrese gdpr@cuni.cz.
 </p>
 </div>

seminar/templates/seminar/novinky.html

@@ -1,6 +1,6 @@
 {% for novinka in object_list %}
 {# pripravene div-y na stylovani#}
-<div>
+<div class="novinka">
   {% if not novinka.zverejneno and user.je_org %}
   <div class="mam-org-only">
     <ul>