Mask for the address bar

[tam710562]

@barbudo2005 I have 2 options for you to solve it:
Option 1
If you've installed the mod, use theme-1 and add this css to the bottom of the mod css

.theme-1.addressfield-mask .host {
  color: var(--colorFgIntense);
  font-weight: bold;
}

.theme-1.addressfield-mask .host .host-sub:not([data-host-sub="www"]) {
  color: var(--colorHighlightBg);
}

Option 2
This is the code I'm writing for a new mod, it accidentally coincides with your wishes
Use this javascript

window.gnoh = Object.assign(window.gnoh || {}, {
  createElement: function (element, attribute, parent, inner) {
    if (typeof element === 'undefined') {
      return false;
    }
    var el = document.createElement(element);
    if (!!attribute && typeof attribute === 'object') {
      Object.assign(el, attribute);
      if (typeof attribute.text !== 'undefined') {
        el.textContent = attribute.text;
      }
      if (typeof attribute.html !== 'undefined') {
        el.innerHTML = attribute.html;
      }
      if (typeof attribute.style === 'object') {
        for (var css in attribute.style) {
          el.style[css] = attribute.style[css];
        }
      }
      if (typeof attribute.events === 'object') {
        for (let key in attribute.events) {
          if (typeof attribute.events[key] === 'function') {
            el.addEventListener(key, attribute.events[key]);
          }
        }
      }
      for (var key in attribute) {
        if (key !== 'style' && key !== 'events' && key !== 'text' && key !== 'html') {
          if (typeof attribute[key] === 'object') {
            attribute[key] = JSON.stringify(attribute[key]);
          }
          el.setAttribute(key, attribute[key]);
        }
      }
    }
    if (!!inner) {
      if (!Array.isArray(inner)) {
        inner = [inner];
      }
      for (var k = 0; k < inner.length; k++) {
        if (inner[k].nodeName) {
          el.append(inner[k]);
        } else {
          el.append(this.createElementFromHTML(inner[k]));
        }
      }
    }
    if (typeof parent === 'string') {
      parent = document.querySelector(parent);
    }
    if (!!parent) {
      parent.append(el);
    }
    return el;
  },
  override: function (obj, functionName, callback, conditon) {
    obj[functionName] = (function (_super) {
      return function () {
        var result;
        if (typeof conditon === 'function' && conditon.apply(this, arguments) || conditon === undefined || conditon === true) {
          result = _super.apply(this, arguments);
        }
        callback.apply(this, arguments);
        return result;
      };
    })(obj[functionName]);
  },
  getReactEventHandlersKey: function (element) {
    if (!this.reactEventHandlersKey) {
      if (!element) {
        element = document.getElementById('browser');
      } else if (typeof element === 'string') {
        element = document.querySelector(element);
      }
      if (!element) {
        return;
      }
      this.reactEventHandlersKey = Object.keys(element).find(function (key) {
        return key.startsWith('__reactEventHandlers');
      });
    }
    return this.reactEventHandlersKey;
  }
});

(function () {
  'use strict';

  function getTextNodesIn(elem, opt_fnFilter) {
    var node, textNodes = [],
      walk = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null);
    while (node = walk.nextNode()) {
      if (!opt_fnFilter || opt_fnFilter(node)) {
        textNodes.push(node);
      }
    }
    return textNodes;
  }

  gnoh.override(HTMLDivElement.prototype, 'appendChild', function (element) {
    const key = gnoh.getReactEventHandlersKey(this);

    if (element[key] && element[key].className && element[key].className.indexOf('UrlFragment-Wrapper') > -1) {
      getTextNodesIn(element).forEach(function (item) {
        if (item.parentElement && !item.parentElement.dataset.content) {
          item.parentElement.dataset.content = item.parentElement.textContent;
        }

        item.replaceWith(gnoh.createElement('span', {
          text: item.textContent,
          'data-content': item.textContent
        }));
      });
    }
  });
})();

and this css

/* 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:not([data-content="www."]) {
  color: var(--colorHighlightBg) !important;
  font-weight: bold;
}

[barbudo2005]

@tam710562 Fantastic!! ( I use the Option 2)

Thank you very much.

@sjudenim Thank you for your code in the first place.

[stardepp]

With me, https:// is no longer shown in green for secure websites. How can I have it displayed green again?

[tam710562]

@stardepp I think this css will help you

.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235;
}

[stardepp]

I installed it the way you showed it, but it doesn't work yet. https://forum.vivaldi.net is a very secure website, but it doesn't show green yet.

/*Highlight Active Tab*/
.tab-position .tab.active:not(.tab-group)

{border-top: 2px solid var(--colorHighlightBg) !important;
border-bottom: 2px solid var(--colorHighlightBg) !important;}

/* URL Base-domain  */
.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {
  color: #FFE63B !important;
  font-weight: bold;

.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
  color: #46c235 !important;

[luetage]

@stardepp Why would you post a picture of code? No one can copy that.

[stardepp]

@luetage Sorry, I changed it.

[luetage]

@stardepp You forgot the closing brackets in both of your last statements. You should really set the closing bracket on its own line to be aware of such mistakes. I can see that the only existing closing bracket is in the first statement, but that one doesn’t have an opening bracket. Nothing can work this way.

[A Former User]

@luetage said in Mask for the address bar:

that one doesn’t have an opening bracket

It has—but it’s placed similarly.

[luetage]

@potmeklecbohdan lol, my mistake
@stardepp What kind of editor are you using? Normally you should be made aware of such mistakes.

[stardepp]

@luetage I changed it, it works, but now the yellow color is gone in the base domain.

[luetage]

@stardepp Works for me. Copy and paste this, it’s your code sans errors:

/* URL Base-domain  */
.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {
    color: #FFE63B !important;
    font-weight: bold;
}
.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235 !important;
}

[stardepp]

@luetage I changed it the same way, but unfortunately the basedomain remains white.

/*Highlight Active Tab*/
.tab-position .tab.active:not(.tab-group)
}

{border-top: 2px solid var(--colorHighlightBg) !important;
border-bottom: 2px solid var(--colorHighlightBg) !important;}
}

/* URL Base-domain  */
.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {
    color: #FFE63B !important;
    font-weight: bold;
}
.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235 !important;
}

[luetage]

@stardepp Then you have some other code interfering. Delete the whole content of your custom file and only paste the code I posted, then try again.

And damn, you inserted a closing bracket instead of an opening bracket in your first statement, that may be the reason the rest of the code doesn’t do what you want. Please install a proper text editor.

[stardepp]

I use the Windows Editor. I also have Visual Studio code installed, but so far this program was too complex for me.

[luetage]

@stardepp What’s the Windows editor, Notepad? I don’t have information about this editor and never tried it. VS Code will do what you want, but it’s a bit overkill for simple CSS indeed. The best thing you can do is to learn CSS syntax, e.g.: https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax.

[stardepp]

@luetage ist es besser?

*Highlight Active Tab*/
.tab-position .tab.active:not(.tab-group)
}

border-top: 2px solid var(--colorHighlightBg) !important;
border-bottom: 2px solid var(--colorHighlightBg) !important;
}

/* URL Base-domain  */
.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {
    color: #FFE63B !important;
    font-weight: bold;
}

.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235 !important;
}

[stardepp]

If I omit the code from tam710562

.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235;
}

, all my other .css modifications will work

[luetage]

@stardepp No, it isn’t. You have a closing bracket after your selectors, and then another closing bracket after your declarations. Moreover you are missing a slash in your top comment. I fix it now, because we are spamming this topic with troubleshooting. Try and learn CSS, it’s very helpful in fixing your own mistakes and potentially writing your own modifications. It won’t take long and you will benefit immensely.

/* Highlight Active Tab */
.tab-position .tab.active:not(.tab-group) {
    border-top: 2px solid var(--colorHighlightBg) !important;
    border-bottom: 2px solid var(--colorHighlightBg) !important;
}

I noticed you copied the css into VS Code. But there is no syntax highlighting, because you didn’t save the file as css. Do that and you will see the mistakes.

[stardepp]

But all my .css modifications work without your modification suggestions.