Kristy Fournier
dcfe7115fa
Playlist Items look like not garbage now I gave them a giant margin and forgot about it. should be good now the item holders have padding instead for the edges
203 lines
No EOL
3.2 KiB
CSS
203 lines
No EOL
3.2 KiB
CSS
/* testing */
|
|
|
|
.dark-mode {
|
|
background-color: #333333;
|
|
color:#ffffff;
|
|
/* -webkit-filter:invert(100%);
|
|
filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); */
|
|
}
|
|
|
|
/* Things that are always visible */
|
|
|
|
body {
|
|
background-color: #EEEEEE;
|
|
}
|
|
* {
|
|
font-family: 'arial';
|
|
}
|
|
.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;
|
|
background-color:inherit;
|
|
}
|
|
|
|
.alert {
|
|
position: fixed;
|
|
bottom: 10%;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 1000;
|
|
background-color: #EEEEEEd6;
|
|
}
|
|
|
|
.settings-button {
|
|
width: 15%;
|
|
max-width: 90px;
|
|
position:fixed;
|
|
top:0;
|
|
right:0;
|
|
margin: 3px;
|
|
background:inherit;
|
|
/* This is a circle background for the circle settings button
|
|
So it can display over other text and such */
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.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: #DDDDDD;
|
|
}
|
|
|
|
/* Songlist stuff */
|
|
.songlist {
|
|
width: 80%;
|
|
min-width: 300px;
|
|
margin:auto auto 150px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.songlist > .item{
|
|
border: 1px solid #333333;
|
|
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;
|
|
}
|
|
|
|
.searchbox-holder {
|
|
width: 20%;
|
|
margin: 20px auto 0;
|
|
min-width: 250px;
|
|
|
|
}
|
|
.searchbox {
|
|
width: 65%;
|
|
margin: 1px;
|
|
}
|
|
.go-search {
|
|
width: 20%;
|
|
min-width: 50px;
|
|
}
|
|
/* playlist mode stuff */
|
|
|
|
.playlist {
|
|
width: 60%;
|
|
min-width: 300px;
|
|
margin:auto auto 150px;
|
|
}
|
|
|
|
.playlist > .item{
|
|
border: 1px solid #333333;
|
|
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: inherit;
|
|
}
|
|
|
|
.settings > .item:not(:last-child) {
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #333333;
|
|
}
|
|
|
|
.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: 8px;
|
|
font-style: italic;
|
|
text-align: left;
|
|
width: 80%;
|
|
}
|
|
|
|
#volumerange {
|
|
background-color: #4477AA;
|
|
color: #4477ff;
|
|
} |