element */
.card_announcement .gotoannouncementbutton {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 0px) {
.cards {
min-width: 100%;
grid-template-columns: repeat(1, 1fr);
}
.cards2 {
min-width: 100%;
grid-template-columns: repeat(1, 1fr);
}
.cards4 {
grid-template-columns: repeat(1, 1fr);
}
.cards5 {
min-width: 100%;
padding-top: 2rem;
grid-template-columns: repeat(1, 1fr);
}
.card_live,
.card_announcement {
width: 100%;
grid-template-columns: repeat(1, 1fr);
}
}
@media (min-width: 360px) {
.cards {
grid-template-columns: repeat(1, 1fr);
}
.cards2 {
grid-template-columns: repeat(1, 1fr);
}
.cards4 {
grid-template-columns: repeat(1, 1fr);
}
.cards5 {
padding-top: 2rem;
grid-template-columns: repeat(1, 1fr);
}
.card_live,
.card_announcement {
grid-template-columns: repeat(1, 1fr);
}
}
[dir="ltr"] .cards3>a:first-child {
margin-left: 10px;
}
[dir="ltr"] .cards3>a:last-child {
margin-right: 10px;
}
[dir="rtl"] .cards3>a:first-child {
margin-right: 10px;
}
[dir="rtl"] .cards3>a:last-child {
margin-left: 10px;
}
@media (max-width: 699px) {
.cards3 {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.cards3::-webkit-scrollbar {
display: none;
}
.cards3>a {
flex: 0 0 auto;
scroll-snap-align: center;
width: 90%;
}
}
@media (min-width: 700px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
.cards3 {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.cards3>a {
flex: 0 0 calc(33.333% - 10px);
/* 3 cards visible at once */
scroll-snap-align: center;
}
.cards3 {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Firefox */
}
.cards3::-webkit-scrollbar {
display: none;
/* Chrome, Edge, Safari */
}
.cards4 {
grid-template-columns: repeat(2, 1fr);
}
}
.card {
background-color: var(--bg-cards);
border: 1px solid var(--card-border);
border-radius: 10px;
color: var(--font-color);
min-height: fit-content;
min-height: -moz-fit-content;
transition: 0.3s;
}
.card_in_live {
background-color: #be0000;
border: 1px solid #980000;
border-radius: 10px;
color: var(--font-color);
min-height: fit-content;
min-height: -moz-fit-content;
transition: 0.3s;
}
.announcement_normal {
background-color: var(--bg-cards);
border: 1px solid var(--card-border);
border-radius: 10px;
color: var(--font-color);
min-height: fit-content;
min-height: -moz-fit-content;
transition: 0.3s;
}
.announcement_medium {
background-color: var(--color-active);
border: 1px solid var(--font-color-invert);
border-radius: 10px;
color: var(--font-color);
min-height: fit-content;
min-height: -moz-fit-content;
transition: 0.3s;
}
.announcement_high {
background-color: #be0000;
border: 1px solid #980000;
border-radius: 10px;
color: var(--font-color);
min-height: fit-content;
min-height: -moz-fit-content;
transition: 0.3s;
}
.announcement_high:hover {
background-color: #be0000 !important;
}
.card2 {
transition: 0.3s;
height: 96%;
}
.card2:hover {
background-color: var(--card-hover);
border-radius: 10px;
transition: 0.3s;
}
#continuewatching {
margin-bottom: 32px;
}
.gotoepsbutton {
transition: 0.3s;
}
.gotolivebutton {
color: white;
transition: 0.3s;
}
.gotoannouncementbutton {
padding-left: 20px;
padding-right: 20px;
color: var(--font-color);
transition: 0.3s;
}
.gotoepsbutton:hover {
background-color: var(--card-hover);
border-radius: 10px;
padding-top: 1px;
padding-bottom: 1px;
transition: 0.3s;
}
.gotolivebutton:hover {
background-color: #d00909;
border-radius: 10px;
padding-top: 1px;
padding-bottom: 1px;
transition: 0.3s;
}
#live_nav_button {
background-color: rgba(190, 0, 0, 0.7);
border-radius: 10px;
}
.index-text {
color: var(--font-color-index);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
margin-top: 20px;
}
.nav-active {
color: var(--color-active) !important;
background-color: var(--color-active-transparent) !important;
border-radius: 10px;
pointer-events: none;
}
.nav-active i {
color: var(--color-active) !important;
}
.theme {
float: right;
}
[dir="rtl"] .theme {
float: left;
}
@-moz-document url-prefix() {
#theme-switch {
padding-top: 13px !important;
}
}
.setting-text {
color: var(--font-color-settings);
display: inline-block;
}
.date-header {
font-weight: bold;
background: var(--color-gradient);
/* background-color: var(--color-active); */
border-radius: 10px;
color: var(--font-color-invert);
margin-left: -10px;
padding: 5px 10px 5px 10px;
height: 20px;
min-height: 20px;
transition: 0.3s;
}
[dir="ltr"] .date-header {
float: left;
}
[dir="rtl"] .date-header {
float: right;
}
.ep_title_indes {
transition: 0.3s;
}
.drop-lang-item {
height: auto !important;
width: 87%;
}
.fireworks,
#confetti {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.date-header-counter {
display: none;
border-radius: 10px;
color: var(--font-color-index);
border: 2px solid var(--font-color-index);
padding: 3px 10px 3px 10px;
min-height: 19px;
transition: 0.3s;
}
[dir="ltr"] .date-header-counter {
float: right;
}
[dir="rtl"] .date-header-counter {
float: left;
}
.container {
position: relative;
text-align: center;
}
/* Top right text */
.top-right {
position: absolute;
top: -6px;
background-color: var(--bg-bottom-right);
color: var(--font-color);
padding: 3px;
border-radius: 50%;
transition: 0.3s;
}
[dir="ltr"] .top-right {
right: 8px;
}
[dir="rtl"] .top-right {
left: 8px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: -8px;
background-color: var(--bg-bottom-right);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
color: var(--font-color);
padding: 4px;
border-radius: 10px;
transition: 0.3s;
}
[dir="ltr"] .bottom-right {
right: 8px;
}
[dir="rtl"] .bottom-right {
left: 8px;
}
.continue {
cursor: pointer;
}
#watchlater:hover {
background-color: var(--card-hover);
border-radius: 10px;
transition: 0.3s;
}
@media (min-width: 0px) {
.container {
width: auto;
height: 200px;
}
.header-continue {
text-align: center;
}
.epTitle {
text-align: center;
}
.top-right {
display: block;
}
.container3 {
display: none;
}
}
@media (min-width: 700px) {
.container {
width: auto;
height: 100%;
}
.container2 {
max-height: 100%;
}
[dir="ltr"] .container {
float: left;
}
[dir="rtl"] .container {
float: right;
}
[dir="ltr"] .container2 {
padding-left: 20px;
float: left;
}
[dir="rtl"] .container2 {
padding-right: 20px;
float: right;
}
.top-right {
display: none;
}
.container3 {
display: block;
height: 100%;
position: relative;
font-size: x-large;
}
[dir="ltr"] .container3 {
padding-right: 40px;
float: right;
}
[dir="rtl"] .container3 {
padding-left: 40px;
float: left;
}
.remove-watchlater {
padding: 3px 6px;
transition: 0.3s;
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
.remove-watchlater:hover {
background-color: var(--bg-button-hover);
border-radius: 10px;
}
#watchlater:hover {
background-color: var(--bg-button-hover);
border-radius: 10px;
}
.continue {
height: 110px;
}
.header-continue {
text-align: left;
}
[dir="rtl"] .header-continue {
text-align: right;
}
.epTitle {
text-align: left;
}
[dir="rtl"] .epTitle {
text-align: right;
}
}
/* Add animation to "page content" */
.animate {
position: relative;
-webkit-animation-name: animate;
-webkit-animation-duration: 0.5s;
animation-name: animate;
animation-duration: 0.5s;
}
@-webkit-keyframes animate {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes animate {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.hidden {
display: none;
}
.hidden2 {
display: none;
}
#live_nav_button {
color: white;
border-bottom: 0;
}
.yourtimezone {
text-align: center;
font-size: small;
color: var(--font-color-footer);
}
.color-schemes {
flex-direction: column;
}
.color-schemes span {
align-self: flex-start;
}
.colors-container {
width: 100%;
}
.color-pick {
width: 25px;
height: 25px;
border-radius: 50px;
margin-top: 10px;
display: inline-block;
border: 2px solid var(--bg-color2);
cursor: pointer;
}
.colors-container .color-pick:not(:last-child) {
margin-right: 3px;
}
#color-default {
background: linear-gradient(to right, white 50%, black 50%);
}
#color-red {
background: linear-gradient(45deg, #d31417 30%, #e85b3a 90%);
}
#color-orange {
background: linear-gradient(45deg, #f65723 30%, #f5bb5a 90%);
}
#color-yellow {
background: linear-gradient(45deg, #f3d723 30%, #d5e055 90%);
}
#color-green {
background: linear-gradient(45deg, #1aad1a 30%, #4abf78 90%);
}
#color-blue {
background: linear-gradient(45deg, #0498f0 30%, #7b89d9 90%);
}
#color-purple {
background: linear-gradient(45deg, #6643c0 30%, #a17bbf 90%);
}
.selected-color {
outline: 2px solid var(--color-active);
}
.abovebutton {
padding: 5px;
float: left;
border: solid 1.5px var(--card-border);
border-radius: 10px;
height: 18px;
display: flex;
align-items: center;
/* vertical centering */
justify-content: center;
/* horizontal centering (optional) */
}
.abovebutton:hover {
background-color: var(--bg-button-hover);
border-radius: 10px;
transition: 0.3s;
}
.arrow-container-wrapper {
padding: 20px 15px;
border: solid 1.5px var(--card-border);
border-radius: 100px;
}
.arrow-container-wrapper:hover {
background-color: var(--bg-button-hover);
border-radius: 100px;
transition: 0.3s;
cursor: pointer;
}
.form_button,
.form_button_download {
background-color: var(--bg-button);
border: none;
color: var(--font-color);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
margin-top: 10px;
transition: 0.3s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form_button_small {
background-color: var(--bg-button);
border: none;
color: var(--font-color);
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
transition: 0.3s;
}
.form_button:hover,
.form_button_download:hover {
background-color: var(--bg-button-hover);
cursor: pointer;
}
.form_button_small:hover {
background-color: var(--bg-button-hover);
cursor: pointer;
}
select {
background-color: var(--bg-button);
border-radius: 10px;
padding: 8px 16px;
border: none;
color: var(--font-color);
transition: 0.3s;
}
select:hover {
background-color: var(--bg-button-hover);
}
option {
background-color: var(--bg-color2);
color: var(--font-color);
}
option:checked,
option:hover {
background-color: var(--bg-button-hover);
color: var (--font-color);
}
select:focus>option:checked {
background: var(--color-secondary) !important;
}
.drop-item-active {
background: var(--color-gradient);
border-radius: 10px;
pointer-events: none;
color: var(--font-color-invert) !important;
}
.drop-item-active span {
border: 1px solid var(--bg-color2);
}
.drop-item-active:hover {
pointer-events: none;
}
hr {
margin-top: 10px;
margin-bottom: 25px;
margin-left: 15%;
margin-right: 15%;
height: 2px;
background-color: var(--bg-cards);
border: none;
}
.pure-material-progress-linear {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
height: 0.25em;
width: 100%;
position: fixed;
color: var(--color-active);
background-color: rgba(var(--color-gradient), 0.12);
font-size: 12px;
z-index: 9999;
}
.pure-material-progress-linear::-webkit-progress-bar {
background-color: transparent;
}
/* Determinate */
.pure-material-progress-linear::-webkit-progress-value {
background-color: currentColor;
transition: all 0.2s;
}
.pure-material-progress-linear::-moz-progress-bar {
background-color: currentColor;
transition: all 0.2s;
}
.pure-material-progress-linear::-ms-fill {
border: none;
background-color: currentColor;
transition: all 0.2s;
}
/* Indeterminate */
[dir="ltr"] .pure-material-progress-linear:indeterminate {
background-size: 200% 100%;
background-image: linear-gradient(to right,
transparent 50%,
currentColor 50%,
currentColor 60%,
transparent 60%,
transparent 71.5%,
currentColor 71.5%,
currentColor 84%,
transparent 84%);
animation: pure-material-progress-linear 2s infinite linear;
}
[dir="rtl"] .pure-material-progress-linear:indeterminate {
background-size: 200% 100%;
background-image: linear-gradient(to right,
transparent 50%,
currentColor 50%,
currentColor 60%,
transparent 60%,
transparent 71.5%,
currentColor 71.5%,
currentColor 84%,
transparent 84%);
animation: pure-material-progress-linear-rtl 2s infinite linear;
}
.pure-material-progress-linear:indeterminate::-moz-progress-bar {
background-color: transparent;
}
.pure-material-progress-linear:indeterminate::-ms-fill {
animation-name: none;
}
@keyframes pure-material-progress-linear {
0% {
background-size: 200% 100%;
background-position: left -31.25% top 0%;
}
50% {
background-size: 800% 100%;
background-position: left -49% top 0%;
}
100% {
background-size: 400% 100%;
background-position: left -102% top 0%;
}
}
@keyframes pure-material-progress-linear-rtl {
0% {
background-size: 400% 100%;
background-position: left -102% top 0%;
}
50% {
background-size: 800% 100%;
background-position: left -49% top 0%;
}
100% {
background-size: 200% 100%;
background-position: left -31.25% top 0%;
}
}
.modal {
gap: 0.4rem;
width: 350px;
padding: 1.3rem;
margin-top: 15px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
min-height: 150px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--bg-cards);
border: 1px solid var(--card-border);
border-radius: 10px;
color: var(--font-color);
-webkit-animation: fadein 0.3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.3s;
/* Firefox < 16 */
-ms-animation: fadein 0.3s;
/* Internet Explorer */
-o-animation: fadein 0.3s;
/* Opera < 12.1 */
animation: fadein 0.3s;
}
.modal-database {
gap: 0.4rem;
max-width: 90%;
max-height: 90%;
overflow-y: hidden;
padding: 1.3rem;
margin-top: 15px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
min-height: 150px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--bg-cards);
border: 1px solid var(--card-border);
border-radius: 10px;
color: var(--font-color);
-webkit-animation: fadein 0.3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.3s;
/* Firefox < 16 */
-ms-animation: fadein 0.3s;
/* Internet Explorer */
-o-animation: fadein 0.3s;
/* Opera < 12.1 */
animation: fadein 0.3s;
}
.modal-announcements {
gap: 0.4rem;
min-width: 350px;
max-width: 90%;
max-height: 90%;
overflow-y: hidden;
padding: 1.3rem;
margin-top: 15px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
min-height: 150px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--bg-cards);
border: 1px solid var(--card-border);
border-radius: 10px;
color: var(--font-color);
-webkit-animation: fadein 0.3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.3s;
/* Firefox < 16 */
-ms-animation: fadein 0.3s;
/* Internet Explorer */
-o-animation: fadein 0.3s;
/* Opera < 12.1 */
animation: fadein 0.3s;
}
#announcement-link,
#announcement-content {
min-width: 300px;
}
.modal-download,
.modal-download-progress {
gap: 0.4rem;
min-width: 200px;
max-width: 292px;
height: fit-content;
overflow-y: hidden;
padding: 1.3rem;
margin-top: 15px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
min-height: 150px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--bg-cards);
border: 1px solid var(--card-border);
border-radius: 10px;
color: var(--font-color);
-webkit-animation: fadein 0.3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.3s;
/* Firefox < 16 */
-ms-animation: fadein 0.3s;
/* Internet Explorer */
-o-animation: fadein 0.3s;
/* Opera < 12.1 */
animation: fadein 0.3s;
}
#downloadMessage {
max-width: 250px;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal .flex,
.modal-database .flex,
.modal-announcements .flex,
.modal-download .flex,
.modal-download-progress .flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.modal input,
.modal-announcements input {
padding: 0.7rem 1rem;
border-radius: 5px;
font-size: 0.9em;
}
.modal p {
font-size: 0.9rem;
color: #777;
margin: 0.4rem 0 0.2rem;
}
button {
cursor: pointer;
border: none;
font-weight: 600;
}
.btn-close,
.btn-close-db,
.btn-close-anm,
.btn-close-dl {
transform: translate(10px, -20px);
padding: 0.5rem 0.7rem;
background: var(--bg-color2);
border-radius: 50%;
margin-top: 21px !important;
}
.overlay,
.overlay2,
.overlay-crop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
}
.modal,
.modal-database,
.modal-announcements,
.modal-download,
.modal-download-progress {
z-index: 999;
}
@media (max-width: 375px) {
.modal {
height: 100%;
}
}
.notvisible {
display: none;
}
textarea,
input[type="text"] {
font-size: 14px;
background-color: var(--bg-color2);
border-radius: 10px;
border: 1px solid var(--card-border);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-right: 14px;
overflow-y: hidden;
}
input[type="checkbox"] {
background-color: var(--color-active);
}
.aboveplayer_button_text {
font-size: 16px;
}
@media (min-width: 0px) {
.aboveplayer_button_text {
display: none;
}
}
@media (min-width: 768px) {
.aboveplayer_button_text {
display: inline;
}
}
.abovebutton {
text-align: center;
min-width: 30px;
}
.epID {
object-fit: cover;
}
form {
accent-color: var(--color-active);
}
.episodes_main {
max-width: 1102px;
margin-left: auto;
margin-right: auto;
padding-top: 32px;
position: sticky;
transition: 0.3s;
}
.episodes_main.scrolled {
max-width: 350px;
top: 70px;
background-color: var(--bg-color-transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
border-radius: 20px;
padding: 20px;
border: 1px solid var(--card-border);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
@media (max-width: 900px) {
.episodes_main {
top: 0px;
background: transparent;
background-color: none;
}
.episodes_main::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* background-color: var(--bg-color-transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px); */
}
}
@media (min-width: 900px) {
.episodes_main {
top: 52px;
border: 1px solid transparent;
}
}
.home-desc {
display: none !important;
}
@keyframes glow {
0% {
box-shadow:
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 15px #ff0000,
0 0 20px #ff0000;
}
100% {
box-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 30px #ff0000,
0 0 40px #ff0000;
}
}
.dates {
padding-left: 30px;
padding-right: 30px;
min-height: 70px;
max-height: 254px;
overflow-y: auto;
}
.eps_lang_dropdown {
float: right;
}
[dir="rtl"] .eps_lang_dropdown {
float: left;
}
.gobackeps,
.sharebuttonbtn,
.bookmarkbutton {
float: left;
}
.sharebuttonbtn,
.bookmarkbutton,
.downloadbutton,
.downloadbuttonaudio {
cursor: pointer;
}
#debugButton {
cursor: pointer;
}
[dir="rtl"] .gobackeps,
.sharebuttonbtn,
.bookmarkbutton {
float: right;
}
[dir="ltr"] .sharebuttonbtn {
float: left;
margin-left: 10px;
}
[dir="rtl"] .sharebuttonbtn {
float: right;
}
[dir="ltr"] .bookmarkbutton {
float: left;
margin-left: 10px;
}
[dir="rtl"] .bookmarkbutton {
float: right;
}
[dir="ltr"] .downloadbutton {
float: left;
margin-left: 10px;
}
[dir="rtl"] .downloadbutton {
float: right;
margin-left: 10px;
margin-right: 10px;
}
[dir="ltr"] .downloadbuttonaudio {
float: left;
}
[dir="rtl"] .downloadbuttonaudio {
float: right;
}
[dir="ltr"] .debugbutton {
float: left;
margin-left: 10px;
}
[dir="rtl"] .debugbutton {
float: right;
margin-left: 10px;
margin-right: 10px;
}
.epsnavigation {
text-align: center;
padding-bottom: 50px;
float: right;
}
[dir="rtl"] .epsnavigation {
float: left;
}
#comments-container {
height: 300px !important;
overflow: hidden !important;
}
.arrow-container {
display: flex;
justify-content: center;
padding-bottom: 32px;
}
.arrow-container-index {
display: flex;
justify-content: center;
padding-bottom: 13px;
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--font-color);
transition: transform 0.3s ease;
}
.arrow-index {
text-align: center;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid var(--font-color-footer);
transition: transform 0.3s ease;
}
.arrow:hover,
.arrow-index:hover {
cursor: pointer;
}
.arrow.rotated,
.arrow-index.rotated {
transform: rotate(180deg);
}
@media (min-width: 0px) {
.player-error-icon {
font-size: 1.8em !important;
}
.player-error-text {
font-size: 0.8em !important;
}
}
@media (min-width: 1000px) {
.player-error-icon {
font-size: 2em !important;
}
.player-error-text {
font-size: 1em !important;
}
}
.spoiler {
filter: blur(16px);
transition-property: -webkit-filter;
transition-duration: 0.4s;
}
.spoiler:hover,
.spoiler:focus {
filter: blur(0px);
}
#local-dates {
transition: 1s;
}
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
[data-color="red-light"] {
--color-active: #d31417;
--color-secondary: #d31417;
--color-gradient: linear-gradient(45deg, #d31417 30%, #e85b3a 90%);
--color-gradient2: linear-gradient(45deg, #d31417 30%, #e85b3a 90%);
--color-active-transparent: rgba(211, 20, 23, 0.2);
--bg-button: #d7a3a3;
--bg-button-hover: #c59192;
--bg-button-click: #d09c9d;
--bg-cards: #dba7a8;
--bg-bottom-right: rgba(219, 167, 168, 0.8);
--card-hover: #cb9798;
--card-border: #ca9697;
--font-color: #3a0506;
--font-color-invert: #f7d4d5;
--font-color-index: #521e1f;
--font-color-footer: #a97576;
--font-color-settings: #d31417;
--videojs-font: #f7d4d5;
}
[data-color="red-dark"] {
--color-active: #d31417;
--color-secondary: #d31417;
--color-gradient: linear-gradient(45deg, #d31417 30%, #e85b3a 90%);
--color-gradient2: linear-gradient(45deg, #d31417 30%, #e85b3a 90%);
--color-active-transparent: rgba(211, 20, 23, 0.2);
--bg-color: #210f10;
--bg-color-transparent: rgba(33, 15, 16, 0.7);
--bg-color2: #241212;
--bg-button: #372526;
--bg-button-hover: #4c3b3b;
--bg-button-click: #5d4b4c;
--bg-cards: #312020;
--bg-bottom-right: rgba(49, 32, 32, 0.8);
--card-hover: #453434;
--card-border: #463535;
--font-color: #f7d4d5;
--font-color-invert: #3a0506;
--font-color-index: #daa6a7;
--font-color-footer: #7a5758;
--font-color-settings: #d31417;
--videojs-font: #f7d4d5;
}
[data-color="orange-light"] {
--color-active: #f65723;
--color-secondary: #f65723;
--color-gradient: linear-gradient(45deg, #f65723 30%, #f5bb5a 90%);
--color-gradient2: linear-gradient(45deg, #f65723 30%, #f5bb5a 90%);
--color-active-transparent: rgba(246, 87, 35, 0.2);
--bg-button: #e0b5a7;
--bg-button-hover: #cfa395;
--bg-button-click: #daaea0;
--bg-cards: #e5b9ab;
--bg-bottom-right: rgba(229, 185, 171, 0.8);
--card-hover: #d5a99b;
--card-border: #d4a89a;
--font-color: #43180a;
--font-color-invert: #fde0d7;
--font-color-index: #5c3022;
--font-color-footer: #b28779;
--font-color-settings: #f65723;
--videojs-font: #fde0d7;
}
[data-color="orange-dark"] {
--color-active: #f65723;
--color-secondary: #f65723;
--color-gradient: linear-gradient(45deg, #f65723 30%, #f5bb5a 90%);
--color-gradient2: linear-gradient(45deg, #f65723 30%, #f5bb5a 90%);
--color-active-transparent: rgba(246, 87, 35, 0.2);
--bg-color: #241611;
--bg-color-transparent: rgba(36, 22, 17, 0.7);
--bg-color2: #271814;
--bg-button: #3a2b27;
--bg-button-hover: #50413c;
--bg-button-click: #60524d;
--bg-cards: #342621;
--bg-bottom-right: rgba(52, 38, 33, 0.8);
--card-hover: #483a35;
--card-border: #493b36;
--font-color: #fde0d7;
--font-color-invert: #43180a;
--font-color-index: #e4b8aa;
--font-color-footer: #80635a;
--font-color-settings: #f65723;
--videojs-font: #fde0d7;
}
[data-color="yellow-light"] {
--color-active: #f3d723;
--color-secondary: #f3d723;
--color-gradient: linear-gradient(45deg, #f3d723 30%, #d5e055 90%);
--color-gradient2: linear-gradient(45deg, #f3d723 30%, #d5e055 90%);
--color-active-transparent: rgba(243, 215, 35, 0.2);
--bg-button: #dfd8a7;
--bg-button-hover: #cec695;
--bg-button-click: #d9d1a0;
--bg-cards: #e4dcab;
--bg-bottom-right: rgba(228, 220, 171, 0.8);
--card-hover: #d4cc9b;
--card-border: #d3cb9a;
--font-color: #423b0a;
--font-color-invert: #fdf8d7;
--font-color-index: #5b5322;
--font-color-footer: #b2aa79;
--font-color-settings: #f3d723;
--videojs-font: #fdf8d7;
}
[data-color="yellow-dark"] {
--color-active: #f3d723;
--color-secondary: #f3d723;
--color-gradient: linear-gradient(45deg, #f3d723 30%, #d5e055 90%);
--color-gradient2: linear-gradient(45deg, #f3d723 30%, #d5e055 90%);
--color-active-transparent: rgba(243, 215, 35, 0.2);
--bg-color: #242111;
--bg-color-transparent: rgba(36, 33, 17, 0.7);
--bg-color2: #262414;
--bg-button: #3a3727;
--bg-button-hover: #4f4d3c;
--bg-button-click: #605d4d;
--bg-cards: #343221;
--bg-bottom-right: rgba(52, 50, 33, 0.8);
--card-hover: #484635;
--card-border: #494636;
--font-color: #fdf8d7;
--font-color-invert: #423b0a;
--font-color-index: #e1dcbb;
--font-color-footer: #807b5a;
--font-color-settings: #f3d723;
--videojs-font: #fdf8d7;
}
[data-color="green-light"] {
--color-active: #1aad1a;
--color-secondary: #1aad1a;
--color-gradient: linear-gradient(45deg, #1aad1a 30%, #4abf78 90%);
--color-gradient2: linear-gradient(45deg, #1aad1a 30%, #4abf78 90%);
--color-active-transparent: rgba(26, 173, 26, 0.2);
--bg-button: #a4cca4;
--bg-button-hover: #93bb93;
--bg-button-click: #9ec69e;
--bg-cards: #a9d1a9;
--bg-bottom-right: rgba(169, 209, 169, 0.8);
--card-hover: #99c199;
--card-border: #98c098;
--font-color: #072f07;
--font-color-invert: #d5f0d5;
--font-color-index: #204820;
--font-color-footer: #769e76;
--font-color-settings: #1aad1a;
--videojs-font: #d5f0d5;
}
[data-color="green-dark"] {
--color-active: #1aad1a;
--color-secondary: #1aad1a;
--color-gradient: linear-gradient(45deg, #1aad1a 30%, #4abf78 90%);
--color-gradient2: linear-gradient(45deg, #1aad1a 30%, #4abf78 90%);
--color-active-transparent: rgba(26, 173, 26, 0.2);
--bg-color: #101d10;
--bg-color-transparent: rgba(16, 29, 16, 0.7);
--bg-color2: #132013;
--bg-button: #263326;
--bg-button-hover: #3c493c;
--bg-button-click: #4c594c;
--bg-cards: #202e20;
--bg-bottom-right: rgba(32, 46, 32, 0.8);
--card-hover: #344234;
--card-border: #354335;
--font-color: #d5f0d5;
--font-color-invert: #072f07;
--font-color-index: #a8d0a8;
--font-color-footer: #587358;
--font-color-settings: #1aad1a;
--videojs-font: #d5f0d5;
}
[data-color="blue-light"] {
--color-active: #0498f0;
--color-secondary: #0498f0;
--color-gradient: linear-gradient(45deg, #0498f0 30%, #7b89d9 90%);
--color-gradient2: linear-gradient(45deg, #0498f0 30%, #7b89d9 90%);
--color-active-transparent: rgba(4, 152, 240, 0.2);
--bg-button: #9ec7df;
--bg-button-hover: #8db5cd;
--bg-button-click: #98c0d8;
--bg-cards: #a3cbe3;
--bg-bottom-right: rgba(163, 203, 227, 0.8);
--card-hover: #93bbd3;
--card-border: #92bad2;
--font-color: #012941;
--font-color-invert: #d1ecfc;
--font-color-index: #1a425a;
--font-color-footer: #7099b1;
--font-color-settings: #0498f0;
--videojs-font: #d1ecfc;
}
[data-color="blue-dark"] {
--color-active: #0498f0;
--color-secondary: #0498f0;
--color-gradient: linear-gradient(45deg, #0498f0 30%, #7b89d9 90%);
--color-gradient2: linear-gradient(45deg, #0498f0 30%, #7b89d9 90%);
--color-active-transparent: rgba(4, 152, 240, 0.2);
--bg-color: #0e1b23;
--bg-color-transparent: rgba(14, 27, 35, 0.7);
--bg-color2: #111e26;
--bg-button: #243139;
--bg-button-hover: #3a474f;
--bg-button-click: #4a575f;
--bg-cards: #1e2c34;
--bg-bottom-right: rgba(30, 44, 52, 0.8);
--card-hover: #324048;
--card-border: #334149;
--font-color: #d1ecfc;
--font-color-invert: #012941;
--font-color-index: #b6d0e0;
--font-color-footer: #546f7f;
--font-color-settings: #0498f0;
--videojs-font: #d1ecfc;
}
[data-color="purple-light"] {
--color-active: #6643c0;
--color-secondary: #6643c0;
--color-gradient: linear-gradient(45deg, #6643c0 30%, #a17bbf 90%);
--color-gradient2: linear-gradient(45deg, #6643c0 30%, #a17bbf 90%);
--color-active-transparent: rgba(102, 67, 192, 0.2);
--bg-button: #b9afd1;
--bg-button-hover: #a79ec0;
--bg-button-click: #b2a9cb;
--bg-cards: #bdb3d5;
--bg-bottom-right: rgba(189, 179, 213, 0.8);
--card-hover: #ada4c6;
--card-border: #ada3c5;
--font-color: #1c1234;
--font-color-invert: #e3ddf4;
--font-color-index: #352b4d;
--font-color-footer: #8b82a4;
--font-color-settings: #6643c0;
--videojs-font: #e3ddf4;
}
[data-color="purple-dark"] {
--color-active: #6643c0;
--color-secondary: #6643c0;
--color-gradient: linear-gradient(45deg, #6643c0 30%, #a17bbf 90%);
--color-gradient2: linear-gradient(45deg, #6643c0 30%, #a17bbf 90%);
--color-active-transparent: rgba(102, 67, 192, 0.2);
--bg-color: #17141f;
--bg-color-transparent: rgba(23, 20, 31, 0.7);
--bg-color2: #1a1622;
--bg-button: #2d2a35;
--bg-button-hover: #433f4b;
--bg-button-click: #53505b;
--bg-cards: #27242f;
--bg-bottom-right: rgba(39, 36, 47, 0.8);
--card-hover: #3b3843;
--card-border: #3c3944;
--font-color: #e3ddf4;
--font-color-invert: #1c1234;
--font-color-index: #c7c1d8;
--font-color-footer: #666076;
--font-color-settings: #6643c0;
--videojs-font: #e3ddf4;
}
/* Hide the checkbox */
.flyout-checkbox,
.flyout-checkbox2,
.flyout-checkbox3 {
display: none;
}
/* Style the label to look like a clickable link */
.flyout-toggle,
.flyout-toggle2 {
cursor: pointer;
position: relative;
}
/* Basic styling for the flyout menu */
.flyout,
.flyout2,
.flyout3 {
visibility: hidden;
color: var(--font-color);
border: 1px solid var(--card-border);
border-radius: 10px;
padding: 10px;
position: absolute;
z-index: 99;
right: -16px;
/* Limited to 16px to the right of the toggle */
opacity: 0;
transition:
opacity 0.2s,
visibility 0.2s;
white-space: nowrap;
text-align: left;
/* Align spans to the left */
min-width: 265px;
/* Set minimum width */
cursor: default;
transition: 0.3s;
background-color: var(--bg-color2);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
.flyout {
height: fit-content;
}
.flyout2,
.flyout3 {
height: 386px;
}
@media (min-width: 0px) {
.flyout,
.flyout2,
.flyout3 {
bottom: 40px;
/* Position below the toggle */
}
}
@media (min-width: 900px) {
.flyout,
.flyout2,
.flyout3 {
top: 40px;
/* Position below the toggle */
}
[dir="rtl"] .flyout {
right: auto;
left: -16px;
}
[dir="rtl"] .flyout2,
[dir="rtl"] .flyout3 {
right: auto;
left: -16px;
}
}
.flyout {
padding-top: 20px;
}
.flyout2,
.flyout3 {
right: -16px;
}
.flyout2,
.flyout3 {
max-height: 390px;
overflow-y: scroll;
}
/* Show the flyout when the checkbox is checked */
.flyout-checkbox:checked+.flyout {
visibility: visible;
opacity: 1;
}
.flyout-checkbox2:checked+.flyout2,
.flyout-checkbox3:checked+.flyout3 {
visibility: visible;
opacity: 1;
}
/* Close the flyout when clicking outside */
.flyout-wrapper {
position: relative;
}
.flyout-wrapper:focus-within .flyout {
visibility: hidden;
opacity: 0;
}
/* Keep the flyout visible when the checkbox is checked */
.flyout-checkbox:checked+.flyout,
.flyout-checkbox:checked+.flyout-wrapper:focus-within .flyout {
visibility: visible;
opacity: 1;
}
.flyout-checkbox2:checked+.flyout2,
.flyout-checkbox2:checked+.flyout-wrapper2:focus-within .flyout2 {
visibility: visible;
opacity: 1;
}
.flyout-checkbox3:checked+.flyout3,
.flyout-checkbox3:checked+.flyout-wrapper3:focus-within .flyout3 {
visibility: visible;
opacity: 1;
}
.flyout-item {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
transition: 0.3s;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.flyout-item:hover {
background-color: var(--bg-button);
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.flyout-arrow {
float: right;
}
.tri-state-toggle {
margin-top: 0;
/* Adjust margin to align with text */
float: none;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 20px;
border: 2px solid var(--font-color);
border-radius: 25px;
position: relative;
cursor: pointer;
}
.indicator {
position: absolute;
width: 15px;
height: 15px;
background-color: var(--font-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 18px;
transition: transform 0.3s;
}
.indicator i {
color: var(--bg-color2);
font-size: 9px;
}
.tri-state-toggle .tooltip {
visibility: hidden;
background-color: var(--bg-cards);
color: var(--font-color);
border: 1px solid var(--card-border);
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: -35px;
/* Position below the toggle switch */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition:
opacity 0.3s,
visibility 0.3s;
font-size: 12px;
transition: 0.3s;
}
.tri-state-toggle:hover .tooltip {
visibility: visible;
opacity: 1;
}
.tri-state-toggle:hover .tooltip:hover {
visibility: hidden;
opacity: 0;
cursor: default;
}
.state-1 .indicator {
transform: translateX(-10px);
}
.state-2 .indicator {
transform: translateX(0);
}
.state-3 .indicator {
transform: translateX(10px);
}
[dir="rtl"] .tri-state-toggle {
float: left;
}
.accountinfo-name {
font-size: 24px;
}
.accountinfo-type,
.accountinfo-email,
.accountinfo-logout {
font-size: 14px;
font-weight: normal;
}
/* .accountinfo-type {
color: var(--font-color-invert);
font-weight: bold;
background: var(--color-gradient);
padding: 1px 5px 1px 5px;
border-radius: 4px;
} */
.accountinfo-logout {
float: left;
}
[dir="rtl"] .logout-button-account {
float: left;
}
.welcome-text-account {
float: left;
}
[dir="rtl"] .welcome-text-account {
float: right;
}
.smooth-transition {
transition: 0.3s;
}
.social-circle {
background-color: var(--font-color-footer);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
transition: 0.3s;
position: relative;
}
@media (min-width: 0px) {
.social-circle {
width: 25px;
height: 25px;
margin: 2px;
}
.social-circle i {
font-size: 12px;
}
.social-container .tooltip {
bottom: 35px;
}
.active_users .tooltip {
bottom: 40px;
}
}
@media (min-width: 390px) {
.social-circle {
width: 30px;
height: 30px;
margin: 5px;
}
.social-circle i {
font-size: 14px;
}
.social-container .tooltip {
bottom: 40px;
}
}
@media (min-width: 500px) {
.social-circle {
width: 40px;
height: 40px;
margin: 10px;
}
.social-circle i {
font-size: 16px;
}
.social-container .tooltip {
bottom: 55px;
}
}
.social-circle i {
color: var(--bg-color2);
}
footer p {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.menu-desktop-links a {
display: flex;
justify-content: center;
/* Centers items horizontally */
align-items: center;
gap: 6px;
}
@media (max-width: 899px) {
.navbar-container {
display: flex;
justify-content: center;
/* Center the navbar content horizontally */
align-items: center;
}
.navbar a {
width: 100%;
max-width: 100%;
}
.menu-desktop-links {
display: flex;
flex-grow: 1;
justify-content: space-between;
align-items: center;
width: 100%;
}
.menu-desktop-links a {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0px;
width: 0;
min-width: 0;
white-space: nowrap;
}
#flyoutToggleLink {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.navbar-label {
/* display: none; */
font-size: 0.75em;
text-overflow: ellipsis;
white-space: nowrap;
}
.flyout,
.flyout2,
.flyout3 {
position: fixed;
width: 230px;
max-width: 350px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 55px;
overflow-x: hidden;
/* background-color: var(--bg-color-transparent); */
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
}
.social-container {
display: inline-block;
position: relative;
margin-top: 16px;
}
.social-container .tooltip {
visibility: hidden;
background-color: var(--bg-cards);
color: var(--font-color);
border: 1px solid var(--card-border);
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition:
opacity 0.3s,
visibility 0.3s;
font-size: 12px;
}
.active_users .tooltip {
visibility: hidden;
max-width: 300px;
width: 250px;
background-color: var(--bg-color-transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
color: var(--font-color);
border: 1px solid var(--card-border);
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition:
opacity 0.3s,
visibility 0.3s;
font-size: 12px;
}
.timestampTooltip .tooltip {
visibility: hidden;
background-color: var(--bg-cards);
color: var(--font-color);
border: 1px solid var(--card-border);
text-align: center;
border-radius: 5px;
padding: 5px 7px 5px 5px;
position: absolute;
z-index: 1;
top: -5px;
left: 50%;
transform: translate(-50%, -100%);
opacity: 0;
transition:
opacity 0.3s,
visibility 0.3s;
font-size: 12px;
}
.social-container:hover .tooltip,
.timestampTooltip:hover .tooltip {
visibility: visible;
opacity: 1;
}
.active_users:hover .tooltip {
visibility: visible;
opacity: 1;
}
.social-container:hover .tooltip:hover,
.timestampTooltip:hover .tooltip:hover {
visibility: hidden;
opacity: 0;
cursor: default;
}
.active_users:hover .tooltip:hover {
visibility: hidden;
opacity: 0;
cursor: default;
}
.social-circle {
margin-right: 10px;
/* Optional: add some space between the icons */
}
.active_users {
width: max-content;
margin: 16px auto 16px auto;
}
#activeUserCount {
transition: all 0.5s ease;
}
progress[value] {
width: 250px;
height: 20px;
border-radius: 50%;
}
.btn-open-anm,
.btn-open-db,
.btn-open-dl {
cursor: pointer;
}
#spinner,
#spinner-db {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.spinner,
.spinner-db {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--color-active);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
#spinner_small0,
#spinner_small1,
#spinner_small2,
#spinner_small3,
#spinner_small4 {
float: right;
justify-content: center;
align-items: center;
}
.spinner_small {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--color-active);
border-radius: 50%;
width: 28px;
height: 28px;
animation: spin 1s linear infinite;
}
.spinner_small_epAv {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--color-active);
border-radius: 50%;
width: 14px;
height: 14px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Dropdown Button */
.dropbtn-episodes {
background-color: var(--bg-button);
color: var(--font-color);
padding: 16px;
font-size: 16px;
border-radius: 10px;
width: 200px;
border: none;
font-weight: bold;
transition: 0.3s;
max-height: 50px;
}
.dropbtn-episodes:hover {
background-color: var(--bg-button-hover);
border-radius: 10px;
}
/* The container - needed to position the dropdown content */
.dropdown-episodes {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content-episodes {
display: none;
position: absolute;
background-color: var(--bg-color2);
border: 1px solid var(--bg-button);
border-radius: 10px;
width: 199px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 99;
}
/* Links inside the dropdown */
.dropdown-content-episodes a {
font-weight: bold;
color: var(--font-color);
padding: 12px 16px;
text-decoration: none;
display: block;
z-index: 99;
}
/* Change color of dropdown links on hover */
.dropdown-content-episodes a:hover {
background-color: var(--bg-button);
border-radius: 10px;
transition: 0.3s;
}
/* Disabled link styles */
.dropdown-content-episodes a.disabled-link {
cursor: not-allowed;
pointer-events: auto;
}
/* Override hover effect for disabled links */
.dropdown-content-episodes a.disabled-link:hover {
background-color: transparent;
border-radius: 0;
transition: none;
z-index: 99;
}
/* Show the dropdown menu on hover */
.dropdown-episodes:hover .dropdown-content-episodes {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown-episodes:hover .dropbtn-episodes {
background-color: var(--bg-button);
border-radius: 10px;
}
#snackbar {
visibility: hidden;
/* Hidden by default */
min-width: 350px;
/* Minimum width */
background-color: var(--bg-color2);
/* Black background */
color: var(--font-color);
/* White text color */
text-align: left;
/* Left-aligned text */
border: 1px solid var(--card-border);
border-radius: 10px;
/* Rounded borders */
padding: 10px;
/* Padding */
padding-left: 16px;
position: fixed;
/* Sit on top of the screen */
z-index: 999;
/* Add a z-index for visibility */
font-size: 17px;
display: flex;
justify-content: space-between;
align-items: center;
opacity: 0;
/* Initially invisible */
transition: opacity 0.5s ease-in-out;
/* Fade in/out effect */
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
/* Optional: Add shadow for better visibility */
}
/* Positioning and max-width adjustments based on screen size */
@media (min-width: 0px) {
#snackbar {
left: 50%;
bottom: 62px;
/* 30px + 52px higher */
transform: translateX(-50%);
max-width: 100%;
/* Full width on small screens */
}
}
@media (min-width: 900px) {
#snackbar {
left: 30px;
bottom: 30px;
transform: translateX(0);
max-width: 500px;
/* Max width of 500px on larger screens */
}
[dir="ltr"] #snackbar {
left: 30px;
}
[dir="rtl"] #snackbar {
right: 30px;
}
}
#snackbar.show {
visibility: visible;
/* Show the snackbar */
opacity: 1;
/* Fade in */
}
#snackbar.hide {
opacity: 0;
/* Fade out */
visibility: hidden;
/* Hide after fading out */
transition:
opacity 0.5s ease-in-out,
visibility 0s 0.5s;
/* Add delay for visibility */
}
#snackbar-text {
flex-grow: 1;
}
[dir="ltr"] #snackbar-text {
margin-right: 10px;
}
[dir="rtl"] #snackbar-text {
margin-left: 10px;
}
#snackbar-button {
background: none;
color: var(--font-color);
border: none;
font-size: 17px;
cursor: pointer;
transition: 0.3s;
padding: 15px;
}
#snackbar-button:hover {
background-color: var(--bg-button-hover);
border-radius: 10px;
}
.date-fulldate,
.date-short,
.date-extrashort {
display: none;
}
@media (min-width: 0px) and (max-width: 400px) {
.date-extrashort {
display: block;
}
}
@media (min-width: 400px) and (max-width: 500px) {
.date-short {
display: block;
}
}
@media (min-width: 500px) and (max-width: 699px) {
.date-fulldate {
display: block;
}
}
@media (min-width: 700px) and (max-width: 800px) {
.date-extrashort {
display: block;
}
}
@media (min-width: 800px) and (max-width: 1000px) {
.date-short {
display: block;
}
}
@media (min-width: 1000px) {
.date-fulldate {
display: block;
}
}
#results {
max-height: 300px;
overflow-y: auto;
}
.italic {
font-style: italic;
}
.timestamp_relative {
max-width: 30px;
min-width: 30px;
font-size: small;
}
.account_form_nav {
border: 2px solid var(--color-active);
border-radius: 20px;
padding: 10px 15px;
cursor: pointer;
background: transparent;
}
#consent-banner {
position: fixed;
width: 100%;
padding: 10px;
z-index: 1000;
color: var(--font-color);
border-top: 1px solid var(--bg-button);
background: var(--bg-bottom-right);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
clip-path: inset(0 0 0 0);
}
@media (min-width: 0px) and (max-width: 899px) {
#consent-banner {
text-align: center;
bottom: 51px;
}
#consent-banner p {
padding-left: 10px;
padding-right: 10px;
margin-top: 0;
margin-bottom: 5px;
}
#consent-banner #accept-consent {
margin-top: 0;
margin-left: 0;
padding: 7px 13px;
}
#consent-banner #decline-consent {
margin-top: 0;
margin-left: 5px;
padding: 7px 13px;
}
}
@media (min-width: 900px) {
#consent-banner {
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
#consent-text-block {
margin-right: 20px;
display: flex;
align-items: center;
text-align: center;
}
#consent-buttons-block {
display: flex;
gap: 10px;
justify-content: center;
}
#consent-buttons-block button {
margin: 0;
}
}
.shining-icon {
position: relative;
color: transparent !important;
/* Force the color to be transparent */
background: linear-gradient(45deg,
/* Adjust the angle for diagonal shine */
#ffd700,
/* Gold */
#ffd700 25%,
#ffffff 50%,
#ffd700 75%,
#ffd700
/* Gold */
);
background-size: 400% 100%;
/* Ensures smooth and continuous transition */
-webkit-background-clip: text;
/* Apply the background only to text */
background-clip: text;
display: inline-block;
font-weight: bold;
/* Make the icon a bit more prominent */
font-size: 64px;
/* Adjust size for better effect */
animation: shine 5s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
/* Smoother timing function */
}
@keyframes shine {
0% {
background-position: 200% 100%;
/* Start position (bottom-left) */
}
50% {
background-position: 0% 100%;
/* Middle point */
}
100% {
background-position: -200% 100%;
/* End position (top-right) */
}
}
.shining-icon-silver {
position: relative;
color: transparent !important;
/* Force the color to be transparent */
/* Silver Gradient */
background: linear-gradient(45deg,
#c0c0c0,
/* Silver */
#c0c0c0 25%,
/* Silver */
#ffffff 50%,
/* White (The high-shine point) */
#c0c0c0 75%,
/* Silver */
#c0c0c0
/* Silver */
);
background-size: 400% 100%;
/* Ensures smooth and continuous transition */
-webkit-background-clip: text;
/* Apply the background only to text */
background-clip: text;
display: inline-block;
font-weight: bold;
font-size: 64px;
/* Reusing the same animation logic */
animation: shine-silver 5s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}
/* Include this if you haven't already defined it in your global CSS */
@keyframes shine-silver {
0% {
background-position: 200% 100%;
}
50% {
background-position: 0% 100%;
}
100% {
background-position: -200% 100%;
}
}
.shining-icon-diamond {
position: relative;
color: transparent !important;
/* Force the color to be transparent */
background: linear-gradient(45deg,
/* Adjust the angle for sparkling shine */
#00ffff,
/* Cyan */
#00ffff 25%,
#ffffff 50%,
/* White center to mimic shine */
#00ffff 75%,
#00ffff
/* Cyan */
);
background-size: 400% 100%;
/* Ensures smooth and continuous transition */
-webkit-background-clip: text;
/* Apply the background only to text */
background-clip: text;
display: inline-block;
font-weight: bold;
/* Make the icon a bit more prominent */
font-size: 64px;
/* Adjust size for better effect */
animation: shine-diamond 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
/* Smoother timing function */
}
@keyframes shine-diamond {
0% {
background-position: 200% 100%;
/* Start position (bottom-left) */
}
50% {
background-position: 0% 100%;
/* Middle point */
}
100% {
background-position: -200% 100%;
/* End position (top-right) */
}
}
.account-info-container {
display: flex;
align-items: center;
/* Align items vertically centered */
}
.account-avatar {
margin-right: 10px;
/* Adjust spacing between the avatar and the info */
}
.account-avatar:hover .edit-icon {
display: block;
}
.initials-avatar {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
border-radius: 50%;
color: var(--font-color);
font-size: 32px;
font-weight: bold;
}
.initials-avatar-comments {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
border-radius: 50%;
color: var(--font-color);
font-size: 32px;
font-weight: bold;
}
.comment-avatar-initials {
display: flex;
justify-content: center;
align-items: center;
min-width: 40px;
width: 40px;
min-height: 40px;
height: 40px;
color: var(--font-color);
font-size: 20px;
font-weight: bold;
}
.reply-avatar-initials {
display: flex;
justify-content: center;
align-items: center;
min-width: 30px;
width: 30px;
min-height: 30px;
height: 30px;
color: var(--font-color);
font-size: 15px;
font-weight: bold;
}
#avatar-initials-default {
background: transparent;
border: 2px solid var(--font-color);
}
#avatar-initials-red {
background: linear-gradient(45deg, #d31417 30%, #e85b3a 90%);
border: 2px solid var(--bg-color);
}
#avatar-initials-orange {
background: linear-gradient(45deg, #f65723 30%, #f5bb5a 90%);
border: 2px solid var(--bg-color);
}
#avatar-initials-yellow {
background: linear-gradient(45deg, #f3d723 30%, #d5e055 90%);
border: 2px solid var(--bg-color);
}
#avatar-initials-green {
background: linear-gradient(45deg, #1aad1a 30%, #4abf78 90%);
border: 2px solid var(--bg-color);
}
#avatar-initials-blue {
background: linear-gradient(45deg, #0498f0 30%, #7b89d9 90%);
border: 2px solid var(--bg-color);
}
#avatar-initials-purple {
background: linear-gradient(45deg, #6643c0 30%, #a17bbf 90%);
border: 2px solid var(--bg-color);
}
.username-color-default,
.username-color-default:hover {
color: var(--font-color);
}
.username-color-red,
.username-color-red:hover {
color: #d31417;
}
.username-color-orange,
.username-color-orange:hover {
color: #f65723;
}
.username-color-yellow,
.username-color-yellow:hover {
color: #f3d723;
}
.username-color-green,
.username-color-green:hover {
color: #1aad1a;
}
.username-color-blue,
.username-color-blue:hover {
color: #0498f0;
}
.username-color-purple,
.username-color-purple:hover {
color: #6643c0;
}
#avatar {
border: 2px solid var(--bg-color);
}
#db-manager td {
text-align: center;
/* Center horizontally within the cell */
vertical-align: middle;
/* Center vertically within the cell */
}
#db-manager img,
#db-manager div[id^="avatar-initials-"] {
display: flex;
/* Use flexbox for centering */
align-items: center;
/* Center content vertically */
justify-content: center;
/* Center content horizontally */
margin: 0 auto;
/* Center within the cell */
}
#db-manager div[id^="avatar-initials-"] {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 18px;
font-weight: bold;
color: var(--font-color);
line-height: 50px;
/* Ensures text is vertically centered */
}
#db-manager img {
width: 50px;
height: 50px;
border-radius: 50%;
}
/* Post Comment Section */
.comments-header {
display: flex;
justify-content: space-between;
align-items: center;
}
#post-comment {
position: relative;
z-index: 1;
padding-bottom: 40px;
}
#post-comment .user-info {
display: flex;
align-items: flex-start;
gap: 10px;
}
#user-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
}
.show-more-container button {
background: transparent;
border: none;
padding: 5px 0;
display: flex;
align-items: center;
gap: 5px;
opacity: 0.8;
transition: opacity 0.2s;
}
.show-more-container button:hover {
opacity: 1;
text-decoration: underline;
}
#comment-textarea,
.reply-textarea,
.edit-textarea {
height: auto;
overflow-y: auto;
resize: vertical;
min-width: 50px;
min-height: 40px;
max-height: 300px;
transition: 0.3s;
}
#comment-textarea {
flex: 1;
padding: 10px;
border: 1px solid var(--card-border);
border-radius: 5px;
font-size: 14px;
}
#comment-actions {
margin-top: 10px;
display: flex;
gap: 10px;
justify-content: flex-end;
}
.content-text {
white-space: pre-wrap;
}
#comment-actions.hidden {
display: none;
}
.reply-form {
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
box-sizing: border-box;
}
.edit-actions {
margin-top: 5px;
}
.reply-textarea,
.edit-textarea {
width: 100%;
box-sizing: border-box;
}
.reply-form .reply-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.comment-content .edit-actions,
.reply-content .edit-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
#comment-actions .btn,
.reply-form .reply-submit,
.reply-form .reply-cancel,
.comment-content .cancel-btn,
.comment-content .save-btn,
.reply-content .cancel-btn,
.reply-content .save-btn {
padding: 6px 12px;
border: none;
border-radius: 5px;
background-color: var(--bg-button);
font-size: 14px;
cursor: pointer;
transition: 0.3s;
}
#comment-actions .btn:hover,
.reply-form .reply-submit:hover,
.reply-form .reply-cancel:hover,
.comment-content .cancel-btn:hover,
.comment-content .save-btn:hover,
.reply-content .cancel-btn:hover,
.reply-content .save-btn:hover {
background-color: var(--bg-button-hover);
}
/* Comments List */
#comments-list {
overflow-y: auto;
overflow-x: hidden;
position: relative;
z-index: 0;
padding-bottom: 40px;
}
.comment-header,
.reply-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.comment-content {
margin-top: 5px;
margin-bottom: 10px;
}
.reply-content {
margin-top: 5px;
margin-bottom: 10px;
}
.verification-text {
color: var(--color-active);
font-size: 12px;
}
[dir="ltr"] .comment-content,
.like-reply-actions {
margin-left: 55px;
}
[dir="ltr"] .reply-content,
.like-reply-actions {
margin-left: 45px !important;
}
[dir="ltr"] .comment .verification-text {
margin: 0 0 10px 55px;
}
[dir="ltr"] .reply .verification-text {
margin: 0 0 10px 45px;
}
[dir="rtl"] .comment-content,
.like-reply-actions {
margin-right: 55px;
}
[dir="rtl"] .reply-content,
.like-reply-actions {
margin-right: 45px !important;
}
[dir="rtl"] .comment .verification-text {
margin: 0 55px 10px 0;
}
[dir="rtl"] .reply .verification-text {
margin: 0 45px 10px 0;
}
.comment-avatar,
.reply-avatar,
.userTooltip-avatar {
border-radius: 50%;
margin-right: 5px;
object-fit: cover;
}
.comment-avatar {
width: 40px;
height: 40px;
}
.date-time i {
padding-left: 5px;
}
.reply-avatar {
width: 30px;
height: 30px;
}
.comment-user,
.reply-user {
display: flex;
align-items: center;
gap: 10px;
}
.username {
display: flex;
align-items: center;
gap: 5px;
}
.username i,
.username span {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.comment-user .username,
.comment-user .tooltip .username,
.reply-user .username,
.reply-user .tooltip .username {
font-weight: bold;
}
.comment-user .username,
.comment-user .tooltip .username {
font-size: 16px;
}
.reply-user .username {
font-size: 13px;
}
.comment-user .date-time {
font-size: 12px;
color: var(--font-color-index);
}
.reply-user .date-time {
font-size: 11px;
color: var(--font-color-index);
}
.comment-actions,
.reply-actions {
display: flex;
gap: 10px;
align-items: center;
}
.comment-actions .btn,
.reply-actions .btn {
padding: 5px 10px;
font-size: 16px;
border: none;
border-radius: 3px;
cursor: pointer;
}
.comment-actions .edit-btn,
.reply-actions .edit-btn,
.comment-actions .delete-btn,
.reply-actions .delete-btn,
.comment-actions .pin-btn,
.reply-actions .pin-btn,
.comment-actions .verify-btn,
.reply-actions .verify-btn,
.like-reply-actions .like-btn,
.like-reply-actions .reply-btn,
.like-reply-actions .share-btn,
.like-reply-actions .translate-btn {
background: var(--bg-color);
color: var(--font-color);
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
border: solid 1.5px var(--card-border);
border-radius: 10px;
transition: 0.3s;
}
.comment-actions .edit-btn:hover,
.reply-actions .edit-btn:hover,
.comment-actions .delete-btn:hover,
.reply-actions .delete-btn:hover,
.comment-actions .pin-btn:hover,
.reply-actions .pin-btn:hover,
.comment-actions .verify-btn:hover,
.reply-actions .verify-btn:hover,
.like-reply-actions .like-btn:hover,
.like-reply-actions .reply-btn:hover,
.like-reply-actions .share-btn:hover,
.like-reply-actions .translate-btn:hover {
background: var(--bg-button-hover);
}
.comment-actions .btn:hover,
.reply-actions .btn:hover {
opacity: 0.9;
}
/* New row for like and reply buttons */
.like-reply-actions {
margin-top: 5px;
display: flex;
gap: 10px;
}
.like-reply-actions .btn {
padding: 6px 12px;
font-size: 16px;
cursor: pointer;
}
.replies {
margin-top: 10px;
margin-bottom: 15px;
}
/* Replies Section */
[dir="ltr"] .replies {
margin-left: 20px;
border-left: 2px solid var(--card-border);
padding-left: 30px;
}
[dir="rtl"] .replies {
margin-right: 20px;
border-right: 2px solid var(--card-border);
padding-right: 30px;
}
.replies.hidden {
display: none;
}
.reply {
margin-bottom: 20px;
}
.reply-content {
font-size: 13px;
}
.pinned {
background-color: var(--bg-cards);
border-radius: 10px;
}
/* Overflow Menu Styles */
.overflow-menu {
position: relative;
display: flex;
border: solid 1.5px var(--card-border);
border-radius: 10px;
padding: 6px 12px;
transition: 0.3s;
}
.overflow-menu:hover {
background-color: var(--bg-button-hover);
cursor: pointer;
}
.overflow-content {
display: none;
position: absolute;
top: 100%;
background-color: var(--bg-button);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
border-radius: 10px;
z-index: 1;
min-width: fit-content;
height: 0;
overflow: hidden;
transition: height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
}
[dir="ltr"] .overflow-content {
right: 0;
}
[dir="rtl"] .overflow-content {
left: 0;
}
.overflow-content.open {
display: flex;
height: auto;
}
.overflow-item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 12px 16px;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
}
[dir="ltr"] .overflow-item i {
margin-right: 8px;
}
[dir="rtl"] .overflow-item i {
margin-left: 8px;
}
.overflow-item:hover {
background-color: var(--bg-button-hover);
border-radius: 10px;
}
.overflow-menu:not(:has(.overflow-item)) {
display: none;
}
@media (max-width: 500px) {
#comments-order {
width: 10px;
}
}
.comments-order-dropdown {
margin-left: 10px;
padding: 5px;
font-size: 14px;
}
.comments-flag {
border-radius: 3px;
height: 11px;
}
.reply-flag {
border-radius: 3px;
height: 9px;
}
.flash-effect {
animation: flash 1.5s ease-in-out;
border-radius: 10px;
/* Keep the border-radius constant */
}
@keyframes flash {
0% {
opacity: 1;
}
25% {
opacity: 0.5;
}
50% {
opacity: 1;
}
75% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* Apply to all elements whose ID starts with 'reply-' */
div[id^="reply-"] {
transition: background-color 0.5s ease-in-out;
}
.reply-shortcut:hover {
text-decoration: underline;
}
#comment-advice {
margin-right: auto;
padding-left: 80px;
font-size: 12px;
color: var(--font-color-footer);
}
#insertCurrentTimestamp {
text-decoration: underline;
color: var(--color-secondary);
cursor: pointer;
}
.timestamp-link,
.timestamp-link:hover {
color: var(--color-active);
background-color: var(--color-active-transparent);
border-radius: 5px;
position: relative;
}
.hide-brackets {
visibility: hidden;
}
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
#userTooltip {
display: flex;
gap: 8px;
}
.tooltip .badgeTooltip,
.tooltip .viewsTooltip {
visibility: hidden;
background-color: var(--bg-cards);
color: var(--font-color);
border: 1px solid var(--card-border);
text-align: center;
border-radius: 5px;
padding: 5px 5px 5px 5px;
position: absolute;
z-index: 1;
top: -5px;
left: 50%;
transform: translate(-50%, -100%);
opacity: 0;
transition:
opacity 0.3s,
visibility 0.3s;
font-size: 12px;
text-transform: capitalize;
}
.tooltip:hover .badgeTooltip,
.tooltip:hover .viewsTooltip {
visibility: visible;
opacity: 1;
}
.tooltip .userTooltip {
visibility: hidden;
background-color: var(--bg-color-transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
color: var (--font-color);
border: 1px solid var(--card-border);
border-radius: 5px;
position: absolute;
z-index: 2;
top: -10px;
transform: translate(-50%, -100%);
opacity: 0;
transition:
opacity 0.3s,
visibility 0.3s;
}
[dir="ltr"] .tooltip .userTooltip {
left: 175px;
}
@media (max-width: 960px) {
[dir="ltr"] .tooltip .userTooltip {
left: 145px;
}
}
[dir="rtl"] .tooltip .userTooltip {
left: 10px;
}
.tooltip:hover .userTooltip {
visibility: visible;
opacity: 1;
}
.tooltip .userTooltip {
padding: 15px 20px 15px 20px;
}
.userTooltip-avatar {
width: 80px;
height: 80px;
}
.userTooltip-avatar-initials {
display: flex;
justify-content: center;
align-items: center;
min-width: 80px;
width: 80px;
min-height: 80px;
height: 80px;
color: var(--font-color);
font-size: 48px;
margin-right: 6px;
font-weight: bold;
}
.userTooltip-name {
font-size: 24px;
display: flex;
align-items: center;
gap: 6px;
font-weight: bold;
}
.userTooltip-last-seen {
white-space: nowrap;
font-size: 14px;
color: var(--font-color-index);
}
.userTooltip-pp-size {
white-space: nowrap;
font-size: 14px;
color: var(--font-color-index);
}
/* Ensure tooltip position is based on avatar */
.comment-user .username,
.comment-user .tooltip .username,
.reply-user .username,
.reply-user .tooltip .username {
position: relative;
}
.comment-user .username:hover .userTooltip,
.comment-user .tooltip .username:hover .userTooltip,
.reply-user .username:hover .userTooltip,
.reply-user .tooltip .username:hover .userTooltip {
visibility: visible;
opacity: 1;
left: 50%;
transform: translate(-50%, -100%);
}
.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
border: 0 !important;
}
.modal-header h3 {
margin-top: 0;
}
/* */
@media (min-width: 0px) {
.login,
.register,
.recovery {
width: 100%;
}
}
@media (min-width: 375px) {
.login,
.register,
.recovery {
width: 375px;
}
}
.login,
.register,
.recovery {
background-color: var(--bg-cards);
margin: 100px auto;
border-radius: 10px;
border: 1px solid var(--card-border);
}
.login h1,
.register h1,
.recovery h1 {
text-align: center;
color: var(--font-color);
font-size: 24px;
padding: 20px 0 20px 0;
}
.login form,
.register form,
.recovery form {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.login form input[type="password"],
.login form input[type="text"],
.register form input[type="password"],
.register form input[type="text"],
.register form input[type="email"],
.recovery form input[type="email"],
.recovery form input[type="text"],
.recovery form input[type="new_password"] {
height: 100%;
border: 1px solid var(--card-border);
background-color: var(--bg-color2);
padding: 0 10px;
border-radius: 10px;
color: var(--font-color);
flex-grow: 1;
}
.login form input[type="password"]::placeholder,
.login form input[type="text"]::placeholder,
.register form input[type="password"]::placeholder,
.register form input[type="text"]::placeholder,
.register form input[type="email"]::placeholder,
.recovery form input[type="email"]::placeholder,
.recovery form input[type="text"]::placeholder,
.recovery form input[type="new_password"]::placeholder {
color: var(--font-color-footer);
}
/* CSS to move the checkbox to a new line */
.login form .checkbox-wrapper,
.register form .checkbox-wrapper,
.recovery form .checkbox-wrapper {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.login form .checkbox-wrapper label,
.register form .checkbox-wrapper label,
.recovery form .checkbox-wrapper label {
width: 100%;
}
.form-input-field {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
margin-bottom: 20px;
}
.form-captcha {
width: 100%;
margin-bottom: 20px;
min-height: 70px;
}
.form-links {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 25px;
margin-bottom: 20px;
gap: 0.75rem;
text-align: center;
}
.form-links-single {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 25px;
margin-bottom: 20px;
gap: 0.75rem;
text-align: center;
}
.link-login {
text-decoration: underline;
color: var(--color-secondary);
}
.link-login:hover {
text-decoration: underline;
color: var(--color-secondary);
}
#userCardChangeAvatarButton {
cursor: pointer;
}
.songs_main {
padding-top: 32px;
position: sticky;
z-index: 1;
background-color: var(--bg-color);
transition: 0.3s;
}
@media (min-width: 0px) {
.songs_main {
top: 0px;
}
}
@media (min-width: 900px) {
.songs_main {
top: 52px;
}
}
.dropdown-songs {
position: relative;
display: inline-block;
}
.dropbtn-songs {
background-color: var(--bg-button);
color: var(--font-color);
padding: 16px;
font-size: 16px;
border-radius: 10px;
width: 184px;
border: none;
font-weight: bold;
transition: 0.3s;
}
.dropbtn-songs:hover {
background-color: var(--bg-button-hover);
border-radius: 10px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content-songs {
display: none;
position: absolute;
background-color: var(--bg-color2);
border: 1px solid var(--bg-button);
border-radius: 10px;
width: 182px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content-songs a {
font-weight: bold;
color: var(--font-color);
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content-songs a:hover {
background-color: var(--bg-button);
border-radius: 10px;
transition: 0.3s;
}
/* Disabled link styles */
.dropdown-content-songs a.disabled-link {
cursor: not-allowed;
pointer-events: auto;
}
/* Override hover effect for disabled links */
.dropdown-content-songs a.disabled-link:hover {
background-color: transparent;
border-radius: 0;
transition: none;
}
/* Show the dropdown menu on hover */
.dropdown-songs:hover .dropdown-content-songs {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown-songs:hover .dropbtn-songs {
background-color: var(--bg-button);
border-radius: 10px;
}
.songs_nav {
text-align: center;
width: 100%;
padding-bottom: 32px;
}
.song-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
max-width: 1102px;
margin: auto;
margin-top: 32px;
margin-bottom: 40px;
transition: 0.3s;
}
@media (max-width: 600px) {
.song-list {
grid-template-columns: repeat(2, 1fr);
}
}
.song-item {
background-color: var(--bg-cards);
padding: 15px;
border-radius: 15px;
text-align: center;
transition: 0.3s;
}
.song-item:hover {
background-color: var(--card-hover);
}
.albums-year-header {
max-width: 1102px;
margin: auto;
}
.album-art {
width: 100%;
border-radius: 12px;
}
.title {
font-size: 0.9rem;
font-weight: bold;
margin-top: 10px;
}
.author {
font-size: 0.9rem;
color: var(--font-color-footer);
margin-top: 5px;
transition: 0.3s;
}
.year {
font-size: 0.8rem;
color: color-mix(in srgb, var(--font-color-footer) 80%, black);
margin-top: 3px;
transition: 0.3s;
}
.fi-ca-val {
background-image: url(https://miraculum.ml/res/flags/ca-val.svg);
}
.icon-wrapper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
overflow: visible;
}
.icon-badge {
position: absolute;
top: -4px;
width: 7px;
height: 7px;
background-color: var(--color-secondary);
border: 1px var(--card-border) solid;
border-radius: 100%;
pointer-events: none;
z-index: 1;
}
[dir="rtl"] .icon-badge {
right: -7px;
}
[dir="ltr"] .icon-badge {
right: -7px;
}
.icon-badge2 {
position: absolute;
top: -6px;
right: -3px;
width: 12px;
height: 12px;
background-color: var(--color-secondary);
color: var(--font-color-invert);
border: 2px var(--card-border) solid;
border-radius: 100%;
pointer-events: none;
z-index: 1;
font-size: 8px;
text-align: center;
line-height: 12px;
}
#notification-icon {
padding-right: 4px;
}
.icon-badge::after,
.icon-badge2::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-secondary);
border-radius: 100%;
animation: pulse 1.5s infinite;
z-index: -1;
opacity: 0;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.6;
}
70% {
transform: scale(3);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.episodes_list_viewmode {
width: fit-content;
background-color: var(--bg-button);
padding: 5px;
border-radius: 10px;
display: flex;
gap: 10px;
max-height: 50px;
}
.episodes_list_viewmode a {
margin: 0;
padding: 10px;
width: 18px;
height: 18px;
transition: 0.3s;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.episodes_list_viewmode a:hover {
background-color: var(--bg-button-hover);
border-radius: 8px;
}
.episodes_list_viewmode a.active {
color: var(--font-color-invert);
background-color: var(--color-active);
border-radius: 8px;
}
.trending-animate {
will-change: opacity, transform;
transition: 0.3s !important;
padding: 5px;
opacity: 0;
transform: translateY(30px);
position: relative;
}
.views-badge {
position: absolute;
bottom: 8px;
background: var(--bg-bottom-right);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
color: var(--font-color);
padding: 6px 10px 6px 8px;
border-radius: 8px;
font-size: 0.95em;
font-weight: 500;
pointer-events: none;
z-index: 2;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
line-height: 1.2;
display: flex;
align-items: center;
}
[dir="ltr"] .views-badge {
left: auto;
right: 10px;
}
[dir="rtl"] .views-badge {
left: 10px;
right: auto;
}
.bookmark-badge {
position: absolute;
top: 10px;
background: var(--bg-bottom-right);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
color: var(--font-color);
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 0.95em;
font-weight: 500;
pointer-events: auto;
z-index: 2;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
[dir="ltr"] .bookmark-badge {
left: auto;
right: 10px;
}
[dir="rtl"] .bookmark-badge {
left: 10px;
right: auto;
}
.views-badge .views-icon {
display: inline-flex;
align-items: center;
height: 1em;
}
.views-badge .fa-eye {
font-size: 1em;
vertical-align: middle;
line-height: 1;
}
.bookmark-item {
margin-bottom: 8px !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.bookmark-link {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
height: 100px !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
color: inherit !important;
}
.bookmark-image {
flex-shrink: 0 !important;
height: 100px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
border-radius: 8px 0 0 8px !important;
display: block !important;
}
.bookmark-link span {
flex: 1 !important;
padding-left: 5px !important;
font-size: 13px !important;
font-weight: normal !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: left !important;
/* add this */
}
.bookmark-remove {
position: absolute !important;
top: 50% !important;
right: 5px !important;
transform: translateY(-50%) !important;
display: none;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
border: 1px solid var(--card-border) !important;
background: var(--bg-button) !important;
justify-content: center !important;
align-items: center !important;
cursor: pointer !important;
}
.bookmark-link:hover .bookmark-remove {
display: flex;
}
.carousel_saved {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
font-size: 18px;
}
.contributorName {
font-weight: bold;
}
.contributorNameActive {
color: #1aad1a;
}
#searchUI,
#searchUI * {
box-sizing: border-box;
}
.hiddenSearch {
display: none !important;
}
#searchUI-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: var(--bg-color-overlay);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
z-index: 998;
}
#searchUI {
position: fixed;
padding: 20px;
top: 70px;
left: 50%;
transform: translateX(-50%);
z-index: 998;
min-height: 80px;
max-height: 80vh;
background-color: var(--bg-color-transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
@media (min-width: 0px) {
#searchUI {
width: 100%;
}
}
@media (min-width: 900px) {
#searchUI {
width: 60%;
}
}
.search-box {
position: relative;
width: 100%;
}
.search-box i {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--font-color);
}
[dir="ltr"] .search-box i {
left: 12px;
}
[dir="rtl"] .search-box i {
right: 12px;
}
.search-box input {
width: 100%;
border: 2px solid var(--card-border);
border-radius: 10px;
font-size: 16px;
background: var(--bg-color2);
color: var(--font-color);
outline: none;
}
[dir="ltr"] .search-box input {
padding: 10px 12px 10px 40px;
}
[dir="rtl"] .search-box input {
padding: 10px 40px 10px 12px;
}
#search-results {
text-align: center;
margin-top: 10px;
padding-top: 20px;
padding-bottom: 20px;
color: var(--font-color-footer);
font-style: italic;
max-height: calc(80vh - 80px);
overflow-y: auto;
border-radius: 10px;
}
.searchResultItem {
display: flex;
align-items: center;
background-color: var(--bg-cards);
border-radius: 10px;
margin-bottom: 10px;
transition: 0.3s;
}
[dir="ltr"] .searchResultItem {
padding-right: 10px;
}
[dir="rtl"] .searchResultItem {
padding-left: 10px;
}
.searchResultItem:hover {
background-color: var(--card-hover);
}
.searchResultItemImageContainer {
aspect-ratio: 16/9;
flex-shrink: 0;
overflow: hidden;
}
[dir="ltr"] .searchResultItemImageContainer {
margin-right: 15px;
}
[dir="rtl"] .searchResultItemImageContainer {
margin-left: 15px;
}
.searchResultItemImage {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
[dir="ltr"] .searchResultItemImage {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
[dir="rtl"] .searchResultItemImage {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.searchResultItemTitleContainer {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
[dir="ltr"] .searchResultItemTitleContainer {
text-align: left;
}
[dir="rtl"] .searchResultItemTitleContainer {
text-align: right;
}
.searchResultItemTitle {
font-weight: bold;
font-style: normal;
color: var(--font-color);
}
.searchResultItemSubTitle {
color: var(--font-color-footer);
font-style: normal;
}
@media (min-width: 0px) {
.searchResultItem {
height: 80px;
}
.searchResultItemImageContainer {
width: 141.25px;
}
.searchResultItemTitle {
font-size: 13px;
}
.searchResultItemSubTitle {
font-size: 11px;
}
}
@media (min-width: 900px) {
.searchResultItem {
height: 90px;
}
.searchResultItemImageContainer {
width: 160px;
}
.searchResultItemTitle {
font-size: 16px;
}
.searchResultItemSubTitle {
font-size: 14px;
}
}
.searchInfoButton {
font-size: 16px;
white-space: nowrap;
padding: 10px;
transition: 0.3s;
border-radius: 50%;
}
[dir="ltr"] .searchInfoButton {
margin-left: 15px;
}
[dir="rtl"] .searchInfoButton {
margin-right: 15px;
}
.searchInfoButton:hover {
background-color: var(--bg-button-hover);
}
#searchHistory {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
}
.search-history-item {
display: flex;
align-items: center;
padding: 6px 12px;
border-radius: 20px;
background-color: var(--bg-cards);
color: var(--font-color);
font-size: 13px;
cursor: pointer;
transition: 0.2s;
white-space: nowrap;
}
.search-history-item i {
font-size: 12px;
}
.search-history-item:hover {
background-color: var(--card-hover);
}
.pill-remove {
cursor: pointer;
}
.separator-line {
border: 0;
height: 1px;
background: var(--card-border);
margin: 20px 0;
}