From d6a639c4de68e626289d5849fc65f1b847c4571c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 25 Mar 2024 21:52:04 +0100
Subject: [PATCH 01/14] Remove fomantic label module

---
 web_src/css/base.css                |  200 +----
 web_src/css/dashboard.css           |   17 -
 web_src/css/index.css               |    1 +
 web_src/css/modules/label.css       |  568 ++++++++++++++
 web_src/fomantic/build/semantic.css | 1114 ---------------------------
 web_src/fomantic/semantic.json      |    1 -
 6 files changed, 570 insertions(+), 1331 deletions(-)
 create mode 100644 web_src/css/modules/label.css

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 7431f1dbd1813..07f15cac2b33c 100644
--- a/web_src/css/base.css
+++ b/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 {
-  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;
diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index e50f1abf42c42..d61e0c1cf2908 100644
--- a/web_src/css/dashboard.css
+++ b/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 {
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 74b5617e1c090..aa3f6ac48e621 100644
--- a/web_src/css/index.css
+++ b/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";
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
new file mode 100644
index 0000000000000..361b43932fbf8
--- /dev/null
+++ b/web_src/css/modules/label.css
@@ -0,0 +1,568 @@
+.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-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.labels > .label {
+  margin: 0 0.5em 0.5em 0;
+}
+
+.ui.header > .ui.label {
+  margin-top: -0.29165em;
+}
+
+.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.active.label {
+  background: var(--color-label-active-bg);
+  border-color: var(--color-label-active-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);
+}
+
+.ui.labels.visible .label,
+.ui.label.visible:not(.dropdown) {
+  display: inline-block !important;
+}
+
+.ui.basic.labels .label,
+.ui.basic.label {
+  background: var(--color-button);
+  border: 1px solid var(--color-light-border);
+  color: var(--color-text-light);
+  padding-top: calc(0.5833em - 1px);
+  padding-bottom: calc(0.5833em - 1px);
+  padding-right: calc(0.833em - 1px);
+}
+.ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label,
+.ui.basic.label:not(.tag):not(.image):not(.ribbon) {
+  padding-left: calc(0.833em - 1px);
+}
+
+.ui.basic.labels a.label:hover,
+a.ui.basic.label:hover {
+  text-decoration: none;
+  color: var(--color-text);
+  border-color: var(--color-light-border);
+  background: var(--color-hover);
+}
+
+.ui.primary.labels .label,
+.ui.ui.ui.primary.label {
+  background: var(--color-primary);
+  border-color: var(--color-primary-dark-2);
+  color: var(--color-primary-contrast);
+}
+
+.ui.primary.labels a.label:hover,
+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.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.secondary.labels .label,
+.ui.ui.ui.secondary.label {
+  background: var(--color-button);
+  border-color: var(--color-light-border);
+  color: var(--color-text-light);
+}
+
+.ui.basic.labels .secondary.label,
+.ui.ui.ui.basic.secondary.label {
+  background: transparent;
+  border-color: var(--color-secondary);
+  color: var(--color-secondary);
+}
+
+.ui.red.labels .label,
+.ui.ui.ui.red.label {
+  background: var(--color-red);
+  border-color: var(--color-red);
+  color: var(--color-white);
+}
+
+.ui.red.labels a.label:hover,
+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.basic.labels .red.label,
+.ui.ui.ui.basic.red.label {
+  background: transparent;
+  border-color: var(--color-red);
+  color: var(--color-red);
+}
+.ui.basic.labels a.red.label:hover,
+a.ui.ui.ui.basic.red.label:hover {
+  background: transparent;
+  border-color: var(--color-red-dark-1);
+  color: var(--color-red-dark-1);
+}
+.ui.orange.labels .label,
+.ui.ui.ui.orange.label {
+  background: var(--color-orange);
+  border-color: var(--color-orange);
+  color: var(--color-white);
+}
+
+.ui.orange.labels a.label:hover,
+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.basic.labels .orange.label,
+.ui.ui.ui.basic.orange.label {
+  background: transparent;
+  border-color: var(--color-orange);
+  color: var(--color-orange);
+}
+.ui.basic.labels a.orange.label:hover,
+a.ui.ui.ui.basic.orange.label:hover {
+  background: transparent;
+  border-color: var(--color-orange-dark-1);
+  color: var(--color-orange-dark-1);
+}
+.ui.yellow.labels .label,
+.ui.ui.ui.yellow.label {
+  background: var(--color-yellow);
+  border-color: var(--color-yellow);
+  color: var(--color-white);
+}
+
+.ui.yellow.labels a.label:hover,
+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.basic.labels .yellow.label,
+.ui.ui.ui.basic.yellow.label {
+  background: transparent;
+  border-color: var(--color-yellow);
+  color: var(--color-yellow);
+}
+.ui.basic.labels a.yellow.label:hover,
+a.ui.ui.ui.basic.yellow.label:hover {
+  background: transparent;
+  border-color: var(--color-yellow-dark-1);
+  color: var(--color-yellow-dark-1);
+}
+.ui.olive.labels .label,
+.ui.ui.ui.olive.label {
+  background: var(--color-olive);
+  border-color: var(--color-olive);
+  color: var(--color-white);
+}
+
+.ui.olive.labels a.label:hover,
+a.ui.ui.ui.olive.label:hover {
+  background: var(--color-olive-dark-1);
+  border-color: var(--color-olive-dark-1);
+  color: var(--color-white);
+}
+
+.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 a.olive.label:hover,
+a.ui.ui.ui.basic.olive.label:hover {
+  background: transparent;
+  border-color: var(--color-olive-dark-1);
+  color: var(--color-olive-dark-1);
+}
+.ui.green.labels .label,
+.ui.ui.ui.green.label {
+  background: var(--color-green);
+  border-color: var(--color-green);
+  color: var(--color-white);
+}
+
+.ui.green.labels a.label:hover,
+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.basic.labels .green.label,
+.ui.ui.ui.basic.green.label {
+  background: transparent;
+  border-color: var(--color-green);
+  color: var(--color-green);
+}
+.ui.basic.labels a.green.label:hover,
+a.ui.ui.ui.basic.green.label:hover {
+  background: transparent;
+  border-color: var(--color-green-dark-1);
+  color: var(--color-green-dark-1);
+}
+.ui.teal.labels .label,
+.ui.ui.ui.teal.label {
+  background: var(--color-teal);
+  border-color: var(--color-teal);
+  color: var(--color-white);
+}
+
+.ui.teal.labels a.label:hover,
+a.ui.ui.ui.teal.label:hover {
+  background: var(--color-teal-dark-1);
+  border-color: var(--color-teal-dark-1);
+  color: var(--color-white);
+}
+
+.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 a.teal.label:hover,
+a.ui.ui.ui.basic.teal.label:hover {
+  background: transparent;
+  border-color: var(--color-teal-dark-1);
+  color: var(--color-teal-dark-1);
+}
+.ui.blue.labels .label,
+.ui.ui.ui.blue.label {
+  background: var(--color-blue);
+  border-color: var(--color-blue);
+  color: var(--color-white);
+}
+
+.ui.blue.labels a.label:hover,
+a.ui.ui.ui.blue.label:hover {
+  background: var(--color-blue-dark-1);
+  border-color: var(--color-blue-dark-1);
+  color: var(--color-white);
+}
+
+.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 a.blue.label:hover,
+a.ui.ui.ui.basic.blue.label:hover {
+  background: transparent;
+  border-color: var(--color-blue-dark-1);
+  color: var(--color-blue-dark-1);
+}
+.ui.violet.labels .label,
+.ui.ui.ui.violet.label {
+  background: var(--color-blue-violet);
+  border-color: var(--color-blue-violet);
+  color: var(--color-white);
+}
+
+.ui.violet.labels a.label:hover,
+a.ui.ui.ui.violet.label:hover {
+  background: var(--color-blue-violet-dark-1);
+  border-color: var(--color-blue-violet-dark-1);
+  color: var(--color-white);
+}
+
+.ui.basic.labels .violet.label,
+.ui.ui.ui.basic.violet.label {
+  background: transparent;
+  border-color: var(--color-blue-violet);
+  color: var(--color-blue-violet);
+}
+.ui.basic.labels a.violet.label:hover,
+a.ui.ui.ui.basic.violet.label:hover {
+  background: transparent;
+  border-color: var(--color-blue-violet-dark-1);
+  color: var(--color-blue-violet-dark-1);
+}
+.ui.purple.labels .label,
+.ui.ui.ui.purple.label {
+  background: var(--color-purple);
+  border-color: var(--color-purple);
+  color: var(--color-white);
+}
+
+.ui.purple.labels a.label:hover,
+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.basic.labels .purple.label,
+.ui.ui.ui.basic.purple.label {
+  background: transparent;
+  border-color: var(--color-purple);
+  color: var(--color-purple);
+}
+.ui.basic.labels a.purple.label:hover,
+a.ui.ui.ui.basic.purple.label:hover {
+  background: transparent;
+  border-color: var(--color-purple-dark-1);
+  color: var(--color-purple-dark-1);
+}
+.ui.pink.labels .label,
+.ui.ui.ui.pink.label {
+  background: var(--color-pink);
+  border-color: var(--color-pink);
+  color: var(--color-white);
+}
+
+.ui.pink.labels a.label:hover,
+a.ui.ui.ui.pink.label:hover {
+  background: var(--color-pink-dark-1);
+  border-color: var(--color-pink-dark-1);
+  color: var(--color-white);
+}
+
+.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 a.pink.label:hover,
+a.ui.ui.ui.basic.pink.label:hover {
+  background: transparent;
+  border-color: var(--color-pink-dark-1);
+  color: var(--color-pink-dark-1);
+}
+.ui.brown.labels .label,
+.ui.ui.ui.brown.label {
+  background: var(--color-brown);
+  border-color: var(--color-brown);
+  color: var(--color-white);
+}
+
+.ui.brown.labels a.label:hover,
+a.ui.ui.ui.brown.label:hover {
+  background: var(--color-brown-dark-1);
+  border-color: var(--color-brown-dark-1);
+  color: var(--color-white);
+}
+
+.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 a.brown.label:hover,
+a.ui.ui.ui.basic.brown.label:hover {
+  background: transparent;
+  border-color: var(--color-brown-dark-1);
+  color: var(--color-brown-dark-1);
+}
+.ui.grey.labels .label,
+.ui.ui.ui.grey.label {
+  background: var(--color-label-bg);
+  border-color: var(--color-label-bg);
+  color: var(--color-label-text);
+}
+
+.ui.grey.labels a.label:hover,
+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.basic.labels .grey.label,
+.ui.ui.ui.basic.grey.label {
+  background: transparent;
+  border-color: var(--color-label-bg);
+  color: var(--color-label-text);
+}
+.ui.basic.labels a.grey.label:hover,
+a.ui.ui.ui.basic.grey.label:hover {
+  background: transparent;
+  border-color: var(--color-label-hover-bg);
+  color: var(--color-label-hover-bg);
+}
+.ui.black.labels .label,
+.ui.ui.ui.black.label {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.ui.black.labels a.label:hover,
+a.ui.ui.ui.black.label:hover {
+  background: var(--color-black-dark-1);
+  border-color: var(--color-black-dark-1);
+  color: var(--color-white);
+}
+
+.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 a.black.label:hover,
+a.ui.ui.ui.basic.black.label:hover {
+  background: transparent;
+  border-color: var(--color-black-dark-1);
+  color: var(--color-black-dark-1);
+}
+
+.ui.horizontal.labels .label,
+.ui.horizontal.label {
+  margin: 0 0.5em 0 0;
+  padding: 0.4em 0.833em;
+  min-width: 3em;
+  text-align: center;
+}
+
+.ui.circular.labels .label,
+.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.labels .label,
+.ui.label {
+  font-size: 0.85714286rem;
+}
+.ui.mini.labels .label,
+.ui.mini.label {
+  font-size: 0.64285714rem;
+}
+.ui.tiny.labels .label,
+.ui.tiny.label {
+  font-size: 0.71428571rem;
+}
+.ui.small.labels .label,
+.ui.small.label {
+  font-size: 0.78571429rem;
+}
+.ui.large.labels .label,
+.ui.large.label {
+  font-size: 1rem;
+}
+.ui.big.labels .label,
+.ui.big.label {
+  font-size: 1.28571429rem;
+}
+.ui.huge.labels .label,
+.ui.huge.label {
+  font-size: 1.42857143rem;
+}
+.ui.massive.labels .label,
+.ui.massive.label {
+  font-size: 1.71428571rem;
+}
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 05a3387563a0c..21c41a61616ab 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -7927,1120 +7927,6 @@ select.ui.dropdown {
          Theme Overrides
 *******************************/
 
-/*******************************
-         Site Overrides
-*******************************/
-/*!
- * # Fomantic-UI - Label
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Label
-*******************************/
-
-.ui.label {
-  display: inline-block;
-  line-height: 1;
-  vertical-align: baseline;
-  margin: 0 0.14285714em;
-  background-color: #E8E8E8;
-  background-image: none;
-  padding: 0.5833em 0.833em;
-  color: rgba(0, 0, 0, 0.6);
-  text-transform: none;
-  font-weight: 500;
-  border: 0 solid transparent;
-  border-radius: 0.28571429rem;
-  transition: background 0.1s ease;
-}
-
-.ui.label:first-child {
-  margin-left: 0;
-}
-
-.ui.label:last-child {
-  margin-right: 0;
-}
-
-/* Link */
-
-a.ui.label {
-  cursor: pointer;
-}
-
-/* Inside Link */
-
-.ui.label > a {
-  cursor: pointer;
-  color: inherit;
-  opacity: 0.5;
-  transition: 0.1s opacity ease;
-}
-
-.ui.label > a:hover {
-  opacity: 1;
-}
-
-/* Image */
-
-.ui.label > img {
-  width: auto !important;
-  vertical-align: middle;
-  height: 2.1666em;
-}
-
-/* Icon */
-
-.ui.left.icon.label > .icon,
-.ui.label > .icon {
-  width: auto;
-  margin: 0 0.75em 0 0;
-}
-
-/* Detail */
-
-.ui.label > .detail {
-  display: inline-block;
-  vertical-align: top;
-  font-weight: 500;
-  margin-left: 1em;
-  opacity: 0.8;
-}
-
-.ui.label > .detail .icon {
-  margin: 0 0.25em 0 0;
-}
-
-/* Removable label */
-
-.ui.label > .close.icon,
-.ui.label > .delete.icon {
-  cursor: pointer;
-  font-size: 0.92857143em;
-  opacity: 0.5;
-  transition: background 0.1s ease;
-}
-
-.ui.label > .close.icon:hover,
-.ui.label > .delete.icon:hover {
-  opacity: 1;
-}
-
-/* Backward compatible positioning */
-
-.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;
-}
-
-/* Label for only an icon */
-
-.ui.icon.label > .icon {
-  margin: 0 auto;
-}
-
-/* Right Side Icon */
-
-.ui.right.icon.label > .icon {
-  margin: 0 0 0 0.75em;
-}
-
-/*-------------------
-       Group
---------------------*/
-
-.ui.labels > .label {
-  margin: 0 0.5em 0.5em 0;
-}
-
-/*-------------------
-       Coupling
---------------------*/
-
-.ui.header > .ui.label {
-  margin-top: -0.29165em;
-}
-
-/* Remove border radius on attached segment */
-
-.ui.attached.segment > .ui.top.left.attached.label,
-.ui.bottom.attached.segment > .ui.top.left.attached.label {
-  border-top-left-radius: 0;
-}
-
-.ui.attached.segment > .ui.top.right.attached.label,
-.ui.bottom.attached.segment > .ui.top.right.attached.label {
-  border-top-right-radius: 0;
-}
-
-.ui.top.attached.segment > .ui.bottom.left.attached.label {
-  border-bottom-left-radius: 0;
-}
-
-.ui.top.attached.segment > .ui.bottom.right.attached.label {
-  border-bottom-right-radius: 0;
-}
-
-/* Padding on next content after a label */
-
-.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached),
-.ui.top.attached.label + :not(.attached) {
-  margin-top: 2rem !important;
-}
-
-.ui.bottom.attached.label ~ :last-child:not(.attached) {
-  margin-top: 0;
-  margin-bottom: 2rem !important;
-}
-
-.ui.segment:not(.basic) > .ui.top.attached.label {
-  margin-top: -1px;
-}
-
-.ui.segment:not(.basic) > .ui.bottom.attached.label {
-  margin-bottom: -1px;
-}
-
-.ui.segment:not(.basic) > .ui.attached.label:not(.right) {
-  margin-left: -1px;
-}
-
-.ui.segment:not(.basic) > .ui.right.attached.label {
-  margin-right: -1px;
-}
-
-.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) {
-  width: calc(100% + 2px);
-}
-
-/*******************************
-             Types
-*******************************/
-
-/*-------------------
-        Attached
-  --------------------*/
-
-.ui[class*="top attached"].label,
-.ui.attached.label {
-  width: 100%;
-  position: absolute;
-  margin: 0;
-  top: 0;
-  left: 0;
-  padding: 0.75em 1em;
-  border-radius: 0.21428571rem 0.21428571rem 0 0;
-}
-
-.ui[class*="bottom attached"].label {
-  top: auto;
-  bottom: 0;
-  border-radius: 0 0 0.21428571rem 0.21428571rem;
-}
-
-.ui[class*="top left attached"].label {
-  width: auto;
-  margin-top: 0;
-  border-radius: 0.21428571rem 0 0.28571429rem 0;
-}
-
-.ui[class*="top right attached"].label {
-  width: auto;
-  left: auto;
-  right: 0;
-  border-radius: 0 0.21428571rem 0 0.28571429rem;
-}
-
-.ui[class*="bottom left attached"].label {
-  width: auto;
-  top: auto;
-  bottom: 0;
-  border-radius: 0 0.28571429rem 0 0.21428571rem;
-}
-
-.ui[class*="bottom right attached"].label {
-  top: auto;
-  bottom: 0;
-  left: auto;
-  right: 0;
-  width: auto;
-  border-radius: 0.28571429rem 0 0.21428571rem 0;
-}
-
-/*******************************
-             States
-*******************************/
-
-/*-------------------
-      Disabled
---------------------*/
-
-.ui.label.disabled {
-  opacity: 0.5;
-}
-
-/*-------------------
-        Hover
---------------------*/
-
-.ui.labels a.label:hover,
-a.ui.label:hover {
-  background-color: #E0E0E0;
-  border-color: #E0E0E0;
-  background-image: none;
-  color: rgba(0, 0, 0, 0.8);
-}
-
-.ui.labels a.label:hover:before,
-a.ui.label:hover:before {
-  color: rgba(0, 0, 0, 0.8);
-}
-
-/*-------------------
-        Active
---------------------*/
-
-.ui.active.label {
-  background-color: #D0D0D0;
-  border-color: #D0D0D0;
-  background-image: none;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-.ui.active.label:before {
-  background-color: #D0D0D0;
-  background-image: none;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*-------------------
-     Active Hover
---------------------*/
-
-.ui.labels a.active.label:hover,
-a.ui.active.label:hover {
-  background-color: #C8C8C8;
-  border-color: #C8C8C8;
-  background-image: none;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-.ui.labels a.active.label:hover:before,
-a.ui.active.label:hover:before {
-  background-color: #C8C8C8;
-  background-image: none;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*-------------------
-      Visible
---------------------*/
-
-.ui.labels.visible .label,
-.ui.label.visible:not(.dropdown) {
-  display: inline-block !important;
-}
-
-/*-------------------
-      Hidden
---------------------*/
-
-.ui.labels.hidden .label,
-.ui.label.hidden {
-  display: none !important;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*-------------------
-          Basic
-  --------------------*/
-
-.ui.basic.labels .label,
-.ui.basic.label {
-  background: none #FFFFFF;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  color: rgba(0, 0, 0, 0.87);
-  box-shadow: none;
-  padding-top: calc(0.5833em - 1px);
-  padding-bottom: calc(0.5833em - 1px);
-  padding-right: calc(0.833em - 1px);
-}
-
-.ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label,
-.ui.basic.label:not(.tag):not(.image):not(.ribbon) {
-  padding-left: calc(0.833em - 1px);
-}
-
-/* Link */
-
-.ui.basic.labels a.label:hover,
-a.ui.basic.label:hover {
-  text-decoration: none;
-  background: none #FFFFFF;
-  color: #1e70bf;
-  box-shadow: none;
-}
-
-/* Pointing */
-
-.ui.basic.pointing.label:before {
-  border-color: inherit;
-}
-
-/*-------------------
-         Fluid
-  --------------------*/
-
-.ui.label.fluid,
-.ui.fluid.labels > .label {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/*-------------------
-       Colors
---------------------*/
-
-.ui.primary.labels .label,
-.ui.ui.ui.primary.label {
-  background-color: #2185D0;
-  border-color: #2185D0;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-/* Link */
-
-.ui.primary.labels a.label:hover,
-a.ui.ui.ui.primary.label:hover {
-  background-color: #1678c2;
-  border-color: #1678c2;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .primary.label,
-.ui.ui.ui.basic.primary.label {
-  background: none #FFFFFF;
-  border-color: #2185D0;
-  color: #2185D0;
-}
-
-.ui.basic.labels a.primary.label:hover,
-a.ui.ui.ui.basic.primary.label:hover {
-  background: none #FFFFFF;
-  border-color: #1678c2;
-  color: #1678c2;
-}
-
-.ui.secondary.labels .label,
-.ui.ui.ui.secondary.label {
-  background-color: #1B1C1D;
-  border-color: #1B1C1D;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-/* Link */
-
-.ui.secondary.labels a.label:hover,
-a.ui.ui.ui.secondary.label:hover {
-  background-color: #27292a;
-  border-color: #27292a;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .secondary.label,
-.ui.ui.ui.basic.secondary.label {
-  background: none #FFFFFF;
-  border-color: #1B1C1D;
-  color: #1B1C1D;
-}
-
-.ui.basic.labels a.secondary.label:hover,
-a.ui.ui.ui.basic.secondary.label:hover {
-  background: none #FFFFFF;
-  border-color: #27292a;
-  color: #27292a;
-}
-
-.ui.red.labels .label,
-.ui.ui.ui.red.label {
-  background-color: #DB2828;
-  border-color: #DB2828;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.red.labels a.label:hover,
-a.ui.ui.ui.red.label:hover {
-  background-color: #d01919;
-  border-color: #d01919;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .red.label,
-.ui.ui.ui.basic.red.label {
-  background: none #FFFFFF;
-  border-color: #DB2828;
-  color: #DB2828;
-}
-
-.ui.basic.labels a.red.label:hover,
-a.ui.ui.ui.basic.red.label:hover {
-  background: none #FFFFFF;
-  border-color: #d01919;
-  color: #d01919;
-}
-
-.ui.orange.labels .label,
-.ui.ui.ui.orange.label {
-  background-color: #F2711C;
-  border-color: #F2711C;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.orange.labels a.label:hover,
-a.ui.ui.ui.orange.label:hover {
-  background-color: #f26202;
-  border-color: #f26202;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .orange.label,
-.ui.ui.ui.basic.orange.label {
-  background: none #FFFFFF;
-  border-color: #F2711C;
-  color: #F2711C;
-}
-
-.ui.basic.labels a.orange.label:hover,
-a.ui.ui.ui.basic.orange.label:hover {
-  background: none #FFFFFF;
-  border-color: #f26202;
-  color: #f26202;
-}
-
-.ui.yellow.labels .label,
-.ui.ui.ui.yellow.label {
-  background-color: #FBBD08;
-  border-color: #FBBD08;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.yellow.labels a.label:hover,
-a.ui.ui.ui.yellow.label:hover {
-  background-color: #eaae00;
-  border-color: #eaae00;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .yellow.label,
-.ui.ui.ui.basic.yellow.label {
-  background: none #FFFFFF;
-  border-color: #FBBD08;
-  color: #FBBD08;
-}
-
-.ui.basic.labels a.yellow.label:hover,
-a.ui.ui.ui.basic.yellow.label:hover {
-  background: none #FFFFFF;
-  border-color: #eaae00;
-  color: #eaae00;
-}
-
-.ui.olive.labels .label,
-.ui.ui.ui.olive.label {
-  background-color: #B5CC18;
-  border-color: #B5CC18;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.olive.labels a.label:hover,
-a.ui.ui.ui.olive.label:hover {
-  background-color: #a7bd0d;
-  border-color: #a7bd0d;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .olive.label,
-.ui.ui.ui.basic.olive.label {
-  background: none #FFFFFF;
-  border-color: #B5CC18;
-  color: #B5CC18;
-}
-
-.ui.basic.labels a.olive.label:hover,
-a.ui.ui.ui.basic.olive.label:hover {
-  background: none #FFFFFF;
-  border-color: #a7bd0d;
-  color: #a7bd0d;
-}
-
-.ui.green.labels .label,
-.ui.ui.ui.green.label {
-  background-color: #21BA45;
-  border-color: #21BA45;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.green.labels a.label:hover,
-a.ui.ui.ui.green.label:hover {
-  background-color: #16ab39;
-  border-color: #16ab39;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .green.label,
-.ui.ui.ui.basic.green.label {
-  background: none #FFFFFF;
-  border-color: #21BA45;
-  color: #21BA45;
-}
-
-.ui.basic.labels a.green.label:hover,
-a.ui.ui.ui.basic.green.label:hover {
-  background: none #FFFFFF;
-  border-color: #16ab39;
-  color: #16ab39;
-}
-
-.ui.teal.labels .label,
-.ui.ui.ui.teal.label {
-  background-color: #00B5AD;
-  border-color: #00B5AD;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.teal.labels a.label:hover,
-a.ui.ui.ui.teal.label:hover {
-  background-color: #009c95;
-  border-color: #009c95;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .teal.label,
-.ui.ui.ui.basic.teal.label {
-  background: none #FFFFFF;
-  border-color: #00B5AD;
-  color: #00B5AD;
-}
-
-.ui.basic.labels a.teal.label:hover,
-a.ui.ui.ui.basic.teal.label:hover {
-  background: none #FFFFFF;
-  border-color: #009c95;
-  color: #009c95;
-}
-
-.ui.blue.labels .label,
-.ui.ui.ui.blue.label {
-  background-color: #2185D0;
-  border-color: #2185D0;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.blue.labels a.label:hover,
-a.ui.ui.ui.blue.label:hover {
-  background-color: #1678c2;
-  border-color: #1678c2;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .blue.label,
-.ui.ui.ui.basic.blue.label {
-  background: none #FFFFFF;
-  border-color: #2185D0;
-  color: #2185D0;
-}
-
-.ui.basic.labels a.blue.label:hover,
-a.ui.ui.ui.basic.blue.label:hover {
-  background: none #FFFFFF;
-  border-color: #1678c2;
-  color: #1678c2;
-}
-
-.ui.violet.labels .label,
-.ui.ui.ui.violet.label {
-  background-color: #6435C9;
-  border-color: #6435C9;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.violet.labels a.label:hover,
-a.ui.ui.ui.violet.label:hover {
-  background-color: #5829bb;
-  border-color: #5829bb;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .violet.label,
-.ui.ui.ui.basic.violet.label {
-  background: none #FFFFFF;
-  border-color: #6435C9;
-  color: #6435C9;
-}
-
-.ui.basic.labels a.violet.label:hover,
-a.ui.ui.ui.basic.violet.label:hover {
-  background: none #FFFFFF;
-  border-color: #5829bb;
-  color: #5829bb;
-}
-
-.ui.purple.labels .label,
-.ui.ui.ui.purple.label {
-  background-color: #A333C8;
-  border-color: #A333C8;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.purple.labels a.label:hover,
-a.ui.ui.ui.purple.label:hover {
-  background-color: #9627ba;
-  border-color: #9627ba;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .purple.label,
-.ui.ui.ui.basic.purple.label {
-  background: none #FFFFFF;
-  border-color: #A333C8;
-  color: #A333C8;
-}
-
-.ui.basic.labels a.purple.label:hover,
-a.ui.ui.ui.basic.purple.label:hover {
-  background: none #FFFFFF;
-  border-color: #9627ba;
-  color: #9627ba;
-}
-
-.ui.pink.labels .label,
-.ui.ui.ui.pink.label {
-  background-color: #E03997;
-  border-color: #E03997;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.pink.labels a.label:hover,
-a.ui.ui.ui.pink.label:hover {
-  background-color: #e61a8d;
-  border-color: #e61a8d;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .pink.label,
-.ui.ui.ui.basic.pink.label {
-  background: none #FFFFFF;
-  border-color: #E03997;
-  color: #E03997;
-}
-
-.ui.basic.labels a.pink.label:hover,
-a.ui.ui.ui.basic.pink.label:hover {
-  background: none #FFFFFF;
-  border-color: #e61a8d;
-  color: #e61a8d;
-}
-
-.ui.brown.labels .label,
-.ui.ui.ui.brown.label {
-  background-color: #A5673F;
-  border-color: #A5673F;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.brown.labels a.label:hover,
-a.ui.ui.ui.brown.label:hover {
-  background-color: #975b33;
-  border-color: #975b33;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .brown.label,
-.ui.ui.ui.basic.brown.label {
-  background: none #FFFFFF;
-  border-color: #A5673F;
-  color: #A5673F;
-}
-
-.ui.basic.labels a.brown.label:hover,
-a.ui.ui.ui.basic.brown.label:hover {
-  background: none #FFFFFF;
-  border-color: #975b33;
-  color: #975b33;
-}
-
-.ui.grey.labels .label,
-.ui.ui.ui.grey.label {
-  background-color: #767676;
-  border-color: #767676;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.grey.labels a.label:hover,
-a.ui.ui.ui.grey.label:hover {
-  background-color: #838383;
-  border-color: #838383;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .grey.label,
-.ui.ui.ui.basic.grey.label {
-  background: none #FFFFFF;
-  border-color: #767676;
-  color: #767676;
-}
-
-.ui.basic.labels a.grey.label:hover,
-a.ui.ui.ui.basic.grey.label:hover {
-  background: none #FFFFFF;
-  border-color: #838383;
-  color: #838383;
-}
-
-.ui.black.labels .label,
-.ui.ui.ui.black.label {
-  background-color: #1B1C1D;
-  border-color: #1B1C1D;
-  color: #FFFFFF;
-}
-
-/* Link */
-
-.ui.black.labels a.label:hover,
-a.ui.ui.ui.black.label:hover {
-  background-color: #27292a;
-  border-color: #27292a;
-  color: #FFFFFF;
-}
-
-/* Basic */
-
-.ui.basic.labels .black.label,
-.ui.ui.ui.basic.black.label {
-  background: none #FFFFFF;
-  border-color: #1B1C1D;
-  color: #1B1C1D;
-}
-
-.ui.basic.labels a.black.label:hover,
-a.ui.ui.ui.basic.black.label:hover {
-  background: none #FFFFFF;
-  border-color: #27292a;
-  color: #27292a;
-}
-
-/*-------------------
-     Horizontal
---------------------*/
-
-.ui.horizontal.labels .label,
-.ui.horizontal.label {
-  margin: 0 0.5em 0 0;
-  padding: 0.4em 0.833em;
-  min-width: 3em;
-  text-align: center;
-}
-
-/*-------------------
-         Circular
-  --------------------*/
-
-.ui.circular.labels .label,
-.ui.circular.label {
-  min-width: 2em;
-  min-height: 2em;
-  padding: 0.5em !important;
-  line-height: 1em;
-  text-align: center;
-  border-radius: 500rem;
-}
-
-.ui.empty.circular.labels .label,
-.ui.empty.circular.label {
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  width: 0.5em;
-  height: 0.5em;
-  vertical-align: baseline;
-}
-
-/*-------------------
-         Pointing
-  --------------------*/
-
-.ui.pointing.label {
-  position: relative;
-}
-
-.ui.attached.pointing.label {
-  position: absolute;
-}
-
-.ui.pointing.label:before {
-  background-color: inherit;
-  background-image: inherit;
-  border-width: 0;
-  border-style: solid;
-  border-color: inherit;
-}
-
-/* Arrow */
-
-.ui.pointing.label:before {
-  position: absolute;
-  content: '';
-  transform: rotate(45deg);
-  background-image: none;
-  z-index: 2;
-  width: 0.6666em;
-  height: 0.6666em;
-  transition: none;
-}
-
-/*--- Above ---*/
-
-.ui.pointing.label,
-.ui[class*="pointing above"].label {
-  margin-top: 1em;
-}
-
-.ui.pointing.label:before,
-.ui[class*="pointing above"].label:before {
-  border-width: 1px 0 0 1px;
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  top: 0;
-  left: 50%;
-}
-
-/*--- Below ---*/
-
-.ui[class*="bottom pointing"].label,
-.ui[class*="pointing below"].label {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-
-.ui[class*="bottom pointing"].label:before,
-.ui[class*="pointing below"].label:before {
-  border-width: 0 1px 1px 0;
-  top: auto;
-  right: auto;
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  top: 100%;
-  left: 50%;
-}
-
-/*--- Left ---*/
-
-.ui[class*="left pointing"].label {
-  margin-top: 0;
-  margin-left: 0.6666em;
-}
-
-.ui[class*="left pointing"].label:before {
-  border-width: 0 0 1px 1px;
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  bottom: auto;
-  right: auto;
-  top: 50%;
-  left: 0;
-}
-
-/*--- Right ---*/
-
-.ui[class*="right pointing"].label {
-  margin-top: 0;
-  margin-right: 0.6666em;
-}
-
-.ui[class*="right pointing"].label:before {
-  border-width: 1px 1px 0 0;
-  transform: translateX(50%) translateY(-50%) rotate(45deg);
-  top: 50%;
-  right: 0;
-  bottom: auto;
-  left: auto;
-}
-
-/* Basic Pointing */
-
-/*--- Above ---*/
-
-.ui.basic.pointing.label:before,
-.ui.basic[class*="pointing above"].label:before {
-  margin-top: -1px;
-}
-
-/*--- Below ---*/
-
-.ui.basic[class*="bottom pointing"].label:before,
-.ui.basic[class*="pointing below"].label:before {
-  bottom: auto;
-  top: 100%;
-  margin-top: 1px;
-}
-
-/*--- Left ---*/
-
-.ui.basic[class*="left pointing"].label:before {
-  top: 50%;
-  left: -1px;
-}
-
-/*--- Right ---*/
-
-.ui.basic[class*="right pointing"].label:before {
-  top: 50%;
-  right: -1px;
-}
-
-/*------------------
-     Floating Label
-  -------------------*/
-
-.ui.floating.label {
-  position: absolute;
-  z-index: 100;
-  top: -1em;
-  right: 0;
-  white-space: nowrap;
-  transform: translateX(50%);
-}
-
-.ui.right.aligned.floating.label {
-  transform: translateX(1.2em);
-}
-
-.ui.left.floating.label {
-  left: 0;
-  right: auto;
-  transform: translateX(-50%);
-}
-
-.ui.left.aligned.floating.label {
-  transform: translateX(-1.2em);
-}
-
-.ui.bottom.floating.label {
-  top: auto;
-  bottom: -1em;
-}
-
-/*-------------------
-        Sizes
---------------------*/
-
-.ui.labels .label,
-.ui.label {
-  font-size: 0.85714286rem;
-}
-
-.ui.mini.labels .label,
-.ui.mini.label {
-  font-size: 0.64285714rem;
-}
-
-.ui.tiny.labels .label,
-.ui.tiny.label {
-  font-size: 0.71428571rem;
-}
-
-.ui.small.labels .label,
-.ui.small.label {
-  font-size: 0.78571429rem;
-}
-
-.ui.large.labels .label,
-.ui.large.label {
-  font-size: 1rem;
-}
-
-.ui.big.labels .label,
-.ui.big.label {
-  font-size: 1.28571429rem;
-}
-
-.ui.huge.labels .label,
-.ui.huge.label {
-  font-size: 1.42857143rem;
-}
-
-.ui.massive.labels .label,
-.ui.massive.label {
-  font-size: 1.71428571rem;
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
 /*******************************
          Site Overrides
 *******************************/
diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json
index 6fbb0e7b977c7..b916af69223c9 100644
--- a/web_src/fomantic/semantic.json
+++ b/web_src/fomantic/semantic.json
@@ -28,7 +28,6 @@
     "dropdown",
     "form",
     "input",
-    "label",
     "list",
     "menu",
     "modal",

From d4201110a748838c76ae36b390774b168daef989 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 25 Mar 2024 22:08:03 +0100
Subject: [PATCH 02/14] comment

---
 web_src/css/modules/label.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 361b43932fbf8..de0e6bf3d8998 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -1,3 +1,6 @@
+/* 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;

From 2987ebe7a94bcd5ec790a3842c8931b61148bf6c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 00:17:03 +0100
Subject: [PATCH 03/14] Update web_src/css/modules/label.css

Co-authored-by: delvh <dev.lh@web.de>
---
 web_src/css/modules/label.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index de0e6bf3d8998..fe1f69295aa2a 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -125,8 +125,8 @@ a.ui.active.label:hover {
   padding-bottom: calc(0.5833em - 1px);
   padding-right: calc(0.833em - 1px);
 }
-.ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label,
-.ui.basic.label:not(.tag):not(.image):not(.ribbon) {
+.ui.basic.labels:not(.tag,.image,.ribbon) .label,
+.ui.basic.label:not(.tag,.image,.ribbon) {
   padding-left: calc(0.833em - 1px);
 }
 

From 8b6a5c47d798126c84fa29dc594461ee5bc07244 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:30:21 +0100
Subject: [PATCH 04/14] remove all .ui.labels selectors

---
 web_src/css/modules/label.css | 80 +----------------------------------
 1 file changed, 2 insertions(+), 78 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index fe1f69295aa2a..85122959ddd40 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -83,15 +83,10 @@ a.ui.label {
   margin: 0 0 0 0.5em;
 }
 
-.ui.labels > .label {
-  margin: 0 0.5em 0.5em 0;
-}
-
 .ui.header > .ui.label {
   margin-top: -0.29165em;
 }
 
-.ui.labels a.label:hover,
 a.ui.label:hover {
   background: var(--color-label-hover-bg);
   border-color: var(--color-label-hover-bg);
@@ -104,19 +99,16 @@ a.ui.label:hover {
   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);
 }
 
-.ui.labels.visible .label,
 .ui.label.visible:not(.dropdown) {
   display: inline-block !important;
 }
 
-.ui.basic.labels .label,
 .ui.basic.label {
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
@@ -125,12 +117,11 @@ a.ui.active.label:hover {
   padding-bottom: calc(0.5833em - 1px);
   padding-right: calc(0.833em - 1px);
 }
-.ui.basic.labels:not(.tag,.image,.ribbon) .label,
+
 .ui.basic.label:not(.tag,.image,.ribbon) {
   padding-left: calc(0.833em - 1px);
 }
 
-.ui.basic.labels a.label:hover,
 a.ui.basic.label:hover {
   text-decoration: none;
   color: var(--color-text);
@@ -138,387 +129,329 @@ a.ui.basic.label:hover {
   background: var(--color-hover);
 }
 
-.ui.primary.labels .label,
 .ui.ui.ui.primary.label {
   background: var(--color-primary);
   border-color: var(--color-primary-dark-2);
   color: var(--color-primary-contrast);
 }
 
-.ui.primary.labels a.label:hover,
 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.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.secondary.labels .label,
 .ui.ui.ui.secondary.label {
   background: var(--color-button);
   border-color: var(--color-light-border);
   color: var(--color-text-light);
 }
 
-.ui.basic.labels .secondary.label,
 .ui.ui.ui.basic.secondary.label {
   background: transparent;
   border-color: var(--color-secondary);
   color: var(--color-secondary);
 }
 
-.ui.red.labels .label,
 .ui.ui.ui.red.label {
   background: var(--color-red);
   border-color: var(--color-red);
   color: var(--color-white);
 }
 
-.ui.red.labels a.label:hover,
 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.basic.labels .red.label,
 .ui.ui.ui.basic.red.label {
   background: transparent;
   border-color: var(--color-red);
   color: var(--color-red);
 }
-.ui.basic.labels a.red.label:hover,
 a.ui.ui.ui.basic.red.label:hover {
   background: transparent;
   border-color: var(--color-red-dark-1);
   color: var(--color-red-dark-1);
 }
-.ui.orange.labels .label,
 .ui.ui.ui.orange.label {
   background: var(--color-orange);
   border-color: var(--color-orange);
   color: var(--color-white);
 }
 
-.ui.orange.labels a.label:hover,
 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.basic.labels .orange.label,
 .ui.ui.ui.basic.orange.label {
   background: transparent;
   border-color: var(--color-orange);
   color: var(--color-orange);
 }
-.ui.basic.labels a.orange.label:hover,
 a.ui.ui.ui.basic.orange.label:hover {
   background: transparent;
   border-color: var(--color-orange-dark-1);
   color: var(--color-orange-dark-1);
 }
-.ui.yellow.labels .label,
 .ui.ui.ui.yellow.label {
   background: var(--color-yellow);
   border-color: var(--color-yellow);
   color: var(--color-white);
 }
 
-.ui.yellow.labels a.label:hover,
 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.basic.labels .yellow.label,
 .ui.ui.ui.basic.yellow.label {
   background: transparent;
   border-color: var(--color-yellow);
   color: var(--color-yellow);
 }
-.ui.basic.labels a.yellow.label:hover,
 a.ui.ui.ui.basic.yellow.label:hover {
   background: transparent;
   border-color: var(--color-yellow-dark-1);
   color: var(--color-yellow-dark-1);
 }
-.ui.olive.labels .label,
 .ui.ui.ui.olive.label {
   background: var(--color-olive);
   border-color: var(--color-olive);
   color: var(--color-white);
 }
 
-.ui.olive.labels a.label:hover,
 a.ui.ui.ui.olive.label:hover {
   background: var(--color-olive-dark-1);
   border-color: var(--color-olive-dark-1);
   color: var(--color-white);
 }
 
-.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 a.olive.label:hover,
 a.ui.ui.ui.basic.olive.label:hover {
   background: transparent;
   border-color: var(--color-olive-dark-1);
   color: var(--color-olive-dark-1);
 }
-.ui.green.labels .label,
 .ui.ui.ui.green.label {
   background: var(--color-green);
   border-color: var(--color-green);
   color: var(--color-white);
 }
 
-.ui.green.labels a.label:hover,
 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.basic.labels .green.label,
 .ui.ui.ui.basic.green.label {
   background: transparent;
   border-color: var(--color-green);
   color: var(--color-green);
 }
-.ui.basic.labels a.green.label:hover,
 a.ui.ui.ui.basic.green.label:hover {
   background: transparent;
   border-color: var(--color-green-dark-1);
   color: var(--color-green-dark-1);
 }
-.ui.teal.labels .label,
 .ui.ui.ui.teal.label {
   background: var(--color-teal);
   border-color: var(--color-teal);
   color: var(--color-white);
 }
 
-.ui.teal.labels a.label:hover,
 a.ui.ui.ui.teal.label:hover {
   background: var(--color-teal-dark-1);
   border-color: var(--color-teal-dark-1);
   color: var(--color-white);
 }
 
-.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 a.teal.label:hover,
 a.ui.ui.ui.basic.teal.label:hover {
   background: transparent;
   border-color: var(--color-teal-dark-1);
   color: var(--color-teal-dark-1);
 }
-.ui.blue.labels .label,
 .ui.ui.ui.blue.label {
   background: var(--color-blue);
   border-color: var(--color-blue);
   color: var(--color-white);
 }
 
-.ui.blue.labels a.label:hover,
 a.ui.ui.ui.blue.label:hover {
   background: var(--color-blue-dark-1);
   border-color: var(--color-blue-dark-1);
   color: var(--color-white);
 }
 
-.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 a.blue.label:hover,
 a.ui.ui.ui.basic.blue.label:hover {
   background: transparent;
   border-color: var(--color-blue-dark-1);
   color: var(--color-blue-dark-1);
 }
-.ui.violet.labels .label,
 .ui.ui.ui.violet.label {
   background: var(--color-blue-violet);
   border-color: var(--color-blue-violet);
   color: var(--color-white);
 }
 
-.ui.violet.labels a.label:hover,
 a.ui.ui.ui.violet.label:hover {
   background: var(--color-blue-violet-dark-1);
   border-color: var(--color-blue-violet-dark-1);
   color: var(--color-white);
 }
 
-.ui.basic.labels .violet.label,
 .ui.ui.ui.basic.violet.label {
   background: transparent;
   border-color: var(--color-blue-violet);
   color: var(--color-blue-violet);
 }
-.ui.basic.labels a.violet.label:hover,
 a.ui.ui.ui.basic.violet.label:hover {
   background: transparent;
   border-color: var(--color-blue-violet-dark-1);
   color: var(--color-blue-violet-dark-1);
 }
-.ui.purple.labels .label,
 .ui.ui.ui.purple.label {
   background: var(--color-purple);
   border-color: var(--color-purple);
   color: var(--color-white);
 }
 
-.ui.purple.labels a.label:hover,
 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.basic.labels .purple.label,
 .ui.ui.ui.basic.purple.label {
   background: transparent;
   border-color: var(--color-purple);
   color: var(--color-purple);
 }
-.ui.basic.labels a.purple.label:hover,
 a.ui.ui.ui.basic.purple.label:hover {
   background: transparent;
   border-color: var(--color-purple-dark-1);
   color: var(--color-purple-dark-1);
 }
-.ui.pink.labels .label,
 .ui.ui.ui.pink.label {
   background: var(--color-pink);
   border-color: var(--color-pink);
   color: var(--color-white);
 }
 
-.ui.pink.labels a.label:hover,
 a.ui.ui.ui.pink.label:hover {
   background: var(--color-pink-dark-1);
   border-color: var(--color-pink-dark-1);
   color: var(--color-white);
 }
 
-.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 a.pink.label:hover,
 a.ui.ui.ui.basic.pink.label:hover {
   background: transparent;
   border-color: var(--color-pink-dark-1);
   color: var(--color-pink-dark-1);
 }
-.ui.brown.labels .label,
 .ui.ui.ui.brown.label {
   background: var(--color-brown);
   border-color: var(--color-brown);
   color: var(--color-white);
 }
 
-.ui.brown.labels a.label:hover,
 a.ui.ui.ui.brown.label:hover {
   background: var(--color-brown-dark-1);
   border-color: var(--color-brown-dark-1);
   color: var(--color-white);
 }
 
-.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 a.brown.label:hover,
 a.ui.ui.ui.basic.brown.label:hover {
   background: transparent;
   border-color: var(--color-brown-dark-1);
   color: var(--color-brown-dark-1);
 }
-.ui.grey.labels .label,
 .ui.ui.ui.grey.label {
   background: var(--color-label-bg);
   border-color: var(--color-label-bg);
   color: var(--color-label-text);
 }
 
-.ui.grey.labels a.label:hover,
 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.basic.labels .grey.label,
 .ui.ui.ui.basic.grey.label {
   background: transparent;
   border-color: var(--color-label-bg);
   color: var(--color-label-text);
 }
-.ui.basic.labels a.grey.label:hover,
 a.ui.ui.ui.basic.grey.label:hover {
   background: transparent;
   border-color: var(--color-label-hover-bg);
   color: var(--color-label-hover-bg);
 }
-.ui.black.labels .label,
 .ui.ui.ui.black.label {
   background: var(--color-black);
   border-color: var(--color-black);
   color: var(--color-white);
 }
 
-.ui.black.labels a.label:hover,
 a.ui.ui.ui.black.label:hover {
   background: var(--color-black-dark-1);
   border-color: var(--color-black-dark-1);
   color: var(--color-white);
 }
 
-.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 a.black.label:hover,
 a.ui.ui.ui.basic.black.label:hover {
   background: transparent;
   border-color: var(--color-black-dark-1);
   color: var(--color-black-dark-1);
 }
 
-.ui.horizontal.labels .label,
 .ui.horizontal.label {
   margin: 0 0.5em 0 0;
   padding: 0.4em 0.833em;
@@ -526,7 +459,6 @@ a.ui.ui.ui.basic.black.label:hover {
   text-align: center;
 }
 
-.ui.circular.labels .label,
 .ui.circular.label {
   min-width: 2em;
   min-height: 2em;
@@ -537,35 +469,27 @@ a.ui.ui.ui.basic.black.label:hover {
   justify-content: center;
 }
 
-.ui.labels .label,
 .ui.label {
   font-size: 0.85714286rem;
 }
-.ui.mini.labels .label,
 .ui.mini.label {
   font-size: 0.64285714rem;
 }
-.ui.tiny.labels .label,
 .ui.tiny.label {
   font-size: 0.71428571rem;
 }
-.ui.small.labels .label,
 .ui.small.label {
   font-size: 0.78571429rem;
 }
-.ui.large.labels .label,
 .ui.large.label {
   font-size: 1rem;
 }
-.ui.big.labels .label,
 .ui.big.label {
   font-size: 1.28571429rem;
 }
-.ui.huge.labels .label,
 .ui.huge.label {
   font-size: 1.42857143rem;
 }
-.ui.massive.labels .label,
 .ui.massive.label {
   font-size: 1.71428571rem;
 }

From ab20fb83f2f4690d39b0c2643251762f96e8df45 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:34:18 +0100
Subject: [PATCH 05/14] remove unused active

---
 web_src/css/modules/label.css | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 85122959ddd40..6ddb077cf05a9 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -93,18 +93,6 @@ a.ui.label:hover {
   color: var(--color-label-text);
 }
 
-.ui.active.label {
-  background: var(--color-label-active-bg);
-  border-color: var(--color-label-active-bg);
-  color: var(--color-label-text);
-}
-
-a.ui.active.label:hover {
-  background: var(--color-label-active-bg);
-  border-color: var(--color-label-active-bg);
-  color: var(--color-label-text);
-}
-
 .ui.label.visible:not(.dropdown) {
   display: inline-block !important;
 }

From c6f7d4126237ba71268349c404fc7499c7769b40 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:35:50 +0100
Subject: [PATCH 06/14] simplify

---
 web_src/css/modules/label.css | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 6ddb077cf05a9..d8172949c51d4 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -101,13 +101,7 @@ a.ui.label:hover {
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
   color: var(--color-text-light);
-  padding-top: calc(0.5833em - 1px);
-  padding-bottom: calc(0.5833em - 1px);
-  padding-right: calc(0.833em - 1px);
-}
-
-.ui.basic.label:not(.tag,.image,.ribbon) {
-  padding-left: calc(0.833em - 1px);
+  padding: calc(0.5833em - 1px) calc(0.833em - 1px);
 }
 
 a.ui.basic.label:hover {

From 0fbfa32ccff21e4cf8b9d3fd846fdf0113bb109a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:38:02 +0100
Subject: [PATCH 07/14] rm unused secondary

---
 web_src/css/modules/label.css | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index d8172949c51d4..cbe7d629beea0 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -135,18 +135,6 @@ a.ui.ui.ui.basic.primary.label:hover {
   color: var(--color-primary-dark-1);
 }
 
-.ui.ui.ui.secondary.label {
-  background: var(--color-button);
-  border-color: var(--color-light-border);
-  color: var(--color-text-light);
-}
-
-.ui.ui.ui.basic.secondary.label {
-  background: transparent;
-  border-color: var(--color-secondary);
-  color: var(--color-secondary);
-}
-
 .ui.ui.ui.red.label {
   background: var(--color-red);
   border-color: var(--color-red);

From e3094639b558d00acf2b188ceb19c31c93541df5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:39:34 +0100
Subject: [PATCH 08/14] rm unused olive

---
 web_src/css/modules/label.css | 24 ++----------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index cbe7d629beea0..741dea687c6fe 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -140,13 +140,11 @@ a.ui.ui.ui.basic.primary.label:hover {
   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);
@@ -157,18 +155,17 @@ a.ui.ui.ui.basic.red.label:hover {
   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);
@@ -179,18 +176,17 @@ a.ui.ui.ui.basic.orange.label:hover {
   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);
@@ -207,22 +203,6 @@ a.ui.ui.ui.basic.yellow.label:hover {
   color: var(--color-white);
 }
 
-a.ui.ui.ui.olive.label:hover {
-  background: var(--color-olive-dark-1);
-  border-color: var(--color-olive-dark-1);
-  color: var(--color-white);
-}
-
-.ui.ui.ui.basic.olive.label {
-  background: transparent;
-  border-color: var(--color-olive);
-  color: var(--color-olive);
-}
-a.ui.ui.ui.basic.olive.label:hover {
-  background: transparent;
-  border-color: var(--color-olive-dark-1);
-  color: var(--color-olive-dark-1);
-}
 .ui.ui.ui.green.label {
   background: var(--color-green);
   border-color: var(--color-green);

From e136e207656b89f05b16a3161cc2a478e9a75fc3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:40:04 +0100
Subject: [PATCH 09/14] rm unused teal

---
 web_src/css/modules/label.css | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 741dea687c6fe..ce641436f0680 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -208,13 +208,11 @@ a.ui.ui.ui.basic.yellow.label:hover {
   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);
@@ -225,28 +223,7 @@ a.ui.ui.ui.basic.green.label:hover {
   border-color: var(--color-green-dark-1);
   color: var(--color-green-dark-1);
 }
-.ui.ui.ui.teal.label {
-  background: var(--color-teal);
-  border-color: var(--color-teal);
-  color: var(--color-white);
-}
 
-a.ui.ui.ui.teal.label:hover {
-  background: var(--color-teal-dark-1);
-  border-color: var(--color-teal-dark-1);
-  color: var(--color-white);
-}
-
-.ui.ui.ui.basic.teal.label {
-  background: transparent;
-  border-color: var(--color-teal);
-  color: var(--color-teal);
-}
-a.ui.ui.ui.basic.teal.label:hover {
-  background: transparent;
-  border-color: var(--color-teal-dark-1);
-  color: var(--color-teal-dark-1);
-}
 .ui.ui.ui.blue.label {
   background: var(--color-blue);
   border-color: var(--color-blue);

From c6b78da497b49466a1fa8eb3ac19047d691614e4 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:40:22 +0100
Subject: [PATCH 10/14] rm unused blue

---
 web_src/css/modules/label.css | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index ce641436f0680..eef560a6885cc 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -224,28 +224,6 @@ a.ui.ui.ui.basic.green.label:hover {
   color: var(--color-green-dark-1);
 }
 
-.ui.ui.ui.blue.label {
-  background: var(--color-blue);
-  border-color: var(--color-blue);
-  color: var(--color-white);
-}
-
-a.ui.ui.ui.blue.label:hover {
-  background: var(--color-blue-dark-1);
-  border-color: var(--color-blue-dark-1);
-  color: var(--color-white);
-}
-
-.ui.ui.ui.basic.blue.label {
-  background: transparent;
-  border-color: var(--color-blue);
-  color: var(--color-blue);
-}
-a.ui.ui.ui.basic.blue.label:hover {
-  background: transparent;
-  border-color: var(--color-blue-dark-1);
-  color: var(--color-blue-dark-1);
-}
 .ui.ui.ui.violet.label {
   background: var(--color-blue-violet);
   border-color: var(--color-blue-violet);

From ed12291cca2c2d73a8a954c925deb6852a0295cb Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:41:35 +0100
Subject: [PATCH 11/14] rm all unused

---
 web_src/css/modules/label.css | 91 -----------------------------------
 1 file changed, 91 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index eef560a6885cc..f7428ba1800df 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -224,40 +224,16 @@ a.ui.ui.ui.basic.green.label:hover {
   color: var(--color-green-dark-1);
 }
 
-.ui.ui.ui.violet.label {
-  background: var(--color-blue-violet);
-  border-color: var(--color-blue-violet);
-  color: var(--color-white);
-}
-
-a.ui.ui.ui.violet.label:hover {
-  background: var(--color-blue-violet-dark-1);
-  border-color: var(--color-blue-violet-dark-1);
-  color: var(--color-white);
-}
-
-.ui.ui.ui.basic.violet.label {
-  background: transparent;
-  border-color: var(--color-blue-violet);
-  color: var(--color-blue-violet);
-}
-a.ui.ui.ui.basic.violet.label:hover {
-  background: transparent;
-  border-color: var(--color-blue-violet-dark-1);
-  color: var(--color-blue-violet-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);
@@ -268,62 +244,17 @@ a.ui.ui.ui.basic.purple.label:hover {
   border-color: var(--color-purple-dark-1);
   color: var(--color-purple-dark-1);
 }
-.ui.ui.ui.pink.label {
-  background: var(--color-pink);
-  border-color: var(--color-pink);
-  color: var(--color-white);
-}
-
-a.ui.ui.ui.pink.label:hover {
-  background: var(--color-pink-dark-1);
-  border-color: var(--color-pink-dark-1);
-  color: var(--color-white);
-}
 
-.ui.ui.ui.basic.pink.label {
-  background: transparent;
-  border-color: var(--color-pink);
-  color: var(--color-pink);
-}
-a.ui.ui.ui.basic.pink.label:hover {
-  background: transparent;
-  border-color: var(--color-pink-dark-1);
-  color: var(--color-pink-dark-1);
-}
-.ui.ui.ui.brown.label {
-  background: var(--color-brown);
-  border-color: var(--color-brown);
-  color: var(--color-white);
-}
-
-a.ui.ui.ui.brown.label:hover {
-  background: var(--color-brown-dark-1);
-  border-color: var(--color-brown-dark-1);
-  color: var(--color-white);
-}
-
-.ui.ui.ui.basic.brown.label {
-  background: transparent;
-  border-color: var(--color-brown);
-  color: var(--color-brown);
-}
-a.ui.ui.ui.basic.brown.label:hover {
-  background: transparent;
-  border-color: var(--color-brown-dark-1);
-  color: var(--color-brown-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);
@@ -334,28 +265,6 @@ a.ui.ui.ui.basic.grey.label:hover {
   border-color: var(--color-label-hover-bg);
   color: var(--color-label-hover-bg);
 }
-.ui.ui.ui.black.label {
-  background: var(--color-black);
-  border-color: var(--color-black);
-  color: var(--color-white);
-}
-
-a.ui.ui.ui.black.label:hover {
-  background: var(--color-black-dark-1);
-  border-color: var(--color-black-dark-1);
-  color: var(--color-white);
-}
-
-.ui.ui.ui.basic.black.label {
-  background: transparent;
-  border-color: var(--color-black);
-  color: var(--color-black);
-}
-a.ui.ui.ui.basic.black.label:hover {
-  background: transparent;
-  border-color: var(--color-black-dark-1);
-  color: var(--color-black-dark-1);
-}
 
 .ui.horizontal.label {
   margin: 0 0.5em 0 0;

From d9c2688fcf81e788be8363b7bfeb72ebb75bdbf7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 21:42:22 +0100
Subject: [PATCH 12/14] group by color

---
 web_src/css/modules/label.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index f7428ba1800df..dea14225ca6c6 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -103,7 +103,6 @@ a.ui.label:hover {
   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);
@@ -116,19 +115,16 @@ a.ui.basic.label:hover {
   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);

From 1824d4e915dc1caf082aa99f2ee03d5c892bd45e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 22:04:25 +0100
Subject: [PATCH 13/14] rm unused sizes

---
 web_src/css/modules/label.css | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index dea14225ca6c6..a0dea0315308b 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -294,12 +294,3 @@ a.ui.ui.ui.basic.grey.label:hover {
 .ui.large.label {
   font-size: 1rem;
 }
-.ui.big.label {
-  font-size: 1.28571429rem;
-}
-.ui.huge.label {
-  font-size: 1.42857143rem;
-}
-.ui.massive.label {
-  font-size: 1.71428571rem;
-}

From 062324d6d329d013b2152072e96f5a152a222e9f Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 22:41:49 +0100
Subject: [PATCH 14/14] fix lint

---
 web_src/css/modules/label.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index a0dea0315308b..0512c5fddbb03 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -11,6 +11,7 @@
   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;
@@ -279,9 +280,6 @@ a.ui.ui.ui.basic.grey.label:hover {
   justify-content: center;
 }
 
-.ui.label {
-  font-size: 0.85714286rem;
-}
 .ui.mini.label {
   font-size: 0.64285714rem;
 }