@import "fonts.css";

* {
    margin: 0;
}

body {
    background-color: #000000;
    height: 100%;
    width: 100%;
}

#support-text,
#playlist-desc,
[id$="text"],
[class$="text"],
[class$="text-m"] {
    position: relative;
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 1.375vh;
    color: #A7A7A7;
}

#home-header-div {
    position: relative;
    width: 100%;
    height: 35.5vh;
    left: 0vw;
    top: 0vh;
    background-image: url(../assets/playlist-covers/playlist-cover.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#playlist-header-div {
    position: relative;
    width: 82vw;
    left: 5vw;
    top: 20vh;
}

#playlist-name {
    position: relative;
    height: auto;
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-size: 4vh;
    color: #FFFFFF;
}

#playlist-author-div {
    position: relative;
    display: flex;
    top: 0.5vh;
    width: 32vw;
    height: 2.30625vh;
}

#playlist-author-img {
    position: relative;
    width: auto;
    height: 2.30625vh;
}

#playlist-author-text {
    position: relative;
    left: 1.66667vw;
    top: 0.25vh;
    font-weight: 800;
    color: #ffffff;
}

#songcount-text {
    position: relative;
    top: 0.75vh;
}

#actionbar-div {
    position: relative;
    display: flex;
    align-items: center;
    width: 90vw;
    height: 5.25vh;
    left: 5vw;
    right: 5vw;
}

#actionbar-play,
#actionbar-pause {
    position: absolute;
    right: 0;
    top: 0;
}

#actionbar-shuffle {
    position: absolute;
    right: 15.5vw;
}

#songscroll-div,
#searchscroll-div {
    position: relative;
    width: 100%;
    height: 33.25vh;
    left: 0;
    top: 3vh;
    overflow-anchor: none;
}

#song-div {
    position: relative;
    display: flex;
    align-items: center;
    width: 90vw;
    height: 5.25vh;
    left: 5vw;
    right: 5vw;
    margin-bottom: 1.75vh;
}

#song-art {
    position: relative;
    width: 5.25vh;
    height: 5.25vh;
    left: 0;
    top: 0;
}

#songinfo-div {
    position: relative;
    width: auto;
    height: 4.5vh;
    left: 2.7vw;
}

#songname-text {
    top: 0;
    font-size: 1.75vh;
    color: #ffffff;
}

#songartist-text {
    bottom: 0;
}

#song-more {
    position: absolute;
    right: 0;
}

#nowplaying-shade-div {
    position: fixed;
    width: 100%;
    height: 10.5vh;
    left: 0px;
    bottom: 8.5vh;
}

#nowplaying-card-div {
    position: absolute;
    display: flex;
    align-items: center;
    width: 96vw;
    height: 6.25vh;
    left: 2vw;
    right: 2vw;
    bottom: 0;
    background: #282828;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1vh;
    z-index: 1;
}

#nowplaying-art {
    position: relative;
    width: 4.5vh;
    height: 4.5vh;
    left: 3.61vw;
    border-radius: 0.5vh;
    z-index: 1;
}

#nowplaying-text-div {
    position: relative;
    width: 50vw;
    height: 3.5vh;
    left: 7vw;
}

#nowplaying-title-text {
    position: absolute;
    left: 0;
    top: 0;
    width: 80%;
    font-weight: 800;
    color: #ffffff;
}

#nowplaying-artist-text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;
}

#nowplaying-play,
#nowplaying-pause {
    position: absolute;
    right: 3.61vw;
}

#nowplaying-status-div {
    position: absolute;
    background-color: #ffffff;
    width: 0%;
    max-width: 92%;
    height: 0.25vh;
    left: 2vw;
    bottom: 0;
}

#navbar-div {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 8.5vh;
    left: 0;
    bottom: 0;
    background-color: #000000;
}

#navbar-leftbtn-div {
    position: absolute;
    align-items: center;
    width: 6vh;
    height: 6vh;
    left: 24vw;
    top: 50%;
    transform: translateY(-50%);
}

#navbar-centerbtn-div {
    position: absolute;
    align-items: center;
    width: 6vh;
    height: 6vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#navbar-rightbtn-div {
    position: absolute;
    align-items: center;
    width: 6vh;
    height: 6vh;
    right: 24vw;
    top: 50%;
    transform: translateY(-50%);
}

#navbar-btn-text {
    position: absolute;
    bottom: 0;
}

#collapsed-header-div {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 8vh;
    left: 0;
    top: 0;
    background-color: #000000;
    background-image: url(../assets/images/collapsed-header-cover.png);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    visibility: hidden;
}

#collapsed-header-name {
    position: relative;
    height: auto;
    left: 5vw;
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-size: 1.75vh;
    color: #f0f0f0;
}

[id$="pause"] {
    display: none;
}

.slide-left {
    animation: slideLeftAnimation 0.5s;
}

.slide-right-mini {
    animation: slideRightMiniAnimation 0.5s;
}

.slide-right {
    animation: slideRightAnimation 0.5s;
}

@keyframes slideLeftAnimation {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes slideRightMiniAnimation {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes slideRightAnimation {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

#songname-text,
#songartist-text,
#nowplaying-title-text,
#nowplaying-artist-text {
    max-width: 67vw; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-div {
    position: absolute;
    width: 100vw;
    height: 85.5vh;
    left: 0;
    top: 0;
    background-color: #000000;
}

#playlists-text,
#search-title-text {
    position: relative;
    width: 7vw;
    height: 5.5vh;
    left: 6vw;
    top: 3vh;
    font-weight: 800;
    font-size: 3vh;
    color: #FFFFFF;
}

/* 2024/06/28: since we have no time to unify ui, use -m to specify mobile element */
#album-music-card-m,
#album-drama-card-m {
    position: relative;
    width: 90vw;
    height: 16vh;
    left: 5vw;
    top: 3vh;
    border-radius: 1vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#album-music-card-m {
    background-image: url(../assets/playlist-headers/playlist-music.png);
}

#album-drama-card-m {
    top: 4vh;
    background-image: url(../assets/playlist-headers/playlist-drama.png);
}

.card-text {
    position: absolute;
    left: 4vw;
    bottom: 1vh;
    font-size: 2vh;
    color: #000000;
    font-weight: 600;
}

#performers-text {
    position: relative;
    width: 75vw;
    height: 5.5vh;
    left: 6vw;
    top: 5vh;
    font-weight: 800;
    font-size: 3vh;
    color: #FFFFFF;
}

#performer-card-div-m {
    position: relative;
    left: 0;
    top: 4vh;
    width: 100vw;
    height: 75vh;
    overflow-y: scroll;
    background-color: #000000;
}

.performers-card-m {
    position: absolute;
    width: 44vw;
    height: 14vh;
    border-radius: 1vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.performers-card-text-m {
    position: absolute;
    left: 1.5vw;
    bottom: 1vh;
    font-size: 1.75vh;
    color: #000000;
}

#performers-string-card-m {
    top: 0;
    left: 5vw;
    background-image: url(../assets/performers-cards/performers-string-card.png);
}

#performers-drama-card-m {
    top: 0;
    right: 5vw;
    background-image: url(../assets/performers-cards/performers-drama-card.png);
}

#performers-choir-card-m {
    top: 15vh;
    left: 5vw;
    background-image: url(../assets/performers-cards/performers-choir-card.png);
}

#performers-aorch-card-m {
    top: 15vh;
    right: 5vw;
    background-image: url(../assets/performers-cards/performers-aorch-card.png);
}

#performers-sorch-card-m {
    top: 30vh;
    left: 5vw;
    background-image: url(../assets/performers-cards/performers-sband-card.png);
}

#performers-achoir-card-m {
    top: 30vh;
    right: 5vw;
    background-image: url(../assets/performers-cards/performers-achoir-card.png);
}

#performers-band-card-m {
    top: 45vh;
    left: 5vw;
    background-image: url(../assets/performers-cards/performers-band-card.png);
}

#performers-backstage-card-m {
    top: 45vh;
    right: 5vw;
    background-image: url(../assets/performers-cards/performers-backstage-card.png);
}

#performers-blocker {
    display: none;
    overflow-y: scroll;
    height: 85vh;
    padding-bottom: 25vh;
}

.popup-card-back {
    position: relative;
    left: 4vw;
    top: 2vh;
}

#popup-card-image-m {
    position: absolute;
    width: 90vw;
    height: 90vw;
    object-fit: cover;
    left: 50%;
    top: 10vh;
    transform: translateX(-50%);
}

.popup-title-text-m {
    position: absolute;
    top: calc(90vw + 12vh);
    left: 5vw;
    width: 90vw;
    font-weight: 800;
    font-size: 3vh;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
}

.popup-about-text-m {
    position: absolute;
    top: calc(90vw + 17vh);
    left: 5vw;
    right: 5vw;
    color: #FFFFFF;
}

.song-details-icon {
    position: absolute;
    right: 1vw;
}

#back-icon-m {
    position: absolute;
    left: 4vw;
    top: 2vh;
}

#search-div {
    display: none;
}

#search-bar {
    position: relative;
    width: 92vw;
    height: 5vh;
    left: 4vw;
    top: 3vh;
    font-size: 1.75vh;
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    background-color: #ffffff;
    color: #000000;
    border-radius: 0.5vh;
    padding-left: 2vw;
}

#search:focus {
    outline-width: 0;
}

#search::placeholder {
    left: 4vw;
    color: #A7A7A7;
}

#searchscroll-div {
    top: 6vh;
    height: 75%;
    overflow-y: scroll;
}

#drama-details-icon {
    left: calc(2.5vh + 5vw);
    display: none;
}