From ce83247fe0487e19784f5af03fbd7c9b052dbd8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jon=C3=A1=C5=A1=20Havelka?= Date: Mon, 28 Oct 2024 12:29:08 +0100 Subject: [PATCH] =?UTF-8?q?Dopln=C4=9Bn=C3=AD=20nepovinn=C3=A9ho=20nesting?= =?UTF-8?q?=20selektoru=20&,=20abychom=20roz=C5=A1=C3=AD=C5=99ili=20suppor?= =?UTF-8?q?t=20na=20star=C5=A1=C3=AD=20prohl=C3=AD=C5=BEe=C4=8De?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mamweb/static/css/layout.css | 88 +++++++++++++++++------------------ mamweb/static/css/modules.css | 43 +++++++++-------- mamweb/templates/base.html | 12 ++--- 3 files changed, 71 insertions(+), 72 deletions(-) diff --git a/mamweb/static/css/layout.css b/mamweb/static/css/layout.css index bab8ea39..bd139780 100644 --- a/mamweb/static/css/layout.css +++ b/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; } diff --git a/mamweb/static/css/modules.css b/mamweb/static/css/modules.css index 2b823349..e7096a6e 100644 --- a/mamweb/static/css/modules.css +++ b/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; } diff --git a/mamweb/templates/base.html b/mamweb/templates/base.html index 4ad7fd0a..8021b507 100644 --- a/mamweb/templates/base.html +++ b/mamweb/templates/base.html @@ -8,12 +8,12 @@ {% block custom_css %}{% endblock %} - - - - - - + + + + + +