diff --git a/src/other/firefox/chrome/Colloid/colors/dark.css b/src/other/firefox/chrome/Colloid/colors/dark.css index 4f1f2e1d..5ef6e9ff 100644 --- a/src/other/firefox/chrome/Colloid/colors/dark.css +++ b/src/other/firefox/chrome/Colloid/colors/dark.css @@ -93,6 +93,7 @@ --gnome-tab-button-background: rgba(0, 0, 0, .5); --gnome-tab-button-hover-background: rgba(0, 0, 0, .6); --gnome-tabbar-tab-identity-base-opacity: 0; + --gnome-tabbar-tab-needs-attetion: #78aeed; } /* Private window colors */ diff --git a/src/other/firefox/chrome/Colloid/colors/light.css b/src/other/firefox/chrome/Colloid/colors/light.css index e0d3ebcd..d918c527 100644 --- a/src/other/firefox/chrome/Colloid/colors/light.css +++ b/src/other/firefox/chrome/Colloid/colors/light.css @@ -91,6 +91,7 @@ --gnome-tab-button-background: rgba(255, 255, 255, .5); --gnome-tab-button-hover-background: rgba(255, 255, 255, .6); --gnome-tabbar-tab-identity-base-opacity: .1; + --gnome-tabbar-tab-needs-attetion: #5b9bf8; } /* Private window colors */ diff --git a/src/other/firefox/chrome/Colloid/icons/picture-in-picture-open.svg b/src/other/firefox/chrome/Colloid/icons/picture-in-picture-open.svg new file mode 100644 index 00000000..c09330c7 --- /dev/null +++ b/src/other/firefox/chrome/Colloid/icons/picture-in-picture-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/other/firefox/chrome/Colloid/parts/csd.css b/src/other/firefox/chrome/Colloid/parts/csd.css index 1900a2cb..09899213 100644 --- a/src/other/firefox/chrome/Colloid/parts/csd.css +++ b/src/other/firefox/chrome/Colloid/parts/csd.css @@ -74,7 +74,8 @@ /* Remove close and minimize buttons from fullscreen buttons */ :root[tabsintitlebar][inFullscreen] #window-controls #close-button, :root[tabsintitlebar][inFullscreen] #window-controls #minimize-button, -:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container { +:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container .titlebar-min, +:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container .titlebar-close { display: none !important; } @@ -128,11 +129,12 @@ width: 16px !important; } +:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-button, :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { border-radius: 6px !important; - height: 32px; + height: 32px !important; margin: 0 4px !important; - width: 32px; + width: 32px !important; } :root[tabsintitlebar] #titlebar toolbarbutton > .toolbarbutton-icon { diff --git a/src/other/firefox/chrome/Colloid/parts/entries.css b/src/other/firefox/chrome/Colloid/parts/entries.css index 8467b3b7..94795fc6 100644 --- a/src/other/firefox/chrome/Colloid/parts/entries.css +++ b/src/other/firefox/chrome/Colloid/parts/entries.css @@ -121,3 +121,6 @@ #urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background { outline: 0 !important; } +#notification-popup-box { + height: 34px !important; +} diff --git a/src/other/firefox/chrome/Colloid/parts/icons.css b/src/other/firefox/chrome/Colloid/parts/icons.css index cc744aa9..9fe2e44a 100644 --- a/src/other/firefox/chrome/Colloid/parts/icons.css +++ b/src/other/firefox/chrome/Colloid/parts/icons.css @@ -110,6 +110,7 @@ menuitem[type="radio"][disabled="true"] .menu-iconic-icon { :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-min .toolbarbutton-icon { list-style-image: url("../icons/window-minimize-symbolic.svg") !important; } +:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-restore .toolbarbutton-icon, :root[tabsintitlebar][inFullscreen] #window-controls #restore-button .toolbarbutton-icon { list-style-image: url("../icons/view-restore-symbolic.svg") !important; } @@ -504,6 +505,10 @@ treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { list-style-image: url("../icons/reader-mode.svg") !important; } +#picture-in-picture-button > .urlbar-icon { + list-style-image: url("../icons/picture-in-picture-open.svg") !important; +} + #permissions-granted-icon { list-style-image: url("../icons/permissions-granted.svg") !important; } @@ -777,6 +782,7 @@ treechildren::-moz-tree-image { #permissions-granted-icon, #tracking-protection-icon-animatable-image, #reader-mode-button > .urlbar-icon, + #picture-in-picture-button > .urlbar-icon, #star-button:not([starred]), #context-bookmarkpage:not([starred]) .menu-iconic-icon, #geo-sharing-icon[sharing], .geo-icon, diff --git a/src/other/firefox/chrome/Colloid/parts/popups.css b/src/other/firefox/chrome/Colloid/parts/popups.css index fcd4dc23..7b3edd7c 100644 --- a/src/other/firefox/chrome/Colloid/parts/popups.css +++ b/src/other/firefox/chrome/Colloid/parts/popups.css @@ -37,6 +37,18 @@ menuitem[disabled="true"]:hover, menupopup menu[disabled="true"]:hover { background: transparent !important; } +@media (-moz-gtk-non-native-menus) or (-moz-non-native-content-theme) { + menuitem:is([type="checkbox"], [checked="true"]) .menu-iconic-icon { + appearance: none !important; + -moz-default-appearance: none !important; + } + + menuitem[type="radio"] .menu-iconic-icon { + appearance: none !important; + -moz-default-appearance: none !important; + } +} + /* Adjust popovers position */ panel[type=arrow] { margin-top: 3px !important; diff --git a/src/other/firefox/chrome/Colloid/parts/tabsbar.css b/src/other/firefox/chrome/Colloid/parts/tabsbar.css index 52eaaad1..313721da 100644 --- a/src/other/firefox/chrome/Colloid/parts/tabsbar.css +++ b/src/other/firefox/chrome/Colloid/parts/tabsbar.css @@ -239,9 +239,9 @@ tab { /* Icon overlay smaller */ .tab-icon-overlay[pinned], .tab-icon-overlay:not([indicator-replaces-favicon="true"], [selected]) { - width: 12px !important; - height: 12px !important; - padding: 2px !important; + width: 16px !important; + height: 16px !important; + padding: 0 !important; } /* Icon overlay small style */ .tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { @@ -327,27 +327,39 @@ tab { } /* Close button overlay */ -.tabbrowser-tab:not([pinned]) .tab-content::after, .tabbrowser-tab:not([pinned]) .tab-content::before { - bottom: 1px; +.tabbrowser-tab:not([pinned]) .tab-content::before { + border-radius: 0 6px 6px 0; content: ""; height: 100%; opacity: 0; position: absolute; right: 0; - transition: all 0.2s ease-out; + top: 0; + transition: 0.2s; width: 55px; } -.tabbrowser-tab:not([pinned]) .tab-content::after { - background: transparent; - z-index: 90; -} .tabbrowser-tab:not([pinned]) .tab-content::before { background: linear-gradient(to left, var(--gnome-tabbar-tab-close-overlay-bg) 50%, transparent); z-index: 99; } -.tabbrowser-tab:not([pinned], :-moz-window-inactive):is([selected="true"], :hover) .tab-content::before { +.tabbrowser-tab:not([pinned]):is([selected="true"], :hover) .tab-content::before { opacity: 1; } +.tabbrowser-tab:not([pinned])[selected="true"] .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background); +} +.tabbrowser-tab:not([pinned], :-moz-window-inactive)[selected="true"]:hover .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-hover-background); +} +.tabbrowser-tab:not([pinned]):hover .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-hover-background); +} +.tabbrowser-tab:not([pinned])[selected="true"]:-moz-window-inactive .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: var(--gnome-inactive-tabbar-tab-active-background); +} +.tabbrowser-tab:not([pinned]):hover:-moz-window-inactive .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: var(--gnome-inactive-tabbar-tab-hover-background); +} /* Tab close button etc. positioning */ .tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button { @@ -445,6 +457,14 @@ tab { transition: none !important; } +/* Needs attetion tab indicator */ +.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-image: radial-gradient(var(--gnome-tabbar-tab-needs-attetion), var(--gnome-tabbar-tab-needs-attetion) 10px) !important; + background-position: center bottom !important; + background-size: 14px 2px !important; +} + /* Tab spinner */ .tab-throbber::before { animation: gnome-spinner 1s linear infinite !important; @@ -470,8 +490,10 @@ tab { /* OPTIONAL: Hide single tab */ @supports -moz-bool-pref("gnomeTheme.hideSingleTab") { - #tabbrowser-tabs tab:only-of-type { - display: none !important; + #tabbrowser-tabs tab:only-of-type, + #tabbrowser-tabs tab:only-of-type ~ toolbarbutton, + #tabbrowser-tabs tab:only-of-type ~ #tabbrowser-arrowscrollbox-periphery { + visibility: collapse; } } @@ -480,13 +502,118 @@ tab { .tabbrowser-tab:not([style^="max-width"]):not([pinned]), .tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { max-width: 225px !important; + --tab-min-width: inherit !important; } } /* OPTIONAL: Add more contrast to the active tab */ @supports -moz-bool-pref("gnomeTheme.activeTabContrast") { - .tab-background[selected=true], + .tab-background[selected=true]:not(#hack), :root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not(#hack) { background: var(--gnome-tabbar-tab-active-background-contrast) !important; } + .tabbrowser-tab:not([pinned])[selected="true"] .tab-content::before, + :root:not(:-moz-window-inactive) .tabbrowser-tab:hover .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background-contrast) !important; + } +} + +/* OPTIONAL: Show the close button on the selected tab only */ +@supports -moz-bool-pref("gnomeTheme.closeOnlySelectedTabs") { + /* Hide the close buttons on hover */ + .tabbrowser-tab:not([selected="true"]):hover .tab-close-button { + visibility: hidden !important; + opacity: 0 !important; + } + /* Hide the close button overlay on hover */ + .tabbrowser-tab:not([pinned]):hover .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: unset; + } + /* Reset the overflow position of the tab label container */ + .tabbrowser-tab:not([pinned]):not([selected="true"]):hover .tab-label-container[textoverflow="true"] { + margin-right: -16px; + } +} + +/* OPTIONAL: Use tabs as headerbar */ +@supports -moz-bool-pref("gnomeTheme.tabsAsHeaderbar") { + /* Rearrange bars */ + #navigator-toolbox #titlebar { + order: 0; + } + #navigator-toolbox #titlebar #TabsToolbar { + order: 0; + } + #navigator-toolbox #titlebar #toolbar-menubar { + order: 1; + } + #navigator-toolbox #nav-bar { + order: 1; + } + #navigator-toolbox #PersonalToolbar { + order: 2; + } + + /* Remove nav-bar rounding and padding */ + :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #nav-bar { + border-radius: 0 !important; + } + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar, + :root[tabsintitlebar][inFullscreen] #nav-bar { + padding-left: 3px !important; + padding-right: 3px !important; + } + + /* Round and pad tab-bar */ + :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #TabsToolbar { + border-radius: env(-moz-gtk-csd-titlebar-radius) env(-moz-gtk-csd-titlebar-radius) 0 0 !important + } + :root[tabsintitlebar]:not([inFullscreen], [sizemode="maximized"]) #TabsToolbar .toolbar-items { + padding: 0 46px; + } + + /* Hide duplicate window controls from menubar */ + :root[tabsintitlebar] #toolbar-menubar .titlebar-buttonbox-container { + display: none !important; + } + + /* Force displaying controls in tab-bar */ + :root[tabsintitlebar] #TabsToolbar .titlebar-buttonbox-container:not(#hack) { + display: flex !important; + position: static !important; + visibility: visible !important; + } + + /* Blend single tab into whole bar */ + @supports -moz-bool-pref("gnomeTheme.hideSingleTab") { + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]), + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) ~ toolbarbutton, + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) ~ #tabbrowser-arrowscrollbox-periphery { + visibility: visible; + } + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) { + -moz-window-dragging: drag; + } + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) .tab-background { + display: none !important + } + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) .tab-close-button { + visibility: hidden !important; + opacity: 0 !important; + } + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: unset !important; + } + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]) .tab-labelk-container[textoverflow="true"] { + margin-right: -16px; + } + /* Override normal width tabs */ + @supports -moz-bool-pref("gnomeTheme.normalWidthTabs") { + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:not([pinned]):not([style^="max-width"]), + #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"][style^="max-width: 100px !important;"]:not([pinned]) { + max-width: 100% !important; + --tab-min-width: 131px !important; + } + } + } }