loreddev/gitea
1
0
Fork 0
Code Issues Pull Requests Activity

feat(lored,labels): pass label colors via css variable

Browse Source
This commit is contained in:
Guz
2025-10-07 15:06:13 -03:00
parent ea20ef698d
commit 026bc664e8
2 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
modules/templates/util_render.go
View File

@@ -152,7 +152,7 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
if labelScope == "" {
// Regular label
return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></%s>`,
return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></%s>`,
tagName, tagAttrs, extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name), tagName)
}
@@ -189,8 +189,8 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
if label.ExclusiveOrder > 0 {
// <scope> | <label> | <order>
return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
`<div class="ui label scope-middle" style="color: %s !important; background-color: %s !important">%s</div>`+
`<div class="ui label scope-left" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
`<div class="ui label scope-middle" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
`<div class="ui label scope-right">%d</div>`+
`</%s>`,
tagName, tagAttrs,
@@ -203,8 +203,8 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
// <scope> | <label>
return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
`<div class="ui label scope-right" style="color: %s !important; background-color: %s !important">%s</div>`+
`<div class="ui label scope-left" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
`<div class="ui label scope-right" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
`</%s>`,
tagName, tagAttrs,
extraCSSClasses, descriptionText,

23
web_src/css/modules/label.css
View File

@@ -8,8 +8,8 @@
gap: var(--gap-inline);
min-width: 0;
max-width: 100%;
background: var(--color-label-bg);
color: var(--color-label-text);
background-color: var(--custom-color-label-bg, var(--color-label-bg));
color: var(--custom-color-label-text, var(--color-label-text));
padding: 2px 6px;
font-size: var(--font-size-label);
font-weight: var(--font-weight-medium);
@@ -20,8 +20,19 @@
text-overflow: ellipsis;
}
a.ui.label {
cursor: pointer;
.ui.label.scope-parent .ui.label.scope-left,
.ui.label.scope-parent .ui.label.scope-middle,
.ui.label.scope-parent .ui.label.scope-right {
background-color: var(--custom-color-label-bg, var(--color-label-bg));
color: var(--custom-color-label-text, var(--color-label-text));
}
.ui.menu .item > .label:not(.scope-parent) {
background-color: var(
--custom-color-label-bg,
var(--color-label-bg)
) !important;
color: var(--custom-color-label-text, var(--color-label-text)) !important;
}
.ui.label > a {
@@ -288,7 +299,9 @@ a.ui.ui.ui.basic.grey.label:hover {
If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
.labels-list {
display: contents;
font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
font-size: var(
--font-size-label
); /* it must match the label font size, otherwise the height mismatches */
}
.labels-list a {