Remove fomantic label module (#30081)

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>

web_src/css/base.css

@@ -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 {
+.ui.menu .item > .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 {
   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;

web_src/css/dashboard.css

@@ -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 {

web_src/css/index.css

@@ -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";

web_src/css/modules/label.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;
+}

web_src/fomantic/semantic.json

@@ -28,7 +28,6 @@
     "dropdown",
     "form",
     "input",
-    "label",
     "list",
     "menu",
     "modal",