Hyper: Get rid of `border-radius` in fullscreen mode (macOS)

[rauchg]

Hopefully the fullscreen events fire in the main browser window to make this easier.

[rauchg]

@montogeek you can take a look at this one if you'd like!

[montogeek]

@rauchg Actually, I like the border but it will take a look!

[rauchg]

@montogeek I like the border, but do you think the -radius makes sense ?

[montogeek]

@rauchg It already has a border-radius, I like it that way

[rauchg]

Yeah it's not _bad_, but for example Chrome and others make their borders rectangular when going fullscreen.

[hharnisc]

In fullscreen with no radius, looks pretty sweet!

[kaicataldo]

Thoughts on removing the border entirely in fullscreen mode? I think it looks a lot cleaner and has a more native feel without (and would match the behavior of other applications like iTerm).

[timothyis]

I actually really like HyperTerm fullscreen without the border + border-radius

Seems really attractive.

[kaicataldo]

Yeah! Though I still like the border around tabs when are there are multiple tabs.

[kube]

Is this possible now ?
Any class added when in mac fullscreen mode ?

[rauchg]

@kube I wonder if this applies: https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen

[kube]

@rauchg

I just tried to add :fullscreen on nav.tabs_nav in my own CSS, and it does not work.

So I tried from the Developer Tools to add manually a new rule with :fullscreen but Chromium does not seem to accept it (rule is not added).

I tried with :

• :fullscreen
• :webkit-fullscreen
• :full-screen
• :webkit-full-screen

Without success.

To be sure, I added manually a new rule with :hover and the rule was correctly added.

So I guess Electron does not support this at the moment.

[kube]

I rapidly looked at the code on the repo, and there's a UI_WINDOW_MAXIMIZE Action.

I did not find where this action is actually dispatched.

Maybe using this Action and State ui.maximized boolean to toggle a .hyper-fullscreen CSS class at the React root component would be a solution ?

Then we could create custom CSS rules like this :

.hyper-fullscreen nav.tabs_bar {
  background-color: black;
}

[rauchg]

Yep @kube (not to be confused with kubo). I strongly suggest creating a plugin!

You could call it: hyper-borderless-fullscreen :P