Of note is the CSS has references to "floating label" and "transparent label" but I could not find those anywhere in the code. They are related to https://github.com/go-gitea/gitea/pull/3939, but I think these have long been removed. --------- Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: Giteabot <teabot@gitea.io>tags/v1.22.0-rc0
@@ -835,14 +835,6 @@ input:-webkit-autofill:active, | |||
font-weight: var(--font-weight-normal); | |||
} | |||
.ui.floating.label { | |||
z-index: 10; | |||
} | |||
.ui.transparent.label { | |||
background-color: transparent; | |||
} | |||
/* replace fomantic popover box shadows */ | |||
.ui.dropdown .menu, | |||
.ui.upward.dropdown > .menu, | |||
@@ -877,14 +869,6 @@ input:-webkit-autofill:active, | |||
width: 100%; | |||
} | |||
.ui.dropdown .menu > .item > .floating.label { | |||
z-index: 11; | |||
} | |||
.ui.dropdown .menu .menu > .item > .floating.label { | |||
z-index: 21; | |||
} | |||
.ui.dropdown .menu > .header { | |||
font-size: 0.8em; | |||
} | |||
@@ -1214,44 +1198,11 @@ overflow-menu .ui.label { | |||
margin-top: 1px; | |||
} | |||
.ui.label { | |||
padding: 0.3em 0.5em; | |||
transition: none; | |||
white-space: nowrap; | |||
} | |||
.ui.label, | |||
.ui.menu .item > .label, | |||
.ui.grey.labels .label, | |||
.ui.ui.ui.grey.label { | |||
.ui.menu .item > .label { | |||
background: var(--color-label-bg); | |||
color: var(--color-label-text); | |||
} | |||
.ui.label > a { | |||
opacity: .75; /* increase contrast over default fomantic .5 */ | |||
} | |||
.ui.active.label { | |||
background: var(--color-label-active-bg); | |||
border-color: var(--color-label-active-bg); | |||
color: var(--color-label-text); | |||
} | |||
.ui.labels a.label:hover, | |||
a.ui.label:hover { | |||
background: var(--color-label-hover-bg); | |||
border-color: var(--color-label-hover-bg); | |||
color: var(--color-label-text); | |||
} | |||
.ui.labels a.active.label:hover, | |||
a.ui.active.label:hover { | |||
background: var(--color-label-active-bg); | |||
border-color: var(--color-label-active-bg); | |||
color: var(--color-label-text); | |||
} | |||
.lines-blame-btn { | |||
padding: 0 0 0 5px; | |||
display: flex; | |||
@@ -1417,146 +1368,6 @@ a.ui.active.label:hover { | |||
width: 100%; | |||
} | |||
.ui.primary.label, | |||
.ui.primary.labels .label, | |||
.ui.ui.ui.primary.label { | |||
background-color: var(--color-primary); | |||
border-color: var(--color-primary-dark-2); | |||
} | |||
.ui.basic.labels .primary.label, | |||
.ui.ui.ui.basic.primary.label { | |||
background: transparent; | |||
border-color: var(--color-primary); | |||
color: var(--color-primary); | |||
} | |||
.ui.basic.labels a.primary.label:hover, | |||
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.basic.labels .secondary.label, | |||
.ui.ui.ui.basic.secondary.label { | |||
background: transparent; | |||
border-color: var(--color-secondary); | |||
color: var(--color-secondary); | |||
} | |||
.ui.basic.labels .orange.label, | |||
.ui.ui.ui.basic.orange.label { | |||
background: transparent; | |||
border-color: var(--color-orange); | |||
color: var(--color-orange); | |||
} | |||
.ui.basic.labels .green.label, | |||
.ui.ui.ui.basic.green.label { | |||
background: transparent; | |||
border-color: var(--color-green); | |||
color: var(--color-green); | |||
} | |||
.ui.basic.labels .olive.label, | |||
.ui.ui.ui.basic.olive.label { | |||
background: transparent; | |||
border-color: var(--color-olive); | |||
color: var(--color-olive); | |||
} | |||
.ui.basic.labels .teal.label, | |||
.ui.ui.ui.basic.teal.label { | |||
background: transparent; | |||
border-color: var(--color-teal); | |||
color: var(--color-teal); | |||
} | |||
.ui.basic.labels .blue.label, | |||
.ui.ui.ui.basic.blue.label { | |||
background: transparent; | |||
border-color: var(--color-blue); | |||
color: var(--color-blue); | |||
} | |||
.ui.basic.labels .violet.label, | |||
.ui.ui.ui.basic.violet.label { | |||
background: transparent; | |||
border-color: var(--color-violet); | |||
color: var(--color-violet); | |||
} | |||
.ui.basic.labels .purple.label, | |||
.ui.ui.ui.basic.purple.label { | |||
background: transparent; | |||
border-color: var(--color-purple); | |||
color: var(--color-purple); | |||
} | |||
.ui.basic.labels .pink.label, | |||
.ui.ui.ui.basic.pink.label { | |||
background: transparent; | |||
border-color: var(--color-pink); | |||
color: var(--color-pink); | |||
} | |||
.ui.basic.labels .red.label, | |||
.ui.ui.ui.basic.red.label { | |||
background: transparent; | |||
border-color: var(--color-red); | |||
color: var(--color-red); | |||
} | |||
.ui.basic.labels .brown.label, | |||
.ui.ui.ui.basic.brown.label { | |||
background: transparent; | |||
border-color: var(--color-brown); | |||
color: var(--color-brown); | |||
} | |||
.ui.basic.labels .yellow.label, | |||
.ui.ui.ui.basic.yellow.label { | |||
background: transparent; | |||
border-color: var(--color-yellow); | |||
color: var(--color-yellow); | |||
} | |||
.ui.basic.labels .grey.label, | |||
.ui.ui.ui.basic.grey.label { | |||
background: transparent; | |||
border-color: var(--color-grey); | |||
color: var(--color-grey); | |||
} | |||
.ui.basic.labels .black.label, | |||
.ui.ui.ui.basic.black.label { | |||
background: transparent; | |||
border-color: var(--color-black); | |||
color: var(--color-black); | |||
} | |||
.ui.basic.labels .label, | |||
.ui.basic.label, | |||
.ui.secondary.labels .ui.basic.label { | |||
background: var(--color-button); | |||
border-color: var(--color-light-border); | |||
color: var(--color-text-light); | |||
} | |||
.ui.basic.labels a.label:hover, | |||
a.ui.basic.label:hover { | |||
color: var(--color-text); | |||
border-color: var(--color-light-border); | |||
background: var(--color-hover); | |||
} | |||
.ui.label > img { | |||
width: auto !important; | |||
vertical-align: middle; | |||
height: 2.1666em !important; | |||
} | |||
.migrate .svg.gitea-git { | |||
color: var(--color-git); | |||
} | |||
@@ -1568,10 +1379,6 @@ a.ui.basic.label:hover { | |||
width: 14px; | |||
} | |||
.ui.label > .color-icon { | |||
margin-left: 0; | |||
} | |||
.rss-icon { | |||
display: inline-flex; | |||
color: var(--color-text-light-1); | |||
@@ -1769,7 +1576,6 @@ table th[data-sortt-desc] .svg { | |||
.btn, | |||
.ui.ui.button, | |||
.ui.ui.dropdown, | |||
.ui.ui.label, | |||
.flex-text-inline { | |||
display: inline-flex; | |||
align-items: center; | |||
@@ -1785,10 +1591,6 @@ table th[data-sortt-desc] .svg { | |||
vertical-align: middle; | |||
} | |||
.ui.ui.circular.label { | |||
justify-content: center; | |||
} | |||
.ui.ui.labeled.button { | |||
gap: 0; | |||
align-items: stretch; |
@@ -28,23 +28,6 @@ | |||
width: 75%; | |||
} | |||
.dashboard.feeds .filter.menu .item .floating.label, | |||
.dashboard.issues .filter.menu .item .floating.label { | |||
top: 7px; | |||
left: 90%; | |||
width: 15%; | |||
} | |||
@media (max-width: 767.98px) { | |||
.dashboard.feeds .filter.menu .item .floating.label, | |||
.dashboard.issues .filter.menu .item .floating.label { | |||
top: 10px; | |||
left: auto; | |||
width: auto; | |||
right: 13px; | |||
} | |||
} | |||
/* Sort */ | |||
.dashboard.feeds .filter.menu .jump.item, | |||
.dashboard.issues .filter.menu .jump.item { |
@@ -6,6 +6,7 @@ | |||
@import "./modules/container.css"; | |||
@import "./modules/divider.css"; | |||
@import "./modules/header.css"; | |||
@import "./modules/label.css"; | |||
@import "./modules/segment.css"; | |||
@import "./modules/grid.css"; | |||
@import "./modules/message.css"; |
@@ -0,0 +1,294 @@ | |||
/* 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; | |||
vertical-align: middle; | |||
line-height: 1; | |||
background: var(--color-label-bg); | |||
color: var(--color-label-text); | |||
padding: 0.3em 0.5em; | |||
text-transform: none; | |||
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; | |||
} | |||
.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.olive.label { | |||
background: var(--color-olive); | |||
border-color: var(--color-olive); | |||
color: var(--color-white); | |||
} | |||
.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; | |||
} |
@@ -28,7 +28,6 @@ | |||
"dropdown", | |||
"form", | |||
"input", | |||
"label", | |||
"list", | |||
"menu", | |||
"modal", |