155 lines
2.2 KiB
CSS
155 lines
2.2 KiB
CSS
html {
|
|
overflow:hidden;
|
|
--bg-color:white;
|
|
--text-color:black;
|
|
--link-color:#06c;
|
|
--footer-color:#6c6c6c;
|
|
--footer-text-color:white;
|
|
--stream-btn-bg:black;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
--bg-color:black;
|
|
--text-color:white;
|
|
--link-color:#a8d3ff;
|
|
--footer-color:#0a0a0a;
|
|
--footer-text-color:white;
|
|
--stream-btn-bg:#262626;
|
|
}
|
|
}
|
|
|
|
html.dark {
|
|
--bg-color:black !important;
|
|
--text-color:white !important;
|
|
--link-color:#a8d3ff !important;
|
|
--footer-color:#0a0a0a !important;
|
|
--footer-text-color:white !important;
|
|
--stream-btn-bg:#262626 !important;
|
|
}
|
|
|
|
html.lite {
|
|
--bg-color:white !important;
|
|
--text-color:black !important;
|
|
--link-color:#06c !important;
|
|
--footer-color:#6c6c6c !important;
|
|
--footer-text-color:white !important;
|
|
--stream-btn-bg:black !important;
|
|
}
|
|
|
|
html, body {
|
|
height:100%;
|
|
width:100%;
|
|
margin:0;
|
|
background:var(--bg-color);
|
|
color:var(--text-color);
|
|
}
|
|
|
|
a {
|
|
color:var(--link-color);
|
|
}
|
|
|
|
h3, .track {
|
|
font-weight:400 !important;
|
|
}
|
|
|
|
.cc, .etc {
|
|
margin:0;
|
|
}
|
|
|
|
.cc {
|
|
height:100vh;
|
|
width:100vh !important;
|
|
width:auto;
|
|
float:left;
|
|
background:url("/assets/record.svg");
|
|
}
|
|
|
|
.cover {
|
|
width:100%;
|
|
height:100%;
|
|
object-fit:cover;
|
|
}
|
|
|
|
.tl,
|
|
.bl
|
|
{
|
|
width:calc(100% - 20px) !important;
|
|
}
|
|
|
|
|
|
.tl {
|
|
height:35px;
|
|
margin-bottom:3px;
|
|
}
|
|
|
|
.track {
|
|
margin-left:10px;
|
|
margin-right:10px;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.bl {
|
|
margin-left:10px;
|
|
}
|
|
|
|
.etc {
|
|
float:none;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.etc, .timestamp {
|
|
font-family: "Lexend", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.track {
|
|
margin:10px;
|
|
width:100%;
|
|
}
|
|
|
|
.cover::after {
|
|
clear:both;
|
|
content:" ";
|
|
display:table;
|
|
}
|
|
|
|
.br {
|
|
position:fixed;
|
|
right:0;
|
|
bottom:0;
|
|
height:25px;
|
|
background:var(--footer-color);
|
|
color:var(--footer-text-color);
|
|
border-top-left-radius:4px;
|
|
text-align:right;
|
|
padding:4px;
|
|
}
|
|
|
|
.br a {
|
|
color:white;
|
|
text-decoration:none;
|
|
padding-left:2.5px;
|
|
}
|
|
|
|
.sl button {
|
|
background:var(--stream-btn-bg);
|
|
border:0;
|
|
cursor:pointer;
|
|
border-radius:5px;
|
|
color:white;
|
|
}
|
|
|
|
.sl button:not(.icon) {
|
|
font-family:"Lexend", Helvetica, Arial;
|
|
}
|
|
|
|
.sl button .icon {
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.timestamp {
|
|
padding-left:3px;
|
|
padding-top:3px;
|
|
} |