Moved Static Client

Client/styles.css

@@ -1,246 +0,0 @@
-/* dark mode stuff */
-
-.dark-mode {
-    --bg-main: #333333;
-    --bg-item: #3f3f3f;
-    --bg-inputs: #2a2a2a;
-    --text-color: #ffffff; 
-    /* -webkit-filter:invert(100%);
-    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); */
-}
-
-.dark-mode .control-button {
-    filter: invert(100%) brightness(0.9)
-}
-
-:root {
-    --bg-main: #eeeeee;
-    --bg-item: #dddddd;
-    --bg-inputs: #ffffff;
-    --text-color: #000000;
-    color: var(--text-color);
-}
-
-/* In hindsight i should have just used p's with classes to decide size, but whatever
-Should probably fix that at some point, this is like the least accessible site ever */
-h1,h2,h3,h4,h5,p,input,button,label {
-    color: var(--text-color);
-}
-
-input, button {
-    background-color: var(--bg-inputs);
-}
-
-/* Things that are always visible */
-
-
-body {
-    background-color: var(--bg-main);
-}
-
-* {
-    font-family: 'Arial',sans-serif;
-}
-
-.italic {
-    font-style: italic;
-}
-h4 {
-    font-weight: 100;
-}
-.clear{
-    clear: both;
-    display: block;  
-    content: "";
-    width: 100%;  
-  }
-.controls {
-    max-width: 550px;
-    min-width: 300px;
-    position: fixed;
-    width:100%;
-    left: 50%;
-    bottom: 0;
-    margin: 0 auto;
-    transform: translateX(-50%);
-    background-color:var(--bg-main);
-}
-
-.alert {
-    position: fixed;
-    bottom: 10%;
-    width: 100%;
-    text-align: center;
-    z-index: 1000;
-    background-color: color-mix(in srgb, var(--bg-main), transparent 16%);
-}
-
-.settings-button-holder {
-    width:15%;
-    max-width: 90px;
-    position:fixed;
-    top:0;
-    right:0;
-    margin: 3px;
-    background-color: var(--bg-main);
-    /* This is a circle background for the circle settings button
-    So it can display over other text and such */
-    border-radius: 50%;
-}
-
-.settings-button {
-    width: 100%;
-    
-    
-}
-
-.controls > .control-button{
-    width:20%;
-    max-width: 110px;
-    margin: auto 2%;
-}
-
-.intro {
-    width: 300px;
-    margin: auto;
-    text-align: center;
-}
-
-.item {
-    /* Only actually applies to playlist and search because settings item has "inherit" bg-colour */
-    background-color: var(--bg-item);
-}
-
-/* Songlist stuff */
-.songlist {
-    width: 80%;
-    min-width: 400px;
-    margin:auto auto 150px;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.songlist > .item{
-    border: 1px solid var(--bg-item);
-    width:30%;
-    max-width: 150px;
-    margin: 5px auto;
-    min-width: 75px;
-}
-
-.songlist > .item > img{
-    max-width:200px;
-    width:100%
-}
-
-.songlist > .item > h3, .songlist > .item > h4{
-    margin-left: 2px;
-    margin-right: 2px;
-    margin: 5px;
-    word-wrap: break-word;
-}
-
-.searchbox-holder {
-    width: 20%;
-    margin: 20px auto 0;
-    min-width: 250px;
-
-}
-.searchbox {
-    width: 65%;
-    margin: 1px;
-    margin-bottom: 16px;
-}
-.go-search {
-    width: 20%;
-    min-width: 50px;
-}
-
-.lossless-tag {
-    width:16px;
-    padding: 1px;
-    margin-left: auto;
-}
-/* playlist mode stuff */
-
-.playlist {
-    width: 60%;
-    min-width: 300px;
-    margin:auto auto 150px;
-}
-
-.playlist > .item{
-    border: 1px solid var(--bg-item);
-    display: flex;
-    max-width: 50em;
-    min-width: 200px;
-    margin: 5px auto;
-    height: auto;
-}
-
-.playlist > .item > .text {
-    padding: 3px;
-    display: inline-block;
-    margin: 0px 3px;
-}
-
-.playlist > .item > img {
-    display: inline-flex;
-    max-width: 100px;
-    max-height: 100px;
-    width:30%;
-    margin: 0;
-    aspect-ratio: 1/1;
-}
-
-.playlist > .item > .text > * {
-    margin:2px;
-}
-
-/* settings stuff */
-
-.settings {
-    width: 95%;
-    margin: auto auto 150px;
-    max-width: 600px;
-}
-
-.settings > .item {
-    margin-left: 10%;
-    width:fit-content;
-    background-color: var(--bg-main);
-}
-
-.settings > .item:not(:last-child) {
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--bg-item);
-}
-
-.settings > .item.no-line {
-    border-bottom: 0px none #00000000;
-    padding-bottom: 0px;
-}
-
-.settings > .lastSet1 {
-    border-bottom: 0;
-}
-
-.settings > .item > h2 {
-    margin-bottom: 4px;
-}
-
-.settings > .item > p {
-    margin-top: 0px
-}
-
-.versionNumber {
-    font-size: 11px;
-    font-style: italic;
-    text-align: left;
-    width: 80%;
-}
-
-#volumerange {
-    background-color: #4477AA;
-    color: #4477ff;
-}