Window buttons mod for macOS and Linux
-
This is a mod for macOS and Linux, changing/styling the shape of the window buttons. Linux version by @clementlyara can be found here β https://forum.vivaldi.net/topic/33606/window-buttons-mod-for-macos-windows/24. In the past we had a Windows version too, but it seems like the author deleted all their posts.
Background: I recently tested the desktop email client Mailspring, which is an Electron app available for all operating systems. One of its themes features this kind of window buttons and I wanted to bring the look to Vivaldi, because I think it's interesting. Initially I tried just to copy the CSS, but this turned out badly, so I had to recreate it on my own, which was kinda painful . But turns out it was all worth it
type no hover hover blue graphite no tabs fullscreen This is a pure CSS mod. Code:
/* window buttons */ #browser.mac .window-buttongroup button svg { display: none; } #browser.mac #titlebar { height: 100%; } #browser.mac .window-buttongroup { -webkit-app-region: no-drag; height: 100%; margin: 0; padding: 14px 8px 0; } #browser.mac #titlebar.tabless .window-buttongroup { margin-top: 0px; padding-top: 5px; } .stacks-off.fullscreen#browser.mac .window-buttongroup, .tabs-at-edge#browser.mac .window-buttongroup { margin-top: 0px; padding-top: 9px; } #browser.mac .window-buttongroup button { margin-top: 3px; height: 6px; width: 12px; opacity: 0.2; background-color: var(--colorFg); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 2px; transition-duration: 150ms; transition-property: margin, height, border-radius; } #browser.mac .window-buttongroup:hover button { margin-top: 0px; height: 12px; border-radius: 50%; } :not(.fullscreen).hasfocus#browser.mac .window-buttongroup.graphite button.window-minimize, .hasfocus#browser.mac .window-buttongroup.graphite button.window-maximize, .hasfocus#browser.mac .window-buttongroup.graphite button.window-close { opacity: 1; background-color: #8e8e93; border-color: #727277; } :not(.fullscreen).hasfocus#browser.mac .window-buttongroup:not(.graphite) button.window-minimize { opacity: 1; background-color: #f7bb3f; border-color: #dc9e34; } .hasfocus#browser.mac .window-buttongroup:not(.graphite) button.window-maximize { opacity: 1; background-color: #34c749; border-color: #1fa42d; } .hasfocus#browser.mac .window-buttongroup:not(.graphite) button.window-close { opacity: 1; background-color: #f8625e; border-color: #de4947; }
-
@luetage Just for information, it doesn't work if native window is enabled (at least on Sierra).
-
@hlehyaric I didn't think about this possibility, so thanks for pointing it out. But it's logical: the native window uses its own header, which isn't influenced by Vivaldi's stylesheets. Therefore I believe there is no way to change the window buttons on native windows. Are you using native windows?
-
@luetage Yes, that's why I noticed the mod didn't work. It seemed weird, I thought about native window, disabled it and now the mod works.
-
Ok, I should by a Mac now
-
@Ornorm Yes, you should. Just think about it as an investment
(BTW, I'm pretty sure there are mods for window buttons on Windows) -
@Ornorm No need to buy a mac, just build a hackintosh . There's a slim chance you can install macOS on your current hardware with minor adjustments.
Personally I think macs are overprized and give too few options for customization. But macOS is imo the best desktop operating system, therefore it makes sense looking at alternatives to get it running.
-
Small update, forgot to un-colour the buttons when the window has no focus.
-
@Ornorm said in Window buttons mod for macOS:
Ok, I should by a Mac now
I think it could be used on Win, too, but we'd need few changes.
@luetage graphite is something system, or you were just bored?
Edit: is this wanted (focus on another window, hovering the blue one)
Edit: removed image, please ignore the edit above -
@potmeklecbohdan Yeah, it's macOS specific. You can set the theming of window buttons to blue or graphite, blue is colored and graphite is monochrome. As you can see Vivaldi checks for it and adds a class.
-
@raed Oh, you are fasterβ¦
-
@raed Please provide some pictures, I can't test it. And wouldn't it make more sense to code the button shapes directly with css, instead of using background images?
Maybe I'm gonna switch it up too, currently I only code the rectangular buttons and use the default svgs for hover, because there is no other way to show the button glyphs for graphite. The advantage would be that the change from no hover / hover could be animated with transitions then, which would look a bit smoother.
-
@raed Lol
Depends on what you are better with, for me the coding would be faster. Looks good, the only thing I notice is that you change each button individually when hovered, while the original Mailspring version and my own version change all button backgrounds at the same time, when the element.window-buttongroup
is hovered. You should try it out, I believe it looks better. The only thing you need to change is setting the:hover
directly behind.window-buttongroup
instead ofbutton
. -
#browser.win .window-buttongroup button.window-close:hover
to
#browser.win .window-buttongroup:hover button.window-close
The same with all below (minimize, restore, maximize).
Btw. it's strange
.window-buttongroup
is hovered only when hovering any of the buttons (not the area between them) even ifz-index
is changed to 1000. -
@potmeklecbohdan That's not the case for the macOS version, there might be something else going on. Maybe it's fixable with css.
-
Another update. I got rid of the svgs entirely, coded the round buttons and added transitions. Looks much smoother now and displays correctly in all configurations (hopefully). OP has been edited accordingly.
-
I made another update too, expanding the titlebar and the window buttongroup to full height. The hover triggers earlier and more consistent - it behaves just like on Mailspring now, down to the millisecond. Additionally I forgot to disable the coloring of the minimize button in fullscreen mode on graphite. What I noticed is that proper Vivaldi just makes the background of the minimize button transparent in fullscreen, which always bugged me. There is a slight outline, but it looks like there's a gaping hole between the buttons. In the mod it shows the
isblurred
color now (same as window not in focus), which looks better in my opinion. Anyway, OP has been edited. I'm pretty happy with it now. If someone should notice any inconsistency or problem, please let me know. -
Recently I'm trying to get rid of all fixed colors in Vivaldi. The macOS window buttons have a fixed color, therefore I made a new version of this mod which uses the foreground and accent foreground colors for all window buttons instead. That's the same color as the new tab / trash button and makes the tab bar look more consistent and it has the advantage that the buttons are always visible, even on very colorful themes and all accents from currently active tabs.
/* window buttons */ #browser.mac .window-buttongroup button svg { display: none; } #browser.mac #titlebar { height: 100%; } #browser.mac .window-buttongroup { -webkit-app-region: no-drag; height: 100%; margin: 0; padding: 14px 8px 0; } #browser.mac #titlebar.tabless .window-buttongroup { margin-top: 0px; padding-top: 5px; } .stacks-off.fullscreen#browser.mac .window-buttongroup, .tabs-at-edge#browser.mac .window-buttongroup { margin-top: 0px; padding-top: 9px; } #browser.mac .window-buttongroup button { margin-top: 3px; height: 6px; width: 12px; opacity: 0.2; background-color: var(--colorFg); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 2px; transition-duration: 150ms; transition-property: margin, height, border-radius; } .color-behind-tabs-on#browser.mac .window-buttongroup button { background-color: var(--colorAccentFg); } #browser.mac .window-buttongroup:hover button { margin-top: 0px; height: 12px; border-radius: 50%; } #browser:not(.fullscreen).hasfocus#browser.mac .window-buttongroup button.window-minimize, .hasfocus#browser.mac .window-buttongroup button.window-maximize, .hasfocus#browser.mac .window-buttongroup button.window-close { background-color: var(--colorFgFaded); border-color: var(--colorFgFadedMore); opacity: 1; } #browser:not(.fullscreen).color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-minimize, .color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-maximize, .color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-close { background-color: var(--colorAccentFgFaded); border-color: var(--colorAccentFgAlpha); }
-
I disabled dragging for the
.window-buttongroup
div to reenable the hover. In recent versions of Vivaldi the hover is only being triggered when you are directly over a button and that's not how it's supposed to work. Disabling the dragging fixes it. -
@raed Can you drag the window when clicking on an empty space in the panel container?