This repository has been archived on 2022-03-27. You can view files and clone it, but cannot push or open issues or pull requests.
presis/revealjs/alternative_energy/kardaschow.css

78 lines
1.4 KiB
CSS

#kardaschow {
bottom: 0px;
position: fixed;
top: 0px;
width: 100%;
}
#kardaschow .current-fragment ~ .fragment,
#kardaschow .visible {
height: 60px;
}
#kardaschow .current-fragment ~ .fragment h1,
#kardaschow .visible h1 {
font-size: 1em;
}
#kardaschow .current-fragment {
height: 609px !important;
}
#kardaschow .current-fragment h1 {
font-size: 2em;
}
#kardaschow .current-fragment .expand {
display: initial !important;
}
#kardaschow div {
overflow: hidden;
}
#kardaschow div h1 {
transition: all .2s ease;
}
#kardaschow div .expand {
display: none !important;
}
#kardaschow div:not(.visible) {
height: 243px;
opacity: 1;
visibility: visible;
}
#kardaschow div:not(.visible) h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#kardaschow #type-1 {
background-color: #fc6769;
}
#kardaschow #type-2 {
background-color: #63c9ce;
}
#kardaschow #type-3 {
background-color: #f4e623;
/*img {
animation: rotate 300s infinite linear;
// easter egg
&:hover {
animation: rotate 1s infinite linear;
}
}*/
}
.expand img {
margin: inherit !important;
background: inherit !important;
border: inherit !important;
box-shadow: inherit !important;
max-height: unset;
max-width: unset;
max-width: 95%;
max-height: 60%;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}