Mask for the address bar

[stardepp]

@nomadic All this is written in the tabs-below-url.css

[stardepp]

[stardepp]

[stardepp]

[stardepp]

[stardepp]

[luetage]

I guess pastebin would be a better idea than screenshots… Anyway, all of these posts are completely off‐topic here, because they have nothing to do with the mod, which works fine.

[nomadic]

@stardepp Sorry I wasn't clear, didn't need all the css in images, just the beginning. Must have taken some time.

It is getting off topic here.

Send me a chat message and I will try and help you if I can. I tried sending you a message, but you have it restricted to only people you follow.

[tam710562]

@stardepp I see a few problems in your css file

[stardepp]

@tam710562 Many thanks for this tip, I have changed. But it has not solved the problem yet.

[Streptococcus]

@tam710562
Why make anything in the address bar hard to read? I have never understood why that is desirable. Of all the ways to emphasize the domain name, most browsers will choose the most awkward way to do that: by making most of the URL semitransparent and hard to read or remove it altogether. What is so bad about the prefix of the hostname? Why hide that?

[nomadic]

@tam710562 and anyone else following along at home, @stardepp and I managed to get it working on their computer.

Thanks for the great Mod!

[sjudenim]

Vivaldi have somewhat added this mod to the Snapshot but the colour scheme they are using is very hard to read. And since I used theme-3, nothing is centred anymore.

While this mod is less needed, it still seems like the right place to add any changes. so to recreate theme-3 in the snapshot you can use this

CSS

.UrlField {
  justify-content: center;
  font-weight: 700;
}

 .UrlField .UrlBar-UrlField {
  text-align: center;
  font-weight: 400;
}

.UrlFragment-Wrapper--ShouldHighlight {
  --HighlightColor: var(--colorFg) !important;
  --LowlightColor: var(--colorFgFaded) !important;
}

[embryo626]

it does not work on v3.3,please fix it,thank you.

[barbudo2005]

@tam710562 Please update it.

I read a lot of blogspot pages so to me is more important highlight the subdomain.

Example: aboutmysteryandcrime

https://aboutmysteryandcrime.blogspot.com/

[sjudenim]

@barbudo2005

Try this

/* URL unset colour */
.UrlFragment-Wrapper { color: unset; }

/* URL colour */
.UrlFragment--Lowlight:first-of-type { color: var(--colorFgFaded); }

/* URL Sub-domain */
.UrlFragment-HostFragment-Subdomain {
  color: var(--colorFgIntense) !important;
  font-weight: bold;
}

Or you can have both domain and sub-domain stand out while still having the sub pop more

/* URL colour */
.UrlFragment-Wrapper, .UrlFragment--Lowlight:first-of-type { color: var(--colorFgFaded); }

/* URL Base-domain  */
.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {
  color: var(--colorFgIntense) !important;
  font-weight: bold;
}

/* URL Sub-domain */
.UrlFragment-HostFragment-Subdomain {
  color: var(--colorHighlightBg) !important;
  font-weight: bold;
}

[barbudo2005]

@sjudenim Thank you very much.

Your Mod (the second part) do the job, but I would like to have the rest of the URL with the color of https://.

Rest of the URL: /topic/37609/mask-for-the-address-bar/62

Could you help me?

[sjudenim]

@barbudo2005

I've updated the second one, give it a try. If you want them darker still just switch var(--colorFgFaded) with var(--colorFgFadedMore)

[barbudo2005]

@sjudenim Thank you again.

Where I can learn what is the meaning of this type of colors : var(--colorFgFaded), var(--colorFgFadedMore), etc.

I am used to use in CSS the simple colors: #171b1d, #d8d8d8, etc.

[A Former User]

@barbudo2005 All those are Vivaldi-defined variables (no hack, a normal CSS feature). You can see all the variables with the colours they have in the current theme at vivaldi://themecolors.