Nějaké další přechody na CSS nesting
This commit is contained in:
parent
53caf7f73a
commit
3f1a570878
3 changed files with 120 additions and 126 deletions
|
|
@ -18,15 +18,14 @@ div.kontejner {
|
|||
.org-logged-in & {
|
||||
margin-top: var(--login-bar-height);
|
||||
}
|
||||
}
|
||||
|
||||
div.kontent-wrapper {
|
||||
padding-bottom: var(--footer-height);
|
||||
}
|
||||
div.kontent-wrapper {
|
||||
padding-bottom: var(--footer-height);
|
||||
|
||||
|
||||
div.kontent {
|
||||
padding: 15px 30px;
|
||||
div.kontent {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Roztáhne obsah z containeru na celou šířku obrazovky: */
|
||||
|
|
@ -76,10 +75,10 @@ div.kontent {
|
|||
img.logo-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.no-mobile {
|
||||
background-size: contain;
|
||||
.no-mobile {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
/******************/
|
||||
|
||||
|
|
@ -143,21 +142,21 @@ div.login-bar {
|
|||
div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
a.login-ref-admin {
|
||||
display: inline;
|
||||
color: var(--barva-pozadi);
|
||||
}
|
||||
a.LOGIN-ref-admin {
|
||||
display: inline;
|
||||
color: var(--barva-pozadi);
|
||||
}
|
||||
|
||||
.napis-webarum {
|
||||
display: inline;
|
||||
color: var(--barva-pozadi);
|
||||
float: right;
|
||||
.LOGIN_napis-webarum {
|
||||
display: inline;
|
||||
color: var(--barva-pozadi);
|
||||
float: right;
|
||||
|
||||
a {
|
||||
color: var(--svetla-oranzova);
|
||||
text-decoration: underline;
|
||||
a {
|
||||
color: var(--svetla-oranzova);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*******************/
|
||||
|
|
@ -176,10 +175,10 @@ a.login-ref-admin {
|
|||
|
||||
#header {
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#header img.logo {
|
||||
width: 100%;
|
||||
img.logo {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
|
|
@ -189,9 +188,6 @@ a.login-ref-admin {
|
|||
|
||||
/* malý tablet, mobil */
|
||||
@media (max-width: 650px) {
|
||||
.no-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#hide-if-small.login-bar-flatpage {
|
||||
display: none;
|
||||
|
|
@ -205,19 +201,23 @@ a.login-ref-admin {
|
|||
width: 100%;
|
||||
top: 0;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#header img.logo {
|
||||
display: none;
|
||||
}
|
||||
img.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header img.logo-mobile {
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
filter: drop-shadow(0px 0 5px rgba(0, 0, 0, 0.4));
|
||||
margin-bottom: 3px;
|
||||
img.logo-mobile {
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
filter: drop-shadow(0px 0 5px rgba(0, 0, 0, 0.4));
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.no-mobile{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -238,8 +238,6 @@ div.dropdown-backdrop { /* tohle způsobuje, že funguje mobilní menu */
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
/* nové menu */
|
||||
|
||||
ul.menu {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
|
@ -274,39 +272,39 @@ ul.menu {
|
|||
color: var(--svetla-oranzova);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.submenu {
|
||||
ul.submenu {
|
||||
|
||||
background-color: var(--hlavni-oranzova);
|
||||
margin-top: 10px; /* mezera mezi hlavním menu a submenu */
|
||||
margin-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 5px;
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
|
||||
background-color: var(--hlavni-oranzova);
|
||||
margin-top: 10px; /* mezera mezi hlavním menu a submenu */
|
||||
margin-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 5px;
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
|
||||
|
||||
z-index: 50;
|
||||
font-weight: 400;
|
||||
z-index: 50;
|
||||
font-weight: 400;
|
||||
|
||||
li {
|
||||
width: auto;
|
||||
padding: 0 20px 0 20px;
|
||||
display: inline-block;
|
||||
li {
|
||||
width: auto;
|
||||
padding: 0 20px 0 20px;
|
||||
display: inline-block;
|
||||
|
||||
>a {
|
||||
color: var(--svetla-oranzova);
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
>a {
|
||||
color: var(--svetla-oranzova);
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
|
||||
:hover {
|
||||
color: black;
|
||||
:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.submenu li.active>a, .parentactive ul li:first-child>a {
|
||||
color: black;
|
||||
ul.submenu li.active>a, .parentactive ul li:first-child>a {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 970px) {
|
||||
|
|
|
|||
|
|
@ -51,58 +51,52 @@
|
|||
|
||||
/**** OTÁČECÍ KARTY ****/
|
||||
/* (orgové, archiv) */
|
||||
|
||||
/** Samotné karty **/
|
||||
.flip-card {
|
||||
perspective: 1000px; /* Remove this if you don't want the 3D effect */
|
||||
margin-left: 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 {
|
||||
background-color: var(--svetla-oranzova);
|
||||
color: black;
|
||||
|
|
@ -310,21 +304,23 @@ div.org_email {
|
|||
/******************************************/
|
||||
|
||||
/** Výsledkovky **/
|
||||
.vysledkovka td:first-child, .tabulka_oramovane_sloupce th:first-child {
|
||||
position: unset;
|
||||
}
|
||||
.vysledkovka, .tabulka_oramovane_sloupce {
|
||||
td, th {
|
||||
&:first-child { position: unset; }
|
||||
|
||||
.vysledkovka td:nth-child(2), .tabulka_oramovane_sloupce th:nth-child(2) {
|
||||
border-right: solid 1px;
|
||||
&:nth-child(2) {
|
||||
border-right: solid 1px;
|
||||
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: inherit; /* (Snad) zneprůhlední druhý sloupec */
|
||||
z-index: 1;
|
||||
}
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: inherit; /* (Snad) zneprůhlední druhý sloupec */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vysledkovka td:nth-child(3), .tabulka_oramovane_sloupce th:nth-child(3) {
|
||||
border-left: none;
|
||||
&:nth-child(3) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*****************/
|
||||
|
||||
|
|
|
|||
|
|
@ -43,15 +43,15 @@
|
|||
<div class="login-bar" >
|
||||
{% if 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 %}
|
||||
{% if flatpage %}
|
||||
<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 %}
|
||||
<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>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue