Improved styling for tabs and actionbars in Gtk4

ZorinOS · Dec 10, 2023 · d3243e4 · d3243e4
1 parent e005417
commit d3243e4
Show file tree

Hide file tree

Showing 25 changed files with 150 additions and 48 deletions.
diff --git a/ZorinBlue-Dark/gtk-4.0/gtk-dark.css b/ZorinBlue-Dark/gtk-4.0/gtk-dark.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #1e2529; }
 
 searchbar > revealer > box:backdrop { background-color: #1a2022; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1376,6 +1378,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #2a3439; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #283033; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(189, 230, 251, 0.5) 85%, rgba(189, 230, 251, 0)), radial-gradient(farthest-side at top, rgba(189, 230, 251, 0.1), rgba(189, 230, 251, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2169,7 +2173,7 @@ tabbar:not(.inline) .box { background-color: #171d20; color: #bde6fb; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #14191a; color: #6f828a; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: #323e44; background-image: none; color: #bde6fb; box-shadow: 0 2px 8px rgba(23, 29, 32, 0.45); outline: 1px solid rgba(189, 230, 251, 0.1); margin: 25px; }
 

diff --git a/ZorinBlue-Dark/gtk-4.0/gtk.css b/ZorinBlue-Dark/gtk-4.0/gtk.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #1e2529; }
 
 searchbar > revealer > box:backdrop { background-color: #1a2022; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1376,6 +1378,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #2a3439; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #283033; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(189, 230, 251, 0.5) 85%, rgba(189, 230, 251, 0)), radial-gradient(farthest-side at top, rgba(189, 230, 251, 0.1), rgba(189, 230, 251, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2169,7 +2173,7 @@ tabbar:not(.inline) .box { background-color: #171d20; color: #bde6fb; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #14191a; color: #6f828a; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: #323e44; background-image: none; color: #bde6fb; box-shadow: 0 2px 8px rgba(23, 29, 32, 0.45); outline: 1px solid rgba(189, 230, 251, 0.1); margin: 25px; }
 

diff --git a/ZorinBlue-Light/gtk-4.0/gtk-dark.css b/ZorinBlue-Light/gtk-4.0/gtk-dark.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #1e2529; }
 
 searchbar > revealer > box:backdrop { background-color: #1a2022; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1376,6 +1378,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #2a3439; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #283033; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(189, 230, 251, 0.5) 85%, rgba(189, 230, 251, 0)), radial-gradient(farthest-side at top, rgba(189, 230, 251, 0.1), rgba(189, 230, 251, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2169,7 +2173,7 @@ tabbar:not(.inline) .box { background-color: #171d20; color: #bde6fb; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #14191a; color: #6f828a; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: #323e44; background-image: none; color: #bde6fb; box-shadow: 0 2px 8px rgba(23, 29, 32, 0.45); outline: 1px solid rgba(189, 230, 251, 0.1); margin: 25px; }
 

diff --git a/ZorinBlue-Light/gtk-4.0/gtk.css b/ZorinBlue-Light/gtk-4.0/gtk.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #f5f7fa; }
 
 searchbar > revealer > box:backdrop { background-color: #f8f8f8; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1378,6 +1380,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #e4e8ee; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #ececec; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(21, 166, 240, 0.5) 85%, rgba(21, 166, 240, 0)), radial-gradient(farthest-side at top, rgba(21, 166, 240, 0.1), rgba(21, 166, 240, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2171,7 +2175,7 @@ tabbar:not(.inline) .box { background-color: #e4e8ee; color: #123354; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #ececec; color: #828282; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: white; background-image: none; color: #123354; box-shadow: 0 2px 8px rgba(18, 51, 84, 0.075); outline: 1px solid rgba(18, 51, 84, 0.05); margin: 25px; }
 

diff --git a/ZorinGreen-Dark/gtk-4.0/gtk-dark.css b/ZorinGreen-Dark/gtk-4.0/gtk-dark.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #1b2421; }
 
 searchbar > revealer > box:backdrop { background-color: #181e1c; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1376,6 +1378,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #27332f; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #252e2b; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(187, 241, 221, 0.5) 85%, rgba(187, 241, 221, 0)), radial-gradient(farthest-side at top, rgba(187, 241, 221, 0.1), rgba(187, 241, 221, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2169,7 +2173,7 @@ tabbar:not(.inline) .box { background-color: #151c19; color: #bbf1dd; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #131716; color: #6e837b; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: #2f3d38; background-image: none; color: #bbf1dd; box-shadow: 0 2px 8px rgba(21, 28, 25, 0.45); outline: 1px solid rgba(187, 241, 221, 0.1); margin: 25px; }
 

diff --git a/ZorinGreen-Dark/gtk-4.0/gtk.css b/ZorinGreen-Dark/gtk-4.0/gtk.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #1b2421; }
 
 searchbar > revealer > box:backdrop { background-color: #181e1c; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1376,6 +1378,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #27332f; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #252e2b; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(187, 241, 221, 0.5) 85%, rgba(187, 241, 221, 0)), radial-gradient(farthest-side at top, rgba(187, 241, 221, 0.1), rgba(187, 241, 221, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2169,7 +2173,7 @@ tabbar:not(.inline) .box { background-color: #151c19; color: #bbf1dd; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #131716; color: #6e837b; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: #2f3d38; background-image: none; color: #bbf1dd; box-shadow: 0 2px 8px rgba(21, 28, 25, 0.45); outline: 1px solid rgba(187, 241, 221, 0.1); margin: 25px; }
 

diff --git a/ZorinGreen-Light/gtk-4.0/gtk-dark.css b/ZorinGreen-Light/gtk-4.0/gtk-dark.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #1b2421; }
 
 searchbar > revealer > box:backdrop { background-color: #181e1c; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1376,6 +1378,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #27332f; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #252e2b; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(187, 241, 221, 0.5) 85%, rgba(187, 241, 221, 0)), radial-gradient(farthest-side at top, rgba(187, 241, 221, 0.1), rgba(187, 241, 221, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2169,7 +2173,7 @@ tabbar:not(.inline) .box { background-color: #151c19; color: #bbf1dd; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #131716; color: #6e837b; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: #2f3d38; background-image: none; color: #bbf1dd; box-shadow: 0 2px 8px rgba(21, 28, 25, 0.45); outline: 1px solid rgba(187, 241, 221, 0.1); margin: 25px; }
 

diff --git a/ZorinGreen-Light/gtk-4.0/gtk.css b/ZorinGreen-Light/gtk-4.0/gtk.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #f6f9f9; }
 
 searchbar > revealer > box:backdrop { background-color: #f8f8f8; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1378,6 +1380,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #e5eceb; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #ececec; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(42, 200, 141, 0.5) 85%, rgba(42, 200, 141, 0)), radial-gradient(farthest-side at top, rgba(42, 200, 141, 0.1), rgba(42, 200, 141, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2171,7 +2175,7 @@ tabbar:not(.inline) .box { background-color: #e5eceb; color: #19483e; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #ececec; color: gray; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: white; background-image: none; color: #19483e; box-shadow: 0 2px 8px rgba(25, 72, 62, 0.075); outline: 1px solid rgba(25, 72, 62, 0.05); margin: 25px; }
 

diff --git a/ZorinGrey-Dark/gtk-4.0/gtk-dark.css b/ZorinGrey-Dark/gtk-4.0/gtk-dark.css
@@ -589,12 +589,14 @@ searchbar > revealer > box popover.menu separator:not(.sidebar), .toolbar popove
 
 .toolbar.vertical > separator { margin: 0 4px; }
 
-searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; }
+searchbar > revealer > box { padding: 6px; border-spacing: 6px; box-shadow: none; border-width: 0 0 1px; }
 
 searchbar > revealer > box { border-style: none; background-color: #202020; }
 
 searchbar > revealer > box:backdrop { background-color: #1b1b1b; }
 
+searchbar > revealer > box:backdrop > * { filter: none; }
+
 /************** GtkInfoBar * */
 infobar > revealer > box { padding: 8px; border-spacing: 12px; }
 
@@ -1376,6 +1378,8 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #313131; box-sh
 
 actionbar > revealer > box:backdrop { border-color: #2d2d2d; }
 
+actionbar > revealer > box:backdrop > * { filter: none; }
+
 actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
 
 scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, rgba(255, 255, 255, 0.5) 85%, rgba(255, 255, 255, 0)), radial-gradient(farthest-side at top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
@@ -2169,7 +2173,7 @@ tabbar:not(.inline) .box { background-color: #191919; color: #ffffff; padding-bo
 
 tabbar:not(.inline):backdrop .box { background-color: #151515; color: #8d8d8d; transition: background-color 150ms ease-out; box-shadow: none; }
 
-tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: opacity(0.5); transition: filter 150ms ease-out; }
+tabbar:not(.inline):backdrop .box > scrolledwindow, tabbar:not(.inline):backdrop .box > .start-action, tabbar:not(.inline):backdrop .box > .end-action { filter: none; }
 
 dnd tab { background-color: #3c3c3c; background-image: none; color: #ffffff; box-shadow: 0 2px 8px rgba(25, 25, 25, 0.45); outline: 1px solid rgba(255, 255, 255, 0.1); margin: 25px; }