diff --git a/src/other/firefox/Monterey/colors/dark.css b/src/other/firefox/Monterey/colors/dark.css index c0248cdd..e21bc34e 100644 --- a/src/other/firefox/Monterey/colors/dark.css +++ b/src/other/firefox/Monterey/colors/dark.css @@ -102,20 +102,17 @@ --gnome-private-urlbar-background: #25003e; /* Tabs */ - --gnome-tabbar-tab-background: #404040; - --gnome-tabbar-tab-color: rgb(141, 144, 145); - --gnome-tabbar-tab-hover-background: #464646; - --gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b; - --gnome-tabbar-tab-hover-color: rgb(200, 200, 200); - --gnome-tabbar-tab-active-background: #505050; - --gnome-tabbar-tab-active-border-bottom-color: #15539e; + --gnome-tabbar-tab-background: rgba(255, 255, 255, 0.06); + --gnome-tabbar-tab-color: #909090; + --gnome-tabbar-tab-hover-background: rgba(255, 255, 255, 0.12); + --gnome-tabbar-tab-hover-color: #c8c8c8; + --gnome-tabbar-tab-active-background: rgba(255, 255, 255, 0.16); --gnome-tabbar-tab-active-color: #ffffff; - --gnome-tabbar-tab-active-hover-background: #525252; - --gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); - --gnome-inactive-tabbar-tab-background: #383838; - --gnome-inactive-tabbar-tab-active-background: #424242; - --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); + --gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, 0.16); + --gnome-inactive-tabbar-tab-color: #686868; + --gnome-inactive-tabbar-tab-background: rgba(255, 255, 255, 0.03); + --gnome-inactive-tabbar-tab-active-background: rgba(255, 255, 255, 0.1); + --gnome-inactive-tabbar-tab-active-color: #898989; --gnome-tab-attention-icon-color: #718be8; /* Switch */ diff --git a/src/other/firefox/Monterey/parts/tabsbar-alt.css b/src/other/firefox/Monterey/parts/tabsbar-alt.css index 1674b69c..f3663d18 100644 --- a/src/other/firefox/Monterey/parts/tabsbar-alt.css +++ b/src/other/firefox/Monterey/parts/tabsbar-alt.css @@ -16,8 +16,8 @@ padding-bottom: 6px !important; } -#tabbrowser-tabs, -#tabbrowser-tabs arrowscrollbox { +#TabsToolbar #tabbrowser-tabs, +#TabsToolbar #tabbrowser-tabs arrowscrollbox { min-height: 32px !important; --tab-min-height: 32px !important; } @@ -26,12 +26,13 @@ max-height: 32px !important; } -.tab-background, .tab-stack { +#TabsToolbar .tab-background, +#TabsToolbar .tab-stack { height: 32px !important; min-height: 32px !important; } -tab > stack { +#TabsToolbar tab > stack { margin: 0 3px !important; } @@ -60,7 +61,7 @@ tab > stack { color: var(--gnome-tabbar-tab-active-color) !important; } -.tab-background { +#TabsToolbar .tab-background { margin: 0 !important; transition: none; margin-block: 0 !important; @@ -71,16 +72,16 @@ tab > stack { transition: background 200ms; } -#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background { +.tabbrowser-tab:not([selected=true]) .tab-background { background: var(--gnome-tabbar-tab-background) !important; } -#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive { +.tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive { background: var(--gnome-inactive-tabbar-tab-background) !important; } /* Tab hover */ -#TabsToolbar .tabbrowser-tab:not([selected=true]):hover > .tab-stack > .tab-background { +.tabbrowser-tab:not([selected=true]):hover > .tab-stack > .tab-background { background: var(--gnome-tabbar-tab-hover-background) !important; } @@ -113,6 +114,7 @@ tab[selected]:-moz-window-inactive .tab-label { } /* Center all inside tab */ +#TabsToolbar { .tab-content { display: flex; flex-direction: row; @@ -126,41 +128,6 @@ tab[selected]:-moz-window-inactive .tab-label { margin-inline: 0 !important; } -/* Prevent tab icons size breaking */ -.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button { - min-width: 16px; -} - -.tabbrowser-tab[soundplaying="true"] .tab-icon-image, -.tabbrowser-tab[muted="true"] .tab-icon-image { - margin-top: 3px !important; - margin-left: 2px !important; -} - -.tab-icon-overlay { - height: 24px !important; - width: 24px !important; - padding: 4px !important; - border-radius: 100px !important; -} - -.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { - top: 0 !important; - inset-inline-end: 0 !important; -} - -.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { - background-color: var(--gnome-tabbar-tab-background) !important; -} - -.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { - background-color: var(--gnome-tabbar-tab-active-background) !important; -} - -.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover { - background-color: var(--gnome-tabbar-tab-hover-background) !important; -} - /* Adjust tab label width */ .tab-label-container { min-width: 0 !important; @@ -210,6 +177,29 @@ tab[selected]:-moz-window-inactive .tab-label { margin-left: 0 !important } +/* Prevent tab icons size breaking */ +.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button { + min-width: 16px; +} + +.tabbrowser-tab[soundplaying="true"] .tab-icon-image, +.tabbrowser-tab[muted="true"] .tab-icon-image { + margin-top: 3px !important; + margin-left: 2px !important; +} + +.tab-icon-overlay { + height: 24px !important; + width: 24px !important; + padding: 4px !important; + border-radius: 100px !important; +} + +.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { + top: 0 !important; + inset-inline-end: 0 !important; +} + /*Align personal bookmarks v89 */ #personal-bookmarks { -moz-box-align: center !important; @@ -219,6 +209,19 @@ tab[selected]:-moz-window-inactive .tab-label { .tabbrowser-tab { padding-inline: 0px !important; } +} + +.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { + background-color: var(--gnome-tabbar-tab-background) !important; +} + +.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { + background-color: var(--gnome-tabbar-tab-active-background) !important; +} + +.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover { + background-color: var(--gnome-tabbar-tab-hover-background) !important; +} .close-icon { height: 16px !important; @@ -315,7 +318,8 @@ tab[selected]:-moz-window-inactive .tab-label { } #TabsToolbar .toolbarbutton-1, -#tabs-newtab-button, #TabsToolbar #new-tab-button { +#TabsToolbar #tabs-newtab-button, +#TabsToolbar #new-tab-button { min-height: 32px !important; margin: 0 2px !important; padding: 0 10px !important; @@ -323,7 +327,7 @@ tab[selected]:-moz-window-inactive .tab-label { } #TabsToolbar .toolbarbutton-1 image, -#tabs-newtab-button image, +#TabsToolbar #tabs-newtab-button image, #TabsToolbar #new-tab-button image { margin: 0 !important; padding: 0 !important; diff --git a/src/other/firefox/Monterey/parts/tabsbar.css b/src/other/firefox/Monterey/parts/tabsbar.css index 925a2f9e..414405b0 100644 --- a/src/other/firefox/Monterey/parts/tabsbar.css +++ b/src/other/firefox/Monterey/parts/tabsbar.css @@ -11,33 +11,31 @@ margin-inline-start: 6px !important; } -tab > stack { +#TabsToolbar tab > stack { margin: 0 3px !important; } /* Tabs bar height */ -#tabbrowser-tabs { +#TabsToolbar #tabbrowser-tabs { --tab-min-height: 32px !important; --tabstrip-min-height: 32px !important; } +#TabsToolbar .tab-background, +#TabsToolbar .tab-stack { + height: 32px !important; + min-height: 32px !important; +} + .tabbrowser-tab, .tab-background { border: none !important; box-shadow: none !important; border-radius: 8px !important; - height: 32px !important; - min-height: 32px !important; - max-height: 32px !important; padding: 0 !important; background-image: none !important; } -.tab-content { - height: 32px !important; - min-height: 32px !important; -} - .tabbrowser-tab:not([visuallyselected="true"], [multiselected]), .tabbrowser-tab:-moz-lwtheme { color: var(--gnome-tabbar-tab-color) !important; } @@ -47,21 +45,24 @@ tab > stack { } .tab-background { - margin: 0 !important; - background-color: transparent !important; + background: transparent !important; transition: background 200ms !important; } -#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background { +#TabsToolbar .tab-background { + margin: 0 !important; +} + +.tabbrowser-tab:not([selected=true]) .tab-background { background: var(--gnome-tabbar-tab-background) !important; } -#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive { +.tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive { background: var(--gnome-inactive-tabbar-tab-background) !important; } /* Tab hover */ -#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background { +.tabbrowser-tab:not([selected=true]):hover .tab-background { background: var(--gnome-tabbar-tab-hover-background) !important; } diff --git a/src/other/firefox/Monterey/parts/toolbox-alt.css b/src/other/firefox/Monterey/parts/toolbox-alt.css index 2f64bca9..296a7a40 100644 --- a/src/other/firefox/Monterey/parts/toolbox-alt.css +++ b/src/other/firefox/Monterey/parts/toolbox-alt.css @@ -14,13 +14,12 @@ #TabsToolbar, #navigator-toolbox, .notificationbox-stack { - border: none !important; color: var(--gnome-toolbar-color); background: var(--gnome-toolbar-background) !important; transition: none !important; } -#TabsToolbar { +#navigator-toolbox { border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; } @@ -35,7 +34,6 @@ /* Toolbox colors */ #navigator-toolbox { - border: 0 !important; background: none !important; } diff --git a/src/other/firefox/Monterey/parts/toolbox.css b/src/other/firefox/Monterey/parts/toolbox.css index ea014072..94b942f4 100644 --- a/src/other/firefox/Monterey/parts/toolbox.css +++ b/src/other/firefox/Monterey/parts/toolbox.css @@ -10,10 +10,9 @@ #nav-bar, #PersonalToolbar, #toolbar-menubar, #titlebar { color: var(--gnome-toolbar-color); background: var(--gnome-toolbar-background) !important; - border: none !important; } -#PersonalToolbar { +#navigator-toolbox { border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; } @@ -26,7 +25,6 @@ /* Toolbox colors */ #navigator-toolbox { - border: none !important; background: none !important; } diff --git a/src/other/firefox/WhiteSur/colors/dark.css b/src/other/firefox/WhiteSur/colors/dark.css index f3c7f74b..670c078d 100644 --- a/src/other/firefox/WhiteSur/colors/dark.css +++ b/src/other/firefox/WhiteSur/colors/dark.css @@ -103,20 +103,20 @@ /* Tabs */ --gnome-tabbar-tab-background: #262626; - --gnome-tabbar-tab-color: rgb(141, 144, 145); + --gnome-tabbar-tab-color: #909090; --gnome-tabbar-tab-border-color: #070707; --gnome-tabbar-tab-hover-background: #2b2b2b; - --gnome-tabbar-tab-hover-border-color: #1b1b1b; - --gnome-tabbar-tab-hover-color: rgb(200, 200, 200); + --gnome-tabbar-tab-hover-border-color: #070707; + --gnome-tabbar-tab-hover-color: #c8c8c8; --gnome-tabbar-tab-active-background: #373737; --gnome-tabbar-tab-active-border-color: #070707; --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-color: #686868; --gnome-inactive-tabbar-tab-background: #202020; --gnome-inactive-tabbar-tab-active-background: #313131; --gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color); - --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); + --gnome-inactive-tabbar-tab-active-color: #898989; --gnome-tab-attention-icon-color: #718be8; /* Switch */ diff --git a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css index 66889548..44f75611 100644 --- a/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css +++ b/src/other/firefox/WhiteSur/parts/tabsbar-adaptive.css @@ -6,6 +6,16 @@ --space-above-tabbar: 0 !important; } +.tab-background:is([selected]) { + box-shadow: none !important; +} + +#TabsToolbar { +/* Remove hover effects on tab bar buttons */ + --toolbarbutton-active-background: transparent !important; + --toolbarbutton-hover-background: transparent !important; + padding: 0 !important; + box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important; /* Tabs bar height */ #tabbrowser-tabs { @@ -16,28 +26,20 @@ max-height: 32px !important; } -#TabsToolbar .toolbar-items { +.tab-background, .tab-stack { + min-height: 32px !important; +} + +.toolbar-items { margin-bottom: -1px !important; } -:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items { - margin-bottom: 0 !important; -} - -/* Remove hover effects on tab bar buttons */ -#TabsToolbar { - --toolbarbutton-active-background: transparent !important; - --toolbarbutton-hover-background: transparent !important; - padding: 0 !important; - box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important; -} - /* New hover effect */ -#TabsToolbar toolbarbutton { +toolbarbutton { fill-opacity: .6 !important; } -#TabsToolbar toolbarbutton:not([disabled]):hover, -#TabsToolbar toolbarbutton[open=true] { +toolbarbutton:not([disabled]):hover, +toolbarbutton[open=true] { fill-opacity: 1 !important; } @@ -77,23 +79,6 @@ margin: 0 !important; } -/* Tab labels */ -tab { - color: var(--gnome-tabbar-tab-color) !important; -} -tab:hover { - color: var(--gnome-tabbar-tab-hover-color) !important; -} -tab[selected] { - color: var(--gnome-tabbar-tab-active-color) !important; -} -tab:-moz-window-inactive { - color: var(--gnome-inactive-tabbar-tab-color) !important; -} -tab[selected]:-moz-window-inactive { - color: var(--gnome-inactive-tabbar-tab-active-color) !important; -} - /* Center all inside tab */ .tab-content { display: flex; @@ -219,6 +204,107 @@ tab[selected]:-moz-window-inactive { margin-right: auto !important } +.tab-background { + background-color: transparent !important; + transition: background-color 200ms; +} + +/* Tab hover */ +.tabbrowser-tab:not([selected=true]):hover .tab-background { + background-color: var(--gnome-tabbar-tab-active-hover-background) !important; + border-image: none !important; + box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 -1px var(--gnome-toolbar-border-color) !important; +} + +/* Active tab */ +.tab-background:is([selected]) { + background-color: var(--gnome-tabbar-tab-active-background) !important; + background-image: none !important; + border: none !important; + border-image: none !important; + transition: none !important; + margin-left: -1px !important; + margin-right: -1px !important; + border-radius: 0 !important; + box-shadow: 1px 0 var(--gnome-toolbar-border-color), 1px 0 3px rgba(0, 0, 0, 0.08), + -1px 0 var(--gnome-toolbar-border-color), -1px 0 3px rgba(0, 0, 0, 0.08), + inset 0 -1px var(--gnome-toolbar-border-color) !important; +} + +.tab-background:is([selected]):-moz-window-inactive { + background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; + border-image: none !important; +} + +/* Tabs scroll buttons */ +#scrollbutton-up:not([disabled]):hover, +#scrollbutton-down:not([disabled]):hover { + background: var(--gnome-tabbar-tab-active-hover-background) !important; +} + +/* Full width tabs */ +.tabbrowser-tab:not([style^="max-width"]):not([pinned]), +.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { + max-width: 100% !important; +} + +.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]), +.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) { + max-width: .1px !important; +} + +/* Remove blank spaces on tabs start and end */ +.titlebar-spacer { + display: none !important; +} + +/* TabsToolbar buttons */ +.toolbarbutton-1 { + margin: 0 !important; + border-radius: 0 !important; + min-width: 32px !important; + min-height: 32px !important; + padding: 0 !important; + border: none !important; +} + +.toolbarbutton-1 > .toolbarbutton-icon, +.toolbarbutton-1 > .toolbarbutton-text, +.toolbarbutton-1 > .toolbarbutton-badge-stack { + padding: 8px !important; +} + +.toolbarbutton-1 > .toolbarbutton-icon { + width: 32px !important; + height: 32px !important; +} + +#alltabs-button { + display: none !important; +} +} + +:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items { + margin-bottom: 0 !important; +} + +/* Tab labels */ +tab { + color: var(--gnome-tabbar-tab-color) !important; +} +tab:hover { + color: var(--gnome-tabbar-tab-hover-color) !important; +} +tab[selected] { + color: var(--gnome-tabbar-tab-active-color) !important; +} +tab:-moz-window-inactive { + color: var(--gnome-inactive-tabbar-tab-color) !important; +} +tab[selected]:-moz-window-inactive { + color: var(--gnome-inactive-tabbar-tab-active-color) !important; +} + /* Close tab button */ .close-icon { height: 16px !important; @@ -331,89 +417,6 @@ tab[selected]:-moz-window-inactive { display: flex; } -.tab-background { - background-color: transparent !important; - transition: background-color 200ms; -} - -.tab-background, .tab-stack { - min-height: 32px !important; -} - -/* Tab hover */ -#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background { - background-color: var(--gnome-tabbar-tab-active-hover-background) !important; - border-image: none !important; - box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 -1px var(--gnome-toolbar-border-color) !important; -} - -/* Active tab */ -.tab-background:is([selected]) { - background-color: var(--gnome-tabbar-tab-active-background) !important; - background-image: none !important; - border: none !important; - border-image: none !important; - transition: none !important; - margin-left: -1px !important; - margin-right: -1px !important; - border-radius: 0 !important; - box-shadow: 1px 0 var(--gnome-toolbar-border-color), 1px 0 3px rgba(0, 0, 0, 0.08), - -1px 0 var(--gnome-toolbar-border-color), -1px 0 3px rgba(0, 0, 0, 0.08), - inset 0 -1px var(--gnome-toolbar-border-color) !important; -} - -.tab-background:is([selected]):-moz-window-inactive { - background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; - border-image: none !important; -} - -/* Tabs scroll buttons */ -#TabsToolbar #scrollbutton-up:not([disabled]):hover, -#TabsToolbar #scrollbutton-down:not([disabled]):hover { - background: var(--gnome-tabbar-tab-active-hover-background) !important; -} - -/* Full width tabs */ -.tabbrowser-tab:not([style^="max-width"]):not([pinned]), -.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { - max-width: 100% !important; -} - -.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]), -.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) { - max-width: .1px !important; -} - -/* Remove blank spaces on tabs start and end */ -#TabsToolbar .titlebar-spacer { - display: none !important; -} - -/* TabsToolbar buttons */ -#TabsToolbar .toolbarbutton-1 { - margin: 0 !important; - border-radius: 0 !important; - min-width: 32px !important; - min-height: 32px !important; - padding: 0 !important; - border: none !important; -} - -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { - padding: 8px !important; -} - -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon { - width: 32px !important; - height: 32px !important; -} - -#TabsToolbar #alltabs-button { - display: none !important; -} - /* firefox-view-button */ :root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs, :root[privatebrowsingmode]:not([firefoxviewhidden]) :is( diff --git a/src/other/firefox/WhiteSur/parts/tabsbar.css b/src/other/firefox/WhiteSur/parts/tabsbar.css index dd530c0e..b027d7a8 100644 --- a/src/other/firefox/WhiteSur/parts/tabsbar.css +++ b/src/other/firefox/WhiteSur/parts/tabsbar.css @@ -6,41 +6,43 @@ --space-above-tabbar: 0 !important; } +.tab-background:is([selected]) { + box-shadow: none !important; +} + +#TabsToolbar { +/* Remove hover effects on tab bar buttons */ + --toolbarbutton-active-background: transparent !important; + --toolbarbutton-hover-background: transparent !important; + padding: 0 !important; + box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important; + +/* New hover effect */ +toolbarbutton { + fill-opacity: .6 !important; +} +toolbarbutton:not([disabled]):hover, +toolbarbutton[open=true] { + fill-opacity: 1 !important; +} /* Tabs bar height */ #tabbrowser-tabs { --tab-min-height: 32px !important; --tabstrip-min-height: 32px !important; } +.tab-background, .tab-stack { + min-height: 32px !important; +} + #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { max-height: 32px !important; } -#TabsToolbar .toolbar-items { +.toolbar-items { margin-bottom: -1px !important; } -:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items { - margin-bottom: 0 !important; -} - -/* Remove hover effects on tab bar buttons */ -#TabsToolbar { - --toolbarbutton-active-background: transparent !important; - --toolbarbutton-hover-background: transparent !important; - padding: 0 !important; - box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important; -} - -/* New hover effect */ -#TabsToolbar toolbarbutton { - fill-opacity: .6 !important; -} -#TabsToolbar toolbarbutton:not([disabled]):hover, -#TabsToolbar toolbarbutton[open=true] { - fill-opacity: 1 !important; -} - /* Remove shadow next to tab scroll buttons */ .arrowscrollbox-overflow-start-indicator, .arrowscrollbox-overflow-end-indicator { @@ -77,23 +79,6 @@ margin: 0 !important; } -/* Tab labels */ -tab { - color: var(--gnome-tabbar-tab-color) !important; -} -tab:hover { - color: var(--gnome-tabbar-tab-hover-color) !important; -} -tab[selected] { - color: var(--gnome-tabbar-tab-active-color) !important; -} -tab:-moz-window-inactive { - color: var(--gnome-inactive-tabbar-tab-color) !important; -} -tab[selected]:-moz-window-inactive { - color: var(--gnome-inactive-tabbar-tab-active-color) !important; -} - /* Center all inside tab */ .tab-content { display: flex; @@ -219,6 +204,102 @@ tab[selected]:-moz-window-inactive { margin-right: auto !important } +/* Tab hover */ +.tabbrowser-tab:not([selected=true]):hover .tab-background { + background-color: var(--gnome-tabbar-tab-hover-background) !important; + border-image: none !important; + box-shadow: inset 0 1px var(--gnome-tabbar-tab-hover-border-color), inset 0 -1px var(--gnome-tabbar-tab-hover-border-color) !important; +} + +/* Active tab */ +.tab-background:is([selected]) { + background-color: var(--gnome-tabbar-tab-active-background) !important; + background-image: none !important; + border: none !important; + border-image: none !important; + transition: none !important; + margin-left: -1px !important; + margin-right: -1px !important; + border-radius: 0 !important; + box-shadow: 1px 0 var(--gnome-tabbar-tab-active-border-color), 1px 0 3px rgba(0, 0, 0, 0.08), + -1px 0 var(--gnome-tabbar-tab-active-border-color), -1px 0 3px rgba(0, 0, 0, 0.08), + inset 0 -1px var(--gnome-tabbar-tab-active-border-color) !important; +} + +.tab-background:is([selected]):-moz-window-inactive { + background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; + border-image: none !important; +} + +/* Tabs scroll buttons */ +#scrollbutton-up:not([disabled]):hover, +#scrollbutton-down:not([disabled]):hover { + background: var(--gnome-tabbar-tab-active-hover-background) !important; +} + +/* Full width tabs */ +.tabbrowser-tab:not([style^="max-width"]):not([pinned]), +.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { + max-width: 100% !important; +} + +.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]), +.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) { + max-width: .1px !important; +} + +/* Remove blank spaces on tabs start and end */ +.titlebar-spacer { + display: none !important; +} + +/* TabsToolbar buttons */ +.toolbarbutton-1 { + margin: 0 !important; + border-radius: 0 !important; + min-width: 32px !important; + min-height: 32px !important; + padding: 0 !important; + border: none !important; +} + +.toolbarbutton-1 > .toolbarbutton-icon, +.toolbarbutton-1 > .toolbarbutton-text, +.toolbarbutton-1 > .toolbarbutton-badge-stack { + padding: 8px !important; +} + +.toolbarbutton-1 > .toolbarbutton-icon { + width: 32px !important; + height: 32px !important; +} + +#alltabs-button { + display: none !important; +} +} + +:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items { + margin-bottom: 0 !important; +} + +/* Tab labels */ +tab { + color: var(--gnome-tabbar-tab-color) !important; +} +tab:hover { + color: var(--gnome-tabbar-tab-hover-color) !important; +} +tab[selected] { + color: var(--gnome-tabbar-tab-active-color) !important; +} +tab:-moz-window-inactive { + color: var(--gnome-inactive-tabbar-tab-color) !important; +} +tab[selected]:-moz-window-inactive { + color: var(--gnome-inactive-tabbar-tab-active-color) !important; +} + /* Close tab button */ .close-icon { height: 16px !important; @@ -326,86 +407,7 @@ tab[selected]:-moz-window-inactive { } .tab-background { - background-color: transparent !important; - transition: background-color 200ms; -} - -.tab-background, .tab-stack { - min-height: 32px !important; -} - -/* Tab hover */ -#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background { - background-color: var(--gnome-tabbar-tab-hover-background) !important; - border-image: none !important; - box-shadow: inset 0 1px var(--gnome-tabbar-tab-hover-border-color), inset 0 -1px var(--gnome-tabbar-tab-hover-border-color) !important; -} - -/* Active tab */ -.tab-background:is([selected]) { - background-color: var(--gnome-tabbar-tab-active-background) !important; - background-image: none !important; - border: none !important; - border-image: none !important; - transition: none !important; - margin-left: -1px !important; - margin-right: -1px !important; - border-radius: 0 !important; - box-shadow: 1px 0 var(--gnome-tabbar-tab-active-border-color), 1px 0 3px rgba(0, 0, 0, 0.08), - -1px 0 var(--gnome-tabbar-tab-active-border-color), -1px 0 3px rgba(0, 0, 0, 0.08), - inset 0 -1px var(--gnome-tabbar-tab-active-border-color) !important; -} - -.tab-background:is([selected]):-moz-window-inactive { - background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; - border-image: none !important; -} - -/* Tabs scroll buttons */ -#TabsToolbar #scrollbutton-up:not([disabled]):hover, -#TabsToolbar #scrollbutton-down:not([disabled]):hover { - background: var(--gnome-tabbar-tab-active-hover-background) !important; -} - -/* Full width tabs */ -.tabbrowser-tab:not([style^="max-width"]):not([pinned]), -.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { - max-width: 100% !important; -} - -.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]), -.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) { - max-width: .1px !important; -} - -/* Remove blank spaces on tabs start and end */ -#TabsToolbar .titlebar-spacer { - display: none !important; -} - -/* TabsToolbar buttons */ -#TabsToolbar .toolbarbutton-1 { - margin: 0 !important; - border-radius: 0 !important; - min-width: 32px !important; - min-height: 32px !important; - padding: 0 !important; - border: none !important; -} - -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { - padding: 8px !important; -} - -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon { - width: 32px !important; - height: 32px !important; -} - -#TabsToolbar #alltabs-button { - display: none !important; + transition: background 200ms; } /* firefox-view-button */ diff --git a/src/other/firefox/WhiteSur/parts/toolbox.css b/src/other/firefox/WhiteSur/parts/toolbox.css index 7e816029..6dbfd4d8 100644 --- a/src/other/firefox/WhiteSur/parts/toolbox.css +++ b/src/other/firefox/WhiteSur/parts/toolbox.css @@ -14,6 +14,10 @@ background: var(--gnome-toolbar-background) !important; } +#navigator-toolbox { + border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; +} + #nav-bar { border: none !important; color: var(--gnome-toolbar-color); @@ -41,7 +45,6 @@ findbar:-moz-window-inactive label, #TabsToolbar { border: none !important; background: var(--gnome-tabstoolbar-background) !important; - border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; box-shadow: inset 0 1px var(--gnome-toolbar-border-color) !important; } diff --git a/src/other/firefox/common/hide-window-buttons.css b/src/other/firefox/common/hide-window-buttons.css index 2859cebd..d4e8b046 100644 --- a/src/other/firefox/common/hide-window-buttons.css +++ b/src/other/firefox/common/hide-window-buttons.css @@ -1,5 +1,6 @@ @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-buttonbox-container, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container { display: none !important; } diff --git a/src/other/firefox/common/parts/popups.css b/src/other/firefox/common/parts/popups.css index d79eaa34..4144ad42 100644 --- a/src/other/firefox/common/parts/popups.css +++ b/src/other/firefox/common/parts/popups.css @@ -183,7 +183,6 @@ panelview { /* Style popovers menu buttons */ menuitem, menupopup menu, -.toolbarbutton-1, .protections-popup-footer-button, .protections-popup-category, .identity-popup-content-blocking-category, diff --git a/src/other/firefox/common/parts/sidebar.css b/src/other/firefox/common/parts/sidebar.css index 627455e7..f55001a5 100644 --- a/src/other/firefox/common/parts/sidebar.css +++ b/src/other/firefox/common/parts/sidebar.css @@ -1,10 +1,52 @@ /* Sidebar */ +#sidebar-main, #sidebar-box, #sidebar, .sidebar-panel[lwt-sidebar] { color: var(--gnome-toolbar-color) !important; background: var(--gnome-sidebar-background) !important; } +#sidebar-main { + padding: 8px 0; +} + +@media (-moz-bool-pref: "sidebar.revamp") { + #tabbrowser-tabbox { + outline: none !important; + box-shadow: none !important; + } + + #sidebar { + border-radius: 12px !important; + box-shadow: var(--gnome-popover-shadow), 0 0 0 1px var(--gnome-popover-border-color) !important; + border: 1px solid rgba(255, 255, 255, 0.06) !important; + color: var(--gnome-toolbar-color) !important; + background: var(--gnome-menu-background) !important; + margin: 6px 6px 0 0 !important; + } +} + +.search-container { + border-radius: 1000px; + background-color: var(--gnome-urlbar-background) !important; + border: 1px solid var(--gnome-urlbar-border-color) !important; + outline: 2px solid transparent !important; + box-shadow: none !important; +} + +.search-container:focus-within { + border: 1px solid transparent !important; + outline: 2px solid var(--gnome-focused-urlbar-border-color) !important; + outline-offset: -2px; + transition: outline 100ms ease-out; +} + +fxview-search-textbox { + &::part(input) { + border: var(--sidebar-box-border) !important; + } +} + #sidebar-header { padding: 8px; border-bottom: 1px solid var(--gnome-sidebar-border-color) !important; @@ -13,7 +55,7 @@ .sidebar-splitter { width: 1px !important; - background-color: var(--gnome-sidebar-border-color, var(--gnome-toolbar-background)) !important; + background-color: var(--gnome-toolbar-border-color, var(--gnome-toolbar-background)) !important; background-image: linear-gradient(to top, var(--sidebar-background-color) 0%, var(--sidebar-background-color) 100%); border: none !important; }