555 lines
No EOL
10 KiB
CSS
555 lines
No EOL
10 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply mx-auto h-full w-full max-w-[1440px] bg-app-dark-blue;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.heading-lg {
|
|
@apply text-app-heading-lg font-light;
|
|
}
|
|
|
|
.heading-md {
|
|
@apply text-app-heading-md font-light;
|
|
}
|
|
|
|
.heading-sm {
|
|
@apply text-app-heading-md font-medium;
|
|
}
|
|
|
|
.heading-xs {
|
|
@apply text-app-heading-xs font-medium;
|
|
}
|
|
|
|
.section-title {
|
|
@apply md:heading-lg text-xl font-light capitalize leading-none;
|
|
}
|
|
|
|
.icon-nav {
|
|
@apply fill-app-greyish-blue transition duration-150 ease-linear hover:fill-app-red ;
|
|
}
|
|
|
|
.active-link {
|
|
@apply fill-app-pure-white transition duration-150 ease-linear fill-app-red ;
|
|
}
|
|
|
|
.disabled-link {
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
|
|
/* Custom horizontal scroll for trending section */
|
|
.h-scroll::-webkit-scrollbar {
|
|
border-radius: 10px;
|
|
height: 8px;
|
|
width: 8px;
|
|
}
|
|
.h-scroll::-webkit-scrollbar-thumb:horizontal {
|
|
background: #5a698f; /* app-greyish-blue */
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.card-collection-wrapper {
|
|
@apply flex flex-col items-center gap-4 sm:gap-x-7 sm:gap-y-6 xl:gap-x-10 xl:gap-y-8 2xs:flex-row 2xs:flex-wrap 2xs:justify-between;
|
|
}
|
|
|
|
.card-hover-animation {
|
|
@apply hover:animate-wiggle hover:even:animate-wiggle-opposite motion-reduce:transition-none motion-reduce:hover:transform-none;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
/* Reference: https://codepen.io/ivillamil/pen/xxaEdB */
|
|
.loader {
|
|
animation: rotate 1s infinite;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
.loader:before,
|
|
.loader:after {
|
|
border-radius: 50%;
|
|
content: '';
|
|
display: block;
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
.loader:before {
|
|
animation: ball1 1s infinite;
|
|
background-color: #cb2025;
|
|
box-shadow: 30px 0 0 #f8b334;
|
|
margin-bottom: 10px;
|
|
}
|
|
.loader:after {
|
|
animation: ball2 1s infinite;
|
|
background-color: #00a096;
|
|
box-shadow: 30px 0 0 #97bf0d;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
-webkit-transform: -webkit-rotate(0deg) -webkit-scale(0.8);
|
|
-webkit-transform: rotate(0deg) scale(0.8);
|
|
-moz-transform: -webkit-rotate(0deg) scale(0.8);
|
|
transform: -webkit-rotate(0deg) scale(0.8);
|
|
}
|
|
50% {
|
|
-webkit-transform: -webkit-rotate(360deg) -webkit-scale(1.2);
|
|
-webkit-transform: rotate(360deg) scale(1.2);
|
|
-moz-transform: rotate(360deg) scale(1.2);
|
|
transform: rotate(360deg) scale(1.2);
|
|
}
|
|
100% {
|
|
-webkit-transform: -webkit-rotate(720deg) -webkit-scale(0.8);
|
|
-webkit-transform: rotate(720deg) scale(0.8);
|
|
-moz-transform: rotate(720deg) scale(0.8);
|
|
transform: rotate(720deg) scale(0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes ball1 {
|
|
0% {
|
|
box-shadow: 30px 0 0 #f8b334;
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 #f8b334;
|
|
margin-bottom: 0;
|
|
-webkit-transform: -webkit-translate(15px, 15px);
|
|
-webkit-transform: translate(15px, 15px);
|
|
-moz-transform: translate(15px, 15px);
|
|
transform: translate(15px, 15px);
|
|
}
|
|
100% {
|
|
box-shadow: 30px 0 0 #f8b334;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
@keyframes ball2 {
|
|
0% {
|
|
box-shadow: 30px 0 0 #97bf0d;
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 #97bf0d;
|
|
margin-top: -20px;
|
|
-webkit-transform: -webkit-translate(15px, 15px);
|
|
-webkit-transform: translate(15px, 15px);
|
|
-moz-transform: translate(15px, 15px);
|
|
transform: translate(15px, 15px);
|
|
}
|
|
100% {
|
|
box-shadow: 30px 0 0 #97bf0d;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
input::placeholder {
|
|
|
|
opacity: 0.5;
|
|
}
|
|
|
|
input {
|
|
|
|
opacity: 0.9;
|
|
}
|
|
|
|
|
|
a {
|
|
@apply fill-white;
|
|
}
|
|
|
|
|
|
.text-blue {
|
|
color: blue;
|
|
}
|
|
|
|
.content p {
|
|
@apply my-6;
|
|
}
|
|
|
|
.content ul {
|
|
@apply my-6;
|
|
}
|
|
|
|
.checkbox {
|
|
display: inline-flex;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.checkbox > span {
|
|
color: #fff;
|
|
padding: 0 1.3rem 1rem 0.5rem ;
|
|
font-size:13px;
|
|
}
|
|
|
|
.checkbox > input {
|
|
margin-top:2px;
|
|
height: 14px;
|
|
width: 14px;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
appearance: none;
|
|
border-radius: 1px;
|
|
outline: none;
|
|
transition-duration: 0.3s;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox > input:checked {
|
|
position:relative;
|
|
}
|
|
|
|
.checkbox > input:checked + span::before {
|
|
content: '\2713';
|
|
display: block;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
color: black;
|
|
position: absolute;
|
|
font-size:12px;
|
|
left: 0.15rem;
|
|
top: 0;
|
|
}
|
|
|
|
.checkbox > input:active {
|
|
border: 2px solid #34495E;
|
|
}
|
|
|
|
|
|
.long-and-truncated {
|
|
margin: 0 15px;
|
|
flex: 1;
|
|
min-width: 0;/* Important for long words! */
|
|
}
|
|
|
|
|
|
.long-and-truncated span {
|
|
display: inline;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display:-webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
word-wrap: break-word;/* Important for long words! */
|
|
}
|
|
|
|
|
|
.loader-text {
|
|
padding-top: 50px;
|
|
top: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
color: #41B883;
|
|
}
|
|
.loader_wrapper {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 999999;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.lds-roller {
|
|
display: inline-block;
|
|
width: 64px;
|
|
position: absolute;
|
|
height: 64px;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.lds-roller div {
|
|
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
transform-origin: 32px 32px;
|
|
}
|
|
.lds-roller div:after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #41B883;
|
|
margin: -3px 0 0 -3px;
|
|
}
|
|
.lds-roller div:nth-child(1) {
|
|
animation-delay: -0.036s;
|
|
}
|
|
.lds-roller div:nth-child(1):after {
|
|
top: 50px;
|
|
left: 50px;
|
|
}
|
|
.lds-roller div:nth-child(2) {
|
|
animation-delay: -0.072s;
|
|
}
|
|
.lds-roller div:nth-child(2):after {
|
|
top: 54px;
|
|
left: 45px;
|
|
}
|
|
.lds-roller div:nth-child(3) {
|
|
animation-delay: -0.108s;
|
|
}
|
|
.lds-roller div:nth-child(3):after {
|
|
top: 57px;
|
|
left: 39px;
|
|
}
|
|
.lds-roller div:nth-child(4) {
|
|
animation-delay: -0.144s;
|
|
}
|
|
.lds-roller div:nth-child(4):after {
|
|
top: 58px;
|
|
left: 32px;
|
|
}
|
|
.lds-roller div:nth-child(5) {
|
|
animation-delay: -0.18s;
|
|
}
|
|
.lds-roller div:nth-child(5):after {
|
|
top: 57px;
|
|
left: 25px;
|
|
}
|
|
.lds-roller div:nth-child(6) {
|
|
animation-delay: -0.216s;
|
|
}
|
|
.lds-roller div:nth-child(6):after {
|
|
top: 54px;
|
|
left: 19px;
|
|
}
|
|
.lds-roller div:nth-child(7) {
|
|
animation-delay: -0.252s;
|
|
}
|
|
.lds-roller div:nth-child(7):after {
|
|
top: 50px;
|
|
left: 14px;
|
|
}
|
|
.lds-roller div:nth-child(8) {
|
|
animation-delay: -0.288s;
|
|
}
|
|
.lds-roller div:nth-child(8):after {
|
|
top: 45px;
|
|
left: 10px;
|
|
}
|
|
@keyframes lds-roller {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
._3uApM {
|
|
display: none !important;
|
|
}
|
|
._2JvrO {
|
|
background: #41B883 !important;
|
|
}
|
|
._2kL0S {
|
|
background: #41B883 !important;
|
|
} /* ._2Jtxm { background-color: #e7eaf3; } */
|
|
._53Ji7 {
|
|
padding: 0rem !important;
|
|
}
|
|
.powredby {
|
|
text-align: center;
|
|
}
|
|
.text-green{
|
|
color: #4cbb17;
|
|
}
|
|
.error-l{
|
|
position: absolute;
|
|
font-size: 14px;
|
|
padding-left: 45px;
|
|
}
|
|
|
|
table, tr, td{
|
|
font-family: "Roboto", sans-serif;
|
|
}
|
|
|
|
|
|
|
|
|
|
.react-select-container .react-select__control {
|
|
background: rgb(74 85 104 / 1);
|
|
background-color: #34495E;
|
|
}
|
|
.react-select__menu{
|
|
background-color: #34495E;
|
|
|
|
}
|
|
.react-select__menu-list{
|
|
background-color: #34495E;
|
|
|
|
|
|
}
|
|
.react-select__menu-list :hover{
|
|
color: #34495E !important;
|
|
}
|
|
|
|
.react-select__option{
|
|
color: #34495E ;
|
|
}
|
|
.css-1p3m7a8-multiValue{
|
|
background-color: #55aa7b !important;
|
|
}
|
|
.css-qbdosj-Input{
|
|
color: #34495E !important;
|
|
}
|
|
.ReactModal__Overlay{
|
|
background:rgb(11 9 9 / 75%) !important;
|
|
}
|
|
.row-custom{
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
width: 250px;
|
|
@media(max-width: 767px){
|
|
width: 90%;
|
|
}
|
|
}
|
|
.row-custom-tren{
|
|
|
|
|
|
@media(max-width: 767px){
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
width: 90%;
|
|
}
|
|
}
|
|
.bgfilter{
|
|
|
|
border-radius: 20px;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
margin-right: 12px;
|
|
max-width: 100px;
|
|
justify-content: space-around;
|
|
@media(min-width: 767px){
|
|
margin-left:17%;
|
|
}
|
|
|
|
}
|
|
.shift-right {
|
|
justify-content:end;
|
|
@media(max-width: 767px){
|
|
justify-content:center;
|
|
}
|
|
}
|
|
|
|
.zoomcss{
|
|
zoom: 0.;
|
|
@media(max-width: 767px){
|
|
zoom:0.5;
|
|
}
|
|
}
|
|
.nav-res{
|
|
@media(max-width: 380px){
|
|
width:70%
|
|
}
|
|
}
|
|
.card{
|
|
margin: 2rem;
|
|
@media(max-width: 380px){
|
|
margin:0;
|
|
}
|
|
}
|
|
.gap{
|
|
@media(max-width: 767px){
|
|
justify-content:space-between;
|
|
}
|
|
}
|
|
.mright{
|
|
@media(min-width: 700px){
|
|
margin-left:21%;
|
|
}
|
|
}
|
|
|
|
.nosimilar_torrent{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.bg-card{
|
|
background-color: #171e30;
|
|
}
|
|
|
|
.imagefit{
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center center;
|
|
}
|
|
.p-2{
|
|
padding: 2px;
|
|
}
|
|
.p-3{
|
|
padding: 3px;
|
|
}
|
|
|
|
.zoom{
|
|
zoom: 1;
|
|
@media(max-width: 767px){
|
|
zoom:0.5;
|
|
}
|
|
}
|
|
.mt-6{
|
|
@media(min-width: 767px){
|
|
margin-left:20px;
|
|
margin-right:20px;
|
|
}
|
|
}
|
|
.head {
|
|
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
font-size: 2rem;
|
|
|
|
font-weight: 400;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
color: #f35626;
|
|
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-animation: hue 10s infinite linear;
|
|
|
|
@media(max-width: 767px){
|
|
font-size: 1.2rem;
|
|
}
|
|
@media(max-width: 348px){
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
@keyframes hue {
|
|
from {
|
|
-webkit-filter: hue-rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-filter: hue-rotate(-360deg);
|
|
}
|
|
}
|
|
.active-link:focus {
|
|
outline: none; /* Remove the outline */
|
|
border: none; /* Remove the border */
|
|
}
|
|
.icon-nav:focus {
|
|
outline: none; /* Remove the outline */
|
|
border: none; /* Remove the border */
|
|
} |