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 😆.

[6543]

@silverwind updated screnshoot

[lunny]

An archived label should not have a highlight UI. It should be grey or disabled. Maybe a dashed line border is better.

[6543]

I personally am for highlighting ... as:

1. Normaly you dont interact with them
2. They should be easy to spot or at least differentiate
3. we already grey out atm ... but you can not see them easily as archived ... amd completly grey is just another color of lables so thats no good indicator

[lunny]

I personally am for highlighting ... as:

1. Normaly you dont interact with them

2. They should be easy to spot or at least differentiate

3. we already grey out atm ... but you can not see them easily as archived ... amd completly grey is just another color of lables so thats no good indicator

Since it's archived, it should not be highlighted. Isn't it?

[6543]

in this logic we should "highlight" the normal labels ?

[lunny]

in this logic we should "highlight" the normal labels ?

We should not highlight any labels and archived labels should have a special gray color.

[6543]

We should not highlight any labels and archived labels should have a special gray color.

they do ... so it is as is :/

for those who want the patch, just use some custom css:

.archived-label {
  /* we disable upstream highlighting style */
  filter: none !important;
  opacity: 1 !important;
}

/* we applay proposed change of https://github.com/go-gitea/gitea/pull/30376 */
.archived-label[style^="color: #000"],
.archived-label.scope-parent .scope-left[style^="color: #000"],
.archived-label.scope-parent .scope-right[style^="color: #000"] {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(0, 0, 0, 0.2) 6px,
    rgba(0, 0, 0, 0.2) 12px
  );
}
.archived-label[style^="color: #fff"],
.archived-label.scope-parent .scope-left[style^="color: #fff"],
.archived-label.scope-parent .scope-right[style^="color: #fff"] {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(255, 255, 255, 0.3) 6px,
    rgba(255, 255, 255, 0.3) 12px
  );
}

[wxiaoguang]

scope-left[style^="color: #000"] is too tricky.

If you could use a standard class name, and determine it from label render (light or dark), then it could look good to me.