update userchrome to modern version

1 files changed, 33 insertions, 27 deletions

diff --git a/home-config/firefox/userChrome.css b/home-config/firefox/userChrome.css
index ce3868b..b6c9502 100644
--- a/home-config/firefox/userChrome.css
+++ b/home-config/firefox/userChrome.css
@@ -39,10 +39,7 @@
 /* Change look of tabs in smaller view */
 @media screen and (max-width: 800px){
   .tab-background { 
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    margin-block: .2em !important;
   }
   #TabsToolbar{
     margin-left: 5px;
@@ -90,6 +87,8 @@
     margin-right:calc(100vw - var(--uc-navigationbar-width));
     margin-top: calc(0px - var(--uc-toolbar-height));
     border-radius: 0 var(--tab-border-radius) var(--tab-border-radius) 0;
+    border-right:  1px solid ThreeDShadow !important;
+    box-shadow: 0 0 4px rgba(0,0,0,.4) !important;
   }
 
   /* 1px margin on touch density causes tabs to be too high */
@@ -112,9 +111,12 @@
     margin-inline-end: initial !important; 
   }
   
-  /* Shorter findbar */
+  /* Shorten findbar */
   findbar {
     width: 600px !important;
+    border-radius: 0 0 0 5px;
+    border-bottom: none !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,.4); /* Move down 2px so it doesn't go over the tab bar */
   }
 }
 
@@ -125,10 +127,11 @@ findbar {
   position: absolute;
   top: 0;
   right: 0;
-  border-radius: 0 0 0 5px;
   padding: 0 !important;
-  background: var(--toolbar-field-border-color, --toolbar-field-background-color) !important; /* TODO fallback color doesn't work */
-  border-top-width: 0 !important;
+  padding-top: 1px !important;
+  background: -moz-headerbar Field !important;
+  border-top-width: 0px !important;
+  border-bottom: 1px solid ThreeDShadow;
 }
 
 findbar .findbar-container {
@@ -140,42 +143,45 @@ findbar .findbar-container {
   flex-wrap: wrap;
 }
 
-/* Hide not found text etc */
+/* Force textbox to fill up first line */
+findbar .findbar-textbox {
+  width: 100% !important;
+  background: Field !important; /* Set the background color to be consistent with found-matches label when unfocused */
+}
+
+/* Hide description showing wrap conditions etc. */
 findbar description {
   display: none;
 }
 
 /* Move found matches label (roughly) into the textbox */
-findbar label.found-matches {
+findbar label.found-matches,
+findbar description {
   position: absolute;
   top: 6.5px;
-  right: 120px;
-  background: var(--toolbar-field-background-color);
-  color: color-mix(in srgb, var(--toolbar-non-lwt-textcolor), transparent 46%) !important;
-  padding-left: 1ex;
+  right: 110px;
+  color: color-mix(in srgb, -moz-headerbartext, transparent 46%) !important;
+  /* So this text overrides the text below, TODO find a more elegant solution */
+  padding-inline: 1ex;
+  background: Field;
+}
+
+/* Show description when it says "Phrase Not Found" */
+findbar description[status=notfound] {
+  display: inline-block;
 }
 
 /* Force checkboxes onto second line */
 findbar .findbar-container hbox {
   width: 100%;
 }
-/* Force textbox to fill up first line */
-findbar .findbar-container hbox .findbar-textbox {
-  width: 100% !important;
-}
-
-/* Make checkboxes visible */
-findbar .findbar-container checkbox{
-  --checkbox-unchecked-bgcolor: var(--toolbar-bgcolor);
-  --checkbox-unchecked-hover-bgcolor: color-mix(in srgb, var(--toolbar-bgcolor) 80%, transparent);
-  --checkbox-unchecked-active-bgcolor: var(--toolbar-bgcolor);
-}
 
 
 /* BOOKMARK BAR */
 @-moz-document url(chrome://browser/content/browser.xhtml){  
-  #PersonalToolbar[collapsed=false]{
-    background: var(--toolbar-field-background-color) !important;
+  #PersonalToolbar {
+    background: -moz-headerbar Field !important;
+    border-top: 1px solid ThreeDShadow !important;
   }
   /* Space out bookmark items */
   .bookmark-item .toolbarbutton-text {