diff --git a/README.md b/README.md index cca7441..0899163 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Firefox Plus (Tested on Windows only) +# Firefox Plus (Windows only) screenshot screenshot screenshot @@ -43,3 +43,13 @@ iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercon ## Star History [![Star History Chart](https://api.star-history.com/svg?repos=amnweb/firefox-plus&type=Date)] + +# Credits + +This project is inspired by the following: +* [Firefox-Mod-Blur](https://github.com/datguypiko/Firefox-Mod-Blur) +* [edge-frfox](https://github.com/bmFtZQ/edge-frfox) + +# License + +This project is licensed under the MIT License. Refer to the LICENSE file for details. \ No newline at end of file diff --git a/chrome/content/common.css b/chrome/content/common.css index bb15e87..cd4a0cb 100644 --- a/chrome/content/common.css +++ b/chrome/content/common.css @@ -8,6 +8,7 @@ @-moz-document url-prefix(about:) { :root { + --newtab-primary-element-text-color: rgba(251, 251, 254, 1) !important; --in-content-page-color: light-dark(var(--newtab-background-color), #fff) !important; --in-content-page-background: light-dark(#f7f7f7, var(--newtab-background-color)) !important; @@ -38,9 +39,6 @@ --in-content-button-background-hover: light-dark(#e5e5e5, #545454) !important; --in-content-button-background-active: light-dark(#d5d5d5, #606060) !important; --in-content-primary-button-text-color: light-dark(#fff, #fff) !important; - --in-content-primary-button-background: light-dark(#0061e0, #006CBE) !important; - --in-content-primary-button-background-hover: light-dark(#0250bb, #0078D4) !important; - --in-content-primary-button-background-active: light-dark(#053e94, #005CA3) !important; --in-content-danger-button-background: light-dark(#DF4951, #E12424) !important; --in-content-danger-button-background-hover: light-dark(#EA656C, #F94343) !important; --in-content-danger-button-background-active: light-dark(#BB353C, #AA1E1E) !important; @@ -50,11 +48,6 @@ --in-content-table-background: light-dark(#f7f7f7, var(--newtab-background-color)) !important; --in-content-text-color: var(--in-content-page-color) !important; scrollbar-color: light-dark(rgb(37 37 37 / .4), rgb(255 255 255 / .4)) light-dark(#f7f7f7, var(--newtab-background-color)) !important; - - --in-content-primary-button-text-color: rgb(255, 255, 255) !important; - --in-content-primary-button-background: #0055D7 !important; - --in-content-primary-button-background-hover: #0960e4 !important; - --in-content-primary-button-background-active: #0751be !important; } #translations-manage-install-list, diff --git a/chrome/content/newtab.css b/chrome/content/newtab.css index 244395e..5f16088 100644 --- a/chrome/content/newtab.css +++ b/chrome/content/newtab.css @@ -136,7 +136,7 @@ url-prefix("about:home") { } -/* private browsing newtab */ +/* Private browsing new tab */ @-moz-document url-prefix(about:privatebrowsing) { :root { --fp-wordmark-color: light-dark(#737373, #fff); diff --git a/chrome/global/browser.css b/chrome/global/browser.css deleted file mode 100644 index d583cbc..0000000 --- a/chrome/global/browser.css +++ /dev/null @@ -1,77 +0,0 @@ -@media (-moz-bool-pref: "uc.tweak.floating-tabs") { - :root { - --browser-frame-bgcolor: var(--lwt-accent-color); - } -} - -@media not (-moz-bool-pref: "uc.tweak.floating-tabs") { - :root { - --browser-frame-bgcolor: var(--toolbar-bgcolor); - } -} - -@media (-moz-bool-pref: "uc.tweak.rounded-corners") { - /* Fix changes to the bookmarks bar made in Firefox 120 */ - :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel, - :root[BookmarksToolbarOverlapsBrowser] #sidebar-box { - padding-top: 0 !important; - } - - :root[BookmarksToolbarOverlapsBrowser] #appcontent, - :root[BookmarksToolbarOverlapsBrowser] #sidebar-box { - margin-top: var(--bookmarks-toolbar-overlapping-browser-height); - } - - :root { - --uc-tweak-rounded-corners-padding: 3px; - --uc-tweak-rounded-corners-border: 1px solid rgb(0 0 0 / .05); - --uc-tweak-rounded-corners-radius: 8px; - --uc-tweak-rounded-corners-shadow: 0px 1px 1px rgb(0 0 0 / .1); - - & #browser:not([style*="--sidebar-border-color"]) { - --sidebar-border-color: light-dark(#bfbfbf80, #595959) !important; - } - } - - /* disable rounded corners in fullscreen, only if the toolbar is hidden */ - :root[inFullscreen] #navigator-toolbox:where([style*="margin-top"], [fullscreenShouldAnimate]) + #browser, - :root[inDOMFullscreen] #browser { - --uc-tweak-rounded-corners-padding: 0; - --uc-tweak-rounded-corners-border: none; - --uc-tweak-rounded-corners-radius: 0; - --uc-tweak-rounded-corners-shadow: none; - } - - #appcontent { - margin-inline: var(--uc-tweak-rounded-corners-padding) !important; - margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; - border-radius: var(--uc-tweak-rounded-corners-radius) !important; - overflow: hidden !important; - border: var(--uc-tweak-rounded-corners-border) !important; - box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; - } - - /* apply rounded corners to sidebar */ - #sidebar-box { - margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important; - margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; - border-radius: var(--uc-tweak-rounded-corners-radius) !important; - overflow: hidden !important; - border: var(--uc-tweak-rounded-corners-border) !important; - box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; - - &[positionend] { - margin-inline-start: 0 !important; - margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; - } - } - - /* remove sidebar border */ - #sidebar-splitter { - border-inline-width: 0 !important; - } - - #browser { - background-color: var(--browser-frame-bgcolor); - } -} diff --git a/chrome/global/colors.css b/chrome/global/colors.css deleted file mode 100644 index 1e60c8f..0000000 --- a/chrome/global/colors.css +++ /dev/null @@ -1,335 +0,0 @@ -/* default colours (light & dark) */ -:root:not(:-moz-lwtheme), -:root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"] { - --lwt-accent-color: light-dark(#cecece, #1C1C1C) !important; - --lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important; - --lwt-text-color: light-dark(#000, #E5E5E5) !important; - --toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important; - --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important; - --toolbar-color: light-dark(#000, #fff) !important; - --toolbarbutton-icon-fill: light-dark(#000, #fff) !important; - --chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important; - --lwt-toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important; - --toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important; - --lwt-tab-text: var(--toolbar-color) !important; - --lwt-selected-tab-background-color: unset !important; - --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; - --toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important; - --toolbar-field-color: light-dark(#000, #fff) !important; - --toolbar-field-border-color: light-dark(#0000, #0000) !important; - --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; - --toolbar-field-focus-color: var(--toolbar-field-color) !important; - --toolbar-field-focus-border-color: light-dark(#0055D7, #0055D7) !important; - --link-color: light-dark(#0078D4, #75B6E8) !important; - --urlbar-hover-highlight-color: light-dark(rgb(192 192 192 / .5), rgb(128 128 128 / .5)) !important; - --urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important; - --urlbar-box-hover-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important; - --urlbar-box-focus-bgcolor: light-dark(rgb(0 0 0 / .22), rgb(255 255 255 / .28)) !important; - --urlbar-icon-fill-opacity: 1 !important; - --urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important; - --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important; - --autocomplete-popup-background: light-dark(#fff, #4A4A4A) !important; - --autocomplete-popup-color: light-dark(#fff, #fff) !important; - --autocomplete-popup-highlight-background: light-dark(#f2f2f2, #383838) !important; - --autocomplete-popup-hover-background: light-dark(#e5e5e5, #444444) !important; - --autocomplete-popup-separator-color: light-dark(#dadada00, #63636300) !important; - --button-bgcolor: light-dark(#EDEDED, #5C5C5C) !important; - --button-hover-bgcolor: light-dark(#e5e5e5, #646464) !important; - --button-active-bgcolor: light-dark(#d5d5d5, #575757) !important; - --button-primary-bgcolor: light-dark(#0078D4, #006CBE) !important; - --button-primary-hover-bgcolor: light-dark(#006CBE, #0078D4) !important; - --button-primary-active-bgcolor: light-dark(#1683D8, #005CA3) !important; - --button-primary-color: light-dark(#fff, #fff) !important; - --error-text-color: light-dark(#FF9AA2, #FF9AA2) !important; - --input-bgcolor: light-dark(#fff, #4A4A4A) !important; - --input-color: light-dark(#2b2b2b, #fff) !important; - --input-border-color: light-dark(#bebebe, #8A8A8A) !important; - --input-error-border-color: light-dark(#FF848A, #FF848A) !important; - --zoom-controls-bgcolor: light-dark(#4A4A4A, #4A4A4A) !important; - --arrowpanel-background: light-dark(#fff, #4A4A4A) !important; - --arrowpanel-color: light-dark(#1c1c1c, #fff) !important; - --panel-description-color: light-dark(#000a, #fffb) !important; - --panel-disabled-color: light-dark(#9E9E9E, #ABABAA) !important; - --arrowpanel-dimmed: light-dark(#565656, #565656) !important; - --arrowpanel-dimmed-further: light-dark(#707070, #707070) !important; - --panel-item-hover-bgcolor: light-dark(#eee, #646464) !important; - --panel-item-active-bgcolor: light-dark(#ddd, #747474) !important; - --arrowpanel-border-color: light-dark(#dadada, #636363) !important; - --panel-separator-color: light-dark(#dadada, #636363) !important; - --panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important; - --focus-outline-color: light-dark(#0055D7, #63ADE5) !important; - --panel-shortcut-color: inherit !important; - --fp-urlbar-shadow: 0 0 4px rgb(0 0 0 / .1); - --toolbarbutton-hover-background: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .1)) !important; - --toolbarbutton-active-background: light-dark(rgb(0 0 0 / .12), rgb(255 255 255 / .16)) !important; - --fp-private-browsing-indicator: var(--button-primary-bgcolor); - --fp-private-browsing-indicator-text: var(--button-primary-color); - --tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important; - --tab-icon-overlay-fill: light-dark(#252525, #fff) !important; - --toolbarseparator-color: color-mix(in srgb, currentColor 40%, transparent) !important; - --in-content-primary-button-text-color: rgb(255, 255, 255) !important; - --in-content-primary-button-background: #0055D7 !important; - --in-content-primary-button-background-hover: #0960e4 !important; - --in-content-primary-button-background-active: #0751be !important; -} - -/* ensure that dark mode is enabled completely in private browsing mode. */ -@media (-moz-bool-pref: "browser.theme.dark-private-windows") { - :root[privatebrowsingmode="temporary"], - :root[privatebrowsingmode="temporary"] #nav-bar, - :root[privatebrowsingmode="temporary"] #PersonalToolbar { - color-scheme: dark !important; - } -} - -#urlbar { - --urlbar-box-bgcolor: inherit !important; - --urlbar-box-hover-bgcolor: inherit !important; - --urlbar-box-focus-bgcolor: inherit !important; -} - -/* Change Colour of page when loading */ -:root:not(:-moz-lwtheme) #tabbrowser-tabpanels { - background-color: light-dark(#f7f7f7, #252525) !important; -} - -/* make the titlebar buttons black/white on default themes */ -:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox { - color: light-dark(#000, #fff) !important; -} - -#statuspanel-label { - background-color: var(--toolbar-field-focus-background-color) !important; - color: var(--toolbar-field-focus-color) !important; - border-color: transparent !important; - box-shadow: 0 2px 5px #0004, 0 0 0 1px light-dark(#0002, #0004) !important; -} - -@media (-moz-platform: windows) { - tooltip { - background-color: var(--arrowpanel-background) !important; - color: var(--arrowpanel-color) !important; - border-color: var(--arrowpanel-border-color) !important; - } - - .titlebar-button:not(.titlebar-close):hover { - background-color: color-mix(in srgb, currentColor 11%, transparent) !important; - } - - .titlebar-button:hover:active { - background-color: color-mix(in srgb, currentColor 20%, transparent) !important; - } - - .titlebar-close:hover { - stroke: white !important; - background-color: #e81123 !important; - } - - .titlebar-close:hover:active { - background-color: #EF6B76 !important; - } - - toolbar[brighttext] .titlebar-close:hover:active { - background-color: #9C1420 !important; - } - - /* library window theme */ - window#places { - --organizer-color: #000 !important; - --organizer-deemphasized-color: #666 !important; - --organizer-toolbar-background: #f7f7f7 !important; - --organizer-pane-background: #f7f7f7 !important; - --organizer-content-background: #f7f7f7 !important; - --organizer-hover-background: #00000025 !important; - --organizer-selected-background: #006CBE80 !important; - --organizer-outline-color: #0055D7a0 !important; - --organizer-toolbar-field-background: #fff !important; - --organizer-toolbar-field-background-focused: #fff !important; - --organizer-border-color: #bfbfbf !important; - scrollbar-color: #0006 #f7f7f740 !important; - } - - #placesViewsBox #downloadsListBox richlistitem[selected="true"] { - background-color: #006CBE !important; - color: #fff !important; - } - - #placeContentColumns :is(treecol, treecolpicker) { - background-color: #f7f7f7 !important; - color: #000 !important; - border-inline-start: 1px solid #bfbfbf !important; - box-shadow: inset 0 -1px #bfbfbf !important; - appearance: none !important; - } - - #placeContentColumns :is(treecol, treecolpicker):where(:hover) { - background-color: #cecece !important; - color: #000 !important; - } - - @media (prefers-color-scheme: dark) { - window#places { - --organizer-color: #fff !important; - --organizer-deemphasized-color: #bbb !important; - --organizer-toolbar-background: #3B3B3B !important; - --organizer-pane-background: #2B2B2B !important; - --organizer-content-background: #1C1C1C !important; - --organizer-hover-background: #ffffff25 !important; - --organizer-selected-background: #006CBE80 !important; - --organizer-outline-color: #63ADE5 !important; - --organizer-toolbar-field-background: #2B2B2B !important; - --organizer-toolbar-field-background-focused: #2B2B2B !important; - --organizer-border-color: #686868 !important; - scrollbar-color: #fff6 #2B2B2B40 !important; - } - - #placesViewsBox #downloadsListBox richlistitem[selected="true"] { - background-color: #006CBE !important; - color: #fff !important; - } - - #placeContentColumns :is(treecol, treecolpicker) { - background-color: #3B3B3B !important; - color: #fff !important; - border-inline-start: 1px solid #686868 !important; - box-shadow: inset 0 -1px #686868 !important; - } - - #placeContentColumns :is(treecol, treecolpicker):where(:hover) { - background-color: #4A4A4A !important; - color: #fff !important; - } - } -} - -/* side bar theme */ -#sidebar-box:not([lwt-sidebar]) { - --sidebar-background-color: light-dark(#f7f7f7, #3b3b3b) !important; - --sidebar-text-color: light-dark(#000, #fff) !important; - appearance: none !important; -} - -#browser:not([style*="--sidebar-border-color"]) { - --sidebar-border-color: light-dark(#bfbfbf, #686868) !important; -} - -.sidebar-panel:not([lwt-sidebar]) { - color: light-dark(#000, #fff) !important; - scrollbar-color: light-dark(#0006, #fff6) light-dark(#f7f7f740, #3b3b3b40) !important; -} - -@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml){ -body { - background: transparent !important; -} -} - -@media(-moz-platform: windows) { - - .sidebar-panel:not([lwt-sidebar]) #sidebar-search-container>#search-box, - .sidebar-panel:not([lwt-sidebar]) #viewButton { - appearance: none !important; - background-color: light-dark(#fff, #2b2b2b) !important; - color: inherit !important; - border: 1px solid light-dark(#bfbfbf, #686868) !important; - border-radius: 2px !important; - } -} - -/* Linux / GTK csd support */ -@media (-moz-gtk-csd-available) { - :root:not(:-moz-lwtheme) { - --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important; - --toolbar-bgimage: none !important; - --toolbar-color: -moz-dialogtext !important; - --tab-selected-bgimage: none !important; - --chrome-content-separator-color: ThreeDShadow !important; - --panel-separator-color: ThreeDShadow !important; - --button-bgcolor: color-mix(in srgb, currentColor 10%, transparent) !important; - --button-hover-bgcolor: color-mix(in srgb, currentColor 14%, transparent) !important; - --button-active-bgcolor: color-mix(in srgb, currentColor 20%, transparent) !important; - --button-color: currentColor !important; - --button-primary-bgcolor: -moz-accent-color !important; - --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, -moz-accent-color) !important; - --button-primary-active-bgcolor: color-mix(in srgb, black 20%, -moz-accent-color) !important; - --button-primary-color: -moz-accent-color-foreground !important; - --autocomplete-popup-hover-background: var(--arrowpanel-dimmed) !important; - --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent) !important; - --urlbar-box-bgcolor: var(--button-bgcolor) !important; - --urlbar-box-focus-bgcolor: var(--button-bgcolor) !important; - --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor) !important; - --urlbar-box-active-bgcolor: var(--button-active-bgcolor) !important; - --urlbar-box-text-color: inherit !important; - --urlbar-box-hover-text-color: var(--urlbar-box-text-color) !important; - --urlbar-icon-fill-opacity: 0.9 !important; - --urlbar-popup-url-color: -moz-nativehyperlinktext !important; - --lwt-brighttext-url-color: #00ddff !important; - --toolbarbutton-icon-fill-attention: -moz-nativehyperlinktext !important; - --focus-outline-color: -moz-accent-color !important; - --arrowpanel-background: Field !important; - --arrowpanel-color: FieldText !important; - --arrowpanel-border-color: ThreeDShadow !important; - --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important; - --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent) !important; - --panel-description-color: GrayText !important; - --panel-disabled-color: GrayText !important; - --toolbarbutton-icon-fill: currentColor !important; - --toolbar-field-background-color: Field !important; - --toolbar-field-color: FieldText !important; - --toolbar-field-border-color: ThreeDShadow !important; - --toolbar-field-focus-background-color: Field !important; - --toolbar-field-focus-color: FieldText !important; - --toolbar-field-focus-border-color: -moz-accent-color !important; - --toolbarbutton-hover-background: color-mix(in srgb, -moz-dialogtext 14%, transparent) !important; - --toolbarbutton-active-background: color-mix(in srgb, -moz-dialogtext 20%, transparent) !important; - --fp-urlbar-shadow: none; - --autocomplete-popup-highlight-color: FieldText !important; - --autocomplete-popup-highlight-background: color-mix(in srgb, currentColor 8%, transparent) !important; - --autocomplete-popup-hover-background: color-mix(in srgb, currentColor 12%, transparent) !important; - --autocomplete-popup-separator-color: #0000 !important; - --panel-item-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important; - --panel-item-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important; - --panel-separator-color: ThreeDShadow !important; - --panel-banner-item-update-supported-bgcolor: #1bba6b !important; - --focus-outline-color: -moz-accent-color !important; - --fp-private-browsing-indicator: -moz-accent-color !important; - --fp-private-browsing-indicator-text: var(--button-primary-color); - } - - #sidebar-box:not([lwt-sidebar]) { - --sidebar-background-color: -moz-dialog !important; - --sidebar-text-color: -moz-dialog-text !important; - } - - #browser:not([style*="--sidebar-border-color"]) { - --sidebar-border-color: ThreeDShadow !important; - } - - .sidebar-panel:not([lwt-sidebar]) { - color: -moz-dialogtext !important; - } - - @media (prefers-color-scheme: light) { - :root:not(:-moz-lwtheme) { - --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 65%, #fff) !important; - --urlbar-icon-fill-opacity: 0.7 !important; - --toolbar-field-border-color: transparent !important; - --toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important; - --toolbar-field-color: FieldText !important; - --toolbar-field-focus-background-color: Field !important; - --toolbar-field-focus-color: FieldText !important; - } - } - - @media (prefers-color-scheme: dark) { - :root:not(:-moz-lwtheme) { - --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 90%, #fff) !important; - --urlbar-icon-fill-opacity: 1.0 !important; - --toolbar-field-border-color: transparent !important; - --toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important; - --toolbar-field-color: FieldText !important; - --toolbar-field-focus-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important; - --toolbar-field-focus-color: FieldText !important; - } - } -} \ No newline at end of file diff --git a/chrome/global/popup.css b/chrome/global/general.css similarity index 78% rename from chrome/global/popup.css rename to chrome/global/general.css index 5a20f0e..435a368 100644 --- a/chrome/global/popup.css +++ b/chrome/global/general.css @@ -1,3 +1,177 @@ +:root { + --button-primary-bgcolor:#0055D7!important; + --button-primary-hover-bgcolor:#0960e4 !important; + --button-primary-active-bgcolor:#0751be !important; + --in-content-primary-button-text-color: rgb(255, 255, 255) !important; + --in-content-primary-button-background: #0055D7 !important; + --in-content-primary-button-background-hover: #0960e4 !important; + --in-content-primary-button-background-active: #0751be !important; +} +/* Change Colour of page when loading */ +:root:not(:-moz-lwtheme) #tabbrowser-tabpanels { + background-color: light-dark(#f7f7f7, #252525) !important; +} + +/* dark mode enabled in private browsing. */ +@media (-moz-bool-pref: "browser.theme.dark-private-windows") { + :root[privatebrowsingmode="temporary"], + :root[privatebrowsingmode="temporary"] #nav-bar, + :root[privatebrowsingmode="temporary"] #PersonalToolbar { + color-scheme: dark !important; + } +} + +#urlbar { + --urlbar-box-bgcolor: inherit !important; + --urlbar-box-hover-bgcolor: inherit !important; + --urlbar-box-focus-bgcolor: inherit !important; +} + +:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox { + color: light-dark(#000, #fff) !important; +} + +#statuspanel-label { + background-color: var(--toolbar-field-focus-background-color) !important; + color: var(--toolbar-field-focus-color) !important; + border-color: transparent !important; + box-shadow: 0 2px 5px #0004, 0 0 0 1px light-dark(#0002, #0004) !important; +} + +tooltip { + background-color: var(--arrowpanel-background) !important; + color: var(--arrowpanel-color) !important; + border-color: var(--arrowpanel-border-color) !important; +} + +.titlebar-button:not(.titlebar-close):hover { + background-color: color-mix( + in srgb, + currentColor 11%, + transparent + ) !important; +} + +.titlebar-button:hover:active { + background-color: color-mix( + in srgb, + currentColor 20%, + transparent + ) !important; +} + +.titlebar-close:hover { + stroke: white !important; + background-color: #e81123 !important; +} + +.titlebar-close:hover:active { + background-color: #ef6b76 !important; +} + +toolbar[brighttext] .titlebar-close:hover:active { + background-color: #9c1420 !important; +} + +window#places { + --organizer-color: #000 !important; + --organizer-deemphasized-color: #666 !important; + --organizer-toolbar-background: #f7f7f7 !important; + --organizer-pane-background: #f7f7f7 !important; + --organizer-content-background: #f7f7f7 !important; + --organizer-hover-background: #00000025 !important; + --organizer-selected-background: #006cbe80 !important; + --organizer-outline-color: #0055d7a0 !important; + --organizer-toolbar-field-background: #fff !important; + --organizer-toolbar-field-background-focused: #fff !important; + --organizer-border-color: #bfbfbf !important; + scrollbar-color: #0006 #f7f7f740 !important; +} + +#placesViewsBox #downloadsListBox richlistitem[selected="true"] { + background-color: #006cbe !important; + color: #fff !important; +} + +#placeContentColumns :is(treecol, treecolpicker) { + background-color: #f7f7f7 !important; + color: #000 !important; + border-inline-start: 1px solid #bfbfbf !important; + box-shadow: inset 0 -1px #bfbfbf !important; + appearance: none !important; +} + +#placeContentColumns :is(treecol, treecolpicker):where(:hover) { + background-color: #cecece !important; + color: #000 !important; +} + +@media (prefers-color-scheme: dark) { + window#places { + --organizer-color: #fff !important; + --organizer-deemphasized-color: #bbb !important; + --organizer-toolbar-background: #3b3b3b !important; + --organizer-pane-background: #2b2b2b !important; + --organizer-content-background: #1c1c1c !important; + --organizer-hover-background: #ffffff25 !important; + --organizer-selected-background: #006cbe80 !important; + --organizer-outline-color: #63ade5 !important; + --organizer-toolbar-field-background: #2b2b2b !important; + --organizer-toolbar-field-background-focused: #2b2b2b !important; + --organizer-border-color: #686868 !important; + scrollbar-color: #fff6 #2b2b2b40 !important; + } + + #placesViewsBox #downloadsListBox richlistitem[selected="true"] { + background-color: #006cbe !important; + color: #fff !important; + } + + #placeContentColumns :is(treecol, treecolpicker) { + background-color: #3b3b3b !important; + color: #fff !important; + border-inline-start: 1px solid #686868 !important; + box-shadow: inset 0 -1px #686868 !important; + } + + #placeContentColumns :is(treecol, treecolpicker):where(:hover) { + background-color: #4a4a4a !important; + color: #fff !important; + } +} + +/* side bar theme */ +#sidebar-box:not([lwt-sidebar]) { + --sidebar-background-color: light-dark(#f7f7f7, #3b3b3b) !important; + --sidebar-text-color: light-dark(#000, #fff) !important; + appearance: none !important; +} + +#browser:not([style*="--sidebar-border-color"]) { + --sidebar-border-color: light-dark(#bfbfbf, #686868) !important; +} + +.sidebar-panel:not([lwt-sidebar]) { + color: light-dark(#000, #fff) !important; + scrollbar-color: light-dark(#0006, #fff6) light-dark(#f7f7f740, #3b3b3b40) !important; +} + +@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml) +{ + body { + background: transparent !important; + } +} + +.sidebar-panel:not([lwt-sidebar]) #sidebar-search-container > #search-box, +.sidebar-panel:not([lwt-sidebar]) #viewButton { + appearance: none !important; + background-color: light-dark(#fff, #2b2b2b) !important; + color: inherit !important; + border: 1px solid light-dark(#bfbfbf, #686868) !important; + border-radius: 2px !important; +} + :root { --panel-subview-body-padding: 2px 0 !important; --arrowpanel-border-radius: 8px !important; @@ -11,7 +185,6 @@ --panel-separator-margin-vertical: 2px !important; --panel-separator-margin-horizontal: 0 !important; - --fp-panel-zoom-button-padding: 8px; --fp-panel-zoom-button-inline-padding: 9px; --fp-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--fp-arrowpanel-menuitem-margin-block)); @@ -43,7 +216,7 @@ --in-content-page-background: var(--fp-contextmenu-bgcolor) !important; } -/* app menu */ +/* App Menu */ .addon-banner-item, .panel-banner-item { margin: 2px 4px 2px !important; @@ -115,7 +288,6 @@ padding: var(--fp-panel-zoom-button-padding) calc(var(--fp-panel-zoom-button-padding) / 2) !important; } -/* #appMenu-zoomReduce-button2, */ #appMenu-zoom-controls>#appMenu-fullscreen-button2 { margin-left: calc((var(--panel-separator-margin-vertical) + var(--fp-arrowpanel-menuitem-margin-block)) * 2 + 1px) !important; } @@ -386,9 +558,7 @@ menuitem[checked="true"]>.menu-iconic-left, .menuitem-iconic>.menu-iconic-left { margin: 0 !important; } - - - + /* Context Menu */ menupopup:not(.PanelUI-subView), menupopup:not(.PanelUI-subView) menuitem, @@ -432,8 +602,7 @@ menupopup:not(.PanelUI-subView) { .panel-arrowbox { display: none !important; } - -/* cut off shadow so it doesn't get in the way of the menubar items */ + menubar menupopup { padding: 1px 8px 20px !important; margin: -1px -4px -16px !important; @@ -463,9 +632,7 @@ panel { } } - - -/* use default shadow for subview menupopup (eg. bookmarks) */ + menupopup.PanelUI-subView { --fp-box-shadow: 0 0 0 1px var(--panel-border-color); --fp-margin: 1px !important; @@ -667,4 +834,11 @@ menuitem[checked="true"]>.menu-iconic-left, :not(menupopup:not(#contentAreaContextMenu) > menuitem)[id^="sidebartabs_asamuzak_jp-menuitem-"]>.menu-text { margin-left: -20px !important; } -} \ No newline at end of file +} +.findbar-textbox:focus { + outline: 2px solid rgba(0, 102, 255, 0.9) !important; + } + +.findbar-textbox[status="notfound"] { + outline: 2px solid #E22850 !important; + } \ No newline at end of file diff --git a/chrome/global/rounded-corners.css b/chrome/global/rounded-corners.css index 336d9ac..6d0c72f 100644 --- a/chrome/global/rounded-corners.css +++ b/chrome/global/rounded-corners.css @@ -1,31 +1,22 @@ :root[tabsintitlebar] #titlebar:-moz-window-inactive { opacity: 1 !important; } -/*Variables for the rounded corners. */ #main-window:not([chromehidden~="toolbar"]) { --rounded-corners-padding: 4px; --browser-frame-bgcolor: var(--toolbar-bgcolor, var(--lwt-accent-color)); --rounded-corners-radius: 8px; } -/*Hide border below titlebar on macOS */ -@media (-moz-platform: macos) { - :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { - border-top: none !important; - } -} -/* Remove separator between toolbars and the browser window */ #navigator-toolbox { border-bottom: none !important; } -/*Disable rounded corners in fullscreen, only if the toolbar is hidden.*/ +/*Disable rounded corners in fullscreen if the toolbar is hidden.*/ :root[inFullscreen] #navigator-toolbox[style*="margin-top"]+#browser, :root[inDOMFullscreen] #browser { --rounded-corners-padding: 0; --rounded-corners-radius: 0; } -/* Apply rounded corners to the browser container. */ #appcontent .browserStack { margin-inline: var(--rounded-corners-padding) !important; margin-block-end: var(--rounded-corners-padding) !important; @@ -76,7 +67,6 @@ transform: rotate(0deg) !important; } -/* Apply colour to the frame around the browser window. */ #browser { background-color: var(--browser-frame-bgcolor) !important; } diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css index 3e7fefc..b48c2b6 100644 --- a/chrome/icons/icons.css +++ b/chrome/icons/icons.css @@ -1,92 +1,83 @@ -/* windows 11 style window controls (no known way to detect between windows 10 -and 11 so applied to both) */ -@media (-moz-platform: windows), (-moz-gtk-csd-available) { - .titlebar-min { - list-style-image: url("win11-minimize.svg") !important; +.titlebar-min { + list-style-image: url("win11-minimize.svg") !important; +} + +.titlebar-max { + list-style-image: url("win11-maximize.svg") !important; +} + +.titlebar-restore { + list-style-image: url("win11-restore.svg") !important; +} + +.titlebar-close { + list-style-image: url("win11-close.svg") !important; +} + +@media (max-resolution: 1dppx) { + toolbar[brighttext] .titlebar-close, + .titlebar-close:hover { + list-style-image: url("win11-close-dark.svg") !important; } +} +@media (-moz-bool-pref: "fp.tweak.macos-button") { + .titlebar-min { + list-style-image: url("mac-minimize.svg") !important; + } + .titlebar-close { + margin-right: 4px !important; + } .titlebar-max { - list-style-image: url("win11-maximize.svg") !important; + list-style-image: url("mac-maximize.svg") !important; } .titlebar-restore { - list-style-image: url("win11-restore.svg") !important; + list-style-image: url("mac-restore.svg") !important; } .titlebar-close { - list-style-image: url("win11-close.svg") !important; + list-style-image: url("mac-close.svg") !important; } - - /* darkmode icon that uses thicker strokes and is easier to see (only needed - at 1x scale) */ @media (max-resolution: 1dppx) { toolbar[brighttext] .titlebar-close, .titlebar-close:hover { - list-style-image: url("win11-close-dark.svg") !important; + list-style-image: url("mac-close.svg") !important; } } - - @media (-moz-bool-pref: "fp.tweak.macos-button") { - .titlebar-min { - list-style-image: url("mac-minimize.svg") !important; - } - .titlebar-close { - margin-right:4px !important; - } - .titlebar-max { - list-style-image: url("mac-maximize.svg") !important; - } - - .titlebar-restore { - list-style-image: url("mac-restore.svg") !important; - } - - .titlebar-close { - list-style-image: url("mac-close.svg") !important; - } - @media (max-resolution: 1dppx) { - toolbar[brighttext] .titlebar-close, - .titlebar-close:hover { - list-style-image: url("mac-close.svg") !important; - } + .titlebar-button { + & > .toolbarbutton-icon { + width: 24px !important; + height: 24px !important; } + } + .titlebar-button { + padding: 0 0px !important; + filter: grayscale(1) brightness(6); + opacity: 0.25 !important; + } - .titlebar-button { - & > .toolbarbutton-icon { - width: 24px !important; - height: 24px !important; - } - } - .titlebar-button { - padding: 0 0px !important; - filter: grayscale(1) brightness(6); - opacity: 0.25 !important; - } - - #titlebar:hover .titlebar-button { - filter: grayscale(0) brightness(1); - opacity: 0.8 !important; - } - - :-moz-window-inactive .titlebar-button { - opacity: 0.5 !important; - } - - .titlebar-button:hover,.titlebar-button:not(.titlebar-close):hover { - background-color: transparent !important; - } - - toolbar[brighttext] .titlebar-close:hover:active { - background-color: transparent !important; - } - #titlebar .titlebar-button:hover { - opacity: 1 !important; - } + #titlebar:hover .titlebar-button { + filter: grayscale(0) brightness(1); + opacity: 0.8 !important; } + :-moz-window-inactive .titlebar-button { + opacity: 0.5 !important; + } + .titlebar-button:hover, + .titlebar-button:not(.titlebar-close):hover { + background-color: transparent !important; + } + toolbar[brighttext] .titlebar-close:hover:active { + background-color: transparent !important; + } + #titlebar .titlebar-button:hover { + opacity: 1 !important; + } } .subviewbutton { @@ -103,8 +94,6 @@ and 11 so applied to both) */ border-radius: 100% !important; } - - #back-button { list-style-image: url("back.svg") !important; } @@ -673,9 +662,10 @@ menupopup > menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon { .in-menulist, .in-menulist menu, .unified-nav-current - ),#toggle_toolbar-menubar, - #PanelUI-history toolbarbutton, - #unified-extensions-context-menu menuitem{ + ), +#toggle_toolbar-menubar, +#PanelUI-history toolbarbutton, +#unified-extensions-context-menu menuitem { background-image: var(--menu-image) !important; background-size: 16px !important; background-position: var(--fp-contextmenu-menuitem-padding-inline) center !important; @@ -684,9 +674,11 @@ menupopup > menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon { fill: currentColor !important; } -menu>.menu-iconic-text, -menuitem>.menu-iconic-text { - padding-inline-start: var(--fp-contextmenu-menuicon-margin-inline) !important; +menu > .menu-iconic-text, +menuitem > .menu-iconic-text { + padding-inline-start: var( + --fp-contextmenu-menuicon-margin-inline + ) !important; } #context-savepage { --menu-image: url("save.svg"); @@ -705,7 +697,7 @@ menuitem>.menu-iconic-text { #toolbar-context-undoCloseTab { --menu-image: url("edit-undo.svg"); } -#toggle_toolbar-menubar{ +#toggle_toolbar-menubar { --menu-image: url("menu-bar.svg"); } @@ -807,8 +799,7 @@ menuitem[id="placesContext_deleteHost"] { #context-pdfjs-copy { --menu-image: url("link.svg"); } -#context-openlinkincurrent -{ +#context-openlinkincurrent { --menu-image: url("ext-link.svg"); } @@ -968,11 +959,11 @@ menuitem[id="placesContext_showAllBookmarks"], #BMB_searchBookmarks { --menu-image: url("search-page.svg"); } -#appMenuRecentlyClosedTabs { +#appMenuRecentlyClosedTabs { --menu-image: url("container-tab.svg"); } #appMenuClearRecentHistory { - --menu-image: url("edit-delete.svg") + --menu-image: url("edit-delete.svg"); } #appMenuRecentlyClosedWindows { --menu-image: url("window.svg"); @@ -983,7 +974,6 @@ menuitem[id="placesContext_showAllBookmarks"], #PanelUI-historyMore { --menu-image: url("manage.svg"); } - menuitem[id="placesContext_new:bookmark"], menuitem[id="placesContext_new:folder"], @@ -1008,7 +998,8 @@ menuitem[id="placesContext_new:separator"] { --menu-image: url("container-tab.svg"); } -#context_closeTab,#context_closeDuplicateTabs { +#context_closeTab, +#context_closeDuplicateTabs { --menu-image: url("close.svg"); } #context_closeTabOptions { @@ -1019,17 +1010,14 @@ menuitem[id="placesContext_new:separator"] { --menu-image: url("report.svg"); } -/* FIX header icons for the app menu sub menus (eg. fx account, history...) */ .panel-header > h1 { text-align: left; margin-left: 8px !important; } .wordmark::after { content: "Plus" !important; - - } +} -/* header icons for the app menu sub menus (eg. fx account, history...) */ .panel-header > h1 > span::before { content: ""; background: var(--header-image, none) center / 16px no-repeat; @@ -1081,17 +1069,37 @@ menuitem[id="placesContext_new:separator"] { .unified-extensions-context-menu-move-widget-up { --menu-image: url("arrow-up.svg"); } -.unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon -{ - height: 24px !important; - width: 24px !important; +.unified-extensions-item + .webextension-browser-action.subviewbutton + > .toolbarbutton-badge-stack + > .toolbarbutton-icon { + height: 24px !important; + width: 24px !important; } -:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current), - :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current), - :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menucaption - { - padding-inline-start: calc(var(--fp-contextmenu-menuitem-padding-inline) + 16px + var(--fp-contextmenu-menuicon-margin-inline)) !important; - } - - +:not(:not(menubar) > menu, #ContentSelectDropdown) + > menupopup + > menuitem:not( + .menuitem-iconic, + [type="checkbox"], + [type="radio"], + .in-menulist, + .in-menulist menuitem, + .unified-nav-current + ), +:not(:not(menubar) > menu, #ContentSelectDropdown) + > menupopup + > menu:not( + .menu-iconic, + [type="checkbox"], + [type="radio"], + .in-menulist, + .in-menulist menu, + .unified-nav-current + ), +:not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menucaption { + padding-inline-start: calc( + var(--fp-contextmenu-menuitem-padding-inline) + 16px + + var(--fp-contextmenu-menuicon-margin-inline) + ) !important; +} diff --git a/chrome/toolbar/findbar.css b/chrome/toolbar/findbar.css deleted file mode 100644 index 7859275..0000000 --- a/chrome/toolbar/findbar.css +++ /dev/null @@ -1,40 +0,0 @@ -.findbar-find-previous, -.findbar-find-next, -.close-icon { - border-radius: var(--toolbarbutton-border-radius) !important; -} - -.findbar-textbox { - border: 0 !important; - border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important; -} - -.findbar-textbox:-moz-lwtheme { - background-color: var(--toolbar-field-background-color) !important; -} - -.findbar-textbox:focus { - outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; - outline-offset: -1px !important; -} - -.findbar-textbox[status="notfound"] { - outline: 2px solid var(--input-error-border-color, #E22850) !important; - outline-offset: -1px !important; -} - -.findbar-container { - overflow-inline: visible !important; -} - -.close-icon:not([disabled]):hover, -.findbar-find-previous:not([disabled]):hover, -.findbar-find-next:not([disabled]):hover { - background: var(--toolbarbutton-hover-background, rgb(190 190 190 / .2)) !important; -} - -.close-icon:not([disabled]):hover:active, -.findbar-find-previous:not([disabled]):hover:active, -.findbar-find-next:not([disabled]):hover:active { - background: var(--toolbarbutton-active-background, rgb(190 190 190 / .4)) !important; -} diff --git a/chrome/toolbar/personalbar.css b/chrome/toolbar/personalbar.css index 32bb1eb..e5d50e9 100644 --- a/chrome/toolbar/personalbar.css +++ b/chrome/toolbar/personalbar.css @@ -12,12 +12,11 @@ toolbarbutton.bookmark-item:not(.subviewbutton) { padding-inline: 6px !important; font-size: 12px !important; - /* Adjust vertical label position on Windows */ - @media (-moz-platform: windows) { + & .toolbarbutton-text { margin-block: -1px 0 !important; } - } + } #PersonalToolbar .toolbarbutton-1 { @@ -72,20 +71,18 @@ toolbarbutton.bookmark-item[open="true"] > .toolbarbutton-icon{ --bookmarks-toolbar-overlapping-browser-height: 34px !important; } - - /* Autohide bookmark toolbar */ @media (-moz-bool-pref: "fp.tweak.autohide-bookmarks") { #PersonalToolbar{ - --bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ - --autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ - --autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */ - --autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */ + --bookmarks-padding: 4px; + --autohide-toolbar-delay: 600ms; + --autohide-toolbar-focus-rotation: 0deg; + --autohide-toolbar-hover-rotation: 0deg; } :root { --firefoxcss-bookmarks-bg-color: transparent !important; } -:root[uidensity="touch"] #PersonalToolbar{ --bm-padding: 7px } +:root[uidensity="touch"] #PersonalToolbar{ --bookmarks-padding: 7px } #PersonalToolbar:not([customizing]){ position: relative; margin-bottom: -34px; @@ -112,7 +109,7 @@ toolbarbutton.bookmark-item[open="true"] > .toolbarbutton-icon{ #PlacesToolbarItems > .bookmark-item, #OtherBookmarks, #PersonalToolbar > #import-button{ - padding-block: var(--bm-padding) !important; + padding-block: var(--bookmarks-padding) !important; } #nav-bar:focus-within + #PersonalToolbar{ diff --git a/chrome/toolbar/searchbar.css b/chrome/toolbar/searchbar.css index 44ee28d..6935ce2 100644 --- a/chrome/toolbar/searchbar.css +++ b/chrome/toolbar/searchbar.css @@ -80,11 +80,10 @@ border-radius: var(--toolbarbutton-border-radius); } -@media (-moz-platform: windows) { .searchbar-engine-one-off-item:focus-visible { outline: none; } -} + /* We don't handle `:active` because it doesn't work on the search or settings buttons due to event.preventDefault() in SearchOneOffs._on_mousedown(). */ @@ -165,19 +164,9 @@ fill-opacity: var(--urlbar-icon-fill-opacity); } -@media (-moz-platform: windows) { #PopupSearchAutoComplete { --panel-border-radius: var(--arrowpanel-border-radius); } -} - -@media (-moz-platform: macos) { - #PopupSearchAutoComplete { - border-radius: 4px; - } -} - - #urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, #searchbar:focus-within { outline: 1px solid !important; diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 8d0fb58..f05d4df 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -1,512 +1,515 @@ :root { - --lwt-selected-tab-background-color: unset !important; - --tab-block-margin: 8px !important; - --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; - & #titlebar { - --tab-min-height: 32px !important; - --inline-tab-padding: 11px !important; - --tab-border-radius: 8px !important; - - --fp-toolbarbutton-inner-padding: 6px !important; - --toolbarbutton-border-radius: 4px !important; - --toolbarbutton-tabsline-border-radius: 8px !important; - --tabs-navbar-shadow-size: 0 !important; - --tab-shadow-max-size: 0 !important; - } + --lwt-selected-tab-background-color: unset !important; + --tab-block-margin: 8px !important; + --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; + & #titlebar { + --tab-min-height: 32px !important; + --inline-tab-padding: 11px !important; + --tab-border-radius: 8px !important; + + --fp-toolbarbutton-inner-padding: 6px !important; + --toolbarbutton-border-radius: 4px !important; + --toolbarbutton-tabsline-border-radius: 8px !important; + --tabs-navbar-shadow-size: 0 !important; + --tab-shadow-max-size: 0 !important; + } } .tabbrowser-tab .tab-stack { - &::before, - &::after { - content: initial !important; - } + &::before, + &::after { + content: initial !important; + } } .tabbrowser-tab .tab-close-button { - visibility: hidden !important; + visibility: hidden !important; } .tabbrowser-tab:hover .tab-close-button { - visibility: visible !important; + visibility: visible !important; } -/* tab open/close transition */ .tabbrowser-tab:not([pinned]) { - transition-property: min-width, max-width !important; - transition-duration: 250ms !important; - transition-timing-function: cubic-bezier(0, .75, .25, 1) !important; + transition-property: min-width, max-width !important; + transition-duration: 250ms !important; + transition-timing-function: cubic-bezier(0, 0.75, 0.25, 1) !important; } -#tabbrowser-tabs[movingtab]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[fadein]:not([selected]):not([multiselected]), +#tabbrowser-tabs[movingtab] + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[fadein]:not([selected]):not([multiselected]), .tabbrowser-tab[tab-grouping], .tabbrowser-tab[tabdrop-samewindow] { - transition: transform 300ms cubic-bezier(0, .75, .25, 1) !important; + transition: transform 300ms cubic-bezier(0, 0.75, 0.25, 1) !important; } :root:is([inFullscreen], :not([tabsintitlebar])) { - --tab-block-margin: 0px !important; -} - -/* hide space above tabs when maximised for non-macOS versions of Firefox */ -@media not (-moz-platform: macos) { - :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]), - #toolbar-menubar:not([inactive])+#TabsToolbar { - --tab-block-margin: 0px !important; - } + --tab-block-margin: 0px !important; } .tab-background { - border-radius: var(--tab-border-radius); - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; - margin-block: 0 !important; - border: 0 !important; - position: relative !important; - --fp-tab-corner-bg: transparent; - - /* Rounded bottom corners */ - &::before, - &::after { - content: "" !important; - display: block !important; - position: absolute !important; - width: 8px !important; - height: 8px !important; - bottom: 0 !important; - pointer-events: none !important; - clip-path: inset(0); - } - - &::before { - border-bottom-right-radius: var(--tab-border-radius) !important; - left: 0 !important; - transform: translateX(-8px) !important; - box-shadow: 4px 4px 0 4px var(--fp-tab-corner-bg) !important; - } - - &::after { - border-bottom-left-radius: var(--tab-border-radius) !important; - right: 0 !important; - transform: translateX(8px) !important; - box-shadow: -4px 4px 0 4px var(--fp-tab-corner-bg) !important; - } + border-radius: var(--tab-border-radius); + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + margin-block: 0 !important; + border: 0 !important; + position: relative !important; + --fp-tab-corner-bg: transparent; + + /* Rounded bottom corners */ + &::before, + &::after { + content: "" !important; + display: block !important; + position: absolute !important; + width: 8px !important; + height: 8px !important; + bottom: 0 !important; + pointer-events: none !important; + clip-path: inset(0); + } + + &::before { + border-bottom-right-radius: var(--tab-border-radius) !important; + left: 0 !important; + transform: translateX(-8px) !important; + box-shadow: 4px 4px 0 4px var(--fp-tab-corner-bg) !important; + } + + &::after { + border-bottom-left-radius: var(--tab-border-radius) !important; + right: 0 !important; + transform: translateX(8px) !important; + box-shadow: -4px 4px 0 4px var(--fp-tab-corner-bg) !important; + } } .tab-background:is([selected], [multiselected]) { - --fp-tab-corner-bg: var(--tab-selected-bgcolor, var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor))); + --fp-tab-corner-bg: var( + --tab-selected-bgcolor, + var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor)) + ); } .tabbrowser-tab:hover .tab-background:not([selected], [multiselected]) { - background-color: color-mix(in srgb, currentColor 5%, transparent) !important; - --fp-tab-corner-bg: color-mix(in srgb, currentColor 5%, transparent) !important; + background-color: color-mix( + in srgb, + currentColor 5%, + transparent + ) !important; + --fp-tab-corner-bg: color-mix( + in srgb, + currentColor 5%, + transparent + ) !important; } .tab-background:is([selected], [multiselected]) { - outline: none !important; + outline: none !important; } #tabbrowser-tabs .tab-background[multiselected]:not([selected]) { - box-shadow: none !important; - opacity: 0.7 !important; + box-shadow: none !important; + opacity: 0.7 !important; } #tabbrowser-tabs, -#TabsToolbar #TabsToolbar-customization-target>.toolbarbutton-1 { - margin-top: var(--tab-block-margin) !important; +#TabsToolbar #TabsToolbar-customization-target > .toolbarbutton-1 { + margin-top: var(--tab-block-margin) !important; } #TabsToolbar .toolbarbutton-1 { - margin: 0 !important; -} - -/* fix window background colours */ -@media not (-moz-gtk-csd-available) { - :root:not(:-moz-lwtheme) #navigator-toolbox { - background-color: var(--lwt-accent-color) !important; - color: var(--lwt-text-color) !important; - } - - :root:not(:-moz-lwtheme) #navigator-toolbox:-moz-window-inactive { - background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; - } + margin: 0 !important; } .tab-label-container:not([selected="true"], [multiselected]) { - opacity: 1 !important; + opacity: 1 !important; } #TabsToolbar .toolbarbutton-animatable-box, #TabsToolbar .toolbarbutton-1 { - fill: currentColor !important; + fill: currentColor !important; } .tabbrowser-tab[multiselected]:not(:-moz-lwtheme), .tabbrowser-tab[visuallyselected="true"]:not(:-moz-lwtheme) { - color: var(--lwt-tab-text, var(--toolbar-color)) !important; + color: var(--lwt-tab-text, var(--toolbar-color)) !important; } .tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme { - z-index: 1; + z-index: 1; } .tabbrowser-tab:is([visuallyselected], [multiselected]):not([pinned]) { - min-width:200px !important; - z-index: 1; + min-width: 200px !important; + z-index: 1; } .tab-close-button { - margin-inline-end: 8px !important; - width: 17px !important; - height: 17px !important; - padding: 4px !important; - border-radius: 2px !important; + margin-inline-end: 8px !important; + width: 17px !important; + height: 17px !important; + padding: 4px !important; + border-radius: 2px !important; } .tab-throbber:not([pinned]), .tab-icon-pending:not([pinned]), .tab-icon-image:not([pinned]), .tab-sharing-icon-overlay:not([pinned]) { - margin-inline-end: 10px !important; + margin-inline-end: 10px !important; } -/* tab volume icon/text */ .tab-secondary-label { - display: none !important; + display: none !important; } #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { - height: var(--tab-min-height) !important; + height: var(--tab-min-height) !important; } -.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked])>.tab-icon-overlay, -.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])> :not(.tab-icon-overlay) { - opacity: 1 !important; +.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-icon-overlay, +.tabbrowser-tab:hover + .tab-icon-stack:not([pinned], [sharing], [crashed]):is( + [soundplaying], + [muted], + [activemedia-blocked] + ) + > :not(.tab-icon-overlay) { + opacity: 1 !important; } -#tabbrowser-tabs:not([closebuttons="activetab"]) .tab-icon-overlay:not([pinned]) { - margin-inline: 22px 6px !important; +#tabbrowser-tabs:not([closebuttons="activetab"]) + .tab-icon-overlay:not([pinned]) { + margin-inline: 22px 6px !important; } .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned]) { - margin-inline: 0px 6px !important; + margin-inline: 0px 6px !important; } - -/* move sound playing icon on top of favicon when there isn't enough space */ .tab-icon-overlay:not([crashed]):is([pinned], [sharing]), #tabbrowser-tabs[closebuttons="activetab"] .tab-icon-overlay:not([crashed]) { - top: -5.5px !important; - inset-inline-end: -6px !important; -} - -#tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay[soundplaying]:not([crashed]), - .tab-icon-overlay[muted]:not([crashed]), - .tab-icon-overlay[activemedia-blocked]:not([crashed])) { - stroke: var(--tab-icon-overlay-stroke, white) !important; - color: var(--tab-icon-overlay-fill, black) !important; - fill-opacity: 1 !important; -} - -#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay[soundplaying]:not([crashed]), - .tab-icon-overlay[muted]:not([crashed]), - .tab-icon-overlay[activemedia-blocked]:not([crashed])) { - stroke: var(--tab-icon-overlay-stroke, black) !important; - color: var(--tab-icon-overlay-fill, white) !important; -} - -#tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay:not([crashed])[soundplaying]:hover, - .tab-icon-overlay:not([crashed])[muted]:hover, - .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover) { - background-color: var(--tab-icon-overlay-stroke, white) !important; -} - -#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay:not([crashed])[soundplaying]:hover, - .tab-icon-overlay:not([crashed])[muted]:hover, - .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover) { - background-color: var(--tab-icon-overlay-stroke, black) !important; + top: -5.5px !important; + inset-inline-end: -6px !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] + :is( + .tab-icon-overlay[soundplaying]:not([crashed]), + .tab-icon-overlay[muted]:not([crashed]), + .tab-icon-overlay[activemedia-blocked]:not([crashed]) + ) { + stroke: var(--tab-icon-overlay-stroke, white) !important; + color: var(--tab-icon-overlay-fill, black) !important; + fill-opacity: 1 !important; +} + +#TabsToolbar[brighttext] + #tabbrowser-tabs[closebuttons="activetab"] + :is( + .tab-icon-overlay[soundplaying]:not([crashed]), + .tab-icon-overlay[muted]:not([crashed]), + .tab-icon-overlay[activemedia-blocked]:not([crashed]) + ) { + stroke: var(--tab-icon-overlay-stroke, black) !important; + color: var(--tab-icon-overlay-fill, white) !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] + :is( + .tab-icon-overlay:not([crashed])[soundplaying]:hover, + .tab-icon-overlay:not([crashed])[muted]:hover, + .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover + ) { + background-color: var(--tab-icon-overlay-stroke, white) !important; +} + +#TabsToolbar[brighttext] + #tabbrowser-tabs[closebuttons="activetab"] + :is( + .tab-icon-overlay:not([crashed])[soundplaying]:hover, + .tab-icon-overlay:not([crashed])[muted]:hover, + .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover + ) { + background-color: var(--tab-icon-overlay-stroke, black) !important; } .tab-icon-overlay[soundplaying]:not([crashed]), .tab-icon-overlay[muted]:not([crashed]), .tab-icon-overlay[activemedia-blocked]:not([crashed]) { - border-radius: 4px !important; - padding: 0 !important; + border-radius: 4px !important; + padding: 0 !important; } .tabbrowser-tab { - font-size: 12px !important; - padding-inline: 0 !important; - overflow-clip-margin: 8px !important; + font-size: 12px !important; + padding-inline: 0 !important; + overflow-clip-margin: 8px !important; } -#TabsToolbar .toolbarbutton-1>.toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1>.toolbarbutton-badge-stack { - border-radius: var(--toolbarbutton-border-radius) !important; - padding: var(--fp-toolbarbutton-inner-padding) calc(var(--fp-toolbarbutton-inner-padding) + 2px) !important; +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius) !important; + padding: var(--fp-toolbarbutton-inner-padding) + calc(var(--fp-toolbarbutton-inner-padding) + 2px) !important; } -#tabbrowser-tabs .toolbarbutton-1>.toolbarbutton-icon, -#tabbrowser-tabs .toolbarbutton-1>.toolbarbutton-badge-stack { - border-radius: var(--toolbarbutton-tabsline-border-radius) !important; +#tabbrowser-tabs .toolbarbutton-1 > .toolbarbutton-icon, +#tabbrowser-tabs .toolbarbutton-1 > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-tabsline-border-radius) !important; } -#TabsToolbar .toolbarbutton-1>.toolbarbutton-icon { - width: calc(2 * (var(--fp-toolbarbutton-inner-padding) + 2px) + 16px) !important; - height: calc(2 * var(--fp-toolbarbutton-inner-padding) + 16px) !important; +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon { + width: calc( + 2 * (var(--fp-toolbarbutton-inner-padding) + 2px) + 16px + ) !important; + height: calc(2 * var(--fp-toolbarbutton-inner-padding) + 16px) !important; } -#TabsToolbar #tabs-newtab-button>.toolbarbutton-icon, -#TabsToolbar #alltabs-button>.toolbarbutton-badge-stack, -#TabsToolbar #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"]~#new-tab-button>.toolbarbutton-icon { - padding: var(--fp-toolbarbutton-inner-padding) !important; - width: calc(2 * var(--fp-toolbarbutton-inner-padding) + 16px) !important; +#TabsToolbar #tabs-newtab-button > .toolbarbutton-icon, +#TabsToolbar #alltabs-button > .toolbarbutton-badge-stack, +#TabsToolbar + #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] + ~ #new-tab-button + > .toolbarbutton-icon { + padding: var(--fp-toolbarbutton-inner-padding) !important; + width: calc(2 * var(--fp-toolbarbutton-inner-padding) + 16px) !important; } #tabbrowser-tabs #tabs-newtab-button { - margin-inline-start: 2px !important; + margin-inline-start: 2px !important; } .tab-content[pinned] { - padding: 0 12px !important; + padding: 0 12px !important; } -/* Tab container indicator */ .tabbrowser-tab[usercontextid] .tab-background .tab-context-line { - height: 2px !important; - border-radius: 2px !important; - margin: 2px 7px 0 !important; + height: 2px !important; + border-radius: 2px !important; + margin: 2px 7px 0 !important; } .tabbrowser-tab[selected][usercontextid] .tab-background .tab-context-line { - margin-inline: 9px !important; + margin-inline: 9px !important; } .titlebar-spacer[type="post-tabs"] { - display: flex !important; + display: flex !important; } .titlebar-spacer[type="pre-tabs"], .private-browsing-indicator { - display: none !important; + display: none !important; } toolbarbutton[part="scrollbutton-up"], toolbarbutton[part="scrollbutton-down"] { - border-width: 2px !important; - border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important; - margin-inline: 2px !important; + border-width: 2px !important; + border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important; + margin-inline: 2px !important; } .tabbrowser-tab:not([pinned], [style*="max-width"])[fadein] { - max-width: 240px !important; + max-width: 240px !important; } -/* Tab separators */ .tabbrowser-tab .tab-stack { - &::before, - &::after { - content: ""; - position: absolute; - height: 20px; - inset: 0 auto; - margin-block: auto; - border-left: 1px solid transparent; - } - - &::before { - left: 0; - } - - &::after { - right: 0; - } + &::before, + &::after { + content: ""; + position: absolute; + height: 20px; + inset: 0 auto; + margin-block: auto; + border-left: 1px solid transparent; + } + + &::before { + left: 0; + } + + &::after { + right: 0; + } } /* Set separator color */ .tabbrowser-tab:not([selected], [multiselected], :hover) { - & .tab-stack::before, - &:last-of-type .tab-stack::after { - border-color: color-mix(in srgb, currentColor 34%, transparent); - } + & .tab-stack::before, + &:last-of-type .tab-stack::after { + border-color: color-mix(in srgb, currentColor 34%, transparent); + } } -/* Hide separator when previous sibling is hovered or selected */ -.tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected], [multiselected], :hover) .tab-stack::before { - border-color: transparent !important; +.tabbrowser-tab:where([selected], [multiselected], :hover) + + .tabbrowser-tab:not([selected], [multiselected], :hover) + .tab-stack::before { + border-color: transparent !important; } -/* Hide first tab separator if there are no buttons before it (Such as Firefox View) */ -#TabsToolbar-customization-target > #tabbrowser-tabs:not(toolbarbutton:not(#fxa-toolbar-menu-button) + #tabbrowser-tabs) .tabbrowser-tab:first-of-type .tab-stack::before { - border-color: transparent !important; +#TabsToolbar-customization-target + > #tabbrowser-tabs:not( + toolbarbutton:not(#fxa-toolbar-menu-button) + #tabbrowser-tabs + ) + .tabbrowser-tab:first-of-type + .tab-stack::before { + border-color: transparent !important; } -/* .tabbrowser-tab:not([last-visible-tab="true"]) { - margin-inline-end: -1px !important; -} */ - -#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] { - margin-inline-start: 0 !important; +#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 0 !important; } #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) { - border-block-width: 2px !important; - padding-inline: calc(var(--fp-toolbarbutton-inner-padding) - 4px) !important; - padding-block: calc(var(--fp-toolbarbutton-inner-padding) - 0px) !important; + border-block-width: 2px !important; + padding-inline: calc( + var(--fp-toolbarbutton-inner-padding) - 4px + ) !important; + padding-block: calc(var(--fp-toolbarbutton-inner-padding) - 0px) !important; } -/* mac titlebar buttons */ -@media (-moz-platform: macos) { - .titlebar-buttonbox { - margin-inline: calc((var(--tab-min-height) + var(--tab-block-margin) - 14px) / 2) !important; - } - - .titlebar-buttonbox-container { - margin-inline-start: -6px !important; - margin-inline-end: -2px !important; - } -} - -/* Tab Shadows */ -#TabsToolbar>.toolbar-items { - margin-top: -2px !important; +#TabsToolbar > .toolbar-items { + margin-top: -2px !important; } .tabbrowser-tab, #TabsToolbar #tabs-newtab-button, -/* no ::part workaround - may have side effects */ #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) { - margin-top: 2px !important; + margin-top: 2px !important; } -#TabsToolbar #TabsToolbar-customization-target> :not(#tabbrowser-tabs) { - margin-top: calc(2px + var(--tab-block-margin)) !important; +#TabsToolbar #TabsToolbar-customization-target > :not(#tabbrowser-tabs) { + margin-top: calc(2px + var(--tab-block-margin)) !important; } -/* add margin to tabs if they are the first or last tab */ #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab { - &:first-of-type { - margin-inline-start: 14px !important; - } + &:first-of-type { + margin-inline-start: 14px !important; + } - &:last-of-type { - margin-inline-end: 6px !important; - } + &:last-of-type { + margin-inline-end: 6px !important; + } } -/* remove gap between pinned and unpinned tabs */ -#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { - margin-inline-start: 0 !important; +#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { + margin-inline-start: 0 !important; } #tabbrowser-tabs { - margin-inline-start: -6px !important; - border-inline: none !important; + margin-inline-start: -6px !important; + border-inline: none !important; } #TabsToolbar { - padding-inline-start: 6px !important; + padding-inline-start: 6px !important; } -#tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox { - margin-inline-start: 8px !important; +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox { + margin-inline-start: 8px !important; } -#tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[pinned] { - clip-path: inset(-8px -8px 0) !important; +#tabbrowser-tabs[positionpinnedtabs] + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[pinned] { + clip-path: inset(-8px -8px 0) !important; } :root { - --fp-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / .2) inset; - --fp-tab-shadow: - 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0px 2px 4px rgb(0 0 0 / .2), 0 4px 8px rgb(0 0 0 / .1); + --fp-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / 0.2) inset; + --fp-tab-shadow: 0 0 0 1px + var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), + 0px 2px 4px rgb(0 0 0 / 0.2), 0 4px 8px rgb(0 0 0 / 0.1); } :root[lwtheme-brighttext="true"] { - --fp-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / .75) inset inset; - --fp-tab-shadow: - 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0 2px 4px rgb(0 0 0 / .45), 0 0px 2px rgb(0 0 0 / .2); + --fp-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / 0.75) inset inset; + --fp-tab-shadow: 0 0 0 1px + var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), + 0 2px 4px rgb(0 0 0 / 0.45), 0 0px 2px rgb(0 0 0 / 0.2); } #tabbrowser-tabs .tab-background:is([selected], [multiselected]), #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon { - box-shadow: var(--fp-tab-shadow) !important; + box-shadow: var(--fp-tab-shadow) !important; } #titlebar { - box-shadow: var(--fp-titlebar-shadow) !important; + box-shadow: var(--fp-titlebar-shadow) !important; } -#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container { - --tab-label-mask-size: 1em !important; +#tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab + .tab-label-container { + --tab-label-mask-size: 1em !important; } .tab-content { - padding-inline: var(--inline-tab-padding) 0 !important; + padding-inline: var(--inline-tab-padding) 0 !important; } /* new private browsing indicator */ :root[privatebrowsingmode="temporary"] #TabsToolbar .toolbar-items, -:root[privatebrowsingmode="temporary"] #TabsToolbar .titlebar-buttonbox-container { - position: relative; - z-index: 1; +:root[privatebrowsingmode="temporary"] + #TabsToolbar + .titlebar-buttonbox-container { + position: relative; + z-index: 1; } :root[privatebrowsingmode="temporary"] .titlebar-spacer[type="post-tabs"] { - display: none !important; + display: none !important; } #private-browsing-indicator-with-label { - position: relative !important; - isolation: isolate; - margin-inline: -16px -16px !important; - padding-inline: 32px 24px !important; - font-size: 12px; - color: var(--fp-private-browsing-indicator-text, var(--toolbar-bgcolor)) !important; - --fp-bg-color: var(--fp-private-browsing-indicator, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention))); - --fp-gradient: linear-gradient(to right, transparent, var(--fp-bg-color) 35%); - --fp-gradient-alt: linear-gradient(to right, transparent, var(--fp-bg-color) 25%, var(--fp-bg-color) 75%, transparent); - background: var(--fp-gradient); -} - -@media (-moz-gtk-csd-available) { - :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme) { - --fp-bg-color: -moz-accent-color !important; - color: -moz-accent-color-foreground !important; - } -} - -@media (-moz-platform: windows), -(-moz-gtk-csd-available) { - @media not (-moz-gtk-csd-reversed-placement) { - :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"])~#TabsToolbar #private-browsing-indicator-with-label { - background: var(--fp-gradient-alt); - } - } + position: relative !important; + isolation: isolate; + margin-inline: -16px -16px !important; + padding-inline: 32px 24px !important; + font-size: 12px; + color: #fff !important; + --fp-gradient-private: linear-gradient(90deg, rgba(118,171,250,0) 0%, rgba(0,85,215,1) 50%, rgba(118,171,250,0) 100%) +} + +:root[tabsintitlebar] + #toolbar-menubar:not([autohide="false"]) + ~ #TabsToolbar + #private-browsing-indicator-with-label { + background: var(--fp-gradient-private); } #private-browsing-indicator-with-label .private-browsing-indicator-icon { - height: 24px !important; - width: 24px !important; + height: 24px !important; + width: 24px !important; } :root, :root[lang^="en"] { - --fp-string-private: "Private"; + --fp-string-private: "Private"; } -/* Change "Private Browsing" text to "Private" (English locale only) */ -:root:is([lang^="en"]) #private-browsing-indicator-with-label>label { - display: none !important; +:root:is([lang^="en"]) #private-browsing-indicator-with-label > label { + display: none !important; } :root:is([lang^="en"]) #private-browsing-indicator-with-label::after { - content: var(--fp-string-private); - margin-block: 1px 2px; - margin-inline: 6px 5px; + content: var(--fp-string-private); + margin-block: 1px 2px; + margin-inline: 6px 5px; } -#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) { - opacity: 1 !important; +#tabbrowser-tabs[secondarytext-unsupported] + .tab-icon-stack[indicator-replaces-favicon] + > :not(.tab-icon-overlay) { + opacity: 1 !important; } -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { - background-position: 4px 4px !important; +.tabbrowser-tab + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected]) { + background-position: 4px 4px !important; } diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css index 260fe62..62fe101 100644 --- a/chrome/toolbar/urlbar.css +++ b/chrome/toolbar/urlbar.css @@ -1,95 +1,105 @@ :root { - --urlbar-min-height: 30px !important; - --urlbarView-item-inline-padding: 14px !important; - --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) + 14px) !important; - --urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important; - --fp-urlbar-icon-inline-padding: calc(var(--fp-toolbarbutton-inner-inline-padding) - 2px) !important; - --identity-box-margin-inline: 2px !important; - --link-color: light-dark(#3672e4, #47CBFF) !important; -} -:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background, + --urlbar-min-height: 30px !important; + --urlbarView-item-inline-padding: 14px !important; + --urlbar-icon-border-radius: calc( + var(--toolbarbutton-border-radius) + 14px + ) !important; + --urlbar-icon-padding: calc( + var(--toolbarbutton-inner-padding) - 2px + ) !important; + --fp-urlbar-icon-inline-padding: calc( + var(--fp-toolbarbutton-inner-inline-padding) - 2px + ) !important; + --identity-box-margin-inline: 2px !important; + --link-color: light-dark(#3672e4, #47cbff) !important; +} +:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] + #urlbar[focused="true"]:not([suppress-focus-border]) + > #urlbar-background, :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #searchbar:focus-within { - outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important; -} - -@media not (-moz-gtk-csd-available) { - #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background:not(:-moz-lwtheme), - #searchbar:not(:-moz-lwtheme):focus-within { - --fp-outline-dimmed: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent); - outline-color: light-dark(var(--fp-outline-dimmed), var(--toolbar-field-focus-border-color)) !important; - } + outline-color: color-mix( + in srgb, + var(--toolbar-field-focus-border-color) 50%, + transparent + ) !important; } :root:not([lwtheme-brighttext="true"]) #urlbar-background { - box-shadow: var(--fp-urlbar-shadow, none); + box-shadow: var(--fp-urlbar-shadow, none); } - -#urlbar[open]>#urlbar-background { - border-color: transparent !important; - box-shadow: 0 10px 16px #0005, 0 0 1px #0006 !important; +#urlbar[open] > #urlbar-background { + border-color: transparent !important; + box-shadow: 0 10px 16px #0005, 0 0 1px #0006 !important; } .urlbarView { - margin-inline: 0 !important; - width: 100% !important; - border-inline: 0 !important; + margin-inline: 0 !important; + width: 100% !important; + border-inline: 0 !important; } .urlbarView-row { - padding-block: 0 !important; + padding-block: 0 !important; } .urlbarView-row-inner { - border-radius: 0 !important; - padding-block: 8px !important; + border-radius: 0 !important; + padding-block: 8px !important; } -.urlbarView-row:not([type="tip"], [type="dynamic"])[selected]>.urlbarView-row-inner, +.urlbarView-row:not([type="tip"], [type="dynamic"])[selected] + > .urlbarView-row-inner, .urlbarView-row-inner[selected] { - box-shadow: 3px 0 #47CBFF inset !important; + box-shadow: 3px 0 #47cbff inset !important; } #urlbar-anon-search-settings { - margin-inline-end: 8px !important; + margin-inline-end: 8px !important; } #urlbar .search-one-offs:not([hidden]) { - padding-block: 8px 0 !important; + padding-block: 8px 0 !important; } /* breakout */ #urlbar[breakout][breakout-extend] { - left: 0 !important; - width: 100% !important; + left: 0 !important; + width: 100% !important; } -#urlbar[breakout][breakout-extend]>#urlbar-input-container { - padding-inline: var(--urlbar-container-padding) !important; +#urlbar[breakout][breakout-extend] > #urlbar-input-container { + padding-inline: var(--urlbar-container-padding) !important; } .urlbarView-results { - padding-block: 0 !important; + padding-block: 0 !important; } -#urlbar[open]>.urlbarView>.urlbarView-body-outer>.urlbarView-body-inner, -.urlbarView:not([noresults])>.search-one-offs:not([hidden]) { - border-top: 0 !important; +#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner, +.urlbarView:not([noresults]) > .search-one-offs:not([hidden]) { + border-top: 0 !important; } /* urlbar spacing */ #urlbar-container { - --urlbar-container-height: calc(8px + 16px + var(--toolbarbutton-inner-padding) * 2) !important; + --urlbar-container-height: calc( + 8px + 16px + var(--toolbarbutton-inner-padding) * 2 + ) !important; } #urlbar { - --urlbar-toolbar-height: calc(8px + 16px + var(--toolbarbutton-inner-padding) * 2) !important; - --urlbar-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important; + --urlbar-toolbar-height: calc( + 8px + 16px + var(--toolbarbutton-inner-padding) * 2 + ) !important; + --urlbar-height: calc( + 16px + var(--toolbarbutton-inner-padding) * 2 + ) !important; } #urlbar-container, #search-container { - margin-inline: 6px !important; + margin-inline: 6px !important; } .urlbar-page-action, @@ -97,172 +107,202 @@ .search-go-button, #tracking-protection-icon-container, #identity-icon-box { - padding-inline: var(--fp-urlbar-icon-inline-padding) !important; - width: calc(var(--fp-urlbar-icon-inline-padding) * 2 + 16px) !important; + padding-inline: var(--fp-urlbar-icon-inline-padding) !important; + width: calc(var(--fp-urlbar-icon-inline-padding) * 2 + 16px) !important; } .urlbar-page-action#translations-button[translationsactive="true"] { - width: auto !important; - } - #translations-button-locale { - border-radius: 12px !important; - margin-inline: 4px -2px !important; - } -#identity-box[pageproxystate="valid"].notSecureText>.identity-box-button, -#identity-box[pageproxystate="valid"].chromeUI>.identity-box-button, -#identity-box[pageproxystate="valid"].extensionPage>.identity-box-button, + width: auto !important; +} +#translations-button-locale { + border-radius: 12px !important; + margin-inline: 4px -2px !important; +} +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, #urlbar-label-box { - width: unset !important; + width: unset !important; } #identity-icon-box, #identity-permission-box, .notification-anchor-icon { - padding-inline: var(--fp-urlbar-icon-inline-padding) !important; + padding-inline: var(--fp-urlbar-icon-inline-padding) !important; } #urlbar-background, #searchbar { - border-radius: var(--urlbar-icon-border-radius) !important; + border-radius: var(--urlbar-icon-border-radius) !important; } -#urlbar:hover:not([suppress-focus-border])>#urlbar-background, +#urlbar:hover:not([suppress-focus-border]) > #urlbar-background, #searchbar:hover { - outline: 1.5px solid var(--urlbar-hover-highlight-color); + outline: 1.5px solid var(--urlbar-hover-highlight-color); } /* move tracking protection button */ #tracking-protection-icon-container, #page-action-buttons { - -moz-box-ordinal-group: 2 !important; - order: 2 !important; + -moz-box-ordinal-group: 2 !important; + order: 2 !important; } -#urlbar, #searchbar { - padding: 0 4px !important; +#urlbar, +#searchbar { + padding: 0 4px !important; } @media (max-width: 450px) { - #urlbar-container:not(:hover) #pageActionButton { - visibility: collapse !important; - } + #urlbar-container:not(:hover) #pageActionButton { + visibility: collapse !important; + } } @media (max-width: 570px) { - #urlbar-container { - min-width: 206px !important; - } + #urlbar-container { + min-width: 206px !important; + } - #nav-bar-customization-target:not(:hover) #downloads-button:not([open]) { - visibility: collapse !important; - } + #nav-bar-customization-target:not(:hover) #downloads-button:not([open]) { + visibility: collapse !important; + } } -#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background, +#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, #searchbar:focus-within { - outline-offset: calc(var(--focus-outline-width) * -1 + 1px) !important; + outline-offset: calc(var(--focus-outline-width) * -1 + 1px) !important; } .urlbarView { - padding-block-end: 8px !important; + padding-block-end: 8px !important; } -.urlbarView-row[pinned]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-type-icon { - fill: var(--toolbar-field-color) !important; +.urlbarView-row[pinned] + > .urlbarView-row-inner + > .urlbarView-no-wrap + > .urlbarView-type-icon { + fill: var(--toolbar-field-color) !important; } #userContext-icons, #urlbar-zoom-button { - padding-inline: var(--fp-urlbar-icon-inline-padding) !important; - margin-block: 0 !important; - margin-inline: 0 !important; + padding-inline: var(--fp-urlbar-icon-inline-padding) !important; + margin-block: 0 !important; + margin-inline: 0 !important; } -/* make urlbar icons opaque in default theme */ #urlbar-input::placeholder, .searchbar-textbox::placeholder { - opacity: 0.6 !important; + opacity: 0.6 !important; } -:is(:root:not(:-moz-lwtheme), :root[style*="--lwt-accent-color: rgb(240, 240, 244)"]) #identity-icon-label { - opacity: var(--urlbar-icon-fill-opacity) !important; +:is( + :root:not(:-moz-lwtheme), + :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] + ) + #identity-icon-label { + opacity: var(--urlbar-icon-fill-opacity) !important; } #notification-popup-box:hover { - background-color: var(--urlbar-box-hover-bgcolor) !important; + background-color: var(--urlbar-box-hover-bgcolor) !important; } #notification-popup-box:hover:active, #notification-popup-box[open] { - background-color: var(--urlbar-box-active-bgcolor) !important; + background-color: var(--urlbar-box-active-bgcolor) !important; } /* remove background from urlbar box */ -#identity-box[pageproxystate="valid"].notSecureText>.identity-box-button:not(:hover, [open]), -#identity-box[pageproxystate="valid"].chromeUI>.identity-box-button:not(:hover, [open]), -#identity-box[pageproxystate="valid"].extensionPage>.identity-box-button:not(:hover, [open]) { - background-color: transparent !important; -} - -:is(:root:not(:-moz-lwtheme), - :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"], - :root[lwt-default-theme-in-dark-mode="true"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34)"]) #urlbar-search-mode-indicator { - background-color: var(--urlbar-box-hover-bgcolor) !important; +#identity-box[pageproxystate="valid"].notSecureText + > .identity-box-button:not(:hover, [open]), +#identity-box[pageproxystate="valid"].chromeUI + > .identity-box-button:not(:hover, [open]), +#identity-box[pageproxystate="valid"].extensionPage + > .identity-box-button:not(:hover, [open]) { + background-color: transparent !important; +} + +:is( + :root:not(:-moz-lwtheme), + :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] + #urlbar[focused="true"], + :root[lwt-default-theme-in-dark-mode="true"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34)"] + ) + #urlbar-search-mode-indicator { + background-color: var(--urlbar-box-hover-bgcolor) !important; } /* increase space between icon and text */ #identity-icon-label { - padding-inline-start: 8px !important; + padding-inline-start: 8px !important; } /* separator for urlbar box */ #identity-box { - position: relative; -} - -:is(#identity-box[pageproxystate="valid"].notSecureText>.identity-box-button, - #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button, - #identity-box[pageproxystate="valid"].extensionPage>.identity-box-button)::after { - content: ""; - position: absolute; - display: block; - height: 16px; - border-right: 1px solid currentColor; - right: 0; - top: calc((var(--urlbar-height) / 2 - 1px - var(--urlbar-container-padding)) - 8px); - opacity: 0; + position: relative; +} + +:is( + #identity-box[pageproxystate="valid"].notSecureText + > .identity-box-button, + #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, + #identity-box[pageproxystate="valid"].extensionPage + > .identity-box-button + )::after { + content: ""; + position: absolute; + display: block; + height: 16px; + border-right: 1px solid currentColor; + right: 0; + top: calc( + (var(--urlbar-height) / 2 - 1px - var(--urlbar-container-padding)) - 8px + ); + opacity: 0; } @media not (prefers-reduced-motion) { - :is(#identity-box[pageproxystate="valid"].notSecureText>.identity-box-button, - #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button, - #identity-box[pageproxystate="valid"].extensionPage>.identity-box-button)::after { - transition: opacity 0.2s ease; - } -} - -:is(#identity-box[pageproxystate="valid"].notSecureText>.identity-box-button:not(:hover, [open]), - #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button:not(:hover, [open]), - #identity-box[pageproxystate="valid"].extensionPage>.identity-box-button:not(:hover, [open]))::after { - opacity: 0.375; + :is( + #identity-box[pageproxystate="valid"].notSecureText + > .identity-box-button, + #identity-box[pageproxystate="valid"].chromeUI + > .identity-box-button, + #identity-box[pageproxystate="valid"].extensionPage + > .identity-box-button + )::after { + transition: opacity 0.2s ease; + } +} + +:is( + #identity-box[pageproxystate="valid"].notSecureText + > .identity-box-button:not(:hover, [open]), + #identity-box[pageproxystate="valid"].chromeUI + > .identity-box-button:not(:hover, [open]), + #identity-box[pageproxystate="valid"].extensionPage + > .identity-box-button:not(:hover, [open]) + )::after { + opacity: 0.375; } #urlbar[open] .urlbarView, -#urlbar[breakout][breakout-extend]>#urlbar-background { - animation-name: fp-urlbar-animation !important; - animation-duration: 400ms !important; - transform-origin: top !important; - animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1) !important +#urlbar[breakout][breakout-extend] > #urlbar-background { + animation-name: fp-urlbar-animation !important; + animation-duration: 400ms !important; + transform-origin: top !important; + animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1) !important; } @keyframes fp-urlbar-animation { - from { - opacity: 0; - transform: scaleY(0) - } - - to { - opacity: 1; - transform: scaleY(1) - } -} + from { + opacity: 0; + transform: scaleY(0); + } + + to { + opacity: 1; + transform: scaleY(1); + } +} \ No newline at end of file diff --git a/chrome/userChrome.css b/chrome/userChrome.css index ebc199a..a7b96c4 100644 --- a/chrome/userChrome.css +++ b/chrome/userChrome.css @@ -1,11 +1,9 @@ @import url("toolbar/tabbar.css"); @import url("toolbar/navbar.css"); @import url("toolbar/personalbar.css"); -@import url("toolbar/findbar.css"); @import url("toolbar/urlbar.css"); @import url("toolbar/searchbar.css"); -@import url("global/colors.css"); -@import url("global/popup.css"); +@import url("global/general.css"); @import url("icons/icons.css"); @import url("global/rounded-corners.css") (-moz-bool-pref: "fp.tweak.rounded-corners"); @import url("sidebar/sidebar-support.css") (-moz-bool-pref: "fp.tweak.sidebar-enabled"); \ No newline at end of file