synctune.app - Dec 2023 by whitedevil988

/* ==UserStyle==
@name         synctune.app - Dec 2023
@version      20231221.13.46
@namespace    ?
==/UserStyle== */

@-moz-document url-prefix("https://synctune.app/") {
@import"https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap";
.IconBase {
    display: flex
}
.IconBase svg {
    display: block;
    width: 100%;
    height: 100%
}
.IconClickable {
    color: rgba(var(--GLOBAL__text__primary, var(--GLOBAL__text__primary)), 1);
    cursor: pointer;
    transition: color .15s
}
.IconClickable i {
    transition: color .15s
}
.IconClickable:hover {
    color: rgba(var(--GLOBAL__text__tertiary, var(--GLOBAL__text__tertiary)), 1)
}
.IconClickable.disabled {
    cursor: inherit;
    color: rgba(var(--GLOBAL__text__disabled, var(--GLOBAL__text__disabled)), 1)
}
.IconClickable.disabled:hover {
    color: rgba(var(--GLOBAL__text__disabled, var(--GLOBAL__text__disabled)), 1)
}
.vue-notification-group {
    max-width: 330px!important;
    width: 100%!important
}
.BaseNotification {
    position: relative;
    border-radius: .3rem;
    z-index: 1;
    margin: .52rem .5rem;
    box-shadow: 0 2px 5px #00000040
}
.BaseNotification .BaseNotification__accent {
    background-color: rgba(var(--GLOBAL__accent__primary, var(--GLOBAL__accent__primary)), 1);
    border-radius: .3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}
.BaseNotification .BaseNotification__base {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgba(var(--GLOBAL__background__secondary, var(--GLOBAL__background__secondary)), 1);
    border-radius: .3rem;
    margin: 0 .5rem;
    padding: 1.5rem 2.5rem 1.5rem 1rem
}
.BaseNotification .BaseNotification__base .BaseNotification__close {
    position: absolute;
    top: 0;
    right: 0;
    margin: .2rem
}
.BaseNotification .BaseNotification__base .BaseNotification__icon {
    margin-right: .5rem
}
.BaseNotification .BaseNotification__base .BaseNotification__title {
    font-weight: 700;
    margin-right: .4rem
}
.BaseNotification .BaseNotification__base .BaseNotification__text {
    font-size: 1.5rem
}
.slide-rr-enter-active,
.slide-rr-leave-active {
    transition: opacity .3s, transform .3s!important
}
.slide-rr-enter-from,
.slide-rr-leave-to {
    opacity: 0
}
.slide-rr-enter-from,
.slide-rr-leave-to {
    transform: translate(30px)
}
.ErrorNotification.ErrorNotification {
    background-color: rgba(var(--ErrorNotification__error__background, var(--GLOBAL__error__background)), 1)
}
.ErrorNotification.ErrorNotification .ErrorNotification__text {
    color: rgba(var(--ErrorNotification__error__text, var(--GLOBAL__error__text)), 1)
}
.ErrorNotification__accent.ErrorNotification__accent {
    background-color: rgba(var(--ErrorNotification__error__accent, var(--GLOBAL__error__accent)), 1)
}
.WarningNotification.WarningNotification {
    background-color: rgba(var(--WarningNotification__warning__background, var(--GLOBAL__warning__background)), 1)
}
.WarningNotification.WarningNotification .WarningNotification__text {
    color: rgba(var(--WarningNotification__warning__text, var(--GLOBAL__warning__text)), 1)
}
.WarningNotification__accent.WarningNotification__accent {
    background-color: rgba(var(--WarningNotification__warning__accent, var(--GLOBAL__warning__accent)), 1)
}
.SuccessNotification.SuccessNotification {
    background-color: rgba(var(--SuccessNotification__success__background, var(--GLOBAL__success__background)), 1)
}
.SuccessNotification.SuccessNotification .SuccessNotification__text {
    color: rgba(var(--SuccessNotification__success__text, var(--GLOBAL__success__text)), 1)
}
.SuccessNotification__accent.SuccessNotification__accent {
    background-color: rgba(var(--SuccessNotification__success__accent, var(--GLOBAL__success__accent)), 1)
}
.InfoNotification.InfoNotification {
    background-color: rgba(var(--InfoNotification__info__background, var(--GLOBAL__info__background)), 1)
}
.InfoNotification.InfoNotification .InfoNotification__text {
    color: rgba(var(--InfoNotification__info__text, var(--GLOBAL__info__text)), 1)
}
.InfoNotification__accent.InfoNotification__accent {
    background-color: rgba(var(--InfoNotification__info__accent, var(--GLOBAL__info__accent)), 1)
}
.slide-rr-enter-active,
.slide-rr-leave-active {
    transition: opacity .3s, transform .3s!important
}
.slide-rr-enter-from,
.slide-rr-leave-to {
    opacity: 0
}
.slide-rr-enter-from,
.slide-rr-leave-to {
    transform: translate(30px)
}
.ContentContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: .7rem;
    box-shadow: 0 2px 10px #00000040;
    z-index: 1;
    display: inline-block
}
.ContentContainer .ContentContainer__container {
    flex-grow: 1;
    flex-shrink: 1;
    background-color: rgba(var(--ContentContainer__background__primary, var(--GLOBAL__background__primary)), 1);
    border-radius: .7rem;
    padding: .5rem
}
.ContentContainer .ContentContainer__accent {
    background-color: rgba(var(--ContentContainer__accent__primary, var(--GLOBAL__accent__primary)), 1);
    border-radius: .7rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}
.ContentContainer.vertical-accents .ContentContainer__container {
    margin: 0 .7rem;
    height: 100%
}
.ContentContainer.horizontal-accents .ContentContainer__container {
    margin: .7rem 0;
    height: calc(100% - 1.4rem)
}
.ArtworkThumbnail {
    width: 100%;
    max-width: 14rem
}
.ArtworkThumbnail .ArtworkThumbnail__container {
    background: rgba(var(--ArtworkThumbnail__gradient__start, var(--GLOBAL__gradient__start)), 1);
    background: linear-gradient(135deg, rgba(var(--ArtworkThumbnail__gradient__start, var(--GLOBAL__gradient__start)), 1) 0%, rgba(var(--ArtworkThumbnail__gradient__end, var(--GLOBAL__gradient__end)), 1) 100%);
    border-radius: 10px;
    position: relative;
    width: 100%;
    padding-top: 100%
}
.ArtworkThumbnail .ArtworkThumbnail__container .ArtworkThumbnail__note-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    background-size: cover;
    opacity: .9;
    z-index: 10
}
@media (max-width: 37.5em) {
    .ArtworkThumbnail {
        max-width: 12rem
    }
}
.RoomStatus__wrapper {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    padding: 0 .5rem .5rem;
    max-width: 40rem;
    width: 100%;
    z-index: 2
}
.RoomStatus__wrapper .RoomStatus {
    width: 100%
}
.RoomStatus__wrapper .RoomStatus .RoomStatus__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}
.RoomStatus__wrapper .RoomStatus .RoomStatus__container .RoomStatus__artwork-thumbnail {
    max-width: 5rem
}
.RoomStatus__wrapper .RoomStatus .RoomStatus__container .RoomStatus__artwork-thumbnail .ArtworkThumbnail__note-icon {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem)
}
.RoomStatus__wrapper .RoomStatus .RoomStatus__container .RoomStatus__song-title {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    color: rgba(var(--CurrentSongContainer__text__primary, var(--GLOBAL__text__primary)), 1)
}
.RoomStatus__wrapper .RoomStatus:not(.audio-loaded) .RoomStatus__container .RoomStatus__song-title {
    color: rgba(var(--CurrentSongContainer__text__disabled, var(--GLOBAL__text__disabled)), 1)
}
.slide-lr-abs-enter-active,
.slide-lr-abs-leave-active {
    transition: opacity .3s, left .3s!important
}
.slide-lr-abs-enter-from,
.slide-lr-abs-leave-to {
    opacity: 0
}
.slide-lr-abs-enter-from {
    left: calc(50% - 30px)
}
.slide-lr-abs-leave-to {
    left: calc(50% + 30px)
}
#AudioPlayer {
    position: absolute
}
#App {
    height: 100%;
    width: 100%
}
#App #App__overlay-container {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(var(--App__background_gradient__start, var(--GLOBAL__background_gradient__start)), 1);
    background: linear-gradient(rgba(var(--App__background_gradient__start, var(--GLOBAL__background_gradient__start)), 1) 0%, rgba(var(--App__background_gradient__start, var(--GLOBAL__background_gradient__start)), 1) 60%, rgba(var(--App__background_gradient__end, var(--GLOBAL__background_gradient__end)), 1))
}
#App #App__overlay-container #App__container {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s!important
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0
}
.InputField {
    font-size: 1.6rem;
    padding: .8rem;
    outline: none;
    border-radius: .5rem;
    color: rgba(var(--InputField__text__primary, var(--GLOBAL__text__primary)), 1);
    background-color: rgba(var(--InputField__background__primary, var(--GLOBAL__background__primary)), 1);
    border: .1rem solid rgba(var(--InputField__accent__secondary, var(--GLOBAL__accent__secondary)), 0);
    box-shadow: 0 2px 7px #0003;
    transition: background-color .5s, box-shadow .5s, border .5s, color .5s
}
.InputField:focus {
    border: .1rem solid rgba(var(--InputField__accent__secondary, var(--GLOBAL__accent__secondary)), 1);
    box-shadow: 0 2px 7px 0 rgba(var(--InputField__accent__primary, var(--GLOBAL__accent__primary)), .4)
}
.InputField:disabled {
    color: rgba(var(--InputField__text__disabled, var(--GLOBAL__text__disabled)), 1);
    background-color: rgba(var(--InputField__background__disabled, var(--GLOBAL__background__disabled)), 1)
}
.ButtonSecondary {
    position: relative;
    display: inherit;
    z-index: 1;
    cursor: pointer;
    font-size: 1.7rem;
    border-radius: .5rem;
    color: rgba(var(--ButtonSecondary__text__primary, var(--GLOBAL__text__primary)), 1);
 ...