UrlBar Spacing - Centered Address Field [CSS Only Version]

[nomadic]

Preview

---

What?

• This is an alternative version of @luetage's JavaScript based mod for centering the AddressField in the UrlBar with spacing on either side, but this version uses CSS only.

• The mod adds a flexible margin around the Addressfield, depending on width of the browser window. The window can be dragged by clicking inside the new margins.

---

Installation

• Look at the Pinned Posts in the Modding Forum here to see how to install a CSS mod.

• It does require manually inputting one variable that corresponds to the number of extensions visible, including the toggle for hidden extensions.

  So --numberOfExtensions would be set to 2 for both of these:
  | This | And This |
  | ---- | ---------- |
  | | * No matter how many extensions are hidden under the toggle |

• You can also configure how much space the AddressField takes up by adjusting the variable --widthOfAddressBar

---

CSS

/* Title:       UrlBar Spacing - Centered Address Field [CSS Only Version]
 * URL:         https://forum.vivaldi.net/topic/60045/urlbar-spacing-centered-address-field-css-only-version
 * Description: Adds a flexible margin around the Addressfield, depending on width of the window. The window can be dragged by clicking the margins.
 * Author(s):   @nomadic, @luetage, and @sjudenim
 * CopyRight:   No Copyright Reserved
*/

/* --- START CONFIGURATION --- */
.UrlBar {
  --widthOfAddressBar: 55%;
  /* Number of extensions including the hidden toggle button */
  --numberOfExtensions: 1;
}
/* --- END CONFIGURATION --- */

.UrlBar {
  -webkit-app-region: drag; /* Allow dragging window from UrlBar */
  display: grid;
  grid-template-columns: 1fr minmax(min-content, var(--widthOfAddressBar)) 1fr;
  /* Do Not Edit */
  --buttonWidth: 34px;
  --extensionsLeftBorderWidth: min(6px, calc(var(--numberOfExtensions) * 6px));
  --extensionsWidth: calc(max(var(--numberOfExtensions), 1) * var(--buttonWidth) + var(--extensionsLeftBorderWidth));
}

/* prevent navigation controls from being squished on window resize */
.UrlBar div:first-child {
  min-width: fit-content;
}

/* Place the right elements in the same grid cell and space accordingly */
.UrlBar .toolbar-extensions,
.UrlBar .profile-popup,
.UrlBar > .button-toolbar:not(.profile-popup), /* search field button */
.UrlBar .UrlBar-SearchField {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  width: min-content;
  margin-left: auto;
}
.UrlBar > div:nth-last-child(2).profile-popup,
.UrlBar > div:nth-last-child(2).button-toolbar:not(.profile-popup) {
  margin-right: var(--extensionsWidth);
}
.UrlBar > div:nth-last-child(2).UrlBar-SearchField {
  margin-right: calc(var(--extensionsWidth) - var(--extensionsLeftBorderWidth));
}
.UrlBar > div:nth-last-child(3).button-toolbar:not(.profile-popup) {
  margin-right: calc(var(--extensionsWidth) + var(--buttonWidth));
}
.UrlBar > div:nth-last-child(3).UrlBar-SearchField {
  margin-right: calc(var(--extensionsWidth) + var(--buttonWidth) + 3px);
}

/* Add border between search field button and extensions */
.UrlBar
  > div:nth-last-child(2).button-toolbar:not(.profile-popup)
  + .toolbar-extensions
  .button-toolbar:not(.button-narrow):first-of-type:before {
  content: "";
  position: absolute;
  display: block;
  top: 6px;
  left: -3px;
  width: 1px;
  height: 22px;
  border-radius: 100%;
  background: var(--colorAccentFg);
  opacity: 0.2;
}

---

Also thanks to @sjudenim for inspiration and input on usage of CSS grid for centering the AddressField in their more comprehensive mods (on GitHub).

[dude99]

@nomadic Hey, why do you go through all that trouble of using grid position instead of flex position + auto margin?

Something much simpler like this can accomplished the same effect:

.UrlBar-AddressField {margin: auto; max-width: 55%;}

Then, you can use multiple @media to change the addressfield width according to window's width:

@media only screen and (max-width: 600px) {
.UrlBar-AddressField { max-width: 100%;}
}

@media only screen and (max-width: 900px) {
.UrlBar-AddressField { max-width: 70%;}
}

@media only screen and (max-width: 1200px) {
.UrlBar-AddressField { max-width: 60%;}
}

But, the problem is this centered effects will be broken when there are just too many extensions stuffed into the right side...

[EbrahimLodi]

quite centred now

[luetage]

I tried this at first with the CSS only approach too, but I failed. It would be really simple, if there were just three sections as children of the address bar. Instead there are 5 or 6 last I checked. I don’t even use the mod right now, because I think it’s overkill and none of the solutions look as natural as in the Firefox UI. Although this mod clearly has another aim altogether.

[nomadic]

@dude99 That is more in line with the version @luetage made with even spacing on either side of the AddressField, but the version I made centers the AddressField.

I am not a fan of media queries, just because I find them annoying (and I am not sure they are necessary?), so I made a similar solution using grid again. Probably more complex than it needs to be, but I am trying to get better at using grid. That one line with auto margins does the same job.

@luetage, this seems to have fairly similar functionality to FireFox and your original mod:

/* Version with equal spacing on both sides o */
/* --- START CONFIGURATION --- */
.UrlBar {
  --widthOfAddressBar: 60%;
}
/* --- END CONFIGURATION --- */

.UrlBar {
  -webkit-app-region: drag; /* Allow dragging window from UrlBar */
  display: grid;
  grid-template-areas: "nav space1 url space2 search profile extensions";
  grid-template-columns: auto 1fr minmax(min-content, var(--widthOfAddressBar)) 1fr auto auto auto;
}

.UrlBar > div:first-child {
  grid-area: nav;
  min-width: fit-content;
}

.UrlBar-AddressField {
  grid-area: url;
}

.UrlBar > .button-toolbar:not(.profile-popup), /* search field button */
.UrlBar-SearchField {
  grid-area: search;
  min-width: fit-content;
}

.UrlBar .profile-popup {
  grid-area: profile;
  min-width: fit-content;
}

.UrlBar .toolbar-extensions {
  grid-area: extensions;
  min-width: fit-content;
}

[luetage]

@nomadic Thanks for your effort, I appreciate it. The first version you posted here doesn’t work at all for me, even with removing the profile button and without enabling/disabling extensions, which I do regularly. This second version is better, but it’s still not clean. Space is uneven when opening another window in a split and the toolbar gets squashed together. I don’t think it’s possible to achieve this with pure CSS without downsides. My javascript mod has downsides too, like no support for seach bar and generally being overengineered. Moreover what we all can’t do is display one or two buttons (like the home button) directly beside the address bar and still have native drag and drop work. I’ve grown to dislike mods that alter Vivaldi in a way that hinders native standard functionality. Maybe Vivaldi will at some point rework the toolbars and enable us to create and drag&drop new ones wherever we like (including empty ones ^^).

[dude99]

@nomadic

but the version I made centers the AddressField.

Oh... I see now (from screenshot in OP). But when I test both versions, they are all mess up for me. Maybe it need a very specific setup for UrlBar? Don't sweat over this, I'm just studying your work to learn something new, I have no intention to use this mod.

I am not a fan of media queries, just because I find them annoying (and I am not sure they are necessary?)

Yeah, it's somewhat difficult to use & very confusing most of the time, but media queries are useful in making special list to change value or exclude certain CSS code that broke in certain situation. Some people even request to have something similar to media queries to be available to all elements, it will be either something really powerful, or a total convoluted mess no one know how to use... LOL

Anyway, I hope you learn a lot about grid position through this project.

[nomadic]

@dude99 said in UrlBar Spacing - Centered Address Field [CSS Only Version]:

But when I test both versions, they are all mess up for me. Maybe it need a very specific setup for UrlBar? Don't sweat over this, I'm just studying your work to learn something new, I have no intention to use this mod.

Strange, I loaded a fresh profile and changed all sorts of settings that affect the UrlBar. You can see some of the changes in the preview GIF.

What were the issues? So I can see if there is something I need to fix.

---

With media queries, I just prefer to make CSS that can adapt on its own to fit the changing size. Using grid-template-areas for a website layout could require media queries to change out the structuring.

And don't worry, I am not planning to use this mod either

[dude99]

@nomadic Im using stable version, tested without any other mod, but I do have a lot of extensions installed.

This is the 1st version, the addressfield warp to 2nd row & the profile button is gone... LOL:

This is the 2nd version, notice the navigation buttons are all mashed into 1 spot, & the addressfield are not centered even when extensions are all hidden:

Not sure what's wrong, cuz Im not familiar with grid position either. Hope this can help you figure it out.

[nomadic]

@dude99 Weird, not sure if this is the issue, but it looks like the search field is moving too far to the right. Did you do this part of the installation instructions?

• It does require manually inputting one variable that corresponds to the number of extensions visible, including the toggle for hidden extensions.

  So --numberOfExtensions would be set to 2 for both of these:
  | This | And This |
  | ---- | ---------- |
  | | * No matter how many extensions are hidden under the toggle |

Is --numberOfExtensions set to 10?

[dude99]

@nomadic Oh, dammit! I missed that one. Sorry for the false alarm.

Also, I have a crazy idea that might work, use display: flex & justify-content: center for UrlBar to push everything to center; then use absolute on addressfield plus max-width: X% & margin: 0 auto; then add margin-right/left: auto to elements before & after addressfield to push everything to the side.

The end result should be a floating centered addressfield on UrlBar, regardless of all other elements in the UrlBar. I did this all in my head, never tested yet. LOL

[nomadic]

@dude99 No worries. I tried a bunch of different ways to avoid manually setting that variable, but the structure just didn't allow it.

Tried your idea, just in devTools, and it does mostly work, but I couldn't find a good width property to set on the AddressField without using media queries.

There are always a million different ways to accomplish the same thing in CSS

[luetage]

@nomadic The point is as soon as you are setting a width property, it cannot work anymore. It needs to be a percentage of the maximum the address field takes naturally. I don’t see a way to do this with the current setup.

[mrjimshim]

@nomadic Hey man I'm right back to having problems lol.Both the versions of the mod doesnt seem to work in the latest version.Please dont go through too much trouble to fix this,if it cant be fixed ill just stick to using spaces on the address bar.

[sjudenim]

@mrjimshim

You no longer need code to center the Address Field. You can simply add a couple of dynamic spacers (and some normal ones to account for any buttons) using the Customize Toolbar option

[mrjimshim]

@sjudenim Yeah,thats what I've been using till now,but the address bar moves when I pin more extension or if something more pops up on the bar.But thanks for the recommendation,I guess I'll stick this method!

[sjudenim]

@mrjimshim

For each button you pin to one side, you can just add a spacer to the other side of the Address Field to keep it centered.

Side note:
If the Address Field becomes too small for your liking you can add this bit of code (you can replace the value of 8 with one to your liking. Default is 5)

.toolbar-spacer-flexible ~ .UrlBar-AddressField, .toolbar-spacer-panel ~ .UrlBar-AddressField { flex-grow: 8; }