86 lines
1.5 KiB
SCSS
86 lines
1.5 KiB
SCSS
/* hello */
|
|
@import "_colours";
|
|
|
|
html, body {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
background-color: $blue-200;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
main {
|
|
width: 60%; /* TODO: Responsivity */
|
|
margin: 1em auto;
|
|
background-color: white;
|
|
padding: 2em;
|
|
border-radius: 0.5em;
|
|
}
|
|
|
|
.display-none {
|
|
display: none;
|
|
}
|
|
|
|
ul.track-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
li {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr repeat(3, 4fr);
|
|
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
|
|
> div:not(.display-none):has(img) {
|
|
img {
|
|
height: 3em;
|
|
}
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
&:nth-of-type(odd) {
|
|
background-color: $gray-200;
|
|
}
|
|
|
|
&:has(>input[type=checkbox]:checked) {
|
|
background-color: $green-300;
|
|
&:nth-of-type(odd) {
|
|
background-color: $green-200;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.loader {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid $gray-700;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
animation: rotation 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
dialog {
|
|
border: none;
|
|
border-radius: 1em;
|
|
padding: 1em 4em;
|
|
}
|
|
|
|
::backdrop {
|
|
background-color: $gray-400;
|
|
opacity: 0.75;
|
|
}
|