Mod: Removing Traffic Lights On Tab Bar

kutay

You should first allow CSS modifications through vivaldi://experiments/. Then you should add a folder in Settings > Appearance > Custom UI Modifications.

You should create a file with .css extension in the folder above and put the following into it:

/* remove traffic lights on tab bar */

.mac #tabs-container:not(.none).top {
  padding-left: 0;
  padding-right: 0;
}

.tabs-top#browser.mac .window-buttongroup {
  display: none;
  visibility: hidden;
}

After restarting your browser, it should look something like this.

Screenshot 2023-06-22 at 21.31.06.png

(This is the English translation of my Turkish post.)

OakdaleFTL

Just an idle question (...I use the native window): What's left to grab onto following your mod?

(The "traffic light" isn't on the tab bar; the tab bar is merged with the title bar...)

kutay

@OakdaleFTL I don't think you can do a similar thing when you're using the native window setting. If I understand correctly, the native window uses MacOS's own bar. So, I don't think you can change it using custom CSS. But you are more than welcome to try to change it as I might be mistaken.

OakdaleFTL

@kutay That's what made my question "idle"... So: How do you move a window that uses your mod?

kutay

@OakdaleFTL So, ummmm. I use yabai and skhd both of which allow me to manage windows and spaces only using shortcuts. They also resize and move windows to cover the maximum amount of space on the screen. Therefore, I just don't move any windows manually, so I can use my mod without any restrictions.

Also, I think you can move your window using the bottom status bar by holding and dragging it. Or you can even move your window by holding and dragging a part of the browser that doesn't have a clickable thing on it.

OakdaleFTL

@kutay I was going to try your mod — but I can't locate the folder /Settings/Appearance/... let alone Custom UI Modifications.
Is it somewhere in /Vivaldi.app/Contents/ or in /Application\ Support/Vivaldi/?

(Please show full path... )

AltCode

@OakdaleFTL There seems to be a misunderstanding here, there is no /Settings/Appearance/ folder. After you've enabled the experiment, you have to go to the settings page, specifically vivaldi://setttings/appearance/ under Appearance > Custom UI Modifications. There you will see the following:
Screenshot 2023-06-25 at 21.01.09.png

For more detailed info see the Modding Vivaldi thread.

OakdaleFTL

@AltCode Hm. Some searching led me to /Applications/Vivaldi.app/Contents/Frameworks/Vivaldi Framework.framework/Versions/6.1.3035.100/Resources/vivaldi/user_files/... It works, with some odd side effects!
Screen Shot 2023-06-25 at 12.10.29 PM.png
(But this may be an interaction with the Rectangle app...)
And, of course, it has no effect on the windows opened in other profiles; so there's that!

Any ideas as to what happened?

nomadic

@OakdaleFTL That folder contains the files for Page Actions. If you add that folder under the custom UI Modifications option, you will get all sorts of side effects. You are seeing the Transform 3D page action in the screenshot.

You should create your own folder outside of the Vivaldi directory. It has been awhile since I last used a Mac, but if you have a documents folder, you could create a folder there called Vivaldi CSS Mods and put the CSS file there.

Here are some more detailed steps I wrote awhile ago for Windows, but it might help you somewhat: https://forum.vivaldi.net/post/360915

OakdaleFTL

@nomadic I thought that looked familiar!
Of course, the settings page wouldn't allow me to select the Vivaldi app, so I added it manually... (And now I know where the Page Actions CSS is stored!)
Thanks! I think I've got it now.

Screen Shot 2023-06-25 at 12.54.30 PM.png

@kutay said

I think you can move your window using the bottom status bar by holding and dragging it. Or you can even move your window by holding and dragging a part of the browser that doesn't have a clickable thing on it.

As advertised: Status Bar and Tab Bar and Address Bar non-clickable areas can be grabbed... No side effects noted! (See Note at end of post...)
Thanks!

Of course, removing the UI (via ⌘F10) brings the Stoplight back! Good thing, too: It's functionality is useful...
But the green button does not take your display out of full-screen view! In fact, all functionality of the Title Bar is gone, when in full-screen mode. (F10 and ^⌘F still work...) And double-clicking the Title Bar to fill the screen remains functional with the UI hidden.
(I use Reader Mode without the UI, usually. )

Screen Shot 2023-06-25 at 1.11.35 PM.png

Note: Hiding the Tab Bar instantiates the Stoplight on the Address Bar, where it remains fully functional!

Screen Shot 2023-06-25 at 2.14.47 PM.png

(Including assuming the Title Bar functionalities. Such also happens with the Tab Bar itself; and the Status Bar! ~~And one big Oops! Tool bars can no longer be edited...~~ Tool bars can only be edited via clickable elements.)

OakdaleFTL

@Kutay Do you have any idea what "broke" your mod on Vivaldi 6.7.3316.3 / Chrome 122.0.6261.158 ? (It still works fine on the current Stable Vivaldi 6.6.3271.57 / Chrome 122.0.6261.158.)

thedayismine

@kutay Any idea how to hide the titlebar when in fullscreen and hovering over the menu bar?

tobbelundberg

With some recent Vivaldi update this mod does not work for me anymore

Anyone know how to hide the stoplights now? I have this right now

tobbelundberg

Downgraded to version 6.6.3271.61 (from 6.7.3329.24) And things are back to working like they always were!

Doesn't feel great to not get new security updates and stuff, but it really bugged me to have the stop light icons being on top of my back/forward arrows and/or have that weird alignment where they're not vertically centered in the address bar

Much better!

Truemotion

Any fix for recent releases? They don't appear in developer mode anymore...

tobbelundberg

@Truemotion said in Mod: Removing Traffic Lights On Tab Bar:

They don't appear in developer mode anymore...

What do you mean "developer mode"?

I haven't dared trying to update. I'm afraid the mod will stop working again if I do

Truemotion

In the past, you could open the developer window and inspect the window buttons, so you would see where those buttons are in script for further css modding.

tobbelundberg

Ahh, yeah, exactly. They don't seem to be part of the JavaScript or CSS code anymore. I think they switched them to native controls, which is why we can't modify them anymore

I'm pretty sure they did that to implement this feature in Vivaldi 6.7

Tile apps with window split view on Mac: Window split screen view allows two sections, each displaying a different app, an addition that Mac users, especially those using big screens, will appreciate.

(quote and screenshot from this blog post https://vivaldi.com/blog/vivaldi-on-desktop-6-7/)

But I'm more than happy to give up that feature to be able to have better control over the traffic light buttons

tobbelundberg

Found another report of the same underlaying issue. So just cross-posting here for reference:
https://forum.vivaldi.net/topic/97607/button-top-margin-in-mac-6-7-version/9

qjava

@tobbelundberg You are right, Vivaldi no longer uses custom CSS to disguise as native macOS buttons. As of version 6.7, these are fully native macOS buttons with all their features. Therefore, all mods that modified this CSS will unfortunately not work
Since native buttons have a huge impact on the user experience and provide users with many features, the decision to switch to native beacons was really important. Not only does it provide cool window management features, but it also works with accessibility apps and third-party window managers.