pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hue selector

Browse Source
This commit is contained in:
Fornax
2022-06-14 17:29:23 +02:00
parent e30f35ea36
commit 75f56decbb
2 changed files with 101 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
res/template/appearance.html
View File

@@ -15,83 +15,117 @@
You can change how pixeldrain looks! Your theme choice will You can change how pixeldrain looks! Your theme choice will
be saved in a cookie. be saved in a cookie.
</p> </p>
<div class="indent"> <h2>Theme</h2>
<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label> <input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>) (Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
<br/> <br/>
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant: Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
<br/> <br/>
<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label> <input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
<br/> <br/>
<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label> <input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
<!-- <br/> <br/>
Hue: <input id="hue" type="number" min="0" max="360" placeholder="0"/><br/> --> Hue:
<br/> <br/>
<br/> <br/>
<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label> <input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>) (Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
<br/> <br/>
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant: Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
<br/> <br/>
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label> <input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
<br/> <br/>
<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label> <input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
<br/> <br/>
<!-- <br/> --> <!-- <br/> -->
<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> --> <!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
<br/> <br/>
<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label> <input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
<br/> <br/>
Classic 2022 style, with purple gradients Classic 2022 style, with purple gradients
<br/> <br/>
<br/> <br/>
<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label> <input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
<br/> <br/>
Classic pre-2020 pixeldrain style, dark gray Classic pre-2020 pixeldrain style, dark gray
<br/> <br/>
<br/> <br/>
Other (experimental) themes Other (experimental) themes
<br/> <br/>
<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label> <input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
<br/> <br/>
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label> <input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
<br/> <br/>
<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label> <input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>) (Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
<br/> <br/>
<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label> <input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>) (Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
<br/> <br/>
<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label> <input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
</div>
<h2>Hue</h2>
<p>
Many themes support custom hues. The hue does not change the
contrast of the theme, only the color itself.
</p>
<input type="radio" id="hue_default" name="hue"><label for="hue_default">Default</label><br/>
<input type="radio" id="hue_354" name="hue"><label for="hue_354">Red</label><br/>
<input type="radio" id="hue_14" name="hue"><label for="hue_14">Orange</label><br/>
<input type="radio" id="hue_40" name="hue"><label for="hue_40">Yellow</label><br/>
<input type="radio" id="hue_92" name="hue"><label for="hue_92">Green</label><br/>
<input type="radio" id="hue_311" name="hue"><label for="hue_311">Purple</label><br/>
</section> </section>
<script> <script>
let style = "nord" function get_cookie(cname) {
let hue = -1 let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
let style = get_cookie("style")
let hue = get_cookie("hue")
// Style selector // Style selector
document.getElementsByName("style").forEach(function(elem) { document.getElementsByName("style").forEach(function(elem) {
elem.addEventListener("change", e => { elem.addEventListener("change", e => {
style = e.target.id.substring(6) style = e.target.id.substring(6)
setStyle()
var date = new Date();
date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"
reload_sheet()
}) })
}); });
document.getElementById("hue").addEventListener("change", e => { document.getElementsByName("hue").forEach(function(elem) {
hue = e.target.value elem.addEventListener("change", e => {
setStyle() hue = e.target.id.substring(4)
}) if (hue === "default") {
hue = -1
document.cookie = "hue=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"
}
function setStyle() { var date = new Date();
var date = new Date(); date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"
if (hue >= 0 && hue <= 360) {
document.cookie = "hue="+hue+"; expires=" + date.toUTCString() + "; path=/" document.cookie = "hue="+hue+"; expires=" + date.toUTCString() + "; path=/"
}
reload_sheet()
})
});
function reload_sheet() {
let stylesheet1 = document.getElementById("stylesheet_theme") let stylesheet1 = document.getElementById("stylesheet_theme")
let stylesheet2 = document.getElementById("stylesheet_theme_2") let stylesheet2 = document.getElementById("stylesheet_theme_2")

4
svelte/src/file_viewer/viewers/Audio.svelte
View File

@@ -51,6 +51,8 @@ const toggle_play = () => playing ? player.pause() : player.play()
</script> </script>
<div class="container"> <div class="container">
<h1>{file.name}</h1>
<button on:click={() => dispatch("prev") }> <button on:click={() => dispatch("prev") }>
<i class="icon">skip_previous</i> <i class="icon">skip_previous</i>
</button> </button>
@@ -98,7 +100,7 @@ const toggle_play = () => playing ? player.pause() : player.play()
<style> <style>
.container { .container {
width: 100%; width: 100%;
margin: 50px 0 0 0; margin: 30px 0 0 0;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }