Remove fomantic button module (#30475)

CSS-only module. Button colors are reduced to this:

<img width="639" alt="Screenshot 2024-04-14 at 15 36 07"
src="https://github.com/go-gitea/gitea/assets/115237/882d6c02-d1de-44f2-b707-db02a9f5070d">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

5 files changed, 222 insertions, 576 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 20f3616177..b3f87044e0 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -663,10 +663,6 @@ input:-webkit-autofill:active,
   font-size: 0.75em;
 }
 
-.ui.form .ui.button {
-  font-weight: var(--font-weight-normal);
-}
-
 /* popover box shadows */
 .ui.dropdown .menu,
 .ui.upward.dropdown > .menu,
@@ -1347,10 +1343,6 @@ table th[data-sortt-desc] .svg {
   vertical-align: middle;
 }
 
-.ui.ui.button {
-  justify-content: center;
-}
-
 .ui.dropdown .ui.label .svg {
   vertical-align: middle;
 }
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 118c058b19..cf2e73572c 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -52,6 +52,9 @@ only use:
 */
 .tw-hidden.tw-hidden { display: none !important; }
 
+/* proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128 */
+.tw-break-anywhere { overflow-wrap: anywhere !important; }
+
 @media (max-width: 767.98px) {
   /* double selector so it wins over .tw-flex (old .gt-df) etc */
   .not-mobile.not-mobile {
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index faeed8c9a1..47f55df7fa 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -1,11 +1,33 @@
-/* this contains override styles for buttons and related elements */
-
-/* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
-.ui.button,
-.ui.button:focus {
+/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
+   unused rules here after refactoring, please remove them. */
+
+.ui.button {
+  cursor: pointer;
+  display: inline-block;
+  min-height: 1em;
+  outline: none;
+  vertical-align: baseline;
+  font-family: var(--fonts-regular);
+  margin: 0 0.25em 0 0;
+  padding: 0.78571429em 1.5em;
+  font-weight: var(--font-weight-normal);
+  text-align: center;
+  text-decoration: none;
+  line-height: 1;
+  border-radius: 0.28571429rem;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  justify-content: center;
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
   color: var(--color-text);
+  white-space: nowrap;
+}
+
+@media (max-width: 767.98px) {
+  .ui.button {
+    white-space: normal;
+  }
 }
 
 .ui.button:hover {
@@ -13,10 +35,6 @@
   color: var(--color-text);
 }
 
-.page-content .ui.button {
-  box-shadow: none !important;
-}
-
 .ui.active.button,
 .ui.button:active,
 .ui.active.button:active,
@@ -25,89 +43,116 @@
   color: var(--color-text);
 }
 
-.delete-button,
-.delete-button:hover {
-  color: var(--color-red);
+.ui.buttons .disabled.button:not(.basic),
+.ui.disabled.button,
+.ui.button:disabled,
+.ui.disabled.button:hover,
+.ui.disabled.active.button {
+  cursor: default;
+  opacity: var(--opacity-disabled) !important;
+  background-image: none;
+  pointer-events: none !important;
 }
 
-/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
-
-.btn {
-  background: transparent;
-  border-radius: var(--border-radius);
+.ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  flex-direction: row;
+  background: none;
+  padding: 0 !important;
   border: none;
-  color: inherit;
+}
+.ui.labeled.button > .button {
   margin: 0;
-  padding: 0;
 }
-
-.btn:hover,
-.btn:active,
-.btn:focus {
-  background: none;
-  border: none;
+.ui.labeled.button > .label {
+  display: flex;
+  align-items: center;
+  margin: 0 0 0 -1px !important;
+  font-size: 1em;
+  border-color: var(--color-light-border);
 }
 
-a.btn,
-a.btn:hover {
-  color: inherit;
+.ui.button > .icon:not(.button) {
+  height: auto;
+  opacity: 0.8;
 }
-
-/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
-And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
-It needs some tricks to tweak the left/right borders with active state */
-
-.ui.buttons .button {
-  border-right: none;
+.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
+.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
+  margin: 0 0.42857143em 0 -0.21428571em;
+  vertical-align: baseline;
 }
-
-.ui.buttons .button:hover {
-  border-color: var(--color-secondary-dark-2);
+.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
+  vertical-align: baseline;
 }
-
-.ui.buttons .button:hover + .button {
-  border-left: 1px solid var(--color-secondary-dark-2);
+.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
+  margin: 0 -0.21428571em 0 0.42857143em;
 }
 
-/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
-.ui.buttons .button:first-child,
-.ui.buttons .button.tw-hidden:first-child + .button {
-  border-left: 1px solid var(--color-light-border);
+.ui.compact.buttons .button,
+.ui.compact.button {
+  padding: 0.58928571em 1.125em;
 }
-
-.ui.buttons .button:last-child,
-.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
-  border-right: 1px solid var(--color-light-border);
+.ui.compact.icon.buttons .button,
+.ui.compact.icon.button {
+  padding: 0.58928571em;
+}
+.ui.compact.labeled.icon.button {
+  padding: 0.58928571em 3.69642857em;
+}
+.ui.compact.labeled.icon.button > .icon {
+  padding: 0.58928571em 0;
 }
 
-.ui.buttons .button.active {
-  border-left: 1px solid var(--color-light-border);
-  border-right: 1px solid var(--color-light-border);
+.ui.buttons .button,
+.ui.button {
+  font-size: 1rem;
+}
+.ui.mini.buttons .dropdown,
+.ui.mini.buttons .dropdown .menu > .item,
+.ui.mini.buttons .button,
+.ui.ui.ui.ui.mini.button {
+  font-size: 0.78571429rem;
+}
+.ui.tiny.buttons .dropdown,
+.ui.tiny.buttons .dropdown .menu > .item,
+.ui.tiny.buttons .button,
+.ui.ui.ui.ui.tiny.button {
+  font-size: 0.85714286rem;
+}
+.ui.small.buttons .dropdown,
+.ui.small.buttons .dropdown .menu > .item,
+.ui.small.buttons .button,
+.ui.ui.ui.ui.small.button {
+  font-size: 0.92857143rem;
 }
 
-.ui.buttons .button.active + .button {
-  border-left: none;
+.ui.icon.buttons .button,
+.ui.icon.button:not(.compact) {
+  padding: 0.78571429em;
+}
+.ui.icon.buttons .button > .icon,
+.ui.icon.button > .icon {
+  margin: 0 !important;
+  vertical-align: top;
 }
 
 .ui.basic.buttons .button,
-.ui.basic.button,
-.ui.basic.buttons .button:hover,
-.ui.basic.button:hover {
-  box-shadow: none;
+.ui.basic.button {
+  border-radius: 0.28571429rem;
+  background: none;
 }
-
-/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
-   would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
-.ui.small.button:not(.compact):has(.svg) {
-  padding-top: 0.58928571em;
-  padding-bottom: 0.58928571em;
+.ui.basic.buttons {
+  border: 1px solid var(--color-secondary);
+  border-radius: 0.28571429rem;
+}
+.ui.basic.buttons .button {
+  border-radius: 0;
+  border-left: 1px solid var(--color-secondary);
 }
 
 .ui.labeled.button.disabled > .button,
 .ui.basic.buttons .button,
-.ui.basic.button,
-.ui.basic.buttons .button:focus,
-.ui.basic.button:focus {
+.ui.basic.button {
   color: var(--color-text-light);
   background: var(--color-button);
 }
@@ -129,23 +174,45 @@ It needs some tricks to tweak the left/right borders with active state */
   background: var(--color-active);
 }
 
-.ui.labeled.button > .label {
-  border-color: var(--color-light-border);
+.ui.labeled.icon.button {
+  position: relative;
+  padding-left: 4.07142857em !important;
+  padding-right: 1.5em !important;
 }
 
-.ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  line-height: 1;
+  border-radius: 0;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+  text-align: center;
+  animation: none;
+  padding: 0.78571429em 0;
+  margin: 0;
+  width: 2.57142857em;
   background: var(--color-hover);
 }
 
-/* primary */
+.ui.button.toggle.active {
+  background-color: var(--color-green);
+  color: var(--color-white);
+}
+.ui.button.toggle.active:hover {
+  background-color: var(--color-green-dark-1);
+  color: var(--color-white);
+}
+
+.ui.fluid.button {
+  width: 100%;
+  display: block;
+}
 
-.ui.primary.labels .label,
-.ui.ui.ui.primary.label,
 .ui.primary.button,
-.ui.primary.buttons .button,
-.ui.primary.button:focus,
-.ui.primary.buttons .button:focus {
+.ui.primary.buttons .button {
   background: var(--color-primary);
   color: var(--color-primary-contrast);
 }
@@ -162,11 +229,10 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.primary.buttons .button,
-.ui.basic.primary.button,
-.ui.basic.primary.buttons .button:focus,
-.ui.basic.primary.button:focus {
+.ui.basic.primary.button {
   color: var(--color-primary);
   border-color: var(--color-primary);
+  background: none;
 }
 
 .ui.basic.primary.buttons .button:hover,
@@ -181,55 +247,8 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-primary-active);
 }
 
-/* secondary */
-
-.ui.secondary.labels .label,
-.ui.ui.ui.secondary.label,
-.ui.secondary.button,
-.ui.secondary.buttons .button,
-.ui.secondary.button:focus,
-.ui.secondary.buttons .button:focus {
-  background: var(--color-secondary-button);
-}
-
-.ui.secondary.button:hover,
-.ui.secondary.buttons .button:hover {
-  background: var(--color-secondary-hover);
-}
-
-.ui.secondary.button:active,
-.ui.secondary.buttons .button:active {
-  background: var(--color-secondary-active);
-}
-
-.ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button,
-.ui.basic.secondary.button:focus,
-.ui.basic.secondary.buttons .button:focus {
-  color: var(--color-secondary-button);
-  border-color: var(--color-secondary-button);
-}
-
-.ui.basic.secondary.buttons .button:hover,
-.ui.basic.secondary.button:hover {
-  color: var(--color-secondary-hover);
-  border-color: var(--color-secondary-hover);
-}
-
-.ui.basic.secondary.buttons .button:active,
-.ui.basic.secondary.button:active {
-  color: var(--color-secondary-active);
-  border-color: var(--color-secondary-active);
-}
-
-/* red */
-
-.ui.red.labels .label,
-.ui.ui.ui.red.label,
 .ui.red.button,
-.ui.red.buttons .button,
-.ui.red.button:focus,
-.ui.red.buttons .button:focus {
+.ui.red.buttons .button {
   background: var(--color-red);
 }
 
@@ -244,11 +263,10 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.red.buttons .button,
-.ui.basic.red.button,
-.ui.basic.red.buttons .button:focus,
-.ui.basic.red.button:focus {
+.ui.basic.red.button {
   color: var(--color-red);
   border-color: var(--color-red);
+  background: none;
 }
 
 .ui.basic.red.buttons .button:hover,
@@ -263,137 +281,8 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-red-dark-2);
 }
 
-/* orange */
-
-.ui.orange.labels .label,
-.ui.ui.ui.orange.label,
-.ui.orange.button,
-.ui.orange.buttons .button,
-.ui.orange.button:focus,
-.ui.orange.buttons .button:focus {
-  background: var(--color-orange);
-}
-
-.ui.orange.button:hover,
-.ui.orange.buttons .button:hover {
-  background: var(--color-orange-dark-1);
-}
-
-.ui.orange.button:active,
-.ui.orange.buttons .button:active {
-  background: var(--color-orange-dark-2);
-}
-
-.ui.basic.orange.buttons .button,
-.ui.basic.orange.button,
-.ui.basic.orange.buttons .button:focus,
-.ui.basic.orange.button:focus {
-  color: var(--color-orange);
-  border-color: var(--color-orange);
-}
-
-.ui.basic.orange.buttons .button:hover,
-.ui.basic.orange.button:hover {
-  color: var(--color-orange-dark-1);
-  border-color: var(--color-orange-dark-1);
-}
-
-.ui.basic.orange.buttons .button:active,
-.ui.basic.orange.button:active {
-  color: var(--color-orange-dark-2);
-  border-color: var(--color-orange-dark-2);
-}
-
-/* yellow */
-
-.ui.yellow.labels .label,
-.ui.ui.ui.yellow.label,
-.ui.yellow.button,
-.ui.yellow.buttons .button,
-.ui.yellow.button:focus,
-.ui.yellow.buttons .button:focus {
-  background: var(--color-yellow);
-}
-
-.ui.yellow.button:hover,
-.ui.yellow.buttons .button:hover {
-  background: var(--color-yellow-dark-1);
-}
-
-.ui.yellow.button:active,
-.ui.yellow.buttons .button:active {
-  background: var(--color-yellow-dark-2);
-}
-
-.ui.basic.yellow.buttons .button,
-.ui.basic.yellow.button,
-.ui.basic.yellow.buttons .button:focus,
-.ui.basic.yellow.button:focus {
-  color: var(--color-yellow);
-  border-color: var(--color-yellow);
-}
-
-.ui.basic.yellow.buttons .button:hover,
-.ui.basic.yellow.button:hover {
-  color: var(--color-yellow-dark-1);
-  border-color: var(--color-yellow-dark-1);
-}
-
-.ui.basic.yellow.buttons .button:active,
-.ui.basic.yellow.button:active {
-  color: var(--color-yellow-dark-2);
-  border-color: var(--color-yellow-dark-2);
-}
-
-/* olive */
-
-.ui.olive.labels .label,
-.ui.ui.ui.olive.label,
-.ui.olive.button,
-.ui.olive.buttons .button,
-.ui.olive.button:focus,
-.ui.olive.buttons .button:focus {
-  background: var(--color-olive);
-}
-
-.ui.olive.button:hover,
-.ui.olive.buttons .button:hover {
-  background: var(--color-olive-dark-1);
-}
-
-.ui.olive.button:active,
-.ui.olive.buttons .button:active {
-  background: var(--color-olive-dark-2);
-}
-
-.ui.basic.olive.buttons .button,
-.ui.basic.olive.button,
-.ui.basic.olive.buttons .button:focus,
-.ui.basic.olive.button:focus {
-  color: var(--color-olive);
-  border-color: var(--color-olive);
-}
-
-.ui.basic.olive.buttons .button:hover,
-.ui.basic.olive.button:hover {
-  color: var(--color-olive-dark-1);
-  border-color: var(--color-olive-dark-1);
-}
-
-.ui.basic.olive.buttons .button:active,
-.ui.basic.olive.button:active {
-  color: var(--color-olive-dark-2);
-  border-color: var(--color-olive-dark-2);
-}
-
-/* green */
-
-.ui.green.labels .label,
-.ui.ui.ui.green.label,
 .ui.green.button,
-.ui.green.buttons .button,
-.ui.green.button:focus,
-.ui.green.buttons .button:focus {
+.ui.green.buttons .button {
   background: var(--color-green);
 }
 
@@ -408,11 +297,10 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.green.buttons .button,
-.ui.basic.green.button,
-.ui.basic.green.buttons .button:focus,
-.ui.basic.green.button:focus {
+.ui.basic.green.button {
   color: var(--color-green);
   border-color: var(--color-green);
+  background: none;
 }
 
 .ui.basic.green.buttons .button:hover,
@@ -427,326 +315,93 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-green-dark-2);
 }
 
-/* teal */
-
-.ui.teal.labels .label,
-.ui.ui.ui.teal.label,
-.ui.teal.button,
-.ui.teal.buttons .button,
-.ui.teal.button:focus,
-.ui.teal.buttons .button:focus {
-  background: var(--color-teal);
-}
-
-.ui.teal.button:hover,
-.ui.teal.buttons .button:hover {
-  background: var(--color-teal-dark-1);
+.ui.buttons {
+  display: inline-flex;
+  flex-direction: row;
+  font-size: 0;
+  vertical-align: baseline;
+  margin: 0 0.25em 0 0;
 }
 
-.ui.teal.button:active,
-.ui.teal.buttons .button:active {
-  background: var(--color-teal-dark-2);
-}
-
-.ui.basic.teal.buttons .button,
-.ui.basic.teal.button,
-.ui.basic.teal.buttons .button:focus,
-.ui.basic.teal.button:focus {
-  color: var(--color-teal);
-  border-color: var(--color-teal);
-}
-
-.ui.basic.teal.buttons .button:hover,
-.ui.basic.teal.button:hover {
-  color: var(--color-teal-dark-1);
-  border-color: var(--color-teal-dark-1);
-}
-
-.ui.basic.teal.buttons .button:active,
-.ui.basic.teal.button:active {
-  color: var(--color-teal-dark-2);
-  border-color: var(--color-teal-dark-2);
-}
-
-/* blue */
-
-.ui.blue.labels .label,
-.ui.ui.ui.blue.label,
-.ui.blue.button,
-.ui.blue.buttons .button,
-.ui.blue.button:focus,
-.ui.blue.buttons .button:focus {
-  background: var(--color-blue);
-}
-
-.ui.blue.button:hover,
-.ui.blue.buttons .button:hover {
-  background: var(--color-blue-dark-1);
-}
-
-.ui.blue.button:active,
-.ui.blue.buttons .button:active {
-  background: var(--color-blue-dark-2);
-}
-
-.ui.basic.blue.buttons .button,
-.ui.basic.blue.button,
-.ui.basic.blue.buttons .button:focus,
-.ui.basic.blue.button:focus {
-  color: var(--color-blue);
-  border-color: var(--color-blue);
-}
-
-.ui.basic.blue.buttons .button:hover,
-.ui.basic.blue.button:hover {
-  color: var(--color-blue-dark-1);
-  border-color: var(--color-blue-dark-1);
-}
-
-.ui.basic.blue.buttons .button:active,
-.ui.basic.blue.button:active {
-  color: var(--color-blue-dark-2);
-  border-color: var(--color-blue-dark-2);
-}
-
-/* violet */
-
-.ui.violet.labels .label,
-.ui.ui.ui.violet.label,
-.ui.violet.button,
-.ui.violet.buttons .button,
-.ui.violet.button:focus,
-.ui.violet.buttons .button:focus {
-  background: var(--color-violet);
-}
-
-.ui.violet.button:hover,
-.ui.violet.buttons .button:hover {
-  background: var(--color-violet-dark-1);
-}
-
-.ui.violet.button:active,
-.ui.violet.buttons .button:active {
-  background: var(--color-violet-dark-2);
-}
-
-.ui.basic.violet.buttons .button,
-.ui.basic.violet.button,
-.ui.basic.violet.buttons .button:focus,
-.ui.basic.violet.button:focus {
-  color: var(--color-violet);
-  border-color: var(--color-violet);
-}
-
-.ui.basic.violet.buttons .button:hover,
-.ui.basic.violet.button:hover {
-  color: var(--color-violet-dark-1);
-  border-color: var(--color-violet-dark-1);
-}
-
-.ui.basic.violet.buttons .button:active,
-.ui.basic.violet.button:active {
-  color: var(--color-violet-dark-2);
-  border-color: var(--color-violet-dark-2);
-}
-
-/* purple */
-
-.ui.purple.labels .label,
-.ui.ui.ui.purple.label,
-.ui.purple.button,
-.ui.purple.buttons .button,
-.ui.purple.button:focus,
-.ui.purple.buttons .button:focus {
-  background: var(--color-purple);
-}
-
-.ui.purple.button:hover,
-.ui.purple.buttons .button:hover {
-  background: var(--color-purple-dark-1);
-}
-
-.ui.purple.button:active,
-.ui.purple.buttons .button:active {
-  background: var(--color-purple-dark-2);
-}
-
-.ui.basic.purple.buttons .button,
-.ui.basic.purple.button,
-.ui.basic.purple.buttons .button:focus,
-.ui.basic.purple.button:focus {
-  color: var(--color-purple);
-  border-color: var(--color-purple);
-}
-
-.ui.basic.purple.buttons .button:hover,
-.ui.basic.purple.button:hover {
-  color: var(--color-purple-dark-1);
-  border-color: var(--color-purple-dark-1);
-}
-
-.ui.basic.purple.buttons .button:active,
-.ui.basic.purple.button:active {
-  color: var(--color-purple-dark-2);
-  border-color: var(--color-purple-dark-2);
-}
-
-/* pink */
-
-.ui.pink.labels .label,
-.ui.ui.ui.pink.label,
-.ui.pink.button,
-.ui.pink.buttons .button,
-.ui.pink.button:focus,
-.ui.pink.buttons .button:focus {
-  background: var(--color-pink);
-}
-
-.ui.pink.button:hover,
-.ui.pink.buttons .button:hover {
-  background: var(--color-pink-dark-1);
-}
-
-.ui.pink.button:active,
-.ui.pink.buttons .button:active {
-  background: var(--color-pink-dark-2);
-}
-
-.ui.basic.pink.buttons .button,
-.ui.basic.pink.button,
-.ui.basic.pink.buttons .button:focus,
-.ui.basic.pink.button:focus {
-  color: var(--color-pink);
-  border-color: var(--color-pink);
-}
-
-.ui.basic.pink.buttons .button:hover,
-.ui.basic.pink.button:hover {
-  color: var(--color-pink-dark-1);
-  border-color: var(--color-pink-dark-1);
-}
-
-.ui.basic.pink.buttons .button:active,
-.ui.basic.pink.button:active {
-  color: var(--color-pink-dark-2);
-  border-color: var(--color-pink-dark-2);
-}
-
-/* brown */
-
-.ui.brown.labels .label,
-.ui.ui.ui.brown.label,
-.ui.brown.button,
-.ui.brown.buttons .button,
-.ui.brown.button:focus,
-.ui.brown.buttons .button:focus {
-  background: var(--color-brown);
-}
-
-.ui.brown.button:hover,
-.ui.brown.buttons .button:hover {
-  background: var(--color-brown-dark-1);
-}
-
-.ui.brown.button:active,
-.ui.brown.buttons .button:active {
-  background: var(--color-brown-dark-2);
+.delete-button,
+.delete-button:hover {
+  color: var(--color-red);
 }
 
-.ui.basic.brown.buttons .button,
-.ui.basic.brown.button,
-.ui.basic.brown.buttons .button:focus,
-.ui.basic.brown.button:focus {
-  color: var(--color-brown);
-  border-color: var(--color-brown);
-}
+/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
 
-.ui.basic.brown.buttons .button:hover,
-.ui.basic.brown.button:hover {
-  color: var(--color-brown-dark-1);
-  border-color: var(--color-brown-dark-1);
+.btn {
+  background: transparent;
+  border-radius: var(--border-radius);
+  border: none;
+  color: inherit;
+  margin: 0;
+  padding: 0;
 }
 
-.ui.basic.brown.buttons .button:active,
-.ui.basic.brown.button:active {
-  color: var(--color-brown-dark-2);
-  border-color: var(--color-brown-dark-2);
+.btn:hover,
+.btn:active {
+  background: none;
+  border: none;
 }
 
-/* negative */
-
-.ui.negative.buttons .button,
-.ui.negative.button,
-.ui.negative.buttons .button:focus,
-.ui.negative.button:focus {
-  background: var(--color-red);
+a.btn,
+a.btn:hover {
+  color: inherit;
 }
 
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover {
-  background: var(--color-red-dark-1);
-}
+/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
+And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
+It needs some tricks to tweak the left/right borders with active state */
 
-.ui.negative.buttons .button:active,
-.ui.negative.button:active {
-  background: var(--color-red-dark-2);
+.ui.buttons .button {
+  border-right: none;
+  flex: 1 0 auto;
+  border-radius: 0;
+  margin: 0;
 }
-
-.ui.basic.negative.buttons .button,
-.ui.basic.negative.button,
-.ui.basic.negative.buttons .button:focus,
-.ui.basic.negative.button:focus {
-  color: var(--color-red);
-  border-color: var(--color-red);
+.ui.buttons .button:first-child {
+  border-left: none;
+  margin-left: 0;
+  border-top-left-radius: 0.28571429rem;
+  border-bottom-left-radius: 0.28571429rem;
 }
-
-.ui.basic.negative.buttons .button:hover,
-.ui.basic.negative.button:hover {
-  color: var(--color-red-dark-1);
-  border-color: var(--color-red-dark-1);
+.ui.buttons .button:last-child {
+  border-top-right-radius: 0.28571429rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 
-.ui.basic.negative.buttons .button:active,
-.ui.basic.negative.button:active {
-  color: var(--color-red-dark-2);
-  border-color: var(--color-red-dark-2);
+.ui.buttons .button:hover {
+  border-color: var(--color-secondary-dark-2);
 }
 
-/* positive */
-
-.ui.positive.buttons .button,
-.ui.positive.button,
-.ui.positive.buttons .button:focus,
-.ui.positive.button:focus {
-  background: var(--color-green);
+.ui.buttons .button:hover + .button {
+  border-left: 1px solid var(--color-secondary-dark-2);
 }
 
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover {
-  background: var(--color-green-dark-1);
+/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
+.ui.buttons .button:first-child,
+.ui.buttons .button.tw-hidden:first-child + .button {
+  border-left: 1px solid var(--color-light-border);
 }
 
-.ui.positive.buttons .button:active,
-.ui.positive.button:active {
-  background: var(--color-green-dark-2);
+.ui.buttons .button:last-child,
+.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
+  border-right: 1px solid var(--color-light-border);
 }
 
-.ui.basic.positive.buttons .button,
-.ui.basic.positive.button,
-.ui.basic.positive.buttons .button:focus,
-.ui.basic.positive.button:focus {
-  color: var(--color-green);
-  border-color: var(--color-green);
+.ui.buttons .button.active {
+  border-left: 1px solid var(--color-light-border);
+  border-right: 1px solid var(--color-light-border);
 }
 
-.ui.basic.positive.buttons .button:hover,
-.ui.basic.positive.button:hover {
-  color: var(--color-green-dark-1);
-  border-color: var(--color-green-dark-1);
+.ui.buttons .button.active + .button {
+  border-left: none;
 }
 
-.ui.basic.positive.buttons .button:active,
-.ui.basic.positive.button:active {
-  color: var(--color-green-dark-2);
-  border-color: var(--color-green-dark-2);
+/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
+   would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
+.ui.small.button:not(.compact):has(.svg) {
+  padding-top: 0.58928571em;
+  padding-bottom: 0.58928571em;
 }
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index 54a4ef81ca..a2acfeaa15 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -10,6 +10,10 @@
   top: 1.2em;
 }
 
+.ui.modal > .close.inside {
+  color: inherit;
+}
+
 .ui.modal > .close.icon[height="16"] {
   top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */
   color: var(--color-text-dark);
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 52f9d5a6ca..887789115e 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -654,15 +654,15 @@ td .commit-summary {
   padding: 2px .5rem;
 }
 
-.repository.view.issue .issue-title .index {
+.issue-title .index {
   color: var(--color-text-light-2);
 }
 
-.repository.view.issue .issue-title .label {
+.issue-title .label {
   margin-right: 10px;
 }
 
-.repository.view.issue .issue-title .edit-zone {
+.issue-title .edit-zone {
   margin-top: 10px;
 }
 
@@ -1164,14 +1164,6 @@ td .commit-summary {
   font-size: 14px;
 }
 
-.repository.compare.pull .title .issue-title {
-  margin-bottom: 0.5rem;
-}
-
-.repository.compare.pull .title .issue-title .index {
-  color: var(--color-text-light-2);
-}
-
 .repository .ui.dropdown.filter > .menu {
   margin-top: 1px;
 }