From 69d12626cbb5f66d7326301f51426576fc985702 Mon Sep 17 00:00:00 2001
From: Kevin Payravi <kevinpayravi@gmail.com>
Date: Fri, 3 Nov 2023 09:51:41 -0500
Subject: [PATCH] Adjust hover tooltips in settings

---
 settings.html | 34 +++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/settings.html b/settings.html
index 72cd9e5..199cca3 100644
--- a/settings.html
+++ b/settings.html
@@ -74,7 +74,7 @@
       font-weight: 600;
     }
 
-    /* CONTAINERS AND LAYOUT */ 
+    /* CONTAINERS AND LAYOUT */
     .container {
       background: #fff;
     }
@@ -85,9 +85,11 @@
       gap: 1em;
       padding-bottom: .5rem;
     }
+
     .two-col>div {
       flex: 1;
     }
+
     @media (max-width: 600px) {
       .two-col>div {
         flex: 100%;
@@ -153,11 +155,13 @@
       font-size: .9em;
       line-height: 1.3em;
     }
+
     #notificationBannerContainer span {
       padding: .5rem 1rem;
       display: none;
     }
-    #notificationBannerContainer span ~ span[style] {
+
+    #notificationBannerContainer span~span[style] {
       border-top: 1px solid #005799;
     }
 
@@ -216,31 +220,38 @@
       white-space: nowrap;
       position: relative;
     }
+
     .toggles img {
       line-height: 1.2rem;
     }
+
     .toggles a img {
       padding-right: .5rem;
     }
+
     .toggles span {
       flex-grow: 1;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .toggles label {
       display: flex;
       align-items: center;
     }
+
     .toggles input {
       cursor: pointer;
       margin: 0;
     }
+
     .toggles>div {
       line-height: 2rem;
       display: flex;
       flex-direction: row;
       padding: 0 .5rem;
     }
+
     .toggles .inputsContainer {
       display: flex;
       float: right;
@@ -252,14 +263,17 @@
       border-bottom: 1px solid #ccc;
       background-color: #f5fbff;
     }
+
     .togglesHeader span {
       text-align: right;
       font-style: italic;
       margin-right: 1em;
     }
+
     .togglesHeader img {
       cursor: pointer;
     }
+
     .togglesHeader .inputsContainer img {
       width: auto;
       max-width: 17px;
@@ -283,14 +297,17 @@
       top: 0;
       z-index: 999;
     }
+
     #togglesKeys button {
       all: unset;
-      height: 18px;
-      display: block;
+      display: inline-flex;
+      vertical-align: middle;
     }
+
     #togglesKeys button:focus {
       outline: revert;
     }
+
     #togglesKeys .inputsContainer>div {
       position: relative;
     }
@@ -301,18 +318,20 @@
       width: 0;
       height: 0;
     }
+
     #togglesDefaults input+label {
       width: 100%;
       height: 100%;
       background-image: url('images/star-off.png');
-      background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
       background-size: 18px;
     }
+
     #togglesDefaults input:checked+label {
       background-image: url('images/star-on.png');
     }
+
     #togglesDefaults label {
       cursor: pointer;
     }
@@ -327,7 +346,7 @@
       color: #fff;
       background: #000;
       z-index: 999999;
-      transform: translateX(calc(-100% - 24px));
+      transform: translateX(calc(-100% - 5px));
       top: 30px;
     }
 
@@ -335,6 +354,7 @@
       display: flex;
       width: 150px;
     }
+
     #togglesColumnLabels>div>div>div {
       flex: 1 1 0;
       font-weight: 600;
@@ -438,7 +458,7 @@
         or
         <img src="images/toggle-redirect.png" width="12" alt="" />
         automatically redirected.
-        On search engines, you can choose to 
+        On search engines, you can choose to
         <img src="images/toggle-replace.png" width="12" alt="" /> replace (default)
         or
         <img src="images/toggle-hide.png" width="12" alt="" /> hide