203 lines
3.0 KiB
CSS
203 lines
3.0 KiB
CSS
/* BASE */
|
||
|
||
:root {
|
||
--color-primary: #375a7f;
|
||
--color-background: #343c3d;
|
||
}
|
||
|
||
#nav {
|
||
z-index: 101;
|
||
}
|
||
|
||
#nav.is-fixed-top {
|
||
position: sticky;
|
||
top: -1px;
|
||
}
|
||
|
||
#menu.force-display {
|
||
display: flex !important;
|
||
}
|
||
|
||
/* Cada flecha en los títulos de secciones */
|
||
.arrows {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.arrows:before {
|
||
content: " ❯❯";
|
||
}
|
||
|
||
/* HOME */
|
||
|
||
/* Cada sección de pelis */
|
||
|
||
.hero-cartels {
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.cartels {
|
||
clear: both;
|
||
width: calc(100% + 3rem);
|
||
margin-left: -1.5rem !important;
|
||
padding-left: 0;
|
||
display: grid;
|
||
align-items: center;
|
||
grid-template-columns: repeat(1, 1fr);
|
||
}
|
||
|
||
@media screen and (min-width: 300px) {
|
||
.cartels {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 450px) {
|
||
.cartels {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 600px) {
|
||
.cartels {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 750px) {
|
||
.cartels {
|
||
grid-template-columns: repeat(5, 1fr);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 900px) {
|
||
.cartels {
|
||
grid-template-columns: repeat(6, 1fr);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1920px) {
|
||
.cartels {
|
||
width: auto;
|
||
margin: 0 !important;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
}
|
||
}
|
||
|
||
/* Cada peli */
|
||
|
||
.cartel {
|
||
position: relative;
|
||
float: left;
|
||
min-width: 150px;
|
||
min-height: 225px;
|
||
max-width: 300px;
|
||
max-height: 450px;
|
||
}
|
||
|
||
.cartel img {
|
||
object-fit: cover;
|
||
}
|
||
|
||
.cartel .info-container {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,.5);
|
||
z-index: 102;
|
||
}
|
||
|
||
/* HOME / MOVIE */
|
||
|
||
/* Cada ficha de peli */
|
||
|
||
.movie-head {
|
||
padding: 2rem 2rem 0 2rem !important;
|
||
}
|
||
|
||
.movie-body {
|
||
padding: 2rem !important;
|
||
}
|
||
|
||
.movie-body video {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.info {
|
||
position: fixed;
|
||
width: 90%;
|
||
height: 90vh;
|
||
background-color: var(--color-background);
|
||
z-index: 103;
|
||
}
|
||
|
||
.info .is-fullheight {
|
||
height: 100%;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.stats span {
|
||
padding-right: 2rem;
|
||
}
|
||
|
||
.stars {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
/* Despliegue de la ficha; Cfr:
|
||
* https://stackoverflow.com/questions/42177216/manipulate-css-class-without-javascript
|
||
* https://stackoverflow.com/questions/55858255/custom-checkbox-with-css-before-not-working-in-firefox-edge
|
||
*/
|
||
|
||
.toggle:checked ~ .info-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.toggle {
|
||
position: absolute;
|
||
z-index: 100;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.toggle + label {
|
||
visibility: visible;
|
||
content: "";
|
||
display: none;
|
||
color: white;
|
||
text-align: center;
|
||
font-size: 3rem;
|
||
background: var(--color-background);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.toggle:checked {
|
||
display: block;
|
||
visibility: 0;
|
||
z-index: 104;
|
||
}
|
||
|
||
.toggle:checked ~ label {
|
||
z-index: 103;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.toggle:checked,
|
||
.toggle:checked ~ label {
|
||
position: fixed;
|
||
top: calc(5vh + 1rem);
|
||
right: calc(5vw + 1rem);
|
||
width: 2rem;
|
||
height: 2rem;
|
||
}
|