summaryrefslogtreecommitdiff
path: root/assets/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/styles.css')
-rw-r--r--assets/styles.css432
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
© Floofi Systems, Some rights reserved. Powered by cgit.