silverbulletmd / silverbullet

The hackable notebook
https://silverbullet.md
MIT License
2.03k stars 140 forks source link

Window controls overlay #837

Closed s1gnate-sync closed 1 month ago

s1gnate-sync commented 3 months ago

Based on this article: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay

Some minor eye-candy.

Screenshot 2024-04-02 15 39 16

s1gnate-sync commented 3 months ago

to make it even better it would be great if silverbullet can match os theme, it should be relatively easy to detect using

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode variables go here */
  }
}
s1gnate-sync commented 3 months ago

There is a room for improvement, but in require a bit more changes so I decided to split it in two. Since we have titlebar-area-height we can also make navigation bar and icons smaller so they would be the same height as native window decoration.

zefhemel commented 3 months ago

Interesting. I’ll give this a try later. It looks a bit odd in your screenshot, but maybe I’m just not used to the Windows aesthetic.

s1gnate-sync commented 3 months ago

@zefhemel it's chromeos :-)

zefhemel commented 1 month ago

I don't have chromeos so I can't test it there, but this doesn't seem to break anything in Safari nor Chome. So I'll merge this. Thanks!