From 7f266c92b847168c592b00ae229d53516b00b9a6 Mon Sep 17 00:00:00 2001 From: TechRunner Date: Fri, 17 Oct 2025 17:56:06 -0500 Subject: [PATCH] Split jukebox style sheet --- pages/Jukebox.html | 99 +---------------------------------------- stylesheets/jukebox.css | 98 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+), 97 deletions(-) create mode 100644 stylesheets/jukebox.css diff --git a/pages/Jukebox.html b/pages/Jukebox.html index eb0ac93..08641c7 100644 --- a/pages/Jukebox.html +++ b/pages/Jukebox.html @@ -8,106 +8,11 @@ + + Jukebox diff --git a/stylesheets/jukebox.css b/stylesheets/jukebox.css new file mode 100644 index 0000000..f153f2a --- /dev/null +++ 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; +} \ No newline at end of file