4 files changed, 106 insertions, 2 deletions
diff --git a/css/dark.css b/css/dark.css
new file mode 100644
index 0000000..5cd9a0f
--- /dev/null
+++ b/css/dark.css
@@ -0,0 +1,54 @@
+@media (prefers-color-scheme: dark) {
+    body, html {
+        background: rgb(18, 18, 18);
+        color: white;
+    }
+
+    #frame-viewer-header {
+        background: rgba(28, 28, 28, 1) !important;
+    }
+
+    #frame-viewer-header-play {
+        color: black;
+    }
+
+    #frame-header, #navigation-outer, #player {
+        border-color: rgba(255, 255, 255, .25);
+    }
+
+    .frame-library-item, .frame-library-item-inner, .frame-library-item-set-song-cover, .frame-library-item-set-song-title, #frame-viewer-set, .navigation-item-icon, .player-button-icon, #frame-viewer-header-play {
+        filter: invert(1);
+    }
+
+    #player-seekbar {
+        background: #ffffff;
+    }
+
+    #player-seekbar::-webkit-slider-thumb {
+        background: #aaaaaa;
+    }
+
+    #player-seekbar::-moz-range-thumb {
+        background: #aaaaaa;
+    }
+
+    #player-seekbar::-webkit-slider-thumb:hover {
+        background: #aaaaaabf;
+    }
+
+    #player-seekbar::-moz-range-thumb:hover {
+        background: #aaaaaabf;
+    }
+
+    #frame-header, #navigation-outer, #player {
+        background: rgb(32, 32, 32);
+    }
+
+    #frame-header:hover, #navigation-outer:hover, #player:hover {
+        background: rgb(48, 48, 48);
+    }
+
+    .frame-about-link, .frame-home-link {
+        filter: contrast(0.3) brightness(2);
+    }
+}
+\ No newline at end of file
diff --git a/css/frame-settings.css b/css/frame-settings.css
index d004710..1125235 100644
--- a/css/frame-settings.css
+++ b/css/frame-settings.css
@@ -8,7 +8,7 @@
     padding-top: 5px;
 }
 
-#frame-settings-quality-notImplemented {
+#frame-settings-unsupported-warning {
     color: #9f0000;
     font-size: 12px;
     padding-top: 5px;
diff --git a/css/navigation.css b/css/navigation.css
index 2be100e..3b9ac26 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -53,4 +53,37 @@
 
 #navigation-about:active #navigation-about-icon {
     opacity: .5;
+}
+
+#outofsupport {
+    white-space: nowrap;
+    position: fixed;
+    z-index: 99;
+    background: #cdb100;
+    font-size: 14px;
+    color: black;
+    left: 0;
+    right: 0;
+    text-align: center;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+@media (max-width: 740px) {
+    #outofsupport {
+        font-size: 12px !important;
+    }
+}
+
+@media (max-width: 637px) {
+    #oos-desktop {
+        display: none;
+    }
+}
+
+#navigation-outer, #frame {
+    top: 24px;
 }
 \ No newline at end of file
diff --git a/css/player.css b/css/player.css
index 08da44f..8ff1caf 100644
--- a/css/player.css
+++ b/css/player.css
@@ -1,6 +1,5 @@
 #player {
     position: fixed;
-    bottom: 0;
     left: 0;
     right: 0;
     height: 56px;
@@ -91,4 +90,22 @@
 
 .player-button-disabled .player-button-icon {
     opacity: .25 !important;
+}
+
+body #player {
+    bottom: -57px;
+    transition: bottom 200ms, background-color 200ms;
+}
+
+body #navigation-outer, body #frame {
+    bottom: 0;
+    transition: bottom 200ms, background-color 200ms;
+}
+
+body.playing #player {
+    bottom: 0;
+}
+
+body.playing #navigation-outer, body.playing #frame {
+    bottom: 57px;
 }
 \ No newline at end of file