light theme support
This commit is contained in:
parent
6b9c6c3261
commit
1513b34da0
|
@ -34,6 +34,23 @@
|
||||||
function formatTime(s) {
|
function formatTime(s) {
|
||||||
return Math.floor(s / 60).toString().padStart(2, '0') + ':' + (s % 60).toString().padStart(2, '0');
|
return Math.floor(s / 60).toString().padStart(2, '0') + ':' + (s % 60).toString().padStart(2, '0');
|
||||||
}
|
}
|
||||||
|
function setTheme(theme) {
|
||||||
|
Array.from(document.styleSheets).map(e => {
|
||||||
|
try {
|
||||||
|
return Array.from(e.cssRules)
|
||||||
|
} catch (e) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}).flat().map(e => {
|
||||||
|
if (e.constructor != CSSMediaRule) return;
|
||||||
|
if (e.originalConditionText) e.conditionText = e.originalConditionText;
|
||||||
|
else e.originalConditionText = e.conditionText
|
||||||
|
if (theme == "system") return
|
||||||
|
let match = e.conditionText.match(/prefers-color-scheme:\s*(light|dark)/i)
|
||||||
|
if (!match) return;
|
||||||
|
e.conditionText = e.conditionText.replace(match[0], (match[1].toLowerCase() == theme ? 'min' : 'max') + '-width: 0')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const search = document.getElementById('album-search');
|
const search = document.getElementById('album-search');
|
||||||
search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]);
|
search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]);
|
||||||
|
@ -87,9 +104,166 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
|
background-color: #0a0a0f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
background-color: #112;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0px 0px 15px #000;
|
||||||
|
border-bottom: 0rem solid rgb(131, 131, 243);
|
||||||
|
}
|
||||||
|
input:focus, input:hover {
|
||||||
|
border-bottom: 0.25rem solid rgb(131, 131, 243);
|
||||||
|
background-color: #161626;
|
||||||
|
}
|
||||||
|
.album {
|
||||||
|
background-color: #161627;
|
||||||
|
box-shadow: 0px 0px 12px #000;
|
||||||
|
border-left: 0rem solid rgb(131, 131, 243);
|
||||||
|
}
|
||||||
|
.album:hover {
|
||||||
|
border-left: 0.25rem solid rgb(131, 131, 243);
|
||||||
|
background-color: #181829;
|
||||||
|
}
|
||||||
|
.small {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.album-image {
|
||||||
|
border: 0px solid rgb(131, 131, 243);
|
||||||
|
box-shadow: 0px 0px 15px #000;
|
||||||
|
}
|
||||||
|
.album:hover .album-image {
|
||||||
|
border: 2px solid rgb(131, 131, 243);
|
||||||
|
box-shadow: 0px 0px 30px #000;
|
||||||
|
}
|
||||||
|
.album-image-wrapper {
|
||||||
|
border: 2px solid rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
.album:hover .album-image-wrapper {
|
||||||
|
border: 0px solid rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
color:rgb(131, 131, 243);
|
||||||
|
}
|
||||||
|
.link:hover {
|
||||||
|
color: rgb(151, 151, 263);
|
||||||
|
}
|
||||||
|
.album-download {
|
||||||
|
filter: invert(100%) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
.album-download:hover {
|
||||||
|
filter: invert(100%) sepia(100%) saturate(800%) brightness(70%) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
.lds-ring div {
|
||||||
|
border: 8px solid #fff;
|
||||||
|
border-color: #fff transparent transparent transparent;
|
||||||
|
}
|
||||||
|
#progress-bar {
|
||||||
|
background-color: #161627;
|
||||||
|
}
|
||||||
|
#progress-bar-inner {
|
||||||
|
background-color: rgb(131, 131, 243);
|
||||||
|
}
|
||||||
|
.album-bottom {
|
||||||
|
background-color: #112;
|
||||||
|
border-left: 0rem solid rgb(131, 131, 243);
|
||||||
|
}
|
||||||
|
.album:hover .album-bottom {
|
||||||
|
border-left: 0.25rem solid rgb(131, 131, 243);
|
||||||
|
}
|
||||||
|
.track {
|
||||||
|
border-bottom: 3px solid #0a0a0f;
|
||||||
|
border-left: 0rem solid rgb(131, 131, 243);
|
||||||
|
}
|
||||||
|
.track:hover {
|
||||||
|
background-color: #161627;
|
||||||
|
border-left: 0.25rem solid rgb(131, 131, 243);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
body {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #1e1e2d;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
background-color: #fafafa;
|
||||||
|
color: #1e1e2d;
|
||||||
|
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
border-bottom: 0rem solid #ea74ac;
|
||||||
|
}
|
||||||
|
input:focus, input:hover {
|
||||||
|
border-bottom: 0.25rem solid #ea74ac;
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
}
|
||||||
|
.album {
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
|
||||||
|
border-left: 0rem solid #ea74ac;
|
||||||
|
}
|
||||||
|
.album:hover {
|
||||||
|
border-left: 0.25rem solid #ea74ac;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
.small {
|
||||||
|
color: #c8c8d2;
|
||||||
|
}
|
||||||
|
.album-image {
|
||||||
|
border: 0px solid #ea74ac;
|
||||||
|
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.album:hover .album-image {
|
||||||
|
border: 2px solid #ea74ac;
|
||||||
|
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.album-image-wrapper {
|
||||||
|
border: 2px solid rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
.album:hover .album-image-wrapper {
|
||||||
|
border: 0px solid rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
color:#ea74ac;
|
||||||
|
}
|
||||||
|
.link:hover {
|
||||||
|
color: #f484b6;
|
||||||
|
}
|
||||||
|
.album-download {
|
||||||
|
filter: invert(0%) hue-rotate(276deg);
|
||||||
|
}
|
||||||
|
.album-download:hover {
|
||||||
|
filter: invert(100%) sepia(100%) saturate(2000%) brightness(70%) hue-rotate(276deg);
|
||||||
|
}
|
||||||
|
.lds-ring div {
|
||||||
|
border: 8px solid #1e1e2d;
|
||||||
|
border-color: #1e1e2d transparent transparent transparent;
|
||||||
|
}
|
||||||
|
#progress-bar {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
#progress-bar-inner {
|
||||||
|
background-color: #ea74ac;
|
||||||
|
}
|
||||||
|
.album-bottom {
|
||||||
|
background-color: #fafafa;
|
||||||
|
border-left: 0rem solid #ea74ac;
|
||||||
|
}
|
||||||
|
.album:hover .album-bottom {
|
||||||
|
border-left: 0.25rem solid #ea74ac;
|
||||||
|
}
|
||||||
|
.track {
|
||||||
|
border-bottom: 3px solid #f0f0f0;
|
||||||
|
border-left: 0rem solid #ea74ac;
|
||||||
|
}
|
||||||
|
.track:hover {
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
border-left: 0.25rem solid #ea74ac;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #0a0a0f;
|
|
||||||
color: #fff;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -107,37 +281,20 @@
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
font-size: x-large;
|
font-size: x-large;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #112;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
box-shadow: 0px 0px 15px #000;
|
|
||||||
border-bottom: 0rem solid rgb(131, 131, 243);
|
|
||||||
transition: 0.1s border-bottom ease-out, 0.1s background-color ease-in-out;
|
transition: 0.1s border-bottom ease-out, 0.1s background-color ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus, input:hover {
|
|
||||||
border-bottom: 0.25rem solid rgb(131, 131, 243);
|
|
||||||
background-color: #161626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.album {
|
.album {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
background-color: #161627;
|
|
||||||
font-size: large;
|
font-size: large;
|
||||||
border-radius: 10px 10px 0px 0px;
|
border-radius: 10px 10px 0px 0px;
|
||||||
box-shadow: 0px 0px 12px #000;
|
|
||||||
transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out;
|
transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out;
|
||||||
border-left: 0rem solid rgb(131, 131, 243);
|
|
||||||
height: 96px;
|
height: 96px;
|
||||||
}
|
}
|
||||||
.album:hover {
|
|
||||||
border-left: 0.25rem solid rgb(131, 131, 243);
|
|
||||||
background-color: #181829;
|
|
||||||
}
|
|
||||||
.small {
|
.small {
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
color: #888;
|
|
||||||
}
|
}
|
||||||
.big {
|
.big {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -156,18 +313,11 @@
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 0px solid rgb(131, 131, 243);
|
|
||||||
transition: 0.1s border ease-out, 0.1s box-shadow ease-out;
|
transition: 0.1s border ease-out, 0.1s box-shadow ease-out;
|
||||||
margin: none;
|
margin: none;
|
||||||
padding: none;
|
padding: none;
|
||||||
box-shadow: 0px 0px 0px #000;
|
|
||||||
}
|
|
||||||
.album:hover .album-image {
|
|
||||||
border: 2px solid rgb(131, 131, 243);
|
|
||||||
box-shadow: 0px 0px 30px #000;
|
|
||||||
}
|
}
|
||||||
.album-image-wrapper {
|
.album-image-wrapper {
|
||||||
border: 2px solid rgba(0, 0, 0, 0);
|
|
||||||
transition: 0.1s border ease-out;
|
transition: 0.1s border ease-out;
|
||||||
float: right;
|
float: right;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
@ -175,17 +325,10 @@
|
||||||
padding: none;
|
padding: none;
|
||||||
margin: none;
|
margin: none;
|
||||||
}
|
}
|
||||||
.album:hover .album-image-wrapper {
|
|
||||||
border: 0px solid rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
.link {
|
.link {
|
||||||
color:rgb(131, 131, 243);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.1s color ease-out;
|
transition: 0.1s color ease-out;
|
||||||
}
|
}
|
||||||
.link:hover {
|
|
||||||
color:rgb(151, 151, 263);
|
|
||||||
}
|
|
||||||
.album-download {
|
.album-download {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
@ -193,10 +336,6 @@
|
||||||
height: 32px;
|
height: 32px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.1s filter ease-out;
|
transition: 0.1s filter ease-out;
|
||||||
filter: invert(100%);
|
|
||||||
}
|
|
||||||
.album-download:hover {
|
|
||||||
filter: invert(100%) sepia(100%) saturate(800%) brightness(70%) hue-rotate(180deg);
|
|
||||||
}
|
}
|
||||||
.lds-ring {
|
.lds-ring {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -211,10 +350,8 @@
|
||||||
width: 64px;
|
width: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
border: 8px solid #fed;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||||
border-color: #fed transparent transparent transparent;
|
|
||||||
}
|
}
|
||||||
.lds-ring div:nth-child(1) {
|
.lds-ring div:nth-child(1) {
|
||||||
animation-delay: -0.45s;
|
animation-delay: -0.45s;
|
||||||
|
@ -235,13 +372,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#progress-bar {
|
#progress-bar {
|
||||||
background-color: #161627;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
#progress-bar-inner {
|
#progress-bar-inner {
|
||||||
background-color: rgb(131, 131, 243);
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -249,34 +384,23 @@
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
background-color: #112;
|
|
||||||
border-radius: 0px 0px 10px 10px;
|
border-radius: 0px 0px 10px 10px;
|
||||||
transition: 0.1s border-left ease-out;
|
transition: 0.1s border-left ease-out;
|
||||||
border-left: 0rem solid rgb(131, 131, 243);
|
|
||||||
}
|
|
||||||
.album:hover .album-bottom {
|
|
||||||
border-left: 0.25rem solid rgb(131, 131, 243);
|
|
||||||
}
|
}
|
||||||
.track {
|
.track {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
margin: none;
|
margin: none;
|
||||||
border-bottom: 3px solid #0a0a0f;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
transition: 0.05s background-color ease-out, 0.1s border-left ease-out;
|
transition: 0.05s background-color ease-out, 0.1s border-left ease-out;
|
||||||
border-left: 0rem solid rgb(131, 131, 243);
|
|
||||||
}
|
}
|
||||||
.track:nth-last-child(1) {
|
.track:nth-last-child(1) {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 0px 0px 15px 15px;
|
border-radius: 0px 0px 15px 15px;
|
||||||
}
|
}
|
||||||
.track:hover {
|
|
||||||
background-color: #161627;
|
|
||||||
border-left: 0.25rem solid rgb(131, 131, 243);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
Loading…
Reference in New Issue