From ed9915c85737d2001d5e1b1952fe2f914c4f473a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 29 May 2023 19:34:34 +0200
Subject: [PATCH 01/36] Button style enhancements

---
 templates/devtest/gitea-ui.tmpl        |  33 ++-
 templates/devtest/list.tmpl            |   7 +
 web_src/css/base.css                   |   5 +-
 web_src/css/modules/button.css         | 385 +++++++++++++------------
 web_src/css/themes/theme-arc-green.css |   5 +-
 5 files changed, 250 insertions(+), 185 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index c00d12217db92..4e2299187c219 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -14,14 +14,45 @@
 			<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
 		</div>
 		<div id="devtest-button-samples">
-			<div>
+			<div class="gt-df gt-fw gt-gap-3">
 				<button class="ui primary button">Primary</button>
+				<button class="ui basic primary button">Basic Primary</button>
 				<button class="ui secondary button">Secondary</button>
 				<button class="ui basic secondary button">Basic Secondary</button>
 				<button class="ui red button">Red</button>
 				<button class="ui basic red button">Basic Red</button>
+				<button class="ui orange button">Orange</button>
+				<button class="ui basic orange button">Basic Orange</button>
+				<button class="ui yellow button">Yellow</button>
+				<button class="ui basic yellow button">Basic Yellow</button>
+				<button class="ui olive button">Olive</button>
+				<button class="ui basic olive button">Basic Olive</button>
+				<button class="ui green button">Green</button>
+				<button class="ui basic green button">Basic Green</button>
+				<button class="ui teal button">Teal</button>
+				<button class="ui basic teal button">Basic Teal</button>
+				<button class="ui blue button">Blue</button>
+				<button class="ui basic blue button">Basic Blue</button>
+				<button class="ui violet button">Violet</button>
+				<button class="ui basic violet button">Basic Violet</button>
+				<button class="ui purple button">Purple</button>
+				<button class="ui basic purple button">Basic Purple</button>
+				<button class="ui pink button">Pink</button>
+				<button class="ui basic pink button">Basic Pink</button>
+				<button class="ui brown button">Brown</button>
+				<button class="ui basic brown button">Basic Brown</button>
+				<button class="ui grey button">Grey</button>
+				<button class="ui basic grey button">Basic Grey</button>
+				<button class="ui black button">Black</button>
+				<button class="ui basic black button">Basic Black</button>
+				<button class="ui negative button">Negative</button>
+				<button class="ui basic negative button">Basic Negative</button>
+				<button class="ui positive button">Positive</button>
+				<button class="ui basic positive button">Basic Positive</button>
 			</div>
+			<div>This is a <button class="ui button tertiary">Tertiary</button> button</div>
 			<div>This is a <button class="ui button button-ghost">Ghost</button> button</div>
+			<div>This is a <button class="ui button button-link">Link</button> button</div>
 		</div>
 		<script type="module">
 			const $buttons = $('#devtest-button-samples').find('button');
diff --git a/templates/devtest/list.tmpl b/templates/devtest/list.tmpl
index 3a519c328ee93..5044f2a501963 100644
--- a/templates/devtest/list.tmpl
+++ b/templates/devtest/list.tmpl
@@ -1,3 +1,10 @@
+<style>
+	@media (prefers-color-scheme: dark) {
+		:root {
+			color-scheme: dark;
+		}
+	}
+</style>
 <ul>
 	{{range .SubNames}}
 	<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 49bdfed1b74d3..9d7369ed60f82 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -72,8 +72,9 @@
   --color-secondary-alpha-70: #dededeb3;
   --color-secondary-alpha-80: #dededecc;
   --color-secondary-alpha-90: #dededee1;
-  --color-secondary-hover: var(--color-secondary-dark-1);
-  --color-secondary-active: var(--color-secondary-dark-2);
+  --color-secondary-button: var(--color-secondary-dark-4);
+  --color-secondary-hover: var(--color-secondary-dark-5);
+  --color-secondary-active: var(--color-secondary-dark-6);
   /* console colors - used for actions console and console files */
   --color-console-fg: #eeeff2;
   --color-console-fg-subtle: #959cab;
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index d9bc69043d3d3..c4e98d1a1955f 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -1,12 +1,35 @@
 /* this contains override styles for buttons and related elements */
 
-.ui.button {
+.ui.button,
+.ui.button:focus {
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
   color: var(--color-text);
 }
 
-/* a ghost button is a button without border */
+.ui.button:hover {
+  background: var(--color-hover);
+  color: var(--color-text);
+}
+
+.page-content .ui.button {
+  box-shadow: none !important;
+}
+
+.ui.active.button,
+.ui.button:active,
+.ui.active.button:active,
+.ui.active.button:hover {
+  background: var(--color-active);
+  color: var(--color-text);
+}
+
+.ui.button.no-text .icon {
+  margin: 0 !important;
+}
+
+/* a ghost button is a button without border with background hover/active effect */
+
 .button.button-ghost {
   background: transparent;
   border: none;
@@ -15,41 +38,47 @@
   padding: 0;
 }
 
+.button.button-ghost:focus {
+  background: transparent;
+  border: none;
+  color: inherit;
+}
+
 .button.button-ghost:hover {
   background: var(--color-hover);
+  color: inherit;
 }
 
 .button.button-ghost:active {
   background: var(--color-active);
+  color: inherit;
 }
 
-.ui.button.button-link {
+/* a link button is a button withour border with underline hover/active effect */
+
+.button.button-link {
   background: transparent;
   border: none;
   color: inherit;
+  margin: 0;
+  padding: 0;
 }
 
-.page-content .ui.button {
-  box-shadow: none !important;
-}
-
-.ui.button:focus,
-.ui.button:hover {
-  background: var(--color-hover);
-  color: var(--color-text);
+.button.button-link:focus,
+.button.button-link:hover {
+  background: transparent;
+  border: none;
+  color: var(--color-primary);
+  text-decoration: underline;
 }
 
-.ui.active.button,
-.ui.button:active,
-.ui.active.button:active,
-.ui.active.button:hover {
-  background: var(--color-active);
-  color: var(--color-text);
+.button.button-link:active {
+  background: transparent;
+  text-decoration: underline;
+  color: var(--color-primary-active);
 }
 
-.ui.button.no-text .icon {
-  margin: 0 !important;
-}
+/* other button styles */
 
 .ui.buttons .button:first-child {
   border-left: 1px solid var(--color-light-border);
@@ -63,10 +92,6 @@
   border-left: none;
 }
 
-.ui.button.button-link:hover {
-  color: var(--color-primary);
-}
-
 .two-toggle-buttons .button:not(.active):first-of-type {
   border-right: none;
 }
@@ -77,7 +102,9 @@
 
 .ui.labeled.button.disabled > .button,
 .ui.basic.buttons .button,
-.ui.basic.button {
+.ui.basic.button,
+.ui.basic.buttons .button:focus,
+.ui.basic.button:focus {
   color: var(--color-text-light);
   background: var(--color-light);
 }
@@ -88,8 +115,7 @@
   background: var(--color-hover);
 }
 
-.ui.basic.buttons .button:focus,
-.ui.basic.button:focus,
+
 .ui.basic.buttons .button:active,
 .ui.basic.button:active,
 .ui.basic.buttons .active.button,
@@ -114,14 +140,14 @@
 .ui.primary.labels .label,
 .ui.ui.ui.primary.label,
 .ui.primary.button,
-.ui.primary.buttons .button {
+.ui.primary.buttons .button,
+.ui.primary.button:focus,
+.ui.primary.buttons .button:focus {
   background: var(--color-primary);
 }
 
 .ui.primary.button:hover,
-.ui.primary.buttons .button:hover,
-.ui.primary.button:focus,
-.ui.primary.buttons .button:focus {
+.ui.primary.buttons .button:hover {
   background: var(--color-primary-hover);
 }
 
@@ -131,15 +157,15 @@
 }
 
 .ui.basic.primary.buttons .button,
-.ui.basic.primary.button {
+.ui.basic.primary.button,
+.ui.basic.primary.buttons .button:focus,
+.ui.basic.primary.button:focus {
   color: var(--color-primary);
   border-color: var(--color-primary);
 }
 
 .ui.basic.primary.buttons .button:hover,
-.ui.basic.primary.button:hover,
-.ui.basic.primary.buttons .button:focus,
-.ui.basic.primary.button:focus {
+.ui.basic.primary.button:hover {
   color: var(--color-primary-hover);
   border-color: var(--color-primary-hover);
 }
@@ -155,47 +181,46 @@
 .ui.secondary.labels .label,
 .ui.ui.ui.secondary.label,
 .ui.secondary.button,
-.ui.secondary.buttons .button {
-  background: var(--color-secondary);
-  color: var(--color-text);
+.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,
-.ui.secondary.button:focus,
-.ui.secondary.buttons .button:focus {
-  background: var(--color-secondary-dark-1);
-  color: var(--color-text);
+.ui.secondary.buttons .button:hover {
+  background: var(--color-secondary-hover);
 }
 
 .ui.secondary.button:active,
 .ui.secondary.buttons .button:active {
-  background: var(--color-secondary-dark-2);
-  color: var(--color-text);
+  background: var(--color-secondary-active);
 }
 
 .ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button {
-  color: var(--color-secondary-dark-6) !important;
+.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,
-.ui.basic.secondary.buttons .button:active,
-.ui.basic.secondary.button:active {
-  color: var(--color-secondary-dark-8) !important;
-  border-color: var(--color-secondary-dark-1) !important;
+.ui.basic.secondary.button:hover {
+  color: var(--color-secondary-hover);
+  border-color: var(--color-secondary-hover);
 }
 
-.ui.basic.secondary.button:focus,
-.ui.basic.secondary.buttons .button:focus {
-  color: var(--color-secondary-dark-8) !important;
-  border-color: var(--color-secondary-dark-3) !important;
+.ui.basic.secondary.buttons .button:active,
+.ui.basic.secondary.button:active {
+  color: var(--color-secondary-active);
+  border-color: var(--color-secondary-active);
 }
 
 /* tertiary */
 
-.ui.tertiary.button {
+.ui.tertiary.button,
+.ui.tertiary.button:focus {
   color: var(--color-text-light);
   border: none;
 }
@@ -204,7 +229,7 @@
   color: var(--color-text);
 }
 
-.ui.tertiary.button:focus {
+.ui.tertiary.button:active {
   color: var(--color-text-dark);
 }
 
@@ -213,14 +238,14 @@
 .ui.red.labels .label,
 .ui.ui.ui.red.label,
 .ui.red.button,
-.ui.red.buttons .button {
+.ui.red.buttons .button,
+.ui.red.button:focus,
+.ui.red.buttons .button:focus {
   background: var(--color-red);
 }
 
 .ui.red.button:hover,
-.ui.red.buttons .button:hover,
-.ui.red.button:focus,
-.ui.red.buttons .button:focus {
+.ui.red.buttons .button:hover {
   background: var(--color-red-dark-1);
 }
 
@@ -230,15 +255,15 @@
 }
 
 .ui.basic.red.buttons .button,
-.ui.basic.red.button {
+.ui.basic.red.button,
+.ui.basic.red.buttons .button:focus,
+.ui.basic.red.button:focus {
   color: var(--color-red);
   border-color: var(--color-red);
 }
 
 .ui.basic.red.buttons .button:hover,
-.ui.basic.red.button:hover,
-.ui.basic.red.buttons .button:focus,
-.ui.basic.red.button:focus {
+.ui.basic.red.button:hover {
   color: var(--color-red-dark-1);
   border-color: var(--color-red-dark-1);
 }
@@ -254,14 +279,14 @@
 .ui.orange.labels .label,
 .ui.ui.ui.orange.label,
 .ui.orange.button,
-.ui.orange.buttons .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,
-.ui.orange.button:focus,
-.ui.orange.buttons .button:focus {
+.ui.orange.buttons .button:hover {
   background: var(--color-orange-dark-1);
 }
 
@@ -271,15 +296,15 @@
 }
 
 .ui.basic.orange.buttons .button,
-.ui.basic.orange.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,
-.ui.basic.orange.buttons .button:focus,
-.ui.basic.orange.button:focus {
+.ui.basic.orange.button:hover {
   color: var(--color-orange-dark-1);
   border-color: var(--color-orange-dark-1);
 }
@@ -295,14 +320,14 @@
 .ui.yellow.labels .label,
 .ui.ui.ui.yellow.label,
 .ui.yellow.button,
-.ui.yellow.buttons .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,
-.ui.yellow.button:focus,
-.ui.yellow.buttons .button:focus {
+.ui.yellow.buttons .button:hover {
   background: var(--color-yellow-dark-1);
 }
 
@@ -312,15 +337,15 @@
 }
 
 .ui.basic.yellow.buttons .button,
-.ui.basic.yellow.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,
-.ui.basic.yellow.buttons .button:focus,
-.ui.basic.yellow.button:focus {
+.ui.basic.yellow.button:hover {
   color: var(--color-yellow-dark-1);
   border-color: var(--color-yellow-dark-1);
 }
@@ -336,14 +361,14 @@
 .ui.olive.labels .label,
 .ui.ui.ui.olive.label,
 .ui.olive.button,
-.ui.olive.buttons .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,
-.ui.olive.button:focus,
-.ui.olive.buttons .button:focus {
+.ui.olive.buttons .button:hover {
   background: var(--color-olive-dark-1);
 }
 
@@ -353,15 +378,15 @@
 }
 
 .ui.basic.olive.buttons .button,
-.ui.basic.olive.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,
-.ui.basic.olive.buttons .button:focus,
-.ui.basic.olive.button:focus {
+.ui.basic.olive.button:hover {
   color: var(--color-olive-dark-1);
   border-color: var(--color-olive-dark-1);
 }
@@ -377,14 +402,14 @@
 .ui.green.labels .label,
 .ui.ui.ui.green.label,
 .ui.green.button,
-.ui.green.buttons .button {
+.ui.green.buttons .button,
+.ui.green.button:focus,
+.ui.green.buttons .button:focus {
   background: var(--color-green);
 }
 
 .ui.green.button:hover,
-.ui.green.buttons .button:hover,
-.ui.green.button:focus,
-.ui.green.buttons .button:focus {
+.ui.green.buttons .button:hover {
   background: var(--color-green-dark-1);
 }
 
@@ -394,15 +419,15 @@
 }
 
 .ui.basic.green.buttons .button,
-.ui.basic.green.button {
+.ui.basic.green.button,
+.ui.basic.green.buttons .button:focus,
+.ui.basic.green.button:focus {
   color: var(--color-green);
   border-color: var(--color-green);
 }
 
 .ui.basic.green.buttons .button:hover,
-.ui.basic.green.button:hover,
-.ui.basic.green.buttons .button:focus,
-.ui.basic.green.button:focus {
+.ui.basic.green.button:hover {
   color: var(--color-green-dark-1);
   border-color: var(--color-green-dark-1);
 }
@@ -418,14 +443,14 @@
 .ui.teal.labels .label,
 .ui.ui.ui.teal.label,
 .ui.teal.button,
-.ui.teal.buttons .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,
-.ui.teal.button:focus,
-.ui.teal.buttons .button:focus {
+.ui.teal.buttons .button:hover {
   background: var(--color-teal-dark-1);
 }
 
@@ -435,15 +460,15 @@
 }
 
 .ui.basic.teal.buttons .button,
-.ui.basic.teal.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,
-.ui.basic.teal.buttons .button:focus,
-.ui.basic.teal.button:focus {
+.ui.basic.teal.button:hover {
   color: var(--color-teal-dark-1);
   border-color: var(--color-teal-dark-1);
 }
@@ -459,14 +484,14 @@
 .ui.blue.labels .label,
 .ui.ui.ui.blue.label,
 .ui.blue.button,
-.ui.blue.buttons .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,
-.ui.blue.button:focus,
-.ui.blue.buttons .button:focus {
+.ui.blue.buttons .button:hover {
   background: var(--color-blue-dark-1);
 }
 
@@ -476,15 +501,15 @@
 }
 
 .ui.basic.blue.buttons .button,
-.ui.basic.blue.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,
-.ui.basic.blue.buttons .button:focus,
-.ui.basic.blue.button:focus {
+.ui.basic.blue.button:hover {
   color: var(--color-blue-dark-1);
   border-color: var(--color-blue-dark-1);
 }
@@ -500,14 +525,14 @@
 .ui.violet.labels .label,
 .ui.ui.ui.violet.label,
 .ui.violet.button,
-.ui.violet.buttons .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,
-.ui.violet.button:focus,
-.ui.violet.buttons .button:focus {
+.ui.violet.buttons .button:hover {
   background: var(--color-violet-dark-1);
 }
 
@@ -517,15 +542,15 @@
 }
 
 .ui.basic.violet.buttons .button,
-.ui.basic.violet.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,
-.ui.basic.violet.buttons .button:focus,
-.ui.basic.violet.button:focus {
+.ui.basic.violet.button:hover {
   color: var(--color-violet-dark-1);
   border-color: var(--color-violet-dark-1);
 }
@@ -541,14 +566,14 @@
 .ui.purple.labels .label,
 .ui.ui.ui.purple.label,
 .ui.purple.button,
-.ui.purple.buttons .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,
-.ui.purple.button:focus,
-.ui.purple.buttons .button:focus {
+.ui.purple.buttons .button:hover {
   background: var(--color-purple-dark-1);
 }
 
@@ -558,15 +583,15 @@
 }
 
 .ui.basic.purple.buttons .button,
-.ui.basic.purple.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,
-.ui.basic.purple.buttons .button:focus,
-.ui.basic.purple.button:focus {
+.ui.basic.purple.button:hover {
   color: var(--color-purple-dark-1);
   border-color: var(--color-purple-dark-1);
 }
@@ -582,14 +607,14 @@
 .ui.pink.labels .label,
 .ui.ui.ui.pink.label,
 .ui.pink.button,
-.ui.pink.buttons .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,
-.ui.pink.button:focus,
-.ui.pink.buttons .button:focus {
+.ui.pink.buttons .button:hover {
   background: var(--color-pink-dark-1);
 }
 
@@ -599,15 +624,15 @@
 }
 
 .ui.basic.pink.buttons .button,
-.ui.basic.pink.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,
-.ui.basic.pink.buttons .button:focus,
-.ui.basic.pink.button:focus {
+.ui.basic.pink.button:hover {
   color: var(--color-pink-dark-1);
   border-color: var(--color-pink-dark-1);
 }
@@ -623,14 +648,14 @@
 .ui.brown.labels .label,
 .ui.ui.ui.brown.label,
 .ui.brown.button,
-.ui.brown.buttons .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,
-.ui.brown.button:focus,
-.ui.brown.buttons .button:focus {
+.ui.brown.buttons .button:hover {
   background: var(--color-brown-dark-1);
 }
 
@@ -640,15 +665,15 @@
 }
 
 .ui.basic.brown.buttons .button,
-.ui.basic.brown.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);
 }
 
 .ui.basic.brown.buttons .button:hover,
-.ui.basic.brown.button:hover,
-.ui.basic.brown.buttons .button:focus,
-.ui.basic.brown.button:focus {
+.ui.basic.brown.button:hover {
   color: var(--color-brown-dark-1);
   border-color: var(--color-brown-dark-1);
 }
@@ -664,14 +689,14 @@
 .ui.grey.labels .label,
 .ui.ui.ui.grey.label,
 .ui.grey.button,
-.ui.grey.buttons .button {
+.ui.grey.buttons .button,
+.ui.grey.button:focus,
+.ui.grey.buttons .button:focus {
   background: var(--color-grey);
 }
 
 .ui.grey.button:hover,
-.ui.grey.buttons .button:hover,
-.ui.grey.button:focus,
-.ui.grey.buttons .button:focus {
+.ui.grey.buttons .button:hover {
   background: var(--color-grey-dark-1);
 }
 
@@ -681,15 +706,15 @@
 }
 
 .ui.basic.grey.buttons .button,
-.ui.basic.grey.button {
+.ui.basic.grey.button,
+.ui.basic.grey.buttons .button:focus,
+.ui.basic.grey.button:focus {
   color: var(--color-grey);
   border-color: var(--color-grey);
 }
 
 .ui.basic.grey.buttons .button:hover,
-.ui.basic.grey.button:hover,
-.ui.basic.grey.buttons .button:focus,
-.ui.basic.grey.button:focus {
+.ui.basic.grey.button:hover {
   color: var(--color-grey-dark-1);
   border-color: var(--color-grey-dark-1);
 }
@@ -705,14 +730,14 @@
 .ui.black.labels .label,
 .ui.ui.ui.black.label,
 .ui.black.button,
-.ui.black.buttons .button {
+.ui.black.buttons .button,
+.ui.black.button:focus,
+.ui.black.buttons .button:focus {
   background: var(--color-black);
 }
 
 .ui.black.button:hover,
-.ui.black.buttons .button:hover,
-.ui.black.button:focus,
-.ui.black.buttons .button:focus {
+.ui.black.buttons .button:hover {
   background: var(--color-black-dark-1);
 }
 
@@ -722,15 +747,15 @@
 }
 
 .ui.basic.black.buttons .button,
-.ui.basic.black.button {
+.ui.basic.black.button,
+.ui.basic.black.buttons .button:focus,
+.ui.basic.black.button:focus {
   color: var(--color-black);
   border-color: var(--color-black);
 }
 
 .ui.basic.black.buttons .button:hover,
-.ui.basic.black.button:hover,
-.ui.basic.black.buttons .button:focus,
-.ui.basic.black.button:focus {
+.ui.basic.black.button:hover {
   color: var(--color-black-dark-1);
   border-color: var(--color-black-dark-1);
 }
@@ -741,15 +766,17 @@
   border-color: var(--color-black-dark-2);
 }
 
+/* negative */
+
 .ui.negative.buttons .button,
-.ui.negative.button {
+.ui.negative.button,
+.ui.negative.buttons .button:focus,
+.ui.negative.button:focus {
   background: var(--color-red);
 }
 
 .ui.negative.buttons .button:hover,
-.ui.negative.button:hover,
-.ui.negative.buttons .button:focus,
-.ui.negative.button:focus {
+.ui.negative.button:hover {
   background: var(--color-red-dark-1);
 }
 
@@ -758,18 +785,16 @@
   background: var(--color-red-dark-2);
 }
 
-/* negative */
-
 .ui.basic.negative.buttons .button,
-.ui.basic.negative.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.basic.negative.buttons .button:hover,
-.ui.basic.negative.button:hover,
-.ui.basic.negative.buttons .button:focus,
-.ui.basic.negative.button:focus {
+.ui.basic.negative.button:hover {
   color: var(--color-red-dark-1);
   border-color: var(--color-red-dark-1);
 }
@@ -783,14 +808,14 @@
 /* positive */
 
 .ui.positive.buttons .button,
-.ui.positive.button {
+.ui.positive.button,
+.ui.positive.buttons .button:focus,
+.ui.positive.button:focus {
   background: var(--color-green);
 }
 
 .ui.positive.buttons .button:hover,
-.ui.positive.button:hover,
-.ui.positive.buttons .button:focus,
-.ui.positive.button:focus {
+.ui.positive.button:hover {
   background: var(--color-green-dark-1);
 }
 
@@ -800,15 +825,15 @@
 }
 
 .ui.basic.positive.buttons .button,
-.ui.basic.positive.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.basic.positive.buttons .button:hover,
-.ui.basic.positive.button:hover,
-.ui.basic.positive.buttons .button:focus,
-.ui.basic.positive.button:focus {
+.ui.basic.positive.button:hover {
   color: var(--color-green-dark-1);
   border-color: var(--color-green-dark-1);
 }
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index f6321c9ed7799..c78b30f9a5c16 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -58,8 +58,9 @@
   --color-secondary-alpha-70: #525767b3;
   --color-secondary-alpha-80: #525767cc;
   --color-secondary-alpha-90: #525767e1;
-  --color-secondary-hover: var(--color-secondary-light-1);
-  --color-secondary-active: var(--color-secondary-light-2);
+  --color-secondary-button: var(--color-secondary-dark-3);
+  --color-secondary-hover: var(--color-secondary-dark-2);
+  --color-secondary-active: var(--color-secondary-dark-1);
   /* console colors - used for actions console and console files */
   --color-console-fg: #eeeff2;
   --color-console-fg-subtle: #959cab;

From 087e3767b812e92405dd25b52bc4e26947240161 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 29 May 2023 20:23:30 +0200
Subject: [PATCH 02/36] remove grey and black buttons, add unclassed button to
 devtest

---
 templates/devtest/gitea-ui.tmpl     |  2 +
 templates/repo/cite/cite_modal.tmpl |  2 +-
 templates/repo/release/new.tmpl     |  2 +-
 web_src/css/modules/button.css      | 82 -----------------------------
 4 files changed, 4 insertions(+), 84 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 4e2299187c219..2dbfc4580f862 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -15,6 +15,8 @@
 		</div>
 		<div id="devtest-button-samples">
 			<div class="gt-df gt-fw gt-gap-3">
+				<button class="ui button">Unclassed</button>
+				<button class="ui basic button">Basic Unclassed</button>
 				<button class="ui primary button">Primary</button>
 				<button class="ui basic primary button">Basic Primary</button>
 				<button class="ui secondary button">Secondary</button>
diff --git a/templates/repo/cite/cite_modal.tmpl b/templates/repo/cite/cite_modal.tmpl
index c515874a06320..e296a1d6d3d52 100644
--- a/templates/repo/cite/cite_modal.tmpl
+++ b/templates/repo/cite/cite_modal.tmpl
@@ -15,7 +15,7 @@
 		</div>
 	</div>
 	<div class="actions">
-		<button class="ui black cancel button">
+		<button class="ui cancel button">
 			{{.locale.Tr "cancel"}}
 		</button>
 	</div>
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index 2d34613dde946..c7de00422d20a 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -123,7 +123,7 @@
 							{{end}}
 						{{else}}
 							{{if not .tag_name}}
-								<button class="ui grey button" type="submit" name="tag_only" value="{{.locale.Tr "repo.release.add_tag"}}">{{.locale.Tr "repo.release.add_tag"}}</button>
+								<button class="ui button" type="submit" name="tag_only" value="{{.locale.Tr "repo.release.add_tag"}}">{{.locale.Tr "repo.release.add_tag"}}</button>
 							{{end}}
 							<button class="ui button" type="submit" name="draft" value="{{.locale.Tr "repo.release.save_draft"}}">{{.locale.Tr "repo.release.save_draft"}}</button>
 							<button class="ui primary button">
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index c4e98d1a1955f..7c8ffac484f18 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -684,88 +684,6 @@
   border-color: var(--color-brown-dark-2);
 }
 
-/* grey */
-
-.ui.grey.labels .label,
-.ui.ui.ui.grey.label,
-.ui.grey.button,
-.ui.grey.buttons .button,
-.ui.grey.button:focus,
-.ui.grey.buttons .button:focus {
-  background: var(--color-grey);
-}
-
-.ui.grey.button:hover,
-.ui.grey.buttons .button:hover {
-  background: var(--color-grey-dark-1);
-}
-
-.ui.grey.button:active,
-.ui.grey.buttons .button:active {
-  background: var(--color-grey-dark-2);
-}
-
-.ui.basic.grey.buttons .button,
-.ui.basic.grey.button,
-.ui.basic.grey.buttons .button:focus,
-.ui.basic.grey.button:focus {
-  color: var(--color-grey);
-  border-color: var(--color-grey);
-}
-
-.ui.basic.grey.buttons .button:hover,
-.ui.basic.grey.button:hover {
-  color: var(--color-grey-dark-1);
-  border-color: var(--color-grey-dark-1);
-}
-
-.ui.basic.grey.buttons .button:active,
-.ui.basic.grey.button:active {
-  color: var(--color-grey-dark-2);
-  border-color: var(--color-grey-dark-2);
-}
-
-/* black */
-
-.ui.black.labels .label,
-.ui.ui.ui.black.label,
-.ui.black.button,
-.ui.black.buttons .button,
-.ui.black.button:focus,
-.ui.black.buttons .button:focus {
-  background: var(--color-black);
-}
-
-.ui.black.button:hover,
-.ui.black.buttons .button:hover {
-  background: var(--color-black-dark-1);
-}
-
-.ui.black.button:active,
-.ui.black.buttons .button:active {
-  background: var(--color-black-dark-2);
-}
-
-.ui.basic.black.buttons .button,
-.ui.basic.black.button,
-.ui.basic.black.buttons .button:focus,
-.ui.basic.black.button:focus {
-  color: var(--color-black);
-  border-color: var(--color-black);
-}
-
-.ui.basic.black.buttons .button:hover,
-.ui.basic.black.button:hover {
-  color: var(--color-black-dark-1);
-  border-color: var(--color-black-dark-1);
-}
-
-.ui.basic.black.buttons .button:active,
-.ui.basic.black.button:active {
-  color: var(--color-black-dark-2);
-  border-color: var(--color-black-dark-2);
-}
-
 /* negative */
 
 .ui.negative.buttons .button,

From 7a9ae4f9582828adbfbd8b1616a1b591d5d0d69a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 29 May 2023 20:27:38 +0200
Subject: [PATCH 03/36] devtest tweaks

---
 templates/devtest/gitea-ui.tmpl | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 2dbfc4580f862..e460a65494928 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -14,7 +14,7 @@
 			<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
 		</div>
 		<div id="devtest-button-samples">
-			<div class="gt-df gt-fw gt-gap-3">
+			<div class="gt-df gt-fw gt-gap-3 gt-my-2">
 				<button class="ui button">Unclassed</button>
 				<button class="ui basic button">Basic Unclassed</button>
 				<button class="ui primary button">Primary</button>
@@ -43,18 +43,13 @@
 				<button class="ui basic pink button">Basic Pink</button>
 				<button class="ui brown button">Brown</button>
 				<button class="ui basic brown button">Basic Brown</button>
-				<button class="ui grey button">Grey</button>
-				<button class="ui basic grey button">Basic Grey</button>
-				<button class="ui black button">Black</button>
-				<button class="ui basic black button">Basic Black</button>
 				<button class="ui negative button">Negative</button>
 				<button class="ui basic negative button">Basic Negative</button>
 				<button class="ui positive button">Positive</button>
 				<button class="ui basic positive button">Basic Positive</button>
 			</div>
-			<div>This is a <button class="ui button tertiary">Tertiary</button> button</div>
-			<div>This is a <button class="ui button button-ghost">Ghost</button> button</div>
-			<div>This is a <button class="ui button button-link">Link</button> button</div>
+			<div class="gt-my-2">This is a <button class="ui button button-ghost gt-p-3">Ghost</button> button with padding</div>
+			<div class="gt-my-2">This is a <button class="ui button button-link">Link</button> button</div>
 		</div>
 		<script type="module">
 			const $buttons = $('#devtest-button-samples').find('button');

From 1e102e09548fb29a49cf27f05527b975511293b9 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 30 May 2023 11:08:54 +0800
Subject: [PATCH 04/36] update samples

---
 templates/devtest/gitea-ui.tmpl | 111 +++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 45 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index e460a65494928..2c6c57da9de85 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -14,52 +14,73 @@
 			<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
 		</div>
 		<div id="devtest-button-samples">
-			<div class="gt-df gt-fw gt-gap-3 gt-my-2">
-				<button class="ui button">Unclassed</button>
-				<button class="ui basic button">Basic Unclassed</button>
-				<button class="ui primary button">Primary</button>
-				<button class="ui basic primary button">Basic Primary</button>
-				<button class="ui secondary button">Secondary</button>
-				<button class="ui basic secondary button">Basic Secondary</button>
-				<button class="ui red button">Red</button>
-				<button class="ui basic red button">Basic Red</button>
-				<button class="ui orange button">Orange</button>
-				<button class="ui basic orange button">Basic Orange</button>
-				<button class="ui yellow button">Yellow</button>
-				<button class="ui basic yellow button">Basic Yellow</button>
-				<button class="ui olive button">Olive</button>
-				<button class="ui basic olive button">Basic Olive</button>
-				<button class="ui green button">Green</button>
-				<button class="ui basic green button">Basic Green</button>
-				<button class="ui teal button">Teal</button>
-				<button class="ui basic teal button">Basic Teal</button>
-				<button class="ui blue button">Blue</button>
-				<button class="ui basic blue button">Basic Blue</button>
-				<button class="ui violet button">Violet</button>
-				<button class="ui basic violet button">Basic Violet</button>
-				<button class="ui purple button">Purple</button>
-				<button class="ui basic purple button">Basic Purple</button>
-				<button class="ui pink button">Pink</button>
-				<button class="ui basic pink button">Basic Pink</button>
-				<button class="ui brown button">Brown</button>
-				<button class="ui basic brown button">Basic Brown</button>
-				<button class="ui negative button">Negative</button>
-				<button class="ui basic negative button">Basic Negative</button>
-				<button class="ui positive button">Positive</button>
-				<button class="ui basic positive button">Basic Positive</button>
-			</div>
-			<div class="gt-my-2">This is a <button class="ui button button-ghost gt-p-3">Ghost</button> button with padding</div>
-			<div class="gt-my-2">This is a <button class="ui button button-link">Link</button> button</div>
-		</div>
-		<script type="module">
-			const $buttons = $('#devtest-button-samples').find('button');
+			<style>
+				.button-sample-groups { margin: 0; padding: 0; }
+				.button-sample-groups .sample-group { list-style: none; margin: 0; padding: 0; }
+				.button-sample-groups .sample-group .ui.button { margin-bottom: 5px; }
+			</style>
+			<ul class="button-sample-groups">
+				<li class="sample-group">
+					<h2>General purpose:</h2>
+					<button class="ui primary button">Primary</button>
+					<button class="ui basic primary button">Basic Primary</button>
+					<button class="ui secondary button">Secondary</button>
+					<button class="ui basic secondary button">Basic Secondary</button>
+
+					<button class="ui negative button">Negative</button>
+					<button class="ui basic negative button">Basic Negative</button>
+					<button class="ui positive button">Positive</button>
+					<button class="ui basic positive button">Basic Positive</button>
+				</li>
+				<li class="sample-group">
+					<h2>Recommended colors:</h2>
+					<button class="ui red button">Red</button>
+					<button class="ui basic red button">Basic Red</button>
+					<button class="ui green button">Green</button>
+					<button class="ui basic green button">Basic Green</button>
+					<button class="ui blue button">Blue</button>
+					<button class="ui basic blue button">Basic Blue</button>
 
-			const $buttonStyles = $('input[name*="button-style"]');
-			$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
+					<button class="ui orange button">Orange</button>
+					<button class="ui basic orange button">Basic Orange</button>
+					<button class="ui yellow button">Yellow</button>
+					<button class="ui basic yellow button">Basic Yellow</button>
+				</li>
+				<li class="sample-group">
+					<h2>Supported but not recommended:</h2>
+					<p>Do not use if there is no strong requirement</p>
+					<button class="ui button">Unclassed</button>
+					<button class="ui basic button">Basic Unclassed</button>
+					<button class="ui olive button">Olive</button>
+					<button class="ui basic olive button">Basic Olive</button>
+					<button class="ui teal button">Teal</button>
+					<button class="ui basic teal button">Basic Teal</button>
+					<button class="ui violet button">Violet</button>
+					<button class="ui basic violet button">Basic Violet</button>
+					<button class="ui purple button">Purple</button>
+					<button class="ui basic purple button">Basic Purple</button>
+					<button class="ui pink button">Pink</button>
+					<button class="ui basic pink button">Basic Pink</button>
+					<button class="ui brown button">Brown</button>
+					<button class="ui basic brown button">Basic Brown</button>
+				</li>
+				<li class="sample-group">
+					<h2>Inline / Plain:</h2>
+					<div class="gt-my-2">This is a <button class="button button-ghost gt-p-3">Ghost</button> button with padding: hover background, no text highlight</div>
+					<div class="gt-my-2">This is a <button class="button button-link">Link</button> button: no background, hover text highlight + underline</div>
+					<div class="gt-my-2">This is a <button class="button button-link">No Underline Link</button> button: no background, hover text highlight <span class="text red">but no underline (???)</span></div>
+				</li>
+			</ul>
+			<script type="module">
+				const $buttons = $('#devtest-button-samples').find('button.ui');
 
-			const $buttonStates = $('input[name*="button-state"]');
-			$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
-		</script>
+				const $buttonStyles = $('input[name*="button-style"]');
+				$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
+
+				const $buttonStates = $('input[name*="button-state"]');
+				$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
+			</script>
+		</div>
 	</div>
 
 	<div>
@@ -103,7 +124,7 @@
 	</div>
 
 	<style>
-		h1 {
+		h1, h2 {
 			margin: 0;
 			padding: 10px 0;
 		}

From ff364524155d9e4e34d7a46bd391644987472a56 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 30 May 2023 11:12:51 +0800
Subject: [PATCH 05/36] more comment

---
 templates/devtest/gitea-ui.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 2c6c57da9de85..e6ae3c9119634 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -48,7 +48,7 @@
 				</li>
 				<li class="sample-group">
 					<h2>Supported but not recommended:</h2>
-					<p>Do not use if there is no strong requirement</p>
+					<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
 					<button class="ui button">Unclassed</button>
 					<button class="ui basic button">Basic Unclassed</button>
 					<button class="ui olive button">Olive</button>

From 55666e0f1fda378bd83480f263088e137d35a877 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 2 Jun 2023 22:40:07 +0200
Subject: [PATCH 06/36] match background of unclassed buttons, tweak secondary

---
 templates/devtest/gitea-ui.tmpl        | 5 ++---
 web_src/css/base.css                   | 2 +-
 web_src/css/modules/button.css         | 2 +-
 web_src/css/themes/theme-arc-green.css | 8 ++++----
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index e6ae3c9119634..797cbce4ce3f0 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -22,6 +22,8 @@
 			<ul class="button-sample-groups">
 				<li class="sample-group">
 					<h2>General purpose:</h2>
+					<button class="ui button">Unclassed</button>
+					<button class="ui basic button">Basic Unclassed</button>
 					<button class="ui primary button">Primary</button>
 					<button class="ui basic primary button">Basic Primary</button>
 					<button class="ui secondary button">Secondary</button>
@@ -40,7 +42,6 @@
 					<button class="ui basic green button">Basic Green</button>
 					<button class="ui blue button">Blue</button>
 					<button class="ui basic blue button">Basic Blue</button>
-
 					<button class="ui orange button">Orange</button>
 					<button class="ui basic orange button">Basic Orange</button>
 					<button class="ui yellow button">Yellow</button>
@@ -49,8 +50,6 @@
 				<li class="sample-group">
 					<h2>Supported but not recommended:</h2>
 					<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
-					<button class="ui button">Unclassed</button>
-					<button class="ui basic button">Basic Unclassed</button>
 					<button class="ui olive button">Olive</button>
 					<button class="ui basic olive button">Basic Olive</button>
 					<button class="ui teal button">Teal</button>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 9d7369ed60f82..479130231af44 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -206,7 +206,7 @@
   --color-card: #ffffff;
   --color-markup-table-row: #00000008;
   --color-markup-code-block: #00000010;
-  --color-button: #ffffff;
+  --color-button: #f8f8f8;
   --color-code-bg: #ffffff;
   --color-code-sidebar-bg: #f5f5f5;
   --color-shadow: #00000030;
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 7c8ffac484f18..80f39bfb4e1f1 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -106,7 +106,7 @@
 .ui.basic.buttons .button:focus,
 .ui.basic.button:focus {
   color: var(--color-text-light);
-  background: var(--color-light);
+  background: var(--color-button);
 }
 
 .ui.basic.buttons .button:hover,
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index c78b30f9a5c16..f8594af8c8b3c 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -58,9 +58,9 @@
   --color-secondary-alpha-70: #525767b3;
   --color-secondary-alpha-80: #525767cc;
   --color-secondary-alpha-90: #525767e1;
-  --color-secondary-button: var(--color-secondary-dark-3);
-  --color-secondary-hover: var(--color-secondary-dark-2);
-  --color-secondary-active: var(--color-secondary-dark-1);
+  --color-secondary-button: var(--color-secondary-dark-4);
+  --color-secondary-hover: var(--color-secondary-dark-3);
+  --color-secondary-active: var(--color-secondary-dark-2);
   /* console colors - used for actions console and console files */
   --color-console-fg: #eeeff2;
   --color-console-fg-subtle: #959cab;
@@ -192,7 +192,7 @@
   --color-card: #2e323e;
   --color-markup-table-row: #ffffff06;
   --color-markup-code-block: #ffffff16;
-  --color-button: #353846;
+  --color-button: #2e323c;
   --color-code-bg: #2a2e3a;
   --color-code-sidebar-bg: #2e323e;
   --color-shadow: #00000060;

From 89917d4a7c6374a2ab8587f1b41be3bbdbc4d761 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 2 Jun 2023 23:08:28 +0200
Subject: [PATCH 07/36] remove input border hover effect, fix right border on
 action input

---
 web_src/css/base.css                   | 10 +++++++---
 web_src/css/themes/theme-arc-green.css |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 479130231af44..ac26d16c2d076 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -194,7 +194,7 @@
   --color-input-background: #ffffff;
   --color-input-toggle-background: #dedede;
   --color-input-border: #dedede;
-  --color-input-border-hover: #cecece;
+  --color-input-border-hover: #dedede;
   --color-navbar: #f8f8f8;
   --color-navbar-transparent: #f8f8f800;
   --color-light: #00000006;
@@ -504,12 +504,16 @@ a.label,
   border-right-color: transparent;
 }
 
+.ui.action.input:not([class*="left action"]) > input {
+  border-right: none;
+}
+
 .ui.action.input:not([class*="left action"]) > input:hover {
-  border-right-color: transparent;
+  border-right: none;
 }
 
 .ui.action.input:not([class*="left action"]) > input:focus {
-  border-right-color: var(--color-primary);
+  border-right: 1px solid var(--color-primary);
 }
 
 /* fix button enlarged vertically by svg icon */
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index f8594af8c8b3c..b0adb342a92db 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -180,7 +180,7 @@
   --color-input-background: #232933;
   --color-input-toggle-background: #454a57;
   --color-input-border: #454a57;
-  --color-input-border-hover: #505667;
+  --color-input-border-hover: #454a57;
   --color-navbar: #2a2e3a;
   --color-navbar-transparent: #2a2e3a00;
   --color-light: #00000028;

From ea2d1acbdf6fdf6b7a431a43252a3eafb0ee380d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 2 Jun 2023 23:46:13 +0200
Subject: [PATCH 08/36] various color tweaks, match inputs and buttons in
 background

---
 web_src/css/base.css                   | 12 ++++++------
 web_src/css/repo/list-header.css       |  6 ++++++
 web_src/css/shared/issuelist.css       |  2 +-
 web_src/css/themes/theme-arc-green.css | 16 ++++++++--------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index ac26d16c2d076..d7151ce525889 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -191,7 +191,7 @@
   --color-footer: #ffffff;
   --color-timeline: #ececec;
   --color-input-text: #212121;
-  --color-input-background: #ffffff;
+  --color-input-background: #f8f8f8;
   --color-input-toggle-background: #dedede;
   --color-input-border: #dedede;
   --color-input-border-hover: #dedede;
@@ -201,9 +201,9 @@
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #0000001d;
   --color-hover: #00000014;
-  --color-active: #0000001e;
-  --color-menu: #ffffff;
-  --color-card: #ffffff;
+  --color-active: #0000001b;
+  --color-menu: #f8f8f8;
+  --color-card: #f8f8f8;
   --color-markup-table-row: #00000008;
   --color-markup-code-block: #00000010;
   --color-button: #f8f8f8;
@@ -680,7 +680,7 @@ a.label,
 }
 
 .ui.menu .dropdown.item .menu {
-  background: var(--color-menu);
+  background: var(--color-body);
 }
 
 .ui.menu .ui.dropdown .menu > .item {
@@ -2013,7 +2013,7 @@ a.ui.ui.ui.basic.primary.label:hover {
 
 .ui.basic.labels .label,
 .ui.basic.label {
-  background: var(--color-light);
+  background: var(--color-button);
   border-color: var(--color-light-border);
   color: var(--color-text-light);
 }
diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css
index 24aa36dd89d8a..1669e0c78db81 100644
--- a/web_src/css/repo/list-header.css
+++ b/web_src/css/repo/list-header.css
@@ -28,9 +28,15 @@
 
 .small-menu-items {
   min-height: 35.4px !important; /* match .small.button in height */
+  background: none !important;
 }
 
 .small-menu-items .item {
+  background: var(--color-menu) !important;
   padding-top: 6px !important;
   padding-bottom: 6px !important;
 }
+
+.small-menu-items .item.active {
+  background: var(--color-active) !important;
+}
diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index 89e1135ce9875..cd6fcf76e25e4 100644
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -145,7 +145,7 @@
 }
 
 .issue.list .branches .branch {
-  background-color: var(--color-secondary);
+  background-color: var(--color-secondary-alpha-30);
   border-radius: 3px;
 }
 
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index b0adb342a92db..d9d4523100371 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -164,9 +164,9 @@
   --color-orange-badge-hover-bg: #f2711c4d;
   --color-git: #f05133;
   /* target-based colors */
-  --color-body: #373b47;
-  --color-box-header: #404652;
-  --color-box-body: #2a2e3a;
+  --color-body: #303440;
+  --color-box-header: #353945;
+  --color-box-body: #272c37;
   --color-box-body-highlight: #353945;
   --color-text-dark: #dbe0ea;
   --color-text: #cbd0da;
@@ -177,7 +177,7 @@
   --color-footer: #2e323e;
   --color-timeline: #4c525e;
   --color-input-text: #dfe3ec;
-  --color-input-background: #232933;
+  --color-input-background: #262b36;
   --color-input-toggle-background: #454a57;
   --color-input-border: #454a57;
   --color-input-border-hover: #454a57;
@@ -188,11 +188,11 @@
   --color-light-border: #ffffff28;
   --color-hover: #ffffff19;
   --color-active: #ffffff24;
-  --color-menu: #2e323e;
-  --color-card: #2e323e;
+  --color-menu: #262b36;
+  --color-card: #262b36;
   --color-markup-table-row: #ffffff06;
   --color-markup-code-block: #ffffff16;
-  --color-button: #2e323c;
+  --color-button: #262b36;
   --color-code-bg: #2a2e3a;
   --color-code-sidebar-bg: #2e323e;
   --color-shadow: #00000060;
@@ -208,7 +208,7 @@
   --color-reaction-active-bg: var(--color-primary-light-5);
   --color-tooltip-text: #ffffff;
   --color-tooltip-bg: #000000f0;
-  --color-header-bar: #2e323e;
+  --color-header-bar: #272c37;
   --color-label-text: #dfe3ec;
   --color-label-bg: #7c84974b;
   --color-label-hover-bg: #7c8497a0;

From f94e0c1d325bd9f9c003fcc14745c2a9505df055 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 00:02:36 +0200
Subject: [PATCH 09/36] more color tweaks

---
 web_src/css/base.css                   | 8 ++++----
 web_src/css/themes/theme-arc-green.css | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index d7151ce525889..22fe8a6d0b899 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -191,7 +191,7 @@
   --color-footer: #ffffff;
   --color-timeline: #ececec;
   --color-input-text: #212121;
-  --color-input-background: #f8f8f8;
+  --color-input-background: #fafafa;
   --color-input-toggle-background: #dedede;
   --color-input-border: #dedede;
   --color-input-border-hover: #dedede;
@@ -202,11 +202,11 @@
   --color-light-border: #0000001d;
   --color-hover: #00000014;
   --color-active: #0000001b;
-  --color-menu: #f8f8f8;
-  --color-card: #f8f8f8;
+  --color-menu: #fafafa;
+  --color-card: #fafafa;
   --color-markup-table-row: #00000008;
   --color-markup-code-block: #00000010;
-  --color-button: #f8f8f8;
+  --color-button: #fafafa;
   --color-code-bg: #ffffff;
   --color-code-sidebar-bg: #f5f5f5;
   --color-shadow: #00000030;
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index d9d4523100371..f6925bfaaa214 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -166,7 +166,7 @@
   /* target-based colors */
   --color-body: #303440;
   --color-box-header: #353945;
-  --color-box-body: #272c37;
+  --color-box-body: #252a36;
   --color-box-body-highlight: #353945;
   --color-text-dark: #dbe0ea;
   --color-text: #cbd0da;
@@ -181,8 +181,8 @@
   --color-input-toggle-background: #454a57;
   --color-input-border: #454a57;
   --color-input-border-hover: #454a57;
-  --color-navbar: #2a2e3a;
-  --color-navbar-transparent: #2a2e3a00;
+  --color-navbar: #272b37;
+  --color-navbar-transparent: #272b3700;
   --color-light: #00000028;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #ffffff28;

From 1d5c509eaa793c43169b07862dbb385da2eeb52d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 00:04:29 +0200
Subject: [PATCH 10/36] tweak navbar

---
 web_src/css/themes/theme-arc-green.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index f6925bfaaa214..3c9fa1e0a9ca0 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -181,7 +181,7 @@
   --color-input-toggle-background: #454a57;
   --color-input-border: #454a57;
   --color-input-border-hover: #454a57;
-  --color-navbar: #272b37;
+  --color-navbar: #252935;
   --color-navbar-transparent: #272b3700;
   --color-light: #00000028;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));

From 347476e1f6654e9f3287c80d254e9740bd6e9c72 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 00:10:00 +0200
Subject: [PATCH 11/36] remove secondary button classes and move it to 'not
 recommended'

---
 templates/base/modal_actions_confirm.tmpl          | 2 +-
 templates/devtest/gitea-ui.tmpl                    | 5 ++---
 templates/repo/home.tmpl                           | 2 +-
 templates/repo/issue/labels/edit_delete_label.tmpl | 2 +-
 templates/repo/issue/view_content.tmpl             | 2 +-
 templates/repo/issue/view_title.tmpl               | 4 ++--
 6 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/templates/base/modal_actions_confirm.tmpl b/templates/base/modal_actions_confirm.tmpl
index a39a855b631d5..6cf3ecbe3ed7f 100644
--- a/templates/base/modal_actions_confirm.tmpl
+++ b/templates/base/modal_actions_confirm.tmpl
@@ -32,7 +32,7 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal
 		{{else if eq .ModalButtonColors "yellow"}}
 			{{$stylePositive = "yellow"}}
 		{{end}}
-		<button class="ui secondary basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
+		<button class="ui basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
 		<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
 	{{end}}
 </div>
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 797cbce4ce3f0..0dd356a2e4134 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -26,9 +26,6 @@
 					<button class="ui basic button">Basic Unclassed</button>
 					<button class="ui primary button">Primary</button>
 					<button class="ui basic primary button">Basic Primary</button>
-					<button class="ui secondary button">Secondary</button>
-					<button class="ui basic secondary button">Basic Secondary</button>
-
 					<button class="ui negative button">Negative</button>
 					<button class="ui basic negative button">Basic Negative</button>
 					<button class="ui positive button">Positive</button>
@@ -50,6 +47,8 @@
 				<li class="sample-group">
 					<h2>Supported but not recommended:</h2>
 					<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
+					<button class="ui secondary button">Secondary</button>
+					<button class="ui basic secondary button">Basic Secondary</button>
 					<button class="ui olive button">Olive</button>
 					<button class="ui basic olive button">Basic Olive</button>
 					<button class="ui teal button">Teal</button>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 5e9c285eb0a20..5394b1f5285a6 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -46,7 +46,7 @@
 				</div>
 			</div>
 			<div>
-				<button class="ui basic button secondary" id="cancel_topic_edit">{{.locale.Tr "cancel"}}</button>
+				<button class="ui basic button" id="cancel_topic_edit">{{.locale.Tr "cancel"}}</button>
 				<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{.locale.Tr "save"}}</button>
 			</div>
 		</div>
diff --git a/templates/repo/issue/labels/edit_delete_label.tmpl b/templates/repo/issue/labels/edit_delete_label.tmpl
index b09e9173de4e5..b4eb6be7fcd1d 100644
--- a/templates/repo/issue/labels/edit_delete_label.tmpl
+++ b/templates/repo/issue/labels/edit_delete_label.tmpl
@@ -52,7 +52,7 @@
 		</form>
 	</div>
 	<div class="actions">
-		<button class="ui secondary small basic cancel button">
+		<button class="ui small basic cancel button">
 			{{svg "octicon-x"}}
 			{{.locale.Tr "cancel"}}
 		</button>
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 3669e00d5e6bd..e451db16f07da 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -175,7 +175,7 @@
 
 		<div class="field">
 			<div class="text right edit">
-				<button class="ui basic secondary cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</button>
+				<button class="ui basic cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</button>
 				<button class="ui primary save button" tabindex="2">{{.locale.Tr "repo.issues.save"}}</button>
 			</div>
 		</div>
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index 0857025495c0e..2bd0d561e8775 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -14,7 +14,7 @@
 		</h1>
 		<div class="issue-title-buttons">
 			{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
-				<button id="edit-title" class="ui small basic button secondary edit-button not-in-edit{{if .Issue.IsPull}} gt-mr-0{{end}}">{{.locale.Tr "repo.issues.edit"}}</button>
+				<button id="edit-title" class="ui small basic button edit-button not-in-edit{{if .Issue.IsPull}} gt-mr-0{{end}}">{{.locale.Tr "repo.issues.edit"}}</button>
 			{{end}}
 			{{if not .Issue.IsPull}}
 				<a role="button" class="ui small green button new-issue-button gt-mr-0" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
@@ -22,7 +22,7 @@
 		</div>
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 			<div class="edit-buttons">
-				<button id="cancel-edit-title" class="ui small basic button secondary in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button>
+				<button id="cancel-edit-title" class="ui small basic button in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button>
 				<button id="save-edit-title" class="ui small primary button in-edit gt-hidden gt-mr-0" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button>
 			</div>
 		{{end}}

From dfc0d6ea4273d205f283f6b58987bc63ea6b28b7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 00:16:52 +0200
Subject: [PATCH 12/36] change repo topic button to button-link

---
 templates/repo/home.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 5394b1f5285a6..2eccd541bf520 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-ghost gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-link gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}

From 857b6f3061b3c4ad412cf0037649392e864b8316 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 00:19:01 +0200
Subject: [PATCH 13/36] box color tweaks

---
 web_src/css/themes/theme-arc-green.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index 3c9fa1e0a9ca0..6571c63d60d6e 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -164,10 +164,10 @@
   --color-orange-badge-hover-bg: #f2711c4d;
   --color-git: #f05133;
   /* target-based colors */
-  --color-body: #303440;
-  --color-box-header: #353945;
+  --color-body: #2e323e;
+  --color-box-header: #333743;
   --color-box-body: #252a36;
-  --color-box-body-highlight: #353945;
+  --color-box-body-highlight: #303440;
   --color-text-dark: #dbe0ea;
   --color-text: #cbd0da;
   --color-text-light: #bbbfca;

From 0c68e7262fd133708c7c03e9bb194d8c5df6b3b6 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 00:25:30 +0200
Subject: [PATCH 14/36] add comment

---
 web_src/css/repo/list-header.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css
index 1669e0c78db81..5124adc8e5ed4 100644
--- a/web_src/css/repo/list-header.css
+++ b/web_src/css/repo/list-header.css
@@ -28,7 +28,7 @@
 
 .small-menu-items {
   min-height: 35.4px !important; /* match .small.button in height */
-  background: none !important;
+  background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
 }
 
 .small-menu-items .item {

From 9cb47355a48654d2f86f0babc9f1803d2f9e63b0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 01:24:54 +0200
Subject: [PATCH 15/36] replace gt-tdn with no-underline

---
 templates/devtest/gitea-ui.tmpl     | 2 +-
 templates/repo/commit_statuses.tmpl | 2 +-
 templates/shared/issuelist.tmpl     | 6 +++---
 web_src/css/base.css                | 4 ++++
 web_src/css/helpers.css             | 1 -
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 0dd356a2e4134..3005fd59e96cd 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -66,7 +66,7 @@
 					<h2>Inline / Plain:</h2>
 					<div class="gt-my-2">This is a <button class="button button-ghost gt-p-3">Ghost</button> button with padding: hover background, no text highlight</div>
 					<div class="gt-my-2">This is a <button class="button button-link">Link</button> button: no background, hover text highlight + underline</div>
-					<div class="gt-my-2">This is a <button class="button button-link">No Underline Link</button> button: no background, hover text highlight <span class="text red">but no underline (???)</span></div>
+					<div class="gt-my-2">This is a <button class="button button-link no-underline">No Underline Link</button> button: no background, hover text highlight
 				</li>
 			</ul>
 			<script type="module">
diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl
index 8858fb8402129..30dfa5af9ea8a 100644
--- a/templates/repo/commit_statuses.tmpl
+++ b/templates/repo/commit_statuses.tmpl
@@ -1,6 +1,6 @@
 {{if .Statuses}}
 	{{if and (eq (len .Statuses) 1) .Status.TargetURL}}
-		<a class="gt-vm gt-tdn" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
+		<a class="gt-vm no-underline" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
 			{{template "repo/commit_status" .Status}}
 		</a>
 	{{else}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 394b4a69185ac..faa026d36a4ac 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -12,7 +12,7 @@
 			</div>
 			<div class="issue-item-main gt-f1 gt-fc gt-df">
 				<div class="issue-item-top-row">
-					<a class="title gt-tdn issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
+					<a class="title no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
 					{{if .IsPull}}
 						{{if (index $.CommitStatuses .PullRequest.ID)}}
 							{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}}
@@ -132,7 +132,7 @@
 				{{if .Assignees}}
 				<div class="issue-item-icon-right text grey">
 					{{range .Assignees}}
-						<a class="ui assignee gt-tdn" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
+						<a class="ui assignee no-underline" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
 							{{avatar $.Context . 20}}
 						</a>
 					{{end}}
@@ -140,7 +140,7 @@
 				{{end}}
 				{{if .NumComments}}
 				<div class="issue-item-icon-right text grey">
-					<a class="gt-tdn muted" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+					<a class="no-underline muted" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{svg "octicon-comment" 16 "gt-mr-2"}}{{.NumComments}}
 					</a>
 				</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 22fe8a6d0b899..efd06fdaa65db 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -414,6 +414,10 @@ a.silenced:hover {
   text-decoration: none;
 }
 
+a.no-underline:hover {
+  text-decoration: none;
+}
+
 .delete-button,
 .delete-button:hover {
   color: var(--color-red);
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 14ef64b2521cf..06df44bedf8c2 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -11,7 +11,6 @@ Gitea's private styles use `g-` prefix.
 .gt-ab { align-items: baseline !important; }
 .gt-tc { text-align: center !important; }
 .gt-tl { text-align: left !important; }
-.gt-tdn { text-decoration: none !important; }
 .gt-jc { justify-content: center !important; }
 .gt-js { justify-content: flex-start !important; }
 .gt-je { justify-content: flex-end !important; }

From f24e916b8b888e95fd1fa5c53d27c5d82a539f8d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 01:28:02 +0200
Subject: [PATCH 16/36] replace gt-tdn with no-underline

---
 templates/devtest/gitea-ui.tmpl     | 6 +++---
 templates/repo/commit_statuses.tmpl | 2 +-
 templates/shared/issuelist.tmpl     | 6 +++---
 web_src/css/base.css                | 4 ----
 web_src/css/helpers.css             | 1 +
 5 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 3005fd59e96cd..adff93dfd3697 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -64,9 +64,9 @@
 				</li>
 				<li class="sample-group">
 					<h2>Inline / Plain:</h2>
-					<div class="gt-my-2">This is a <button class="button button-ghost gt-p-3">Ghost</button> button with padding: hover background, no text highlight</div>
-					<div class="gt-my-2">This is a <button class="button button-link">Link</button> button: no background, hover text highlight + underline</div>
-					<div class="gt-my-2">This is a <button class="button button-link no-underline">No Underline Link</button> button: no background, hover text highlight
+					<div class="gt-my-2">This is a <button class="button button-ghost gt-p-3">Ghost button</button> with padding: hover background, no text highlight</div>
+					<div class="gt-my-2">This is a <button class="button button-link">Link button</button> with no background, hover text highlight + underline</div>
+					<div class="gt-my-2">This is a <button class="button button-link gt-no-underline">No Underline Link button</button>: no background, hover text highlight
 				</li>
 			</ul>
 			<script type="module">
diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl
index 30dfa5af9ea8a..20a59bf0d7171 100644
--- a/templates/repo/commit_statuses.tmpl
+++ b/templates/repo/commit_statuses.tmpl
@@ -1,6 +1,6 @@
 {{if .Statuses}}
 	{{if and (eq (len .Statuses) 1) .Status.TargetURL}}
-		<a class="gt-vm no-underline" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
+		<a class="gt-vm gt-no-underline" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
 			{{template "repo/commit_status" .Status}}
 		</a>
 	{{else}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index faa026d36a4ac..8ae00a2ba944c 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -12,7 +12,7 @@
 			</div>
 			<div class="issue-item-main gt-f1 gt-fc gt-df">
 				<div class="issue-item-top-row">
-					<a class="title no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
+					<a class="title gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
 					{{if .IsPull}}
 						{{if (index $.CommitStatuses .PullRequest.ID)}}
 							{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}}
@@ -132,7 +132,7 @@
 				{{if .Assignees}}
 				<div class="issue-item-icon-right text grey">
 					{{range .Assignees}}
-						<a class="ui assignee no-underline" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
+						<a class="ui assignee gt-no-underline" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
 							{{avatar $.Context . 20}}
 						</a>
 					{{end}}
@@ -140,7 +140,7 @@
 				{{end}}
 				{{if .NumComments}}
 				<div class="issue-item-icon-right text grey">
-					<a class="no-underline muted" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+					<a class="gt-no-underline muted" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{svg "octicon-comment" 16 "gt-mr-2"}}{{.NumComments}}
 					</a>
 				</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index efd06fdaa65db..22fe8a6d0b899 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -414,10 +414,6 @@ a.silenced:hover {
   text-decoration: none;
 }
 
-a.no-underline:hover {
-  text-decoration: none;
-}
-
 .delete-button,
 .delete-button:hover {
   color: var(--color-red);
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 06df44bedf8c2..85f1d0e6bc8dc 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -75,6 +75,7 @@ Gitea's private styles use `g-` prefix.
 .gt-self-center { align-self: center !important; }
 .gt-self-start { align-self: flex-start !important; }
 .gt-self-end { align-self: flex-end !important; }
+.gt-no-underline { text-decoration-line: none !important; }
 
 .gt-overflow-x-auto { overflow-x: auto !important; }
 .gt-overflow-x-scroll { overflow-x: scroll !important; }

From df6d2ae30f713775a72c8765eff5650d41d33812 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 3 Jun 2023 01:30:08 +0200
Subject: [PATCH 17/36] text tweaks

---
 templates/devtest/gitea-ui.tmpl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index adff93dfd3697..00422288024d1 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -64,9 +64,9 @@
 				</li>
 				<li class="sample-group">
 					<h2>Inline / Plain:</h2>
-					<div class="gt-my-2">This is a <button class="button button-ghost gt-p-3">Ghost button</button> with padding: hover background, no text highlight</div>
+					<div class="gt-my-2">This is a <button class="button button-ghost gt-p-3">Ghost button</button> with padding, hover background, no text highlight</div>
 					<div class="gt-my-2">This is a <button class="button button-link">Link button</button> with no background, hover text highlight + underline</div>
-					<div class="gt-my-2">This is a <button class="button button-link gt-no-underline">No Underline Link button</button>: no background, hover text highlight
+					<div class="gt-my-2">This is a <button class="button button-link gt-no-underline">No Underline Link button</button> with no background, hover text highlight
 				</li>
 			</ul>
 			<script type="module">

From a6fb02e475cfcf4b22ffcb6bad9bfe03bd44ec85 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 5 Jun 2023 12:06:55 +0200
Subject: [PATCH 18/36] Add `no-underline` to repo topic edit

---
 templates/repo/home.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 2eccd541bf520..c400b96518fbd 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-link gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-link no-underline gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}

From ff90a91681c3108923534e2dda3e15ed97169d0c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 5 Jun 2023 12:12:04 +0200
Subject: [PATCH 19/36] Fix class name

---
 templates/repo/home.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index c400b96518fbd..545400bb4d67d 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-link no-underline gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-link gt-no-underline gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}

From fe727963fbcce776252ebe12c9b9e6a033b5f4cb Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 5 Jun 2023 19:46:17 +0200
Subject: [PATCH 20/36] match input border, add hover to small-menu-items,
 adjust button size

---
 templates/org/settings/labels.tmpl     | 2 +-
 templates/repo/issue/labels.tmpl       | 2 +-
 web_src/css/base.css                   | 4 ++--
 web_src/css/repo/list-header.css       | 4 ++++
 web_src/css/themes/theme-arc-green.css | 4 ++--
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/templates/org/settings/labels.tmpl b/templates/org/settings/labels.tmpl
index c3917861f6ee1..be408617ce596 100644
--- a/templates/org/settings/labels.tmpl
+++ b/templates/org/settings/labels.tmpl
@@ -6,7 +6,7 @@
 						</div>
 						<div class="right floated three wide column">
 							<div class="ui right">
-								<button class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
+								<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
 							</div>
 						</div>
 					</div>
diff --git a/templates/repo/issue/labels.tmpl b/templates/repo/issue/labels.tmpl
index 93e264e4cdbf3..a122333c89d6b 100644
--- a/templates/repo/issue/labels.tmpl
+++ b/templates/repo/issue/labels.tmpl
@@ -6,7 +6,7 @@
 			{{template "repo/issue/navbar" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
 				<div class="ui right">
-					<button class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
+					<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
 				</div>
 			{{end}}
 		</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 22fe8a6d0b899..6a8c5e5a39314 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -193,8 +193,8 @@
   --color-input-text: #212121;
   --color-input-background: #fafafa;
   --color-input-toggle-background: #dedede;
-  --color-input-border: #dedede;
-  --color-input-border-hover: #dedede;
+  --color-input-border: var(--color-secondary);
+  --color-input-border-hover: var(--color-secondary);
   --color-navbar: #f8f8f8;
   --color-navbar-transparent: #f8f8f800;
   --color-light: #00000006;
diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css
index 5124adc8e5ed4..69539b035b20c 100644
--- a/web_src/css/repo/list-header.css
+++ b/web_src/css/repo/list-header.css
@@ -37,6 +37,10 @@
   padding-bottom: 6px !important;
 }
 
+.small-menu-items .item:hover {
+  background: var(--color-hover) !important;
+}
+
 .small-menu-items .item.active {
   background: var(--color-active) !important;
 }
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index 6571c63d60d6e..a3531bfb61167 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -179,8 +179,8 @@
   --color-input-text: #dfe3ec;
   --color-input-background: #262b36;
   --color-input-toggle-background: #454a57;
-  --color-input-border: #454a57;
-  --color-input-border-hover: #454a57;
+  --color-input-border: var(--color-secondary);
+  --color-input-border-hover: var(--color-secondary);
   --color-navbar: #252935;
   --color-navbar-transparent: #272b3700;
   --color-light: #00000028;

From 9f82644bf1a5497b2cffc2ea51473ae2c3276138 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 5 Jun 2023 19:48:19 +0200
Subject: [PATCH 21/36] move some button styles into button.css

---
 web_src/css/base.css           | 11 -----------
 web_src/css/modules/button.css | 11 +++++++++++
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 6a8c5e5a39314..469277c675da5 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -414,11 +414,6 @@ a.silenced:hover {
   text-decoration: none;
 }
 
-.delete-button,
-.delete-button:hover {
-  color: var(--color-red);
-}
-
 a.label,
 .repository-menu a,
 .ui.search .results a,
@@ -461,12 +456,6 @@ a.label,
   background-color: var(--color-markup-code-block);
 }
 
-/* try to match button with no icons in height */
-.icon-button {
-  padding-top: 7.42px !important;
-  padding-bottom: 7.42px !important;
-}
-
 .ui.divider:not(.vertical,.horizontal) {
   border-top-color: var(--color-secondary) !important;
   border-bottom: none !important;
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 80f39bfb4e1f1..d05054fb1f3fd 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -28,6 +28,17 @@
   margin: 0 !important;
 }
 
+.delete-button,
+.delete-button:hover {
+  color: var(--color-red);
+}
+
+/* try to match button with no icons in height */
+.icon-button {
+  padding-top: 7.42px !important;
+  padding-bottom: 7.42px !important;
+}
+
 /* a ghost button is a button without border with background hover/active effect */
 
 .button.button-ghost {

From 4db0b87c8ec583e2e27e4296965c3cded8c52913 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 5 Jun 2023 19:53:46 +0200
Subject: [PATCH 22/36] remove underlint from button-link

---
 templates/devtest/gitea-ui.tmpl | 3 +--
 templates/repo/home.tmpl        | 2 +-
 web_src/css/modules/button.css  | 2 --
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 00422288024d1..fc05d0e617b00 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -65,8 +65,7 @@
 				<li class="sample-group">
 					<h2>Inline / Plain:</h2>
 					<div class="gt-my-2">This is a <button class="button button-ghost gt-p-3">Ghost button</button> with padding, hover background, no text highlight</div>
-					<div class="gt-my-2">This is a <button class="button button-link">Link button</button> with no background, hover text highlight + underline</div>
-					<div class="gt-my-2">This is a <button class="button button-link gt-no-underline">No Underline Link button</button> with no background, hover text highlight
+					<div class="gt-my-2">This is a <button class="button button-link">Link button</button> with no background, hover text highlight. No underline because underline should only be used for links that navigate.</div>
 				</li>
 			</ul>
 			<script type="module">
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 545400bb4d67d..2eccd541bf520 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-link gt-no-underline gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-link gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index d05054fb1f3fd..afcaf694982af 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -80,12 +80,10 @@
   background: transparent;
   border: none;
   color: var(--color-primary);
-  text-decoration: underline;
 }
 
 .button.button-link:active {
   background: transparent;
-  text-decoration: underline;
   color: var(--color-primary-active);
 }
 

From 1de748337b6bf2d564ebf5ad8bf0be94231f1b15 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 5 Jun 2023 20:00:38 +0200
Subject: [PATCH 23/36] diff file header tweaks

---
 templates/repo/diff/box.tmpl | 2 +-
 web_src/css/repo.css         | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 64d9d82128653..e8bc692095a94 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -90,7 +90,7 @@
 						<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
 							<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
 								<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
-									<button class="fold-file ui button button-ghost gt-p-0 gt-mr-3{{if not $isExpandable}} gt-invisible{{end}}">
+									<button class="fold-file ui button button-ghost gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
 										{{if $file.ShouldBeHidden}}
 											{{svg "octicon-chevron-right" 18}}
 										{{else}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index b2b544a7ea1a9..a6c10094f8b79 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -3090,8 +3090,7 @@ tbody.commit-list {
 }
 
 .diff-file-header {
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+  padding: 5px 8px !important;
 }
 
 .diff-file-box[data-folded="true"] .diff-file-body {

From 0eebceb33671bb526a6e0ed9b471148ae3189220 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 6 Jun 2023 22:35:21 +0200
Subject: [PATCH 24/36] fix action input shifting by 1px

---
 web_src/css/base.css | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 2c894cdb8038c..5367db7f3c697 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -493,16 +493,13 @@ a.label,
   border-right-color: transparent;
 }
 
-.ui.action.input:not([class*="left action"]) > input {
-  border-right: none;
-}
-
+.ui.action.input:not([class*="left action"]) > input,
 .ui.action.input:not([class*="left action"]) > input:hover {
-  border-right: none;
+  border-right: 1px solid transparent;
 }
 
 .ui.action.input:not([class*="left action"]) > input:focus {
-  border-right: 1px solid var(--color-primary);
+  border-right-color: var(--color-primary);
 }
 
 /* fix button enlarged vertically by svg icon */

From 33ee04d70c367312500b035c9979c41b39b6a955 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 6 Jun 2023 22:37:15 +0200
Subject: [PATCH 25/36] add back subtle input border hover

---
 web_src/css/base.css                   | 2 +-
 web_src/css/themes/theme-arc-green.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 5367db7f3c697..3bf4b531886aa 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -194,7 +194,7 @@
   --color-input-background: #fafafa;
   --color-input-toggle-background: #dedede;
   --color-input-border: var(--color-secondary);
-  --color-input-border-hover: var(--color-secondary);
+  --color-input-border-hover: var(--color-secondary-dark-1);
   --color-navbar: #f8f8f8;
   --color-navbar-transparent: #f8f8f800;
   --color-light: #00000006;
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index a3531bfb61167..7f7c24faa44df 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -180,7 +180,7 @@
   --color-input-background: #262b36;
   --color-input-toggle-background: #454a57;
   --color-input-border: var(--color-secondary);
-  --color-input-border-hover: var(--color-secondary);
+  --color-input-border-hover: var(--color-secondary-dark-1);
   --color-navbar: #252935;
   --color-navbar-transparent: #272b3700;
   --color-light: #00000028;

From 142ebf92f8f9b7e01ae28dbbeb489b4080d6567a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 7 Jun 2023 17:05:07 +0200
Subject: [PATCH 26/36] mute author link in pin cards

---
 templates/repo/issue/list.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 77a5d87f26199..3323bf893e047 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -27,7 +27,7 @@
 							{{end}}
 						</div>
 						<div class="meta gt-my-2">
-							<span class="text light grey">
+							<span class="text light grey muted-links">
 								#{{.Index}}
 								{{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}}
 								{{if .OriginalAuthor}}

From 538b5e12503ff266a210e430d4d2a1fa5de3bc3d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 7 Jun 2023 17:36:43 +0200
Subject: [PATCH 27/36] replace button-ghost and button-link with
 gt-interact-fg/bg

---
 templates/devtest/gitea-ui.tmpl               |  7 ++-
 templates/repo/blame.tmpl                     |  2 +-
 templates/repo/branch/list.tmpl               | 20 ++++-----
 templates/repo/diff/blob_excerpt.tmpl         |  6 +--
 templates/repo/diff/box.tmpl                  |  4 +-
 templates/repo/diff/section_split.tmpl        | 10 ++---
 templates/repo/diff/section_unified.tmpl      |  2 +-
 templates/repo/home.tmpl                      |  2 +-
 templates/repo/issue/view_title.tmpl          |  2 +-
 templates/repo/view_file.tmpl                 |  2 +-
 .../user/notification/notification_div.tmpl   |  6 +--
 .../applications_oauth2_edit_form.tmpl        |  2 +-
 web_src/css/helpers.css                       |  8 ++++
 web_src/css/modules/button.css                | 44 +++----------------
 web_src/js/components/RepoActionView.vue      |  2 +-
 15 files changed, 50 insertions(+), 69 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index fc05d0e617b00..c819ba3c9db06 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -64,8 +64,11 @@
 				</li>
 				<li class="sample-group">
 					<h2>Inline / Plain:</h2>
-					<div class="gt-my-2">This is a <button class="button button-ghost gt-p-3">Ghost button</button> with padding, hover background, no text highlight</div>
-					<div class="gt-my-2">This is a <button class="button button-link">Link button</button> with no background, hover text highlight. No underline because underline should only be used for links that navigate.</div>
+					<div class="gt-my-2">
+						<button class="button button-plain gt-p-3">Plain button</button>
+						<button class="button button-plain gt-interact-fg gt-p-3">Plain button with interact fg</button>
+						<button class="button button-plain gt-interact-bg gt-p-3">Plain button with interact bg</button>
+					</div>
 				</li>
 			</ul>
 			<script type="module">
diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl
index e6bf1cc96fabe..87eb40f832e17 100644
--- a/templates/repo/blame.tmpl
+++ b/templates/repo/blame.tmpl
@@ -52,7 +52,7 @@
 							{{if $.EscapeStatus.Escaped}}
 								<td class="lines-escape">
 									{{if $row.EscapeStatus.Escaped}}
-										<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
+										<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
 									{{end}}
 								</td>
 							{{end}}
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index e0acd4f20ee65..d42c9b376426b 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -27,7 +27,7 @@
 							</td>
 							<td class="right aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-									<button class="ui button button-ghost show-create-branch-modal gt-p-3"
+									<button class="ui button button-plain gt-interact-bg show-create-branch-modal gt-p-3"
 										data-modal="#create-branch-modal"
 										data-branch-from="{{$.DefaultBranch}}"
 										data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
@@ -37,12 +37,12 @@
 									</button>
 								{{end}}
 								{{if .EnableFeed}}
-									<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
+									<a role="button" class="ui button button-plain gt-interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
 										{{svg "octicon-rss"}}
 									</a>
 								{{end}}
 								{{if not $.DisableDownloadSourceArchives}}
-									<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
+									<div class="ui dropdown button button-plain gt-interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
 										{{svg "octicon-download"}}
 										<div class="menu">
 											<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -51,7 +51,7 @@
 									</div>
 								{{end}}
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-									<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal"
+									<button class="ui button button-plain gt-interact-bg gt-p-3 show-modal show-rename-branch-modal"
 										data-is-default-branch="true"
 										data-modal="#rename-branch-modal"
 										data-old-branch-name="{{$.DefaultBranch}}"
@@ -134,7 +134,7 @@
 									</td>
 									<td class="three wide right aligned overflow-visible">
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-											<button class="ui button button-ghost gt-p-3 show-modal show-create-branch-modal"
+											<button class="ui button button-plain gt-interact-bg gt-p-3 show-modal show-create-branch-modal"
 												data-branch-from="{{.Name}}"
 												data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
 												data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
@@ -144,12 +144,12 @@
 											</button>
 										{{end}}
 										{{if $.EnableFeed}}
-											<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
+											<a role="button" class="ui button button-plain gt-interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
 												{{svg "octicon-rss"}}
 											</a>
 										{{end}}
 										{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
-											<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
+											<div class="ui dropdown button button-plain gt-interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
 												{{svg "octicon-download"}}
 												<div class="menu">
 													<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -158,7 +158,7 @@
 											</div>
 										{{end}}
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-											<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal"
+											<button class="ui button button-plain gt-interact-bg gt-p-3 show-modal show-rename-branch-modal"
 												data-is-default-branch="false"
 												data-old-branch-name="{{.Name}}"
 												data-modal="#rename-branch-modal"
@@ -169,13 +169,13 @@
 										{{end}}
 										{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
 											{{if .IsDeleted}}
-												<button class="ui button button-ghost gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
+												<button class="ui button button-plain gt-interact-bg gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
 													<span class="text blue">
 														{{svg "octicon-reply"}}
 													</span>
 												</button>
 											{{else}}
-												<button class="ui button button-ghost gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
+												<button class="ui button button-plain gt-interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
 													{{svg "octicon-trash"}}
 												</button>
 											{{end}}
diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl
index ab7abdbd7be2c..3b48227a87058 100644
--- a/templates/repo/diff/blob_excerpt.tmpl
+++ b/templates/repo/diff/blob_excerpt.tmpl
@@ -26,7 +26,7 @@
 		{{else}}
 			{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
-			<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+			<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 			<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
 			<td class="blob-excerpt lines-code lines-code-old">{{/*
 				*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
@@ -34,7 +34,7 @@
 				*/}}{{end}}{{/*
 			*/}}</td>
 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
-			<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+			<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 			<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
 			<td class="blob-excerpt lines-code lines-code-new">{{/*
 				*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
@@ -72,7 +72,7 @@
 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
 		{{end}}
 		{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
-		<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+		<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 		<td class="blob-excerpt lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
 		<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td>
 	</tr>
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index e8bc692095a94..f38b30b91bef5 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -90,7 +90,7 @@
 						<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
 							<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
 								<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
-									<button class="fold-file ui button button-ghost gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
+									<button class="fold-file ui button button-plain gt-interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
 										{{if $file.ShouldBeHidden}}
 											{{svg "octicon-chevron-right" 18}}
 										{{else}}
@@ -107,7 +107,7 @@
 										{{end}}
 									</div>
 									<span class="file gt-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
-									<button class="ui button button-link gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
+									<button class="ui button button-plain gt-interact-fg gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
 									{{if $file.IsGenerated}}
 										<span class="ui label">{{$.locale.Tr "repo.diff.generated"}}</span>
 									{{end}}
diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index cb96d64056ea2..2fd0188029df4 100644
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -34,7 +34,7 @@
 						{{end}}
 						</div>
 					</td>{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}}
-					<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td>
+					<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td>
 					<td colspan="6" class="lines-code lines-code-old ">{{/*
 						*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*
 					*/}}</td>
@@ -43,7 +43,7 @@
 					{{- $leftDiff := ""}}{{if $line.LeftIdx}}{{$leftDiff = $section.GetComputedInlineDiffFor $line $.root.locale}}{{end}}
 					{{- $rightDiff := ""}}{{if $match.RightIdx}}{{$rightDiff = $section.GetComputedInlineDiffFor $match $.root.locale}}{{end}}
 					<td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{$file.NameHash}}L{{$line.LeftIdx}}"></span></td>
-					<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
+					<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
 					<td class="lines-code lines-code-old del-code">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
@@ -58,7 +58,7 @@
 						*/}}{{end}}{{/*
 					*/}}</td>
 					<td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{$file.NameHash}}R{{$match.RightIdx}}{{end}}"></span></td>
-					<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-new add-code">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
@@ -75,7 +75,7 @@
 				{{else}}
 					{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}}
 					<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$file.NameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
-					<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-old">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
@@ -90,7 +90,7 @@
 						*/}}{{end}}{{/*
 					*/}}</td>
 					<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
-					<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-new">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index d9708531592f0..00b56ddb6bb96 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -41,7 +41,7 @@
 			{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale -}}
 			<td class="lines-escape">
 				{{- if $inlineDiff.EscapeStatus.Escaped -}}
-					<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>
+					<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>
 				{{- end -}}
 			</td>
 			<td class="lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 2eccd541bf520..22b435ae79171 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-link gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-plain gt-interactive-fg gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index 2bd0d561e8775..2b1927d1b0d26 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -47,7 +47,7 @@
 				{{if .HeadBranchLink}}
 					{{$headHref = printf `<a href="%s">%s</a>` (.HeadBranchLink | Escape) $headHref}}
 				{{end}}
-				{{$headHref = printf `%s <button class="button button-ghost" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
+				{{$headHref = printf `%s <button class="button button-plain gt-interact-fg" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
 				{{$baseHref := .BaseTarget|Escape}}
 				{{if .BaseBranchLink}}
 					{{$baseHref = printf `<a href="%s">%s</a>` (.BaseBranchLink | Escape) $baseHref}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 389aa2f4f2013..08b3dacfaaef9 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -107,7 +107,7 @@
 						<tr>
 							<td id="L{{$line}}" class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td>
 							{{if $.EscapeStatus.Escaped}}
-								<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button button button-ghost" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
+								<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
 							{{end}}
 							<td rel="L{{$line}}" class="lines-code chroma"><code class="code-inner">{{$code | Safe}}</code></td>
 						</tr>
diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index 7d50ce6071cfd..6b8afd0a8f5a1 100644
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -74,7 +74,7 @@
 										{{$.CsrfTokenHtml}}
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="pinned">
-										<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.pin"}}'
+										<button class="ui mini button button-plain gt-interact-bg gt-p-3" title='{{$.locale.Tr "notification.pin"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="pinned"
 											data-page="{{$.Page.Paginater.Current}}"
@@ -90,7 +90,7 @@
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="read">
 										<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
-										<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}'
+										<button class="ui mini button button-plain gt-interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="read"
 											data-page="{{$.Page.Paginater.Current}}"
@@ -105,7 +105,7 @@
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="unread">
 										<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
-										<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}'
+										<button class="ui mini button button-plain gt-interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="unread"
 											data-page="{{$.Page.Paginater.Current}}"
diff --git a/templates/user/settings/applications_oauth2_edit_form.tmpl b/templates/user/settings/applications_oauth2_edit_form.tmpl
index e19efe3147bc8..92e14c6e9f257 100644
--- a/templates/user/settings/applications_oauth2_edit_form.tmpl
+++ b/templates/user/settings/applications_oauth2_edit_form.tmpl
@@ -27,7 +27,7 @@
 			<form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post">
 				{{.CsrfTokenHtml}}
 				{{.locale.Tr "settings.oauth2_regenerate_secret_hint"}}
-				<button class="ui button button-ghost" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
+				<button class="ui button button-plain gt-interact-bg" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
 			</form>
 		</div>
 	</div>
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 85f1d0e6bc8dc..4291b87d67b10 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -124,6 +124,14 @@ Gitea's private styles use `g-` prefix.
 
 .gt-text-white { color: var(--color-white) !important; }
 
+.gt-interact-fg { color: inherit !important; }
+.gt-interact-fg:hover { color: var(--color-primary) !important; }
+.gt-interact-fg:active { color: var(--color-primary-active) !important; }
+
+.gt-interact-bg { background: transparent !important; }
+.gt-interact-bg:hover { background: var(--color-hover) !important; }
+.gt-interact-bg:active { background: var(--color-active) !important; }
+
 .gt-m-0 { margin: 0 !important; }
 .gt-m-1 { margin: .125rem !important; }
 .gt-m-2 { margin: .25rem !important; }
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index afcaf694982af..124dd901fde16 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -39,52 +39,22 @@
   padding-bottom: 7.42px !important;
 }
 
-/* a ghost button is a button without border with background hover/active effect */
+/* a plain button is a button without any opinionated styling */
 
-.button.button-ghost {
+.button.button-plain {
   background: transparent;
+  border-radius: var(--border-radius);
   border: none;
   color: inherit;
   margin: 0;
   padding: 0;
 }
 
-.button.button-ghost:focus {
-  background: transparent;
+.button.button-plain:hover,
+.button.button-plain:active,
+.button.button-plain:focus {
+  background: none;
   border: none;
-  color: inherit;
-}
-
-.button.button-ghost:hover {
-  background: var(--color-hover);
-  color: inherit;
-}
-
-.button.button-ghost:active {
-  background: var(--color-active);
-  color: inherit;
-}
-
-/* a link button is a button withour border with underline hover/active effect */
-
-.button.button-link {
-  background: transparent;
-  border: none;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
-
-.button.button-link:focus,
-.button.button-link:hover {
-  background: transparent;
-  border: none;
-  color: var(--color-primary);
-}
-
-.button.button-link:active {
-  background: transparent;
-  color: var(--color-primary-active);
 }
 
 /* other button styles */
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 704ffa0706a00..7fa37060f9da1 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -70,7 +70,7 @@
           </div>
           <div class="job-info-header-right">
             <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
-              <button class="ui button button-ghost gt-p-3">
+              <button class="ui button button-plain gt-interact-bg gt-p-3">
                 <SvgIcon name="octicon-gear" :size="18"/>
               </button>
               <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>

From 4dca36cb574832fb8da99bee045e002cd663a80a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 7 Jun 2023 17:48:15 +0200
Subject: [PATCH 28/36] fix selector mismatch on emoji images

---
 web_src/css/repo.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index de6ea64165f51..1c53a3a1de014 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1823,16 +1823,12 @@
   clear: right;
 }
 
-.repository .diff-file-box.file-content img {
+.repository .diff-file-box.file-content .image-diff img {
   max-width: 100%;
   padding: 0;
   border-radius: 0;
 }
 
-.repository .diff-file-box.file-content img.emoji {
-  padding: 0;
-}
-
 .repository .diff-file-box .ui.bottom.attached.table.segment {
   padding-top: 5px;
   padding-bottom: 5px;

From f335b21a3091c7ec44873e6d58d9f1dcbe4e6592 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Jun 2023 19:17:57 +0200
Subject: [PATCH 29/36] use unclassed button on actions rerun

---
 web_src/js/components/RepoActionView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 7fa37060f9da1..3ab5bfa86bd53 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -14,7 +14,7 @@
         <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
           {{ locale.cancel }}
         </button>
-        <button class="ui basic small compact button secondary gt-mr-0" @click="rerun()" v-else-if="run.canRerun">
+        <button class="ui basic small compact button gt-mr-0" @click="rerun()" v-else-if="run.canRerun">
           {{ locale.rerun_all }}
         </button>
       </div>

From 5743ef63faef9efb6211a8f41d383947768af5d4 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Jun 2023 19:20:27 +0200
Subject: [PATCH 30/36] increase link label contrast

---
 web_src/css/base.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 9f7b84a8d90ec..d245d0ecb4996 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1722,6 +1722,10 @@ i.icon.centerlock {
   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);

From 39ec04dcc51c6bfa7713c3980619c62801b87ec9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Jun 2023 19:22:15 +0200
Subject: [PATCH 31/36] tweak branch label

---
 web_src/css/shared/issuelist.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index cd6fcf76e25e4..ecbeaf1dfdb40 100644
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -145,7 +145,7 @@
 }
 
 .issue.list .branches .branch {
-  background-color: var(--color-secondary-alpha-30);
+  background-color: var(--color-secondary-alpha-40);
   border-radius: 3px;
 }
 

From c0a78971cebd30b4fe0168a0c7e28b01d1f7c2c7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Jun 2023 19:27:49 +0200
Subject: [PATCH 32/36] color tweaks

---
 web_src/css/themes/theme-arc-green.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index 3a98ef0e5d8ca..a34f81d9998b3 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -174,7 +174,7 @@
   --color-text-light-1: #aaafb9;
   --color-text-light-2: #9a9ea9;
   --color-text-light-3: #8a8e99;
-  --color-footer: #2e323e;
+  --color-footer: #262b36;
   --color-timeline: #4c525e;
   --color-input-text: #dfe3ec;
   --color-input-background: #262b36;
@@ -193,8 +193,8 @@
   --color-markup-table-row: #ffffff06;
   --color-markup-code-block: #ffffff16;
   --color-button: #262b36;
-  --color-code-bg: #2a2e3a;
-  --color-code-sidebar-bg: #2e323e;
+  --color-code-bg: #222733;
+  --color-code-sidebar-bg: #252a36;
   --color-shadow: #00000060;
   --color-secondary-bg: #2a2e3a;
   --color-text-focus: #fff;

From 1be9a455c1505facfd4ae44d977db8751f0ac966 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Jun 2023 21:00:38 +0200
Subject: [PATCH 33/36] remove gt- prefix on interact classes

---
 templates/devtest/gitea-ui.tmpl               |  4 ++--
 templates/repo/blame.tmpl                     |  2 +-
 templates/repo/branch/list.tmpl               | 20 +++++++++----------
 templates/repo/diff/blob_excerpt.tmpl         |  6 +++---
 templates/repo/diff/box.tmpl                  |  4 ++--
 templates/repo/diff/section_split.tmpl        | 10 +++++-----
 templates/repo/diff/section_unified.tmpl      |  2 +-
 templates/repo/home.tmpl                      |  2 +-
 templates/repo/issue/view_title.tmpl          |  2 +-
 templates/repo/view_file.tmpl                 |  2 +-
 .../user/notification/notification_div.tmpl   |  6 +++---
 .../applications_oauth2_edit_form.tmpl        |  2 +-
 web_src/css/helpers.css                       | 12 +++++------
 13 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index c819ba3c9db06..761fe36fe135c 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -66,8 +66,8 @@
 					<h2>Inline / Plain:</h2>
 					<div class="gt-my-2">
 						<button class="button button-plain gt-p-3">Plain button</button>
-						<button class="button button-plain gt-interact-fg gt-p-3">Plain button with interact fg</button>
-						<button class="button button-plain gt-interact-bg gt-p-3">Plain button with interact bg</button>
+						<button class="button button-plain interact-fg gt-p-3">Plain button with interact fg</button>
+						<button class="button button-plain interact-bg gt-p-3">Plain button with interact bg</button>
 					</div>
 				</li>
 			</ul>
diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl
index 87eb40f832e17..7a707baf05439 100644
--- a/templates/repo/blame.tmpl
+++ b/templates/repo/blame.tmpl
@@ -52,7 +52,7 @@
 							{{if $.EscapeStatus.Escaped}}
 								<td class="lines-escape">
 									{{if $row.EscapeStatus.Escaped}}
-										<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
+										<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
 									{{end}}
 								</td>
 							{{end}}
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index d42c9b376426b..ca8ee87e55907 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -27,7 +27,7 @@
 							</td>
 							<td class="right aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-									<button class="ui button button-plain gt-interact-bg show-create-branch-modal gt-p-3"
+									<button class="ui button button-plain interact-bg show-create-branch-modal gt-p-3"
 										data-modal="#create-branch-modal"
 										data-branch-from="{{$.DefaultBranch}}"
 										data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
@@ -37,12 +37,12 @@
 									</button>
 								{{end}}
 								{{if .EnableFeed}}
-									<a role="button" class="ui button button-plain gt-interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
+									<a role="button" class="ui button button-plain interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
 										{{svg "octicon-rss"}}
 									</a>
 								{{end}}
 								{{if not $.DisableDownloadSourceArchives}}
-									<div class="ui dropdown button button-plain gt-interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
+									<div class="ui dropdown button button-plain interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
 										{{svg "octicon-download"}}
 										<div class="menu">
 											<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -51,7 +51,7 @@
 									</div>
 								{{end}}
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-									<button class="ui button button-plain gt-interact-bg gt-p-3 show-modal show-rename-branch-modal"
+									<button class="ui button button-plain interact-bg gt-p-3 show-modal show-rename-branch-modal"
 										data-is-default-branch="true"
 										data-modal="#rename-branch-modal"
 										data-old-branch-name="{{$.DefaultBranch}}"
@@ -134,7 +134,7 @@
 									</td>
 									<td class="three wide right aligned overflow-visible">
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-											<button class="ui button button-plain gt-interact-bg gt-p-3 show-modal show-create-branch-modal"
+											<button class="ui button button-plain interact-bg gt-p-3 show-modal show-create-branch-modal"
 												data-branch-from="{{.Name}}"
 												data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
 												data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
@@ -144,12 +144,12 @@
 											</button>
 										{{end}}
 										{{if $.EnableFeed}}
-											<a role="button" class="ui button button-plain gt-interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
+											<a role="button" class="ui button button-plain interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
 												{{svg "octicon-rss"}}
 											</a>
 										{{end}}
 										{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
-											<div class="ui dropdown button button-plain gt-interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
+											<div class="ui dropdown button button-plain interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
 												{{svg "octicon-download"}}
 												<div class="menu">
 													<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -158,7 +158,7 @@
 											</div>
 										{{end}}
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-											<button class="ui button button-plain gt-interact-bg gt-p-3 show-modal show-rename-branch-modal"
+											<button class="ui button button-plain interact-bg gt-p-3 show-modal show-rename-branch-modal"
 												data-is-default-branch="false"
 												data-old-branch-name="{{.Name}}"
 												data-modal="#rename-branch-modal"
@@ -169,13 +169,13 @@
 										{{end}}
 										{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
 											{{if .IsDeleted}}
-												<button class="ui button button-plain gt-interact-bg gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
+												<button class="ui button button-plain interact-bg gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
 													<span class="text blue">
 														{{svg "octicon-reply"}}
 													</span>
 												</button>
 											{{else}}
-												<button class="ui button button-plain gt-interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
+												<button class="ui button button-plain interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
 													{{svg "octicon-trash"}}
 												</button>
 											{{end}}
diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl
index 3b48227a87058..07b36a8632f79 100644
--- a/templates/repo/diff/blob_excerpt.tmpl
+++ b/templates/repo/diff/blob_excerpt.tmpl
@@ -26,7 +26,7 @@
 		{{else}}
 			{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
-			<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+			<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 			<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
 			<td class="blob-excerpt lines-code lines-code-old">{{/*
 				*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
@@ -34,7 +34,7 @@
 				*/}}{{end}}{{/*
 			*/}}</td>
 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
-			<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+			<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 			<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
 			<td class="blob-excerpt lines-code lines-code-new">{{/*
 				*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
@@ -72,7 +72,7 @@
 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
 		{{end}}
 		{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
-		<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+		<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 		<td class="blob-excerpt lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
 		<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td>
 	</tr>
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index f38b30b91bef5..9ee8855ec64e5 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -90,7 +90,7 @@
 						<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
 							<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
 								<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
-									<button class="fold-file ui button button-plain gt-interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
+									<button class="fold-file ui button button-plain interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
 										{{if $file.ShouldBeHidden}}
 											{{svg "octicon-chevron-right" 18}}
 										{{else}}
@@ -107,7 +107,7 @@
 										{{end}}
 									</div>
 									<span class="file gt-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
-									<button class="ui button button-plain gt-interact-fg gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
+									<button class="ui button button-plain interact-fg gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
 									{{if $file.IsGenerated}}
 										<span class="ui label">{{$.locale.Tr "repo.diff.generated"}}</span>
 									{{end}}
diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index 2fd0188029df4..3bbe7575ab42d 100644
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -34,7 +34,7 @@
 						{{end}}
 						</div>
 					</td>{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}}
-					<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td>
+					<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td>
 					<td colspan="6" class="lines-code lines-code-old ">{{/*
 						*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*
 					*/}}</td>
@@ -43,7 +43,7 @@
 					{{- $leftDiff := ""}}{{if $line.LeftIdx}}{{$leftDiff = $section.GetComputedInlineDiffFor $line $.root.locale}}{{end}}
 					{{- $rightDiff := ""}}{{if $match.RightIdx}}{{$rightDiff = $section.GetComputedInlineDiffFor $match $.root.locale}}{{end}}
 					<td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{$file.NameHash}}L{{$line.LeftIdx}}"></span></td>
-					<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
+					<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
 					<td class="lines-code lines-code-old del-code">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
@@ -58,7 +58,7 @@
 						*/}}{{end}}{{/*
 					*/}}</td>
 					<td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{$file.NameHash}}R{{$match.RightIdx}}{{end}}"></span></td>
-					<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-new add-code">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
@@ -75,7 +75,7 @@
 				{{else}}
 					{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}}
 					<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$file.NameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
-					<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-old">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
@@ -90,7 +90,7 @@
 						*/}}{{end}}{{/*
 					*/}}</td>
 					<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
-					<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-new">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index 00b56ddb6bb96..fff38d7702a7f 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -41,7 +41,7 @@
 			{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale -}}
 			<td class="lines-escape">
 				{{- if $inlineDiff.EscapeStatus.Escaped -}}
-					<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>
+					<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>
 				{{- end -}}
 			</td>
 			<td class="lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 22b435ae79171..ebdca6bb1dcc0 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-plain gt-interactive-fg gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-plain interactive-fg gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index 2b1927d1b0d26..56ee78834e101 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -47,7 +47,7 @@
 				{{if .HeadBranchLink}}
 					{{$headHref = printf `<a href="%s">%s</a>` (.HeadBranchLink | Escape) $headHref}}
 				{{end}}
-				{{$headHref = printf `%s <button class="button button-plain gt-interact-fg" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
+				{{$headHref = printf `%s <button class="button button-plain interact-fg" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
 				{{$baseHref := .BaseTarget|Escape}}
 				{{if .BaseBranchLink}}
 					{{$baseHref = printf `<a href="%s">%s</a>` (.BaseBranchLink | Escape) $baseHref}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 08b3dacfaaef9..b43a0efc652af 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -107,7 +107,7 @@
 						<tr>
 							<td id="L{{$line}}" class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td>
 							{{if $.EscapeStatus.Escaped}}
-								<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button button button-plain gt-interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
+								<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
 							{{end}}
 							<td rel="L{{$line}}" class="lines-code chroma"><code class="code-inner">{{$code | Safe}}</code></td>
 						</tr>
diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index 6b8afd0a8f5a1..8421fe4f9dd2b 100644
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -74,7 +74,7 @@
 										{{$.CsrfTokenHtml}}
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="pinned">
-										<button class="ui mini button button-plain gt-interact-bg gt-p-3" title='{{$.locale.Tr "notification.pin"}}'
+										<button class="ui mini button button-plain interact-bg gt-p-3" title='{{$.locale.Tr "notification.pin"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="pinned"
 											data-page="{{$.Page.Paginater.Current}}"
@@ -90,7 +90,7 @@
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="read">
 										<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
-										<button class="ui mini button button-plain gt-interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}'
+										<button class="ui mini button button-plain interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="read"
 											data-page="{{$.Page.Paginater.Current}}"
@@ -105,7 +105,7 @@
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="unread">
 										<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
-										<button class="ui mini button button-plain gt-interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}'
+										<button class="ui mini button button-plain interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="unread"
 											data-page="{{$.Page.Paginater.Current}}"
diff --git a/templates/user/settings/applications_oauth2_edit_form.tmpl b/templates/user/settings/applications_oauth2_edit_form.tmpl
index 92e14c6e9f257..8498b38e3c9ce 100644
--- a/templates/user/settings/applications_oauth2_edit_form.tmpl
+++ b/templates/user/settings/applications_oauth2_edit_form.tmpl
@@ -27,7 +27,7 @@
 			<form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post">
 				{{.CsrfTokenHtml}}
 				{{.locale.Tr "settings.oauth2_regenerate_secret_hint"}}
-				<button class="ui button button-plain gt-interact-bg" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
+				<button class="ui button button-plain interact-bg" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
 			</form>
 		</div>
 	</div>
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 4291b87d67b10..a4b6259dd9441 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -124,13 +124,13 @@ Gitea's private styles use `g-` prefix.
 
 .gt-text-white { color: var(--color-white) !important; }
 
-.gt-interact-fg { color: inherit !important; }
-.gt-interact-fg:hover { color: var(--color-primary) !important; }
-.gt-interact-fg:active { color: var(--color-primary-active) !important; }
+.interact-fg { color: inherit !important; }
+.interact-fg:hover { color: var(--color-primary) !important; }
+.interact-fg:active { color: var(--color-primary-active) !important; }
 
-.gt-interact-bg { background: transparent !important; }
-.gt-interact-bg:hover { background: var(--color-hover) !important; }
-.gt-interact-bg:active { background: var(--color-active) !important; }
+.interact-bg { background: transparent !important; }
+.interact-bg:hover { background: var(--color-hover) !important; }
+.interact-bg:active { background: var(--color-active) !important; }
 
 .gt-m-0 { margin: 0 !important; }
 .gt-m-1 { margin: .125rem !important; }

From f247426ed0e8d6b3db2a49421af4e94d11457040 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Jun 2023 21:14:37 +0200
Subject: [PATCH 34/36] rename to btn

---
 templates/devtest/gitea-ui.tmpl               |  6 +++---
 templates/repo/blame.tmpl                     |  2 +-
 templates/repo/branch/list.tmpl               | 20 +++++++++----------
 templates/repo/diff/blob_excerpt.tmpl         |  6 +++---
 templates/repo/diff/box.tmpl                  |  4 ++--
 templates/repo/diff/section_split.tmpl        | 10 +++++-----
 templates/repo/diff/section_unified.tmpl      |  2 +-
 templates/repo/home.tmpl                      |  2 +-
 templates/repo/issue/view_title.tmpl          |  2 +-
 templates/repo/view_file.tmpl                 |  2 +-
 .../user/notification/notification_div.tmpl   |  6 +++---
 .../applications_oauth2_edit_form.tmpl        |  2 +-
 web_src/css/modules/button.css                |  8 ++++----
 web_src/js/components/RepoActionView.vue      |  2 +-
 14 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 761fe36fe135c..824b7d0db6952 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -65,9 +65,9 @@
 				<li class="sample-group">
 					<h2>Inline / Plain:</h2>
 					<div class="gt-my-2">
-						<button class="button button-plain gt-p-3">Plain button</button>
-						<button class="button button-plain interact-fg gt-p-3">Plain button with interact fg</button>
-						<button class="button button-plain interact-bg gt-p-3">Plain button with interact bg</button>
+						<button class="btn gt-p-3">Plain button</button>
+						<button class="btn interact-fg gt-p-3">Plain button with interact fg</button>
+						<button class="btn interact-bg gt-p-3">Plain button with interact bg</button>
 					</div>
 				</li>
 			</ul>
diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl
index 7a707baf05439..c7116a5f59d3c 100644
--- a/templates/repo/blame.tmpl
+++ b/templates/repo/blame.tmpl
@@ -52,7 +52,7 @@
 							{{if $.EscapeStatus.Escaped}}
 								<td class="lines-escape">
 									{{if $row.EscapeStatus.Escaped}}
-										<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
+										<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
 									{{end}}
 								</td>
 							{{end}}
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index ca8ee87e55907..9a451c2dcaf40 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -27,7 +27,7 @@
 							</td>
 							<td class="right aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-									<button class="ui button button-plain interact-bg show-create-branch-modal gt-p-3"
+									<button class="btn interact-bg show-create-branch-modal gt-p-3"
 										data-modal="#create-branch-modal"
 										data-branch-from="{{$.DefaultBranch}}"
 										data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
@@ -37,12 +37,12 @@
 									</button>
 								{{end}}
 								{{if .EnableFeed}}
-									<a role="button" class="ui button button-plain interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
+									<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
 										{{svg "octicon-rss"}}
 									</a>
 								{{end}}
 								{{if not $.DisableDownloadSourceArchives}}
-									<div class="ui dropdown button button-plain interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
+									<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
 										{{svg "octicon-download"}}
 										<div class="menu">
 											<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -51,7 +51,7 @@
 									</div>
 								{{end}}
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-									<button class="ui button button-plain interact-bg gt-p-3 show-modal show-rename-branch-modal"
+									<button class="btn interact-bg gt-p-3 show-modal show-rename-branch-modal"
 										data-is-default-branch="true"
 										data-modal="#rename-branch-modal"
 										data-old-branch-name="{{$.DefaultBranch}}"
@@ -134,7 +134,7 @@
 									</td>
 									<td class="three wide right aligned overflow-visible">
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-											<button class="ui button button-plain interact-bg gt-p-3 show-modal show-create-branch-modal"
+											<button class="btn interact-bg gt-p-3 show-modal show-create-branch-modal"
 												data-branch-from="{{.Name}}"
 												data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
 												data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
@@ -144,12 +144,12 @@
 											</button>
 										{{end}}
 										{{if $.EnableFeed}}
-											<a role="button" class="ui button button-plain interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
+											<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
 												{{svg "octicon-rss"}}
 											</a>
 										{{end}}
 										{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
-											<div class="ui dropdown button button-plain interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
+											<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
 												{{svg "octicon-download"}}
 												<div class="menu">
 													<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -158,7 +158,7 @@
 											</div>
 										{{end}}
 										{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-											<button class="ui button button-plain interact-bg gt-p-3 show-modal show-rename-branch-modal"
+											<button class="btn interact-bg gt-p-3 show-modal show-rename-branch-modal"
 												data-is-default-branch="false"
 												data-old-branch-name="{{.Name}}"
 												data-modal="#rename-branch-modal"
@@ -169,13 +169,13 @@
 										{{end}}
 										{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
 											{{if .IsDeleted}}
-												<button class="ui button button-plain interact-bg gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
+												<button class="btn interact-bg gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
 													<span class="text blue">
 														{{svg "octicon-reply"}}
 													</span>
 												</button>
 											{{else}}
-												<button class="ui button button-plain interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
+												<button class="btn interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
 													{{svg "octicon-trash"}}
 												</button>
 											{{end}}
diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl
index 07b36a8632f79..23149f611a459 100644
--- a/templates/repo/diff/blob_excerpt.tmpl
+++ b/templates/repo/diff/blob_excerpt.tmpl
@@ -26,7 +26,7 @@
 		{{else}}
 			{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
-			<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+			<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 			<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
 			<td class="blob-excerpt lines-code lines-code-old">{{/*
 				*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
@@ -34,7 +34,7 @@
 				*/}}{{end}}{{/*
 			*/}}</td>
 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
-			<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+			<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 			<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
 			<td class="blob-excerpt lines-code lines-code-new">{{/*
 				*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
@@ -72,7 +72,7 @@
 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
 		{{end}}
 		{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
-		<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
+		<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
 		<td class="blob-excerpt lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
 		<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td>
 	</tr>
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 9ee8855ec64e5..36fb98fa6631f 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -90,7 +90,7 @@
 						<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
 							<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
 								<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
-									<button class="fold-file ui button button-plain interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
+									<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
 										{{if $file.ShouldBeHidden}}
 											{{svg "octicon-chevron-right" 18}}
 										{{else}}
@@ -107,7 +107,7 @@
 										{{end}}
 									</div>
 									<span class="file gt-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
-									<button class="ui button button-plain interact-fg gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
+									<button class="btn interact-fg gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
 									{{if $file.IsGenerated}}
 										<span class="ui label">{{$.locale.Tr "repo.diff.generated"}}</span>
 									{{end}}
diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index 3bbe7575ab42d..1c9bfed04ee2e 100644
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -34,7 +34,7 @@
 						{{end}}
 						</div>
 					</td>{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}}
-					<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td>
+					<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td>
 					<td colspan="6" class="lines-code lines-code-old ">{{/*
 						*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*
 					*/}}</td>
@@ -43,7 +43,7 @@
 					{{- $leftDiff := ""}}{{if $line.LeftIdx}}{{$leftDiff = $section.GetComputedInlineDiffFor $line $.root.locale}}{{end}}
 					{{- $rightDiff := ""}}{{if $match.RightIdx}}{{$rightDiff = $section.GetComputedInlineDiffFor $match $.root.locale}}{{end}}
 					<td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{$file.NameHash}}L{{$line.LeftIdx}}"></span></td>
-					<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
+					<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
 					<td class="lines-code lines-code-old del-code">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
@@ -58,7 +58,7 @@
 						*/}}{{end}}{{/*
 					*/}}</td>
 					<td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{$file.NameHash}}R{{$match.RightIdx}}{{end}}"></span></td>
-					<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-new add-code">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
@@ -75,7 +75,7 @@
 				{{else}}
 					{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}}
 					<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$file.NameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
-					<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-old">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
@@ -90,7 +90,7 @@
 						*/}}{{end}}{{/*
 					*/}}</td>
 					<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
-					<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
+					<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
 					<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
 					<td class="lines-code lines-code-new">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index fff38d7702a7f..8f9c122f05fd5 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -41,7 +41,7 @@
 			{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale -}}
 			<td class="lines-escape">
 				{{- if $inlineDiff.EscapeStatus.Escaped -}}
-					<button class="toggle-escape-button button button-plain interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>
+					<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>
 				{{- end -}}
 			</td>
 			<td class="lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index ebdca6bb1dcc0..f5e39d4345a42 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-plain interactive-fg gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny btn interactive-fg gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index 56ee78834e101..6a302d7401813 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -47,7 +47,7 @@
 				{{if .HeadBranchLink}}
 					{{$headHref = printf `<a href="%s">%s</a>` (.HeadBranchLink | Escape) $headHref}}
 				{{end}}
-				{{$headHref = printf `%s <button class="button button-plain interact-fg" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
+				{{$headHref = printf `%s <button class="btn interact-fg" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
 				{{$baseHref := .BaseTarget|Escape}}
 				{{if .BaseBranchLink}}
 					{{$baseHref = printf `<a href="%s">%s</a>` (.BaseBranchLink | Escape) $baseHref}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index b43a0efc652af..96339c9699de7 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -107,7 +107,7 @@
 						<tr>
 							<td id="L{{$line}}" class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td>
 							{{if $.EscapeStatus.Escaped}}
-								<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button button button-plain interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
+								<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
 							{{end}}
 							<td rel="L{{$line}}" class="lines-code chroma"><code class="code-inner">{{$code | Safe}}</code></td>
 						</tr>
diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index 8421fe4f9dd2b..0b46e43b4f0b1 100644
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -74,7 +74,7 @@
 										{{$.CsrfTokenHtml}}
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="pinned">
-										<button class="ui mini button button-plain interact-bg gt-p-3" title='{{$.locale.Tr "notification.pin"}}'
+										<button class="btn interact-bg gt-p-3" title='{{$.locale.Tr "notification.pin"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="pinned"
 											data-page="{{$.Page.Paginater.Current}}"
@@ -90,7 +90,7 @@
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="read">
 										<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
-										<button class="ui mini button button-plain interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}'
+										<button class="btn interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="read"
 											data-page="{{$.Page.Paginater.Current}}"
@@ -105,7 +105,7 @@
 										<input type="hidden" name="notification_id" value="{{.ID}}">
 										<input type="hidden" name="status" value="unread">
 										<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
-										<button class="ui mini button button-plain interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}'
+										<button class="btn interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}'
 											data-url="{{AppSubUrl}}/notifications/status"
 											data-status="unread"
 											data-page="{{$.Page.Paginater.Current}}"
diff --git a/templates/user/settings/applications_oauth2_edit_form.tmpl b/templates/user/settings/applications_oauth2_edit_form.tmpl
index 8498b38e3c9ce..0ec81f3a99aa1 100644
--- a/templates/user/settings/applications_oauth2_edit_form.tmpl
+++ b/templates/user/settings/applications_oauth2_edit_form.tmpl
@@ -27,7 +27,7 @@
 			<form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post">
 				{{.CsrfTokenHtml}}
 				{{.locale.Tr "settings.oauth2_regenerate_secret_hint"}}
-				<button class="ui button button-plain interact-bg" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
+				<button class="btn interact-bg" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
 			</form>
 		</div>
 	</div>
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 124dd901fde16..6dfe868b6eb50 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -41,7 +41,7 @@
 
 /* a plain button is a button without any opinionated styling */
 
-.button.button-plain {
+.btn {
   background: transparent;
   border-radius: var(--border-radius);
   border: none;
@@ -50,9 +50,9 @@
   padding: 0;
 }
 
-.button.button-plain:hover,
-.button.button-plain:active,
-.button.button-plain:focus {
+.btn:hover,
+.btn:active,
+.btn:focus {
   background: none;
   border: none;
 }
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 3ab5bfa86bd53..ca6319355cd32 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -70,7 +70,7 @@
           </div>
           <div class="job-info-header-right">
             <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
-              <button class="ui button button-plain gt-interact-bg gt-p-3">
+              <button class="btn gt-interact-bg gt-p-3">
                 <SvgIcon name="octicon-gear" :size="18"/>
               </button>
               <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>

From 9e7b241cd68d91914889af91a39728e5651754af Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Jun 2023 21:16:27 +0200
Subject: [PATCH 35/36] fix rss buttons on branches page

---
 templates/repo/branch/list.tmpl | 8 ++------
 web_src/css/modules/button.css  | 5 +++++
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 9a451c2dcaf40..8617bcafafaaa 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -37,9 +37,7 @@
 									</button>
 								{{end}}
 								{{if .EnableFeed}}
-									<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
-										{{svg "octicon-rss"}}
-									</a>
+									<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">{{svg "octicon-rss"}}</a>
 								{{end}}
 								{{if not $.DisableDownloadSourceArchives}}
 									<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
@@ -144,9 +142,7 @@
 											</button>
 										{{end}}
 										{{if $.EnableFeed}}
-											<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
-												{{svg "octicon-rss"}}
-											</a>
+											<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">{{svg "octicon-rss"}}</a>
 										{{end}}
 										{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
 											<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 6dfe868b6eb50..117ff250cfe65 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -57,6 +57,11 @@
   border: none;
 }
 
+a.btn,
+a.btn:hover {
+  color: inherit;
+}
+
 /* other button styles */
 
 .ui.buttons .button:first-child {

From fd498cb8d4a2e18b4080b31fc15568534c3a696b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Jun 2023 21:20:25 +0200
Subject: [PATCH 36/36] fix repo home button

---
 templates/repo/home.tmpl       | 2 +-
 web_src/css/helpers.css        | 1 +
 web_src/css/modules/button.css | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index f5e39d4345a42..a679de5027eea 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -30,7 +30,7 @@
 		</div>
 		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
 			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny btn interactive-fg gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg gt-ml-2 gt-font-12">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index a4b6259dd9441..0496a4c9b3a33 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -261,6 +261,7 @@ Gitea's private styles use `g-` prefix.
 
 .gt-shrink-0 { flex-shrink: 0 !important; }
 
+.gt-font-12 { font-size: 12px !important }
 .gt-font-13 { font-size: 13px !important }
 .gt-font-14 { font-size: 14px !important }
 .gt-font-15 { font-size: 15px !important }
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 117ff250cfe65..72eb1f3989bd3 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -39,7 +39,7 @@
   padding-bottom: 7.42px !important;
 }
 
-/* a plain button is a button without any opinionated styling */
+/* btn is a plain button without any opinionated styling */
 
 .btn {
   background: transparent;