Separator for web panels

Zalex108

Hi,

--
"Off Topic Tip"
Follow the Signature's Backup | Reset link.
Take the opportunity to start a Backup plan and even create a Template Profile.

Windows 7 (x64)
Vivaldi Backup | Reset + Extra Steps

Zalex108

@sjudenim said in Separator for web panels:

@Zalex108

I'm assuming that you are using a blank button to create the divider, I suspect Vivaldi is using a default icon for buttons that do not generate one.

I noticed my method is broken in the snapshot as well, but that's an easy fix.

Try this
#switch button { margin-bottom: 5px; }

/* Panel group seperators */
#switch > button:nth-child(2)::after, #switch > button:nth-child(4)::after, #switch > button:nth-child(6)::after, #switch > button:nth-child(7)::after {
  content: '';
  display: block;
  position: absolute;
  background-color: var(--colorFg);
  margin-top: 38px;
  width: 50%;
  height: 1px;
  border-radius: 2px;
  opacity: .5;
}
I've spaced mine out a little since I don't have many showing, but you can remove the first line of code if you don't like it and then adjust the margin-top to something like 34px or 35px

Hi,

I've been trying again with your code, actually the thin line connected also to the VTheme looks nicer for me.

I've been counting the WPanels position to locate the Separators, but just noted that hiding WPanels automatically pushes to relocate the Separators out of its position (split the Panel in groups despite hidden ones it's the idea).

Would be somehow possible to manage this?

--

Left: @oudstand's Code - Movable / Fixed Position
Right: @sjudenim's Code - Dynamic / Static Position

Thank you

Zalex108

@oudstand said in Separator for web panels:

.panelbtn[title*="empty"] img {
height: 1px !important;
background-color: gray !important;

Replaced Background-colour with

background-color: var(--colorFg)!important;

Now takes the Theme's Colour

For a thinnest line can't figure out how

sjudenim

@Zalex108

The separator will not move because it's in a fixed position. It's the panel buttons you add and remove that are moving. You can just renumber the lines but if you add and remove a lot then that can be annoying.

I haven't tried the other code but it has a height of 3px set, change that to 1px

Also, as a tip. When using margins, padding, etc. the values work like a clock: top-right-bottom-left. You can also just use 1 value for even all around or 2 for even top-bottom and left-right.

So using the other code you change this

margin: 3px 0 3px 0

to just this

margin: 3px 0

that means that the top and bottom are 3px while the left and right are 0

Zalex108

@sjudenim

Thanks

Just tested and didn't noticed changes.

I will need to check it more in detail.

--

Thank you for the formation about the coordinates.
Totally forgot and nor took the notes yet neither researched.

Thank you

oudstand

@almalexiel said in Separator for web panels:

I'd like to use this feature too but I don't understand where you put the CSS?? When I create an empty page there's nowhere for me to enter the CSS. If someone can help I would be greatful!

Did you get it to work? Otherwise let me know.

gsanson

@oudstand Hi, could you tell me step-by-step how to use this cool feature?

Zalex108

@gsanson

Guide

--
"Off Topic Tip"
Follow the Signature's Backup | Reset link.
Take the opportunity to start a Backup plan and even create a Template Profile.

Windows 7 (x64)
Vivaldi Backup | Reset + Extra Steps

oudstand

@gsanson said in Separator for web panels:

@oudstand Hi, could you tell me step-by-step how to use this cool feature?

Hey @gsanson. You can follow the guide that @Zalex108 posted to enable CSS mods. Afterwards you have to create a CSS file where you place the code I've provided. After restarting your browser, you can create a new web panel where you enter as URL "empty". This will create a separator that can be moved around.

dude99

@oudstand You can use currentColor to give separator the same color as all button's svg, which will auto adjust according to chosen theme's background color, white for dark theme & black for light theme.

oudstand

@dude99 this should work as well. Since I've customized the color of my panles container it's not the best solution for me.

Zalex108

@oudstand

Hi,
With the latest Snap 2861.3, Separators are broken

Would you mind to take a look into it

Thanks in advance!

Zalex108

@oudstand @sjudenim

Just seen there are separators within the Toolbar Setup, so would be unnecessary to fix the code.

Thx!
PS: Aren't as cool as yours

sjudenim

This post is deleted!

Zalex108

@sjudenim

I can see it with the Moderator X-Ray Vision!

Will work or break the system?

oudstand

@Zalex108 said in Separator for web panels:

@oudstand
PS: Aren't as cool as yours

Thank you very much
I've decided that it's easier to use the separators provided by Vivaldi and style them.
This is how I use them now:

#switch .toolbar-divider {
    height: 4px !important;
    max-width: 20px;
    margin: 5px;
    border-radius: 10px !important;
    background: gray !important;
}

#switch .toolbar-divider button {
    display: none;
}

PS: for Spotify showing up at the bottom I placed it below the flexible space

Zalex108

I'll check later!
They look nicer

Thx!!

Zalex108

Separators_5.6.gif

Thx! @oudstand

Separator for web panels

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...