mam
/
mamweb
11
0
Fork 0
Code Issues Pull Requests 9 Projects Releases Wiki Activity
Browse Source

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

pull/44/head
Jonas Havelka 7 months ago
parent
53caf7f73a
commit
3f1a570878
3 changed files with 114 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 126
      mamweb/static/css/layout.css
  2. 100
      mamweb/static/css/modules.css
  3. 8
      mamweb/templates/base.html

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 {
padding-bottom: var(--footer-height);
}
div.kontent-wrapper {
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) {

100
mamweb/static/css/modules.css
View File

@ -51,57 +51,51 @@
/**** 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 */ /* This container is needed to position the front and back side */
.flip-card:hover .flip-card-inner { .flip-card-inner {
transform: rotateY(180deg); position: relative;
} width: 100%;
height: 100%;
/* Position the front and back side */ transition: transform 0.8s;
.flip-card-front, .flip-card-back { transform-style: preserve-3d;
position: absolute; }
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
&:hover .flip-card-inner {
transform: rotateY(180deg);
}
div.flip-card-foto, div.flip-card-foto img { /* Position the front and back side */
width: 100%; .flip-card-front, .flip-card-back {
height: 100%; 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 */ /* 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 */
.flip-card-back { @media(hover: none) {
transform: rotateY(180deg); a { pointer-events: none; }
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 */ /* Style the back side */
@media(hover: none) { .flip-card-back {
.flip-card-foto a { pointer-events: none; } transform: rotateY(180deg);
padding: 10px;
padding-top: 20px;
}
} }
/*******************/
.flip-card-back { .flip-card-back {
background-color: var(--svetla-oranzova); background-color: var(--svetla-oranzova);
@ -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 %}

Write Preview
Loading…
Cancel
Save