Vivaldi with Adwaita-like + Mint-Y-Aqua-like window control buttons (CSS)
-
UPDATE: See https://forum.vivaldi.net/post/826821
Hi!
I don't know if something like this was shared before, but I want to share with you guys my CSS modification for Vivaldi so that it has window control buttons like the ones in Adwaita-themed apps.
I used this website to create the SVG paths: https://yqnn.github.io/svg-path-editor/. I just compared the path that I was creating with another Adwaita themed app to see if I was getting the icons right, so they might not be a 100% the same as the ones GNOME uses but I think they do the trick ok.
I adjusted some other things because, I don't know, maybe the scale my screen is using made some things look a little bit off set (not sure, though), so I added some padding and modified some other things. So if it this doesn't work for you, feel free to modify it to your liking.
/* Readjusting the position of the buttons. */ .window-buttongroup { padding-top: 0.3em; padding-right: 0.5em; gap: 0.7em; } /* Add some padding to the thrash and sync buttons. */ .toolbar.toolbar-tabbar.sync-and-trash-container.top { padding-right: 2.4em; !important } /* Set fixed border-radius and height adjust so that it equals width. */ #browser .window-buttongroup button { width: 25px; height: 25px; /* Added. */ border: 0; background-color: transparent; margin-right: 0; border-radius: 50%; /* Added. */ } /* Move the minimize button icon a little bit downwards. */ #titlebar > div > button.window-minimize > svg { margin-top: 0.6em; margin-left: 0.2em; } /* SVG Path for Close Button */ #titlebar > div > button.window-close > svg > path { d: path("M11 1l-2-2L5 3 1-1l-2 2L3 5-1 9l2 2L5 7l4 4 2-2L7 5 11 1") } #titlebar > div > button.window-close > svg { width: 8px; height: 8px; } /* SVG Path for Already Maximized Button (There are 2 in Vivaldi. Here just 1 is modified, the other is left blank.)*/ #titlebar > div > button.window-maximize > svg > g.window-restore-glyph > path:nth-child(2) { d: path("M2 3 2 9 8 9 8 3 2 3M4 5 4 7 6 7 6 5 4 5Z") } #titlebar > div > button.window-maximize > svg > g.window-restore-glyph > path:nth-child(1) { d: path("") } /* SVG Path for Minimize Button */ #titlebar > div > button.window-minimize > svg > path { d: path("M0 6H8V8H0V6Z") } /* New SVG Path for Maximize */ #titlebar > div > button.window-maximize > svg > g.window-maximize-glyph > path { d: path("M1 1 1 9 9 9 9 1 1 1M3 4 3 7 7 7 7 3 3 3Z") }Some screenshots:
Window control buttons compared with GNOME Software:
Maximized (square button in the middle changes its size a bit):
-
@Maschinami It’s a good effort and worthwhile. Doesn’t look native right now. For comparison:
- The icons seem to be too big and too thin
- The minimize buttons resembles an underline, your’s is more like a dash. Matter of alignment
- The background should be visible when not hovering, and should light up even more when hovering
I would guess the Gnome icons are SVG too? Haven’t checked, might be worthwhile getting them from the source directly.
-
@luetage Hi!
Yep. As I said, I made this just by looking at the window control buttons of Adwaita-themed apps and then trying to recreate the SVG. So yep. The SVG paths that I made are probably not a 100% accurate. Here's a new version with some increased visibility when hovering. You can change the value by modifying the rgba value at the end (in this case I just set them to 0.1 and 0.2 when hovering).
/* Readjusting the position of the buttons. */ .window-buttongroup { padding-top: 0.3em; padding-right: 0.5em; gap: 0.7em; } /* Add some padding to the thrash and sync buttons. */ .toolbar.toolbar-tabbar.sync-and-trash-container.top { padding-right: 2.4em !important; } /* Set fixed border-radius and height adjust so that it equals width. */ #browser .window-buttongroup button { width: 25px; height: 25px; /* Added. */ border: 0; margin-right: 0; border-radius: 50%; /* Added. */ } /* Move the minimize button icon a little bit downwards. */ #titlebar > div > button.window-minimize > svg { margin-top: 0.6em; margin-left: 0.2em; } /* SVG Path for Close Button */ #titlebar > div > button.window-close > svg > path { d: path("M11 1l-2-2L5 3 1-1l-2 2L3 5-1 9l2 2L5 7l4 4 2-2L7 5 11 1") } #titlebar > div > button.window-close > svg { width: 8px; height: 8px; } /* SVG Path for Already Maximized Button (There are 2 in Vivaldi. Here just 1 is modified, the other is left blank.)*/ #titlebar > div > button.window-maximize > svg > g.window-restore-glyph > path:nth-child(2) { d: path("M2 3 2 9 8 9 8 3 2 3M4 5 4 7 6 7 6 5 4 5Z") } #titlebar > div > button.window-maximize > svg > g.window-restore-glyph > path:nth-child(1) { d: path("") } /* SVG Path for Minimize Button */ #titlebar > div > button.window-minimize > svg > path { d: path("M0 6H8V8H0V6Z") } /* New SVG Path for Maximize */ #titlebar > div > button.window-maximize > svg > g.window-maximize-glyph > path { d: path("M1 1 1 9 9 9 9 1 1 1M3 4 3 7 7 7 7 3 3 3Z") } #browser.linux .window-buttongroup button { background-color: rgba(0, 0, 0, 0.1); } #browser.linux .window-buttongroup button:hover { background-color: rgba(0, 0, 0, 0.2); } #titlebar > div > button.window-maximize > svg { margin-top: 0.2rem; }Another GIF.
-
OK. The previous update was just a quick workaround while I worked on a better version for Adwaita. And it was Saturday, so why not? Heh, heh. Since I'm not an expert with CSS, it usually takes me some time to move stuff around. Well, I changed distro recently to Linux Mint. Since I kinda gained some experience modifying this control buttons while using GNOME Shell (at least knowing where the elements are), I wanted to do something similar but for the theme that Linux Mint uses in Cinnamon. So I did some research on where to find the icons because I was lazy enough to put time trying to recreate the SVG paths myself again this time. It turns out that, at least in Linux Mint, the SVG icons for the window control buttons can be found in
/usr/share/icons/Mint-Y/actions/symbolicand the ones for Adwaita in/usr/share/icons/Adwaita/scalable/ui. Then it was easy to get the SVG paths. So I created a new CSS for Mint-Y-Aqua (although the color can be easily changed) and updated the one I made for Adwaita.UPDATED CSS (Adwaita):
/* Readjusting the position of the buttons */ .window-buttongroup { margin-top: 0.3rem; margin-right: 0.35rem; gap: 0.9rem; } /* Add some padding to the thrash and sync buttons */ .toolbar.toolbar-tabbar.sync-and-trash-container.top { padding-right: 2rem !important; } /* Move the minimize button icon a little bit downwards */ #titlebar > div > button.window-minimize > svg { margin-top: 0.6rem; margin-left: 0.2rem; } /* Button's background circle */ #browser .window-buttongroup button { height: 22px; width: 22px; border-radius: 50%; } /* The window control buttons for Adwaita were found: /usr/share/icons/Adwaita/scalable/ui */ /* Minimize Button */ #titlebar > div > button.window-minimize > svg { overflow: visible } #titlebar > div > button.window-minimize > svg > path { d: path("m 4 10.007812 h 8 v 1.988282 h -8 z m 0 0"); transform: translate(-6.5px, -7px); } /* Restore Button */ #titlebar > div > button.window-maximize > svg { overflow: visible } #titlebar > div > button.window-maximize > svg > g.window-restore-glyph > path:nth-child(2) { d: path("m 4.988281 4.992188 v 6.011718 h 6.011719 v -6.011718 z m 2 2 h 2.011719 v 2.011718 h -2.011719 z m 0 0"); transform: translate(-3px, -2px); } #titlebar > div > button.window-maximize > svg > g.window-restore-glyph > path:nth-child(1) { d: path("") } /* Maximize Button */ #titlebar > div > button.window-maximize > svg { overflow: visible; } #titlebar > div > button.window-maximize > svg > g.window-maximize-glyph > path { d: path("m 3.988281 3.992188 v 8.011718 h 8.011719 v -8.011718 z m 2 2 h 4.011719 v 4.011718 h -4.011719 z m 0 0"); transform: translate(-3px, -2px); } /* Close Button */ #titlebar > div > button.window-close > svg { overflow: visible } #titlebar > div > button.window-close > svg > path { d: path("m 4 4 h 1 h 0.03125 c 0.253906 0.011719 0.511719 0.128906 0.6875 0.3125 l 2.28125 2.28125 l 2.3125 -2.28125 c 0.265625 -0.230469 0.445312 -0.304688 0.6875 -0.3125 h 1 v 1 c 0 0.285156 -0.035156 0.550781 -0.25 0.75 l -2.28125 2.28125 l 2.25 2.25 c 0.1875 0.1875 0.28125 0.453125 0.28125 0.71875 v 1 h -1 c -0.265625 0 -0.53125 -0.09375 -0.71875 -0.28125 l -2.28125 -2.28125 l -2.28125 2.28125 c -0.1875 0.1875 -0.453125 0.28125 -0.71875 0.28125 h -1 v -1 c 0 -0.265625 0.09375 -0.53125 0.28125 -0.71875 l 2.28125 -2.25 l -2.28125 -2.28125 c -0.210938 -0.195312 -0.304688 -0.46875 -0.28125 -0.75 z m 0 0"); transform: translate(-3px, -2px); } /* Change background color of buttons (circle) */ #browser.linux .window-buttongroup button { background-color: rgba(0, 0, 0, 0.1); } #browser.linux .window-buttongroup button:hover { background-color: rgba(0, 0, 0, 0.2); }Not maximized window:
Maximized window:
CSS FOR MINT-Y-AQUA:
/* Readjusting the position of the default buttons */ #browser .window-buttongroup { margin-top: 0.4rem; margin-right: 0.25rem; gap: 0.45rem; } /* Button's background circle */ #browser .window-buttongroup button { height: 18px; width: 18px; border-radius: 50%; } /* The window control buttons for Mint-Y were found: /usr/share/icons/Mint-Y/actions/symbolic /usr/share/icons/Adwaita/scalable/ui (Close Button) */ /* Minimize Button */ #titlebar > div > button.window-minimize > svg { overflow: visible; } #titlebar > div > button.window-minimize > svg > path { d: path("M4 10v1h8v-1z"); transform: translate(-5px, -3px); } #titlebar > div > button.window-minimize { background-color: transparent !important; } #titlebar > div > button.window-minimize:hover { background-color: rgba(0, 0, 0, 0.1) !important; } /* Restore Button */ #titlebar > div > button.window-maximize > svg > g.window-restore-glyph > path:nth-child(2) { d: path("m 3,5 v 8 h 8 V 5 Z m 1,1 h 6 v 6 H 4 Z"); transform: translate(-5px, -3px); } #titlebar > div > button.window-maximize > svg > g.window-restore-glyph > path:nth-child(1) { d: path("m 5,3 v 1 h 7 v 7 h 1 V 3 Z"); opacity: 0.5; transform: translate(-5px, -3px); } /* Maximize Button */ #titlebar > div > button.window-maximize > svg { overflow: visible } #titlebar > div > button.window-maximize > svg > g.window-maximize-glyph > path { d: path("M4 4v8h8V4zm1 1h6v6H5z"); transform: translate(-5px, -3px); } #titlebar > div > button.window-maximize { background-color: transparent !important; } #titlebar > div > button.window-maximize:hover { background-color: rgba(0, 0, 0, 0.1) !important; } /* Close Button */ #titlebar > div > button.window-close > svg { overflow: visible } #titlebar > div > button.window-close > svg > path { d: path("m 4 4 h 1 h 0.03125 c 0.253906 0.011719 0.511719 0.128906 0.6875 0.3125 l 2.28125 2.28125 l 2.3125 -2.28125 c 0.265625 -0.230469 0.445312 -0.304688 0.6875 -0.3125 h 1 v 1 c 0 0.285156 -0.035156 0.550781 -0.25 0.75 l -2.28125 2.28125 l 2.25 2.25 c 0.1875 0.1875 0.28125 0.453125 0.28125 0.71875 v 1 h -1 c -0.265625 0 -0.53125 -0.09375 -0.71875 -0.28125 l -2.28125 -2.28125 l -2.28125 2.28125 c -0.1875 0.1875 -0.453125 0.28125 -0.71875 0.28125 h -1 v -1 c 0 -0.265625 0.09375 -0.53125 0.28125 -0.71875 l 2.28125 -2.25 l -2.28125 -2.28125 c -0.210938 -0.195312 -0.304688 -0.46875 -0.28125 -0.75 z m 0 0"); transform: translate(-5px, -3px); color: white; } #titlebar > div > button.window-close { background-color: #0099dd !important; } #titlebar > div > button.window-close:hover { background-color: #00a4e2 !important; }Not maximized window:
Maximized window:
Calculator for comparison (take a look at window control buttons):
You are of course free to modify them to your liking and share your versions (maybe even for other desktop themes)!
-
@Maschinami This is amazing! The buttons look great on my end on Gnome 48.
