How Do I Make the Min/Max/Restore/Close Buttons Match my System UI
-
How can I get the tabs in the title bar, similar to brave or chrome.
Right now it looks like this
I want to keep "Use native UI" enabled, because Vivaldi min/max/close buttons do not match the rest of my system UI.
In Brave, the tabs are in the title bar like this:
-
Settings, Appearance, and disable "Use Native Window"
Then do Settings, Tabs, Tab Display, and enable "Remove Tab Spacing in Maximized Windows."
-
@pesala As I said in my post, I want to keep Native UI Enabled, because Vivaldi does not match the rest of my system UI.
-
@jenoki I suggest renaming your thread to something like:
How Do I Make the Min/Max/Restore/Close Buttons Match my System UI
I moved your thread to the modding forum where you might find someone who can help with this.
-
aha, so you would like the window controls to be dots?
I'm getting a little thrown off about what your OS is... Windows 10 with some stuff injected into the DLL?
A mod could be made to do this.
-
@lonm I wonder, could be an option to just exchange the buttons in non-native window. There are already mods out there that do just that if I remember correctly.
-
@luetage Maybe... I haven't come across those before.
-
@jenoki If you're happy to mod the browser, you could try the following:
.window-minimize svg path { d: path("M 9.7217725,0.46551385 C 9.7217757,3.1193029 7.5704552,5.2706255 4.9166661,5.2706248 2.2628775,5.2706249 0.1115576,3.1193025 0.1115608,0.46551385 c 5.81e-5,-2.65374525 2.15136,-4.80500005 4.8051053,-4.80500005 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.80500005 z"); } .window-minimize svg { height: 10px; } .window-maximize svg path, .window-close svg path { d: path("M 9.8194288,4.9088733 C 9.819432,7.5626623 7.6681115,9.7139849 5.0143224,9.7139842 2.3605338,9.7139843 0.20921385,7.5626619 0.20921705,4.9088733 0.20927515,2.255128 2.3605771,0.1038732 5.0143224,0.1038732 c 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.8050001 z"); } .window-maximize svg path, .window-minimize svg path { fill:#2b2b2b; } .window-close svg path { fill: #f25e5e; } button.window-maximize, button.window-minimize, button.window-close { width: 36px !important; padding: 0px !important; } button.window-maximize:hover, button.window-minimize:hover, button.window-close:hover { background: transparent; } .win10 #tabs-container.top { padding-right: 110px; }
-
@lonm https://github.com/Tiamarth/Arc-for-Vivaldi/blob/master/arc.css
In this mod the window buttons are replaced. -
@luetage Ah, it takes an approach to manually replace the icons. Similar to what I thought about doing.
-
@LonM's code looks like what you want but if you are not on Windows 10, you will have to add this to remove the red background Vivaldi adds to the close button to replicate the look of Win 7 and 8,
#browser.win .window-buttongroup button.window-close, #browser.win:not(.win10) .window-buttongroup .window-close {background-color: transparent !important}
-
@lonm Thank you for your effort! It looks almost great. However, the way the mouse interacts with it is also different.
System UI
Vivaldi Custom CSS
Also, there is a strange orange pixel just above the close button. It looks as if Vivaldi is not covering my system UI completly, and some random orange pixel is peaking behind it
-
@jenoki Hi. I added in what @sjudenim suggested above, as well as some animation support if you have animations turned on already in vivaldi settings:
.window-minimize svg path { d: path("M 9.7217725,0.46551385 C 9.7217757,3.1193029 7.5704552,5.2706255 4.9166661,5.2706248 2.2628775,5.2706249 0.1115576,3.1193025 0.1115608,0.46551385 c 5.81e-5,-2.65374525 2.15136,-4.80500005 4.8051053,-4.80500005 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.80500005 z"); } .window-minimize svg { height: 10px; } .window-maximize svg path, .window-close svg path { d: path("M 9.8194288,4.9088733 C 9.819432,7.5626623 7.6681115,9.7139849 5.0143224,9.7139842 2.3605338,9.7139843 0.20921385,7.5626619 0.20921705,4.9088733 0.20927515,2.255128 2.3605771,0.1038732 5.0143224,0.1038732 c 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.8050001 z"); } .window-maximize svg path, .window-minimize svg path, .window-close svg path { fill:#2b2b2b; transition: fill 0.2s ease ; } #browser:hover .window-close svg path { fill: #f25e5e; } button.window-maximize, button.window-minimize, button.window-close { width: 36px !important; padding: 0px !important; } button.window-maximize:hover, button.window-minimize:hover, button.window-close:hover { background: transparent !important; } button.window-maximize:hover svg path, button.window-minimize:hover svg path, button.window-close:hover svg path { fill: #f25e5e; } .win10 #tabs-container.top { padding-right: 110px; }
Unfortunately, I can't help you with the random orange pixel, I've no idea where that's coming from. I don't see it on my browser, so without having access to your system I'm not sure how to solve it.
-
@lonm Thank you very much! This looks great!!
I guess I can live with the little pixel. I wonder why is it chrome and brave can use the Native UI and have tabs in the title bar, but vivaldi has to have it custom drawn?
Anyway, thanks again for taking the time to do this
-
@jenoki I suspect its to do with the fact that the other browsers use a native UI, whereas vivaldi draws everything in a custom manner (as a webpage).
-
@lonm Hi, How are you?
how i can mod vivaldi?
i try to this but vivaldi don't take the css file. -
@sadeghpetros I would suggest following the instructions at the top of this thread: https://forum.vivaldi.net/topic/10549/modding-vivaldi
-
@jenoki I struggled with many little pixels over the years... Advice I can give you is: change the theme, see if this little pixel changes color. If it does, than it's something "behind" the button, and inspecting it can be tricky. One option is hide the button temporalily with {display:none;} in the css, see if the pixel is still there and then try to inspect it and find out what it is.
This "leaking"ui things can be tricky to solve.