Edges to the browser window

pafflick

@enc0re said in Edges to the browser window:

Do you know what to add to be able to drag window from that border?

I'm not sure I know what you mean but you could try adding box-sizing: border-box; to place the borders "inside" the window instead of placing them "outside" of it (it's the default behavior).

enc0re

@pafflick Like that?
#browser {
border: 1px solid #ff0000 !important;
box-sizing: border-box;
}

This is not working, no dragging.

I meant that if I add border, window drag is not working when clicking on border.

pafflick

@enc0re Hmmm, that's interesting. I thought you were talking about the position of the border, but I see that's not the case. I'm able to drag the window anyway, I wonder why isn't it working for you...

What OS do you use? I'm on Windows 10, I have no problems with dragging the window whether with or without the custom border...

bdot

@duarte.framos
I tried Native Windows option originally but if I remember correctly (I'm not at work right now), it screwed up something else.

bdot

@Pesala said in Edges to the browser window:

@bdot The edge is still there, you can see it by the drop shadow. Whether there's a border or not makes no difference, you have can still see the double-arrow cursor that is necessary to resize the window.

Ssee the Modding Forum if you really must waste some space.

uh.... there is no drop shadow showing. It's just white space and looks exactly like the white space on the browser window behind it. There is literally no distinction between one window and the next window.

bdot

@Tiamarth said in Edges to the browser window:

@bdot Hi there, this feature is not currently built in to Vivaldi unless you set it to use native window borders, which also adds the system's title bar. I posted a request in the feature requests thread about this issue: https://forum.vivaldi.net/post/136901

Add an option to show a border around Vivaldi even when Native Window is disabled, see this thread. Some users may like to have the clear distinction between Vivaldi and other running apps on their system, but not like the titlebar.

I also posted some custom css that adds a border to Vivaldi to use as a workaround in the meantime:
#browser {
    border-top: 0;
    border-right: 1.5px solid rgba(47,52,63,0);
    border-bottom: 1.5px solid rgba(47,52,63,0);
    border-left: 1.5px solid rgba(47,52,63,0);
}

Where do you stick that CSS code? Is there an INI file or somthing that it goes in?

pafflick

@bdot You should probably read this if you haven't done that before.

Pesala

@bdot said in Edges to the browser window:

uh.... there is no drop shadow showing.

I don't recall changing any settings. I assumed that everyone would see the drop shadow. Probably it depends on your OS. I am using Windows 10 64-bit Creator's Edition.

enc0re

@pafflick I'm using Win 7 x64, three computers and draging from border nowhere works :(.

Tiamarth

@enc0re To clarify, are you trying to make it so you can drag the window from the border, or are you having issues being able to resize the window from the border?

Because I think Pafflick was explaining he had no issues moving the window by dragging from the tab bar, and I don't have any issues with that either. But you wouldn't be able to make the border drag the window with just css: you'd need to create a new element (e.g. .border) behind .app, while also giving .app a margin of however wide you want your border to be, and then you'd need to make .border draggable. You can make an element draggable with just css, but you can't make only an element's border draggable with just css, and since you'd have used Javascript to do everything else it would just be easier to use it for that as well. You can make an element draggable in css in Chromium-based browsers like Vivaldi with -webkit-app-region: drag;

If you're having issues using the border to resize the window, I can't reproduce that here.

enc0re

@Tiamarth First sentence is right. I would like to drag window from the border.

I don't have issues with resizing window, or draging from tab bar. When there is no border enabled, I can just blindly move mouse up and then drag window. But with border enabled, there is 1px dead zone, and I have to carefuly move cursor 1px down, below that border. I hope its clear now.

Tiamarth

@enc0re Oh, I see now. You must be using some css different from the css I provided here, as you wouldn't have that issue with the css I wrote.

#browser {
    border-top: 0;
    border-right: 1.5px solid rgba(47,52,63,0);
    border-bottom: 1.5px solid rgba(47,52,63,0);
    border-left: 1.5px solid rgba(47,52,63,0);
}

See, this defines the border for each side of the browser independently from each other so that it's possible to remove the border from the top of the window, allowing for the possibility to drag it.

enc0re

@Tiamarth Yea, I didn't miswatched your code, I just used one line command to set whole border. It seems that now only solution to me is your code, by not enabling top border. Anyway, thanks for helping.

bdot

Tiamarth

I've started taking care of this with padding instead, that way I don't have to define colours because it just automatically inherits the window's colour.

#browser {
    padding-top: 0;
    padding-right: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
}

And this will remove the padding in maximized and fullscreen windows:

#browser.maximized,#browser.fullscreen {padding: 0;}

bdot

Thanks guys. I was able to get it to work with the CSS file.... that was until an Vivaldi Update came down the pipe today and erased it so I am having to re-write it again.

bdot

@dLeon I put them in the folder where Vivaldi is located. When it updated, it made a new version folder and deleted all the settings.
Looks like I'll have to do that every time Vivaldi updates which is quite frequently.

Tiamarth

@bdot Just for the sake of total clarity, this is how you should be using custom css:

In resources/vivaldi/style/ create custom.css

Open custom.css with a text editor and write the css you plan on using. In this case, paste the following css:

 #browser {
     padding-top: 0;
     padding-right: 1px;
     padding-bottom: 1px;
     padding-left: 1px;
 }

#browser.maximized,#browser.fullscreen {padding: 0;}

Open resources/vivaldi/browser.html in a text editor and add the following to <head>
<link rel="stylesheet" href="style/custom.css" />
Restart Vivaldi.

You will need to edit browser.html whenever Vivaldi updates because it gets overwritten. You shouldn't need to rewrite your css, because custom.css should not get overwritten.

enc0re

@Tiamarth Seems, that this way of defining custom.css is not aplicable anymore. Today I updated to new snapshot, and custom.css was gone :(.

Ayespy

@enc0re Custom CSS is always wiped when you update. You have to back it up. It's a hack - not supported by Vivaldi.

Well, to be more accurate, I think the custom CSS may remain, but you have to re-state the code line that references it.