Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3

[Thot]

@HalleAndert Doesn’t work for me, otherwise thanks for this mod.
By the way, why was the dropdown arrow beeing taken away?

[HalleAndert]

@thot: Here you go. On which operating system does it not work? When I have more details I will work on a solution.

[Thot]

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

On which operating system does it not work?

macOS

Would be awesome if it could work.

[HalleAndert]

@Thot Many thanks for the information. I will look at the problem later and work on a solution.

[HalleAndert]

@HalleAndert @Thot Since my first solution to restore the down arrow does not work for everyone, I have been working on a new solution and hope that it will now work for everyone. I have also defined some parameters with which you can easily adjust the size and positioning of the arrow.

/* Address field drop down arrow */
.UrlBar-AddressField:has(.toolbar:empty) {
  --_arrow-size: .36rem;
  --_arrow-offset-x: 0rem;
  --_arrow-offset-y: 0rem;
  --_arrow-transform-origin-offset-y: .05rem;

  .observer {
    &::after {
      content: "";
      position: absolute;
      right: calc((var(--_arrow-size, .36rem) - var(--_arrow-offset-x, 0rem)) * 2);
      top: calc(50% - (var(--_arrow-size, .36rem) + var(--_arrow-offset-y, 0rem)) / 2);
      border: var(--_arrow-size, .35rem) solid transparent;
      border-top-color: inherit;
      transition: 250ms ease-in-out;
      transform-origin: center calc((var(--_arrow-size, .36rem) - var(--_arrow-transform-origin-offset-y, .05rem)) / 2);
      opacity: .4;
    }

    &:has(.OmniDropdown) {
      &::after {
        opacity: .75;
        transform: rotateZ(180deg);
      }
    }
  }
}

[HalleAndert]

@saudiqbal: Have you tried my mod to restore the dropdown arrow?

[Thot]

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

/* Address field drop down arrow */
.UrlBar-AddressField:has(.toolbar:empty) {
--_arrow-size: .36rem;
--_arrow-offset-x: 0rem;
--_arrow-offset-y: 0rem;
--_arrow-transform-origin-offset-y: .05rem;

.observer {
&::after {
content: "";
position: absolute;
right: calc((var(--_arrow-size, .36rem) - var(--_arrow-offset-x, 0rem)) * 2);
top: calc(50% - (var(--_arrow-size, .36rem) + var(--_arrow-offset-y, 0rem)) / 2);
border: var(--_arrow-size, .35rem) solid transparent;
border-top-color: inherit;
transition: 250ms ease-in-out;
transform-origin: center calc((var(--_arrow-size, .36rem) - var(--_arrow-transform-origin-offset-y, .05rem)) / 2);
opacity: .4;
}

&:has(.OmniDropdown) {
  &::after {
    opacity: .75;
    transform: rotateZ(180deg);
  }
}

}
}
Antworten

Still not working. Those curly brackets, the last two ones, seem to be going nowhere. I mean they have no counterbracket. In my case they are shown in red.

[HalleAndert]

@Thot Your browser does not seem to support nested CSS. I will provide a version for older browsers.

[Thot]

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

Your browser does not seem to support nested CSS.

My Browser is Vivaldi.

[HalleAndert]

@HalleAndert You are absolutely right. Please try this version:

/* Address field drop down arrow */
.UrlBar-AddressField:has(.toolbar:empty) .observer::after {
  --_arrow-size: .36rem;
  --_arrow-offset-x: 0rem;
  --_arrow-offset-y: 0rem;
  --_arrow-transform-origin-offset-y: .05rem;

  content: "";
  position: absolute;
  right: calc((var(--_arrow-size, .36rem) - var(--_arrow-offset-x, 0rem)) * 2);
  top: calc(50% - (var(--_arrow-size, .36rem) + var(--_arrow-offset-y, 0rem)) / 2);
  border: var(--_arrow-size, .35rem) solid transparent;
  border-top-color: inherit;
  transition: 250ms ease-in-out;
  transform-origin: center calc((var(--_arrow-size, .36rem) - var(--_arrow-transform-origin-offset-y, .05rem)) / 2);
  opacity: .4;
}

.UrlBar-AddressField:has(.toolbar:empty) .observer:has(.OmniDropdown)::after {
  opacity: .75;
  transform: rotateZ(180deg);
}

[Thot]

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

@HalleAndert You are absolutely right. Please try this version:

/* Address field drop down arrow */
.UrlBar-AddressField:has(.toolbar:empty) .observer::after {
  --_arrow-size: .36rem;
  --_arrow-offset-x: 0rem;
  --_arrow-offset-y: 0rem;
  --_arrow-transform-origin-offset-y: .05rem;

  content: "";
  position: absolute;
  right: calc((var(--_arrow-size, .36rem) - var(--_arrow-offset-x, 0rem)) * 2);
  top: calc(50% - (var(--_arrow-size, .36rem) + var(--_arrow-offset-y, 0rem)) / 2);
  border: var(--_arrow-size, .35rem) solid transparent;
  border-top-color: inherit;
  transition: 250ms ease-in-out;
  transform-origin: center calc((var(--_arrow-size, .36rem) - var(--_arrow-transform-origin-offset-y, .05rem)) / 2);
  opacity: .4;
}

.UrlBar-AddressField:has(.toolbar:empty) .observer:has(.OmniDropdown)::after {
  opacity: .75;
  transform: rotateZ(180deg);
}

No. Don't do any more work just because of me. I'm happy if it works for others.

[HalleAndert]

@Thot I'm sorry that none of the solutions work for you. Have you activated “Allow CSS modifications” in the experimental settings in Vivaldi?

[Thot]

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

Have you activated “Allow CSS modifications” in the experimental settings in Vivaldi?

Sure. I don’t no whats wrong either, why my Browser is not catching up my css with this mod. Other ccs-Mods are working fine.

[HalleAndert]

@Thot That's strange, because everything works perfectly on my Windows computer. Unfortunately, I don't have the opportunity to test the code on macOS at the moment. Maybe you can have the code checked again by KI.

[Thot]

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

Maybe you can have the code checked again by KI.

You have more knowledge than me. This throws AI out:

GPT-4o mini

Your CSS code appears to be using some advanced features, including the :has() pseudo-class and CSS custom properties (variables). Here are a few points to consider regarding potential issues or improvements:

Browser Support: The :has() pseudo-class is not supported in all browsers. As of my last knowledge update in October 2023, it is supported in modern browsers like Chrome and Safari, but not in Firefox. If you need to support older browsers or Firefox, consider alternative approaches.

Variable Fallbacks: You are using var(--_arrow-size, .36rem) and similar constructs. The fallback values (like .36rem) are only used if the variable is not defined. Ensure that you want these fallbacks, as they may not be necessary if you always define the variables.

Positioning: The position: absolute; property in the .observer::after selector means that the element will be positioned relative to the nearest positioned ancestor. Make sure that the parent element has a position property set (like relative, absolute, or fixed) to ensure the arrow is positioned correctly.
CSS Specificity: If the styles are not applying as expected, check for specificity issues. Ensure that there are no other conflicting styles that might override these rules.

Performance: Using :has() can have performance implications, especially if used in a large DOM. Use it judiciously.
Debugging: If the styles are not rendering as expected, use browser developer tools to inspect the elements and see if the styles are being applied correctly. Look for any overridden styles or issues in the computed styles.

Syntax: The syntax looks correct, but ensure that your CSS preprocessor (if you're using one) supports the nesting syntax you are using (like SCSS or LESS).

[HalleAndert]

@Thot Just for context: I am a professional lead developer and also work a lot with CSS professionally.

Back to the actual topic.
The other mods can cause problems. To prevent problems, I initially chose the nested CSS approach. You could try positioning the parent element relatively.

.UrlBar-AddressField:has(.toolbar:empty) .observer {
	position: relative;
}

[Thot]

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

@Thot Just for context: I am a professional lead developer and also work a lot with CSS professionally.

Back to the actual topic.
The other mods can cause problems. To prevent problems, I initially chose the nested CSS approach. You could try positioning the parent element relatively.

.UrlBar-AddressField:has(.toolbar:empty) .observer {
	position: relative;
}

And what to put under this?

Edit: Tried diffeernt modifications. Have no clou.

[HalleAndert]

@Thot Here is the complete code:

/* Address field drop down arrow */
.UrlBar-AddressField:has(.toolbar:empty) .observer {
  position: relative;
}

.UrlBar-AddressField:has(.toolbar:empty) .observer:after {
  --_arrow-size: .36rem;
  --_arrow-offset-x: 0rem;
  --_arrow-offset-y: 0rem;
  --_arrow-transform-origin-offset-y: .05rem;

  content: "";
  position: absolute;
  right: calc((var(--_arrow-size, .36rem) - var(--_arrow-offset-x, 0rem)) * 2);
  top: calc(50% - (var(--_arrow-size, .36rem) + var(--_arrow-offset-y, 0rem)) / 2);
  border: var(--_arrow-size, .35rem) solid transparent;
  border-top-color: inherit;
  transition: 250ms ease-in-out;
  transform-origin: center calc((var(--_arrow-size, .36rem) - var(--_arrow-transform-origin-offset-y, .05rem)) / 2);
  opacity: .4;
}

.UrlBar-AddressField:has(.toolbar:empty) .observer:has(.OmniDropdown):after {
  opacity: .75;
  transform: rotateZ(180deg);
}

[Thot]

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

@Thot Here is the complete code:

No. I even deleted my other mods for this. Sorry no. Never mind, thank you for everything.

[HalleAndert]

@Thot With pleasure. I'm very sorry it's not working for you. I hope that the arrow will be included natively in a future update. Have a nice evening.