diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 583f585226..8c5db4d887 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -102,7 +102,7 @@
 
 	<div>
 		<h1>Loading</h1>
-		<div class="is-loading small-loading-icon tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div>
+		<div class="is-loading loading-icon-2px tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div>
 		<div class="is-loading tw-border tw-border-secondary tw-py-4">
 			<p>loading ...</p>
 			<p>loading ...</p>
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 62b79e28a0..1c103f09f0 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -684,7 +684,7 @@
 		{{if and (not (eq .Issue.PullRequest.HeadRepo.FullName .Issue.PullRequest.BaseRepo.FullName)) .CanWriteToHeadRepo}}
 			<div class="divider"></div>
 			<div class="inline field">
-				<div class="ui checkbox small-loading-icon" id="allow-edits-from-maintainers"
+				<div class="ui checkbox loading-icon-2px" id="allow-edits-from-maintainers"
 						data-url="{{.Issue.Link}}"
 						data-tooltip-content="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"
 						data-prompt-error="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_err"}}"
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 04b459175e..c39cdf6a08 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -317,12 +317,6 @@ a.label,
   background-color: var(--color-label-bg);
 }
 
-/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
-.ui.input > input {
-  line-height: var(--line-height-default);
-  text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
-}
-
 /* fix Fomantic's line-height causing vertical scrollbars to appear */
 ul.ui.list li,
 ol.ui.list li,
@@ -331,47 +325,6 @@ ol.ui.list li,
   line-height: var(--line-height-default);
 }
 
-.ui.input.focus > input,
-.ui.input > input:focus {
-  border-color: var(--color-primary);
-}
-
-.ui.action.input .ui.ui.button {
-  border-color: var(--color-input-border);
-  padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
-  padding-bottom: 0;
-}
-
-/* currently used for search bar dropdowns in repo search and explore code */
-.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
-  min-width: 10em;
-}
-.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
-  border-right: none;
-}
-.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
-  border-color: var(--color-input-border);
-}
-.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-.ui.action.input:not([class*="left action"]) > input,
-.ui.action.input:not([class*="left action"]) > input:hover {
-  border-right: none;
-}
-.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
-.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
-.ui.action.input:not([class*="left action"]) > input:focus + .button,
-.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
-.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button,
-.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
-  border-left-color: var(--color-primary);
-}
-.ui.action.input:not([class*="left action"]) > input:focus {
-  border-right-color: var(--color-primary);
-}
-
 .ui.menu {
   display: flex;
 }
@@ -1621,16 +1574,6 @@ table th[data-sortt-desc] .svg {
   align-items: stretch;
 }
 
-.ui.ui.icon.input .icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ui.icon.input > i.icon {
-  transition: none;
-}
-
 .flex-items-block > .item,
 .flex-text-block {
   display: flex;
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 445b20dc12..b0201bb25a 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/input.css";
 @import "./modules/label.css";
 @import "./modules/segment.css";
 @import "./modules/grid.css";
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 0f78ad25cb..361618c449 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -34,10 +34,14 @@
   border-radius: var(--border-radius-circle);
 }
 
-.is-loading.small-loading-icon::after {
+.is-loading.loading-icon-2px::after {
   border-width: 2px;
 }
 
+.is-loading.loading-icon-3px::after {
+  border-width: 3px;
+}
+
 /* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
 form.single-button-form.is-loading > * {
   opacity: 1;
@@ -62,7 +66,7 @@ form.single-button-form.is-loading .button {
   background: transparent;
 }
 
-/* TODO: not needed, use "is-loading small-loading-icon" instead */
+/* TODO: not needed, use "is-loading loading-icon-2px" instead */
 code.language-math.is-loading::after {
   padding: 0;
   border-width: 2px;
diff --git a/web_src/css/modules/input.css b/web_src/css/modules/input.css
new file mode 100644
index 0000000000..48cd2fa9ff
--- /dev/null
+++ b/web_src/css/modules/input.css
@@ -0,0 +1,192 @@
+/* based on Fomantic UI input module, with just the parts extracted that we use. If you find any
+   unused rules here after refactoring, please remove them. */
+
+.ui.input {
+  position: relative;
+  font-weight: var(--font-weight-normal);
+  display: inline-flex;
+  color: var(--color-input-text);
+}
+.ui.input > input {
+  margin: 0;
+  max-width: 100%;
+  flex: 1 0 auto;
+  outline: none;
+  font-family: var(--fonts-regular);
+  padding: 0.67857143em 1em;
+  border: 1px solid var(--color-input-border);
+  color: var(--color-input-text);
+  border-radius: 0.28571429rem;
+  line-height: var(--line-height-default);
+  text-align: start;
+}
+
+.ui.disabled.input,
+.ui.input:not(.disabled) input[disabled] {
+  opacity: var(--opacity-disabled);
+}
+.ui.disabled.input > input,
+.ui.input:not(.disabled) input[disabled] {
+  pointer-events: none;
+}
+
+.ui.input.focus > input,
+.ui.input > input:focus {
+  border-color: var(--color-primary);
+}
+
+.ui.input.error > input {
+  background: var(--color-error-bg);
+  border-color: var(--color-error-border);
+  color: var(--color-error-text);
+}
+
+.ui.icon.input > i.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.5;
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+  pointer-events: none;
+  padding: 4px;
+}
+
+.ui.icon.input > i.icon.is-loading {
+  position: absolute !important;
+}
+
+.ui.icon.input > i.icon.is-loading > * {
+  visibility: hidden;
+}
+
+.ui.ui.ui.ui.icon.input > textarea,
+.ui.ui.ui.ui.icon.input > input {
+  padding-right: 2.67142857em;
+}
+.ui.icon.input > i.link.icon {
+  cursor: pointer;
+}
+.ui.icon.input > i.circular.icon {
+  top: 0.35em;
+  right: 0.5em;
+}
+
+.ui[class*="left icon"].input > i.icon {
+  right: auto;
+  left: 8px;
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
+}
+.ui[class*="left icon"].input > i.circular.icon {
+  right: auto;
+  left: 0.5em;
+}
+.ui.ui.ui.ui[class*="left icon"].input > textarea,
+.ui.ui.ui.ui[class*="left icon"].input > input {
+  padding-left: 2.67142857em;
+  padding-right: 1em;
+}
+
+.ui.icon.input > textarea:focus ~ .icon,
+.ui.icon.input > input:focus ~ .icon {
+  opacity: 1;
+}
+
+.ui.icon.input > textarea ~ i.icon {
+  height: 3em;
+}
+
+.ui.form .field.error > .ui.action.input > .ui.button,
+.ui.action.input.error > .ui.button {
+  border-top: 1px solid var(--color-error-border);
+  border-bottom: 1px solid var(--color-error-border);
+}
+
+.ui.action.input > .button,
+.ui.action.input > .buttons {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+.ui.action.input > .button,
+.ui.action.input > .buttons > .button {
+  padding-top: 0.78571429em;
+  padding-bottom: 0.78571429em;
+  margin: 0;
+}
+
+.ui.action.input:not([class*="left action"]) > input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right-color: transparent;
+}
+
+.ui.action.input > .dropdown:first-child,
+.ui.action.input > .button:first-child,
+.ui.action.input > .buttons:first-child > .button {
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
+}
+.ui.action.input > .dropdown:not(:first-child),
+.ui.action.input > .button:not(:first-child),
+.ui.action.input > .buttons:not(:first-child) > .button {
+  border-radius: 0;
+}
+.ui.action.input > .dropdown:last-child,
+.ui.action.input > .button:last-child,
+.ui.action.input > .buttons:last-child > .button {
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+}
+
+.ui.fluid.input {
+  display: flex;
+}
+.ui.fluid.input > input {
+  width: 0 !important;
+}
+
+.ui.tiny.input {
+  font-size: 0.85714286em;
+}
+.ui.small.input {
+  font-size: 0.92857143em;
+}
+
+.ui.action.input .ui.ui.button {
+  border-color: var(--color-input-border);
+  padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
+  padding-bottom: 0;
+}
+
+/* currently used for search bar dropdowns in repo search and explore code */
+.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
+  min-width: 10em;
+}
+.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
+  border-right: none;
+}
+.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
+  border-color: var(--color-input-border);
+}
+.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.ui.action.input:not([class*="left action"]) > input,
+.ui.action.input:not([class*="left action"]) > input:hover {
+  border-right: none;
+}
+.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
+.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
+.ui.action.input:not([class*="left action"]) > input:focus + .button,
+.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
+.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button,
+.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
+  border-left-color: var(--color-primary);
+}
+.ui.action.input:not([class*="left action"]) > input:focus {
+  border-right-color: var(--color-primary);
+}
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 525a3af8c6..5cb6a371e5 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -6474,750 +6474,6 @@ select.ui.dropdown {
          Theme Overrides
 *******************************/
 
-/*******************************
-         Site Overrides
-*******************************/
-/*!
- * # Fomantic-UI - Input
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-           Standard
-*******************************/
-
-/*--------------------
-        Inputs
----------------------*/
-
-.ui.input {
-  position: relative;
-  font-weight: normal;
-  font-style: normal;
-  display: inline-flex;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-.ui.input > input {
-  margin: 0;
-  max-width: 100%;
-  flex: 1 0 auto;
-  outline: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-align: left;
-  line-height: 1.21428571em;
-  font-family: var(--fonts-regular);
-  padding: 0.67857143em 1em;
-  background: #FFFFFF;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0.28571429rem;
-  transition: box-shadow 0.1s ease, border-color 0.1s ease;
-  box-shadow: none;
-}
-
-/*--------------------
-      Placeholder
----------------------*/
-
-/* browsers require these rules separate */
-
-.ui.input > input::-webkit-input-placeholder {
-  color: rgba(191, 191, 191, 0.87);
-}
-
-.ui.input > input::-moz-placeholder {
-  color: rgba(191, 191, 191, 0.87);
-}
-
-.ui.input > input:-ms-input-placeholder {
-  color: rgba(191, 191, 191, 0.87);
-}
-
-/*******************************
-            States
-*******************************/
-
-/*--------------------
-          Disabled
-  ---------------------*/
-
-.ui.disabled.input,
-.ui.input:not(.disabled) input[disabled] {
-  opacity: var(--opacity-disabled);
-}
-
-.ui.disabled.input > input,
-.ui.input:not(.disabled) input[disabled] {
-  pointer-events: none;
-}
-
-/*--------------------
-        Active
----------------------*/
-
-.ui.input > input:active,
-.ui.input.down input {
-  border-color: rgba(0, 0, 0, 0.3);
-  background: #FAFAFA;
-  color: rgba(0, 0, 0, 0.87);
-  box-shadow: none;
-}
-
-/*--------------------
-         Loading
-  ---------------------*/
-
-.ui.loading.loading.input > i.icon:before {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.28571429em;
-  height: 1.28571429em;
-  border-radius: 500rem;
-  border: 0.2em solid rgba(0, 0, 0, 0.1);
-}
-
-.ui.loading.loading.input > i.icon:after {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.28571429em;
-  height: 1.28571429em;
-  animation: loader 0.6s infinite linear;
-  border: 0.2em solid #767676;
-  border-radius: 500rem;
-  box-shadow: 0 0 0 1px transparent;
-}
-
-/*--------------------
-        Focus
----------------------*/
-
-.ui.input.focus > input,
-.ui.input > input:focus {
-  border-color: #85B7D9;
-  background: #FFFFFF;
-  color: rgba(0, 0, 0, 0.8);
-  box-shadow: none;
-}
-
-.ui.input.focus > input::-webkit-input-placeholder,
-.ui.input > input:focus::-webkit-input-placeholder {
-  color: rgba(115, 115, 115, 0.87);
-}
-
-.ui.input.focus > input::-moz-placeholder,
-.ui.input > input:focus::-moz-placeholder {
-  color: rgba(115, 115, 115, 0.87);
-}
-
-.ui.input.focus > input:-ms-input-placeholder,
-.ui.input > input:focus:-ms-input-placeholder {
-  color: rgba(115, 115, 115, 0.87);
-}
-
-/*--------------------
-          States
-  ---------------------*/
-
-.ui.input.error > input {
-  background-color: #FFF6F6;
-  border-color: #E0B4B4;
-  color: #9F3A38;
-  box-shadow: none;
-}
-
-/* Placeholder */
-
-.ui.input.error > input::-webkit-input-placeholder {
-  color: #e7bdbc;
-}
-
-.ui.input.error > input::-moz-placeholder {
-  color: #e7bdbc;
-}
-
-.ui.input.error > input:-ms-input-placeholder {
-  color: #e7bdbc !important;
-}
-
-/* Focused Placeholder */
-
-.ui.input.error > input:focus::-webkit-input-placeholder {
-  color: #da9796;
-}
-
-.ui.input.error > input:focus::-moz-placeholder {
-  color: #da9796;
-}
-
-.ui.input.error > input:focus:-ms-input-placeholder {
-  color: #da9796 !important;
-}
-
-.ui.input.info > input {
-  background-color: #F8FFFF;
-  border-color: #A9D5DE;
-  color: #276F86;
-  box-shadow: none;
-}
-
-/* Placeholder */
-
-.ui.input.info > input::-webkit-input-placeholder {
-  color: #98cfe1;
-}
-
-.ui.input.info > input::-moz-placeholder {
-  color: #98cfe1;
-}
-
-.ui.input.info > input:-ms-input-placeholder {
-  color: #98cfe1 !important;
-}
-
-/* Focused Placeholder */
-
-.ui.input.info > input:focus::-webkit-input-placeholder {
-  color: #70bdd6;
-}
-
-.ui.input.info > input:focus::-moz-placeholder {
-  color: #70bdd6;
-}
-
-.ui.input.info > input:focus:-ms-input-placeholder {
-  color: #70bdd6 !important;
-}
-
-.ui.input.success > input {
-  background-color: #FCFFF5;
-  border-color: #A3C293;
-  color: #2C662D;
-  box-shadow: none;
-}
-
-/* Placeholder */
-
-.ui.input.success > input::-webkit-input-placeholder {
-  color: #8fcf90;
-}
-
-.ui.input.success > input::-moz-placeholder {
-  color: #8fcf90;
-}
-
-.ui.input.success > input:-ms-input-placeholder {
-  color: #8fcf90 !important;
-}
-
-/* Focused Placeholder */
-
-.ui.input.success > input:focus::-webkit-input-placeholder {
-  color: #6cbf6d;
-}
-
-.ui.input.success > input:focus::-moz-placeholder {
-  color: #6cbf6d;
-}
-
-.ui.input.success > input:focus:-ms-input-placeholder {
-  color: #6cbf6d !important;
-}
-
-.ui.input.warning > input {
-  background-color: #FFFAF3;
-  border-color: #C9BA9B;
-  color: #573A08;
-  box-shadow: none;
-}
-
-/* Placeholder */
-
-.ui.input.warning > input::-webkit-input-placeholder {
-  color: #edad3e;
-}
-
-.ui.input.warning > input::-moz-placeholder {
-  color: #edad3e;
-}
-
-.ui.input.warning > input:-ms-input-placeholder {
-  color: #edad3e !important;
-}
-
-/* Focused Placeholder */
-
-.ui.input.warning > input:focus::-webkit-input-placeholder {
-  color: #e39715;
-}
-
-.ui.input.warning > input:focus::-moz-placeholder {
-  color: #e39715;
-}
-
-.ui.input.warning > input:focus:-ms-input-placeholder {
-  color: #e39715 !important;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*--------------------
-        Transparent
-  ---------------------*/
-
-.ui.transparent.input > textarea,
-.ui.transparent.input > input {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  padding: 0;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-}
-
-.field .ui.transparent.input > textarea {
-  padding: 0.67857143em 1em;
-}
-
-/* Transparent Icon */
-
-:not(.field) > .ui.transparent.icon.input > i.icon {
-  width: 1.1em;
-}
-
-:not(.field) > .ui.ui.ui.transparent.icon.input > input {
-  padding-left: 0;
-  padding-right: 2em;
-}
-
-:not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input {
-  padding-left: 2em;
-  padding-right: 0;
-}
-
-/*--------------------
-           Icon
-  ---------------------*/
-
-.ui.icon.input > i.icon {
-  cursor: default;
-  position: absolute;
-  line-height: 1;
-  text-align: center;
-  top: 0;
-  right: 0;
-  margin: 0;
-  height: 100%;
-  width: 2.67142857em;
-  opacity: 0.5;
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-  transition: opacity 0.3s ease;
-}
-
-.ui.icon.input > i.icon:not(.link) {
-  pointer-events: none;
-}
-
-.ui.ui.ui.ui.icon.input > textarea,
-.ui.ui.ui.ui.icon.input > input {
-  padding-right: 2.67142857em;
-}
-
-.ui.icon.input > i.icon:before,
-.ui.icon.input > i.icon:after {
-  left: 0;
-  position: absolute;
-  text-align: center;
-  top: 50%;
-  width: 100%;
-  margin-top: -0.5em;
-}
-
-.ui.icon.input > i.link.icon {
-  cursor: pointer;
-}
-
-.ui.icon.input > i.circular.icon {
-  top: 0.35em;
-  right: 0.5em;
-}
-
-/* Left Icon Input */
-
-.ui[class*="left icon"].input > i.icon {
-  right: auto;
-  left: 1px;
-  border-radius: 0.28571429rem 0 0 0.28571429rem;
-}
-
-.ui[class*="left icon"].input > i.circular.icon {
-  right: auto;
-  left: 0.5em;
-}
-
-.ui.ui.ui.ui[class*="left icon"].input > textarea,
-.ui.ui.ui.ui[class*="left icon"].input > input {
-  padding-left: 2.67142857em;
-  padding-right: 1em;
-}
-
-/* Focus */
-
-.ui.icon.input > textarea:focus ~ i.icon,
-.ui.icon.input > input:focus ~ i.icon {
-  opacity: 1;
-}
-
-/*--------------------
-          Labeled
-  ---------------------*/
-
-/* Adjacent Label */
-
-.ui.labeled.input > .label {
-  flex: 0 0 auto;
-  margin: 0;
-  font-size: 1em;
-}
-
-.ui.labeled.input > .label:not(.corner) {
-  padding-top: 0.78571429em;
-  padding-bottom: 0.78571429em;
-}
-
-/* Regular Label on Left */
-
-.ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left-color: transparent;
-}
-
-.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
-  border-left-color: #85B7D9;
-}
-
-/* Regular Label on Right */
-
-.ui[class*="right labeled"].input > input {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  border-right-color: transparent !important;
-}
-
-.ui[class*="right labeled"].input > input + .label {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.ui[class*="right labeled"].input > input:focus {
-  border-right-color: #85B7D9 !important;
-}
-
-/* Corner Label */
-
-.ui.labeled.input .corner.label {
-  top: 1px;
-  right: 1px;
-  font-size: 0.64285714em;
-  border-radius: 0 0.28571429rem 0 0;
-}
-
-/* Spacing with corner label */
-
-.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
-.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
-  padding-right: 2.5em !important;
-}
-
-.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
-.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
-  padding-right: 3.25em !important;
-}
-
-.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon {
-  margin-right: 1.25em;
-}
-
-/* Left Labeled */
-
-.ui[class*="left corner labeled"].labeled.input > textarea,
-.ui[class*="left corner labeled"].labeled.input > input {
-  padding-left: 2.5em !important;
-}
-
-.ui[class*="left corner labeled"].icon.input > textarea,
-.ui[class*="left corner labeled"].icon.input > input {
-  padding-left: 3.25em !important;
-}
-
-.ui[class*="left corner labeled"].icon.input > i.icon {
-  margin-left: 1.25em;
-}
-
-.ui.icon.input > textarea ~ i.icon {
-  height: 3em;
-}
-
-:not(.field) > .ui.transparent.icon.input > textarea ~ i.icon {
-  height: 1.3em;
-}
-
-/* Corner Label Position  */
-
-.ui.input > .ui.corner.label {
-  top: 1px;
-  right: 1px;
-}
-
-.ui.input > .ui.left.corner.label {
-  right: auto;
-  left: 1px;
-}
-
-/* Labeled and action input states */
-
-.ui.form .field.error > .ui.action.input > .ui.button,
-.ui.form .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
-.ui.action.input.error > .ui.button,
-.ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label {
-  border-top: 1px solid #E0B4B4;
-  border-bottom: 1px solid #E0B4B4;
-}
-
-.ui.form .field.error > .ui[class*="left action"].input > .ui.button,
-.ui.form .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
-.ui[class*="left action"].input.error > .ui.button,
-.ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label {
-  border-left: 1px solid #E0B4B4;
-}
-
-.ui.form .field.error > .ui.action.input:not([class*="left action"]) > input + .ui.button,
-.ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
-.ui.action.input.error:not([class*="left action"]) > input + .ui.button,
-.ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label {
-  border-right: 1px solid #E0B4B4;
-}
-
-.ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
-.ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child {
-  border-left: 1px solid #E0B4B4;
-}
-
-.ui.form .field.info > .ui.action.input > .ui.button,
-.ui.form .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
-.ui.action.input.info > .ui.button,
-.ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label {
-  border-top: 1px solid #A9D5DE;
-  border-bottom: 1px solid #A9D5DE;
-}
-
-.ui.form .field.info > .ui[class*="left action"].input > .ui.button,
-.ui.form .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
-.ui[class*="left action"].input.info > .ui.button,
-.ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label {
-  border-left: 1px solid #A9D5DE;
-}
-
-.ui.form .field.info > .ui.action.input:not([class*="left action"]) > input + .ui.button,
-.ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
-.ui.action.input.info:not([class*="left action"]) > input + .ui.button,
-.ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label {
-  border-right: 1px solid #A9D5DE;
-}
-
-.ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
-.ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child {
-  border-left: 1px solid #A9D5DE;
-}
-
-.ui.form .field.success > .ui.action.input > .ui.button,
-.ui.form .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
-.ui.action.input.success > .ui.button,
-.ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label {
-  border-top: 1px solid #A3C293;
-  border-bottom: 1px solid #A3C293;
-}
-
-.ui.form .field.success > .ui[class*="left action"].input > .ui.button,
-.ui.form .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
-.ui[class*="left action"].input.success > .ui.button,
-.ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label {
-  border-left: 1px solid #A3C293;
-}
-
-.ui.form .field.success > .ui.action.input:not([class*="left action"]) > input + .ui.button,
-.ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
-.ui.action.input.success:not([class*="left action"]) > input + .ui.button,
-.ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label {
-  border-right: 1px solid #A3C293;
-}
-
-.ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
-.ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child {
-  border-left: 1px solid #A3C293;
-}
-
-.ui.form .field.warning > .ui.action.input > .ui.button,
-.ui.form .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
-.ui.action.input.warning > .ui.button,
-.ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label {
-  border-top: 1px solid #C9BA9B;
-  border-bottom: 1px solid #C9BA9B;
-}
-
-.ui.form .field.warning > .ui[class*="left action"].input > .ui.button,
-.ui.form .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
-.ui[class*="left action"].input.warning > .ui.button,
-.ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label {
-  border-left: 1px solid #C9BA9B;
-}
-
-.ui.form .field.warning > .ui.action.input:not([class*="left action"]) > input + .ui.button,
-.ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
-.ui.action.input.warning:not([class*="left action"]) > input + .ui.button,
-.ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label {
-  border-right: 1px solid #C9BA9B;
-}
-
-.ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
-.ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child {
-  border-left: 1px solid #C9BA9B;
-}
-
-/*--------------------
-          Action
-  ---------------------*/
-
-.ui.action.input > .button,
-.ui.action.input > .buttons {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-}
-
-.ui.action.input > .button,
-.ui.action.input > .buttons > .button {
-  padding-top: 0.78571429em;
-  padding-bottom: 0.78571429em;
-  margin: 0;
-}
-
-/* Input when ui Left*/
-
-.ui[class*="left action"].input > input {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left-color: transparent;
-}
-
-/* Input when ui Right*/
-
-.ui.action.input:not([class*="left action"]) > input {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right-color: transparent;
-}
-
-/* Button and Dropdown */
-
-.ui.action.input > .dropdown:first-child,
-.ui.action.input > .button:first-child,
-.ui.action.input > .buttons:first-child > .button {
-  border-radius: 0.28571429rem 0 0 0.28571429rem;
-}
-
-.ui.action.input > .dropdown:not(:first-child),
-.ui.action.input > .button:not(:first-child),
-.ui.action.input > .buttons:not(:first-child) > .button {
-  border-radius: 0;
-}
-
-.ui.action.input > .dropdown:last-child,
-.ui.action.input > .button:last-child,
-.ui.action.input > .buttons:last-child > .button {
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-}
-
-/* Input Focus */
-
-.ui.action.input:not([class*="left action"]) > input:focus {
-  border-right-color: #85B7D9;
-}
-
-.ui.ui[class*="left action"].input > input:focus {
-  border-left-color: #85B7D9;
-}
-
-/*--------------------
-          Fluid
-  ---------------------*/
-
-.ui.fluid.input {
-  display: flex;
-}
-
-.ui.fluid.input > input {
-  width: 0 !important;
-}
-
-/*--------------------
-        Size
----------------------*/
-
-.ui.input {
-  font-size: 1em;
-}
-
-.ui.mini.input {
-  font-size: 0.78571429em;
-}
-
-.ui.tiny.input {
-  font-size: 0.85714286em;
-}
-
-.ui.small.input {
-  font-size: 0.92857143em;
-}
-
-.ui.large.input {
-  font-size: 1.14285714em;
-}
-
-.ui.big.input {
-  font-size: 1.28571429em;
-}
-
-.ui.huge.input {
-  font-size: 1.42857143em;
-}
-
-.ui.massive.input {
-  font-size: 1.71428571em;
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
 /*******************************
          Site Overrides
 *******************************/
diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json
index 151273f3ca..7ec520f315 100644
--- a/web_src/fomantic/semantic.json
+++ b/web_src/fomantic/semantic.json
@@ -26,7 +26,6 @@
     "dimmer",
     "dropdown",
     "form",
-    "input",
     "list",
     "menu",
     "modal",
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index fe956a593a..13c54e8a74 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -350,10 +350,10 @@ export default sfc; // activate the IDE's Vue plugin
           <span class="ui grey label tw-ml-2">{{ reposTotalCount }}</span>
         </div>
       </h4>
-      <div class="ui top attached segment repos-search gt-rounded-top">
-        <div class="ui fluid action left icon input" :class="{loading: isLoading}">
+      <div class="ui attached segment repos-search">
+        <div class="ui small fluid action left icon input">
           <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
-          <i class="icon"><svg-icon name="octicon-search" :size="16"/></i>
+          <i class="icon loading-icon-3px" :class="{'is-loading': isLoading}"><svg-icon name="octicon-search" :size="16"/></i>
           <div class="ui dropdown icon button" :title="textFilter">
             <svg-icon name="octicon-filter" :size="16"/>
             <div class="menu">
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 009dbd9421..e7db9b2336 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -109,7 +109,7 @@ async function fetchActionDoRequest(actionElem, url, opt) {
       showErrorToast(`${i18n.network_error} ${e}`);
     }
   }
-  actionElem.classList.remove('is-loading', 'small-loading-icon');
+  actionElem.classList.remove('is-loading', 'loading-icon-2px');
 }
 
 async function formFetchAction(e) {
@@ -121,7 +121,7 @@ async function formFetchAction(e) {
 
   formEl.classList.add('is-loading');
   if (formEl.clientHeight < 50) {
-    formEl.classList.add('small-loading-icon');
+    formEl.classList.add('loading-icon-2px');
   }
 
   const formMethod = formEl.getAttribute('method') || 'get';
diff --git a/web_src/js/features/copycontent.js b/web_src/js/features/copycontent.js
index 3d3b2a697e..03efe00701 100644
--- a/web_src/js/features/copycontent.js
+++ b/web_src/js/features/copycontent.js
@@ -19,7 +19,7 @@ export function initCopyContent() {
     // the text to copy is not in the DOM or it is an image which should be
     // fetched to copy in full resolution
     if (link) {
-      btn.classList.add('is-loading', 'small-loading-icon');
+      btn.classList.add('is-loading', 'loading-icon-2px');
       try {
         const res = await GET(link, {credentials: 'include', redirect: 'follow'});
         const contentType = res.headers.get('content-type');
@@ -33,7 +33,7 @@ export function initCopyContent() {
       } catch {
         return showTemporaryTooltip(btn, i18n.copy_error);
       } finally {
-        btn.classList.remove('is-loading', 'small-loading-icon');
+        btn.classList.remove('is-loading', 'loading-icon-2px');
       }
     } else { // text, read from DOM
       const lineEls = document.querySelectorAll('.file-view .lines-code');