149 lines
3.5 KiB
SCSS
149 lines
3.5 KiB
SCSS
|
.watch {
|
||
|
|
@apply bg-slate-100;
|
||
|
|
&.info {
|
||
|
|
@apply container mx-auto p-6 text-body;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-btn {
|
||
|
|
@apply bg-secondary bg-opacity-100 hover:bg-opacity-50 cursor-pointer;
|
||
|
|
@apply md:py-[2px] py-2 mx-1 px-2 font-semibold text-sm text-white;
|
||
|
|
&a {
|
||
|
|
@apply md:py-[2px] py-2;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.elements {
|
||
|
|
@apply grid grid-cols-1 md:grid-cols-2 w-full gap-x-5 gap-y-1 mt-3;
|
||
|
|
|
||
|
|
.el {
|
||
|
|
|
||
|
|
.name {
|
||
|
|
@apply mr-2 font-semibold
|
||
|
|
}
|
||
|
|
.csv:not(:empty) ~ .csv:not(:empty):before {
|
||
|
|
margin-right: 5px;
|
||
|
|
content: ", ";
|
||
|
|
}
|
||
|
|
|
||
|
|
&.genres {
|
||
|
|
@apply flex gap-1 items-center;
|
||
|
|
}
|
||
|
|
.genre {
|
||
|
|
@apply flex flex-wrap gap-1;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.details {
|
||
|
|
@apply p-5 pt-0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tags {
|
||
|
|
@apply w-full mx-auto mt-5 flex flex-wrap gap-2 text-xl;
|
||
|
|
// a {
|
||
|
|
// @apply text-sm px-4 font-semibold;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
@apply text-2xl font-semibold mb-3;
|
||
|
|
}
|
||
|
|
|
||
|
|
// .play-wrap {
|
||
|
|
// @apply inline-flex items-center h-20;
|
||
|
|
// .play-content {
|
||
|
|
// @apply relative h-[80px] aspect-square cursor-pointer;
|
||
|
|
|
||
|
|
// .icon {
|
||
|
|
// @apply absolute h-full w-full flex items-center justify-center z-10;
|
||
|
|
// svg {
|
||
|
|
// @apply w-12 h-12 z-10 bg-primary text-white;
|
||
|
|
// stroke: #fff;
|
||
|
|
// fill: #fff;
|
||
|
|
|
||
|
|
// border-radius: 50%;
|
||
|
|
// box-shadow: 0 0 40px 5px #4f802b;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
// .loader {
|
||
|
|
// position: absolute;
|
||
|
|
// width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
// top: 0;
|
||
|
|
// left: 0;
|
||
|
|
// &::before, &::after {
|
||
|
|
// opacity: 0;
|
||
|
|
// box-sizing: border-box;
|
||
|
|
// content: "\0020";
|
||
|
|
// position: absolute;
|
||
|
|
// top: 0;
|
||
|
|
// left: 0;
|
||
|
|
// width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
// border-radius: 100px;
|
||
|
|
// border: 3px solid #79C142;
|
||
|
|
// box-shadow: 0 0 50px #4f802b, inset 0 0 50px #4f802b;
|
||
|
|
// }
|
||
|
|
// &::after {
|
||
|
|
// z-index: 1;
|
||
|
|
// animation: playloader 2s infinite 1s;
|
||
|
|
// }
|
||
|
|
// &::before {
|
||
|
|
// z-index: 2;
|
||
|
|
// animation: playloader 2s infinite;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
// }
|
||
|
|
|
||
|
|
// @keyframes playloader{
|
||
|
|
// 0%{ transform: scale(0); opacity: 0; }
|
||
|
|
// 50%{ opacity: 1; }
|
||
|
|
// 100%{ transform: scale(1); opacity: 0; }
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
.seasons-list {
|
||
|
|
@apply container p-5 mt-5 bg-slate-100;
|
||
|
|
.seasons-wrapper{
|
||
|
|
> span {
|
||
|
|
@apply text-lg
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.seasons {
|
||
|
|
@apply flex gap-2 flex-wrap mt-3;
|
||
|
|
a {
|
||
|
|
@apply bg-secondary px-2 py-1 hover:bg-opacity-50 hover:text-body text-white;
|
||
|
|
&.active {
|
||
|
|
@apply bg-opacity-50 font-medium text-body;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.episodes-wrapper{
|
||
|
|
@apply mt-5;
|
||
|
|
> span {
|
||
|
|
@apply text-lg
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.episodes {
|
||
|
|
@apply flex gap-2 flex-wrap mt-3 text-white;
|
||
|
|
span {
|
||
|
|
@apply bg-secondary px-2 py-1 hover:bg-opacity-50 cursor-pointer hover:text-body;
|
||
|
|
&.active {
|
||
|
|
@apply bg-opacity-50 font-medium cursor-default;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|