Split jukebox style sheet

2025-10-17 17:56:06 -05:00
parent c5791ef736
commit 7f266c92b8
2 changed files with 100 additions and 97 deletions
--- a/stylesheets/jukebox.css
+++ b/stylesheets/jukebox.css
@ -0,0 +1,98 @@
+body{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: rgb(52, 52, 146);
+}
+.jukeBox{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-style: solid;
+    padding: 5px;
+    width: 300px;
+    border-radius: 15px;
+    background-color: black;
+    border-color: cyan;
+}
+
+@media (min-width: 800px){
+    .jukeBox{
+        width: 500px;
+    }
+}
+.selected{
+    background-color: black;
+    color: white;
+}
+.songSelector{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height:100%;
+    width:100%;
+}
+.songList{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-style: solid;
+    border-width: 1px;
+    width: 100%;
+    height: 197px;
+    overflow: scroll;
+    background-color: lightblue;
+    border-top-left-radius: 15px;
+    
+}
+.songChanger{
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+}
+.jukeboxButton{
+    border: none;
+    padding-top:114%;
+    padding-bottom: 102%;
+    background-color: rgb(182, 155, 231);
+}
+#prevSong{
+    border-top-right-radius: 15px;
+}
+.jukeboxButton:hover{
+    background-color: lightcoral;
+}
+.jukeboxButton:active{
+    background-color: red;
+}
+.song{
+    margin: 5px;
+    width: 100%;
+    text-align: center;
+    height: 30px;
+
+}
+audio{
+    width:100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.playing{
+    color: white;
+    display: flex;
+    justify-content: left;
+    flex-direction: row;
+    height: 30px;
+    align-items: center;
+}
+#currentlyPlaying{
+    color: pink;
+}
+audio{
+    background-color: black;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+}