80 lines
1.5 KiB
CSS
80 lines
1.5 KiB
CSS
/* hello */
|
|
html, body {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
background-color: oklch(88.2% 0.059 254.128deg);
|
|
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;
|
|
}
|
|
ul.track-list li {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr repeat(3, 4fr);
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
}
|
|
ul.track-list li > div:not(.display-none):has(img) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
ul.track-list li > div:not(.display-none):has(img) img {
|
|
height: 3em;
|
|
}
|
|
ul.track-list li:nth-of-type(odd) {
|
|
background-color: oklch(92.8% 0.006 264.531deg);
|
|
}
|
|
ul.track-list li:has(> input[type=checkbox]:checked) {
|
|
background-color: oklch(87.1% 0.15 154.449deg);
|
|
}
|
|
ul.track-list li:has(> input[type=checkbox]:checked):nth-of-type(odd) {
|
|
background-color: oklch(92.5% 0.084 155.995deg);
|
|
}
|
|
|
|
.loader {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid oklch(37.3% 0.034 259.733deg);
|
|
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: oklch(70.7% 0.022 261.325deg);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
/*# sourceMappingURL=main.css.map */
|