From 8e94eb8a97f1c85fec6d954c2948122f366b7da0 Mon Sep 17 00:00:00 2001 From: bmFtZQ Date: Fri, 10 Jun 2022 19:52:14 +0800 Subject: [PATCH] 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 --- chrome/content/common.css | 4 +++- chrome/global/colors.css | 18 +++++++++++++--- chrome/icons/icons.css | 2 +- chrome/toolbar/navbar.css | 33 ++++++++++++++++++++++++++---- chrome/toolbar/tabbar.css | 43 ++++++++++++++++++++------------------- chrome/toolbar/urlbar.css | 2 +- 6 files changed, 71 insertions(+), 31 deletions(-) diff --git a/chrome/content/common.css b/chrome/content/common.css index 8f85b47..b82a5b1 100644 --- 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 index cd123f4..a365c91 100644 --- 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 index d5b0a1b..047ccb6 100644 --- 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 index f2e7900..8123bda 100644 --- 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 index 3605f02..b01192e 100644 --- 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 index 0ca1efd..b15994f 100644 --- 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); }