104 lines
1.9 KiB
SCSS
104 lines
1.9 KiB
SCSS
$fa-font-path: "~font-awesome/fonts";
|
|
|
|
@import "~font-awesome/scss/font-awesome";
|
|
@import "~bootswatch/dist/superhero/variables";
|
|
@import "~bootstrap/scss/bootstrap";
|
|
@import "~bootswatch/dist/superhero/bootswatch";
|
|
@import "~react-bootstrap-toggle/dist/bootstrap2-toggle.css";
|
|
|
|
// Change all buttons to small on xs
|
|
@include media-breakpoint-between(xs,sm){
|
|
.btn {
|
|
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
|
}
|
|
}
|
|
|
|
$body-padding-top: $navbar-padding-y + 3rem;
|
|
|
|
body {
|
|
padding-top: $body-padding-top;
|
|
}
|
|
|
|
.object-fit-cover {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.object-position-top {
|
|
object-position: top;
|
|
}
|
|
|
|
.mh-40vh {
|
|
max-height: 40vh;
|
|
}
|
|
|
|
// Remove borders from the navbar
|
|
.navbar-toggler,
|
|
div.show.dropdown.nav-item > div {
|
|
border: none;
|
|
}
|
|
|
|
.thumbnail-selected {
|
|
transition: border 400ms ease-in-out;
|
|
animation-name: select-thumbnail;
|
|
animation-duration: 400ms;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
@keyframes select-thumbnail {
|
|
0% { background-color: $secondary; }
|
|
100% { background-color: $primary; }
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.plot {
|
|
text-align: justify;
|
|
max-height: 50%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.poster-list {
|
|
img {
|
|
max-height: 20rem;
|
|
object-fit: cover;
|
|
max-width: 100%;
|
|
flex-basis: content;
|
|
}
|
|
}
|
|
|
|
.list-details {
|
|
position: sticky;
|
|
top: $body-padding-top;
|
|
z-index: 1000;
|
|
height: calc(100vh - #{$body-padding-top});
|
|
}
|
|
|
|
.video-details {
|
|
font-size: $font-size-sm;
|
|
p {
|
|
margin-bottom: .3rem;
|
|
}
|
|
|
|
}
|
|
@include media-breakpoint-up(sm) {
|
|
.video-details {
|
|
font-size: $font-size-base;
|
|
p {
|
|
margin-bottom: $paragraph-margin-bottom;
|
|
}
|
|
}
|
|
}
|
|
|
|
.show-thumbnail {
|
|
max-height: 300px;
|
|
}
|
|
|
|
div.sweet-alert > h2 {
|
|
color: $body-bg;
|
|
}
|
|
|
|
.player-modal {
|
|
width: 90%;
|
|
}
|