Separator for web panels

oudstand

Seperator for web panels

Hi
Is it possible to add something like a seperator to the web panels? I would like to organize my web panels a bit since it is just a "long" list.
Something simple like a thin line would be enough.

--
ModEdit: Title

EDIT:
This is my solution for separators:
I've created a new web panel and as URL I've entered empty. Then this CSS code makes the empty panel look like this:
EDIT 2:
Added suggestions of @Zalex108 and @sjudenim. Thank you!

.panelbtn[title*="empty"] {
    height: 1px !important;
    margin: 3px 0;
}
.panelbtn[title*="empty"] img {
    height: 1px !important;
    background-color: var(--colorFg)!important; 
    /* you can use any color you like */
}
.panelbtn[title*="empty"]:hover {
    background-color: unset !important;
}

EDIT 3:
With the latest Vivaldi Snapshot version Vivaldi provided us with build in separators. Since it's easier to use and style them, I've decided to do so. With this code:

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

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

you can make them look like this:

Pesala

@oudstand Do you know that you can drag and drop web panel icons by holding down the shift key. This will allow you to organise them in a way that is logical rather than just in the order that they were added.

oudstand

@Pesala said in Seperator for web panels:

@oudstand Do you know that you can drag and drop web panel icons by holding down the shift key. This will allow you to organise them in a way that is logical rather than just in the order that they were added.

Yes I knew this. I thought about something like in Opera:

There you have something like sections, that would be nice.

Pesala

@oudstand Opera is wasting a lot of space. On a landscape monitor the toolbar could easily fill up with web panels. The separator should only use half a dozen pixels.

oudstand

@Pesala of course it must not be that big, just a small seperator would be enough for my taste.
The screenshot should just show what I'm talking about.

Currently I'm helping myself with some CSS but this of course only works as long as the panel stay in the same order.

.panelbtn.history {
    margin-bottom: 10px;
    /* adds a spacing to the other web panels */
}
.panelbtn[title*="messenger"], .panelbtn[title*="whatsapp"] {
    margin-bottom: 10px;
}
.panelbtn[title*="messenger"]+.panelbtn[title*="whatsapp"] {
    margin-top: -10px;
}
.panelbtn[title*="spotify"] {
    position: absolute !important;
    bottom: 25px;
}

oudstand

I've tried something else, maybe it can be helpfull for others too.

I've created a new web panel and as URL I've enterd empty. Then this CSS code makes the empty panel look like this

.panelbtn[title*="empty"] {
    height: 3px !important;
    margin: -8px 0 16px 0;
}
.panelbtn[title*="empty"]>img {
    height: 1px !important;
    background-color: gray !important;
}
.panelbtn[title*="empty"]:hover {
    background-color: unset !important;
}

Pesala

@oudstand Nice, but perhaps you could make the separator useful by setting the URL to Help or Speed Dial.

oudstand

@Pesala that would be possible. The CSS code should be easily customizable.

Pesala

@oudstand This works, but looks a bit messy when the Help Panel is selected:

/*Panel Separator*/
.panelbtn[title*="help.vivaldi.com"] {
    height: 3px !important;
    margin: -8px 0 16px 0;
}
.panelbtn[title*="help.vivaldi.com"]>img {
    height: 1px !important;
    background-color: gray !important;
}
.panelbtn[title*="help.vivaldi.com"]:hover {
    background-color: unset !important;
}

oudstand

@Pesala said in Seperator for web panels:

@oudstand This works, but looks a bit messy when the Help Panel is selected:

yes that's true.

sjudenim

@oudstand

There are a couple of ways you can go about this. The important thing is the :nt-child(number), that will allow you to place the dividers in a fixed position to create your groups of panel buttons

The first method is by simply adding a border to specific buttons like this

#switch > button:nth-child(3), #switch > button:nth-child(6), #switch > button:nth-child(9) {
  border-bottom: 1px solid var(--colorFg) !important
}

Another (better looking) way is to create an after element. This method allows for more styling control over the dividers

#switch > button:nth-child(3)::after, #switch > button:nth-child(6)::after, #switch > button:nth-child(9)::after {
  content: '';
  display: block;
  position: initial;
  background-color: var(--colorFg);
  margin: auto;
  margin-top: 0;
  width: 60%;
  height:  2px;
  border-radius: 2px;
}

The things you may want to change are the height, width and background-color, but this will get you started

oudstand

@sjudenim said in Seperator for web panels:

content: '';
display: block;
position: initial;
background-color: var(--colorFg);
margin: auto;
margin-top: 0;
width: 60%;
height: 2px;
border-radius: 2px;

That's also a nice solution

Zalex108

@oudstand said in Seperator for web panels:

I've tried something else, maybe it can be helpfull for others too.
I've created a new web panel and as URL I've enterd empty. Then this CSS code makes the empty panel look like this
.panelbtn[title*="empty"] {
    height: 3px !important;
    margin: -8px 0 16px 0;
}
.panelbtn[title*="empty"]>img {
    height: 1px !important;
    background-color: gray !important;
}
.panelbtn[title*="empty"]:hover {
    background-color: unset !important;
}

Hi,
Just been thinking on that a day ago :smiling_face_with_open_mouth:
Great,
Thanks

They look very nice.

--

Also,
I have a question,
I use another Panel Icons Mod to remove Border, and that one blocks the Separator image on Dark Themes:

I've tried changing the colour to white but keeps hidden:

Removing the other code it works on any Theme:

Any idea?

--

Thank you

Zalex108

Finally managed on how to achieve it.

This post contains the mixed data, just needs to change the Panels' name.

Zalex108

Hi,

The Line Image changed to a "world" on v3.8.

v3.7 ------------------------------ v3.8

Would be fixed?

--

Thank you

sjudenim

@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

Zalex108

@sjudenim

Thank you!

--

It's a WebPanel instead of a button.

This is the fork which allows to add and move easily on the Panel:

@oudstand said in Seperator for web panels:

I've tried something else, maybe it can be helpfull for others too.

I've created a new web panel and as URL I've enterd empty. Then this CSS code makes the empty panel look like this
.panelbtn[title*="empty"] {
    height: 3px !important;
    margin: -8px 0 16px 0;
}
.panelbtn[title*="empty"]>img {
    height: 1px !important;
    background-color: gray !important;
}
.panelbtn[title*="empty"]:hover {
    background-color: unset !important;
}

--

After test it a bit,
Noticed they are like Fixed Separators with fixed position.

If the other would be adapted it's easier to manage.
Despite that,
Will try to add some more separators and count the position to locate them.

Thank you.

oudstand

I've changed my code according to the update to this:

.panelbtn[title*="empty"] {
    height: 3px !important;
    margin: 3px 0 3px 0;
}
.panelbtn[title*="empty"] img {
    height: 1px !important;
    background-color: gray !important;
}
.panelbtn[title*="empty"]:hover {
    background-color: unset !important;
}

Now it looks like this again:

Zalex108

@oudstand

Thank you!

almalexiel

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!