diff --git a/src/other/firefox/Monterey/colors/dark.css b/src/other/firefox/Monterey/colors/dark.css index 292a3d3..a4712d4 100644 --- a/src/other/firefox/Monterey/colors/dark.css +++ b/src/other/firefox/Monterey/colors/dark.css @@ -108,8 +108,9 @@ --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: #15539e; - --gnome-inactive-tabbar-tab-active-color: rgb(141, 144, 145); + --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-tab-attention-icon-color: #718be8; /* Switch */ --gnome-switch-background: #282828; diff --git a/src/other/firefox/Monterey/colors/light.css b/src/other/firefox/Monterey/colors/light.css index c33fd8c..838cd0c 100644 --- a/src/other/firefox/Monterey/colors/light.css +++ b/src/other/firefox/Monterey/colors/light.css @@ -109,6 +109,7 @@ --gnome-inactive-tabbar-tab-active-background: #eeeeee; --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-tab-attention-icon-color: #718be8; /* Switch */ --gnome-switch-background: #e1dedb; diff --git a/src/other/firefox/Monterey/parts/tabsbar-alt.css b/src/other/firefox/Monterey/parts/tabsbar-alt.css index 32c5e39..199b215 100644 --- a/src/other/firefox/Monterey/parts/tabsbar-alt.css +++ b/src/other/firefox/Monterey/parts/tabsbar-alt.css @@ -273,6 +273,14 @@ tab[selected]:-moz-window-inactive .tab-label { border-image: none !important; } +/* Tab attention dot */ +.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] { + background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important; + background-position: center bottom 3px !important; + background-size: 4px 4px; + background-repeat: no-repeat; +} + /* Full width tabs */ .tabbrowser-tab:not([style^="max-width"]):not([pinned]), .tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { diff --git a/src/other/firefox/Monterey/parts/tabsbar.css b/src/other/firefox/Monterey/parts/tabsbar.css index 9ce448d..10cc359 100644 --- a/src/other/firefox/Monterey/parts/tabsbar.css +++ b/src/other/firefox/Monterey/parts/tabsbar.css @@ -164,6 +164,14 @@ tab[selected]:-moz-window-inactive .tab-label { display: none; } +/* Tab attention dot */ +.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] { + background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important; + background-position: center bottom 3px !important; + background-size: 4px 4px; + background-repeat: no-repeat; +} + .tabbrowser-tab[class*="identity-color-"][pinned] { display: flex; } diff --git a/src/other/firefox/WhiteSur/colors/dark.css b/src/other/firefox/WhiteSur/colors/dark.css index d8810f5..ad92153 100644 --- a/src/other/firefox/WhiteSur/colors/dark.css +++ b/src/other/firefox/WhiteSur/colors/dark.css @@ -107,8 +107,9 @@ --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); + --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-tab-attention-icon-color: #718be8; /* Switch */ --gnome-switch-background: #282828; diff --git a/src/other/firefox/WhiteSur/colors/light.css b/src/other/firefox/WhiteSur/colors/light.css index e86d262..fdcc61f 100644 --- a/src/other/firefox/WhiteSur/colors/light.css +++ b/src/other/firefox/WhiteSur/colors/light.css @@ -107,6 +107,7 @@ --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); + --gnome-tab-attention-icon-color: #718be8; /* Switch */ --gnome-switch-background: #e1dedb; diff --git a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css index ccc7c2d..20dd96f 100644 --- a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css +++ b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css @@ -177,10 +177,14 @@ toolbarspring { width: 28px !important; height: 26px !important; margin: 3px 0 !important; - padding: 4px 6px !important; + padding: 6px !important; border-radius: 5px !important; } +#star-button-box.urlbar-page-action { + padding: 5px 6px !important; +} + #identity-box:hover { background: var(--gnome-headerbar-button-hover-background) !important; } diff --git a/src/other/firefox/WhiteSur/parts/tabsbar.css b/src/other/firefox/WhiteSur/parts/tabsbar.css index 43a05d3..00d32b2 100644 --- a/src/other/firefox/WhiteSur/parts/tabsbar.css +++ b/src/other/firefox/WhiteSur/parts/tabsbar.css @@ -318,6 +318,14 @@ tab[selected]:-moz-window-inactive { display: none; } +/* Tab attention dot */ +.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] { + background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important; + background-position: center bottom 3px !important; + background-size: 4px 4px; + background-repeat: no-repeat; +} + /* Remove alt colours references for multi tabs*/ .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { display: none; diff --git a/src/other/firefox/common/icons/picture-in-picture-open.svg b/src/other/firefox/common/icons/picture-in-picture-open.svg new file mode 100644 index 0000000..c09330c --- /dev/null +++ b/src/other/firefox/common/icons/picture-in-picture-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/other/firefox/common/parts/buttons.css b/src/other/firefox/common/parts/buttons.css index 7c5f987..ab4bddb 100644 --- a/src/other/firefox/common/parts/buttons.css +++ b/src/other/firefox/common/parts/buttons.css @@ -326,18 +326,19 @@ button.popup-notification-primary-button, } #appMenu-popup .panel-banner-item[notificationid="update-restart"]:hover, -button.popup-notification-primary-button.popup-notification-button:hover, +button.popup-notification-primary-button:hover, #editBookmarkPanelDoneButton:hover { background: var(--gnome-button-suggested-action-hover-background) !important; } #appMenu-popup .panel-banner-item[notificationid="update-restart"]:active, -button.popup-notification-primary-button.popup-notification-button:active, +button.popup-notification-primary-button:active, #editBookmarkPanelDoneButton:active { background: var(--gnome-button-suggested-action-active-background) !important; border-color: var(--gnome-button-suggested-action-active-border-color) !important; box-shadow: var(--gnome-button-suggested-action-active-box-shadow) !important; text-shadow: none !important; + transition: none !important; } /* Buttons with destructive action */ diff --git a/src/other/firefox/common/parts/csd.css b/src/other/firefox/common/parts/csd.css index eb4bc58..9dd4893 100644 --- a/src/other/firefox/common/parts/csd.css +++ b/src/other/firefox/common/parts/csd.css @@ -34,7 +34,7 @@ /* Fullscreen headerbar padding for 1 button */ :root[tabsintitlebar][inFullscreen] #nav-bar { - padding-right: 40px !important; + padding-right: 50px !important; } /* Window buttons box */ @@ -63,6 +63,13 @@ padding: 2px 0 !important; width: 16px; } +:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-button, +:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { + height: 24px !important; + width: 24px !important; + margin: 12px 4px !important; + padding: 0 !important; +} :root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon, :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { opacity: 0 !important; @@ -75,7 +82,6 @@ /* 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 .titlebar-close, :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min { display: none !important; @@ -94,6 +100,11 @@ right: auto; } + /* Fullscreen headerbar padding for 1 button */ + :root[tabsintitlebar][inFullscreen] #nav-bar { + padding-left: 50px !important; + } + /* Window controls: at least 1 button */ @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { diff --git a/src/other/firefox/common/parts/icons.css b/src/other/firefox/common/parts/icons.css index 80209a4..d35b82b 100644 --- a/src/other/firefox/common/parts/icons.css +++ b/src/other/firefox/common/parts/icons.css @@ -432,6 +432,10 @@ menu[disabled] > .menu-right { 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; } @@ -704,6 +708,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/common/parts/popups-contents.css b/src/other/firefox/common/parts/popups-contents.css index 4eec137..03bead3 100644 --- a/src/other/firefox/common/parts/popups-contents.css +++ b/src/other/firefox/common/parts/popups-contents.css @@ -154,6 +154,14 @@ background: var(--gnome-button-suggested-action-background) !important; border-color: var(--gnome-button-suggested-action-border-color) !important; } +#confirmation-hint .panel-arrowcontent:hover { + background: var(--gnome-button-suggested-action-hover-background) !important; + border-color: var(--gnome-button-suggested-action-border-color) !important; +} +#confirmation-hint .panel-arrowcontent:active { + background: var(--gnome-button-suggested-action-active-background) !important; + border-color: var(--gnome-button-suggested-action-active-border-color) !important; +} #confirmation-hint .panel-arrow { fill: var(--gnome-button-suggested-action-border-color) !important; stroke: var(--gnome-button-suggested-action-border-color) !important;