From 94c53b3b23f1922e281d60c145cc571c5a6127ef Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Sat, 3 Oct 2020 21:29:17 -0400
Subject: [PATCH 1/3] Introduce range percent template

- Replace usage in frio theme settings
---
 view/templates/field/range_percent.tpl       | 20 ++++++++++++++++++
 view/theme/frio/templates/theme_settings.tpl | 22 +-------------------
 2 files changed, 21 insertions(+), 21 deletions(-)
 create mode 100644 view/templates/field/range_percent.tpl

diff --git a/view/templates/field/range_percent.tpl b/view/templates/field/range_percent.tpl
new file mode 100644
index 000000000..0336b616d
--- /dev/null
+++ b/view/templates/field/range_percent.tpl
@@ -0,0 +1,20 @@
+<div id="id_{{$field.0}}_wrapper" class="form-group field range">
+{{if !isset($label) || $label != false }}
+	<label for="{{$field.0}}_range" id="label_{{$field.0}}">{{$field.1 nofilter}}{{if $field.4}}<span class="required"> {{$field.4}}</span>{{/if}}</label>
+{{/if}}
+	<div class="row">
+		<div class="col-xs-9">
+			<input type="range" class="form-control" id="{{$field.0}}_range" min="0" max="100" step="1" value="{{$field.2}}" onchange="{{$field.0}}.value = this.value" oninput="{{$field.0}}.value = this.value">
+		</div>
+		<div class="col-xs-3">
+			<div class="input-group">
+				<input type="text" class="form-control input-sm" name="{{$field.0}}" id="{{$field.0}}" value="{{$field.2}}" onchange="{{$field.0}}_range.value = this.value" oninput="{{$field.0}}_range.value = this.value" aria-describedby="{{$field.0}}_tip">
+				<span class="input-group-addon image-select">%</span>
+			</div>
+		</div>
+	</div>
+{{if $field.3}}
+	<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3 nofilter}}</span>
+{{/if}}
+	<div class="clear"></div>
+</div>
diff --git a/view/theme/frio/templates/theme_settings.tpl b/view/theme/frio/templates/theme_settings.tpl
index 505aa55c2..c9b350865 100644
--- a/view/theme/frio/templates/theme_settings.tpl
+++ b/view/theme/frio/templates/theme_settings.tpl
@@ -56,27 +56,7 @@
 
 {{if $background_color}}{{include file="field_colorinput.tpl" field=$background_color}}{{/if}}
 
-{{* The slider for the content opacity - We use no template for this since it is only used at this page *}}
-{{if $contentbg_transp}}
-<div class="form-group field input color">
-	<label for="id_{{$contentbg_transp.0}}" id="label_{{$contentbg_transp.0}}">{{$contentbg_transp.1}}</label>
-
-	<div class="row">
-		<div class="col-xs-9">
-			<input type="range" class="form-control" id="{{$contentbg_transp.0}}_range" min="0" max="100" step="1" value="{{$contentbg_transp.2}}" onchange="{{$contentbg_transp.0}}.value = this.value" oninput="{{$contentbg_transp.0}}.value = this.value">
-		</div>
-		<div class="col-xs-3">
-			<div class="input-group">
-				<input type="text" class="form-control input-sm" name="{{$contentbg_transp.0}}" id="{{$contentbg_transp.0}}" value="{{$contentbg_transp.2}}" onchange="{{$contentbg_transp.0}}_range.value = this.value" oninput="{{$contentbg_transp.0}}_range.value = this.value" aria-describedby="{{$contentbg_transp.0}}_tip">
-				<span class="input-group-addon image-select">%</span>
-			</div>
-		</div>
-	</div>
-
-	<span id="{{$contentbg_transp.0}}_tip" class="help-block" role="tooltip">{{$contentbg_transp.3}}</span>
-	<div id="end_{{$contentbg_transp.0}}" class="field_end"></div>
-</div>
-{{/if}}
+{{if $contentbg_transp}}{{include file="field/range_percent.tpl" field=$contentbg_transp}}{{/if}}
 
 {{if $background_image}}{{include file="field_fileinput.tpl" field=$background_image}}{{/if}}
 

From cbe3826b83ed25a111e3ae7ac458ec3e3bad7556 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Sat, 3 Oct 2020 21:29:40 -0400
Subject: [PATCH 2/3] [frio] Remove box-shadow from range inputs for dark/black
 schemes

---
 view/theme/frio/scheme/black.css | 4 ++++
 view/theme/frio/scheme/dark.css  | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/view/theme/frio/scheme/black.css b/view/theme/frio/scheme/black.css
index 3b3f092a7..361a77728 100644
--- a/view/theme/frio/scheme/black.css
+++ b/view/theme/frio/scheme/black.css
@@ -70,6 +70,10 @@ textarea,
 	box-shadow: 0 0 3px #dadada;
 	-webkit-box-shadow: 0 0 3px #dadada;
 }
+input[type=range] {
+	box-shadow: none;
+}
+
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
 	background-color: $background_color;
 	color: $font_color_darker;
diff --git a/view/theme/frio/scheme/dark.css b/view/theme/frio/scheme/dark.css
index d282b501b..6bd3df21a 100644
--- a/view/theme/frio/scheme/dark.css
+++ b/view/theme/frio/scheme/dark.css
@@ -69,6 +69,10 @@ textarea,
 	box-shadow: 0 0 3px #dadada;
 	-webkit-box-shadow: 0 0 3px #dadada;
 }
+input[type=range] {
+	box-shadow: none;
+}
+
 .form-control[disabled],
 .form-control[readonly],
 .ieldset[disabled] .form-control {

From 8aa8c4622e35e9f8e5f7e0f45bf88dfea311f064 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Sat, 3 Oct 2020 21:30:20 -0400
Subject: [PATCH 3/3] [quattro] Remove seemingly unused slider/range styles

- They conflict with the new range input template
---
 view/theme/quattro/dark/style.css  | 45 +-----------------------------
 view/theme/quattro/green/style.css | 44 -----------------------------
 view/theme/quattro/lilac/style.css | 44 -----------------------------
 view/theme/quattro/quattro.less    | 45 ------------------------------
 4 files changed, 1 insertion(+), 177 deletions(-)

diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index afed03ad6..be48064f4 100644
--- a/view/theme/quattro/dark/style.css
+++ b/view/theme/quattro/dark/style.css
@@ -2500,50 +2500,7 @@ footer {
 .videobb:hover {
   background-position: -112px -16px;
 }
-/** range input css **/
-/* slider root element */
-.slider {
-  height: 2px;
-  position: relative;
-  cursor: pointer;
-  border: 1px solid #333;
-  width: 200px;
-  margin: 10px 0 10px 0;
-  float: left;
-}
-/* progress bar (enabled with progress: true) */
-.progress {
-  height: 9px;
-  background-color: #C5FF00;
-  display: none;
-  opacity: 0.6;
-}
-/* drag handle */
-.handle {
-  background-color: #ccc;
-  height: 16px;
-  width: 8px;
-  top: -8px;
-  position: absolute;
-  display: block;
-  margin-top: 1px;
-  border: 1px solid #000;
-  cursor: move;
-  -moz-border-radius: 0 0 5px 5px;
-  -webkit-border-radius: 0 0 5px 5px;
-  border-radius: 0 0 5px 5px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-}
-/* the input field */
-.range {
-  width: 20px!important;
-  font-size: 8pt;
-  margin-left: 10px;
-  border: 0;
-  color: #999999;
-}
+
 /* buttons for the event view */
 .plink-event-link {
   float: left;
diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css
index 55c15eeb3..681b9417c 100644
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -2500,50 +2500,6 @@ footer {
 .videobb:hover {
   background-position: -112px -16px;
 }
-/** range input css **/
-/* slider root element */
-.slider {
-  height: 2px;
-  position: relative;
-  cursor: pointer;
-  border: 1px solid #333;
-  width: 200px;
-  margin: 10px 0 10px 0;
-  float: left;
-}
-/* progress bar (enabled with progress: true) */
-.progress {
-  height: 9px;
-  background-color: #C5FF00;
-  display: none;
-  opacity: 0.6;
-}
-/* drag handle */
-.handle {
-  background-color: #ccc;
-  height: 16px;
-  width: 8px;
-  top: -8px;
-  position: absolute;
-  display: block;
-  margin-top: 1px;
-  border: 1px solid #000;
-  cursor: move;
-  -moz-border-radius: 0 0 5px 5px;
-  -webkit-border-radius: 0 0 5px 5px;
-  border-radius: 0 0 5px 5px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-}
-/* the input field */
-.range {
-  width: 20px!important;
-  font-size: 8pt;
-  margin-left: 10px;
-  border: 0;
-  color: #999999;
-}
 /* buttons for the event view */
 .plink-event-link {
   float: left;
diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css
index 2cabdf5cc..df854a21f 100644
--- a/view/theme/quattro/lilac/style.css
+++ b/view/theme/quattro/lilac/style.css
@@ -2500,50 +2500,6 @@ footer {
 .videobb:hover {
   background-position: -112px -16px;
 }
-/** range input css **/
-/* slider root element */
-.slider {
-  height: 2px;
-  position: relative;
-  cursor: pointer;
-  border: 1px solid #333;
-  width: 200px;
-  margin: 10px 0 10px 0;
-  float: left;
-}
-/* progress bar (enabled with progress: true) */
-.progress {
-  height: 9px;
-  background-color: #C5FF00;
-  display: none;
-  opacity: 0.6;
-}
-/* drag handle */
-.handle {
-  background-color: #ccc;
-  height: 16px;
-  width: 8px;
-  top: -8px;
-  position: absolute;
-  display: block;
-  margin-top: 1px;
-  border: 1px solid #000;
-  cursor: move;
-  -moz-border-radius: 0 0 5px 5px;
-  -webkit-border-radius: 0 0 5px 5px;
-  border-radius: 0 0 5px 5px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
-}
-/* the input field */
-.range {
-  width: 20px!important;
-  font-size: 8pt;
-  margin-left: 10px;
-  border: 0;
-  color: #999999;
-}
 /* buttons for the event view */
 .plink-event-link {
   float: left;
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 3d3f94f23..53874be02 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -1668,51 +1668,6 @@ footer { height: 100px; display: table-row; }
 .videobb { background-position: -112px 0; }
 .videobb:hover { background-position: -112px -16px; }
 
-
-/** range input css **/
-/* slider root element */
-.slider {
-        height:2px;
-        position:relative;
-        cursor:pointer;
-        border:1px solid #333;
-        width:200px;
-        margin:10px 0 10px 0;
-            float: left;
-}
-
-/* progress bar (enabled with progress: true) */
-.progress {
-        height:9px;
-        background-color:#C5FF00;
-        display:none;
-        opacity:0.6;
-}
-
-/* drag handle */
-.handle {
-        background-color:#ccc;
-        height:16px;
-        width:8px;
-        top:-8px;
-        position:absolute;
-        display:block;
-        margin-top:1px;
-        border:1px solid #000;
-        cursor:move;
-            .roundbottom();
-            .shadow();
-}
-
-/* the input field */
-.range {
-	width: 20px!important;
-	font-size: 8pt;
-	margin-left: 10px;
-	border: 0;
-	color: @FieldHelpColor;
-}
-
 /* buttons for the event view */
 .plink-event-link {
 	float: left;