From 7ed543db0d71c85f9488f6b1da892af9d7bd19ef Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Wed, 16 Sep 2020 07:01:16 -0400
Subject: [PATCH] Fine tune visual of slider widgets in element picker

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/851
---
 src/css/epicker-ui.css | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css
index 04474b956..f62f6d2bc 100644
--- a/src/css/epicker-ui.css
+++ b/src/css/epicker-ui.css
@@ -125,23 +125,30 @@ html#ublock0-epicker,
     width: 40%;
     }
 .resultsetModifier > span {
-    align-items: center;
-    display: inline-flex;
+    align-items: flex-end;
+    border-bottom: 2px solid white;
+    display: flex;
     height: 100%;
     pointer-events: none;
     width: 100%;
     }
 .resultsetModifier  > span > span:nth-of-type(1) {
     background-color: var(--checkbox-checked-ink);
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+    border-inline-end: 1px solid #aaa;
     display: inline-block;
     flex-shrink: 0;
     height: 6px;
     }
 .resultsetModifier  > span > span:nth-of-type(2) {
     background-color: var(--checkbox-checked-ink);
-    border-radius: 7px;
+    clip-path: polygon(
+        calc(50% - 2px) 0%,
+        0% calc(100% - 6px),
+        0% 100%,
+        100% 100%,
+        100% calc(100% - 6px),
+        calc(50% + 2px) 0%
+    );
     display: inline-block;
     flex-shrink: 0;
     height: 16px;
@@ -149,11 +156,10 @@ html#ublock0-epicker,
     }
 .resultsetModifier  > span > span:nth-of-type(3) {
     background-color: var(--checkbox-ink);
-    border-top-right-radius: 2px;
-    border-bottom-right-radius: 2px;
+    border-inline-start: 1px solid #aaa;
     display: inline-block;
     flex-grow: 1;
-    height: 4px;
+    height: 6px;
     }
 .resultsetModifier input {
     border: 0;