Archived lable highglight via linear gradient

[6543]

---

Sponsored by Kithara Software GmbH

[silverwind]

This reduce/increases contrast depending on color. I think it could be made to always increase by adding dark stripes when text is white and light stripes when text is black, but you would likely need a classname to know which variant to apply.

[6543]

will the general concept work? (Yes/NO)

[silverwind]

I'm undecided. Think at least the stripes need to be wider to make an impact on these small lables, maybe 2-3px per stripe.

[silverwind]

Maybe like this:

/* label with black text */
repeating-linear-gradient(-45deg, transparent, transparent 6px, #fff5 6px, #fff5 12px)

/* label with white text */
repeating-linear-gradient(-45deg, transparent, transparent 6px, #0005 6px, #0005 12px)

[silverwind]

So yes, I think it could work. You would need to use the CSS multiple backgrounds feature, and it could either be added as inline style like current color is or with a CSS class like light-text and dark-text and if we go that route, I would also move the current inline style for color to CSS.

background: <color>, <gradient>;

[silverwind]

For testing one could do a very dirty kind of CSS selector:

.archived-label[style^="color: #fff"] {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, #0005 6px, #0005 12px);
}

.archived-label[style^="color: #000"] {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, #fff5 6px, #fff5 12px);
}

[silverwind]

@delvh this is not ready yet 😆.