From 307ec7b5421ca8d7b30edeaaa7d3283044910595 Mon Sep 17 00:00:00 2001
From: Georg Fischer <snorpey@gmail.com>
Date: Mon, 8 Aug 2016 20:20:30 +0200
Subject: [PATCH] fix webkit input styles

---
 styles/modules/controls.css      | 128 +++++++++++--------------------
 styles/modules/workspace-nav.css |  48 ++++++++----
 2 files changed, 78 insertions(+), 98 deletions(-)

diff --git a/styles/modules/controls.css b/styles/modules/controls.css
index b437906..6d2ac3c 100644
--- a/styles/modules/controls.css
+++ b/styles/modules/controls.css
@@ -219,26 +219,6 @@ input[type=range]:focus {
 	outline: none;
 }
 
-/*input[type=range]::-webkit-slider-runnable-track {
-	width: 100%;
-	height: 4px;
-	cursor: pointer;
-	background: rgba(0, 0, 0, 0.95);
-	border-radius: 3px;
-	border: 1px solid #333333;
-}
-
-input[type=range]::-webkit-slider-thumb {
-	border: 0.1px solid rgba(102, 102, 102, 0.5);
-	height: 10px;
-	width: 10px;
-	border-radius: 10px;
-	margin-top: -4px;
-	background: #999999;
-	cursor: pointer;
-	-webkit-appearance: none;
-}*/
-
 input[type='range']:not(*:root) {
 	overflow: hidden;
 	background-color: transparent;
@@ -249,85 +229,57 @@ input[type=range]::-webkit-slider-runnable-track {
 	border: none;
 	background-color: transparent;
 	position: relative;
-}
-
-/*track background line, full width*/
-input[type=range]::-webkit-slider-runnable-track::before {
-	content: '';
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: 4px;
-	background-color: rgba(255, 255, 255, 0.2);
-	left: 0;
-	top: 50%;
-	transform: translateY(-50%);
-	transition: background-color 0.2s;
-}
-
-input[type=range]:focus::-webkit-slider-runnable-track::before,
-input[type=range]:active::-webkit-slider-runnable-track::before {
-	background-color: rgba(0, 0, 0, 0.5);
+	background: linear-gradient(
+		to bottom,
+		rgba(255,255,255,0) 0%,
+		rgba(255,255,255,0) 41.9%,
+		rgba(255,255,255,0.2) 42%,
+		rgba(255,255,255,0.2) 58%,
+		rgba(255,255,255,0) 58.1%,
+		rgba(255,255,255,0) 100%
+	);
 }
 
 /*slider thumb clickable area*/
+
 input[type=range]::-webkit-slider-thumb {
 	height: 20px;
 	width: 20px;
 	border-radius: 45px;
-	margin-top: 0;
 	transition: background-color 0.2s;
-	background-color: transparent;
 	position: relative;
 	cursor: pointer;
+	appearance: none;
+	border: none;
+	background: radial-gradient(
+		ellipse at center,
+		rgba(255,255,255,1) 0%,
+		rgba(255,255,255,1) 30%,
+		rgba(255,255,255,0) 33%,
+		rgba(255,255,255,0) 100%
+	);
 	-webkit-appearance: none;
+	border: 1px transparent solid;
 }
 
-input[type=range]:focus::-webkit-slider-thumb,
+input[type=range]:hover::-webkit-slider-thumb,
 input[type=range]:active::-webkit-slider-thumb,
-.has-touch input[type=range]:focus::-webkit-slider-thumb,
-.has-touch input[type=range]:active::-webkit-slider-thumb {
-	background-color: rgba(255, 255, 255, 0.5);
+input[type=range]:focus::-webkit-slider-thumb {
+	background: radial-gradient(
+		ellipse at center,
+		rgba(255,255,255,1) 0%,
+		rgba(255,255,255,1) 30%,
+		rgba(255,255,255,0.2) 33%,
+		rgba(255,255,255,0.2) 100%
+	);
+
+	border: 1px #fff solid;
 }
 
 .has-touch input[type=range]::-webkit-slider-thumb {
-	height: 38px;
-	width: 38px;
-	background-color: rgba(255, 255, 255, 0.2);
-}
-
-/*slider thumb point*/
-input[type=range]::-webkit-slider-thumb::before {
-	content: '';
-	display: block;
-	position: absolute;
-	background-color: #fff;
-	width: 10px;
-	height: 10px;
-	border-radius: 14px;
-	z-index: 2;
-	top: 50%;
-	left: 50%;
-	transform: translateX(-50%) translateY(-50%);
-	transition: background-color 0.2s;
-}
-
-.has-touch input[type=range]::-webkit-slider-thumb::before {
-	width: 14px;
-	height: 14px;
-}
-
-/*slider current value track*/
-input[type=range]::-webkit-slider-thumb::after {
-	content: '';
-	display: block;
-	position: absolute;
-	width: 100vw;
-	height: 3px;
-	top: 50%;
-	right: 50%;
-	transform: translateY(-50%);
-	background-color: #fff;
+	height: 40px;
+	width: 40px;
+	top:  2px;
 }
 
 input[type=range]::-moz-range-track {
@@ -372,9 +324,11 @@ input[type=range]::-moz-range-thumb {
 		ellipse at center,
 		rgba(255,255,255,1) 0%,
 		rgba(255,255,255,1) 30%,
-		rgba(255,255,255,0) 30.1%,
+		rgba(255,255,255,0) 33%,
 		rgba(255,255,255,0) 100%
 	);
+
+	border: 1px transparent solid;
 }
 
 input[type=range]::-moz-range-thumb:hover,
@@ -383,9 +337,11 @@ input[type=range]::-moz-range-thumb:hover,
 		ellipse at center,
 		rgba(255,255,255,1) 0%,
 		rgba(255,255,255,1) 30%,
-		rgba(255,255,255,0.2) 30.1%,
+		rgba(255,255,255,0.2) 33%,
 		rgba(255,255,255,0.2) 100%
 	);
+
+	border: 1px #fff solid;
 }
 
 input[type=range]:focus::-moz-range-thumb,
@@ -396,9 +352,11 @@ input[type=range]:active::-moz-range-thumb,
 		ellipse at center,
 		rgba(255,255,255,1) 0%,
 		rgba(255,255,255,1) 30%,
-		rgba(255,255,255,0.5) 30.1%,
+		rgba(255,255,255,0.5) 33%,
 		rgba(255,255,255,0.5) 100%
 	);
+
+	border: 1px #fff solid;
 }
 
 .has-touch input[type=range]::-moz-range-thumb {
diff --git a/styles/modules/workspace-nav.css b/styles/modules/workspace-nav.css
index 78e2610..185b86f 100644
--- a/styles/modules/workspace-nav.css
+++ b/styles/modules/workspace-nav.css
@@ -114,23 +114,41 @@ html:not(.has-touch) .fullscreen-button:hover {
 	background-image: url(../../images/icon/fullscreen-exit.svg);
 }
 
-.workspace-controls input[type=range]::-webkit-slider-runnable-track::before,
-.has-touch .workspace-controls input[type=range]::-webkit-slider-thumb {
-	background-color: rgba(0, 0, 0, 0.2);
+.workspace-controls input[type=range]::-webkit-slider-runnable-track {
+	background: linear-gradient(
+		to bottom,
+		rgba(0, 0, 0, 0) 0%,
+		rgba(0, 0, 0, 0) 41.9%,
+		rgba(0, 0, 0, 0.2) 42%,
+		rgba(0, 0, 0, 0.2) 58%,
+		rgba(0, 0, 0, 0) 58.1%,
+		rgba(0, 0, 0, 0) 100%
+	);
 }
 
-.workspace-controls input[type=range]:focus::-webkit-slider-thumb,
+
+.workspace-controls input[type=range]::-webkit-slider-thumb {
+	background: radial-gradient(
+		ellipse at center,
+		rgba(0, 0, 0 ,1) 0%,
+		rgba(0, 0, 0 ,1) 30%,
+		rgba(0, 0, 0 ,0) 33%,
+		rgba(0, 0, 0 ,0) 100%
+	);
+}
+
+.workspace-controls input[type=range]:hover::-webkit-slider-thumb,
 .workspace-controls input[type=range]:active::-webkit-slider-thumb,
-.workspace-controls input[type=range]:focus::-webkit-slider-runnable-track::before,
-.workspace-controls input[type=range]:active::-webkit-slider-runnable-track::before,
-.has-touch .workspace-controls input[type=range]:focus::-webkit-slider-thumb,
-.has-touch .workspace-controls input[type=range]:active::-webkit-slider-thumb {
-	background-color: rgba(0, 0, 0, 0.5);
-}
+.workspace-controls input[type=range]:focus::-webkit-slider-thumb {
+	background: radial-gradient(
+		ellipse at center,
+		rgba(0, 0, 0, 1) 0%,
+		rgba(0, 0, 0, 1) 30%,
+		rgba(0, 0, 0, 0.2) 33%,
+		rgba(0, 0, 0, 0.2) 100%
+	);
 
-.workspace-controls input[type=range]::-webkit-slider-thumb::before,
-.workspace-controls input[type=range]::-webkit-slider-thumb::after {
-	background-color: rgba(0, 0, 0, 0.9);
+	border: 1px #000 solid;
 }
 
 .workspace-controls input[type=range]::-moz-range-track {
@@ -176,6 +194,8 @@ html:not(.has-touch) .fullscreen-button:hover {
 		rgba(0, 0, 0, 0.2) 30.1%,
 		rgba(0, 0, 0, 0.2) 100%
 	);
+
+	border: 1px #000 solid;
 }
 
 .workspace-controls input[type=range]:focus::-moz-range-thumb,
@@ -189,6 +209,8 @@ html:not(.has-touch) .fullscreen-button:hover {
 		rgba(0, 0, 0, 0.5) 30.1%,
 		rgba(0, 0, 0, 0.5) 100%
 	);
+
+	border: 1px #000 solid;
 }
 
 .workspace-controls input[type=range]::-ms-track {