From ef8b7c031011bb25678a941e8ae327e409c35fec Mon Sep 17 00:00:00 2001
From: Aneimytis <5927301+cyrildtm@users.noreply.github.com>
Date: Tue, 26 Apr 2022 18:38:24 -0500
Subject: cherry pick #541 (prettify popup)

prettify popup

add scrollbar
add hover fade-in animation
---
 Extensions/combined/popup.css | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

(limited to 'Extensions')

diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index dfe94cb..721b73d 100644
--- a/Extensions/combined/popup.css
+++ b/Extensions/combined/popup.css
@@ -71,6 +71,8 @@ button:hover {
 .switch:before {
   content: attr(data-hover);
   visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.1s linear, opacity 0.1s linear;
   width: 250px;
   background-color: var(--secondary);
   border-radius: 0.5rem;
@@ -84,6 +86,24 @@ button:hover {
 
 .switch:hover:before {
   visibility: visible;
+  opacity: 1;
+}
+
+.fade-in {
+	opacity: 1;
+	animation-name: fadeInOpacity;
+	animation-iteration-count: 1;
+	animation-timing-function: ease-in;
+	animation-duration: 2s;
+}
+
+@keyframes fadeInOpacity {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 #advancedToggle {
@@ -123,8 +143,28 @@ button:hover {
   border: 2px solid var(--secondary);
   border-radius: 0.5rem;
   padding: 1rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--tertiary); 
+  border-radius: 10px;
 }
 
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--lightGrey); 
+}
 #advancedLegend {
   color: var(--tertiary) !important;
   /* margin: auto; */ /* Center the label */
-- 
cgit v1.2.3


From c67dfbc67bc70efd742e7b8f58d99cc0bbf75bd3 Mon Sep 17 00:00:00 2001
From: Aneimytis <5927301+cyrildtm@users.noreply.github.com>
Date: Sun, 8 May 2022 00:25:57 -0500
Subject: Make popup scroll bar consistent with website

use black/red color scheme and half-rounded shape
---
 Extensions/combined/popup.css | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

(limited to 'Extensions')

diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index 721b73d..eaf82e3 100644
--- a/Extensions/combined/popup.css
+++ b/Extensions/combined/popup.css
@@ -148,23 +148,29 @@ button:hover {
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 1rem;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--background);
+  background: #111; /* color of the tracking area */
 }
- 
-/* Handle */
+
 ::-webkit-scrollbar-thumb {
-  background: var(--tertiary); 
-  border-radius: 10px;
+  background-color: #333; /* color of the scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
 
-/* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--lightGrey); 
+  background-color: #f22; /* color of the scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
+
 #advancedLegend {
   color: var(--tertiary) !important;
   /* margin: auto; */ /* Center the label */
-- 
cgit v1.2.3


From 4a09e311f89e6cb3f1fccbd9c6fce4b08f51ddf4 Mon Sep 17 00:00:00 2001
From: Aneimytis <5927301+cyrildtm@users.noreply.github.com>
Date: Sun, 8 May 2022 00:41:33 -0500
Subject: add hover labels for select list label

---
 Extensions/combined/popup.css  | 12 ++++++++++--
 Extensions/combined/popup.html |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'Extensions')

diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index eaf82e3..0dda34f 100644
--- a/Extensions/combined/popup.css
+++ b/Extensions/combined/popup.css
@@ -68,7 +68,7 @@ button:hover {
   border-radius: 0.25rem;
 }
 
-.switch:before {
+.switch:before, .label-with-hover-tip:before {
   content: attr(data-hover);
   visibility: hidden;
   opacity: 0;
@@ -84,7 +84,7 @@ button:hover {
   top: 160%;
 }
 
-.switch:hover:before {
+.switch:hover:before, .label-with-hover-tip:hover:before {
   visibility: visible;
   opacity: 1;
 }
@@ -188,6 +188,14 @@ button:hover {
   margin-bottom: 1rem;
 }
 
+.label-with-hover-tip {
+  position: relative;
+  display: inline-block;
+  width: 80px;
+  height: 17px;
+  margin-bottom: 1rem;
+}
+
 .switch:last-of-type {
   margin-bottom: 0;
 }
diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html
index 7d39246..1a51440 100644
--- a/Extensions/combined/popup.html
+++ b/Extensions/combined/popup.html
@@ -137,7 +137,7 @@
   </label>
   <br/>
   <div class="custom-select">
-    <label for="color_theme">Color theme:</label>
+    <label for="color_theme" class="label-with-hover-tip" data-hover="">Color theme:</label>
     <select name="color_theme" id="color_theme">
       <option value="classic" id="color_theme_classic">Classic</option>
       <option value="accessible" id="color_theme_accessible">
-- 
cgit v1.2.3