diff --git a/resources/in-content/system.css b/resources/in-content/system.css index 0024218..7412a13 100644 --- a/resources/in-content/system.css +++ b/resources/in-content/system.css @@ -101,6 +101,7 @@ --in-content-primary-button-background-hover: var(--purple-35) !important; --in-content-primary-button-background-active: var(--purple-30) !important; --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important; + --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important; --in-content-button-border-radius: var(--general-button-border-radius) !important; --in-content-item-selected: var(--purple-40) !important; --in-content-item-hover: color-mix(in srgb, var(--purple-30) 45%, transparent) !important; diff --git a/uc-globals.css b/uc-globals.css index cfbd210..3d4dea0 100644 --- a/uc-globals.css +++ b/uc-globals.css @@ -396,7 +396,7 @@ but other than that these variables should be available everywhere. */ --uc-content-button-background-solid: hsl(240, 3%, 18%); --uc-content-border-hover: var(--uc-content-button-background-hover); - --uc-checkbox-border-color: var(--dialog-box-border-color); + --uc-checkbox-border-color: hsla(232, 100%, 85%, 0.2); --uc-checkbox-checked-border-color: transparent; --uc-checkbox-unchecked-bgcolor: var(--uc-arrowpanel-faint); --uc-checkbox-unchecked-hover-bgcolor: var(--uc-arrowpanel-dimmed); diff --git a/uc-navbar.css b/uc-navbar.css index d50e341..7988c25 100644 --- a/uc-navbar.css +++ b/uc-navbar.css @@ -634,8 +634,8 @@ translucent with acrylic effect. enable layout.css.backdrop-filter.enabled */ --in-content-primary-button-background-hover: var(--purple-35) !important; --in-content-primary-button-background-active: var(--purple-30) !important; --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important; + --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important; --in-content-item-selected: var(--purple-40) !important; - --in-content-border-hover: var(--dialog-box-border-hover) !important; --checkbox-border-color: var(--in-content-box-border-color) !important; --checkbox-checked-border-color: transparent !important; --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important; diff --git a/uc-popups.css b/uc-popups.css index 2c191d3..7173d8c 100644 --- a/uc-popups.css +++ b/uc-popups.css @@ -642,7 +642,7 @@ panel[type="autocomplete-richlistbox"] z-index: 0 !important; } -:is(.tab-prompt-dialog, #window-modal-dialog) .dialogBox { +:is(.tab-prompt-dialog, #window-modal-dialog) .dialogBox:not(.fullScreen) { /* tab-prompt-dialogs are anchored to the top of the browser content area. this makes them look like they emerge from under the navbar. */ margin-top: 0px !important; @@ -682,20 +682,6 @@ rtl languages. adjust the border radius accordingly */ border-bottom-right-radius: 5px !important; } -/* blur backdrop filter */ -.content-prompt-dialog > .dialogOverlay[style] .dialogFrame { - /* temporarily disabled due to backdrop-filter being disabled. - see https://bugzilla.mozilla.org/show_bug.cgi?id=1741779 */ - - /* background-color: var(--dialog-bgcolor) !important; - background-image: var(--acrylic-texture) !important; - backdrop-filter: var(--acrylic-blur) !important; - border: 1px solid var(--blurred-dialog-border-color); */ - - background-color: var(--ui-quaternary-bg) !important; - border: 1px solid var(--arrowpanel-border-color); -} - /* hide the background overlay */ .dialogOverlay[topmost="true"], #window-modal-dialog::backdrop { @@ -703,7 +689,7 @@ rtl languages. adjust the border radius accordingly */ } /* make the box shadow even, i hate offset drop shadows */ -:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox { +:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox:not(.fullScreen) { box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 0 8px 2px rgba(0, 0, 0, 0.1) !important; } @@ -715,10 +701,6 @@ rtl languages. adjust the border radius accordingly */ clip-path: inset(0 -100% -100% -100%); } -:is(#window-modal-dialog, .tab-prompt-dialog) > .dialogOverlay[style] .dialogFrame { - background-color: var(--ui-quaternary-bg) !important; -} - /* center text in any dialog box */ .dialog-content-box { -moz-box-pack: center; @@ -749,7 +731,7 @@ rtl languages. adjust the border radius accordingly */ #commonDialogWindow[dialogroot], #commonDialogWindow[dialogroot] *, .dialog-button-box { - --in-content-page-background: transparent !important; + --in-content-page-background: var(--ui-quaternary-bg) !important; --in-content-page-color: var(--uc-parent-page-color) !important; --in-content-box-background: var(--dialog-box-bgcolor) !important; --in-content-box-background-dim: var(--dialog-box-bgcolor-dim) !important; @@ -1129,8 +1111,10 @@ rtl languages. adjust the border radius accordingly */ { :root[dialogroot], :root[dialogroot] dialog, - :root[dialogroot] richlistbox[id]:not(#categories) > richlistitem[selected] { - --in-content-page-background: transparent !important; + :root[dialogroot] richlistbox[id]:not(#categories) > richlistitem[selected], + :root[dialogroot] .onboardingContainer, + :root[dialogroot] .onboardingContainer .screen { + --in-content-page-background: var(--ui-quaternary-bg) !important; --in-content-page-color: var(--uc-parent-page-color) !important; --in-content-box-background: var(--dialog-box-bgcolor) !important; --in-content-box-background-dim: var(--dialog-box-bgcolor-dim) !important; @@ -1163,6 +1147,23 @@ rtl languages. adjust the border radius accordingly */ --dropdown-bgcolor: var(--arrowpanel-background) !important; --in-content-button-border-radius: var(--general-button-border-radius) !important; --in-content-button-vertical-padding: 5px !important; + --mr-welcome-background-color: var(--in-content-page-background) !important; + } + + .onboardingContainer .screen.light-text { + --in-content-page-color: var(--ui-text-100) !important; + --in-content-primary-button-text-color: var(--ui-text-100) !important; + --in-content-primary-button-text-color-hover: var(--ui-text-100) !important; + } + + /* remove spotlight backdrop overlay */ + .onboardingContainer .screen[pos="center"] { + background-color: transparent !important; + } + + .onboardingContainer .main-content { + border: 1px solid var(--arrowpanel-border-color); + background-color: var(--in-content-page-background) !important; } :root[dialogroot] input[type="checkbox"]:checked { diff --git a/uc-tabs.css b/uc-tabs.css index 98434a4..ee4ca25 100644 --- a/uc-tabs.css +++ b/uc-tabs.css @@ -727,16 +727,41 @@ hover the general area of the tabs, but will show if audio is muted. */ transform: translateX(25px) scale(0.5) !important; } +.tab-throbber[busy] { + fill: var(--busy-throbber-fill) !important; +} + +.tab-throbber[progress] { + fill: var(--loading-throbber-fill) !important; +} + .tab-throbber[busy]::before { opacity: 0.8 !important; - fill: var(--busy-throbber-fill) !important; } .tab-throbber[progress]::before { opacity: 1 !important; - fill: var(--loading-throbber-fill) !important; } +:root[sessionrestored] .tab-throbber[fadein] { + display: block !important; + position: relative !important; +} + +@media (prefers-reduced-motion: reduce) { + :root[sessionrestored] .tab-throbber[fadein] { + background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill, fill-opacity !important; + } + + .tab-throbber[busy] { + opacity: 0.8 !important; + } +} + +@media (prefers-reduced-motion: no-preference) { /* tabLoadingSpinner.uc.js enables a special loading throbber animation that spins instead of bouncing horizontally */ @keyframes uc-tab-throbber-spinner-css { @@ -763,10 +788,6 @@ that spins instead of bouncing horizontally */ } } -:root[sessionrestored] .tab-throbber[fadein] { - display: block !important; - position: relative !important; -} /* I made different versions of this animation to circumvent an SVG issue. if you update Firefox and the throbber animation stops working, uncomment one of @@ -781,6 +802,7 @@ thing with the all-tabs-menu loading icons in the next ruleset below. */ animation: none !important; background-position: center !important; background-repeat: no-repeat !important; + fill: inherit !important; /* ANIMATION METHOD #1: this version of the animation is implemented by an tag. it's the most efficient method but it has broken @@ -855,6 +877,7 @@ thing with the all-tabs-menu loading icons in the next ruleset below. */ opacity: 1 !important; fill: var(--loading-throbber-fill) !important; } +} /* hide the close button for pinned tabs. if the last visible tab is pinned, it doesn't hide the close button since the tab doesn't get shrunk in that case. diff --git a/uc-variables.css b/uc-variables.css index a6980bd..27dc16e 100644 --- a/uc-variables.css +++ b/uc-variables.css @@ -124,6 +124,7 @@ menupopup { --in-content-primary-button-background-hover: var(--purple-35) !important; --in-content-primary-button-background-active: var(--purple-30) !important; --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important; + --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important; --menu-background-color: var(--arrowpanel-background) !important; --menu-color: var(--ui-text-80) !important; diff --git a/userChrome.au.css b/userChrome.au.css index 397f860..c0fd7a0 100644 --- a/userChrome.au.css +++ b/userChrome.au.css @@ -314,9 +314,11 @@ so of this stylesheet is dedicated to restoring pre-proton content. */ fill: var(--warning-color); } - .tab-icon-image[sharing]:not([selected]), - .tab-sharing-icon-overlay { - animation: 3s linear uc-tab-sharing-icon-pulse infinite; + @media (prefers-reduced-motion: no-preference) { + .tab-icon-image[sharing]:not([selected]), + .tab-sharing-icon-overlay { + animation: 3s linear uc-tab-sharing-icon-pulse infinite; + } } /* without this, when hovering a tab, the sharing icon and tab icon will just