Spyke

Posts

FirefoxCSS·Firefox Customsbyhansman

Browser toolbox, info popup hidden behind ... popup

This one has been driving me crazy for ages...

When I use the Browser Toolbox - with the option Disable popup auto-hidebeing checked - and I hover over or select an element in the inspector , the info panels/tooltips that are usually displayed above and/or in front of the targeted/selected elements are covered by the open popups.

Also, the selected UI popup parts are not highlighted as they would be for other bits, there's only that dotted grid visible - again partially hidden - that gives you a general idea of what you are looking at.

This is on MacOs/Fx 115esr; I understand the issue is the same on Windows.

I've tried lots of css and javascript codes to find a way to target that thing, but to no avail.

The Fx popups in general have a silly high z-index, so that might be part of the issue; I'm wondering if there's any way to fix that.

Screenshot below.

View original on fedia.io
1
FirefoxCSS·Firefox Customsbyhansman

Curved tabs project, overflow issues

I've been playing around with a little CSS code for curved tabs recently, inspired by this style by MrOtherGuy.

It seems to work reasonbly well so far - still a work in progress - but one issue I just can't figure out - when the tabs are overflowing, the additional bottom corners I created for the outer tabs are cut off, unless they are the very first or last tab (which are taken care of).

I've tried every selector and element in this area, to change the cutoff/clipping points of these outer visible tabs in overflow, or the width/padding etc. of the scrollbox "window", but to no avail.

Any ideas would be much appreciated.

The code can be found here, a screenshot is attached showing the issue.

I hope the .svg code in the CSS file works, if not this is it:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 32 32">

  <path d="M0 33 L3 32.5 A16 16 0 0 0 15.5 16 L 16 16 L 16 33 Z" fill="context-fill"/>

  <path d="M3 32.5 A16 16 0 0 0 15.5 16" fill="rgba(155,122,0,0)" stroke="context-stroke" stroke-width="1px"/>

  <path d="M0 16 L16 16 A15.5 15.5 0 0 1 32 0 L 32 0 L 32 16 Z" fill="rgba(155,122,0,0)"/>

  <path d="M15.5 16 A18.5 18 0 0 1 35.5 -0.5" fill="transparent" stroke="context-stroke" stroke-width="1" />
</svg>

View original on fedia.io
3

You reached the end