Mask for the address bar

tam710562

I just fix some css for the mod in version 3.4.2038.4. May be develop new mod on the new tags of Vivaldi is the better option, but I'm too lazy to do it

embryo626

@tam710562 The mod is working again,thank you,but https is not green in V3.3,Is there something missing？

tam710562

@embryo626 said in Mask for the address bar:

@tam710562 The mod is working again,thank you,but https is not green in V3.3,Is there something missing？

This bug has been fixed :face_savouring_delicious_food:

embryo626

@tam710562 thanks again,especially for your speed

sjudenim

@barbudo2005 said in Mask for the address bar:

@sjudenim Is possible not to consider "www." as part of the subdomain?

Yes, you just move this .UrlFragment--Lowlight:first-of-type from the URL colour to to the URL Sub-domain

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

barbudo2005

@sjudenim

If I use this code:

/* 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;
}

I get this:

And this:

If I move .UrlFragment--Lowlight:first-of-type from the URL colour to to the URL Sub-domain, the code results:

/* URL colour */
.UrlFragment-Wrapper { 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, .UrlFragment--Lowlight:first-of-type

 {
  color: var(--colorHighlightBg) !important;
  font-weight: bold;
}

I get :

And this:

So I think I didn't explain myself well. I want "www." looks like "https" like in this image:

sjudenim

@barbudo2005

I don't know that you can do it like that in just css. If you look at this image you will notice (in Dev Tools) that www is considered Subdomain

barbudo2005

@sjudenim Ok. Thank you.

barbudo2005

@tam710562

Could you write a JS to make "www." looks like "https://" in the code of @sjudenim :

/* 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;
}

Thank you very much in advance.

matustokar

This post is deleted!

Pathduck

@barbudo2005 You don't need JS to do that.
Just set to color of HostFragment-Subdomain to var(--colorFgFaded) and remove the font-weight.

tam710562

@barbudo2005 said in Mask for the address bar:

@tam710562

Could you write a JS to make "www." looks like "https://" in the code of @sjudenim :

/* 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;
}

Thank you very much in advance.

I do not understand what you want. Can you give me more information?

stardepp

I have changed my address bar like this

2020-09-19 08_35_57-Maske für die Adressleiste _ Vivaldi Forum - Vivaldi.png

A Former User

@tam710562 If I understand correctly, they want the www look like https://, i.e. (from a quick look at the OP) [data-host-sub="www"] in the CSS could be enough.

barbudo2005

@tam710562

With the code of @sjudenim the subdomain has different color than the domain like this:

But when a URL have "www." like the subdomain then I want that "www." looks like "https://", because there is no sense to highlight it, like in this case:

So what @potmeklecbohdan said is to exclude "www." from this selector: .UrlFragment-HostFragment-Subdomain

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

Something like :

.UrlFragment-HostFragment-Subdomain:not([data-host-sub="www."])

A Former User

@barbudo2005 Well, this selector won’t work with the Vivaldi way, there’s no data-*. I neither use this mod nor follow the changes, so I only had a quick look at the tree in the first post.

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?

2020-09-19 08_35_57-Maske für die Adressleiste _ Vivaldi Forum - Vivaldi.png

tam710562

@stardepp I think this css will help you

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