Initial commit

1 files changed, 432 insertions, 0 deletions

diff --git a/assets/styles.css b/assets/styles.css
new file mode 100644
index 0000000..de4d33f
--- /dev/null
+++ b/assets/styles.css
@@ -0,0 +1,432 @@
+iframe {
+    border: none;
+}
+
+* {
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+.player-btn:hover {
+    background-color: rgba(0, 0, 0, .05);
+}
+
+.player-btn:active {
+    background-color: rgba(0, 0, 0, .1);
+}
+
+.navigation-item {
+    padding: 5px 10px;
+}
+
+.navigation-item.active, .navigation-item:active {
+    background-color: rgba(0, 0, 0, .1) !important;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+}
+
+.navigation-item:hover {
+    background-color: rgba(0, 0, 0, .05);
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+}
+
+.album:hover {
+    background-color: rgba(0, 0, 0, .05);
+    border-radius: 5px;
+}
+
+.player-btn.disabled {
+    opacity: .5;
+    pointer-events: none;
+}
+
+@media (max-width: 1200px) {
+    #album-grid {
+        grid-template-columns: repeat(4, 1fr) !important;
+    }
+
+    .album-list-item {
+        max-width: calc(80vw / 4) !important;
+    }
+}
+
+@media (max-width: 1215px) {
+    #album-grid {
+        grid-template-columns: repeat(5, 1fr) !important;
+    }
+
+    .album-list-item {
+        max-width: calc(80vw / 5) !important;
+    }
+}
+
+@media (max-width: 1311px) {
+    #navigation {
+        width: 96px !important;
+    }
+
+    iframe#player {
+        left: 96px !important;
+        width: calc(100vw - 96px) !important;
+    }
+
+    #ui, #lyrics-page {
+        left: 96px !important;
+        width: calc(100vw - 96px) !important;
+    }
+}
+
+@media (max-width: 1295px) {
+    #album-grid {
+        grid-template-columns: repeat(4, 1fr) !important;
+    }
+
+    .album-list-item {
+        max-width: calc(80vw / 4) !important;
+    }
+}
+
+@media (max-width: 96px) {
+    .navigation-desktop {
+        display: none;
+    }
+}
+
+@media (max-width: 991px) {
+    #player.desktop-player .player-btn {
+        width: 32px !important;
+    }
+
+    #player.desktop-player .player-badge-desktop {
+        display: none !important;
+    }
+
+    #album-grid {
+        grid-template-columns: repeat(3, 1fr) !important;
+    }
+
+    .album-list-item {
+        max-width: calc(80vw / 3) !important;
+    }
+}
+
+@media (max-width: 767px) {
+    #album-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    .album-list-item {
+        max-width: calc(80vw / 2) !important;
+    }
+}
+
+@media (max-width: 863px) {
+    #player.bg-white.desktop-player.mobilified .container {
+        grid-template-columns: 1fr !important;
+    }
+
+    #player.desktop-player.mobilified .player-badge-desktop {
+        display: initial !important;
+    }
+
+    #player.desktop-player.mobilified .player-btn {
+        width: 32px !important;
+        height: 32px !important;
+    }
+
+    #player.bg-white.desktop-player.mobilified {
+        height: 144px !important;
+    }
+
+    #player.bg-white.desktop-player.mobilified #info, #player.bg-white.desktop-player.mobilified #cover {
+        border: none !important;
+    }
+
+    #player.desktop-player.mobilified #badge-hires, #player.desktop-player.mobilified #badge-cd, #player.desktop-player.mobilified #badge-lossy {
+        margin-top: 4px !important;
+    }
+
+    #player.desktop-player.mobilified #badges {
+        text-align: center !important;
+        justify-content: center !important;
+    }
+
+    #player.desktop-player.mobilified #buttons {
+        text-align: center;
+        height: 32px !important;
+    }
+
+    #ui, #lyrics-page {
+        top: 145px !important;
+        height: calc(100vh - 145px) !important;
+    }
+
+    iframe#player {
+        height: 144px !important;
+    }
+
+    #navigation {
+        position: fixed !important;
+        top: unset !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        width: 100vw !important;
+        height: 48px !important;
+        border-top: 1px solid rgba(0, 0, 0, .25);
+    }
+
+    iframe#player {
+        position: fixed !important;
+        top: unset !important;
+        bottom: 48px !important;
+        left: 0 !important;
+        right: 0 !important;
+        width: 100vw !important;
+        height: 48px !important;
+        border-top: 1px solid rgba(0, 0, 0, .25);
+        border-bottom: none !important;
+    }
+
+    #player.bg-white.desktop-player.mobilified {
+        height: 48px !important;
+    }
+
+    #player.desktop-player.mobilified #btn-shuffle.player-btn, #player.desktop-player.mobilified #btn-previous.player-btn, #player.desktop-player.mobilified #btn-repeat.player-btn, #player.desktop-player.mobilified #info-grid-sep, #player.desktop-player.mobilified #info-grid-info, #player.desktop-player.mobilified #seekbar-container, #player.desktop-player.mobilified #info-grid-time {
+        display: none !important;
+    }
+
+    #player.desktop-player.mobilified #info-grid-title {
+        text-align: left !important;
+        justify-content: left !important;
+        align-items: center !important;
+        margin-left: 15px !important;
+    }
+
+    #player.bg-white.desktop-player.mobilified #buttons {
+        position: fixed;
+        right: 10px;
+    }
+
+    #player.desktop-player.mobilified #info, #player.desktop-player.mobilified #cover {
+        height: 48px !important;
+        grid-template-columns: 48px 1fr !important;
+    }
+
+    #player.desktop-player.mobilified #info-grid {
+        grid-template-rows: 1fr !important;
+    }
+
+    #player.desktop-player.mobilified #album-art {
+        height: 48px !important;
+        width: 48px !important;
+    }
+
+    .list-actions {
+        display: flex;
+        align-items: center;
+    }
+
+    #player.desktop-player.mobilified #desktop-player-action {
+        display: block !important;
+        top: 0;
+        position: fixed;
+        left: 0;
+        right: 86px;
+        bottom: 0;
+    }
+
+    #player.desktop-player.mobilified .container {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    #ui, #lyrics-page {
+        top: 0 !important;
+        bottom: 97px !important;
+        left: 0 !important;
+        right: 0 !important;
+        width: 100vw !important;
+        height: calc(100vh - 97px) !important;
+    }
+
+    iframe#lyrics-page {
+        display: block !important;
+        z-index: 100000 !important;
+        top: 96px !important;
+        left: 20px !important;
+        right: 20px !important;
+        width: calc(100vw - 40px) !important;
+        height: calc(100vh - 276px) !important;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 200ms !important;
+    }
+
+    iframe#lyrics-page.mobile-show {
+        transition: opacity 200ms linear 500ms !important;
+        opacity: 1;
+        pointer-events: auto !important;
+    }
+}
+
+@media (min-width: 864px) {
+    #player-mobile-container {
+        display: none !important;
+    }
+}
+
+@media (max-width: 1010px) {
+    #album-info {
+        grid-gap: 0 !important;
+        grid-template-columns: 1fr !important;
+    }
+
+    #album-info-art {
+        display: block !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    #album-info-text {
+        text-align: center;
+        grid-gap: 10px;
+    }
+
+    #filter {
+        display: none;
+    }
+}
+
+@media (max-width: 575px) {
+    #album-info-buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 10px;
+    }
+
+    #album-info-buttons.nolibrary {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-gap: 10px;
+    }
+
+    #album-info-buttons .btn {
+        width: 100% !important;
+    }
+}
+
+.player-badge-icon {
+    width: 24px;
+    margin-right: 5px;
+}
+
+#player #badge-hires .player-badge-desktop {
+    background: white;
+    color: rgb(182, 110, 2);
+    padding-left: 5px;
+    margin: -2px -5px -2px 5px;
+    display: flex;
+    align-items: center;
+    padding-right: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#player #badge-cd .player-badge-desktop {
+    background: white;
+    color: #02b6a7;
+    padding-left: 5px;
+    margin: -2px -5px -2px 5px;
+    display: flex;
+    align-items: center;
+    padding-right: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#player #badge-lossy .player-badge-desktop {
+    background: white;
+    color: #a402b6;
+    padding-left: 5px;
+    margin: -2px -5px -2px 5px;
+    display: flex;
+    align-items: center;
+    padding-right: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.navigation-item img {
+    filter: brightness(0%);
+}
+
+@media (max-height: 64px) {
+    #navigation-left, #navigation-version {
+        display: none !important;
+    }
+
+    #navigation-container {
+        grid-template-columns: repeat(5, 1fr) !important;
+        display: grid !important;
+        margin-top: 2px;
+    }
+
+    #navigation-container #lyrics {
+        display: none !important;
+    }
+
+    .navigation-desktop {
+        display: none;
+    }
+
+    div.navigation-item, div.navigation-item.active {
+        background-color: transparent !important;
+        border-radius: 10px;
+    }
+
+    .navigation-container-inner {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    .navigation-item img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        filter: brightness(0%);
+    }
+
+    .navigation-item.active img {
+        filter: none !important;
+    }
+}
+
+@media (max-width: 823px) {
+    #lyrics-outer, #lyrics-outer * {
+        color: rgba(255, 255, 255, .75);
+    }
+
+    .synced-lyrics-item {
+        font-size: 26px !important;
+    }
+
+    #lyrics-synced-fade {
+        display: none !important;
+    }
+}
+
+@media (min-width: 992px) {
+    .container {
+        max-width: 95%;
+    }
+}
+
+#badges {
+    -webkit-app-region: drag;
+}
\ No newline at end of file