evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added multiple theme selector, compltely removed dark mode checkbox in settings

Browse Source
This commit is contained in:
Roberto Tonino
2020-05-14 18:57:43 +02:00
parent 62b3bb77c2
commit 88b51c09ac
8 changed files with 79 additions and 42221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/css/modules/base/base.css
View File

@@ -8,16 +8,9 @@
html {
height: 100vh;
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-text-inverted: #eeeeee;
--main-scroll: #555;
--panels-background: #222324;
--panels-text: #ffffff;
--panels-scroll: #2a2c2c;
--accent-color: #0a84ff;
--accent-text: #ffffff;
--tag-background: #0062c4;
--tag-text: #ffffff;
--toast-background: #000000dd;
@@ -28,6 +21,16 @@ html {
--explicit-separator: 0.3125em;
}
html[data-theme='light'] {
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-text-inverted: #eeeeee;
--panels-background: #222324;
--panels-text: #ffffff;
--accent-text: #ffffff;
}
html[data-theme='dark'] {
--main-background: #141414;
--secondary-background: #242424;

27
public/css/modules/sidebar.css
View File

@@ -47,11 +47,20 @@
padding: 9px;
}
#sidebar .side_icon::selection {
background: none;
}
.side_icon--theme {
cursor: default;
}
#sidebar .main_tablinks.active .side_icon {
color: var(--accent-color);
}
/* Theme selector */
#theme_selector {
margin-top: 20px;
display: flex;
@@ -74,27 +83,27 @@
visibility: visible;
}
#theme_togglers .theme_toggler {
width: 30px;
height: 30px;
.theme_toggler {
width: 25px;
height: 25px;
border-radius: 1000px;
border: 1px solid var(--accent-color);
border: 1px solid var(--separator);
cursor: pointer;
transition: border 200ms ease-in-out;
}
#theme_togglers .theme_toggler.active {
.theme_toggler--active {
border-width: 3px;
}
#theme_togglers .theme_toggler#light {
.theme_toggler[data-theme-variant='light'] {
background: white;
}
#theme_togglers .theme_toggler#dark {
.theme_toggler[data-theme-variant='dark'] {
background: #141414;
}
#sidebar .theme_selector_icon {
transform: rotate(45deg);
.theme_toggler[data-theme-variant='purple'] {
background: #460ead;
}

18
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="default">
<html lang="en" dir="ltr" data-theme="light">
<head>
<meta charset="utf-8">
@@ -9,8 +9,8 @@
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
<script>
if ('true' === localStorage.getItem('darkMode')) {
document.documentElement.setAttribute('data-theme', 'dark')
if (localStorage.getItem('selectedTheme')) {
document.documentElement.setAttribute('data-theme', localStorage.getItem('selectedTheme'))
}
</script>
</head>
@@ -57,10 +57,11 @@
<span class="main_tablinks_text">Info</span>
</span>
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
<i class="material-icons side_icon theme_selector_icon">brightness_3</i>
<i class="material-icons side_icon side_icon--theme">palette</i>
<div id="theme_togglers">
<div id="dark" class="theme_toggler"></div>
<div id="light" class="theme_toggler active"></div>
<div class="theme_toggler" data-theme-variant="purple"></div>
<div class="theme_toggler" data-theme-variant="dark"></div>
<div class="theme_toggler theme_toggler--active" data-theme-variant="light"></div>
</div>
</span>
</aside>
@@ -162,7 +163,8 @@
class="download_overlay"><i class="material-icons">get_app</i></div>
</div>
<p class="primary-text inline-flex">
<i v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1" class="material-icons explicit_icon">explicit</i>
<i v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
class="material-icons explicit_icon">explicit</i>
{{release.ALB_TITLE}}
</p>
<p class="secondary-text">{{release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks'}}</p>
@@ -1150,4 +1152,4 @@
<script src="/public/js/bundle.js"></script>
</html>
</html>

42157
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js.map
View File

File diff suppressed because one or more lines are too long