Drop shadow and background blur

[alexhx5]

Drop shadow

Is it possible to add a bigger and darker drop shadow for cerebro? Default shadows are almost invisible and it's hard to distinguish cerebro search bar from other windows

Background blur

Have you considered a background blur? It helps to focus on the search bar even more, and it also looks cool, especially with a smooth linear transition (not an instant blur like on the screenshot)
Not everyone would want it, though. In my opinion, it should be as an option in settings. Maybe even add another option to change the amount of blur

(gif has only 256 colors, so it looks worse than in reality)

[maximbaz]

Blur is probably an overkill, but definitely a +1 from me for a shadow.

Personally I don't struggle with it that much because my composition manager that I use in Linux fades everything in background when Cerebro opens, it has effect similar to the blur, but not as drastic.

[KELiON]

@AlexAlabyev @maximbaz AFAIK electron supports window show on macOS:

hasShadow Boolean (optional) - Whether window should have a shadow. This is only implemented on macOS. Default is true.

But as I see shadow is possible: we can do a theme with transparent window, and just add css box-shadow for main element.

Current I didn't implement good API for external themes, but we started conversation in #66. So, I'm thinking about providing API for external themes, so developers can control:

• Some colors/fonts/sizes within css file, like it is done right now in light and dark themes
• Add support for some electron window options, such as transparency, vibrancy, etc

[alexhx5]

@maximbaz I agree, blur is very subjective and not everyone likes it. It would be nice to have it as an option in settings, maybe.

@KELiON external themes would be nice, do you think we could add a basic default theme with a good looking box-shadow for windows in the next build? As you can see it on the first screenshot, without shadow it looks rather unpleasant. I think, a shadow would make a great improvement to the UI

[maximbaz]

Just a fair warning, you might get a push-back from Linux users. Some people are used to control how their window looks via composition managers, so that the styles are identical for all apps.

For example, I enabled background fading and shadows, and it looks like this:

Right now I can control shadow radius, colors, offset - and it affects all apps on my box in the same way.

Personally, I don't mind if you implement a shade, but I want you to be aware of this :)

[alexhx5]

@maximbaz right, thanks, that's a fair concern. It's basically just a problem with Windows then.

[alexhx5]

@KELiON and @maximbaz I've created the box-shadow example. What do you think of that?
Is it going to be as easy as:

• make background transparent and
• add box-shadow

or it's more difficult then that and will not appear in the next build?

Link to jsfiddle

  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.5),
              0  6px 26px 5px rgba(0, 0, 0, 0.4),
              0  8px 10px -5px rgba(0, 0, 0, 0.1);

[maximbaz]

I've just played with this a bit, but I couldn't achieve transparency for the main window. Not sure if this is a lack of support for Linux or I'm just doing something wrong.

Tried to google it a bit, found an old pull request for electron that implements transparency... for MacOS only. Not sure if something changed since then.

If there is no support for Linux / Windows, this could be the reason why native property hasShadow is only implemented on MacOS. This would also mean, that transparent themes for Cerebro will also work only on MacOS.

[alexhx5]

@maximbaz have you tried adding transparent and frame properties where the main window is created? like that:

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600, 
    transparent: true,
    frame: false 
  })

According to this documentation, there are some limitations, for example to be able to click through the transparent area you should add win.setIgnoreMouseEvents(true)

It also says that for linux you should type --enable-transparent-visuals --disable-gpu in the command line to disable GPU and allow ARGB to make transparent window, this is caused by an upstream bug that alpha channel doesn't work on some NVidia drivers on Linux.

If it doesn't help, I can create a thread on stackoverflow and ask other developers for a better solution, maybe there are other ways to do this.

[maximbaz]

Tried now, the transparent flag causes some totally weird artifacts. The --enable-transparent-visuals --disable-gpu don't seem to make any difference, though I'm on Intel graphics, not NVidia.

How does it look for you on Windows? Do you have the dev environment configured, to try?

app/main/createWindow.js     -> here is "new BrowserWindow", add "transparent: true"
app/main/css/themes/dark.css -> here is --main-background-color, set to "transparent"

I'll also watch #66 to see if attempts to implement transparency appear, and how it will work on different OS.

[alexhx5]

@maximbaz at the moment I don't have the dev environment configured. I just added those parameters to files. Is there a quick way to run it and see if it works?

[maximbaz]

You can play with CSS (type settings, enable Developer Mode, in the tray Development > DevTools (main) > select html element and play with its styles), but there's no easy way to change javascript on the fly.

[cncastillo]

Has anyone achieved the transparent background and rounded edges for Linux? I tried to play with the Development Mode and change the CSS but I couldn't get the transparent background (and therefore you can't see the rounded edges, only if you add a border with a different color). Please someone that know more Electron+CSS do something like #66 for Linux :D

[KELiON]

@cncastillo to do so you'll need to use not only CSS, but change some BrowserWindow properties, like transparency

[ogustavo-pereira]

I will close because this issue is very old and has already been fixed