Fix various items

- fix tab shadows - fix private browsing indicator / button colors - add button hover transitions - fix inactive window color in light mode - fix various light / dark settings
bmFtZQ · Jun 10, 2022 · 8e94eb8 · 8e94eb8
1 parent b0a634a
commit 8e94eb8
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 31 deletions.
diff --git a/chrome/content/common.css b/chrome/content/common.css
@@ -91,8 +91,10 @@
   .category[selected]::before {
     content: "";
     display: block;
-    border-left: 3px solid var(--in-content-accent-color);
     height: 24px;
+    width: 3px;
+    background-color: var(--in-content-accent-color);
+    border-radius: 3px;
     position: absolute;
     left: 0;
     top: 12px;

diff --git a/chrome/global/colors.css b/chrome/global/colors.css
@@ -57,7 +57,13 @@
   --panel-banner-item-update-supported-bgcolor: #50B080 !important;
   --focus-outline-color: #0055D7 !important;
   --panel-shortcut-color: inherit !important;
-  --uc-urlbar-shadow: 0 0 4px #0002;
+  --uc-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  --toolbarbutton-hover-background: #00000014 !important;
+  --toolbarbutton-active-background: #00000021 !important;
+  --uc-private-browsing-indicator: var(--button-primary-bgcolor);
+  --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor);
+  --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
+  --uc-private-browding-indicator-text: var(--button-primary-color);
 }
 
 /* dark */
@@ -115,6 +121,12 @@
   --panel-banner-item-update-supported-bgcolor: #50B080 !important;
   --focus-outline-color: #63ADE5 !important;
   --panel-shortcut-color: inherit !important;
+  --toolbarbutton-hover-background: #ffffff25 !important;
+  --toolbarbutton-active-background: #ffffff32 !important;
+  --uc-private-browsing-indicator: var(--button-primary-bgcolor);
+  --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor);
+  --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
+  --uc-private-browding-indicator-text: var(--button-primary-color);
 }
 
 /* Change Colour of page when loading */
@@ -127,12 +139,12 @@
 }
 
 /* needed for theming the private browsing indicator  */
-:root:not([style*="--button-primary-bgcolor"]) {
+/* :root:not([style*="--button-primary-bgcolor"]) {
   --button-primary-bgcolor: unset !important;
   --button-primary-hover-bgcolor: unset !important;
   --button-primary-active-bgcolor: unset !important;
   --button-primary-color: unset !important;
-}
+} */
 
 /* make the titlebar buttons black/white on default themes */
 :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {

diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css
@@ -22,7 +22,7 @@ and 11 so applied to both) */
   /* darkmode icon that uses thicker strokes and easier to see (only needed at
   1x scale) */
   @media (max-resolution: 1dppx) {
-    :root[lwthemetextcolor="bright"] .titlebar-close,
+    :root[lwtheme-brighttext="true"] .titlebar-close,
     .titlebar-close:hover {
       list-style-image: url("win11-close-dark.svg") !important;
     }

diff --git a/chrome/toolbar/navbar.css b/chrome/toolbar/navbar.css
@@ -50,22 +50,47 @@
 }
 
 :root[privatebrowsingmode] #fxa-toolbar-menu-button {
-  background: var(--button-primary-bgcolor, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention))) !important;
+  background: var(--uc-private-browsing-indicator, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention))) !important;
   margin: 4px !important;
   padding-inline: 8px 0 !important;
-  color: var(--button-primary-color, var(--toolbar-bgcolor)) !important;
+  color: var(--uc-private-browding-indicator-text, var(--toolbar-bgcolor)) !important;
   fill: currentColor !important;
 }
 
 :root[privatebrowsingmode] #fxa-toolbar-menu-button:hover {
-  background: var(--button-primary-hover-bgcolor, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 90%, transparent)) !important;
+  background: var(--uc-private-browding-indicator-hover, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 90%, transparent)) !important;
 }
 
 :root[privatebrowsingmode] #fxa-toolbar-menu-button:not([disabled=true]):is([open], [checked], :hover:active) {
-  background: var(--button-primary-active-bgcolor, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 70%, transparent)) !important;
+  background: var(--uc-private-browding-indicator-active, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 70%, transparent)) !important;
 }
 
 :root[privatebrowsingmode] #nav-bar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack {
   background: transparent !important;
   margin-inline: 0 !important;
 }
+
+/* button background transition */
+@media not (prefers-reduced-motion) {
+  .toolbarbutton-1>.toolbarbutton-icon,
+  .toolbarbutton-1>.toolbarbutton-text,
+  .toolbarbutton-1>.toolbarbutton-badge-stack,
+  .bookmark-item,
+  .urlbar-page-action,
+  .identity-box-button,
+  #tracking-protection-icon-container,
+  #fxa-toolbar-menu-button {
+    transition: background-color 0.25s ease !important;
+  }
+
+  .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-icon,
+  .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-text,
+  .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-badge-stack,
+  .bookmark-item:not([disabled=true]):is([open],[checked],:hover:active),
+  .urlbar-page-action:not([disabled=true]):is([open],[checked],:hover:active),
+  .identity-box-button:not([disabled=true]):is([open],[checked],:hover:active),
+  #tracking-protection-icon-container:not([disabled=true]):is([open],[checked],:hover:active),
+  #fxa-toolbar-menu-button:not([disabled=true]):is([open],[checked],:hover:active) {
+    transition-duration: 0s !important;
+  }
+}
diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css
@@ -110,6 +110,15 @@
   color: var(--lwt-text-color) !important;
 }
 
+/* force inactive window on default theme */
+@media not (-moz-platform: windows-win7) {
+  @media not (-moz-platform: windows-win8) {
+    #navigator-toolbox:-moz-window-inactive:not(:-moz-lwtheme) {
+      background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
+    }
+  }
+}
+
 .tab-label-container:not([selected="true"], [multiselected]) {
   opacity: 1 !important;
 }
@@ -163,6 +172,7 @@
 .tabbrowser-tab {
   font-size: 12px !important;
   padding-inline: 0 !important;
+  overflow-clip-margin: 4px !important;
 }
 
 #TabsToolbar .toolbarbutton-1>.toolbarbutton-icon,
@@ -250,15 +260,15 @@ toolbarbutton[part="scrollbutton-down"] {
       margin-inline-end: -8px !important;
     }
   }
-}
 
-@media (-moz-mac-big-sur-theme:1) {
-  .titlebar-buttonbox {
-    margin-inline: calc((var(--tab-min-height) + var(--tab-block-margin) - 14px) / 2) !important;
-  }
-
-  .titlebar-buttonbox-container {
-    margin-inline-end: -8px !important;
+  @media (-moz-mac-big-sur-theme:1) {
+    .titlebar-buttonbox {
+      margin-inline: calc((var(--tab-min-height) + var(--tab-block-margin) - 14px) / 2) !important;
+    }
+
+    .titlebar-buttonbox-container {
+      margin-inline-end: -8px !important;
+    }
   }
 }
 
@@ -289,30 +299,21 @@ toolbarbutton[part="scrollbutton-down"] {
 
 
 .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
-  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2), 0 0px 2px rgba(0, 0, 0, 0.2) !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2) !important;
 }
 
 #titlebar {
   box-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset !important;
 }
 
-:root[lwthemetextcolor="bright"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
-  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.55), 0 0px 2px rgba(0, 0, 0, 0.6) !important;
+:root[lwtheme-brighttext="true"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 0px 2px rgba(0, 0, 0, 0.2) !important;
 }
 
-:root[lwthemetextcolor="bright"] #titlebar {
+:root[lwtheme-brighttext="true"] #titlebar {
   box-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.75) inset !important;
 }
 
-/* force inactive window on default theme */
-@media not (-moz-os-version: windows-win7) {
-  @media not (-moz-os-version: windows-win8) {
-    #navigator-toolbox:-moz-window-inactive {
-      background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
-    }
-  }
-}
-
 #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[selected="true"] .tab-label-container {
   --tab-label-mask-size: 0.5em !important;
 }

diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css
@@ -18,7 +18,7 @@
   outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important;
 }
 
-:root:not([lwthemetextcolor="bright"]) #urlbar-background {
+:root:not([lwtheme-brighttext="true"]) #urlbar-background {
   box-shadow: var(--uc-urlbar-shadow, none);
 }