mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-06-20 16:10:50 +00:00
75258cfa2a
Some checks are pending
/ release (push) Waiting to run
testing / backend-checks (push) Waiting to run
testing / frontend-checks (push) Waiting to run
testing / test-unit (push) Blocked by required conditions
testing / test-e2e (push) Blocked by required conditions
testing / test-remote-cacher (redis) (push) Blocked by required conditions
testing / test-remote-cacher (valkey) (push) Blocked by required conditions
testing / test-remote-cacher (garnet) (push) Blocked by required conditions
testing / test-remote-cacher (redict) (push) Blocked by required conditions
testing / test-mysql (push) Blocked by required conditions
testing / test-pgsql (push) Blocked by required conditions
testing / test-sqlite (push) Blocked by required conditions
testing / security-check (push) Blocked by required conditions
Careful removal of unused classes and rules from editable CSS. One class was used once in the UI and could have been easily replaced, others were only used in a devtest page. Removed completely: * pink * olive * violet * background Removed partially: * blue Some of them are also present in generated Fomantic code, but it's not possible to remove them easily here. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7898 Reviewed-by: Otto <otto@codeberg.org> Co-authored-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: 0ko <0ko@noreply.codeberg.org>
298 lines
6.5 KiB
CSS
298 lines
6.5 KiB
CSS
/* based on Fomantic UI label module, with just the parts extracted that we use. If you find any
|
|
unused rules here after refactoring, please remove them. */
|
|
|
|
.ui.label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: .25rem;
|
|
min-width: 0;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
background: var(--color-label-bg);
|
|
color: var(--color-label-text);
|
|
padding: 0.3em 0.5em;
|
|
font-size: 0.85714286rem;
|
|
font-weight: var(--font-weight-medium);
|
|
border: 0 solid transparent;
|
|
border-radius: 0.28571429rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ui.label:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.ui.label:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
a.ui.label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui.label > a {
|
|
cursor: pointer;
|
|
color: inherit;
|
|
opacity: 0.75;
|
|
}
|
|
.ui.label > a:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ui.label > img {
|
|
width: auto;
|
|
vertical-align: middle;
|
|
height: 2.1666em;
|
|
}
|
|
|
|
.ui.label > .color-icon {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.ui.label > .icon {
|
|
width: auto;
|
|
margin: 0 0.75em 0 0;
|
|
}
|
|
|
|
.ui.label > .detail {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
font-weight: var(--font-weight-medium);
|
|
margin-left: 1em;
|
|
opacity: 0.8;
|
|
}
|
|
.ui.label > .detail .icon {
|
|
margin: 0 0.25em 0 0;
|
|
}
|
|
|
|
.ui.label > .close.icon,
|
|
.ui.label > .delete.icon {
|
|
cursor: pointer;
|
|
font-size: 0.92857143em;
|
|
opacity: 0.5;
|
|
}
|
|
.ui.label > .close.icon:hover,
|
|
.ui.label > .delete.icon:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ui.label.left.icon > .close.icon,
|
|
.ui.label.left.icon > .delete.icon {
|
|
margin: 0 0.5em 0 0;
|
|
}
|
|
.ui.label:not(.icon) > .close.icon,
|
|
.ui.label:not(.icon) > .delete.icon {
|
|
margin: 0 0 0 0.5em;
|
|
}
|
|
|
|
.ui.header > .ui.label {
|
|
margin-top: -0.29165em;
|
|
}
|
|
|
|
a.ui.label:hover {
|
|
background: var(--color-label-hover-bg);
|
|
border-color: var(--color-label-hover-bg);
|
|
color: var(--color-label-text);
|
|
}
|
|
|
|
.ui.label.visible:not(.dropdown) {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.ugc-labels .item {
|
|
text-overflow: unset !important;
|
|
}
|
|
|
|
.ugc-labels .item .ui.label {
|
|
text-wrap: auto;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ui.basic.label {
|
|
background: var(--color-button);
|
|
border: 1px solid var(--color-light-border);
|
|
color: var(--color-text-light);
|
|
padding: calc(0.5833em - 1px) calc(0.833em - 1px);
|
|
}
|
|
a.ui.basic.label:hover {
|
|
text-decoration: none;
|
|
color: var(--color-text);
|
|
border-color: var(--color-light-border);
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
.ui.ui.ui.primary.label {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary-dark-2);
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
a.ui.ui.ui.primary.label:hover {
|
|
background: var(--color-primary-dark-3);
|
|
border-color: var(--color-primary-dark-3);
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
.ui.ui.ui.basic.primary.label {
|
|
background: transparent;
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
a.ui.ui.ui.basic.primary.label:hover {
|
|
background: var(--color-hover);
|
|
border-color: var(--color-primary-dark-1);
|
|
color: var(--color-primary-dark-1);
|
|
}
|
|
|
|
.ui.ui.ui.red.label {
|
|
background: var(--color-red);
|
|
border-color: var(--color-red);
|
|
color: var(--color-white);
|
|
}
|
|
a.ui.ui.ui.red.label:hover {
|
|
background: var(--color-red-dark-1);
|
|
border-color: var(--color-red-dark-1);
|
|
color: var(--color-white);
|
|
}
|
|
.ui.ui.ui.basic.red.label {
|
|
background: transparent;
|
|
border-color: var(--color-red);
|
|
color: var(--color-red);
|
|
}
|
|
a.ui.ui.ui.basic.red.label:hover {
|
|
background: transparent;
|
|
border-color: var(--color-red-dark-1);
|
|
color: var(--color-red-dark-1);
|
|
}
|
|
|
|
.ui.ui.ui.orange.label {
|
|
background: var(--color-orange);
|
|
border-color: var(--color-orange);
|
|
color: var(--color-white);
|
|
}
|
|
a.ui.ui.ui.orange.label:hover {
|
|
background: var(--color-orange-dark-1);
|
|
border-color: var(--color-orange-dark-1);
|
|
color: var(--color-white);
|
|
}
|
|
.ui.ui.ui.basic.orange.label {
|
|
background: transparent;
|
|
border-color: var(--color-orange);
|
|
color: var(--color-orange);
|
|
}
|
|
a.ui.ui.ui.basic.orange.label:hover {
|
|
background: transparent;
|
|
border-color: var(--color-orange-dark-1);
|
|
color: var(--color-orange-dark-1);
|
|
}
|
|
|
|
.ui.ui.ui.yellow.label {
|
|
background: var(--color-yellow);
|
|
border-color: var(--color-yellow);
|
|
color: var(--color-white);
|
|
}
|
|
a.ui.ui.ui.yellow.label:hover {
|
|
background: var(--color-yellow-dark-1);
|
|
border-color: var(--color-yellow-dark-1);
|
|
color: var(--color-white);
|
|
}
|
|
.ui.ui.ui.basic.yellow.label {
|
|
background: transparent;
|
|
border-color: var(--color-yellow);
|
|
color: var(--color-yellow);
|
|
}
|
|
a.ui.ui.ui.basic.yellow.label:hover {
|
|
background: transparent;
|
|
border-color: var(--color-yellow-dark-1);
|
|
color: var(--color-yellow-dark-1);
|
|
}
|
|
|
|
.ui.ui.ui.green.label {
|
|
background: var(--color-green);
|
|
border-color: var(--color-green);
|
|
color: var(--color-white);
|
|
}
|
|
a.ui.ui.ui.green.label:hover {
|
|
background: var(--color-green-dark-1);
|
|
border-color: var(--color-green-dark-1);
|
|
color: var(--color-white);
|
|
}
|
|
.ui.ui.ui.basic.green.label {
|
|
background: transparent;
|
|
border-color: var(--color-green);
|
|
color: var(--color-green);
|
|
}
|
|
a.ui.ui.ui.basic.green.label:hover {
|
|
background: transparent;
|
|
border-color: var(--color-green-dark-1);
|
|
color: var(--color-green-dark-1);
|
|
}
|
|
|
|
.ui.ui.ui.purple.label {
|
|
background: var(--color-purple);
|
|
border-color: var(--color-purple);
|
|
color: var(--color-white);
|
|
}
|
|
a.ui.ui.ui.purple.label:hover {
|
|
background: var(--color-purple-dark-1);
|
|
border-color: var(--color-purple-dark-1);
|
|
color: var(--color-white);
|
|
}
|
|
.ui.ui.ui.basic.purple.label {
|
|
background: transparent;
|
|
border-color: var(--color-purple);
|
|
color: var(--color-purple);
|
|
}
|
|
a.ui.ui.ui.basic.purple.label:hover {
|
|
background: transparent;
|
|
border-color: var(--color-purple-dark-1);
|
|
color: var(--color-purple-dark-1);
|
|
}
|
|
|
|
.ui.ui.ui.grey.label {
|
|
background: var(--color-label-bg);
|
|
border-color: var(--color-label-bg);
|
|
color: var(--color-label-text);
|
|
}
|
|
a.ui.ui.ui.grey.label:hover {
|
|
background: var(--color-label-hover-bg);
|
|
border-color: var(--color-label-hover-bg);
|
|
color: var(--color-white);
|
|
}
|
|
.ui.ui.ui.basic.grey.label {
|
|
background: transparent;
|
|
border-color: var(--color-label-bg);
|
|
color: var(--color-label-text);
|
|
}
|
|
a.ui.ui.ui.basic.grey.label:hover {
|
|
background: transparent;
|
|
border-color: var(--color-label-hover-bg);
|
|
color: var(--color-label-hover-bg);
|
|
}
|
|
|
|
.ui.horizontal.label {
|
|
margin: 0 0.5em 0 0;
|
|
padding: 0.4em 0.833em;
|
|
min-width: 3em;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui.circular.label {
|
|
min-width: 2em;
|
|
min-height: 2em;
|
|
padding: 0.5em !important;
|
|
line-height: 1;
|
|
text-align: center;
|
|
border-radius: 500rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ui.mini.label {
|
|
font-size: 0.64285714rem;
|
|
}
|
|
.ui.tiny.label {
|
|
font-size: 0.71428571rem;
|
|
}
|
|
.ui.small.label {
|
|
font-size: 0.78571429rem;
|
|
}
|
|
.ui.large.label {
|
|
font-size: 1rem;
|
|
}
|