From 124b19dcfeff14dd883cf84a8a126543f9bfe06b Mon Sep 17 00:00:00 2001
From: Lorenz Nimmervoll <admin@nimmervoll.work>
Date: Sat, 16 Jan 2021 23:27:39 +0100
Subject: [PATCH] reworked colors and borders, reworked slider
---
data/css/dark-mode.css | 22 ++++++--
data/css/styles.css | 112 +++++++++++++++++------------------------
data/index.htm | 75 ++++++++++++++++-----------
data/js/app.js | 4 +-
4 files changed, 112 insertions(+), 101 deletions(-)
diff --git a/data/css/dark-mode.css b/data/css/dark-mode.css
index 2fdcecb..347eb22 100644
--- a/data/css/dark-mode.css
+++ b/data/css/dark-mode.css
@@ -1,10 +1,26 @@
+:root {
+
+ --bg: #202123;
+ --grey: #2b2c2e;
+ --lgrey: #313234;
+ --ltext: #8E8E8F;
+ --text: #FAFAFA;
+ --icons: #353638;
+ --highlights: #1A1B1D;
+ --accent: #738cfe;
+}
+
+[data-theme="dark"] .navbar-default {
+ border: 0px !important;
+}
+
[data-theme="dark"] {
- background-color: #111 !important;
+ background-color: var(--bg);
color: #aaa;
}
[data-theme="dark"] .bg-light {
- background-color: #333 !important;
+ background-color: var(--grey) !important;
}
[data-theme="dark"] .bg-white {
@@ -30,7 +46,7 @@
}
[data-theme="dark"] .form-control {
- background-color: #333 !important;
+ background-color: var(--bg) !important;
border-color:#444 !important;
color: #fff;
}
diff --git a/data/css/styles.css b/data/css/styles.css
index 207e0c5..d9e3cfc 100644
--- a/data/css/styles.css
+++ b/data/css/styles.css
@@ -1,92 +1,70 @@
+[data-theme="dark"] :root {
+ --bg: #202123;
+ --grey: #2b2c2e;
+ --lgrey: #313234;
+ --ltext: #8E8E8F;
+ --text: #FAFAFA;
+ --icons: #353638;
+ --highlights: #1A1B1D;
+ --accent: #738cfe;
+}
+
+.navbar-default .navbar-collapse {
+ border: none !important;
+}
+
+
+
body { padding-bottom: 70px; }
+.slider-label { padding-left: 0px; text-align: left !important; }
input[type=range] {
+ margin-top: -6px !important;
+ padding: 0px;
-webkit-appearance: none;
width: 100%;
-
background-color:transparent !important;
+ border: none;
+ overflow: hidden;
}
input[type=range]:focus {
outline: none;
+ box-shadow: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
- height: 8.4px;
+ height: 6px;
cursor: pointer;
- animate: 0.2s;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- background: #3071a9;
+ background: var(--accent);
border-radius: 1.3px;
- border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
+ height: 26px;
+ width: 26px;
+ border-radius: 13px;
+ border: 3px solid #fff;
+ background: var(--accent);
cursor: pointer;
-webkit-appearance: none;
- margin-top: -14px;
-}
-input[type=range]:focus::-webkit-slider-runnable-track {
- background: #367ebd;
+ margin-top: -10px;
}
-input[type=range]::-moz-range-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- animate: 0.2s;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- background: #3071a9;
- border-radius: 1.3px;
- border: 0.2px solid #010101;
-}
-input[type=range]::-moz-range-thumb {
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
- cursor: pointer;
-}
-input[type=range]::-ms-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- animate: 0.2s;
- background: transparent;
- border-color: transparent;
- border-width: 16px 0;
- color: transparent;
-}
-input[type=range]::-ms-fill-lower {
- background: #2a6495;
- border: 0.2px solid #010101;
- border-radius: 2.6px;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+
+[data-theme="dark"] input[type=range]::-webkit-slider-thumb {
+ border-color: var(--bg) !important;
}
-input[type=range]::-ms-fill-upper {
- background: #3071a9;
- border: 0.2px solid #010101;
- border-radius: 2.6px;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+
+
+input[type="range"]::-moz-range-progress {
+ background-color: #43e5f7;
}
-input[type=range]::-ms-thumb {
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
- cursor: pointer;
+input[type="range"]::-moz-range-track {
+ background-color: #9a905d;
}
-input[type=range]:focus::-ms-fill-lower {
- background: #3071a9;
+/* IE*/
+input[type="range"]::-ms-fill-lower {
+ background-color: #43e5f7;
}
-input[type=range]:focus::-ms-fill-upper {
- background: #367ebd;
+input[type="range"]::-ms-fill-upper {
+ background-color: #9a905d;
}
\ No newline at end of file
diff --git a/data/index.htm b/data/index.htm
index f9f526b..969bb08 100644
--- a/data/index.htm
+++ b/data/index.htm
@@ -21,22 +21,27 @@
<nav class="navbar navbar-default navbar-static-top bg-light" id="top" role="banner">
<div class="container">
<div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"
+ aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank"><img src="images/atom196.png" style="width: 22px; height: 22px;" /></a>
- <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank" style="font-size: 16px;">Evil Genius Labs</a>
+ <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank"><img src="images/atom196.png"
+ style="width: 22px; height: 22px;" /></a>
+ <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank" style="font-size: 16px;">Evil
+ Genius Labs</a>
<div class="navbar-brand" style="font-size: 16px;">&</div>
- <a class="navbar-brand" href="https://www.thingiverse.com/Surrbradl08/designs" target="_blank"><img src="images/surr.png" style="width: 22px; height: 22px;" /></a>
- <a class="navbar-brand" href="https://www.thingiverse.com/Surrbradl08/designs" target="_blank" style="font-size: 16px;">Surrbradl08</a>
+ <a class="navbar-brand" href="https://www.thingiverse.com/Surrbradl08/designs" target="_blank"><img
+ src="images/surr.png" style="width: 22px; height: 22px;" /></a>
+ <a class="navbar-brand" href="https://www.thingiverse.com/Surrbradl08/designs" target="_blank"
+ style="font-size: 16px;">Surrbradl08</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
- <li class="active bg-light"><a href="/" class="bg-light" title="Home">Home <span class="sr-only bg-light">(current)</span></a></li>
- <li><a href="/simple.htm" title="Simple Page">Simple</a></li>
+ <li class="active bg-light"><a href="/" class="bg-light" title="Home">Home <span
+ class="sr-only bg-light">(current)</span></a></li>
<li><a href="/settings.htm" title="Settings">Settings</a></li>
<li>
<a>
@@ -75,13 +80,12 @@
</div>
<div id="numberTemplate" class="form-group">
- <label class="col-sm-2 control-label"></label>
- <div class="col-sm-2">
- <input class="form-control input" type="number" step="1" min="0" max="255" />
- </div>
+ <div class="col-sm-2"></div>
<div class="col-sm-8">
- <input class="form-control slider" type="range" step="1" min="0" max="255" />
+ <label class="col-sm-2 control-label slider-label" for="input-brightness">Brightness</label>
+ <input class="form-control slider" type="range" step="1" min="1" max="255" id="input-brightness">
</div>
+ <div class="col-sm-2"></div>
</div>
<div id="booleanTemplate" class="form-group">
@@ -101,12 +105,10 @@
</div>
<div class="col-sm-2">
<div class="btn-group" role="group" aria-label="...">
- <button type="button" class="btn btn-default btn-previous"
- aria-label="Previous" title="Previous">
+ <button type="button" class="btn btn-default btn-previous" aria-label="Previous" title="Previous">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
- <button type="button" class="btn btn-default btn-next"
- aria-label="Next" title="Next">
+ <button type="button" class="btn btn-default btn-next" aria-label="Next" title="Next">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
@@ -118,43 +120,56 @@
<div class="col-sm-10">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #FF0000;" title="Red"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #FF0000;"
+ title="Red"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #FF8000;"
+ title="Orange"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #FFFF00;"
+ title="Yellow"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #80FF00;"
+ title="Chartreuse"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #00FF00;"
+ title="Green"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #00FF80;"
+ title="Spring Green"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #00FFFF;"
+ title="Cyan"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #0080FF;"
+ title="Azure"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #0000FF;"
+ title="Blue"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #8000FF;"
+ title="Violet"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #FF00FF;"
+ title="Magenta"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #FF0080;"
+ title="Rose"> </button>
</div>
<div class="btn-group" role="group">
- <button type="button" class="btn btn-default btn-color" style="background: #FFFFFF;" title="White"> </button>
+ <button type="button" class="btn btn-default btn-color" style="background: #FFFFFF;"
+ title="White"> </button>
</div>
</div>
</div>
@@ -220,4 +235,4 @@
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/data/js/app.js b/data/js/app.js
index 7e58b87..c603b5c 100644
--- a/data/js/app.js
+++ b/data/js/app.js
@@ -76,7 +76,8 @@ function addNumberField(field) {
var label = template.find(".control-label");
label.attr("for", "input-" + field.name);
- label.text(field.label);
+ var text = field.label.indexOf("Autoplay") > -1 ? field.label + ": " + field.value + " seconds" :field.label + ": " + (field.value * 100 / 255).toFixed(0) + "%"
+ label.text(text);
var input = template.find(".input");
var slider = template.find(".slider");
@@ -104,6 +105,7 @@ function addNumberField(field) {
var value = $(this).val();
input.val(value);
field.value = value;
+ label.text(field.label + ": " + (field.value * 100 / 255).toFixed(0) + "%");
delayPostValue(field.name, value);
});
--
GitLab