Border line thickness on address bar
-
Hi,
Is there any way to change the thickness of the border line in Address bar? Same question stands for Search Field on Speed Dial. I want it to be thinner with the same color code.
thnx
-
@tonialb For the address bar use this code in CSS: (modify the px value and color)
.UrlBar-AddressField {border: 2px solid var(--colorFg) !important;}
-
Is there a way to do similar for tabs?
-
@rafiki Use this:
.tab.active:not(.tab-group) {border-top: 1px solid red !important; border-bottom: 1px solid red !important; border-left: 1px solid red !important; border-right: 1px solid red !important;}
-
@barbudo2005 said in Border line thickness on address bar:
@tonialb For the address bar use this code in CSS: (modify the px value and color)
.UrlBar-AddressField {border: 2px solid var(--colorFg) !important;}
Thanks, it worked! But the problem was that the color remained static, when I focused the mouse. I found another way, modified the code:
.color-behind-tabs-on .UrlBar-AddressField:focus-within {
box-shadow: 0 0 0 1px var(--colorBorderHighlight) inset;
border-color: var(--colorBorderHighlight);
}I removed "0 0 0" from the second row.
-
@barbudo2005
Thank you very much. I modified the colour and I'm very pleased with it. It just highlights the active tab nicely. -
@barbudo2005 Hi.
I guess the px number is the thickness of line border. I cant understand about the color mod.
Could you give an example e.g. if the wanted color is yellow it will be :
.UrlBar-AddressField
{border: 2px solid var(--yellow) !important;}
or how ?
Thanks. -
@Buglocker The code var(xxxx) apply to internal colors of Vivaldi related to your theme:
Normally you define the colors in Hexa form: #292a2d, but in the case of basic colors you can use them directly:
.UrlBar-AddressField {border: 2px solid yellow !important;}
or the same in Hexa:
.UrlBar-AddressField {border: 2px solid #ffff00 !important;}
-
This link vivaldi://themecolors/ can be helpful for understanding the theme colours and their variable names.
-
@Buglocker I forget the rgba code:
border: 2px solid rgba(255,255,0,0.8) !important;
In this case you use Red, Green and Blue:
And you have the option to define opacity, in this case 0.8 to attenuate the color.
-
@barbudo2005 I think it was if they use RGB format (aaa,bbb,ccc) not hexa/RGB as it is. Anyway based on search at internet and your help , i have now that .css that additionally defines different colors at "Not active" and "Active & hover" cases :
/ADDRESSFIELD & SEARCHFIELD COLORS HOVER, ACTIVE & NOT ACTIVE/ /Not active/ .UrlBar-AddressField, .UrlBar-SearchField, {background-color: #0 !important;} .UrlBar-AddressField {border: 2px solid blue !important;} .UrlBar-SearchField {border: 2px solid blue !important;} /Active and Hover/ .UrlBar-AddressField:hover, .UrlBar-SearchField:hover, .UrlBar-AddressField:active, .UrlBar-SearchField:active {background-color: #000 !important; border: 2px solid yellow !important; background-color: var(--colorBgIntenser) !important; color: var(--colorFg) !important;}
At my system works OK. Blue > not active , yellow > Active & Hover mouse.
Hope this is useful for other users.