diff --git a/floorp/browser/base/content/browser-design.js b/floorp/browser/base/content/browser-design.js index 1679b42d88abc..c079f102f0f14 100644 --- a/floorp/browser/base/content/browser-design.js +++ b/floorp/browser/base/content/browser-design.js @@ -22,7 +22,8 @@ function setBrowserDesign() { gnomeUI: `@import url(chrome://browser/skin/gnomeUI/gnomeUI.css);`, FluerialUI: `@import url(chrome://browser/skin/floorplegacy/test_legacy.css);`, FluerialUIMultitab:`@import url(chrome://browser/skin/floorplegacy/test_legacy.css); - @import url(chrome://browser/skin/floorplegacy/test_legacy_multitab.css);` + @import url(chrome://browser/skin/floorplegacy/test_legacy_multitab.css);`, + WebkitUI: `@import url(chrome://browser/skin/webkitUI/webkitUI.css);`, } var Tag = document.createElement('style'); Tag.setAttribute("id", "browserdesgin"); @@ -45,6 +46,9 @@ function setBrowserDesign() { case 6: if (AppConstants.platform == "linux") Tag.innerText = ThemeCSS.gnomeUI; break; + case 7: + Tag.innerText = ThemeCSS.WebkitUI; + break; case 8: Tag.innerText = Services.prefs.getBoolPref("floorp.enable.multitab", false) ? ThemeCSS.FluerialUIMultitab : ThemeCSS.FluerialUI; break; diff --git a/floorp/browser/themes/designs/webkitUI/go-next-symbolic.svg b/floorp/browser/themes/designs/webkitUI/go-next-symbolic.svg index ce6449aed012f..89b6f24c6756c 100644 --- a/floorp/browser/themes/designs/webkitUI/go-next-symbolic.svg +++ b/floorp/browser/themes/designs/webkitUI/go-next-symbolic.svg @@ -1,3 +1,3 @@ - + diff --git a/floorp/browser/themes/designs/webkitUI/go-previous-symbolic.svg b/floorp/browser/themes/designs/webkitUI/go-previous-symbolic.svg index ede8ba3558dde..6e5badb081ab9 100644 --- a/floorp/browser/themes/designs/webkitUI/go-previous-symbolic.svg +++ b/floorp/browser/themes/designs/webkitUI/go-previous-symbolic.svg @@ -1,3 +1,3 @@ - + diff --git a/floorp/browser/themes/designs/webkitUI/pan-down-symbolic.svg b/floorp/browser/themes/designs/webkitUI/pan-down-symbolic.svg index 27a58fed1282b..84fce6f8be347 100644 --- a/floorp/browser/themes/designs/webkitUI/pan-down-symbolic.svg +++ b/floorp/browser/themes/designs/webkitUI/pan-down-symbolic.svg @@ -1,3 +1,3 @@ - + diff --git a/floorp/browser/themes/designs/webkitUI/pan-start-symbolic.svg b/floorp/browser/themes/designs/webkitUI/pan-start-symbolic.svg index c750fbd192cd8..754f263dfd41c 100644 --- a/floorp/browser/themes/designs/webkitUI/pan-start-symbolic.svg +++ b/floorp/browser/themes/designs/webkitUI/pan-start-symbolic.svg @@ -1,3 +1,3 @@ - + diff --git a/floorp/browser/themes/designs/webkitUI/webkitUI.css b/floorp/browser/themes/designs/webkitUI/webkitUI.css index 5b6c0f0c866e2..4e99d5cdc1ff8 100644 --- a/floorp/browser/themes/designs/webkitUI/webkitUI.css +++ b/floorp/browser/themes/designs/webkitUI/webkitUI.css @@ -5,6 +5,283 @@ * - bookmark bar (toolbar#PersonalToolbar) * - add-ons can add their own toolbars (toolbar) */ + @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + +:root { + /* Browser area before a page starts loading */ + --gnome-browser-before-load-background: #f5f5f5; + --theme-primary-color: #315bef; + --theme-primary-color-hover: #3863ff; + --theme-alt-color:#fff; + --in-content-link-color:var(--theme-primary-color) !important; + --in-content-link-color-hover:var(--theme-primary-color-hover) !important; + + /* Toolbars */ + --gnome-toolbar-background: #ffffff; + --gnome-tabstoolbar-background: #E5E5E5; + --gnome-findbar-background: #f5f5f5; + --gnome-toolbar-color: rgb(46, 52, 54); + --gnome-toolbar-border-color: #fff; + --gnome-inactive-toolbar-color: rgba(46, 52, 54, 0.35); + --gnome-inactive-toolbar-background: #f6f5f4; + --gnome-inactive-toolbar-border-color: #dadada; + + /* Sidebar */ + --gnome-sidebar-background: #f5f5f5; + --gnome-inactive-sidebar-background: #f9f9f8; + + /* Popups */ + --gnome-menu-background: rgba(255, 255, 255, 0.95); + --gnome-menu-border-color: #cdc7c2; + --gnome-popover-background: rgba(255, 255, 255, 0.95); + --gnome-popover-border-color: #cdc7c2; + --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); + --gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1); + --gnome-popover-button-active-background: rgba(0, 0, 0, 0.2); + --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); + + /* Header bar */ + --gnome-headerbar-background: #ffffff; + --gnome-headerbar-border-color: #bdb7b0; + --gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset; + --gnome-inactive-headerbar-background: #f5f5f5; + --gnome-inactive-headerbar-border-color: #dadada; + --gnome-inactive-headerbar-box-shadow: 0 1px #fff inset; + + /* Buttons */ + --gnome-button-background: linear-gradient(to top, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%); + --gnome-button-border-color: #cdc7c2; + --gnome-button-border-accent-color: #b2b2b1; + --gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.03); + --gnome-button-hover-color: rgba(0, 0, 0, 0.1); + --gnome-button-active-color: rgba(0, 0, 0, 0.2); + --gnome-button-hover-background: linear-gradient(to top, #fdfdfd 0%, #ffffff 100%); + --gnome-button-active-background-alt:#f0f0f4 !important; + --gnome-button-active-background-alt-border: #f0f0f4 !important; + --gnome-button-active-background-alt-hover: #ffffff !important; + --gnome-button-active-background: #cfcfcf; + --gnome-button-active-border-color: #b2b2b1; + --gnome-button-active-border-accent-color: #b2b2b1; + --gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; + --gnome-button-disabled-background: #faf9f8; + --gnome-button-disabled-border-color: #cdc7c2; + --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-inactive-button-background: #f6f5f4; + --gnome-inactive-button-border-color: #dadada; + --gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); + --gnome-button-suggested-action-background:#2379e2; + --gnome-button-suggested-action-border-color: #1b6acb; + --gnome-button-suggested-action-border-accent-color: #15539e; + --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-suggested-action-hover-background: #3584e4; + --gnome-button-suggested-action-active-background: #1961b9; + --gnome-button-suggested-action-active-border-color: #1b6acb; + --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24); + --gnome-button-destructive-action-border-color: #b2161d; + --gnome-button-destructive-action-border-accent-color: #851015; + --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px); + --gnome-button-destructive-action-active-background: #a0131a; + --gnome-button-destructive-action-active-border-color: #b2161d; + --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-button-menulist-color:#020202; + --gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1); + --gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15); + + /* URL bar */ + --gnome-urlbar-background: #f5f5f5; + --gnome-urlbar-border-color: #b6b6b3; + --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03); + --gnome-urlbar-color: #020202; + --gnome-hover-urlbar-border-color: #e5e5e5; + --gnome-inactive-urlbar-background: linear-gradient(#fcfcfc, #fcfcfc); + --gnome-inactive-urlbar-border-color: #dadada; + --gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); + --gnome-inactive-urlbar-color: #323232; + --gnome-focused-urlbar-border-color: #5683DA; + --gnome-focused-urlbar-highlight-color: #6592E9; + --gnome-private-urlbar-background: #e6c2ff; + + /* Tabs */ + --gnome-tabbar-tab-background: #E5E5E5; + --gnome-tabbar-tab-color: rgb(141, 144, 145); + --gnome-tabbar-tab-hover-background: #d5d5d5; + --gnome-tabbar-tab-hover-border-bottom-color: #b6b6b3; + --gnome-tabbar-tab-hover-color: rgb(93, 98, 99); + --gnome-tabbar-tab-active-background: #ffffff; + --gnome-tabbar-tab-active-border-bottom-color: #4a90d9; + --gnome-tabbar-tab-active-color: rgb(46, 52, 54); + --gnome-tabbar-tab-active-hover-background: #f5f5f5; + --gnome-inactive-tabbar-tab-color: #b3b8b9; + --gnome-inactive-tabbar-tab-active-background: #f5f5f5; + --gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color); + --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); + + /* Switch */ + --gnome-switch-background: #e1dedb; + --gnome-switch-border-color: #cdc7c2; + --gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%); + --gnome-switch-slider-border-color: #bfb8b1; + --gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-switch-active-background: #3584e4; + --gnome-switch-active-border-color: #185fb4; + --gnome-switch-active-slider-border-color: #185fb4; + + /* Dirty hacks for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); + --gnome-icons-hack-filter: none; + --gnome-window-icons-hack-filter: invert(30%); +} +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + +@media (prefers-color-scheme: dark) { + :root { + /* Browser area before a page starts loading */ + --gnome-browser-before-load-background: #333333; + --theme-primary-color: #315bef !important; + --theme-primary-color-hover: #3863ff; + --theme-alt-color: #fff; + --in-content-link-color:var(--theme-primary-color) !important; + --in-content-link-color-hover:var(--theme-primary-color-hover) !important; + + /* Toolbars */ + --gnome-toolbar-background: #373737; + --gnome-tabstoolbar-background: #1e1e1e; + --gnome-findbar-background: #333333; + --gnome-toolbar-color: #ffffff; + --gnome-toolbar-border-color: #070707; + --gnome-inactive-toolbar-background: #313131; + --gnome-inactive-toolbar-border-color: #121212; + + /* Sidebar */ + --gnome-sidebar-background: #3b3b3b; + --gnome-inactive-sidebar-background: #3f3f3f; + --gnome-sidebar-color: #ffffff; + + /* Popups */ + --gnome-menu-background: rgba(51, 51, 51, 0.95); + --gnome-menu-border-color: #070707; + --gnome-popover-background: rgba(51, 51, 51, 0.95); + --gnome-popover-border-color: #070707; + --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06); + --gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-popover-button-active-background: rgba(255, 255, 255, 0.15); + --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); + + /* Header bar */ + --gnome-headerbar-background: #373737; + --gnome-headerbar-border-color: #070707; + --gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); + --gnome-inactive-headerbar-background: #313131; + --gnome-inactive-headerbar-border-color: #202020; + --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + + /* Buttons */ + --gnome-button-background: linear-gradient(to top, #636363 0%, #696969 100%); + --gnome-button-border-color: #282828; + --gnome-button-border-accent-color: #282828; + --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-hover-color: rgba(255, 255, 255, 0.1); + --gnome-button-active-color: rgba(255, 255, 255, 0.2); + --gnome-button-hover-background: linear-gradient(to top, #707070 0%, #737373 100%); + --gnome-button-active-background-alt:#707070 !important; + --gnome-button-active-background-alt-border: #737373 !important; + --gnome-button-active-background-alt-hover: #9b9b9b !important; + --gnome-button-active-background: #464646; + --gnome-button-active-border-color: #1b1b1b; + --gnome-button-active-border-accent-color: #1b1b1b; + --gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-disabled-background: #505050; + --gnome-button-disabled-border-color: #323232; + --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03); + --gnome-inactive-button-background: linear-gradient(#383838, #383838); + --gnome-inactive-button-border-color: #323232; + --gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0); + --gnome-button-suggested-action-background: #15539e; + --gnome-button-suggested-action-border-color: #0f3b71; + --gnome-button-suggested-action-border-accent-color: #092444; + --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + --gnome-button-suggested-action-hover-background: #2073d8; + --gnome-button-suggested-action-active-background: #103e75; + --gnome-button-suggested-action-active-border-color: #0f3b71; + --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); + --gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d); + --gnome-button-destructive-action-border-color: #851015; + --gnome-button-destructive-action-border-accent-color: #570b0e; + --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px); + --gnome-button-destructive-action-active-background: #8a1116; + --gnome-button-destructive-action-active-border-color: #851015; + --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-button-menulist-color:#fff; + --gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15); + + /* URL bar */ + --gnome-urlbar-background: #464646; + --gnome-urlbar-border-color: #282828; + --gnome-urlbar-box-shadow: inset 0 0 0 1px rgba(21, 83, 158, 0); + --gnome-urlbar-color: #ffffff; + --gnome-hover-urlbar-border-color: #585858; + --gnome-inactive-urlbar-background: #313131; + --gnome-inactive-urlbar-border-color: #282828; + --gnome-inactive-urlbar-box-shadow: none; + --gnome-inactive-urlbar-color: #d6d6d6; + --gnome-focused-urlbar-border-color: #338CBE; + --gnome-focused-urlbar-highlight-color: #006EA0; + --gnome-private-urlbar-background: #25003e; + + /* Tabs */ + --gnome-tabbar-tab-background: #262626; + --gnome-tabbar-tab-color: rgb(141, 144, 145); + --gnome-tabbar-tab-hover-background: #2b2b2b; + --gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b; + --gnome-tabbar-tab-hover-color: rgb(200, 200, 200); + --gnome-tabbar-tab-active-background: #373737; + --gnome-tabbar-tab-active-border-bottom-color: #15539e; + --gnome-tabbar-tab-active-color: #ffffff; + --gnome-tabbar-tab-active-hover-background: #313131; + --gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); + --gnome-inactive-tabbar-tab-active-background: #313131; + --gnome-inactive-tabbar-tab-active-border-bottom-color: #15539e; + --gnome-inactive-tabbar-tab-active-color: rgb(141, 144, 145); + + /* Switch */ + --gnome-switch-background: #282828; + --gnome-switch-border-color: #1b1b1b; + --gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%); + --gnome-switch-slider-border-color: #111111; + --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-switch-active-background: #15539e; + --gnome-switch-active-border-color: #030c17; + --gnome-switch-active-slider-border-color: #030c17; + + /* Dirty hacks for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); + --gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); + /* without invert: none */ + --gnome-window-icons-hack-filter: invert(90%); + /* without invert: none */ + } +} + @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; /* Toolbox colors */ @@ -15,17 +292,20 @@ .toolbarbutton-icon { - color: var(--gnome-toolbar-color); - fill: var(--gnome-toolbar-color); + /*! color: var(--gnome-toolbar-color); */ + /*! fill: var(--gnome-toolbar-color); */ } + +#urlbar{ + top:calc((40.00px - var(--urlbar-height)) / 2 + var(--urlbar-container-padding)) !important; +} #nav-bar, #PersonalToolbar, #toolbar-menubar { - border: 0 !important; + /*! border: 0 !important; */ color: var(--gnome-toolbar-color); background: var(--gnome-toolbar-background) !important; - border-bottom: none !important; } #TabsToolbar { @@ -55,7 +335,7 @@ findbar:-moz-window-inactive image:not(#hack), findbar:-moz-window-inactive label, #viewButton:-moz-window-inactive dropmarker { - opacity: 0.7 !important; + /*! opacity: 0.7 !important; */ } #toolbar-menubar:not([inactive=true]) { @@ -75,29 +355,7 @@ #navigator-toolbox::after { border-bottom-width: 0 !important; } - - /* Reorder toolbars */ - #navigator-toolbox #nav-bar, - findbar { - -moz-box-ordinal-group: 0; - } - - #navigator-toolbox #PersonalToolbar { - -moz-box-ordinal-group: 1; - } - - #navigator-toolbox #titlebar { - -moz-box-ordinal-group: 2; - } - - #navigator-toolbox toolbar { - -moz-box-ordinal-group: 10; - } - - #navigator-toolbox #TabsToolbar { - -moz-box-ordinal-group: 100; - } - + /* Overrides: Don't shift other toolbars on tab drag and drop */ #TabsToolbar[movingtab] { padding-bottom: 0 !important; @@ -142,7 +400,6 @@ #downloadsHistory, #downloadsPanel-mainView .download-state .downloadButton, #overflowMenu-customize-button, -#appMenu-popup .panel-banner-item, #appMenu-popup .toolbaritem-combined-buttons toolbarbutton:not(#appMenu-fxa-label), .subviewbutton-back, #context-navigation menuitem, @@ -160,7 +417,6 @@ .tracking-protection-button, .dialog-button { -moz-appearance: none !important; - background: var(--gnome-button-background) !important; box-shadow: var(--gnome-button-box-shadow) !important; border: 1px solid var(--gnome-button-border-color) !important; border-bottom-color: var(--gnome-button-border-accent-color) !important; @@ -179,7 +435,6 @@ .panel-footer button, #downloadsHistory, #overflowMenu-customize-button, -#appMenu-popup .panel-banner-item, #appMenu-zoomReset-button:not(#appMenu-fxa-label):not(#hack), #tracking-protection-preferences-button:not(#hack), .findbar-container toolbarbutton.findbar-button, @@ -218,62 +473,6 @@ content: ""; } -/* Hover buttons */ -.subviewbutton.panel-subview-footer:hover, -.panel-footer button:hover, -#downloadsHistory:hover, -#downloadsPanel-mainView .download-state .downloadButton:hover, -#overflowMenu-customize-button:hover, -#appMenu-popup .panel-banner-item:hover, -.subviewbutton-back:hover, -#appMenu-popup .toolbaritem-combined-buttons toolbarbutton:not(#appMenu-fxa-label):not([disabled]):hover, -#context-navigation menuitem:not([disabled]):hover, -.identity-popup-preferences-button:not(#hack):hover, -.findbar-container toolbarbutton:hover, -.findbar-closebutton .toolbarbutton-icon:hover, -#sidebar-switcher-target:hover, -#viewButton:hover, -menulist:hover .menulist-label-box, -.expander-down:hover, .expander-up:hover, -.notification-button:hover, -.protections-popup-footer-button:hover, -.identity-popup-permission-remove-button:hover, -#identity-popup-security-expander:hover, -.tracking-protection-button:hover, -#protections-popup-show-report-stack:hover>.protections-popup-footer-button, -.dialog-button:hover { - outline: 0 !important; - background: var(--gnome-button-hover-background) !important; -} - -/* Active buttons */ -.subviewbutton.panel-subview-footer:active, -.panel-footer button:active, -#downloadsHistory:active, -#downloadsPanel-mainView .download-state .downloadButton:active, -#overflowMenu-customize-button:active, -#appMenu-popup .panel-banner-item:active, -.subviewbutton-back:not(#hack):active, -#appMenu-popup .toolbaritem-combined-buttons toolbarbutton:not([disabled]):not(#appMenu-fxa-label):active, -#context-navigation menuitem:active:not([disabled]), -.identity-popup-preferences-button:not(#hack):active, -.findbar-container toolbarbutton[checked], -.findbar-container toolbarbutton:active, -#sidebar-switcher-target:active, #sidebar-switcher-target.active, -#viewButton[open], -menulist[open] .menulist-label-box, -.expander-down:active, .expander-up:active, -.notification-button:active, -.protections-popup-footer-button:not(#hack):active, -.identity-popup-permission-remove-button:active, -#identity-popup-security-expander:active, -.tracking-protection-button:active, -.dialog-button:active { - background: var(--gnome-button-active-background) !important; - box-shadow: var(--gnome-button-active-box-shadow) !important; - border-color: var(--gnome-button-active-border-color) !important; -} - /* Fix HTML select colour */ menulist>menupopup>menuitem, menulist>menupopup>menucaption, @@ -546,28 +745,6 @@ button.popup-notification-primary-button.popup-notification-button:active, -moz-outline-radius: 8px 0 0 8px !important; } -/* Entries fixes */ -#urlbar-container, #search-container { - padding: 0 !important; - margin: 0 3px !important; -} -#urlbar-input-container { - background: transparent !important; - border: 0 !important; -} -#urlbar, #searchbar { - margin: 0 3px !important; - padding: 0 !important; -} -.searchbar-textbox { - border: 0 !important; - padding: 0 !important; - margin: 0 !important; - min-height: auto !important; -} -#searchbar > .searchbar-textbox[focused] .searchbar-search-button:not(#hack) { - margin: 0 !important; -} /* Header bar */ @import "headerbar-urlbar.css"; @import "headerbar-private-urlbar.css"; @@ -575,13 +752,15 @@ button.popup-notification-primary-button.popup-notification-button:active, /* Headerbar */ #nav-bar { - padding: 8px 16px 8px 86px !important; + padding-top:8px !important; + padding-bottom:8px !important; } /* Headerbar CSD colors */ :root[tabsintitlebar] #nav-bar { background: var(--gnome-headerbar-background) !important; - border: none !important; + border-right-color: transparent !important; + border-left-color: transparent !important; border-bottom: none !important; box-shadow: var(--gnome-headerbar-box-shadow) !important; } @@ -605,24 +784,6 @@ button.popup-notification-primary-button.popup-notification-button:active, transition: background 200ms; } -/* Hover headerbar buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([open]):not([disabled]):not([checked]):hover { - outline: 0 !important; - background: var(--gnome-headerbar-button-hover-background) !important; -} - -/* Active headerbar buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled]):not(#hack):active, -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.subviewbutton):not([disabled])[open], -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled])[checked] { - background: var(--gnome-headerbar-button-active-background) !important; -} - -/* Disabled headerbar buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton)[disabled] {} - -/* Inactive window buttons */ -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):-moz-window-inactive {} /* Buttons with margins */ #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton) { @@ -659,6 +820,18 @@ button.popup-notification-primary-button.popup-notification-button:active, transition: box-shadow 200ms; } +#urlbar:not([open="true"]) #urlbar-background{ + background-color: unset !important; + outline:unset !important; +} +#urlbar[open="true"] #urlbar-background{ + background-color: var(--gnome-urlbar-background) !important +} +#identity-box{ + padding-top:2px !important; + padding-bottom:2px !important; +} + #nav-bar #searchbar:hover, #urlbar #urlbar-input-container:hover { box-shadow: inset 0 0 0 1px var(--gnome-hover-urlbar-border-color) !important; @@ -690,363 +863,31 @@ GNOME CSD styles for headerbar on Firefox [tabsintitlebar] @namespace xul url("h (-moz-gtk-csd-close-button) { :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { padding-right: 60px !important; - } -} - -/* Window buttons: at least 2 buttons */ -@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), -(-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), -(-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { - :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { - padding-right: 70px !important; - } -} - -/* Window buttons: 3 buttons */ -@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { - :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { - padding-right: 90px !important; - } -} - -/* Fullscreen headerbar padding for 1 button */ -:root[tabsintitlebar][inFullscreen] #nav-bar { - padding-right: 40px !important; -} - -/* Window buttons box */ -:root[tabsintitlebar]:not([inFullscreen]) #titlebar .titlebar-buttonbox-container, -:root[tabsintitlebar]:not([inFullscreen]) #titlebar-buttonbox-container { - -moz-appearance: none !important; - padding: 0 3px 0 4px; - position: absolute !important; - left: 8px; - top: 15px; - display: block !important; -} -:root[tabsintitlebar][inFullscreen] #window-controls { - -moz-appearance: none !important; - padding: 0 3px 0 4px; - position: absolute !important; - left: 8px; - display: block !important; - top:10px !important; -} - - - -/* Left window buttons */ -@media (-moz-gtk-csd-reversed-placement) { - :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { - padding-right: 3px !important; - } - - /* Window buttons box */ - :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { - padding: 0 3px 0 4px; - left: 8px; - right: auto; - } - - - /* Remove tabsbar titlebar blank spaces */ - :root[tabsintitlebar] #TabsToolbar .titlebar-placeholder { - display: none !important; - } - - /* Prevent menubar from breaking */ - :root[tabsintitlebar] #toolbar-menubar:not([inactive=true]) { - height: 30px !important; - margin-bottom: 8px; - } - - /* Remove default style of titlebar */ - :root[tabsintitlebar] #titlebar { - -moz-appearance: none !important; - } - - /* Fix the issue when dragging tabs */ - :root[tabsintitlebar] #navigator-toolbox[movingtab] #TabsToolbar { - padding-bottom: 0 !important; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-close, -:root[tabsintitlebar] #titlebar #titlebar-close { - background: url("chrome://browser/skin/webkitUI/titlebutton-close.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-max, -:root[tabsintitlebar] #titlebar #titlebar-max { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-min, -:root[tabsintitlebar] #titlebar #titlebar-min { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize.svg") no-repeat; - background-size: contain; -} - -:root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-restore, -:root[tabsintitlebar] #titlebar #titlebar-restore, -:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox .titlebar-max, -:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-close, -:root[tabsintitlebar] #titlebar #titlebar-close:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-hover-inactive.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-max, -:root[tabsintitlebar] #titlebar #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-hover-inactive.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-min, -:root[tabsintitlebar] #titlebar #titlebar-min:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-hover-inactive.svg") no-repeat; - background-size: contain; -} -/* Windows issue #63 */ -:root[tabsintitlebar] #titlebar #titlebar-close:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-hover.svg") no-repeat; - background-size: contain; - transition: background-size 300ms cubic-bezier(0.0, 0.0, 0.2, 1); -} -:root[tabsintitlebar] #titlebar #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-hover.svg") no-repeat; - background-size: contain; - transition: background-size 300ms cubic-bezier(0.0, 0.0, 0.2, 1); -} -:root[tabsintitlebar] #titlebar #titlebar-min:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-hover.svg") no-repeat; - background-size: contain; - transition: background-size 300ms cubic-bezier(0.0, 0.0, 0.2, 1); -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-restore, -:root[tabsintitlebar] #titlebar #titlebar-restore:hover, -:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox:hover .titlebar-max, -:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-hover.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-close:active, -:root[tabsintitlebar] #titlebar #titlebar-close:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-active.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-max:active, -:root[tabsintitlebar] #titlebar #titlebar-max:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-active.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-min:active, -:root[tabsintitlebar] #titlebar #titlebar-min:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-active.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:active .titlebar-restore, -:root[tabsintitlebar] #titlebar #titlebar-restore:active, -:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox:active .titlebar-max:active, -:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-active.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-close, -:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-max, -:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-min, -:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-restore, -:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, -:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-max, -:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox:hover .titlebar-close, -:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-backdrop.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox:hover .titlebar-max, -:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-backdrop.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox:hover .titlebar-min, -:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-backdrop.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-buttonbox:hover .titlebar-max, -:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-backdrop.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar][inFullscreen] #window-controls #restore-button { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-hover.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar][inFullscreen] #window-controls #restore-button:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-active.svg") no-repeat; - background-size: contain; -} -:root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive #restore-button { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop.svg") no-repeat; - background-size: contain; + } } -@media (prefers-color-scheme: dark) { - :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-close, - :root[tabsintitlebar] #titlebar #titlebar-close { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-max, - :root[tabsintitlebar] #titlebar #titlebar-max { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-min, - :root[tabsintitlebar] #titlebar #titlebar-min { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox .titlebar-max, - :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-close, - :root[tabsintitlebar] #titlebar #titlebar-close:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-hover-inactive-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-max, - :root[tabsintitlebar] #titlebar #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-hover-inactive-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-min, - :root[tabsintitlebar] #titlebar #titlebar-min:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-hover-inactive-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-close:hover, - :root[tabsintitlebar] #titlebar #titlebar-close:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-hover-dark.svg") no-repeat; - background-size: contain; - transition: background-size 300ms cubic-bezier(0.0, 0.0, 0.2, 1); - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-max:hover, - :root[tabsintitlebar] #titlebar #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-hover-dark.svg") no-repeat; - background-size: contain; - transition: background-size 300ms cubic-bezier(0.0, 0.0, 0.2, 1); - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-min:hover, - :root[tabsintitlebar] #titlebar #titlebar-min:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-hover-dark.svg") no-repeat; - background-size: contain; - transition: background-size 300ms cubic-bezier(0.0, 0.0, 0.2, 1); - } - :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox:hover .titlebar-max, - :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-hover-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-close:active, - :root[tabsintitlebar] #titlebar #titlebar-close:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-active-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-max:active, - :root[tabsintitlebar] #titlebar #titlebar-max:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-active-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar .titlebar-buttonbox:hover .titlebar-min:active, - :root[tabsintitlebar] #titlebar #titlebar-min:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-active-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox:active .titlebar-max:active, - :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-active-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-close, - :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-max, - :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-min, - :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-buttonbox .titlebar-max, - :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox:hover .titlebar-close, - :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-close-backdrop-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox:hover .titlebar-max, - :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-backdrop-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox:hover .titlebar-min, - :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-minimize-backdrop-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-buttonbox:hover .titlebar-max, - :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-backdrop-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar][inFullscreen] #window-controls #restore-button { - background: url("chrome://browser/skin/webkitUI/titlebutton-maximize-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-hover-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar][inFullscreen] #window-controls #restore-button:active { - background: url("chrome://browser/skin/webkitUI/titlebutton-unmaximize-active-dark.svg") no-repeat; - background-size: contain; - } - :root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive #restore-button { - background: url("chrome://browser/skin/webkitUI/titlebutton-backdrop-dark.svg") no-repeat; - background-size: contain; +/* Window buttons: at least 2 buttons */ +@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), +(-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), +(-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-right: 70px !important; } +} + +/* Window buttons: 3 buttons */ +@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-right: 90px !important; } +} + +/* Fullscreen headerbar padding for 1 button */ +:root[tabsintitlebar][inFullscreen] #nav-bar { + padding-right: 40px !important; +} + + /* Popup menus and context menus */ @import "popups-contents.css"; @@ -1055,8 +896,8 @@ GNOME CSD styles for headerbar on Firefox [tabsintitlebar] @namespace xul url("h /* Style menus */ menupopup { -moz-appearance: none !important; - background: var(--gnome-menu-background) !important; - border: 1px solid var(--gnome-menu-border-color) !important; + /*background: var(--gnome-menu-background) !important; + border: 1px solid var(--gnome-menu-border-color) !important;*/ border-radius: 8px !important; padding: 4px 0 !important; color: var(--gnome-toolbar-color) !important; @@ -1156,9 +997,9 @@ panelview { .protections-popup-category, .protections-popup-category[disabled], .identity-popup-content-blocking-category { - border-radius: 8px !important; - color: var(--gnome-toolbar-color) !important; - font: menu !important; + /*! border-radius: 8px !important; */ + /*! color: var(--gnome-toolbar-color) !important; */ + /*! font: menu !important; */ /* -moz-box-pack: inherit !important; */ } @@ -1180,12 +1021,6 @@ panelview { opacity: 0.5 !important; } -.subviewbutton:not([disabled]):hover, -.toolbarbutton-1:not([disabled]):hover, -.protections-popup-category:not([disabled]):hover, -.identity-popup-content-blocking-category:not([disabled]):hover { - background: var(--gnome-popover-button-hover-background) !important; -} /* Style popover separators */ toolbarseparator, @@ -1224,7 +1059,6 @@ toolbarseparator[orient="vertical"] { } /* fix menu button padding and alignment*/ #PanelUI-menu-button { - padding-inline-end: 0px !important; padding-left: 0px !important; } /* Fix alignment of menu*/ @@ -1243,7 +1077,7 @@ menuseparator { } menupopup>menuitem, menupopup>menu { - padding-block: 2px !important; + padding-block: 4px !important; min-height: unset !important; } #PlacesToolbar menupopup, @@ -1503,7 +1337,7 @@ tab[selected]:-moz-window-inactive { box-sizing: content-box; /* Avoid deformation on flexbox */ border-radius: 2px; - list-style-image: url("../icons/window-close-symbolic.svg") !important; + list-style-image: url("chrome://browser/skin/webkitUI/window-close-symbolic.svg") !important; height: 16px; opacity: .3; padding: 0; @@ -1512,7 +1346,7 @@ tab[selected]:-moz-window-inactive { @media (prefers-color-scheme: dark) { .tab-close-button { - list-style-image: url("../icons/window-close-symbolic-light.svg") !important; + list-style-image: url("chrome://browser/skin/webkitUI/window-close-symbolic-light.svg") !important; } } @@ -1772,492 +1606,116 @@ findbar { justify-content: center; position: relative; flex-direction: row; - width: calc(100% - 42px); -} - -hbox[anonid="findbar-textbox-wrapper"] { - position: absolute; - right: calc(50vw - 36px); - transform: translate(50%, 0); - display: flex !important; -} - -.findbar-find-status, .found-matches { - order: -1; - padding: 7px 0; -} -.findbar-find-status { - padding-left: 6px; - flex: 1; -} - -.findbar-closebutton { - margin: 6px 6px 6px 0 !important; - padding: 0 0 !important; - border-radius: 100px !important; -} - -@media (max-width: 1100px) { - hbox[anonid="findbar-textbox-wrapper"] { - position: relative; - right: 0; - transform: none; - } - .findbar-find-status, .found-matches { - order: 0; - } -} -/* Scrollbars hack */ - -@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - -toolbarbutton#alltabs-button { - -moz-binding: url("scrollbars.xml#js"); -} - -#alltabs-button:not(#hack) { - list-style-image: none !important; - position: relative; -} - -#alltabs-button:not(#hack) .toolbarbutton-icon { - display: none !important; -} -#alltabs-button:not(#hack) .toolbarbutton-badge-stack { - position: absolute; -} - -#alltabs-button::before { - position: relative; - top: 2px; - content: url("../icons/pan-down-symbolic.svg"); -} -@media (prefers-color-scheme: dark) { - #alltabs-button::before { - filter: invert(100%) brightness(200%); - } -} -#alltabs-button:-moz-window-inactive::before { - opacity: 0.7 !important; -} -/* Removes a white flash after you open or close a tab. Affects all variants, - * but it's more visible on dark variants. */ - - @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - - /* Overrides: Change the flash color */ - #tabbrowser-tabpanels, - #tabbrowser-tabpanels[pendingpaint], - browser { - background-color: var(--gnome-browser-before-load-background) !important; - } - - - -/* Replace icons */ - -@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - -/* Back button */ -#nav-bar #back-button .toolbarbutton-icon { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/go-previous-symbolic?size=dialog") !important;; -} - -/* Forward button */ -#nav-bar #forward-button .toolbarbutton-icon { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/go-next-symbolic?size=dialog") !important; -} - -/* Reload button */ -/* Glitch - animations (may be possible to fix in about:config) -#reload-button .toolbarbutton-icon { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/view-refresh-symbolic?size=dialog") !important; -}*/ -/* Reload button */ -/* Glitch - animations (may be possible to fix in about:config) -#stop-button .toolbarbutton-icon { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/process-stop-symbolic?size=dialog") !important; -}*/ - -/* Downloads button */ -/* Glitch - it swaps to the default one anyway -#downloads-button { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/folder-download-symbolic?size=dialog") !important; -} */ - -/* Downloads button */ -/* Default is ok -#PanelUI-menu-button { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/open-menu-symbolic?size=dialog") !important; -} */ - -/* Popovers subview menu arrow */ -.PanelUI-subView .subviewbutton-nav::after { - content: "" !important; - filter: var(--gnome-icons-hack-filter); - background: url("moz-icon://stock/pan-start-symbolic?size=dialog"); - background-size: contain; - height: 16px; - width: 16px; - margin-top: -2px !important; -} - -/* Popovers subview back button */ -.subviewbutton-back { - list-style-image: url("moz-icon://stock/pan-start-symbolic?size=dialog") !important; -} -.subviewbutton-back .toolbarbutton-icon { - filter: var(--gnome-icons-hack-filter); -} -@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -/* Variables that start with --gnome- are added by me and are assigned - * to elements somewhere in this code. The rest of the variables are - * built-in in Firefox, so you need to add an !important if you wanna - * override them. */ - -:root { - /* Browser area before a page starts loading */ - --gnome-browser-before-load-background: #f5f5f5; - --theme-primary-color: #315bef; - --theme-primary-color-hover: #3863ff; - --theme-alt-color:#fff; - --in-content-link-color:var(--theme-primary-color) !important; - --in-content-link-color-hover:var(--theme-primary-color-hover) !important; - - /* Toolbars */ - --gnome-toolbar-background: #ffffff; - --gnome-tabstoolbar-background: #E5E5E5; - --gnome-findbar-background: #f5f5f5; - --gnome-toolbar-color: rgb(46, 52, 54); - --gnome-toolbar-border-color: #fff; - --gnome-inactive-toolbar-color: rgba(46, 52, 54, 0.35); - --gnome-inactive-toolbar-background: #f6f5f4; - --gnome-inactive-toolbar-border-color: #dadada; - - /* Sidebar */ - --gnome-sidebar-background: #f5f5f5; - --gnome-inactive-sidebar-background: #f9f9f8; - - /* Popups */ - --gnome-menu-background: rgba(255, 255, 255, 0.95); - --gnome-menu-border-color: #cdc7c2; - --gnome-popover-background: rgba(255, 255, 255, 0.95); - --gnome-popover-border-color: #cdc7c2; - --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); - --gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1); - --gnome-popover-button-active-background: rgba(0, 0, 0, 0.2); - --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); - - /* Header bar */ - --gnome-headerbar-background: #ffffff; - --gnome-headerbar-border-color: #bdb7b0; - --gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset; - --gnome-inactive-headerbar-background: #f5f5f5; - --gnome-inactive-headerbar-border-color: #dadada; - --gnome-inactive-headerbar-box-shadow: 0 1px #fff inset; - - /* Buttons */ - --gnome-button-background: linear-gradient(to top, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%); - --gnome-button-border-color: #cdc7c2; - --gnome-button-border-accent-color: #b2b2b1; - --gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.03); - --gnome-button-hover-color: rgba(0, 0, 0, 0.1); - --gnome-button-active-color: rgba(0, 0, 0, 0.2); - --gnome-button-hover-background: linear-gradient(to top, #fdfdfd 0%, #ffffff 100%); - --gnome-button-active-background-alt:#f0f0f4 !important; - --gnome-button-active-background-alt-border: #f0f0f4 !important; - --gnome-button-active-background-alt-hover: #ffffff !important; - --gnome-button-active-background: #cfcfcf; - --gnome-button-active-border-color: #b2b2b1; - --gnome-button-active-border-accent-color: #b2b2b1; - --gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - --gnome-button-disabled-background: #faf9f8; - --gnome-button-disabled-border-color: #cdc7c2; - --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-inactive-button-background: #f6f5f4; - --gnome-inactive-button-border-color: #dadada; - --gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); - --gnome-button-suggested-action-background:#2379e2; - --gnome-button-suggested-action-border-color: #1b6acb; - --gnome-button-suggested-action-border-accent-color: #15539e; - --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-button-suggested-action-hover-background: #3584e4; - --gnome-button-suggested-action-active-background: #1961b9; - --gnome-button-suggested-action-active-border-color: #1b6acb; - --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24); - --gnome-button-destructive-action-border-color: #b2161d; - --gnome-button-destructive-action-border-accent-color: #851015; - --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px); - --gnome-button-destructive-action-active-background: #a0131a; - --gnome-button-destructive-action-active-border-color: #b2161d; - --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-button-menulist-color:#020202; - --gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1); - --gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15); + width: calc(100% - 42px); +} - /* URL bar */ - --gnome-urlbar-background: #f5f5f5; - --gnome-urlbar-border-color: #b6b6b3; - --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03); - --gnome-urlbar-color: #020202; - --gnome-hover-urlbar-border-color: #e5e5e5; - --gnome-inactive-urlbar-background: linear-gradient(#fcfcfc, #fcfcfc); - --gnome-inactive-urlbar-border-color: #dadada; - --gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); - --gnome-inactive-urlbar-color: #323232; - --gnome-focused-urlbar-border-color: #5683DA; - --gnome-focused-urlbar-highlight-color: #6592E9; - --gnome-private-urlbar-background: #e6c2ff; +hbox[anonid="findbar-textbox-wrapper"] { + position: absolute; + right: calc(50vw - 36px); + transform: translate(50%, 0); + display: flex !important; +} - /* Tabs */ - --gnome-tabbar-tab-background: #E5E5E5; - --gnome-tabbar-tab-color: rgb(141, 144, 145); - --gnome-tabbar-tab-hover-background: #d5d5d5; - --gnome-tabbar-tab-hover-border-bottom-color: #b6b6b3; - --gnome-tabbar-tab-hover-color: rgb(93, 98, 99); - --gnome-tabbar-tab-active-background: #ffffff; - --gnome-tabbar-tab-active-border-bottom-color: #4a90d9; - --gnome-tabbar-tab-active-color: rgb(46, 52, 54); - --gnome-tabbar-tab-active-hover-background: #f5f5f5; - --gnome-inactive-tabbar-tab-color: #b3b8b9; - --gnome-inactive-tabbar-tab-active-background: #f5f5f5; - --gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color); - --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); +.findbar-find-status, .found-matches { + order: -1; + padding: 7px 0; +} +.findbar-find-status { + padding-left: 6px; + flex: 1; +} - /* Switch */ - --gnome-switch-background: #e1dedb; - --gnome-switch-border-color: #cdc7c2; - --gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%); - --gnome-switch-slider-border-color: #bfb8b1; - --gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-switch-active-background: #3584e4; - --gnome-switch-active-border-color: #185fb4; - --gnome-switch-active-slider-border-color: #185fb4; +.findbar-closebutton { + margin: 6px 6px 6px 0 !important; + padding: 0 0 !important; + border-radius: 100px !important; +} - /* Dirty hacks for replaced symbolic icons, they load from - * /usr/share/icons// and on some systems they need to be - * inverted, on others they don't, adjusts the filters below to your - * needs (you may also adjust icon brightness here). */ - --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); - --gnome-icons-hack-filter: none; - --gnome-window-icons-hack-filter: invert(30%); +@media (max-width: 1100px) { + hbox[anonid="findbar-textbox-wrapper"] { + position: relative; + right: 0; + transform: none; + } + .findbar-find-status, .found-matches { + order: 0; + } } -@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +/* Scrollbars hack */ -/* Variables that start with --gnome- are added by me and are assigned - * to elements somewhere in this code. The rest of the variables are - * built-in in Firefox, so you need to add an !important if you wanna - * override them. */ +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; -@media (prefers-color-scheme: dark) { - :root { - /* Browser area before a page starts loading */ - --gnome-browser-before-load-background: #333333; - --theme-primary-color: #315bef !important; - --theme-primary-color-hover: #3863ff; - --theme-alt-color: #fff; - --in-content-link-color:var(--theme-primary-color) !important; - --in-content-link-color-hover:var(--theme-primary-color-hover) !important; +toolbarbutton#alltabs-button { + -moz-binding: url("scrollbars.xml#js"); +} - /* Toolbars */ - --gnome-toolbar-background: #373737; - --gnome-tabstoolbar-background: #1e1e1e; - --gnome-findbar-background: #333333; - --gnome-toolbar-color: #ffffff; - --gnome-toolbar-border-color: #070707; - --gnome-inactive-toolbar-background: #313131; - --gnome-inactive-toolbar-border-color: #121212; +#alltabs-button:not(#hack) { + list-style-image: none !important; + position: relative; +} - /* Sidebar */ - --gnome-sidebar-background: #3b3b3b; - --gnome-inactive-sidebar-background: #3f3f3f; - --gnome-sidebar-color: #ffffff; +#alltabs-button:not(#hack) .toolbarbutton-icon { + display: none !important; +} +#alltabs-button:not(#hack) .toolbarbutton-badge-stack { + position: absolute; +} - /* Popups */ - --gnome-menu-background: rgba(51, 51, 51, 0.95); - --gnome-menu-border-color: #070707; - --gnome-popover-background: rgba(51, 51, 51, 0.95); - --gnome-popover-border-color: #070707; - --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06); - --gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1); - --gnome-popover-button-active-background: rgba(255, 255, 255, 0.15); - --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); +#alltabs-button::before { + position: relative; + top: 2px; + content: url("chrome://browser/skin/webkitUI/pan-down-symbolic.svg"); +} +#alltabs-button:-moz-window-inactive::before { + opacity: 0.7 !important; +} +/* Removes a white flash after you open or close a tab. Affects all variants, + * but it's more visible on dark variants. */ - /* Header bar */ - --gnome-headerbar-background: #373737; - --gnome-headerbar-border-color: #070707; - --gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); - --gnome-inactive-headerbar-background: #313131; - --gnome-inactive-headerbar-border-color: #202020; - --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - /* Buttons */ - --gnome-button-background: linear-gradient(to top, #636363 0%, #696969 100%); - --gnome-button-border-color: #282828; - --gnome-button-border-accent-color: #282828; - --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); - --gnome-button-hover-color: rgba(255, 255, 255, 0.1); - --gnome-button-active-color: rgba(255, 255, 255, 0.2); - --gnome-button-hover-background: linear-gradient(to top, #707070 0%, #737373 100%); - --gnome-button-active-background-alt:#707070 !important; - --gnome-button-active-background-alt-border: #737373 !important; - --gnome-button-active-background-alt-hover: #9b9b9b !important; - --gnome-button-active-background: #464646; - --gnome-button-active-border-color: #1b1b1b; - --gnome-button-active-border-accent-color: #1b1b1b; - --gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); - --gnome-button-disabled-background: #505050; - --gnome-button-disabled-border-color: #323232; - --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03); - --gnome-inactive-button-background: linear-gradient(#383838, #383838); - --gnome-inactive-button-border-color: #323232; - --gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0); - --gnome-button-suggested-action-background: #15539e; - --gnome-button-suggested-action-border-color: #0f3b71; - --gnome-button-suggested-action-border-accent-color: #092444; - --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); - --gnome-button-suggested-action-hover-background: #2073d8; - --gnome-button-suggested-action-active-background: #103e75; - --gnome-button-suggested-action-active-border-color: #0f3b71; - --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); - --gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d); - --gnome-button-destructive-action-border-color: #851015; - --gnome-button-destructive-action-border-accent-color: #570b0e; - --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px); - --gnome-button-destructive-action-active-background: #8a1116; - --gnome-button-destructive-action-active-border-color: #851015; - --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-button-menulist-color:#fff; - --gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1); - --gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15); + /* Overrides: Change the flash color */ + #tabbrowser-tabpanels, + #tabbrowser-tabpanels[pendingpaint], + browser { + background-color: var(--gnome-browser-before-load-background) !important; + } - /* URL bar */ - --gnome-urlbar-background: #464646; - --gnome-urlbar-border-color: #282828; - --gnome-urlbar-box-shadow: inset 0 0 0 1px rgba(21, 83, 158, 0); - --gnome-urlbar-color: #ffffff; - --gnome-hover-urlbar-border-color: #585858; - --gnome-inactive-urlbar-background: #313131; - --gnome-inactive-urlbar-border-color: #282828; - --gnome-inactive-urlbar-box-shadow: none; - --gnome-inactive-urlbar-color: #d6d6d6; - --gnome-focused-urlbar-border-color: #338CBE; - --gnome-focused-urlbar-highlight-color: #006EA0; - --gnome-private-urlbar-background: #25003e; +/* Replace icons */ - /* Tabs */ - --gnome-tabbar-tab-background: #262626; - --gnome-tabbar-tab-color: rgb(141, 144, 145); - --gnome-tabbar-tab-hover-background: #2b2b2b; - --gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b; - --gnome-tabbar-tab-hover-color: rgb(200, 200, 200); - --gnome-tabbar-tab-active-background: #373737; - --gnome-tabbar-tab-active-border-bottom-color: #15539e; - --gnome-tabbar-tab-active-color: #ffffff; - --gnome-tabbar-tab-active-hover-background: #313131; - --gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); - --gnome-inactive-tabbar-tab-active-background: #313131; - --gnome-inactive-tabbar-tab-active-border-bottom-color: #15539e; - --gnome-inactive-tabbar-tab-active-color: rgb(141, 144, 145); +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - /* Switch */ - --gnome-switch-background: #282828; - --gnome-switch-border-color: #1b1b1b; - --gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%); - --gnome-switch-slider-border-color: #111111; - --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-switch-active-background: #15539e; - --gnome-switch-active-border-color: #030c17; - --gnome-switch-active-slider-border-color: #030c17; +/* Back button */ +#nav-bar #back-button { + list-style-image: url("chrome://browser/skin/webkitUI/go-previous-symbolic.svg") !important; +} - /* Dirty hacks for replaced symbolic icons, they load from - * /usr/share/icons// and on some systems they need to be - * inverted, on others they don't, adjusts the filters below to your - * needs (you may also adjust icon brightness here). */ - --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); - --gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); - /* without invert: none */ - --gnome-window-icons-hack-filter: invert(90%); - /* without invert: none */ - } +/* Forward button */ +#nav-bar #forward-button { + list-style-image: url("chrome://browser/skin/webkitUI/go-next-symbolic.svg") !important; } -/* Windows specific */ -@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; -@media screen and (-moz-windows-compositor) { - .titlebar-button { - border: none; - margin: 0 !important; - /* padding: 3px 6px !important; -*/ - padding: 1px 3px !important; - -moz-content-properties: none !important; - stroke: none !important; - } - - :root[tabsintitlebar][sizemode="maximized"] #titlebar { - appearance: none !important; - } - - :root[tabsintitlebar]:not([sizemode="maximized"]) #titlebar .titlebar-buttonbox-container { - top: 17px !important; - padding: 0 3px 0 15px !important; - - } - :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container{ - margin-top: -34px; - margin-bottom: 44px !important; - -moz-box-ordinal-group: 0 !important; - } - - tab { - font-weight: normal !important; - } - - :root[tabsintitlebar][sizemode="maximized"] #nav-bar-customization-target, [sizemode="maximized"] .titlebar-buttonbox-container, [sizemode="maximized"] #PanelUI-button, [sizemode="maximized"] #nav-bar-overflow-button { - padding-top: 10px !important; - } - - :root[tabsintitlebar][sizemode="maximized"] .titlebar-buttonbox { - top: 2px; - left: 6px; - } - - .titlebar-buttonbox-container, #PanelUI-button { - padding-top: 0; - } - - #urlbar-input { - top: 5px !important; - } - - .titlebar-close { - -moz-box-ordinal-group: 0; - } - - .titlebar-button { - background-color: transparent !important; - } - - #nav-bar { - padding-left: 75px !important; - } - - .PanelUI-subView{ - background: var(--gnome-menu-background) !important; - } + +/* Popovers subview menu arrow */ +.PanelUI-subView .subviewbutton-nav::after { + content: "" !important; + background: url("chrome://browser/skin/webkitUI/pan-start-symbolic.svg"); + background-size: contain; + height: 16px; + width: 16px; + margin-top: -2px !important; +} + +/* Popovers subview back button */ +.subviewbutton-back { + list-style-image: url("chrome://browser/skin/webkitUI/pan-start-symbolic.svg") !important; +} +.subviewbutton-back .toolbarbutton-icon { + filter: var(--gnome-icons-hack-filter); } + + @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; /* Set theme version text in customization panel */ @@ -2265,4 +1723,3 @@ toolbarbutton#alltabs-button { content: "Firefox WhiteSur theme"; padding: 9px; } - diff --git a/floorp/browser/themes/designs/webkitUI/window-close-symbolic-light.svg b/floorp/browser/themes/designs/webkitUI/window-close-symbolic-light.svg index fe15e26f6d1c2..2d9992d24bc40 100644 --- a/floorp/browser/themes/designs/webkitUI/window-close-symbolic-light.svg +++ b/floorp/browser/themes/designs/webkitUI/window-close-symbolic-light.svg @@ -1,4 +1,4 @@ Gnome Symbolic Icons - + diff --git a/floorp/browser/themes/designs/webkitUI/window-close-symbolic.svg b/floorp/browser/themes/designs/webkitUI/window-close-symbolic.svg index a2ccfc2ef772f..2d9992d24bc40 100644 --- a/floorp/browser/themes/designs/webkitUI/window-close-symbolic.svg +++ b/floorp/browser/themes/designs/webkitUI/window-close-symbolic.svg @@ -1,4 +1,4 @@ Gnome Symbolic Icons - + diff --git a/floorp/browser/themes/jar.mn b/floorp/browser/themes/jar.mn index ba73d5e9f40d9..4de4731007783 100644 --- a/floorp/browser/themes/jar.mn +++ b/floorp/browser/themes/jar.mn @@ -462,6 +462,15 @@ browser.jar: skin/classic/browser/floorplegacy/test_legacy.css (designs/floorp-legacy/test_legacy.css) skin/classic/browser/floorplegacy/test_legacy_multitab.css (designs/floorp-legacy/test_legacy_multitab.css) +# WebkitUI + skin/classic/browser/webkitUI/webkitUI.css (designs/webkitUI/webkitUI.css) + skin/classic/browser/webkitUI/go-previous-symbolic.svg (designs/webkitUI/go-previous-symbolic.svg) + skin/classic/browser/webkitUI/go-next-symbolic.svg (designs/webkitUI/go-next-symbolic.svg) + skin/classic/browser/webkitUI/pan-start-symbolic.svg (designs/webkitUI/pan-start-symbolic.svg) + skin/classic/browser/webkitUI/window-close-symbolic.svg (designs/webkitUI/window-close-symbolic.svg) + skin/classic/browser/webkitUI/window-close-symbolic-light.svg (designs/webkitUI/window-close-symbolic-light.svg) + skin/classic/browser/webkitUI/pan-down-symbolic.svg (designs/webkitUI/pan-down-symbolic.svg) + # New tab background images skin/classic/browser/newtabbg-0.webp 　 (newtabbg/newtabbg-0.webp) skin/classic/browser/newtabbg-1.webp 　(newtabbg/newtabbg-1.webp)