157 lines
2.8 KiB
SCSS
157 lines
2.8 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);
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
.w-md-100 {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
$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;
|
|
}
|
|
|
|
.poster-list {
|
|
img {
|
|
display: block;
|
|
height: auto;
|
|
width: 100%;
|
|
max-width:12rem;
|
|
max-height:18rem;
|
|
}
|
|
}
|
|
|
|
.list-details {
|
|
position: sticky;
|
|
top: $body-padding-top;
|
|
z-index: $zindex-sticky;
|
|
height: calc(100vh - #{$body-padding-top});
|
|
}
|
|
|
|
.video-details {
|
|
> div, > p, > span {
|
|
margin-bottom: 1rem;
|
|
@media (max-height: 820px) {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
@media (max-height: 580px) {
|
|
margin-bottom: 0rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.show-season > div.card-body {
|
|
background-color: rgba($body-bg, .5)
|
|
}
|
|
|
|
.episode-thumb {
|
|
img {
|
|
@include media-breakpoint-down(md) {
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
display: block;
|
|
height: auto;
|
|
max-width:40rem;
|
|
max-height:22.5rem;
|
|
}
|
|
}
|
|
|
|
.show-thumbnail {
|
|
max-height: 30rem;
|
|
}
|
|
|
|
div.sweet-alert > h2 {
|
|
color: $body-bg;
|
|
}
|
|
|
|
.player-modal {
|
|
width: 90%;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5rem;
|
|
@include media-breakpoint-down(md) {
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
|
|
.wishlist-button:hover > i {
|
|
color: $primary;
|
|
}
|
|
|
|
.notifications {
|
|
position: fixed;
|
|
top: $body-padding-top;
|
|
z-index: $zindex-fixed;
|
|
max-height: calc(100vh - #{$body-padding-top});
|
|
right: 1rem;
|
|
width: 18rem;
|
|
}
|
|
|
|
.toast-header {
|
|
background-color: $card-cap-bg;
|
|
color: $gray-100;
|
|
|
|
> button > span {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.toast {
|
|
background-color: $card-bg;
|
|
}
|
|
|
|
.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|