mam/mamweb
13
1
Fork 0
Code Issues Pull requests 12 Projects Wiki Activity Actions

Nějaké další přechody na CSS nesting

Browse source
This commit is contained in:
Jonas Havelka 2024-04-30 23:53:50 +02:00
parent 53caf7f73a
commit 3f1a570878
3 changed files with 120 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
mamweb/static/css/layout.css
View file

@ -18,15 +18,14 @@ div.kontejner {
.org-logged-in & { .org-logged-in & {
margin-top: var(--login-bar-height); margin-top: var(--login-bar-height);
} }
}
div.kontent-wrapper { div.kontent-wrapper {
padding-bottom: var(--footer-height); padding-bottom: var(--footer-height);
}
div.kontent {
div.kontent { padding: 15px 30px;
padding: 15px 30px; }
}
} }
/* Roztáhne obsah z containeru na celou šířku obrazovky: */ /* Roztáhne obsah z containeru na celou šířku obrazovky: */
@ -76,10 +75,10 @@ div.kontent {
img.logo-mobile { img.logo-mobile {
display: none; display: none;
} }
}
.no-mobile { .no-mobile {
background-size: contain; background-size: contain;
}
} }
/******************/ /******************/
@ -143,21 +142,21 @@ div.login-bar {
div { div {
display: inline; display: inline;
} }
}
a.login-ref-admin { a.LOGIN-ref-admin {
display: inline; display: inline;
color: var(--barva-pozadi); color: var(--barva-pozadi);
} }
.napis-webarum { .LOGIN_napis-webarum {
display: inline; display: inline;
color: var(--barva-pozadi); color: var(--barva-pozadi);
float: right; float: right;
a { a {
color: var(--svetla-oranzova); color: var(--svetla-oranzova);
text-decoration: underline; text-decoration: underline;
}
} }
} }
/*******************/ /*******************/
@ -176,10 +175,10 @@ a.login-ref-admin {
#header { #header {
background-size: 100%; background-size: 100%;
}
#header img.logo { img.logo {
width: 100%; width: 100%;
}
} }
#footer { #footer {
@ -189,9 +188,6 @@ a.login-ref-admin {
/* malý tablet, mobil */ /* malý tablet, mobil */
@media (max-width: 650px) { @media (max-width: 650px) {
.no-mobile{
display: none;
}
#hide-if-small.login-bar-flatpage { #hide-if-small.login-bar-flatpage {
display: none; display: none;
@ -205,19 +201,23 @@ a.login-ref-admin {
width: 100%; width: 100%;
top: 0; top: 0;
background-image: none; background-image: none;
}
#header img.logo { img.logo {
display: none; display: none;
} }
#header img.logo-mobile { img.logo-mobile {
display: block; display: block;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
filter: drop-shadow(0px 0 5px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0px 0 5px rgba(0, 0, 0, 0.4));
margin-bottom: 3px; margin-bottom: 3px;
}
.no-mobile{
display: none;
}
} }
} }
@ -238,8 +238,6 @@ div.dropdown-backdrop { /* tohle způsobuje, že funguje mobilní menu */
z-index: -1; z-index: -1;
} }
/* nové menu */
ul.menu { ul.menu {
width: 100%; width: 100%;
padding: 0; padding: 0;
@ -274,39 +272,39 @@ ul.menu {
color: var(--svetla-oranzova); color: var(--svetla-oranzova);
} }
} }
}
ul.submenu { ul.submenu {
background-color: var(--hlavni-oranzova); background-color: var(--hlavni-oranzova);
margin-top: 10px; /* mezera mezi hlavním menu a submenu */ margin-top: 10px; /* mezera mezi hlavním menu a submenu */
margin-bottom: 10px; margin-bottom: 10px;
padding-top: 10px; padding-top: 10px;
padding-bottom: 5px; padding-bottom: 5px;
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
z-index: 50; z-index: 50;
font-weight: 400; font-weight: 400;
li { li {
width: auto; width: auto;
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
display: inline-block; display: inline-block;
>a { >a {
color: var(--svetla-oranzova); color: var(--svetla-oranzova);
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
:hover { :hover {
color: black; 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; color: black;
}
} }
@media (max-width: 970px) { @media (max-width: 970px) {

112
mamweb/static/css/modules.css
View file

@ -51,58 +51,52 @@
/**** OTÁČECÍ KARTY ****/ /**** OTÁČECÍ KARTY ****/
/* (orgové, archiv) */ /* (orgové, archiv) */
/** Samotné karty **/
.flip-card { .flip-card {
perspective: 1000px; /* Remove this if you don't want the 3D effect */ perspective: 1000px; /* Remove this if you don't want the 3D effect */
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
/* 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 */
&: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%;
/* 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; }
}
}
/* Style the back side */
.flip-card-back {
transform: rotateY(180deg);
padding: 10px;
padding-top: 20px;
}
} }
/* 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 {
transform: rotateY(180deg);
padding: 10px;
padding-top: 20px;
}
/* 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; }
}
/*******************/
.flip-card-back { .flip-card-back {
background-color: var(--svetla-oranzova); background-color: var(--svetla-oranzova);
color: black; color: black;
@ -310,21 +304,23 @@ div.org_email {
/******************************************/ /******************************************/
/** Výsledkovky **/ /** Výsledkovky **/
.vysledkovka td:first-child, .tabulka_oramovane_sloupce th:first-child { .vysledkovka, .tabulka_oramovane_sloupce {
position: unset; td, th {
} &:first-child { position: unset; }
.vysledkovka td:nth-child(2), .tabulka_oramovane_sloupce th:nth-child(2) { &:nth-child(2) {
border-right: solid 1px; border-right: solid 1px;
position: sticky; position: sticky;
left: 0; left: 0;
background: inherit; /* (Snad) zneprůhlední druhý sloupec */ background: inherit; /* (Snad) zneprůhlední druhý sloupec */
z-index: 1; z-index: 1;
} }
.vysledkovka td:nth-child(3), .tabulka_oramovane_sloupce th:nth-child(3) { &:nth-child(3) {
border-left: none; border-left: none;
}
}
} }
/*****************/ /*****************/

8
mamweb/templates/base.html
View file

@ -43,15 +43,15 @@
<div class="login-bar" > <div class="login-bar" >
{% if view.object %} {% if view.object %}
Objekt {{ view.object }}: {{ view.object }} Objekt {{ view.object }}: {{ view.object }}
{% if view.object.admin_url %}<a class="login-ref-admin" href='{{ view.object.admin_url }}'>[admin]</a>{% endif %} {% if view.object.admin_url %}<a class="LOGIN-ref-admin" href='{{ view.object.admin_url }}'>[admin]</a>{% endif %}
{% endif %} {% endif %}
{% if flatpage %} {% if flatpage %}
<div class="login-bar-flatpage" id="hide-if-small"> Stránka <tt>{{ flatpage.url }}</tt> ({{ flatpage.title }})</div> <div class="login-bar-flatpage" id="hide-if-small"> Stránka <tt>{{ flatpage.url }}</tt> ({{ flatpage.title }})</div>
<a class="login-ref-admin" href='{% url 'admin:flatpages_flatpage_change' flatpage.id %}'>[admin]</a> <a class="LOGIN-ref-admin" href='{% url 'admin:flatpages_flatpage_change' flatpage.id %}'>[admin]</a>
{% endif %} {% endif %}
<a class="login-ref-admin" href='/admin'>[admin mainpage]</a> <a class="LOGIN-ref-admin" href='/admin'>[admin mainpage]</a>
<span class="napis-webarum">Něco ti nejde/nefunguje/mate tě? <a class="login-ref-admin" href='mailto:web@mam.mff.cuni.cz'>Napiš webařům!</a></span> <span class="LOGIN_napis-webarum">Něco ti nejde/nefunguje/mate tě? <a class="LOGIN-ref-admin" href='mailto:web@mam.mff.cuni.cz'>Napiš webařům!</a></span>
</div> </div>
{% endif %} {% endif %}