From 29529fa24e33c36edf6037e76788b6eb798f5a9e Mon Sep 17 00:00:00 2001
From: Andrew Thornton <art27@cantab.net>
Date: Sun, 12 Feb 2023 17:03:53 +0000
Subject: [PATCH 1/9] Move helpers to be prefixed with `gt-`

As discussed in #22847 the helpers in helpers.less need to have a
separate prefix as they are causing conflicts with fomantic styles

This will allow us to have the `.gt-hidden { display:none !important; }`
style that is needed to for the reverted PR.

Of note in doing this I have noticed that there was already a conflict
with at least one chroma style which this PR now avoids.

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 models/avatars/avatar.go                      |   2 +-
 routers/web/repo/blame.go                     |   4 +-
 routers/web/repo/issue_content_history.go     |   2 +-
 templates/admin/process-row.tmpl              |   6 +-
 templates/admin/repo/unadopted.tmpl           |   8 +-
 templates/admin/stacktrace-row.tmpl           |  20 +-
 templates/base/head_navbar.tmpl               |  26 +-
 templates/base/paginate.tmpl                  |  10 +-
 templates/code/searchresults.tmpl             |   6 +-
 templates/explore/repo_list.tmpl              |  18 +-
 templates/install.tmpl                        |   6 +-
 templates/org/home.tmpl                       |  16 +-
 templates/org/team/new.tmpl                   |   6 +-
 templates/package/content/container.tmpl      |   2 +-
 templates/package/metadata/cargo.tmpl         |  10 +-
 templates/package/metadata/chef.tmpl          |   6 +-
 templates/package/metadata/composer.tmpl      |   6 +-
 templates/package/metadata/conan.tmpl         |   8 +-
 templates/package/metadata/conda.tmpl         |   8 +-
 templates/package/metadata/container.tmpl     |  14 +-
 templates/package/metadata/helm.tmpl          |   4 +-
 templates/package/metadata/maven.tmpl         |   6 +-
 templates/package/metadata/npm.tmpl           |   8 +-
 templates/package/metadata/nuget.tmpl         |   4 +-
 templates/package/metadata/pub.tmpl           |   6 +-
 templates/package/metadata/pypi.tmpl          |   6 +-
 templates/package/metadata/rubygems.tmpl      |   6 +-
 templates/package/metadata/vagrant.tmpl       |   6 +-
 templates/package/settings.tmpl               |   2 +-
 templates/package/shared/list.tmpl            |   6 +-
 templates/package/shared/versionlist.tmpl     |   6 +-
 templates/package/view.tmpl                   |  14 +-
 templates/projects/list.tmpl                  |   8 +-
 templates/projects/view.tmpl                  |  38 +--
 templates/repo/actions/openclose.tmpl         |   4 +-
 templates/repo/actions/runs_list.tmpl         |  10 +-
 templates/repo/blame.tmpl                     |   8 +-
 templates/repo/branch/list.tmpl               |  16 +-
 templates/repo/branch_dropdown.tmpl           |  12 +-
 templates/repo/clone_buttons.tmpl             |   6 +-
 templates/repo/commit_page.tmpl               |  80 ++---
 templates/repo/commit_statuses.tmpl           |   8 +-
 templates/repo/commits.tmpl                   |   4 +-
 templates/repo/commits_list.tmpl              |   8 +-
 templates/repo/commits_list_small.tmpl        |   2 +-
 templates/repo/commits_table.tmpl             |   8 +-
 templates/repo/diff/blob_excerpt.tmpl         |   6 +-
 templates/repo/diff/box.tmpl                  |  42 +--
 templates/repo/diff/comment_form.tmpl         |   2 +-
 templates/repo/diff/comments.tmpl             |   8 +-
 templates/repo/diff/compare.tmpl              |  12 +-
 templates/repo/diff/conversation.tmpl         |  20 +-
 templates/repo/diff/image_diff.tmpl           |   2 +-
 templates/repo/diff/new_review.tmpl           |   8 +-
 templates/repo/diff/section_split.tmpl        |   8 +-
 templates/repo/diff/section_unified.tmpl      |   2 +-
 templates/repo/diff/stats.tmpl                |   2 +-
 templates/repo/diff/whitespace_dropdown.tmpl  |  16 +-
 templates/repo/editor/commit_form.tmpl        |   2 +-
 templates/repo/editor/patch.tmpl              |   2 +-
 templates/repo/file_info.tmpl                 |   4 +-
 templates/repo/find/files.tmpl                |   8 +-
 templates/repo/graph.tmpl                     |  16 +-
 templates/repo/graph/commits.tmpl             |  24 +-
 templates/repo/header.tmpl                    |  16 +-
 templates/repo/home.tmpl                      |  30 +-
 templates/repo/icon.tmpl                      |   2 +-
 .../repo/issue/branch_selector_field.tmpl     |   6 +-
 templates/repo/issue/list.tmpl                |  20 +-
 templates/repo/issue/milestone_issues.tmpl    |   8 +-
 templates/repo/issue/milestones.tmpl          |  20 +-
 templates/repo/issue/new_form.tmpl            |  26 +-
 templates/repo/issue/openclose.tmpl           |   6 +-
 templates/repo/issue/view_content.tmpl        |   8 +-
 .../repo/issue/view_content/comments.tmpl     |  60 ++--
 templates/repo/issue/view_content/pull.tmpl   |   4 +-
 .../view_content/pull_merge_instruction.tmpl  |   6 +-
 .../repo/issue/view_content/sidebar.tmpl      |  98 +++---
 .../view_content/update_branch_by_merge.tmpl  |   2 +-
 templates/repo/issue/view_title.tmpl          |   4 +-
 templates/repo/migrate/migrate.tmpl           |   6 +-
 templates/repo/projects/list.tmpl             |   8 +-
 templates/repo/projects/view.tmpl             |  38 +--
 templates/repo/pulls/status.tmpl              |   2 +-
 templates/repo/release/list.tmpl              |  68 ++--
 templates/repo/release/new.tmpl               |   8 +-
 templates/repo/search.tmpl                    |   6 +-
 templates/repo/settings/branches.tmpl         |   2 +-
 templates/repo/settings/deploy_keys.tmpl      |   2 +-
 templates/repo/settings/githooks.tmpl         |   6 +-
 templates/repo/settings/options.tmpl          |   8 +-
 templates/repo/settings/tags.tmpl             |   2 +-
 .../repo/settings/webhook/base_list.tmpl      |   8 +-
 templates/repo/sub_menu.tmpl                  |   8 +-
 templates/repo/unicode_escape_prompt.tmpl     |   4 +-
 templates/repo/view_file.tmpl                 |  14 +-
 templates/repo/view_list.tmpl                 |   2 +-
 templates/repo/wiki/pages.tmpl                |   2 +-
 templates/repo/wiki/revision.tmpl             |   4 +-
 templates/repo/wiki/view.tmpl                 |   8 +-
 templates/shared/actions/runner_edit.tmpl     |   8 +-
 templates/shared/issuelist.tmpl               |  52 +--
 templates/shared/searchbottom.tmpl            |   8 +-
 templates/shared/secrets/add_list.tmpl        |   4 +-
 templates/shared/user/authorlink.tmpl         |   2 +-
 templates/status/404.tmpl                     |   2 +-
 templates/status/500.tmpl                     |   2 +-
 templates/user/auth/captcha.tmpl              |   6 +-
 templates/user/dashboard/feeds.tmpl           |   4 +-
 templates/user/dashboard/issues.tmpl          |   6 +-
 templates/user/dashboard/milestones.tmpl      |  20 +-
 templates/user/dashboard/repolist.tmpl        |  74 ++--
 .../notification_subscriptions.tmpl           |   4 +-
 templates/user/profile.tmpl                   |  12 +-
 templates/user/settings/applications.tmpl     |  22 +-
 .../settings/applications_oauth2_list.tmpl    |   4 +-
 templates/user/settings/grants_oauth2.tmpl    |   2 +-
 templates/user/settings/keys_gpg.tmpl         |   4 +-
 templates/user/settings/keys_ssh.tmpl         |   4 +-
 templates/user/settings/repos.tmpl            |  10 +-
 tests/integration/release_test.go             |   2 +-
 web_src/js/components/DiffFileList.vue        |  14 +-
 web_src/js/components/DiffFileTree.vue        |   6 +-
 web_src/js/components/DiffFileTreeItem.vue    |   8 +-
 .../js/components/PullRequestMergeForm.vue    |   6 +-
 web_src/js/components/RepoActionView.vue      |  18 +-
 web_src/js/features/common-global.js          |   2 +-
 web_src/js/features/repo-common.js            |   4 +-
 web_src/js/features/repo-findfile.js          |   2 +-
 web_src/js/features/repo-findfile.test.js     |   6 +-
 web_src/js/features/repo-issue-content.js     |   8 +-
 web_src/js/features/repo-legacy.js            |   6 +-
 web_src/js/markup/math.js                     |   2 +-
 web_src/js/markup/mermaid.js                  |   2 +-
 web_src/less/_runner.less                     |   2 +-
 web_src/less/helpers.less                     | 322 +++++++++---------
 136 files changed, 918 insertions(+), 918 deletions(-)

diff --git a/models/avatars/avatar.go b/models/avatars/avatar.go
index 4386142861fcb..67f693e82f8dc 100644
--- a/models/avatars/avatar.go
+++ b/models/avatars/avatar.go
@@ -21,7 +21,7 @@ import (
 
 const (
 	// DefaultAvatarClass is the default class of a rendered avatar
-	DefaultAvatarClass = "ui avatar vm"
+	DefaultAvatarClass = "ui avatar gt-vm"
 	// DefaultAvatarPixelSize is the default size in pixels of a rendered avatar
 	DefaultAvatarPixelSize = 28
 )
diff --git a/routers/web/repo/blame.go b/routers/web/repo/blame.go
index def7cfcadbe6c..2380a95e34902 100644
--- a/routers/web/repo/blame.go
+++ b/routers/web/repo/blame.go
@@ -262,9 +262,9 @@ func renderBlame(ctx *context.Context, blameParts []git.BlamePart, commitNames m
 
 				var avatar string
 				if commit.User != nil {
-					avatar = string(templates.Avatar(commit.User, 18, "mr-3"))
+					avatar = string(templates.Avatar(commit.User, 18, "gt-mr-3"))
 				} else {
-					avatar = string(templates.AvatarByEmail(commit.Author.Email, commit.Author.Name, 18, "mr-3"))
+					avatar = string(templates.AvatarByEmail(commit.Author.Email, commit.Author.Name, 18, "gt-mr-3"))
 				}
 
 				br.Avatar = gotemplate.HTML(avatar)
diff --git a/routers/web/repo/issue_content_history.go b/routers/web/repo/issue_content_history.go
index 3e6b31f8f71ba..7e5295e757b7c 100644
--- a/routers/web/repo/issue_content_history.go
+++ b/routers/web/repo/issue_content_history.go
@@ -71,7 +71,7 @@ func GetContentHistoryList(ctx *context.Context) {
 		}
 
 		src := html.EscapeString(item.UserAvatarLink)
-		class := avatars.DefaultAvatarClass + " mr-3"
+		class := avatars.DefaultAvatarClass + " gt-mr-3"
 		name := html.EscapeString(username)
 		avatarHTML := string(templates.AvatarHTML(src, 28, class, username))
 		timeSinceText := string(timeutil.TimeSinceUnix(item.EditedUnix, ctx.Locale))
diff --git a/templates/admin/process-row.tmpl b/templates/admin/process-row.tmpl
index 4ab190af46b68..71870d553c920 100644
--- a/templates/admin/process-row.tmpl
+++ b/templates/admin/process-row.tmpl
@@ -1,7 +1,7 @@
 <div class="item">
-	<div class="df ac">
-		<div class="icon ml-3 mr-3">{{if eq .Process.Type "request"}}{{svg "octicon-globe" 16}}{{else if eq .Process.Type "system"}}{{svg "octicon-cpu" 16}}{{else}}{{svg "octicon-terminal" 16}}{{end}}</div>
-		<div class="content f1">
+	<div class="df gt-ac">
+		<div class="icon gt-ml-3 gt-mr-3">{{if eq .Process.Type "request"}}{{svg "octicon-globe" 16}}{{else if eq .Process.Type "system"}}{{svg "octicon-cpu" 16}}{{else}}{{svg "octicon-terminal" 16}}{{end}}</div>
+		<div class="content gt-f1">
 			<div class="header">{{.Process.Description}}</div>
 			<div class="description"><span title="{{DateFmtLong .Process.Start}}">{{TimeSince .Process.Start .root.locale}}</span></div>
 		</div>
diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl
index ca0b4c3bb9a02..2629056d1dd5c 100644
--- a/templates/admin/repo/unadopted.tmpl
+++ b/templates/admin/repo/unadopted.tmpl
@@ -45,11 +45,11 @@
 												<input type="hidden" name="page" value="{{$.CurrentPage}}">
 												<div class="actions">
 													<div class="ui red basic inverted cancel button">
-														{{svg "octicon-trash" 16 "mr-2"}}
+														{{svg "octicon-trash" 16 "gt-mr-2"}}
 														{{$.locale.Tr "modal.no"}}
 													</div>
 													<button class="ui green basic inverted ok button">
-														{{svg "octicon-check" 16 "mr-2"}}
+														{{svg "octicon-check" 16 "gt-mr-2"}}
 														{{$.locale.Tr "modal.yes"}}
 													</button>
 												</div>
@@ -72,11 +72,11 @@
 												<input type="hidden" name="page" value="{{$.CurrentPage}}">
 												<div class="actions">
 													<div class="ui red basic inverted cancel button">
-														{{svg "octicon-trash" 16 "mr-2"}}
+														{{svg "octicon-trash" 16 "gt-mr-2"}}
 														{{$.locale.Tr "modal.no"}}
 													</div>
 													<button class="ui green basic inverted ok button">
-														{{svg "octicon-check" 16 "mr-2"}}
+														{{svg "octicon-check" 16 "gt-mr-2"}}
 														{{$.locale.Tr "modal.yes"}}
 													</button>
 												</div>
diff --git a/templates/admin/stacktrace-row.tmpl b/templates/admin/stacktrace-row.tmpl
index a8ae486bcb812..e6d2e68cbb6fb 100644
--- a/templates/admin/stacktrace-row.tmpl
+++ b/templates/admin/stacktrace-row.tmpl
@@ -1,6 +1,6 @@
 <div class="item">
-	<div class="df ac">
-		<div class="icon ml-3 mr-3">
+	<div class="gt-df gt-ac">
+		<div class="icon gt-ml-3 gt-mr-3">
 			{{if eq .Process.Type "request"}}
 				{{svg "octicon-globe" 16}}
 			{{else if eq .Process.Type "system"}}
@@ -11,7 +11,7 @@
 				{{svg "octicon-code" 16}}
 			{{end}}
 		</div>
-		<div class="content f1">
+		<div class="content gt-f1">
 			<div class="header">{{.Process.Description}}</div>
 			<div class="description">{{if ne .Process.Type "none"}}<span title="{{DateFmtLong .Process.Start}}">{{TimeSince .Process.Start .root.locale}}</span>{{end}}</div>
 		</div>
@@ -22,14 +22,14 @@
 		</div>
 	</div>
 	{{if .Process.Stacks}}
-		<div class="divided list ml-3">
+		<div class="divided list gt-ml-3">
 			{{range .Process.Stacks}}
 				<div class="item">
 					<details>
 						<summary>
-							<div class="dif content">
-								<div class="header ml-3">
-									<span class="icon mr-3">{{svg "octicon-code" 16}}</span>{{.Description}}{{if gt .Count 1}} * {{.Count}}{{end}}
+							<div class="gt-dif content">
+								<div class="header gt-ml-3">
+									<span class="icon gt-mr-3">{{svg "octicon-code" 16}}</span>{{.Description}}{{if gt .Count 1}} * {{.Count}}{{end}}
 								</div>
 								<div class="description">
 									{{range .Labels}}
@@ -40,9 +40,9 @@
 						</summary>
 						<div class="list">
 							{{range .Entry}}
-								<div class="item df ac">
-									<span class="icon mr-4">{{svg "octicon-dot-fill" 16}}</span>
-									<div class="content f1">
+								<div class="item gt-df gt-ac">
+									<span class="icon gt-mr-4">{{svg "octicon-dot-fill" 16}}</span>
+									<div class="content gt-f1">
 										<div class="header"><code>{{.Function}}</code></div>
 										<div class="description"><code>{{.File}}:{{.Line}}</code></div>
 									</div>
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 1c995e73e74cc..068d9fde86408 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -3,13 +3,13 @@
 	{{if .IsSigned}}
 		{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
 	{{end}}
-	<div class="item brand sb">
+	<div class="item brand gt-sb">
 		<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
 			<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
 		</a>
-		<div class="df ac">
+		<div class="gt-df gt-ac">
 			{{if .IsSigned}}
-			<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only mr-4 mt-3" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
+			<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only gt-mr-4 gt-mt-3" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
 				<span class="fitted item">
 					{{svg "octicon-bell"}}
 					<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
@@ -49,7 +49,7 @@
 		<div class="item">
 		<div class="ui icon input">
 		<input class="searchbox" type="text" placeholder="{{.locale.Tr "search_project"}}">
-		<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+		<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 		</div>
 		</div>
 	*/}}
@@ -80,19 +80,19 @@
 	{{else if .IsSigned}}
 		<div class="right stackable menu">
 			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item ui mx-0{{if not .ActiveStopwatch}} hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
-				<span class="fitted relative">
+			<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
+				<span class="fitted gt-relative">
 					{{svg "octicon-stopwatch"}}
 					<span class="header-stopwatch-dot"></span>
 					<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
 				</span>
 			</a>
 			<div class="active-stopwatch-popup tippy-target">
-				<div class="df ac">
-					<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
-						{{svg "octicon-issue-opened" 16 "mr-3"}}
+				<div class="gt-df gt-ac">
+					<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
+						{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-						<span class="ui primary label stopwatch-time my-0 mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
+						<span class="ui primary label stopwatch-time gt-my-0 gt-mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
 							{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
 						</span>
 					</a>
@@ -118,7 +118,7 @@
 			</div>
 			{{end}}
 
-			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile mx-0" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
+			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile gt-mx-0" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
 				<span class="fitted item">
 					{{svg "octicon-bell"}}
 					<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
@@ -127,7 +127,7 @@
 				</span>
 			</a>
 
-			<div class="ui dropdown jump item tooltip mx-0" data-content="{{.locale.Tr "create_new"}}">
+			<div class="ui dropdown jump item tooltip gt-mx-0" data-content="{{.locale.Tr "create_new"}}">
 				<span class="text">
 					<span class="fitted">{{svg "octicon-plus"}}</span>
 					<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
@@ -150,7 +150,7 @@
 				</div><!-- end content create new menu -->
 			</div><!-- end dropdown menu create new -->
 
-			<div class="ui dropdown jump item tooltip mx-0" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
+			<div class="ui dropdown jump item tooltip gt-mx-0" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
 				<span class="text">
 					{{avatar .SignedUser 24 "tiny"}}
 					<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
diff --git a/templates/base/paginate.tmpl b/templates/base/paginate.tmpl
index 421e96a00a88c..9dd1549ea1b67 100644
--- a/templates/base/paginate.tmpl
+++ b/templates/base/paginate.tmpl
@@ -4,27 +4,27 @@
 		<div class="center page buttons">
 			<div class="ui borderless pagination menu">
 				<a class="{{if .IsFirst}}disabled{{end}} item navigation" {{if not .IsFirst}}href="{{$.Link}}{{if $paginationLink}}?{{$paginationLink}}{{end}}"{{end}}>
-					{{svg "gitea-double-chevron-left" 16 "mr-2"}}
+					{{svg "gitea-double-chevron-left" 16 "gt-mr-2"}}
 					<span class="navigation_label">{{$.locale.Tr "admin.first_page"}}</span>
 				</a>
 				<a class="{{if not .HasPrevious}}disabled{{end}} item navigation" {{if .HasPrevious}}href="{{$.Link}}?page={{.Previous}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>
-					{{svg "octicon-chevron-left" 16 "mr-2"}}
+					{{svg "octicon-chevron-left" 16 "gt-mr-2"}}
 					<span class="navigation_label">{{$.locale.Tr "repo.issues.previous"}}</span>
 				</a>
 				{{range .Pages}}
 					{{if eq .Num -1}}
 						<a class="disabled item">...</a>
 					{{else}}
-						<a class="{{if .IsCurrent}}active {{end}}item content-center" {{if not .IsCurrent}}href="{{$.Link}}?page={{.Num}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>{{.Num}}</a>
+						<a class="{{if .IsCurrent}}active {{end}}item gt-content-center" {{if not .IsCurrent}}href="{{$.Link}}?page={{.Num}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>{{.Num}}</a>
 					{{end}}
 				{{end}}
 				<a class="{{if not .HasNext}}disabled{{end}} item navigation" {{if .HasNext}}href="{{$.Link}}?page={{.Next}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>
 					<span class="navigation_label">{{$.locale.Tr "repo.issues.next"}}</span>
-					{{svg "octicon-chevron-right" 16 "ml-2"}}
+					{{svg "octicon-chevron-right" 16 "gt-ml-2"}}
 				</a>
 				<a class="{{if .IsLast}}disabled{{end}} item navigation" {{if not .IsLast}}href="{{$.Link}}?page={{.TotalPages}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>
 					<span class="navigation_label">{{$.locale.Tr "admin.last_page"}}</span>
-					{{svg "gitea-double-chevron-right" 16 "ml-2"}}
+					{{svg "gitea-double-chevron-right" 16 "gt-ml-2"}}
 				</a>
 			</div>
 		</div>
diff --git a/templates/code/searchresults.tmpl b/templates/code/searchresults.tmpl
index f9b17aee417d9..74721a5a674dd 100644
--- a/templates/code/searchresults.tmpl
+++ b/templates/code/searchresults.tmpl
@@ -1,7 +1,7 @@
-<div class="df ac fw">
+<div class="gt-df gt-ac gt-fw">
 	{{range $term := .SearchResultLanguages}}
-	<a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}{{if $.ContextUser}}/{{$.ContextUser.Name}}/-/code{{else}}/explore/code{{end}}?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
-		<i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
+	<a class="ui text-label gt-df gt-ac gt-mr-1 gt-my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}{{if $.ContextUser}}/{{$.ContextUser.Name}}/-/code{{else}}/explore/code{{end}}?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
+		<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i>
 		{{$term.Language}}
 		<div class="detail">{{$term.Count}}</div>
 	</a>
diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index ad03ff800f81f..6650e6073fcf2 100644
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -1,16 +1,16 @@
 <div class="ui repository list">
 	{{range .Repos}}
 		<div class="item">
-			<div class="ui header df ac">
+			<div class="ui header gt-df gt-ac">
 				<div class="repo-title">
-					{{$avatar := (repoAvatar . 32 "mr-3")}}
+					{{$avatar := (repoAvatar . 32 "gt-mr-3")}}
 					{{if $avatar}}
 						{{$avatar}}
 					{{end}}
 					<a class="name" href="{{.Link}}">
 						{{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
 					</a>
-					<div class="labels df ac fw">
+					<div class="labels gt-df gt-ac gt-fw">
 						{{if .IsArchived}}
 							<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
 						{{end}}
@@ -32,22 +32,22 @@
 							{{end}}
 						{{end}}
 						{{if .IsFork}}
-							<span class="tooltip df" data-content="{{$.locale.Tr "repo.fork"}}" data-position="bottom center">{{svg "octicon-repo-forked"}}</span>
+							<span class="tooltip gt-df" data-content="{{$.locale.Tr "repo.fork"}}" data-position="bottom center">{{svg "octicon-repo-forked"}}</span>
 						{{else if .IsMirror}}
-							<span class="tooltip df" data-content="{{$.locale.Tr "mirror"}}" data-position="bottom center">{{svg "octicon-mirror"}}</span>
+							<span class="tooltip gt-df" data-content="{{$.locale.Tr "mirror"}}" data-position="bottom center">{{svg "octicon-mirror"}}</span>
 						{{end}}
 					</div>
 				</div>
-				<div class="metas df ac text grey">
+				<div class="metas gt-df gt-ac text grey">
 					{{if .PrimaryLanguage}}
 						<a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
-							<span class="df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
+							<span class="gt-df gt-ac gt-mr-3"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
 						</a>
 					{{end}}
 					{{if not $.DisableStars}}
-						<span class="text grey df ac mr-3">{{svg "octicon-star" 16 "mr-3"}}{{.NumStars}}</span>
+						<span class="text grey gt-df gt-ac gt-mr-3">{{svg "octicon-star" 16 "gt-mr-3"}}{{.NumStars}}</span>
 					{{end}}
-					<span class="text grey df ac mr-3">{{svg "octicon-git-branch" 16 "mr-3"}}{{.NumForks}}</span>
+					<span class="text grey gt-df gt-ac gt-mr-3">{{svg "octicon-git-branch" 16 "gt-mr-3"}}{{.NumForks}}</span>
 				</div>
 			</div>
 			<div class="description">
diff --git a/templates/install.tmpl b/templates/install.tmpl
index 3d33dcbcb766b..cfcb7bb374e84 100644
--- a/templates/install.tmpl
+++ b/templates/install.tmpl
@@ -176,7 +176,7 @@
 
 					<!-- Email -->
 					<details class="optional field">
-						<summary class="title py-3{{if .Err_SMTP}} text red{{end}}">
+						<summary class="title gt-py-3{{if .Err_SMTP}} text red{{end}}">
 							{{.locale.Tr "install.email_title"}}
 						</summary>
 						<div class="inline field">
@@ -216,7 +216,7 @@
 
 					<!-- Server and other services -->
 					<details class="optional field">
-						<summary class="title py-3{{if .Err_Services}} text red{{end}}">
+						<summary class="title gt-py-3{{if .Err_Services}} text red{{end}}">
 							{{.locale.Tr "install.server_service_title"}}
 						</summary>
 						<div class="inline field">
@@ -314,7 +314,7 @@
 
 					<!-- Admin -->
 					<details class="optional field">
-						<summary class="title py-3{{if .Err_Admin}} text red{{end}}">
+						<summary class="title gt-py-3{{if .Err_Admin}} text red{{end}}">
 							{{.locale.Tr "install.admin_title"}}
 						</summary>
 						<p class="center">{{.locale.Tr "install.admin_setting_desc"}}</p>
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index b3724e7a63f13..6e7ea7021fc30 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -1,12 +1,12 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content organization profile">
-	<div class="ui container df">
+	<div class="ui container gt-df">
 		{{avatar .Org 140 "org-avatar"}}
 		<div id="org-info">
 			<div class="ui header">
 				{{.Org.DisplayName}}
 				{{if .EnableFeed}}
-					<a href="{{.Org.HomeLink}}.rss"><i class="ui grey icon tooltip ml-3" data-content="{{.locale.Tr "rss_feed"}}" data-position="top center">{{svg "octicon-rss" 36}}</i></a>
+					<a href="{{.Org.HomeLink}}.rss"><i class="ui grey icon tooltip gt-ml-3" data-content="{{.locale.Tr "rss_feed"}}" data-position="top center">{{svg "octicon-rss" 36}}</i></a>
 				{{end}}
 				<span class="org-visibility">
 					{{if .Org.Visibility.IsLimited}}<div class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
@@ -41,10 +41,10 @@
 					</div>
 					<div class="ui divider"></div>
 				{{end}}
-				<h4 class="ui top attached header df">
-					<strong class="f1">{{.locale.Tr "org.people"}}</strong>
+				<h4 class="ui top attached header gt-df">
+					<strong class="gt-f1">{{.locale.Tr "org.people"}}</strong>
 					<div class="ui">
-						<a class="text grey dif ac" href="{{.OrgLink}}/members"><span>{{.MembersTotal}}</span> {{svg "octicon-chevron-right"}}</a>
+						<a class="text grey gt-dif gt-ac" href="{{.OrgLink}}/members"><span>{{.MembersTotal}}</span> {{svg "octicon-chevron-right"}}</a>
 					</div>
 				</h4>
 				<div class="ui attached segment members">
@@ -59,10 +59,10 @@
 				</div>
 
 				{{if .IsOrganizationMember}}
-					<div class="ui top attached header df">
-						<strong class="f1">{{.locale.Tr "org.teams"}}</strong>
+					<div class="ui top attached header gt-df">
+						<strong class="gt-f1">{{.locale.Tr "org.teams"}}</strong>
 						<div class="ui">
-							<a class="text grey dif ac" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
+							<a class="text grey gt-dif gt-ac" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
 						</div>
 					</div>
 					<div class="ui attached table segment teams">
diff --git a/templates/org/team/new.tmpl b/templates/org/team/new.tmpl
index d9d3902fe1a37..6e9a501cdec9b 100644
--- a/templates/org/team/new.tmpl
+++ b/templates/org/team/new.tmpl
@@ -78,11 +78,11 @@
 										<tr>
 											<th>{{.locale.Tr "units.unit"}}</th>
 											<th class="center aligned">{{.locale.Tr "org.teams.none_access"}}
-											<span class="tooltip vm" data-content="{{.locale.Tr "org.teams.none_access_helper"}}">{{svg "octicon-question" 16 "ml-2"}}</span></th>
+											<span class="tooltip gt-vm" data-content="{{.locale.Tr "org.teams.none_access_helper"}}">{{svg "octicon-question" 16 "gt-ml-2"}}</span></th>
 											<th class="center aligned">{{.locale.Tr "org.teams.read_access"}}
-											<span class="tooltip vm" data-content="{{.locale.Tr "org.teams.read_access_helper"}}">{{svg "octicon-question" 16 "ml-2"}}</span></th>
+											<span class="tooltip gt-vm" data-content="{{.locale.Tr "org.teams.read_access_helper"}}">{{svg "octicon-question" 16 "gt-ml-2"}}</span></th>
 											<th class="center aligned">{{.locale.Tr "org.teams.write_access"}}
-											<span class="tooltip vm" data-content="{{.locale.Tr "org.teams.write_access_helper"}}">{{svg "octicon-question" 16 "ml-2"}}</span></th>
+											<span class="tooltip gt-vm" data-content="{{.locale.Tr "org.teams.write_access_helper"}}">{{svg "octicon-question" 16 "gt-ml-2"}}</span></th>
 										</tr>
 									</thead>
 									<tbody>
diff --git a/templates/package/content/container.tmpl b/templates/package/content/container.tmpl
index 34d495f356d25..0bf749cd70c1e 100644
--- a/templates/package/content/container.tmpl
+++ b/templates/package/content/container.tmpl
@@ -46,7 +46,7 @@
 	{{end}}
 	{{if .PackageDescriptor.Metadata.ImageLayers}}
 		<h4 class="ui top attached header">{{.locale.Tr "packages.container.layers"}}</h4>
-		<div class="ui attached segment word-break">
+		<div class="ui attached segment gt-word-break">
 			<table class="ui very basic compact table">
 				<tbody>
 					{{range .PackageDescriptor.Metadata.ImageLayers}}
diff --git a/templates/package/metadata/cargo.tmpl b/templates/package/metadata/cargo.tmpl
index 68232d48321c5..79078b4008108 100644
--- a/templates/package/metadata/cargo.tmpl
+++ b/templates/package/metadata/cargo.tmpl
@@ -1,7 +1,7 @@
 {{if eq .PackageDescriptor.Package.Type "cargo"}}
-	{{range .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.cargo.details.repository_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.DocumentationURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.DocumentationURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.cargo.details.documentation_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
+	{{range .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.cargo.details.repository_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.DocumentationURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.DocumentationURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.cargo.details.documentation_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/chef.tmpl b/templates/package/metadata/chef.tmpl
index 00fc0e6c3419b..b414535f9a56e 100644
--- a/templates/package/metadata/chef.tmpl
+++ b/templates/package/metadata/chef.tmpl
@@ -1,5 +1,5 @@
 {{if eq .PackageDescriptor.Package.Type "chef"}}
-	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.repository_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.repository_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/composer.tmpl b/templates/package/metadata/composer.tmpl
index 2e76a10dabfc0..e6f67a1dd59cd 100644
--- a/templates/package/metadata/composer.tmpl
+++ b/templates/package/metadata/composer.tmpl
@@ -1,5 +1,5 @@
 {{if eq .PackageDescriptor.Package.Type "composer"}}
-	{{range .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.Name}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.Homepage}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.Homepage}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{range .PackageDescriptor.Metadata.License}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "mr-3"}} {{.}}</div>{{end}}
+	{{range .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.Name}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.Homepage}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.Homepage}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{range .PackageDescriptor.Metadata.License}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "gt-mr-3"}} {{.}}</div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/conan.tmpl b/templates/package/metadata/conan.tmpl
index 41cb42b692b25..0060f91d75bce 100644
--- a/templates/package/metadata/conan.tmpl
+++ b/templates/package/metadata/conan.tmpl
@@ -1,6 +1,6 @@
 {{if eq .PackageDescriptor.Package.Type "conan"}}
-	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.conan.details.repository"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.conan.details.repository"}}</a></div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/conda.tmpl b/templates/package/metadata/conda.tmpl
index 2201c803562bb..4021e6b91c9b4 100644
--- a/templates/package/metadata/conda.tmpl
+++ b/templates/package/metadata/conda.tmpl
@@ -1,6 +1,6 @@
 {{if eq .PackageDescriptor.Package.Type "conda"}}
-	{{if .PackageDescriptor.Metadata.License}}<div class="item">{{svg "octicon-law" 16 "mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.conda.details.repository_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.DocumentationURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.DocumentationURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.conda.details.documentation_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.License}}<div class="item">{{svg "octicon-law" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.conda.details.repository_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.DocumentationURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.DocumentationURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.conda.details.documentation_site"}}</a></div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/container.tmpl b/templates/package/metadata/container.tmpl
index 71df960f76f4a..7ff137080ee81 100644
--- a/templates/package/metadata/container.tmpl
+++ b/templates/package/metadata/container.tmpl
@@ -1,9 +1,9 @@
 {{if eq .PackageDescriptor.Package.Type "container"}}
-	<div class="item" title="{{.locale.Tr "packages.container.details.type"}}">{{svg "octicon-package" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Type.Name}}</div>
-	{{if .PackageDescriptor.Metadata.Platform}}<div class="item" title="{{$.locale.Tr "packages.container.details.platform"}}">{{svg "octicon-cpu" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Platform}}</div>{{end}}
-	{{range .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.Licenses}}<div class="item">{{svg "octicon-law" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Licenses}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.repository_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.DocumentationURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.DocumentationURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.documentation_site"}}</a></div>{{end}}
+	<div class="item" title="{{.locale.Tr "packages.container.details.type"}}">{{svg "octicon-package" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Type.Name}}</div>
+	{{if .PackageDescriptor.Metadata.Platform}}<div class="item" title="{{$.locale.Tr "packages.container.details.platform"}}">{{svg "octicon-cpu" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Platform}}</div>{{end}}
+	{{range .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.Licenses}}<div class="item">{{svg "octicon-law" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Licenses}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.repository_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.DocumentationURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.DocumentationURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.documentation_site"}}</a></div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/helm.tmpl b/templates/package/metadata/helm.tmpl
index 9f7f5d6ecd152..33e603bb325df 100644
--- a/templates/package/metadata/helm.tmpl
+++ b/templates/package/metadata/helm.tmpl
@@ -1,4 +1,4 @@
 {{if eq .PackageDescriptor.Package.Type "helm"}}
-	{{range .PackageDescriptor.Metadata.Maintainers}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.Name}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.Home}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.Home}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{range .PackageDescriptor.Metadata.Maintainers}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.Name}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.Home}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.Home}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/maven.tmpl b/templates/package/metadata/maven.tmpl
index f6fcdf6da8e4d..78c0d32267646 100644
--- a/templates/package/metadata/maven.tmpl
+++ b/templates/package/metadata/maven.tmpl
@@ -1,5 +1,5 @@
 {{if eq .PackageDescriptor.Package.Type "maven"}}
-	{{if .PackageDescriptor.Metadata.Name}}<div class="item">{{svg "octicon-note" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Name}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{range .PackageDescriptor.Metadata.Licenses}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "mr-3"}} {{.}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.Name}}<div class="item">{{svg "octicon-note" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Name}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{range .PackageDescriptor.Metadata.Licenses}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "gt-mr-3"}} {{.}}</div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/npm.tmpl b/templates/package/metadata/npm.tmpl
index d33a4c8bcae52..cbebf996f4b8a 100644
--- a/templates/package/metadata/npm.tmpl
+++ b/templates/package/metadata/npm.tmpl
@@ -1,8 +1,8 @@
 {{if eq .PackageDescriptor.Package.Type "npm"}}
-	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
 	{{range .PackageDescriptor.VersionProperties}}
-		{{if eq .Name "npm.tag"}}<div class="item" title="{{$.locale.Tr "packages.npm.details.tag"}}">{{svg "octicon-versions" 16 "mr-3"}} {{.Value}}</div>{{end}}
+		{{if eq .Name "npm.tag"}}<div class="item" title="{{$.locale.Tr "packages.npm.details.tag"}}">{{svg "octicon-versions" 16 "gt-mr-3"}} {{.Value}}</div>{{end}}
 	{{end}}
 {{end}}
diff --git a/templates/package/metadata/nuget.tmpl b/templates/package/metadata/nuget.tmpl
index b4e62b5a08aba..3b5610220343c 100644
--- a/templates/package/metadata/nuget.tmpl
+++ b/templates/package/metadata/nuget.tmpl
@@ -1,4 +1,4 @@
 {{if eq .PackageDescriptor.Package.Type "nuget"}}
-	{{if .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Authors}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Authors}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/pub.tmpl b/templates/package/metadata/pub.tmpl
index 632a506551c7c..8147ba85cc412 100644
--- a/templates/package/metadata/pub.tmpl
+++ b/templates/package/metadata/pub.tmpl
@@ -1,5 +1,5 @@
 {{if eq .PackageDescriptor.Package.Type "pub"}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.repository_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.DocumentationURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.DocumentationURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.documentation_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.repository_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.DocumentationURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.DocumentationURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.documentation_site"}}</a></div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/pypi.tmpl b/templates/package/metadata/pypi.tmpl
index 13b53d3591ab5..205487d3ce521 100644
--- a/templates/package/metadata/pypi.tmpl
+++ b/templates/package/metadata/pypi.tmpl
@@ -1,5 +1,5 @@
 {{if eq .PackageDescriptor.Package.Type "pypi"}}
-	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.License}}<div class="item" title="{{.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.License}}</div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/rubygems.tmpl b/templates/package/metadata/rubygems.tmpl
index bddb7b5422ee4..7e9af01eb7da9 100644
--- a/templates/package/metadata/rubygems.tmpl
+++ b/templates/package/metadata/rubygems.tmpl
@@ -1,5 +1,5 @@
 {{if eq .PackageDescriptor.Package.Type "rubygems"}}
-	{{range .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>	{{end}}
-	{{range .PackageDescriptor.Metadata.Licenses}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "mr-3"}} {{.}}</div>{{end}}
+	{{range .PackageDescriptor.Metadata.Authors}}<div class="item" title="{{$.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>	{{end}}
+	{{range .PackageDescriptor.Metadata.Licenses}}<div class="item" title="{{$.locale.Tr "packages.details.license"}}">{{svg "octicon-law" 16 "gt-mr-3"}} {{.}}</div>{{end}}
 {{end}}
diff --git a/templates/package/metadata/vagrant.tmpl b/templates/package/metadata/vagrant.tmpl
index 344e417b77f99..030da9c156ad6 100644
--- a/templates/package/metadata/vagrant.tmpl
+++ b/templates/package/metadata/vagrant.tmpl
@@ -1,5 +1,5 @@
 {{if eq .PackageDescriptor.Package.Type "vagrant"}}
-	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
-	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
-	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.conan.details.repository"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.Author}}<div class="item" title="{{.locale.Tr "packages.details.author"}}">{{svg "octicon-person" 16 "gt-mr-3"}} {{.PackageDescriptor.Metadata.Author}}</div>{{end}}
+	{{if .PackageDescriptor.Metadata.ProjectURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.ProjectURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.details.project_site"}}</a></div>{{end}}
+	{{if .PackageDescriptor.Metadata.RepositoryURL}}<div class="item">{{svg "octicon-link-external" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Metadata.RepositoryURL}}" target="_blank" rel="noopener noreferrer me">{{.locale.Tr "packages.conan.details.repository"}}</a></div>{{end}}
 {{end}}
diff --git a/templates/package/settings.tmpl b/templates/package/settings.tmpl
index a2c4bd4c28293..dc12fb8207dd5 100644
--- a/templates/package/settings.tmpl
+++ b/templates/package/settings.tmpl
@@ -51,7 +51,7 @@
 						{{.locale.Tr "packages.settings.delete"}}
 					</div>
 					<div class="content">
-						<div class="ui warning message text left word-break">
+						<div class="ui warning message text left gt-word-break">
 							{{.locale.Tr "packages.settings.delete.notice" .PackageDescriptor.Package.Name .PackageDescriptor.Version.Version}}
 						</div>
 						<form class="ui form" action="{{.Link}}" method="post">
diff --git a/templates/package/shared/list.tmpl b/templates/package/shared/list.tmpl
index 01e0cb49a6b8d..2b6398fcd6705 100644
--- a/templates/package/shared/list.tmpl
+++ b/templates/package/shared/list.tmpl
@@ -15,13 +15,13 @@
 	</form>
 	<div class="ui {{if .PackageDescriptors}}issue list{{end}}">
 		{{range .PackageDescriptors}}
-			<li class="item df py-3">
-				<div class="issue-item-main f1 fc df">
+			<li class="item gt-df gt-py-3">
+				<div class="issue-item-main gt-f1 gt-fc gt-df">
 					<div class="issue-item-top-row">
 						<a class="title" href="{{.FullWebLink}}">{{.Package.Name}}</a>
 						<span class="ui label">{{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}</span>
 					</div>
-					<div class="desc issue-item-bottom-row df ac fw my-1">
+					<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1">
 						{{$timeStr := TimeSinceUnix .Version.CreatedUnix $.locale}}
 						{{$hasRepositoryAccess := false}}
 						{{if .Repository}}
diff --git a/templates/package/shared/versionlist.tmpl b/templates/package/shared/versionlist.tmpl
index 952634cfbe9f8..ba488586a82e6 100644
--- a/templates/package/shared/versionlist.tmpl
+++ b/templates/package/shared/versionlist.tmpl
@@ -21,12 +21,12 @@
 	</form>
 	<div class="ui {{if .PackageDescriptors}}issue list{{end}}">
 		{{range .PackageDescriptors}}
-			<li class="item df py-3">
-				<div class="issue-item-main f1 fc df">
+			<li class="item gt-df gt-py-3">
+				<div class="issue-item-main gt-f1 gt-fc gt-df">
 					<div class="issue-item-top-row">
 						<a class="title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a>
 					</div>
-					<div class="desc issue-item-bottom-row df ac fw my-1">
+					<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1">
 						{{$.locale.Tr "packages.published_by" (TimeSinceUnix .Version.CreatedUnix $.locale) .Creator.HomeLink (.Creator.GetDisplayName | Escape) | Safe}}
 					</div>
 				</div>
diff --git a/templates/package/view.tmpl b/templates/package/view.tmpl
index 2b32139681e16..839d9cf21af1f 100644
--- a/templates/package/view.tmpl
+++ b/templates/package/view.tmpl
@@ -39,12 +39,12 @@
 					<div class="ui segment metas">
 						<strong>{{.locale.Tr "packages.details"}}</strong>
 						<div class="ui relaxed list">
-							<div class="item">{{svg .PackageDescriptor.Package.Type.SVGName 16 "mr-3"}} {{.PackageDescriptor.Package.Type.Name}}</div>
+							<div class="item">{{svg .PackageDescriptor.Package.Type.SVGName 16 "gt-mr-3"}} {{.PackageDescriptor.Package.Type.Name}}</div>
 							{{if .HasRepositoryAccess}}
-							<div class="item">{{svg "octicon-repo" 16 "mr-3"}} <a href="{{.PackageDescriptor.Repository.Link}}">{{.PackageDescriptor.Repository.FullName}}</a></div>
+							<div class="item">{{svg "octicon-repo" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Repository.Link}}">{{.PackageDescriptor.Repository.FullName}}</a></div>
 							{{end}}
-							<div class="item">{{svg "octicon-calendar" 16 "mr-3"}} {{TimeSinceUnix .PackageDescriptor.Version.CreatedUnix $.locale}}</div>
-							<div class="item">{{svg "octicon-download" 16 "mr-3"}} {{.PackageDescriptor.Version.DownloadCount}}</div>
+							<div class="item">{{svg "octicon-calendar" 16 "gt-mr-3"}} {{TimeSinceUnix .PackageDescriptor.Version.CreatedUnix $.locale}}</div>
+							<div class="item">{{svg "octicon-download" 16 "gt-mr-3"}} {{.PackageDescriptor.Version.DownloadCount}}</div>
 							{{template "package/metadata/cargo" .}}
 							{{template "package/metadata/chef" .}}
 							{{template "package/metadata/composer" .}}
@@ -60,7 +60,7 @@
 							{{template "package/metadata/pypi" .}}
 							{{template "package/metadata/rubygems" .}}
 							{{template "package/metadata/vagrant" .}}
-							<div class="item">{{svg "octicon-database" 16 "mr-3"}} {{FileSize .PackageDescriptor.CalculateBlobSize}}</div>
+							<div class="item">{{svg "octicon-database" 16 "gt-mr-3"}} {{FileSize .PackageDescriptor.CalculateBlobSize}}</div>
 						</div>
 						{{if not (eq .PackageDescriptor.Package.Type "container")}}
 							<div class="ui divider"></div>
@@ -91,10 +91,10 @@
 							<div class="ui divider"></div>
 							<div class="ui relaxed list">
 								{{if .HasRepositoryAccess}}
-								<div class="item">{{svg "octicon-issue-opened" 16 "mr-3"}} <a href="{{.PackageDescriptor.Repository.Link}}/issues">{{.locale.Tr "repo.issues"}}</a></div>
+								<div class="item">{{svg "octicon-issue-opened" 16 "gt-mr-3"}} <a href="{{.PackageDescriptor.Repository.Link}}/issues">{{.locale.Tr "repo.issues"}}</a></div>
 								{{end}}
 								{{if .CanWritePackages}}
-								<div class="item">{{svg "octicon-tools" 16 "mr-3"}} <a href="{{.Link}}/settings">{{.locale.Tr "repo.settings"}}</a></div>
+								<div class="item">{{svg "octicon-tools" 16 "gt-mr-3"}} <a href="{{.Link}}/settings">{{.locale.Tr "repo.settings"}}</a></div>
 								{{end}}
 							</div>
 						{{end}}
diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index 21a3350a75db1..8d9594e2b4773 100644
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -12,11 +12,11 @@
 		{{template "base/alert" .}}
 		<div class="ui compact tiny menu">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=open">
-				{{svg "octicon-project" 16 "mr-3"}}
+				{{svg "octicon-project" 16 "gt-mr-3"}}
 				{{JsPrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
 			</a>
 			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=closed">
-				{{svg "octicon-check" 16 "mr-3"}}
+				{{svg "octicon-check" 16 "gt-mr-3"}}
 				{{JsPrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
 			</a>
 		</div>
@@ -45,9 +45,9 @@
 							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate|Str2html}}
 						{{end}}
 						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "mr-3"}}
+							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 							{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "mr-3"}}
+							{{svg "octicon-check" 16 "gt-mr-3"}}
 							{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
 						</span>
 					</div>
diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index 72131e30bb79e..112e6be7ce41f 100644
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -48,22 +48,22 @@
 					<div class="ui compact right small menu">
 						<a class="item" href="{{$.Link}}/edit" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
 							{{svg "octicon-pencil"}}
-							<span class="mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
+							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
 						</a>
 						{{if .Project.IsClosed}}
 							<a class="item link-action" href data-url="{{$.Link}}/open">
 								{{svg "octicon-check"}}
-								<span class="mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
+								<span class="gt-mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
 							</a>
 						{{else}}
 							<a class="item link-action" href data-url="{{$.Link}}/close">
 								{{svg "octicon-skip"}}
-								<span class="mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
+								<span class="gt-mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
 							</a>
 						{{end}}
 						<a class="item delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.Project.ID}}">
 							{{svg "octicon-trash"}}
-							<span class="mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
+							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
 						</a>
 					</div>
 				</div>
@@ -77,8 +77,8 @@
 			{{range $board := .Boards}}
 
 			<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
-				<div class="board-column-header df ac sb">
-					<div class="ui large label board-label py-2">
+				<div class="board-column-header gt-df gt-ac gt-sb">
+					<div class="ui large label board-label gt-py-2">
 						<div class="ui small circular grey label board-card-cnt">
 							{{.NumIssues}}
 						</div>
@@ -86,7 +86,7 @@
 					</div>
 					{{if and $.CanWriteProjects (ne .ID 0)}}
 						<div class="ui dropdown jump item tooltip">
-							<div class="not-mobile px-3" tabindex="-1">
+							<div class="not-mobile gt-px-3" tabindex="-1">
 								{{svg "octicon-kebab-horizontal"}}
 							</div>
 							<div class="menu user-menu" tabindex="-1">
@@ -175,9 +175,9 @@
 
 					<!-- start issue card -->
 					<div class="card board-card" data-issue="{{.ID}}">
-						<div class="content p-0">
+						<div class="content gt-p-0">
 							<div class="header">
-								<span class="dif ac vm {{if .IsClosed}}red{{else}}green{{end}}">
+								<span class="gt-dif gt-ac gt-vm {{if .IsClosed}}red{{else}}green{{end}}">
 									{{if .IsPull}}
 										{{if .PullRequest.HasMerged}}
 											{{svg "octicon-git-merge" 16 "text purple"}}
@@ -196,11 +196,11 @@
 										{{end}}
 									{{end}}
 								</span>
-								<a class="project-board-title vm" href="{{.Link}}">
+								<a class="project-board-title gt-vm" href="{{.Link}}">
 									{{.Title}}
 								</a>
 							</div>
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<span class="text light grey">
 									{{.Repo.FullName}}#{{.Index}}
 									{{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}}
@@ -214,31 +214,31 @@
 								</span>
 							</div>
 							{{- if .MilestoneID}}
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<a class="milestone" href="{{$.RepoLink}}/milestone/{{.MilestoneID}}">
-									{{svg "octicon-milestone" 16 "mr-2 vm"}}
-									<span class="vm">{{.Milestone.Name}}</span>
+									{{svg "octicon-milestone" 16 "gt-mr-2 gt-vm"}}
+									<span class="gt-vm">{{.Milestone.Name}}</span>
 								</a>
 							</div>
 							{{- end}}
 							{{- range index $.LinkedPRs .ID}}
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<a href="{{$.RepoLink}}/pulls/{{.Index}}">
-									<span class="m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "mr-2 vm"}}</span>
-									<span class="vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
+									<span class="gt-m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
+									<span class="gt-vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
 								</a>
 							</div>
 							{{- end}}
 						</div>
 
 						{{if or .Labels .Assignees}}
-						<div class="extra content labels-list p-0 pt-2">
+						<div class="extra content labels-list gt-p-0 gt-pt-2">
 							{{range .Labels}}
 								<a class="ui label" target="_blank" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}};" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
 							{{end}}
 							<div class="right floated">
 								{{range .Assignees}}
-									<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini mr-3"}}</a>
+									<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini gt-mr-3"}}</a>
 								{{end}}
 							</div>
 						</div>
diff --git a/templates/repo/actions/openclose.tmpl b/templates/repo/actions/openclose.tmpl
index 4190ddf75dad4..804ef104ef544 100644
--- a/templates/repo/actions/openclose.tmpl
+++ b/templates/repo/actions/openclose.tmpl
@@ -1,10 +1,10 @@
 <div class="ui compact tiny menu">
 	<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?workflow={{.CurWorkflow}}&state=open">
-		{{svg "octicon-issue-opened" 16 "mr-3"}}
+		{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 		{{.locale.Tr "actions.runs.open_tab" $.NumOpenActionRuns}}
 	</a>
 	<a class="{{if .IsShowClosed}}active {{end}}item" href="{{$.Link}}?workflow={{.CurWorkflow}}&state=closed">
-		{{svg "octicon-issue-closed" 16 "mr-3"}}
+		{{svg "octicon-issue-closed" 16 "gt-mr-3"}}
 		{{.locale.Tr "actions.runs.closed_tab" $.NumClosedActionRuns}}
 	</a>
 </div>
diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl
index 2a8522294318d..a01d2165795b0 100644
--- a/templates/repo/actions/runs_list.tmpl
+++ b/templates/repo/actions/runs_list.tmpl
@@ -1,12 +1,12 @@
 <div class="issue list">
 	{{range .Runs}}
-		<li class="item df py-3">
-			<div class="issue-item-left df">
+		<li class="item gt-df gt-py-3">
+			<div class="issue-item-left gt-df">
 				{{template "repo/actions/status" .Status}}
 			</div>
-			<div class="issue-item-main f1 fc df">
+			<div class="issue-item-main gt-f1 gt-fc gt-df">
 				<div class="issue-item-top-row">
-					<a class="index ml-0 mr-2" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+					<a class="index gt-ml-0 gt-mr-2" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{.Title}}
 					</a>
 					<span class="ui label">
@@ -17,7 +17,7 @@
 						{{end}}
 					</span>
 				</div>
-				<div class="desc issue-item-bottom-row df ac fw my-1">
+				<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1">
 					<b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b>: {{$.locale.Tr "actions.runs.commit"}}
 					<a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a>&nbsp; {{$.locale.Tr "actions.runs.pushed_by"}} {{.TriggerUser.GetDisplayName | Escape}}
 				</div>
diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl
index e4a10ee57dd56..56198df07f96b 100644
--- a/templates/repo/blame.tmpl
+++ b/templates/repo/blame.tmpl
@@ -1,9 +1,9 @@
 <div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
-	<h4 class="file-header ui top attached header df ac sb fw">
-		<div class="file-header-left df ac py-3 pr-4">
+	<h4 class="file-header ui top attached header gt-df gt-ac gt-sb gt-fw">
+		<div class="file-header-left gt-df gt-ac gt-py-3 gt-pr-4">
 			{{template "repo/file_info" .}}
 		</div>
-		<div class="file-header-right file-actions df ac fw">
+		<div class="file-header-right file-actions gt-df gt-ac gt-fw">
 			<div class="ui buttons">
 				<a class="ui tiny button" href="{{$.RawFileLink}}">{{.locale.Tr "repo.file_raw"}}</a>
 				{{if not .IsViewCommit}}
@@ -57,7 +57,7 @@
 								</td>
 							{{end}}
 							<td rel="L{{$row.RowNumber}}" rel="L{{$row.RowNumber}}" class="lines-code blame-code chroma">
-								<code class="code-inner pl-3">{{$row.Code}}</code>
+								<code class="code-inner gt-pl-3">{{$row.Code}}</code>
 							</td>
 						</tr>
 					{{end}}
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 1a68c90e51684..cfa81a0f5bf1b 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -18,7 +18,7 @@
 									{{svg "octicon-shield-lock"}}
 								{{end}}
 								<a href="{{.RepoLink}}/src/branch/{{PathEscapeSegments .DefaultBranch}}">{{.DefaultBranch}}</a>
-								<p class="info df ac my-2">{{svg "octicon-git-commit" 16 "mr-2"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.Commit.ID.String}}">{{ShortSha .DefaultBranchBranch.Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DefaultBranchBranch.Commit.CommitMessage .RepoLink .Repository.ComposeMetas}}</span> · {{.locale.Tr "org.repo_updated"}} {{TimeSince .DefaultBranchBranch.Commit.Committer.When .locale}}</p>
+								<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.Commit.ID.String}}">{{ShortSha .DefaultBranchBranch.Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DefaultBranchBranch.Commit.CommitMessage .RepoLink .Repository.ComposeMetas}}</span> · {{.locale.Tr "org.repo_updated"}} {{TimeSince .DefaultBranchBranch.Commit.Committer.When .locale}}</p>
 							</td>
 							<td class="right aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
@@ -61,7 +61,7 @@
 											{{svg "octicon-shield-lock"}}
 										{{end}}
 										<a href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .Name}}">{{.Name}}</a>
-										<p class="info df ac my-2">{{svg "octicon-git-commit" 16 "mr-2"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.locale.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.locale}}</p>
+										<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.locale.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.locale}}</p>
 									{{end}}
 									</td>
 									<td class="three wide ui">
@@ -86,23 +86,23 @@
 												</a>
 											{{else if and (not .IsDeleted) $.AllowsPulls (gt .CommitsAhead 0)}}
 											<a href="{{$.RepoLink}}/compare/{{PathEscapeSegments $.DefaultBranch}}...{{if ne $.Repository.Owner.Name $.Owner.Name}}{{PathEscape $.Owner.Name}}:{{end}}{{PathEscapeSegments .Name}}">
-												<button id="new-pull-request" class="ui compact basic button mr-0">{{if $.CanPull}}{{$.locale.Tr "repo.pulls.compare_changes"}}{{else}}{{$.locale.Tr "action.compare_branch"}}{{end}}</button>
+												<button id="new-pull-request" class="ui compact basic button gt-mr-0">{{if $.CanPull}}{{$.locale.Tr "repo.pulls.compare_changes"}}{{else}}{{$.locale.Tr "action.compare_branch"}}{{end}}</button>
 											</a>
 											{{end}}
 										{{else if and .LatestPullRequest.HasMerged .MergeMovedOn}}
 											{{if and (not .IsDeleted) $.AllowsPulls (gt .CommitsAhead 0)}}
 											<a href="{{$.RepoLink}}/compare/{{PathEscapeSegments $.DefaultBranch}}...{{if ne $.Repository.Owner.Name $.Owner.Name}}{{$.Owner.Name}}:{{end}}{{.Name | PathEscapeSegments}}">
-												<button id="new-pull-request" class="ui compact basic button mr-0">{{if $.CanPull}}{{$.locale.Tr "repo.pulls.compare_changes"}}{{else}}{{$.locale.Tr "action.compare_branch"}}{{end}}</button>
+												<button id="new-pull-request" class="ui compact basic button gt-mr-0">{{if $.CanPull}}{{$.locale.Tr "repo.pulls.compare_changes"}}{{else}}{{$.locale.Tr "action.compare_branch"}}{{end}}</button>
 											</a>
 											{{end}}
 										{{else}}
-											<a href="{{.LatestPullRequest.Issue.Link}}" class="vm ref-issue">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
+											<a href="{{.LatestPullRequest.Issue.Link}}" class="gt-vm ref-issue">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
 											{{if .LatestPullRequest.HasMerged}}
-												<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label purple large label vm">{{svg "octicon-git-merge" 16 "mr-2"}}{{$.locale.Tr "repo.pulls.merged"}}</a>
+												<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label purple large label gt-vm">{{svg "octicon-git-merge" 16 "gt-mr-2"}}{{$.locale.Tr "repo.pulls.merged"}}</a>
 											{{else if .LatestPullRequest.Issue.IsClosed}}
-												<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label red large label vm">{{svg "octicon-git-pull-request" 16 "mr-2"}}{{$.locale.Tr "repo.issues.closed_title"}}</a>
+												<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label red large label gt-vm">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.closed_title"}}</a>
 											{{else}}
-												<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label green large label vm">{{svg "octicon-git-pull-request" 16 "mr-2"}}{{$.locale.Tr "repo.issues.open_title"}}</a>
+												<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label green large label gt-vm">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.open_title"}}</a>
 											{{end}}
 										{{end}}
 									</td>
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index edb077a014bd2..e07021bd20dc1 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -14,15 +14,15 @@
 		data-branch-url-suffix="{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}"
 		data-tag-url-prefix="{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if $release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}"
 		data-tag-url-suffix="{{if .tagURLSuffix}}{{.tagURLSuffix}}{{else if $release}}...{{if $release.IsDraft}}{{PathEscapeSegments $release.Target}}{{else}}{{if $release.TagName}}{{PathEscapeSegments $release.TagName}}{{else}}{{PathEscapeSegments $release.Sha1}}{{end}}{{end}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}">
-		<button class="branch-dropdown-button ellipsis ui basic small compact button df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
-			<span class="text df ac mr-2">
+		<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
+			<span class="text gt-df gt-ac gt-mr-2">
 				{{if $release}}
 					{{.root.locale.Tr "repo.release.compare"}}
 				{{else}}
 					<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}}</span>
 					<span :class="{visible: isViewBranch}" v-if="isViewBranch" {{if not (eq $type "branch")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
 					<span :class="{visible: isViewTree}" v-if="isViewTree" {{if not (eq $type "tree")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
-					<strong ref="dropdownRefName" class="ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
+					<strong ref="dropdownRefName" class="gt-ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
 				{{end}}
 			</span>
 			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -45,7 +45,7 @@
 		</div>
 		<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
 			<div class="ui icon search input">
-				<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+				<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
 				<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" placeholder="{{if $.noTag}}{{.root.locale.Tr "repo.pulls.filter_branch"}}{{else if $showBranchesInDropdown}}{{.root.locale.Tr "repo.filter_branch_and_tag"}}{{else}}{{.root.locale.Tr "repo.find_tag"}}{{end}}...">
 			</div>
 			{{if $showBranchesInDropdown}}
@@ -54,13 +54,13 @@
 						<div class="two column row">
 							<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
 								<span class="text" :class="{black: mode == 'branches'}">
-									{{svg "octicon-git-branch" 16 "mr-2"}}{{.root.locale.Tr "repo.branches"}}
+									{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.root.locale.Tr "repo.branches"}}
 								</span>
 							</a>
 							{{if not .noTag}}
 								<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
 									<span class="text" :class="{black: mode == 'tags'}">
-										{{svg "octicon-tag" 16 "mr-2"}}{{.root.locale.Tr "repo.tags"}}
+										{{svg "octicon-tag" 16 "gt-mr-2"}}{{.root.locale.Tr "repo.tags"}}
 									</span>
 								</a>
 							{{end}}
diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
index 7fb435e3c7827..a10f18b9dc159 100644
--- a/templates/repo/clone_buttons.tmpl
+++ b/templates/repo/clone_buttons.tmpl
@@ -1,15 +1,15 @@
 <!-- there is always at least one button (by context/repo.go) -->
 {{if $.CloneButtonShowHTTPS}}
-	<button class="ui basic small compact clone button no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
+	<button class="ui basic small compact clone button gt-no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
 		{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
 	</button>
 {{end}}
 {{if $.CloneButtonShowSSH}}
-	<button class="ui basic small compact clone button no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
+	<button class="ui basic small compact clone button gt-no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
 		SSH
 	</button>
 {{end}}
-<input id="repo-clone-url" size="20" class="js-clone-url br-0" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+<input id="repo-clone-url" size="20" class="js-clone-url gt-br-0" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
 <button class="ui basic small compact icon button tooltip" id="clipboard-btn" data-content="{{.locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.locale.Tr "copy_url"}}">
 	{{svg "octicon-copy" 14}}
 </button>
diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index b847a282bdd6b..632212c8c54dd 100644
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -17,9 +17,9 @@
 				{{$class = (printf "%s%s" $class " isWarning")}}
 			{{end}}
 		{{end}}
-		<div class="ui top attached header clearing segment pr commit-header {{$class}}">
-			<div class="df mb-4 fw">
-				<h3 class="mb-0 f1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses  "root" $}}</h3>
+		<div class="ui top attached header clearing segment gt-pr commit-header {{$class}}">
+			<div class="gt-df gt-mb-4 gt-fw">
+				<h3 class="gt-mb-0 gt-f1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses  "root" $}}</h3>
 				{{if not $.PageIsWiki}}
 					<div class="ui">
 						<a class="ui primary tiny button" href="{{.SourcePath}}">
@@ -134,41 +134,41 @@
 				{{end}}
 			</div>
 			{{if IsMultilineCommitMessage .Commit.Message}}
-				<pre class="commit-body mt-0">{{RenderCommitBody $.Context .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
+				<pre class="commit-body gt-mt-0">{{RenderCommitBody $.Context .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 			{{end}}
 			{{if .BranchName}}
-				<span class="text grey mr-3">{{svg "octicon-git-branch" 16 "mr-2"}}{{.BranchName}}</span>
+				<span class="text grey gt-mr-3">{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.BranchName}}</span>
 			{{end}}
 			{{if .TagName}}
-				<span class="text grey mr-3">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</span>
+				<span class="text grey gt-mr-3">{{svg "octicon-tag" 16 "gt-mr-2"}}{{.TagName}}</span>
 			{{end}}
 		</div>
-		<div class="ui attached segment df ac sb py-2 commit-header-row fw {{$class}}">
-				<div class="df ac author">
+		<div class="ui attached segment gt-df gt-ac gt-sb gt-py-2 commit-header-row gt-fw {{$class}}">
+				<div class="gt-df gt-ac author">
 					{{if .Author}}
-						{{avatar .Author 28 "mr-3"}}
+						{{avatar .Author 28 "gt-mr-3"}}
 						{{if .Author.FullName}}
 							<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a>
 						{{else}}
 							<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
 						{{end}}
 					{{else}}
-						{{avatarByEmail .Commit.Author.Email .Commit.Author.Email 28 "mr-3"}}
+						{{avatarByEmail .Commit.Author.Email .Commit.Author.Email 28 "gt-mr-3"}}
 						<strong>{{.Commit.Author.Name}}</strong>
 					{{end}}
-					<span class="text grey ml-3" id="authored-time">{{TimeSince .Commit.Author.When $.locale}}</span>
+					<span class="text grey gt-ml-3" id="authored-time">{{TimeSince .Commit.Author.When $.locale}}</span>
 					{{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}}
-						<span class="text grey mx-3">{{.locale.Tr "repo.diff.committed_by"}}</span>
+						<span class="text grey gt-mx-3">{{.locale.Tr "repo.diff.committed_by"}}</span>
 						{{if ne .Verification.CommittingUser.ID 0}}
-							{{avatar .Verification.CommittingUser 28 "mx-3"}}
+							{{avatar .Verification.CommittingUser 28 "gt-mx-3"}}
 							<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
 						{{else}}
-							{{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name 28 "mr-3"}}
+							{{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name 28 "gt-mr-3"}}
 							<strong>{{.Commit.Committer.Name}}</strong>
 						{{end}}
 					{{end}}
 				</div>
-				<div class="ui horizontal list df ac">
+				<div class="ui horizontal list gt-df gt-ac">
 					{{if .Parents}}
 						<div class="item">
 							<span>{{.locale.Tr "repo.diff.parent"}}</span>
@@ -188,73 +188,73 @@
 				</div>
 		</div>
 		{{if .Commit.Signature}}
-			<div class="ui bottom attached message tl df ac sb commit-header-row fw {{$class}}">
-				<div class="df ac">
+			<div class="ui bottom attached message gt-tl gt-df gt-ac gt-sb commit-header-row gt-fw {{$class}}">
+				<div class="gt-df gt-ac">
 					{{if .Verification.Verified}}
 						{{if ne .Verification.SigningUser.ID 0}}
-							{{svg "gitea-lock" 16 "mr-3"}}
+							{{svg "gitea-lock" 16 "gt-mr-3"}}
 							{{if eq .Verification.TrustStatus "trusted"}}
-								<span class="ui text mr-3">{{.locale.Tr "repo.commits.signed_by"}}:</span>
+								<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.signed_by"}}:</span>
 							{{else if eq .Verification.TrustStatus "untrusted"}}
-								<span class="ui text mr-3">{{.locale.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
+								<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
 							{{else}}
-								<span class="ui text mr-3">{{.locale.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
+								<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
 							{{end}}
-							{{avatar .Verification.SigningUser 28 "mr-3"}}
+							{{avatar .Verification.SigningUser 28 "gt-mr-3"}}
 							<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.GetDisplayName}}</strong></a>
 						{{else}}
-							<span title="{{.locale.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog" 16 "mr-3"}}</span>
-							<span class="ui text mr-3">{{.locale.Tr "repo.commits.signed_by"}}:</span>
+							<span title="{{.locale.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog" 16 "gt-mr-3"}}</span>
+							<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.signed_by"}}:</span>
 							{{avatarByEmail .Verification.SigningEmail "" 28}}
 							<strong>{{.Verification.SigningUser.GetDisplayName}}</strong>
 						{{end}}
 					{{else}}
-						{{svg "gitea-unlock" 16 "mr-3"}}
+						{{svg "gitea-unlock" 16 "gt-mr-3"}}
 						<span class="ui text">{{.locale.Tr .Verification.Reason}}</span>
 					{{end}}
 				</div>
-				<div class="df ac">
+				<div class="gt-df gt-ac">
 					{{if .Verification.Verified}}
 						{{if ne .Verification.SigningUser.ID 0}}
-							{{svg "octicon-shield-check" 16 "mr-3"}}
+							{{svg "octicon-shield-check" 16 "gt-mr-3"}}
 							{{if .Verification.SigningSSHKey}}
-								<span class="ui text mr-3">{{.locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
+								<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
 								{{.Verification.SigningSSHKey.Fingerprint}}
 							{{else}}
-								<span class="ui text mr-3">{{.locale.Tr "repo.commits.gpg_key_id"}}:</span>
+								<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.gpg_key_id"}}:</span>
 								{{.Verification.SigningKey.PaddedKeyID}}
 							{{end}}
 						{{else}}
-							{{svg "octicon-shield-lock" 16 "mr-3"}}
+							{{svg "octicon-shield-lock" 16 "gt-mr-3"}}
 							{{if .Verification.SigningSSHKey}}
-								<span class="ui text mr-3 tooltip" data-content="{{.locale.Tr "gpg.default_key"}}">{{.locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
+								<span class="ui text gt-mr-3 tooltip" data-content="{{.locale.Tr "gpg.default_key"}}">{{.locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
 								{{.Verification.SigningSSHKey.Fingerprint}}
 							{{else}}
-								<span class="ui text mr-3 tooltip" data-content="{{.locale.Tr "gpg.default_key"}}">{{.locale.Tr "repo.commits.gpg_key_id"}}:</span>
+								<span class="ui text gt-mr-3 tooltip" data-content="{{.locale.Tr "gpg.default_key"}}">{{.locale.Tr "repo.commits.gpg_key_id"}}:</span>
 								{{.Verification.SigningKey.PaddedKeyID}}
 							{{end}}
 						{{end}}
 					{{else if .Verification.Warning}}
-						{{svg "octicon-shield" 16 "mr-3"}}
+						{{svg "octicon-shield" 16 "gt-mr-3"}}
 						{{if .Verification.SigningSSHKey}}
-							<span class="ui text mr-3">{{.locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
+							<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
 							{{.Verification.SigningSSHKey.Fingerprint}}
 						{{else}}
-							<span class="ui text mr-3">{{.locale.Tr "repo.commits.gpg_key_id"}}:</span>
+							<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.gpg_key_id"}}:</span>
 							{{.Verification.SigningKey.PaddedKeyID}}
 						{{end}}
 					{{else}}
 						{{if .Verification.SigningKey}}
 							{{if ne .Verification.SigningKey.KeyID ""}}
-								{{svg "octicon-shield" 16 "mr-3"}}
-								<span class="ui text mr-3">{{.locale.Tr "repo.commits.gpg_key_id"}}:</span>
+								{{svg "octicon-shield" 16 "gt-mr-3"}}
+								<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.gpg_key_id"}}:</span>
 								{{.Verification.SigningKey.PaddedKeyID}}
 							{{end}}
 						{{end}}
 						{{if .Verification.SigningSSHKey}}
 							{{if ne .Verification.SigningSSHKey.Fingerprint ""}}
-								{{svg "octicon-shield" 16 "mr-3"}}
-								<span class="ui text mr-3">{{.locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
+								{{svg "octicon-shield" 16 "gt-mr-3"}}
+								<span class="ui text gt-mr-3">{{.locale.Tr "repo.commits.ssh_key_fingerprint"}}:</span>
 								{{.Verification.SigningSSHKey.Fingerprint}}
 							{{end}}
 						{{end}}
@@ -264,7 +264,7 @@
 		{{end}}
 		{{if .Note}}
 			<div class="ui top attached header segment git-notes">
-				{{svg "octicon-note" 16 "mr-3"}}
+				{{svg "octicon-note" 16 "gt-mr-3"}}
 				{{.locale.Tr "repo.diff.git-notes"}}:
 				{{if .NoteAuthor}}
 					<a href="{{.NoteAuthor.HomeLink}}">
diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl
index 4fe644ff0a4a6..8250a858173be 100644
--- a/templates/repo/commit_statuses.tmpl
+++ b/templates/repo/commit_statuses.tmpl
@@ -1,12 +1,12 @@
-{{if eq (len .Statuses) 1}}{{$status := index .Statuses 0}}{{if $status.TargetURL}}<a class="ui link commit-statuses-trigger vm" href="{{$status.TargetURL}}">{{template "repo/commit_status" .Status}}</a>{{end}}{{end}}
+{{if eq (len .Statuses) 1}}{{$status := index .Statuses 0}}{{if $status.TargetURL}}<a class="ui link commit-statuses-trigger gt-vm" href="{{$status.TargetURL}}">{{template "repo/commit_status" .Status}}</a>{{end}}{{end}}
 <div class="ui commit-statuses-popup commit-statuses tippy-target">
 	<div class="ui relaxed list divided">
 		{{range .Statuses}}
-			<div class="ui item singular-status df">
+			<div class="ui item singular-status gt-df">
 				{{template "repo/commit_status" .}}
-				<span class="ui ml-3 f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
+				<span class="ui gt-ml-3 gt-f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
 				{{if .TargetURL}}
-					<a class="ml-3" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.locale.Tr "repo.pulls.status_checks_details"}}</a>
+					<a class="gt-ml-3" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.locale.Tr "repo.pulls.status_checks_details"}}</a>
 				{{end}}
 			</div>
 		{{end}}
diff --git a/templates/repo/commits.tmpl b/templates/repo/commits.tmpl
index 0188a39281db7..2f890a1f9dab2 100644
--- a/templates/repo/commits.tmpl
+++ b/templates/repo/commits.tmpl
@@ -3,8 +3,8 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "repo/sub_menu" .}}
-		<div class="repo-button-row df ac sb fw mb-4 mt-3">
-			<div class="df ac">
+		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw gt-mb-4 gt-mt-3">
+			<div class="gt-df gt-ac">
 				{{template "repo/branch_dropdown" dict "root" .}}
 				<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
 					<span class="text">
diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
index 96156caa373a7..bef24e43e3ec4 100644
--- a/templates/repo/commits_list.tmpl
+++ b/templates/repo/commits_list.tmpl
@@ -18,14 +18,14 @@
 								{{if .User.FullName}}
 									{{$userName = .User.FullName}}
 								{{end}}
-								{{avatar .User 28 "mr-2"}}<a href="{{.User.HomeLink}}">{{$userName}}</a>
+								{{avatar .User 28 "gt-mr-2"}}<a href="{{.User.HomeLink}}">{{$userName}}</a>
 							{{else}}
-								{{avatarByEmail .Author.Email .Author.Name 28 "mr-2"}}
+								{{avatarByEmail .Author.Email .Author.Name 28 "gt-mr-2"}}
 								{{$userName}}
 							{{end}}
 						</td>
-						<td class="sha df">
-							<button class="ui button copy-commit-sha df ac" data-clipboard-text="{{.ID}}">{{svg "octicon-copy" 14}}</button>
+						<td class="sha gt-df">
+							<button class="ui button copy-commit-sha gt-df gt-ac" data-clipboard-text="{{.ID}}">{{svg "octicon-copy" 14}}</button>
 							{{$class := "ui sha label"}}
 							{{if .Signature}}
 								{{$class = (printf "%s%s" $class " isSigned")}}
diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl
index f2f121c42c912..4a4e7f12f91a6 100644
--- a/templates/repo/commits_list_small.tmpl
+++ b/templates/repo/commits_list_small.tmpl
@@ -47,7 +47,7 @@
 		</span>
 
 		{{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}}
-		<span class="mono commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $commitLink $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</span>
+		<span class="gt-mono commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $commitLink $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</span>
 		{{if IsMultilineCommitMessage .Message}}
 			<button class="ui button ellipsis-button" aria-expanded="false">...</button>
 		{{end}}
diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
index ab54041b9d726..03fbbdfdc03f4 100644
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -1,5 +1,5 @@
-<h4 class="ui top attached header commits-table df ac sb">
-	<div class="commits-table-left df ac">
+<h4 class="ui top attached header commits-table gt-df gt-ac gt-sb">
+	<div class="commits-table-left gt-df gt-ac">
 		{{if or .PageIsCommits (gt .CommitCount 0)}}
 			{{.CommitCount}} {{.locale.Tr "repo.commits.commits"}} {{if .RefName}}({{.RefName}}){{end}}
 		{{else if .IsNothingToCompare}}
@@ -8,7 +8,7 @@
 			{{.locale.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch}} {{if .RefName}}({{.RefName}}){{end}}
 		{{end}}
 	</div>
-	<div class="commits-table-right df ac">
+	<div class="commits-table-right gt-df gt-ac">
 		{{if .PageIsCommits}}
 			<form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/search">
 				<div class="ui tiny search input">
@@ -19,7 +19,7 @@
 					<input type="checkbox" name="all" id="all" value="true" {{.All}}>
 					<label for="all">{{.locale.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
 				</div>
-				<button class="ui primary tiny button mr-0 tooltip" data-panel="#add-deploy-key-panel" data-content={{.locale.Tr "repo.commits.search.tooltip"}}>{{.locale.Tr "repo.commits.find"}}</button>
+				<button class="ui primary tiny button gt-mr-0 tooltip" data-panel="#add-deploy-key-panel" data-content={{.locale.Tr "repo.commits.search.tooltip"}}>{{.locale.Tr "repo.commits.find"}}</button>
 			</form>
 		{{else if .IsDiffCompare}}
 			<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID | PathEscape}}" class="ui green sha label">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl
index 402435c4671cb..f4f7732c5065d 100644
--- a/templates/repo/diff/blob_excerpt.tmpl
+++ b/templates/repo/diff/blob_excerpt.tmpl
@@ -25,7 +25,7 @@
 			{{$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}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td>
-			<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker=""></span>{{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 halfwidth">{{/*
 				*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
 					*/}}<code class="code-inner"></code>{{/*
@@ -33,7 +33,7 @@
 			*/}}</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}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td>
-			<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker=""></span>{{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 halfwidth">{{/*
 				*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
 					*/}}<code class="code-inner"></code>{{/*
@@ -69,7 +69,7 @@
 		{{end}}
 		{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
 		<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td>
-		<td class="blob-excerpt lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></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>
 	{{end}}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 4bc211f931902..319fdb58f83fb 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -13,21 +13,21 @@
 	<h4>{{.locale.Tr "repo.diff.data_not_available"}}</h4>
 {{else}}
 	<div>
-		<div class="diff-detail-box diff-box sticky df sb ac fw">
-			<div class="df ac fw">
-				<a class="diff-toggle-file-tree-button muted df ac">
+		<div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac gt-fw">
+			<div class="gt-df gt-ac gt-fw">
+				<a class="diff-toggle-file-tree-button muted gt-df gt-ac">
 					{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
 					{{svg "octicon-sidebar-collapse" 20 "icon hide"}}
 					{{svg "octicon-sidebar-expand" 20 "icon"}}
 				</a>
-				<div class="diff-detail-stats df ac ml-3">
-					{{svg "octicon-diff" 16 "mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
+				<div class="diff-detail-stats gt-df gt-ac gt-ml-3">
+					{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
 				</div>
 			</div>
-			<div class="diff-detail-actions df ac">
+			<div class="diff-detail-actions gt-df gt-ac">
 				{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
-					<progress id="viewed-files-summary" class="mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
-					<label for="viewed-files-summary" id="viewed-files-summary-label" class="mr-3" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
+					<progress id="viewed-files-summary" class="gt-mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
+					<label for="viewed-files-summary" id="viewed-files-summary-label" class="gt-mr-3" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
 						{{.locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
 					</label>
 				{{end}}
@@ -77,34 +77,34 @@
 						{{$isCsv := (call $.IsCsvFile $file)}}
 						{{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}}
 						{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
-						<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} 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 df ac sb">
-								<div class="df ac">
-									<a role="button" class="fold-file muted mr-2" {{if not $isExpandable}}style="visibility: hidden"{{end}}>
+						<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">
+								<div class="gt-df gt-ac">
+									<a role="button" class="fold-file muted gt-mr-2" {{if not $isExpandable}}style="visibility: hidden"{{end}}>
 										{{if $file.ShouldBeHidden}}
 											{{svg "octicon-chevron-right" 18}}
 										{{else}}
 											{{svg "octicon-chevron-down" 18}}
 										{{end}}
 									</a>
-									<div class="bold df ac mono">
+									<div class="gt-bold gt-df gt-ac gt-mono">
 										{{if $file.IsBin}}
-											<span class="ml-1 mr-3">
+											<span class="gt-ml-1 gt-mr-3">
 												{{$.locale.Tr "repo.diff.bin"}}
 											</span>
 										{{else}}
 											{{template "repo/diff/stats" dict "file" . "root" $}}
 										{{end}}
 									</div>
-									<span class="file mono"><a class="muted" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
+									<span class="file gt-mono"><a class="muted" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
 									{{if $file.IsGenerated}}
-										<span class="ui label ml-3">{{$.locale.Tr "repo.diff.generated"}}</span>
+										<span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.generated"}}</span>
 									{{end}}
 									{{if $file.IsVendored}}
-										<span class="ui label ml-3">{{$.locale.Tr "repo.diff.vendored"}}</span>
+										<span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.vendored"}}</span>
 									{{end}}
 								</div>
-								<div class="diff-file-header-actions df ac">
+								<div class="diff-file-header-actions gt-df gt-ac">
 									{{if $showFileViewToggle}}
 										<div class="ui compact icon buttons">
 											<span class="ui tiny basic button tooltip file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-content="{{$.locale.Tr "repo.file_view_source"}}" data-position="bottom center">{{svg "octicon-code"}}</span>
@@ -162,7 +162,7 @@
 								</div>
 								{{if $showFileViewToggle}}
 									<div id="diff-rendered-{{$file.NameHash}}" class="file-body file-code {{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}">
-										<table class="chroma w-100">
+										<table class="chroma gt-w-100">
 											{{if $isImage}}
 												{{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}}
 											{{else}}
@@ -176,8 +176,8 @@
 					{{end}}
 
 					{{if .Diff.IsIncomplete}}
-						<div class="diff-file-box diff-box file-content mt-3" id="diff-incomplete">
-							<h4 class="ui top attached normal header df ac sb">
+						<div class="diff-file-box diff-box file-content gt-mt-3" id="diff-incomplete">
+							<h4 class="ui top attached normal header gt-df gt-ac gt-sb">
 								{{$.locale.Tr "repo.diff.too_many_files"}}
 								<a class="ui basic tiny button" id="diff-show-more-files" data-href="{{$.Link}}?skip-to={{.Diff.End}}&file-only=true">{{.locale.Tr "repo.diff.show_more"}}</a>
 							</h4>
diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
index f51e8407212d4..2ce0612e63bfa 100644
--- a/templates/repo/diff/comment_form.tmpl
+++ b/templates/repo/diff/comment_form.tmpl
@@ -21,7 +21,7 @@
 			{{.locale.Tr "loading"}}
 			</div>
 		</div>
-		<div class="field footer mx-3">
+		<div class="field footer gt-mx-3">
 			<span class="markup-info">{{svg "octicon-markup"}} {{$.root.locale.Tr "repo.diff.comment.markdown_info"}}</span>
 			<div class="ui right">
 				{{if $.reply}}
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 8fc51e62f25ba..c5cdf750858fa 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -8,10 +8,10 @@
 		{{template "shared/user/avatarlink" .Poster}}
 	{{end}}
 	<div class="content comment-container">
-		<div class="ui top attached header comment-header df ac sb">
-			<div class="comment-header-left df ac">
+		<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
+			<div class="comment-header-left gt-df gt-ac">
 				{{if .OriginalAuthor}}
-					<span class="text black bold mr-2">
+					<span class="text black gt-bold gt-mr-2">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
 					</span>
@@ -30,7 +30,7 @@
 					</span>
 				{{end}}
 			</div>
-			<div class="comment-header-right actions df ac">
+			<div class="comment-header-right actions gt-df gt-ac">
 				{{if and .Review}}
 					{{if eq .Review.Type 0}}
 						<div class="ui label basic small yellow pending-label tooltip" data-content="{{$.root.locale.Tr "repo.issues.review.pending.tooltip" ($.root.locale.Tr "repo.diff.review") ($.root.locale.Tr "repo.diff.review.approve") ($.root.locale.Tr "repo.diff.review.comment") ($.root.locale.Tr "repo.diff.review.reject")}}">
diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index 1010863b799d7..97ef7c2da8d2a 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/templates/repo/diff/compare.tmpl
@@ -49,7 +49,7 @@
 			</div>
 			<div class="menu">
 				<div class="ui icon search input">
-					<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+					<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
 					<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
 				</div>
 				<div class="header">
@@ -57,12 +57,12 @@
 						<div class="two column row">
 							<a class="reference column" href="#" data-target=".base-branch-list">
 								<span class="text black">
-									{{svg "octicon-git-branch" 16 "mr-2"}}{{.locale.Tr "repo.branches"}}
+									{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.locale.Tr "repo.branches"}}
 								</span>
 							</a>
 							<a class="reference column" href="#" data-target=".base-tag-list">
 								<span class="text black">
-									{{svg "octicon-tag" 16 "mr-2"}}{{.locale.Tr "repo.tags"}}
+									{{svg "octicon-tag" 16 "gt-mr-2"}}{{.locale.Tr "repo.tags"}}
 								</span>
 							</a>
 						</div>
@@ -118,7 +118,7 @@
 			</div>
 			<div class="menu">
 				<div class="ui icon search input">
-					<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+					<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
 					<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
 				</div>
 				<div class="header">
@@ -126,12 +126,12 @@
 						<div class="two column row">
 							<a class="reference column" href="#" data-target=".head-branch-list">
 								<span class="text black">
-									{{svg "octicon-git-branch" 16 "mr-2"}}{{.locale.Tr "repo.branches"}}
+									{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.locale.Tr "repo.branches"}}
 								</span>
 							</a>
 							<a class="reference column" href="#" data-target=".head-tag-list">
 								<span class="text black">
-									{{svg "octicon-tag" 16 "mr-2"}}{{.locale.Tr "repo.tags"}}
+									{{svg "octicon-tag" 16 "gt-mr-2"}}{{.locale.Tr "repo.tags"}}
 								</span>
 							</a>
 						</div>
diff --git a/templates/repo/diff/conversation.tmpl b/templates/repo/diff/conversation.tmpl
index 204a2146f850d..b6d577ee5a891 100644
--- a/templates/repo/diff/conversation.tmpl
+++ b/templates/repo/diff/conversation.tmpl
@@ -3,18 +3,18 @@
 {{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}}
 <div class="conversation-holder" data-path="{{(index .comments 0).TreePath}}" data-side="{{if lt (index .comments 0).Line 0}}left{{else}}right{{end}}" data-idx="{{(index .comments 0).UnsignedLine}}">
 	{{if $resolved}}
-		<div class="ui attached header resolved-placeholder df ac sb">
+		<div class="ui attached header resolved-placeholder gt-df gt-ac gt-sb">
 			<div class="ui grey text">
-				{{svg "octicon-check" 16 "icon mr-2"}}
+				{{svg "octicon-check" 16 "icon gt-mr-2"}}
 				<b>{{$resolveDoer.Name}}</b> {{$.locale.Tr "repo.issues.review.resolved_by"}}
 			</div>
 			<div>
-				<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated df ac">
-					{{svg "octicon-unfold" 16 "mr-3"}}
+				<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated gt-df gt-ac">
+					{{svg "octicon-unfold" 16 "gt-mr-3"}}
 					{{$.locale.Tr "repo.issues.review.show_resolved"}}
 				</button>
-				<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated df ac">
-					{{svg "octicon-fold" 16 "mr-3"}}
+				<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated gt-df gt-ac">
+					{{svg "octicon-fold" 16 "gt-mr-3"}}
 					{{$.locale.Tr "repo.issues.review.hide_resolved"}}
 				</button>
 			</div>
@@ -26,8 +26,8 @@
 				{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
 			</ui>
 		</div>
-		<div class="df je js-small ac fw mt-3">
-			<div class="ui buttons mr-2">
+		<div class="gt-df gt-je gt-js-small gt-ac gt-fw gt-mt-3">
+			<div class="ui buttons gt-mr-2">
 				<button class="ui icon tiny basic button previous-conversation">
 					{{svg "octicon-arrow-up" 12 "icon"}} {{$.locale.Tr "repo.issues.previous"}}
 				</button>
@@ -45,8 +45,8 @@
 				</button>
 			{{end}}
 			{{if and $.SignedUserID (not $.Repository.IsArchived)}}
-				<button class="comment-form-reply ui green tiny labeled icon button ml-2 mr-0">
-					{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.locale.Tr "repo.diff.comment.reply"}}
+				<button class="comment-form-reply ui green tiny labeled icon button gt-ml-2 gt-mr-0">
+					{{svg "octicon-reply" 16 "reply icon gt-mr-2"}}{{$.locale.Tr "repo.diff.comment.reply"}}
 				</button>
 			{{end}}
 		</div>
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 4b95c8d85ff8c..d068a12d13eab 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -74,7 +74,7 @@
 				</div>
 				{{end}}
 			</div>
-			<div class="ui active centered inline loader mb-4"></div>
+			<div class="ui active centered inline loader gt-mb-4"></div>
 		</div>
 	</td>
 </tr>
diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index 60ebb61fb9387..8586cd6a569b7 100644
--- a/templates/repo/diff/new_review.tmpl
+++ b/templates/repo/diff/new_review.tmpl
@@ -1,5 +1,5 @@
 <div class="ui top right pointing dropdown custom" id="review-box">
-	<div class="ui tiny green button btn-review ml-2 mr-0">
+	<div class="ui tiny green button btn-review gt-ml-2 gt-mr-0">
 		{{.locale.Tr "repo.diff.review"}}
 		<span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span>
 		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -9,9 +9,9 @@
 			<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
 			{{.CsrfTokenHtml}}
 				<input type="hidden" name="commit_id" value="{{.AfterCommitID}}"/>
-				<div class="header df ac pb-3">
-					<div class="f1">{{$.locale.Tr "repo.diff.review.header"}}</div>
-					<a class="muted close px-3">{{svg "octicon-x" 16}}</a>
+				<div class="header gt-df gt-ac gt-pb-3">
+					<div class="gt-f1">{{$.locale.Tr "repo.diff.review.header"}}</div>
+					<a class="muted close gt-px-3">{{svg "octicon-x" 16}}</a>
 				</div>
 				<div class="ui field">
 					<textarea name="content" tabindex="0" rows="2" placeholder="{{$.locale.Tr "repo.diff.review.placeholder"}}"></textarea>
diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index 24302e536fa5f..c4b5ad042cf7b 100644
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -32,7 +32,7 @@
 					{{- $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}}<a href="" class="toggle-escape-button" 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="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></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 halfwidth del-code">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
 							*/}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
@@ -47,7 +47,7 @@
 					*/}}</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}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
-					<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{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 halfwidth add-code">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
 							*/}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
@@ -64,7 +64,7 @@
 					{{$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}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
-					<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{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 halfwidth">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
 							*/}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
@@ -79,7 +79,7 @@
 					*/}}</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}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
-					<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{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 halfwidth">{{/*
 						*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
 							*/}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index e83b1f779c383..63cd510221fb3 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -27,7 +27,7 @@
 				{{end}}
 				{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale -}}
 				<td class="lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}</td>
-				<td class="lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
+				<td class="lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
 				{{if eq .GetType 4}}
 					<td class="chroma lines-code blob-hunk">{{/*
 						*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*
diff --git a/templates/repo/diff/stats.tmpl b/templates/repo/diff/stats.tmpl
index fd1cb019a161e..ac6e45a7e44b6 100644
--- a/templates/repo/diff/stats.tmpl
+++ b/templates/repo/diff/stats.tmpl
@@ -1,4 +1,4 @@
 {{Add .file.Addition .file.Deletion}}
-<span class="diff-stats-bar tooltip mx-3" data-content="{{.root.locale.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}">
+<span class="diff-stats-bar tooltip gt-mx-3" data-content="{{.root.locale.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}">
 	<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
 </span>
diff --git a/templates/repo/diff/whitespace_dropdown.tmpl b/templates/repo/diff/whitespace_dropdown.tmpl
index 47a5ab5533c34..cacfb20a27ff7 100644
--- a/templates/repo/diff/whitespace_dropdown.tmpl
+++ b/templates/repo/diff/whitespace_dropdown.tmpl
@@ -3,26 +3,26 @@
 	{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	<div class="menu">
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all">
-			<label class="pointer-events-none">
-				<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
+			<label class="gt-pointer-events-none">
+				<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
 				{{.locale.Tr "repo.diff.whitespace_show_everything"}}
 			</label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all">
-			<label class="pointer-events-none">
-				<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
+			<label class="gt-pointer-events-none">
+				<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
 				{{.locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}}
 				<label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change">
-			<label class="pointer-events-none">
-				<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
+			<label class="gt-pointer-events-none">
+				<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
 				{{.locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}
 			</label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol">
-			<label class="pointer-events-none">
-				<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
+			<label class="gt-pointer-events-none">
+				<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
 				{{.locale.Tr "repo.diff.whitespace_ignore_at_eol"}}
 			</label>
 		</a>
diff --git a/templates/repo/editor/commit_form.tmpl b/templates/repo/editor/commit_form.tmpl
index f4778e22d1222..991d76c6df33e 100644
--- a/templates/repo/editor/commit_form.tmpl
+++ b/templates/repo/editor/commit_form.tmpl
@@ -61,7 +61,7 @@
 			<div class="quick-pull-branch-name {{if not (eq .commit_choice "commit-to-new-branch")}}hide{{end}}">
 				<div class="new-branch-name-input field {{if .Err_NewBranchName}}error{{end}}">
 					{{svg "octicon-git-branch"}}
-					<input type="text" name="new_branch_name" value="{{.new_branch_name}}" class="input-contrast mr-2 js-quick-pull-new-branch-name" placeholder="{{.locale.Tr "repo.editor.new_branch_name_desc"}}" {{if eq .commit_choice "commit-to-new-branch"}}required{{end}} title="{{.locale.Tr "repo.editor.new_branch_name"}}">
+					<input type="text" name="new_branch_name" value="{{.new_branch_name}}" class="input-contrast gt-mr-2 js-quick-pull-new-branch-name" placeholder="{{.locale.Tr "repo.editor.new_branch_name_desc"}}" {{if eq .commit_choice "commit-to-new-branch"}}required{{end}} title="{{.locale.Tr "repo.editor.new_branch_name"}}">
 					<span class="text-muted js-quick-pull-normalization-info"></span>
 				</div>
 			</div>
diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl
index 892adf957b609..a271ab597b38b 100644
--- a/templates/repo/editor/patch.tmpl
+++ b/templates/repo/editor/patch.tmpl
@@ -22,7 +22,7 @@
 			</div>
 			<div class="field">
 				<div class="ui top attached tabular menu" data-write="write">
-					<a class="active item" data-tab="write">{{svg "octicon-code" 16 "mr-2"}}{{.locale.Tr "repo.editor.new_patch"}}</a>
+					<a class="active item" data-tab="write">{{svg "octicon-code" 16 "gt-mr-2"}}{{.locale.Tr "repo.editor.new_patch"}}</a>
 				</div>
 				<div class="ui bottom attached active tab segment" data-tab="write">
 					<textarea id="edit_area" name="content" class="hide" data-id="repo-{{.Repository.Name}}-patch"
diff --git a/templates/repo/file_info.tmpl b/templates/repo/file_info.tmpl
index 90a831fb8e897..8de65bffa4a27 100644
--- a/templates/repo/file_info.tmpl
+++ b/templates/repo/file_info.tmpl
@@ -1,4 +1,4 @@
-<div class="file-info text grey normal mono">
+<div class="file-info text grey normal gt-mono">
 	{{if .FileIsSymlink}}
 		<div class="file-info-entry">
 			{{.locale.Tr "repo.symbolic_link"}}
@@ -16,7 +16,7 @@
 	{{end}}
 	{{if .LFSLock}}
 		<div class="file-info-entry ui tooltip" data-content="{{.LFSLockHint}}">
-			{{svg "octicon-lock" 16 "mr-2"}}
+			{{svg "octicon-lock" 16 "gt-mr-2"}}
 			<a href="{{.LFSLockOwnerHomeLink}}">{{.LFSLockOwner}}</a>
 		</div>
 	{{end}}
diff --git a/templates/repo/find/files.tmpl b/templates/repo/find/files.tmpl
index ab6f03f4ada5e..5ad7fa1915c46 100644
--- a/templates/repo/find/files.tmpl
+++ b/templates/repo/find/files.tmpl
@@ -2,10 +2,10 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="df ac">
+		<div class="gt-df gt-ac">
 			<a href="{{$.RepoLink}}">{{.RepoName}}</a>
-			<span class="mx-3">/</span>
-			<div class="ui input f1">
+			<span class="gt-mx-3">/</span>
+			<div class="ui input gt-f1">
 				<input id="repo-file-find-input" type="text" autofocus data-url-data-link="{{.DataLink}}" data-url-tree-link="{{.TreeLink}}">
 			</div>
 		</div>
@@ -13,7 +13,7 @@
 			<tbody>
 			</tbody>
 		</table>
-		<div id="repo-find-file-no-result" class="ui row center mt-5" hidden>
+		<div id="repo-find-file-no-result" class="ui row center gt-mt-5" hidden>
 			<h3>{{.locale.Tr "repo.find_file.no_matching"}}</h3>
 		</div>
 	</div>
diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 52c013a5d1da1..df11ad0fa8751 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -11,9 +11,9 @@
 						<i class="dropdown icon"></i>
 						<div class="default text">{{.locale.Tr "repo.commit_graph.select"}}</div>
 						<div class="menu">
-							<div class="item" data-value="...flow-hide-pr-refs">
+							<div class="item" data-value="...flow-hide-gt-pr-refs">
 								<span class="truncate">
-									{{svg "octicon-eye-closed" 16 "mr-2"}}<span title="{{.locale.Tr "repo.commit_graph.hide_pr_refs"}}">{{.locale.Tr "repo.commit_graph.hide_pr_refs"}}</span>
+									{{svg "octicon-eye-closed" 16 "gt-mr-2"}}<span title="{{.locale.Tr "repo.commit_graph.hide_pr_refs"}}">{{.locale.Tr "repo.commit_graph.hide_pr_refs"}}</span>
 								</span>
 							</div>
 							{{range .AllRefs}}
@@ -21,33 +21,33 @@
 								{{if eq $refGroup "pull"}}
 									<div class="item" data-value="{{.Name}}">
 										<span class="truncate">
-											{{svg "octicon-git-pull-request" 16 "mr-2"}}<span title="{{.ShortName}}">#{{.ShortName}}</span>
+											{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}<span title="{{.ShortName}}">#{{.ShortName}}</span>
 										</span>
 									</div>
 								{{else if eq $refGroup "tags"}}
 									<div class="item" data-value="{{.Name}}">
 										<span class="truncate">
-											{{svg "octicon-tag" 16 "mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
+											{{svg "octicon-tag" 16 "gt-mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
 										</span>
 									</div>
 								{{else if eq $refGroup "remotes"}}
 									<div class="item" data-value="{{.Name}}">
 										<span class="truncate">
-											{{svg "octicon-cross-reference" 16 "mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
+											{{svg "octicon-cross-reference" 16 "gt-mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
 										</span>
 									</div>
 								{{else if eq $refGroup "heads"}}
 									<div class="item" data-value="{{.Name}}">
 										<span class="truncate">
-											{{svg "octicon-git-branch" 16 "mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
+											{{svg "octicon-git-branch" 16 "gt-mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
 										</span>
 									</div>
 								{{end}}
 							{{end}}
 						</div>
 					</div>
-					<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{.locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "mr-2"}}{{.locale.Tr "repo.commit_graph.monochrome"}}</button>
-					<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{.locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "mr-2"}}{{.locale.Tr "repo.commit_graph.color"}}</button>
+					<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{.locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "gt-mr-2"}}{{.locale.Tr "repo.commit_graph.monochrome"}}</button>
+					<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{.locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "gt-mr-2"}}{{.locale.Tr "repo.commit_graph.color"}}</button>
 				</div>
 			</h2>
 			<div class="ui dividing"></div>
diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
index fc4b1a1ea36a2..485227e9bf475 100644
--- a/templates/repo/graph/commits.tmpl
+++ b/templates/repo/graph/commits.tmpl
@@ -28,37 +28,37 @@
 							{{- end -}}
 						</a>
 					</span>
-					<span class="message dib ellipsis mr-2">
+					<span class="message gt-dib gt-ellipsis gt-mr-2">
 						<span>{{RenderCommitMessage $.Context $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
 					</span>
-					<span class="tags df ac">
+					<span class="tags gt-df gt-ac">
 						{{range $commit.Refs}}
 							{{$refGroup := .RefGroup}}
 							{{if eq $refGroup "pull"}}
 								{{if or (not $.HidePRRefs) (containGeneric $.SelectedBranches .Name)}}
 									<!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
-									<a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
-										{{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}}
+									<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
+										{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}#{{.ShortName}}
 									</a>
 								{{end}}
 							{{else if eq $refGroup "tags"}}
-								<a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
-									{{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}}
+								<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
+									{{svg "octicon-tag" 16 "gt-mr-2"}}{{.ShortName}}
 								</a>
 							{{else if eq $refGroup "remotes"}}
-								<a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
-									{{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}}
+								<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
+									{{svg "octicon-cross-reference" 16 "gt-mr-2"}}{{.ShortName}}
 								</a>
 							{{else if eq $refGroup "heads"}}
-								<a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
-									{{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}}
+								<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
+									{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.ShortName}}
 								</a>
 							{{else}}
 								<!-- Unknown ref type {{.Name}} -->
 							{{end}}
 						{{end}}
 					</span>
-					<span class="author df ac mr-2">
+					<span class="author gt-df gt-ac gt-mr-2">
 						{{$userName := $commit.Commit.Author.Name}}
 						{{if $commit.User}}
 							{{if $commit.User.FullName}}
@@ -71,7 +71,7 @@
 							{{$userName}}
 						{{end}}
 					</span>
-					<span class="time df ac">{{$commit.Date}}</span>
+					<span class="time gt-df gt-ac">{{$commit.Date}}</span>
 				{{end}}
 			</li>
 		{{end}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 2588243c676e8..beea89399e99f 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -2,21 +2,21 @@
 {{with .Repository}}
 	<div class="ui container">
 		<div class="repo-header">
-			<div class="repo-title-wrap df fc">
+			<div class="repo-title-wrap gt-df gt-fc">
 				<div class="repo-title" role="heading" aria-level="1">
-					{{$avatar := (repoAvatar . 32 "mr-3")}}
+					{{$avatar := (repoAvatar . 32 "gt-mr-3")}}
 					{{if $avatar}}
 						{{$avatar}}
 					{{else}}
 						{{template "repo/icon" .}}
 					{{end}}
 					<a href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
-					<div class="mx-2">/</div>
+					<div class="gt-mx-2">/</div>
 					<a href="{{$.RepoLink}}">{{.Name}}</a>
 					{{if $.EnableFeed}}
-						<a href="{{$.RepoLink}}.rss"><i class="ui grey icon tooltip ml-3" data-content="{{$.locale.Tr "rss_feed"}}" data-position="top center">{{svg "octicon-rss" 18}}</i></a>
+						<a href="{{$.RepoLink}}.rss"><i class="ui grey icon tooltip gt-ml-3" data-content="{{$.locale.Tr "rss_feed"}}" data-position="top center">{{svg "octicon-rss" 18}}</i></a>
 					{{end}}
-					<div class="labels df ac fw">
+					<div class="labels gt-df gt-ac gt-fw">
 						{{if .IsTemplate}}
 							{{if .IsPrivate}}
 								<span class="ui basic label">{{$.locale.Tr "repo.desc.private_template"}}</span>
@@ -122,12 +122,12 @@
 								<div class="header">
 									{{$.locale.Tr "repo.already_forked" .Name}}
 								</div>
-								<div class="content tl">
+								<div class="content gt-tl">
 									<div class="ui list">
 										{{range $.UserAndOrgForks}}
-											<div class="ui item py-3">
+											<div class="ui item gt-py-3">
 												<a href="{{.Link}}">
-													{{svg "octicon-repo-forked" 16 "mr-3"}}{{.FullName}}
+													{{svg "octicon-repo-forked" 16 "gt-mr-3"}}{{.FullName}}
 												</a>
 											</div>
 										{{end}}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index bdca346f8b2bf..bab499a2afa4c 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -17,7 +17,7 @@
 							<div class="ui action input{{if .CodeIndexerUnavailable}} disabled left icon tooltip{{end}}"{{if .CodeIndexerUnavailable}} data-content="{{.locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
 								<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{.locale.Tr "repo.search.search_repo"}}">
 								{{if .CodeIndexerUnavailable}}
-									<i class="icon df ac jc">{{svg "octicon-alert"}}</i>
+									<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-alert"}}</i>
 								{{end}}
 								<button class="ui icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
 									{{svg "octicon-search"}}
@@ -28,7 +28,7 @@
 				</div>
 			{{end}}
 		</div>
-		<div class="mt-3" id="repo-topics">
+		<div class="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)}}<a id="manage_topic" class="muted">{{.locale.Tr "repo.topic.manage_topics"}}</a>{{end}}
 		</div>
@@ -40,7 +40,7 @@
 					<div class="ui fluid multiple search selection dropdown">
 						<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
 						{{range .Topics}}
-						<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}{{svg "octicon-x" 16 "delete icon ml-3 mt-1"}}</div>
+						<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}{{svg "octicon-x" 16 "delete icon gt-ml-3 gt-mt-1"}}</div>
 						{{end}}
 						<div class="text"></div>
 					</div>
@@ -62,12 +62,12 @@
 			</div>
 		{{end}}
 		{{template "repo/sub_menu" .}}
-		<div class="repo-button-row df ac sb fw">
-			<div class="df ac">
+		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
+			<div class="gt-df gt-ac">
 				{{template "repo/branch_dropdown" dict "root" .}}
 				{{$n := len .TreeNames}}
 				{{$l := Subtract $n 1}}
-				<!-- If home page, show new PR. If not, show breadcrumb -->
+				<!-- If home page, show new gt-pr. If not, show breadcrumb -->
 				{{if eq $n 0}}
 					{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 						<a href="{{CompareLink .BaseRepo .Repository .BranchName}}">
@@ -77,7 +77,7 @@
 					<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{.locale.Tr "repo.find_file.go_to_file"}}</a>
 				{{end}}
 				{{if or .CanAddFile .CanUploadFile}}
-					<button class="ui basic small compact dropdown jump icon button mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
+					<button class="ui basic small compact dropdown jump icon button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
 						<span class="text">{{.locale.Tr "repo.editor.add_file"}}</span>
 						<div class="menu">
 							{{if .CanAddFile}}
@@ -100,10 +100,10 @@
 					</button>
 				{{end}}
 				{{if ne $n 0}}
-					<span class="ui breadcrumb repo-path ml-2"><a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section" title="{{$v}}">{{EllipsisString $v 30}}</span>{{else}}{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span>
+					<span class="ui breadcrumb repo-path gt-ml-2"><a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section" title="{{$v}}">{{EllipsisString $v 30}}</span>{{else}}{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span>
 				{{end}}
 			</div>
-			<div class="df ac">
+			<div class="gt-df gt-ac">
 				{{if eq $n 0}}
 					{{if .Repository.IsTemplate}}
 						<div class="ui tiny primary buttons">
@@ -121,14 +121,14 @@
 							{{svg "octicon-kebab-horizontal"}}
 							<div class="menu">
 								{{if not $.DisableDownloadSourceArchives}}
-									<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-3"}}{{.locale.Tr "repo.download_zip"}}</a>
-									<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-3"}}{{.locale.Tr "repo.download_tar"}}</a>
-									<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "mr-3"}}{{.locale.Tr "repo.download_bundle"}}</a>
+									<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{.locale.Tr "repo.download_zip"}}</a>
+									<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{.locale.Tr "repo.download_tar"}}</a>
+									<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "gt-mr-3"}}{{.locale.Tr "repo.download_bundle"}}</a>
 									{{if .CitiationExist}}
-										<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "mr-3"}}{{.locale.Tr "repo.cite_this_repo"}}</a>
+										<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "gt-mr-3"}}{{.locale.Tr "repo.cite_this_repo"}}</a>
 									{{end}}
 								{{end}}
-								<a class="item js-clone-url-vsc" href="vscode://vscode.git/clone?url={{.CloneButtonOriginLink.HTTPS}}">{{svg "gitea-vscode" 16 "mr-3"}}{{.locale.Tr "repo.clone_in_vsc"}}</a>
+								<a class="item js-clone-url-vsc" href="vscode://vscode.git/clone?url={{.CloneButtonOriginLink.HTTPS}}">{{svg "gitea-vscode" 16 "gt-mr-3"}}{{.locale.Tr "repo.clone_in_vsc"}}</a>
 							</div>
 						</button>
 						{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
@@ -137,7 +137,7 @@
 				{{end}}
 				{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}
 					<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
-						{{svg "octicon-history" 16 "mr-3"}}{{.locale.Tr "repo.file_history"}}
+						{{svg "octicon-history" 16 "gt-mr-3"}}{{.locale.Tr "repo.file_history"}}
 					</a>
 				{{end}}
 			</div>
diff --git a/templates/repo/icon.tmpl b/templates/repo/icon.tmpl
index 70634a6348eba..e9567451531a5 100644
--- a/templates/repo/icon.tmpl
+++ b/templates/repo/icon.tmpl
@@ -1,4 +1,4 @@
-<div class="repo-icon mr-3">
+<div class="repo-icon gt-mr-3">
 	{{if $.IsTemplate}}
 		{{svg "octicon-repo-template" 32}}
 	{{else}}
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index 214914b1bf626..0d87b0687cba8 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -12,7 +12,7 @@
 	</div>
 	<div class="menu">
 		<div class="ui icon search input">
-			<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+			<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
 			<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
 		</div>
 		<div class="header">
@@ -20,12 +20,12 @@
 				<div class="two column row">
 					<a class="reference column" href="#" data-target="#branch-list">
 						<span class="text black">
-							{{svg "octicon-git-branch" 16 "mr-2"}}{{.locale.Tr "repo.branches"}}
+							{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.locale.Tr "repo.branches"}}
 						</span>
 					</a>
 					<a class="reference column" href="#" data-target="#tag-list">
 						<span class="text">
-							{{svg "octicon-tag" 16 "mr-2"}}{{.locale.Tr "repo.tags"}}
+							{{svg "octicon-tag" 16 "gt-mr-2"}}{{.locale.Tr "repo.tags"}}
 						</span>
 					</a>
 				</div>
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index c04b074221962..96d82d4aa6e2d 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -29,7 +29,7 @@
 		<div id="issue-filters" class="ui stackable grid">
 			<div class="six wide column">
 				{{if $.CanWriteIssuesOrPulls}}
-					<div class="ui checkbox issue-checkbox-all vm">
+					<div class="ui checkbox issue-checkbox-all gt-vm">
 						<input type="checkbox" title="{{.locale.Tr "repo.issues.action_check_all"}}">
 					</div>
 				{{end}}
@@ -45,7 +45,7 @@
 						</span>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_label"}}">
 							</div>
 							<span class="info">{{.locale.Tr "repo.issues.filter_label_exclude" | Safe}}</span>
@@ -64,7 +64,7 @@
 						</span>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestone"}}">
 							</div>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_milestone_no_select"}}</a>
@@ -82,7 +82,7 @@
 						</span>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_project"}}">
 							</div>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_project_all"}}</a>
@@ -94,7 +94,7 @@
 								</div>
 								{{range .OpenProjects}}
 									<a class="{{if $.ProjectID}}{{if eq $.ProjectID .ID}}active selected{{end}}{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{.ID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">
-										{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "mr-3"}}{{else}}{{svg "octicon-project" 18 "mr-3"}}{{end}}
+										{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "gt-mr-3"}}{{else}}{{svg "octicon-project" 18 "gt-mr-3"}}{{end}}
 										{{.Title}}
 									</a>
 								{{end}}
@@ -106,7 +106,7 @@
 								</div>
 								{{range .ClosedProjects}}
 									<a class="{{if $.ProjectID}}{{if eq $.ProjectID .ID}}active selected{{end}}{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{.ID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">
-										{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "mr-3"}}{{else}}{{svg "octicon-project" 18 "mr-3"}}{{end}}
+										{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "gt-mr-3"}}{{else}}{{svg "octicon-project" 18 "gt-mr-3"}}{{end}}
 										{{.Title}}
 									</a>
 								{{end}}
@@ -122,7 +122,7 @@
 						</span>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_poster"}}">
 							</div>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
@@ -142,7 +142,7 @@
 						</span>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignee"}}">
 							</div>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_assginee_no_select"}}</a>
@@ -260,7 +260,7 @@
 								</div>
 								{{range .OpenProjects}}
 									<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/projects">
-										{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "mr-3"}}{{else}}{{svg "octicon-project" 18 "mr-3"}}{{end}}
+										{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "gt-mr-3"}}{{else}}{{svg "octicon-project" 18 "gt-mr-3"}}{{end}}
 										{{.Title}}
 									</div>
 								{{end}}
@@ -272,7 +272,7 @@
 								</div>
 								{{range .ClosedProjects}}
 									<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/projects">
-										{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "mr-3"}}{{else}}{{svg "octicon-project" 18 "mr-3"}}{{end}}
+										{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "gt-mr-3"}}{{else}}{{svg "octicon-project" 18 "gt-mr-3"}}{{end}}
 										{{.Title}}
 									</div>
 								{{end}}
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index f0d6ae6bfe98f..45b5b490a9e17 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -52,7 +52,7 @@
 						</span>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_label"}}">
 							</div>
 							<span class="info">{{.locale.Tr "repo.issues.filter_label_exclude" | Safe}}</span>
@@ -87,13 +87,13 @@
 						</span>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignee"}}">
 							</div>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_assginee_no_select"}}</a>
 							{{range .Assignees}}
 								<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{.ID}}&poster={{$.PosterID}}">
-									{{avatar . 28 "mr-2"}}
+									{{avatar . 28 "gt-mr-2"}}
 									{{.GetDisplayName}}
 								</a>
 							{{end}}
@@ -179,7 +179,7 @@
 							</div>
 							{{range .Assignees}}
 								<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
-									{{avatar . 28 "mr-2"}}
+									{{avatar . 28 "gt-mr-2"}}
 									{{.GetDisplayName}}
 								</div>
 							{{end}}
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index 4bfd04c782074..3730d3d3c46f3 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -17,11 +17,11 @@
 			<div class="column">
 				<div class="ui compact tiny menu">
 					<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
-						{{svg "octicon-milestone" 16 "mr-3"}}
+						{{svg "octicon-milestone" 16 "gt-mr-3"}}
 						{{JsPrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
 					</a>
 					<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=closed&q={{$.Keyword}}">
-						{{svg "octicon-check" 16 "mr-3"}}
+						{{svg "octicon-check" 16 "gt-mr-3"}}
 						{{JsPrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
 					</a>
 				</div>
@@ -38,7 +38,7 @@
 				</form>
 			</div>
 
-			<div class="column right aligned df ac je">
+			<div class="column right aligned gt-df gt-ac gt-je">
 				<!-- Sort -->
 				<div class="ui dropdown type jump item">
 					<span class="text">
@@ -61,12 +61,12 @@
 		<div class="milestone list">
 			{{range .Milestones}}
 				<li class="item">
-					<div class="df ac sb">
-						<h3 class="df ac m-0 fw">
-							{{svg "octicon-milestone" 16 "mr-3"}}<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
+					<div class="gt-df gt-ac gt-sb">
+						<h3 class="gt-df gt-ac gt-m-0 gt-fw">
+							{{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
 						</h3>
-						<div class="df ac">
-							<span class="mr-3">{{.Completeness}}%</span>
+						<div class="gt-df gt-ac">
+							<span class="gt-mr-3">{{.Completeness}}%</span>
 							<progress value="{{.Completeness}}" max="100"></progress>
 						</div>
 					</div>
@@ -83,9 +83,9 @@
 							{{end}}
 						{{end}}
 						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "mr-3"}}
+							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 							{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "mr-3"}}
+							{{svg "octicon-check" 16 "gt-mr-3"}}
 							{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
 							{{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}}
 							{{if .UpdatedUnix}}{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.update_ago" (.TimeSinceUpdate|Sec2Time)}}{{end}}
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index ed1fd4778f7d2..8cff774f4eeb0 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -47,7 +47,7 @@
 					<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_labels_title"}}</div>
 					{{if or .Labels .OrgLabels}}
 					<div class="ui icon search input">
-						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}">
 					</div>
 					{{end}}
@@ -84,7 +84,7 @@
 					<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_milestone_title"}}</div>
 					{{if or .OpenMilestones .ClosedMilestones}}
 					<div class="ui icon search input">
-						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
 					</div>
 					{{end}}
@@ -101,7 +101,7 @@
 							</div>
 							{{range .OpenMilestones}}
 								<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-									{{svg "octicon-milestone" 16 "mr-2"}}
+									{{svg "octicon-milestone" 16 "gt-mr-2"}}
 									{{.Name}}
 								</a>
 							{{end}}
@@ -113,7 +113,7 @@
 							</div>
 							{{range .ClosedMilestones}}
 								<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-									{{svg "octicon-milestone" 16 "mr-2"}}
+									{{svg "octicon-milestone" 16 "gt-mr-2"}}
 									{{.Name}}
 								</a>
 							{{end}}
@@ -126,7 +126,7 @@
 				<div class="selected">
 					{{if .Milestone}}
 						<a class="item muted sidebar-item-link" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}">
-							{{svg "octicon-milestone" 18 "mr-3"}}
+							{{svg "octicon-milestone" 18 "gt-mr-3"}}
 							{{.Milestone.Name}}
 						</a>
 					{{end}}
@@ -148,7 +148,7 @@
 					<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_project_title"}}</div>
 					{{if or .OpenProjects .ClosedProjects}}
 					<div class="ui icon search input">
-						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
 					</div>
 					{{end}}
@@ -165,7 +165,7 @@
 							</div>
 							{{range .OpenProjects}}
 								<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
-									{{svg "octicon-project" 18 "mr-3"}}
+									{{svg "octicon-project" 18 "gt-mr-3"}}
 									{{.Title}}
 								</a>
 							{{end}}
@@ -177,7 +177,7 @@
 							</div>
 							{{range .ClosedProjects}}
 								<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
-									{{svg "octicon-project" 18 "mr-3"}}
+									{{svg "octicon-project" 18 "gt-mr-3"}}
 									{{.Title}}
 								</a>
 							{{end}}
@@ -190,7 +190,7 @@
 				<div class="selected">
 					{{if .Project}}
 						<a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Project.ID}}">
-							{{svg "octicon-project" 18 "mr-3"}}
+							{{svg "octicon-project" 18 "gt-mr-3"}}
 							{{.Project.Title}}
 						</a>
 					{{end}}
@@ -209,7 +209,7 @@
 					<div class="filter menu" data-id="#assignee_ids">
 						<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_assignees_title"}}</div>
 						<div class="ui icon search input">
-							<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+							<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 							<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
 						</div>
 						<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
@@ -217,7 +217,7 @@
 							<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
 								<span class="octicon-check invisible">{{svg "octicon-check"}}</span>
 								<span class="text">
-									{{avatar . 28 "mr-3"}}{{.GetDisplayName}}
+									{{avatar . 28 "gt-mr-3"}}{{.GetDisplayName}}
 								</span>
 							</a>
 						{{end}}
@@ -228,8 +228,8 @@
 						{{.locale.Tr "repo.issues.new.no_assignees"}}
 					</span>
 					{{range .Assignees}}
-						<a class="hide item p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
-							{{avatar . 28 "mr-3 vm"}}{{.GetDisplayName}}
+						<a class="hide item gt-p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
+							{{avatar . 28 "gt-mr-3 gt-vm"}}{{.GetDisplayName}}
 						</a>
 					{{end}}
 				</div>
diff --git a/templates/repo/issue/openclose.tmpl b/templates/repo/issue/openclose.tmpl
index 9299fe1cb1f16..e2c13fea18790 100644
--- a/templates/repo/issue/openclose.tmpl
+++ b/templates/repo/issue/openclose.tmpl
@@ -1,14 +1,14 @@
 <div class="ui compact tiny menu">
 	<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&project={{.ProjectID}}&assignee={{.AssigneeID}}&poster={{.PosterID}}">
 		{{if .PageIsPullList}}
-			{{svg "octicon-git-pull-request" 16 "mr-3"}}
+			{{svg "octicon-git-pull-request" 16 "gt-mr-3"}}
 		{{else}}
-			{{svg "octicon-issue-opened" 16 "mr-3"}}
+			{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 		{{end}}
 		{{JsPrettyNumber .IssueStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
 	</a>
 	<a class="{{if .IsShowClosed}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&project={{.ProjectID}}&assignee={{.AssigneeID}}&poster={{.PosterID}}">
-		{{svg "octicon-check" 16 "mr-3"}}
+		{{svg "octicon-check" 16 "gt-mr-3"}}
 		{{JsPrettyNumber .IssueStats.ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
 	</a>
 </div>
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 7b318d51f1a52..b3970d6404c5b 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -27,10 +27,10 @@
 				</a>
 			{{end}}
 				<div class="content comment-container">
-					<div class="ui top attached header comment-header df ac sb">
-						<div class="comment-header-left df ac">
+					<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
+						<div class="comment-header-left gt-df gt-ac">
 							{{if .Issue.OriginalAuthor}}
-								<span class="text black bold">
+								<span class="text black gt-bold">
 									{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
 									{{.Issue.OriginalAuthor}}
 								</span>
@@ -50,7 +50,7 @@
 								</span>
 							{{end}}
 						</div>
-						<div class="comment-header-right actions df ac">
+						<div class="comment-header-right actions gt-df gt-ac">
 							{{if gt .Issue.ShowRole 0}}
 								{{if (.Issue.ShowRole.HasRole "Writer")}}
 									<div class="ui basic label role-label">
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 37aa82345fa58..90646045d0fa1 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -22,10 +22,10 @@
 				</a>
 			{{end}}
 				<div class="content comment-container">
-					<div class="ui top attached header comment-header df ac sb">
-						<div class="comment-header-left df ac">
+					<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
+						<div class="comment-header-left gt-df gt-ac">
 							{{if .OriginalAuthor}}
-								<span class="text black bold mr-2">
+								<span class="text black gt-bold gt-mr-2">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 									{{.OriginalAuthor}}
 								</span>
@@ -47,7 +47,7 @@
 								</span>
 							{{end}}
 						</div>
-						<div class="comment-header-right actions df ac">
+						<div class="comment-header-right actions gt-df gt-ac">
 							{{if (.ShowRole.HasRole "Poster")}}
 								<div class="ui basic label">
 									{{$.locale.Tr "repo.issues.poster"}}
@@ -93,7 +93,7 @@
 			</div>
 		{{else if eq .Type 1}}
 			<div class="timeline-item event" id="{{.HashTag}}">
-				<span class="badge bg-green text-white">{{svg "octicon-dot-fill"}}</span>
+				<span class="badge gt-bg-green gt-text-white">{{svg "octicon-dot-fill"}}</span>
 				{{template "shared/user/avatarlink" .Poster}}
 				<span class="text grey muted-links">
 					{{template "shared/user/authorlink" .Poster}}
@@ -106,7 +106,7 @@
 			</div>
 		{{else if eq .Type 2}}
 			<div class="timeline-item event" id="{{.HashTag}}">
-				<span class="badge bg-red text-white">{{svg "octicon-circle-slash"}}</span>
+				<span class="badge gt-bg-red gt-text-white">{{svg "octicon-circle-slash"}}</span>
 				{{template "shared/user/avatarlink" .Poster}}
 				<span class="text grey muted-links">
 					{{template "shared/user/authorlink" .Poster}}
@@ -119,7 +119,7 @@
 			</div>
 		{{else if eq .Type 28}}
 			<div class="timeline-item event" id="{{.HashTag}}">
-				<span class="badge bg-purple text-white">{{svg "octicon-git-merge"}}</span>
+				<span class="badge gt-bg-purple gt-text-white">{{svg "octicon-git-merge"}}</span>
 				{{template "shared/user/avatarlink" .Poster}}
 				<span class="text grey muted-links">
 					{{template "shared/user/authorlink" .Poster}}
@@ -372,7 +372,7 @@
 						{{avatar .Poster}}
 					</a>
 					{{end}}
-					<span class="badge{{if eq .Review.Type 1}} bg-green text-white{{else if eq .Review.Type 3}} bg-red text-white{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
+					<span class="badge{{if eq .Review.Type 1}} gt-bg-green gt-text-white{{else if eq .Review.Type 3}} gt-bg-red gt-text-white{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
 					<span class="text grey muted-links">
 						{{if .OriginalAuthor}}
 							<span class="text black">
@@ -402,11 +402,11 @@
 				{{if .Content}}
 				<div class="timeline-item comment" id="{{.HashTag}}">
 					<div class="content comment-container">
-						<div class="ui top attached header comment-header df ac sb">
-							<div class="comment-header-left df ac">
+						<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
+							<div class="comment-header-left gt-df gt-ac">
 								<span class="text grey muted-links">
 									{{if .OriginalAuthor}}
-										<span class="text black bold">
+										<span class="text black gt-bold">
 											{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 											{{.OriginalAuthor}}
 										</span>
@@ -419,7 +419,7 @@
 									{{$.locale.Tr "repo.issues.review.left_comment" | Safe}}
 								</span>
 							</div>
-							<div class="comment-header-right actions df ac">
+							<div class="comment-header-right actions gt-df gt-ac">
 									{{if (.ShowRole.HasRole "Poster")}}
 										<div class="ui basic label">
 												{{$.locale.Tr "repo.issues.poster"}}
@@ -470,31 +470,31 @@
 					{{range $filename, $lines := .Review.CodeComments}}
 						{{range $line, $comms := $lines}}
 								<div class="ui segments">
-									<div class="ui segment py-3 df ac sb">
+									<div class="ui segment gt-py-3 gt-df gt-ac gt-sb">
 										{{$invalid := (index $comms 0).Invalidated}}
 										{{$resolved := (index $comms 0).IsResolved}}
 										{{$resolveDoer := (index $comms 0).ResolveDoer}}
 										{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}}
-										<div class="df ac">
-											<a href="{{(index $comms 0).CodeCommentLink}}" class="file-comment ml-3 word-break">{{$filename}}</a>
+										<div class="gt-df gt-ac">
+											<a href="{{(index $comms 0).CodeCommentLink}}" class="file-comment gt-ml-3 gt-word-break">{{$filename}}</a>
 											{{if $invalid}}
-												<span class="ui label basic small ml-3">
+												<span class="ui label basic small gt-ml-3">
 													{{$.locale.Tr "repo.issues.review.outdated"}}
 												</span>
 											{{end}}
 										</div>
 										<div>
 											{{if or $invalid $resolved}}
-												<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated df ac">
-													{{svg "octicon-unfold" 16 "mr-3"}}
+												<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated gt-df gt-ac">
+													{{svg "octicon-unfold" 16 "gt-mr-3"}}
 													{{if $resolved}}
 														{{$.locale.Tr "repo.issues.review.show_resolved"}}
 													{{else}}
 														{{$.locale.Tr "repo.issues.review.show_outdated"}}
 													{{end}}
 												</button>
-												<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated df ac">
-													{{svg "octicon-fold" 16 "mr-3"}}
+												<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated gt-df gt-ac">
+													{{svg "octicon-fold" 16 "gt-mr-3"}}
 													{{if $resolved}}
 														{{$.locale.Tr "repo.issues.review.hide_resolved"}}
 													{{else}}
@@ -520,13 +520,13 @@
 										</div>
 									{{end}}
 									<div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}}">
-										<div class="ui comments mb-0">
+										<div class="ui comments gt-mb-0">
 											{{range $comms}}
 												{{$createdSubStr:= TimeSinceUnix .CreatedUnix $.locale}}
-												<div class="comment code-comment pb-4" id="{{.HashTag}}">
+												<div class="comment code-comment gt-pb-4" id="{{.HashTag}}">
 													<div class="content">
 														<div class="header comment-header">
-															<div class="comment-header-left df ac">
+															<div class="comment-header-left gt-df gt-ac">
 																{{if not .OriginalAuthor}}
 																	<a class="avatar">
 																		{{avatar .Poster}}
@@ -534,7 +534,7 @@
 																{{end}}
 																<span class="text grey muted-links">
 																	{{if .OriginalAuthor}}
-																		<span class="text black bold">
+																		<span class="text black gt-bold">
 																			{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 																			{{.OriginalAuthor}}
 																		</span>
@@ -546,7 +546,7 @@
 																	{{$.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdSubStr | Safe}}
 																</span>
 															</div>
-															<div class="comment-header-right actions df ac">
+															<div class="comment-header-right actions gt-df gt-ac">
 																{{if (.ShowRole.HasRole "Poster")}}
 																	<div class="ui basic label">
 																		{{$.locale.Tr "repo.issues.poster"}}
@@ -589,11 +589,11 @@
 												</div>
 											{{end}}
 										</div>
-										<div class="code-comment-buttons df ac fw mt-3 mb-2 mx-3">
-											<div class="f1">
+										<div class="code-comment-buttons gt-df gt-ac gt-fw gt-mt-3 gt-mb-2 gt-mx-3">
+											<div class="gt-f1">
 												{{if $resolved}}
 													<div class="ui grey text">
-														{{svg "octicon-check" 16 "mr-2"}}
+														{{svg "octicon-check" 16 "gt-mr-2"}}
 														<b>{{$resolveDoer.Name}}</b> {{$.locale.Tr "repo.issues.review.resolved_by"}}
 													</div>
 												{{end}}
@@ -609,8 +609,8 @@
 													</button>
 												{{end}}
 												{{if and $.SignedUserID (not $.Repository.IsArchived)}}
-													<button class="comment-form-reply ui green tiny labeled icon button ml-2 mr-0">
-														{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.locale.Tr "repo.diff.comment.reply"}}
+													<button class="comment-form-reply ui green tiny labeled icon button gt-ml-2 gt-mr-0">
+														{{svg "octicon-reply" 16 "reply icon gt-mr-2"}}{{$.locale.Tr "repo.diff.comment.reply"}}
 													</button>
 												{{end}}
 											</div>
diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index f32c278b62f6c..1ae8d06812464 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -177,7 +177,7 @@
 					{{$.locale.Tr "repo.pulls.data_broken"}}
 				</div>
 			{{else if .IsPullWorkInProgress}}
-				<div class="item toggle-wip df ac sb" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
+				<div class="item toggle-wip gt-df gt-ac gt-sb" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
 					<div>
 						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 						{{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
@@ -333,7 +333,7 @@
 								'hasPendingPullRequestMergeTip': {{$hasPendingPullRequestMergeTip}},
 							};
 
-							const generalHideAutoMerge = mergeForm.canMergeNow && mergeForm.allOverridableChecksOk; // if this PR can be merged now, then hide the auto merge
+							const generalHideAutoMerge = mergeForm.canMergeNow && mergeForm.allOverridableChecksOk; // if this gt-pr can be merged now, then hide the auto merge
 							mergeForm['mergeStyles'] = [
 								{
 									'name': 'merge',
diff --git a/templates/repo/issue/view_content/pull_merge_instruction.tmpl b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
index 21bb3d8e79b90..5669b2fb69bb0 100644
--- a/templates/repo/issue/view_content/pull_merge_instruction.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
@@ -1,7 +1,7 @@
-<div class="instruct-toggle mt-3"> {{$.locale.Tr "repo.pulls.merge_instruction_hint" | Safe}} </div>
+<div class="instruct-toggle gt-mt-3"> {{$.locale.Tr "repo.pulls.merge_instruction_hint" | Safe}} </div>
 <div class="instruct-content" style="display:none">
 	<div class="ui divider"></div>
-	<div><h3 class="di">{{$.locale.Tr "step1"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step1_desc"}}</div>
+	<div><h3 class="gt-di">{{$.locale.Tr "step1"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step1_desc"}}</div>
 	<div class="ui secondary segment">
 		{{if eq $.Issue.PullRequest.Flow 0}}
 		<div>git checkout -b {{if ne $.Issue.PullRequest.HeadRepo.ID $.Issue.PullRequest.BaseRepo.ID}}{{$.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{$.Issue.PullRequest.HeadBranch}} {{$.Issue.PullRequest.BaseBranch}}</div>
@@ -11,7 +11,7 @@
 		<div>git fetch origin {{$.Issue.PullRequest.GetGitRefName}}:{{$.Issue.PullRequest.HeadBranch}}</div>
 		{{end}}
 	</div>
-	<div><h3 class="di">{{$.locale.Tr "step2"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step2_desc"}}</div>
+	<div><h3 class="gt-di">{{$.locale.Tr "step2"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step2_desc"}}</div>
 	<div class="ui secondary segment">
 		<div>git checkout {{$.Issue.PullRequest.BaseBranch}}</div>
 		<div>git merge --no-ff {{if ne $.Issue.PullRequest.HeadRepo.ID $.Issue.PullRequest.BaseRepo.ID}}{{$.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{$.Issue.PullRequest.HeadBranch}}</div>
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 10bb6a07f9710..0f256b6be8ceb 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -6,17 +6,17 @@
 
 			<input id="reviewer_id" name="reviewer_id" type="hidden" value="{{.reviewer_id}}">
 			<div class="ui {{if or (not .Reviewers) (not .CanChooseReviewer) .Repository.IsArchived}}disabled{{end}} floating jump select-reviewers-modify dropdown">
-				<a class="text df ac muted">
+				<a class="text gt-df gt-ac muted">
 					<strong>{{.locale.Tr "repo.issues.review.reviewers"}}</strong>
 					{{if and .CanChooseReviewer (not .Repository.IsArchived)}}
-						{{svg "octicon-gear" 16 "ml-2"}}
+						{{svg "octicon-gear" 16 "gt-ml-2"}}
 					{{end}}
 				</a>
 				<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
 					<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_reviewer_title"}}</div>
 					{{if .Reviewers}}
 						<div class="ui icon search input">
-							<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+							<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 							<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_reviewers"}}">
 						</div>
 					{{end}}
@@ -26,7 +26,7 @@
 								<a class="{{if not .CanChange}}ui tooltip{{end}} item {{if .Checked}} checked {{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_{{.ItemID}}" {{if not .CanChange}} data-content="{{$.locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
 									<span class="octicon-check {{if not .Checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
 									<span class="text">
-										{{avatar .User 28 "mr-3"}}
+										{{avatar .User 28 "gt-mr-3"}}
 										{{.User.GetDisplayName}}
 									</span>
 								</a>
@@ -40,7 +40,7 @@
 								<a class="{{if not .CanChange}}ui tooltip{{end}} item {{if .Checked}} checked {{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_team_{{.Team.ID}}" {{if not .CanChange}} data-content="{{$.locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
 									<span class="octicon-check {{if not .Checked}}invisible{{end}}">{{svg "octicon-check" 16}}</span>
 									<span class="text">
-										{{svg "octicon-people" 16 "ml-4 mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}
+										{{svg "octicon-people" 16 "gt-ml-4 gt-mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}
 									</span>
 								</a>
 							{{end}}
@@ -53,10 +53,10 @@
 				<span class="no-select item {{if or .OriginalReviews .PullReviewers}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_reviewers"}}</span>
 				<div class="selected">
 					{{range .PullReviewers}}
-						<div class="item mb-2">
+						<div class="item gt-mb-2">
 							{{if .User}}
 								<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">
-									{{avatar .User 28 "mr-3"}}
+									{{avatar .User 28 "gt-mr-3"}}
 									{{.User.GetDisplayName}}
 								</a>
 							{{else if .Team}}
@@ -107,17 +107,17 @@
 		{{end}}
 
 		<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
-			<a class="text df ac muted">
+			<a class="text gt-df gt-ac muted">
 				<strong>{{.locale.Tr "repo.issues.new.labels"}}</strong>
 				{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-					{{svg "octicon-gear" 16 "ml-2"}}
+					{{svg "octicon-gear" 16 "gt-ml-2"}}
 				{{end}}
 			</a>
 			<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels">
 				<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_labels_title"}}</div>
 				{{if or .Labels .OrgLabels}}
 					<div class="ui icon search input">
-						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}">
 					</div>
 				{{end}}
@@ -142,17 +142,17 @@
 		<div class="ui divider"></div>
 
 		<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
-			<a class="text df ac muted">
+			<a class="text gt-df gt-ac muted">
 				<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
 				{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-					{{svg "octicon-gear" 16 "ml-2"}}
+					{{svg "octicon-gear" 16 "gt-ml-2"}}
 				{{end}}
 			</a>
 			<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/milestone">
 				<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_milestone_title"}}</div>
 				{{if or .OpenMilestones .ClosedMilestones}}
 				<div class="ui icon search input">
-					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+					<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 					<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
 				</div>
 				{{end}}
@@ -169,7 +169,7 @@
 						</div>
 						{{range .OpenMilestones}}
 							<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-								{{svg "octicon-milestone" 16 "mr-2"}}
+								{{svg "octicon-milestone" 16 "gt-mr-2"}}
 								{{.Name}}
 							</a>
 						{{end}}
@@ -181,7 +181,7 @@
 						</div>
 						{{range .ClosedMilestones}}
 							<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-								{{svg "octicon-milestone" 16 "mr-2"}}
+								{{svg "octicon-milestone" 16 "gt-mr-2"}}
 								{{.Name}}
 							</a>
 						{{end}}
@@ -194,7 +194,7 @@
 			<div class="selected">
 				{{if .Issue.Milestone}}
 					<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
-						{{svg "octicon-milestone" 18 "mr-3"}}
+						{{svg "octicon-milestone" 18 "gt-mr-3"}}
 						{{.Issue.Milestone.Name}}
 					</a>
 				{{end}}
@@ -205,17 +205,17 @@
 			<div class="ui divider"></div>
 
 			<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
-				<a class="text df ac muted">
+				<a class="text gt-df gt-ac muted">
 					<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
 					{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-						{{svg "octicon-gear" 16 "ml-2"}}
+						{{svg "octicon-gear" 16 "gt-ml-2"}}
 					{{end}}
 				</a>
 				<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/projects">
 					<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_project_title"}}</div>
 					{{if or .OpenProjects .ClosedProjects}}
 					<div class="ui icon search input">
-						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
 					</div>
 					{{end}}
@@ -227,7 +227,7 @@
 						</div>
 						{{range .OpenProjects}}
 							<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{.Link}}">
-								{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "mr-3"}}{{else}}{{svg "octicon-project" 18 "mr-3"}}{{end}}
+								{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "gt-mr-3"}}{{else}}{{svg "octicon-project" 18 "gt-mr-3"}}{{end}}
 								{{.Title}}
 							</a>
 						{{end}}
@@ -239,7 +239,7 @@
 						</div>
 						{{range .ClosedProjects}}
 							<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{.Link}}">
-								{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "mr-3"}}{{else}}{{svg "octicon-project" 18 "mr-3"}}{{end}}
+								{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "gt-mr-3"}}{{else}}{{svg "octicon-project" 18 "gt-mr-3"}}{{end}}
 								{{.Title}}
 							</a>
 						{{end}}
@@ -251,7 +251,7 @@
 				<div class="selected">
 					{{if .Issue.ProjectID}}
 						<a class="item muted sidebar-item-link" href="{{.Issue.Project.Link}}">
-							{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "mr-3"}}{{else}}{{svg "octicon-project" 18 "mr-3"}}{{end}}
+							{{if .IsOrganizationProject}}{{svg "octicon-project-symlink" 18 "gt-mr-3"}}{{else}}{{svg "octicon-project" 18 "gt-mr-3"}}{{end}}
 							{{.Issue.Project.Title}}
 						</a>
 					{{end}}
@@ -263,16 +263,16 @@
 
 		<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
 		<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
-			<a class="text df ac muted">
+			<a class="text gt-df gt-ac muted">
 				<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
 				{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-					{{svg "octicon-gear" 16 "ml-2"}}
+					{{svg "octicon-gear" 16 "gt-ml-2"}}
 				{{end}}
 			</a>
 			<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
 				<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_assignees_title"}}</div>
 				<div class="ui icon search input">
-					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+					<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 					<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
 				</div>
 				<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
@@ -288,7 +288,7 @@
 						{{end}}
 						<span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
 						<span class="text">
-							{{avatar . 28 "mr-3"}}
+							{{avatar . 28 "gt-mr-3"}}
 							{{.GetDisplayName}}
 						</span>
 					</a>
@@ -301,7 +301,7 @@
 				{{range .Issue.Assignees}}
 					<div class="item">
 						<a class="muted sidebar-item-link" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
-							{{avatar . 28 "mr-3"}}
+							{{avatar . 28 "gt-mr-3"}}
 							{{.GetDisplayName}}
 						</a>
 					</div>
@@ -313,10 +313,10 @@
 
 		{{if .Participants}}
 			<span class="text"><strong>{{.locale.Tr "repo.issues.num_participants" .NumParticipants}}</strong></span>
-			<div class="ui list df fw">
+			<div class="ui list gt-df gt-fw">
 				{{range .Participants}}
 					<a class="ui tooltip" {{if gt .ID 0}}href="{{.HomeLink}}"{{end}} data-content="{{.GetDisplayName}}" data-position="top center">
-						{{avatar . 28 "my-1 mr-2"}}
+						{{avatar . 28 "gt-my-1 gt-mr-2"}}
 					</a>
 				{{end}}
 			</div>
@@ -327,16 +327,16 @@
 
 			<div class="ui watching">
 				<span class="text"><strong>{{.locale.Tr "notification.notifications"}}</strong></span>
-				<div class="mt-3">
+				<div class="gt-mt-3">
 					<form method="POST" action="{{.Issue.Link}}/watch">
 						<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}" />
 						{{$.CsrfTokenHtml}}
-						<button class="fluid ui button df jc">
+						<button class="fluid ui button gt-df gt-jc">
 							{{if $.IssueWatch.IsWatching}}
-								{{svg "octicon-mute" 16 "mr-3"}}
+								{{svg "octicon-mute" 16 "gt-mr-3"}}
 								{{.locale.Tr "repo.issues.unsubscribe"}}
 							{{else}}
-								{{svg "octicon-unmute" 16 "mr-3"}}
+								{{svg "octicon-unmute" 16 "gt-mr-3"}}
 								{{.locale.Tr "repo.issues.subscribe"}}
 							{{end}}
 						</button>
@@ -349,7 +349,7 @@
 				<div class="ui divider"></div>
 				<div class="ui timetrack">
 					<span class="text"><strong>{{.locale.Tr "repo.issues.tracker"}}</strong></span>
-					<div class="mt-3">
+					<div class="gt-mt-3">
 						<form method="POST" action="{{.Issue.Link}}/times/stopwatch/toggle" id="toggle_stopwatch_form">
 							{{$.CsrfTokenHtml}}
 						</form>
@@ -358,7 +358,7 @@
 						</form>
 						{{if  $.IsStopwatchRunning}}
 							<button class="ui fluid button issue-stop-time">{{.locale.Tr "repo.issues.stop_tracking"}}</button>
-							<button class="ui fluid negative button issue-cancel-time mt-3">{{.locale.Tr "repo.issues.cancel_tracking"}}</button>
+							<button class="ui fluid negative button issue-cancel-time gt-mt-3">{{.locale.Tr "repo.issues.cancel_tracking"}}</button>
 						{{else}}
 							{{if .HasUserStopwatch}}
 								<div class="ui warning message">
@@ -380,7 +380,7 @@
 									<div class="ui red cancel button">{{.locale.Tr "repo.issues.add_time_cancel"}}</div>
 								</div>
 							</div>
-							<button class="ui fluid button green tooltip issue-add-time mt-3" data-content='{{.locale.Tr "repo.issues.add_time"}}' data-position="top center">{{.locale.Tr "repo.issues.add_time_short"}}</button>
+							<button class="ui fluid button green tooltip issue-add-time gt-mt-3" data-content='{{.locale.Tr "repo.issues.add_time"}}' data-position="top center">{{.locale.Tr "repo.issues.add_time_short"}}</button>
 						{{end}}
 					</div>
 				</div>
@@ -391,7 +391,7 @@
 					<span class="text"><strong>{{.locale.Tr "repo.issues.time_spent_from_all_authors"  ($.Issue.TotalTrackedTime | Sec2Time) | Safe}}</strong></span>
 					<div>
 						{{range $user, $trackedtime := .WorkingUsers}}
-							<div class="comment mt-3">
+							<div class="comment gt-mt-3">
 								<a class="avatar">
 									{{avatar $user}}
 								</a>
@@ -417,14 +417,14 @@
 			</div>
 			{{if ne .Issue.DeadlineUnix 0}}
 				<p>
-					<div class="df sb ac">
+					<div class="gt-df gt-sb gt-ac">
 						<div class="due-date tooltip {{if .Issue.IsOverdue}}text red{{end}}" {{if .Issue.IsOverdue}}data-content="{{.locale.Tr "repo.issues.due_date_overdue"}}"{{end}}>
-							{{svg "octicon-calendar" 16 "mr-3"}}
+							{{svg "octicon-calendar" 16 "gt-mr-3"}}
 							<time data-format="date" datetime="{{.Issue.DeadlineUnix.FormatDate}}">{{.Issue.DeadlineUnix.FormatDate}}</time>
 						</div>
 						<div>
 							{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-								<a class="issue-due-edit tooltip muted" data-content="{{$.locale.Tr "repo.issues.due_date_form_edit"}}">{{svg "octicon-pencil" 16 "mr-2"}}</a>
+								<a class="issue-due-edit tooltip muted" data-content="{{$.locale.Tr "repo.issues.due_date_form_edit"}}">{{svg "octicon-pencil" 16 "gt-mr-2"}}</a>
 								<a class="issue-due-remove tooltip muted" data-content="{{$.locale.Tr "repo.issues.due_date_form_remove"}}">{{svg "octicon-trash"}}</a>
 							{{end}}
 						</div>
@@ -473,8 +473,8 @@
 					</span>
 					<div class="ui relaxed divided list">
 						{{range .BlockingDependencies}}
-							<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} df ac sb">
-								<div class="item-left df jc fc f1">
+							<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} gt-df gt-ac gt-sb">
+								<div class="item-left gt-df gt-jc gt-fc gt-f1">
 									<a class="title tooltip" href="{{.Issue.Link}}" data-content="#{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}">
 										#{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}
 									</a>
@@ -482,7 +482,7 @@
 										{{.Repository.OwnerName}}/{{.Repository.Name}}
 									</div>
 								</div>
-								<div class="item-right df ac">
+								<div class="item-right gt-df gt-ac">
 									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
 										<a class="delete-dependency-button tooltip ci muted" data-id="{{.Issue.ID}}" data-type="blocking" data-content="{{$.locale.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											{{svg "octicon-trash" 16}}
@@ -500,8 +500,8 @@
 					</span>
 					<div class="ui relaxed divided list">
 						{{range .BlockedByDependencies}}
-							<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} df ac sb">
-								<div class="item-left df jc fc f1">
+							<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} gt-df gt-ac gt-sb">
+								<div class="item-left gt-df gt-jc gt-fc gt-f1">
 									<a class="title tooltip" href="{{.Issue.Link}}" data-content="#{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}">
 										#{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}
 									</a>
@@ -509,7 +509,7 @@
 										{{.Repository.OwnerName}}/{{.Repository.Name}}
 									</div>
 								</div>
-								<div class="item-right df ac">
+								<div class="item-right gt-df gt-ac">
 									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
 										<a class="delete-dependency-button tooltip ci muted" data-id="{{.Issue.ID}}" data-type="blockedBy" data-content="{{$.locale.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											{{svg "octicon-trash" 16}}
@@ -577,10 +577,10 @@
 
 		<div class="ui divider"></div>
 		<div class="ui equal width compact grid">
-			<div class="row ac">
+			<div class="row gt-ac">
 				{{$issueReferenceLink := printf "%s#%d" .Issue.Repo.FullName .Issue.Index}}
 				<span class="text column truncate">{{.locale.Tr "repo.issues.reference_link" $issueReferenceLink}}</span>
-				<button class="ui two wide button column p-3" data-clipboard-text="{{$issueReferenceLink}}">{{svg "octicon-copy" 14}}</button>
+				<button class="ui two wide button column gt-p-3" data-clipboard-text="{{$issueReferenceLink}}">{{svg "octicon-copy" 14}}</button>
 			</div>
 		</div>
 
@@ -661,7 +661,7 @@
 					</form>
 				</div>
 			</div>
-			<button class="fluid ui show-modal button negative mt-3" data-modal="#delete">
+			<button class="fluid ui show-modal button negative gt-mt-3" data-modal="#delete">
 				{{svg "octicon-trash"}}
 				{{.locale.Tr "repo.issues.delete"}}
 			</button>
diff --git a/templates/repo/issue/view_content/update_branch_by_merge.tmpl b/templates/repo/issue/view_content/update_branch_by_merge.tmpl
index 3bc8dcca9752e..6d36a9b45f388 100644
--- a/templates/repo/issue/view_content/update_branch_by_merge.tmpl
+++ b/templates/repo/issue/view_content/update_branch_by_merge.tmpl
@@ -8,7 +8,7 @@
 		</div>
 		<div class="item-section-right">
 			{{if and .UpdateAllowed .UpdateByRebaseAllowed}}
-				<div class="dib">
+				<div class="gt-dib">
 					<div class="ui buttons update-button">
 						<button class="ui button" data-do="{{.Link}}/update" data-redirect="{{.Link}}">
 							<span class="button-text">
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index 67ab71d694199..7ba6198b62c31 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -8,7 +8,7 @@
 		<h1>
 			<span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas | RenderCodeBlock}}</span>
 			<span class="index">#{{.Issue.Index}}</span>
-			<div id="edit-title-input" class="ui input ml-4" style="display: none">
+			<div id="edit-title-input" class="ui input gt-ml-4" style="display: none">
 				<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">
 			</div>
 		</h1>
@@ -75,7 +75,7 @@
 					</div>
 					<div class="menu">
 						<div class="ui icon search input">
-							<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+							<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
 							<input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}...">
 						</div>
 						<div class="scrolling menu" id="branch-select">
diff --git a/templates/repo/migrate/migrate.tmpl b/templates/repo/migrate/migrate.tmpl
index e69cb5724b1ff..9663b85ebaa2d 100644
--- a/templates/repo/migrate/migrate.tmpl
+++ b/templates/repo/migrate/migrate.tmpl
@@ -5,13 +5,13 @@
 			{{template "repo/migrate/helper" .}}
 			<div class="ui three stackable cards">
 				{{range .Services}}
-					<a class="ui card df ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
+					<a class="ui card gt-df gt-ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
 						{{svg (Printf "gitea-%s" .Name) 184}}
 						<div class="content">
-							<div class="header tc">
+							<div class="header gt-tc">
 								{{.Title}}
 							</div>
-							<div class="description tc">
+							<div class="description gt-tc">
 								{{(Printf "repo.migrate.%s.description" .Name) | $.locale.Tr}}
 							</div>
 						</div>
diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
index f717934b3373d..fc4770e5d8d42 100644
--- a/templates/repo/projects/list.tmpl
+++ b/templates/repo/projects/list.tmpl
@@ -14,11 +14,11 @@
 		{{template "base/alert" .}}
 		<div class="ui compact tiny menu">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
-				{{svg "octicon-project" 16 "mr-3"}}
+				{{svg "octicon-project" 16 "gt-mr-3"}}
 				{{JsPrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
 			</a>
 			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed">
-				{{svg "octicon-check" 16 "mr-3"}}
+				{{svg "octicon-check" 16 "gt-mr-3"}}
 				{{JsPrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
 			</a>
 		</div>
@@ -47,9 +47,9 @@
 							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate|Str2html}}
 						{{end}}
 						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "mr-3"}}
+							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 							{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "mr-3"}}
+							{{svg "octicon-check" 16 "gt-mr-3"}}
 							{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
 						</span>
 					</div>
diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
index 711b488180346..b27676fdfe970 100644
--- a/templates/repo/projects/view.tmpl
+++ b/templates/repo/projects/view.tmpl
@@ -52,22 +52,22 @@
 					<div class="ui compact right small menu">
 						<a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
 							{{svg "octicon-pencil"}}
-							<span class="mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
+							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
 						</a>
 						{{if .Project.IsClosed}}
 							<a class="item link-action" href data-url="{{$.RepoLink}}/projects/{{.Project.ID}}/open">
 								{{svg "octicon-check"}}
-								<span class="mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
+								<span class="gt-mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
 							</a>
 						{{else}}
 							<a class="item link-action" href data-url="{{$.RepoLink}}/projects/{{.Project.ID}}/close">
 								{{svg "octicon-skip"}}
-								<span class="mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
+								<span class="gt-mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
 							</a>
 						{{end}}
 						<a class="item delete-button" href="#" data-url="{{$.RepoLink}}/projects/{{.Project.ID}}/delete" data-id="{{.Project.ID}}">
 							{{svg "octicon-trash"}}
-							<span class="mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
+							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
 						</a>
 					</div>
 				</div>
@@ -81,8 +81,8 @@
 			{{range $board := .Boards}}
 
 			<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
-				<div class="board-column-header df ac sb">
-					<div class="ui large label board-label py-2">
+				<div class="board-column-header gt-df gt-ac gt-sb">
+					<div class="ui large label board-label gt-py-2">
 						<div class="ui small circular grey label board-card-cnt">
 							{{.NumIssues}}
 						</div>
@@ -90,7 +90,7 @@
 					</div>
 					{{if and $.CanWriteProjects (not $.Repository.IsArchived) (ne .ID 0)}}
 						<div class="ui dropdown jump item tooltip">
-							<div class="not-mobile px-3" tabindex="-1">
+							<div class="not-mobile gt-px-3" tabindex="-1">
 								{{svg "octicon-kebab-horizontal"}}
 							</div>
 							<div class="menu user-menu" tabindex="-1">
@@ -186,9 +186,9 @@
 								{{end}}
 							</div>
 						{{end}}
-						<div class="content p-0">
+						<div class="content gt-p-0">
 							<div class="header">
-								<span class="dif ac vm {{if .IsClosed}}red{{else}}green{{end}}">
+								<span class="gt-dif gt-ac gt-vm {{if .IsClosed}}red{{else}}green{{end}}">
 									{{if .IsPull}}
 										{{if .PullRequest.HasMerged}}
 											{{svg "octicon-git-merge" 16 "text purple"}}
@@ -207,11 +207,11 @@
 										{{end}}
 									{{end}}
 								</span>
-								<a class="project-board-title vm" href="{{.Link}}">
+								<a class="project-board-title gt-vm" href="{{.Link}}">
 									{{.Title}}
 								</a>
 							</div>
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<span class="text light grey">
 									#{{.Index}}
 									{{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}}
@@ -225,31 +225,31 @@
 								</span>
 							</div>
 							{{- if .MilestoneID}}
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<a class="milestone" href="{{$.RepoLink}}/milestone/{{.MilestoneID}}">
-									{{svg "octicon-milestone" 16 "mr-2 vm"}}
-									<span class="vm">{{.Milestone.Name}}</span>
+									{{svg "octicon-milestone" 16 "gt-mr-2 gt-vm"}}
+									<span class="gt-vm">{{.Milestone.Name}}</span>
 								</a>
 							</div>
 							{{- end}}
 							{{- range index $.LinkedPRs .ID}}
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<a href="{{$.RepoLink}}/pulls/{{.Index}}">
-									<span class="m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "mr-2 vm"}}</span>
-									<span class="vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
+									<span class="gt-m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
+									<span class="gt-vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
 								</a>
 							</div>
 							{{- end}}
 						</div>
 
 						{{if or .Labels .Assignees}}
-						<div class="extra content labels-list p-0 pt-2">
+						<div class="extra content labels-list gt-p-0 gt-pt-2">
 							{{range .Labels}}
 								<a class="ui label" target="_blank" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}};" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
 							{{end}}
 							<div class="right floated">
 								{{range .Assignees}}
-									<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini mr-3"}}</a>
+									<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini gt-mr-3"}}</a>
 								{{end}}
 							</div>
 						</div>
diff --git a/templates/repo/pulls/status.tmpl b/templates/repo/pulls/status.tmpl
index ca090ee843e4f..81272c74b57ec 100644
--- a/templates/repo/pulls/status.tmpl
+++ b/templates/repo/pulls/status.tmpl
@@ -18,7 +18,7 @@
 	{{end}}
 
 	{{range $.LatestCommitStatuses}}
-		<div class="ui attached segment pr-status">
+		<div class="ui attached segment gt-pr-status">
 			{{template "repo/commit_status" .}}
 			<div class="status-context">
 				<span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index f38106cfdfd40..8c124162af4a3 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -12,7 +12,7 @@
 			{{end}}
 		</h2>
 		{{if .EnableFeed}}
-			<a href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss"><i class="ui grey icon tooltip ml-3" data-content="{{.locale.Tr "rss_feed"}}" data-position="top center">{{svg "octicon-rss" 18}}</i></a>
+			<a href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss"><i class="ui grey icon tooltip gt-ml-3" data-content="{{.locale.Tr "rss_feed"}}" data-position="top center">{{svg "octicon-rss" 18}}</i></a>
 		{{end}}
 		{{if (and .CanCreateRelease (not .PageIsTagList))}}
 			<a class="ui right small green button" href="{{$.RepoLink}}/releases/new">
@@ -23,8 +23,8 @@
 		<div class="ui divider"></div>
 		{{if gt .ReleasesNum 0}}
 		<h4 class="ui top attached header">
-			<div class="five wide column df ac">
-				{{svg "octicon-tag" 16 "mr-2"}}{{.locale.Tr "repo.release.tags"}}
+			<div class="five wide column gt-df gt-ac">
+				{{svg "octicon-tag" 16 "gt-mr-2"}}{{.locale.Tr "repo.release.tags"}}
 			</div>
 		</h4>
 		<div class="ui attached table segment">
@@ -34,26 +34,26 @@
 					{{range $idx, $release := .Releases}}
 						<tr>
 							<td class="tag">
-								<h3 class="release-tag-name mb-3">
-									<a class="df ac" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
+								<h3 class="release-tag-name gt-mb-3">
+									<a class="gt-df gt-ac" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
 								</h3>
-								<div class="download df ac">
+								<div class="download gt-df gt-ac">
 									{{if $.Permission.CanRead $.UnitTypeCode}}
-										<a class="mr-3 mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
+										<a class="gt-mr-3 gt-mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
 										{{if not $.DisableDownloadSourceArchives}}
-											<a class="archive-link mr-3 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-2"}}ZIP</a>
-											<a class="archive-link mr-3 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-2"}}TAR.GZ</a>
+											<a class="archive-link gt-mr-3 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-2"}}ZIP</a>
+											<a class="archive-link gt-mr-3 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-2"}}TAR.GZ</a>
 										{{end}}
 										{{if (and $.CanCreateRelease $release.IsTag)}}
-											<a class="mr-3 muted" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.new_release"}}</a>
+											<a class="gt-mr-3 muted" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag" 16 "gt-mr-2"}}{{$.locale.Tr "repo.release.new_release"}}</a>
 										{{end}}
 										{{if (and ($.Permission.CanWrite $.UnitTypeCode) $release.IsTag)}}
-											<a class="ui delete-button mr-3 muted" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}">
-												{{svg "octicon-trash" 16 "mr-2"}}{{$.locale.Tr "repo.release.delete_tag"}}
+											<a class="ui delete-button gt-mr-3 muted" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}">
+												{{svg "octicon-trash" 16 "gt-mr-2"}}{{$.locale.Tr "repo.release.delete_tag"}}
 											</a>
 										{{end}}
 										{{if (not $release.IsTag)}}
-											<a class="mr-3 muted" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.detail"}}</a>
+											<a class="gt-mr-3 muted" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag" 16 "gt-mr-2"}}{{$.locale.Tr "repo.release.detail"}}</a>
 										{{end}}
 									{{end}}
 								</div>
@@ -68,14 +68,14 @@
 		<ul id="release-list">
 			{{range $idx, $release := .Releases}}
 				<li class="ui grid">
-					<div class="ui four wide column meta mt-2">
+					<div class="ui four wide column meta gt-mt-2">
 						{{if .IsTag}}
 							{{if .CreatedUnix}}<span class="time">{{TimeSinceUnix .CreatedUnix $.locale}}</span>{{end}}
 						{{else}}
-							<a class="df ac je muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a>
+							<a class="gt-df gt-ac gt-je muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "gt-mr-2"}}{{.TagName}}</a>
 							{{if .Sha1}}
 								<span class="commit">
-									<a class="mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
+									<a class="gt-mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
 								</span>
 								{{template "repo/branch_dropdown" dict "root" $ "release" .}}
 							{{end}}
@@ -83,9 +83,9 @@
 					</div>
 					<div class="ui twelve wide column detail">
 						{{if .IsTag}}
-							<div class="df ac sb fw mb-3">
-								<h4 class="release-list-title df ac">
-									<a class="df ac" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{svg "octicon-tag" 24 "mr-3"}}{{.TagName}}</a>
+							<div class="gt-df gt-ac gt-sb gt-fw gt-mb-3">
+								<h4 class="release-list-title gt-df gt-ac">
+									<a class="gt-df gt-ac" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{svg "octicon-tag" 24 "gt-mr-3"}}{{.TagName}}</a>
 								</h4>
 							</div>
 							<p class="text grey">
@@ -106,7 +106,7 @@
 							</p>
 							<div class="download">
 							{{if $.Permission.CanRead $.UnitTypeCode}}
-								<a class="mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
+								<a class="gt-mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
 								{{if not $.DisableDownloadSourceArchives}}
 									<a class="archive-link muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
 									<a class="archive-link muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
@@ -114,20 +114,20 @@
 							{{end}}
 							</div>
 						{{else}}
-							<div class="df ac sb fw mb-3">
-								<h4 class="release-list-title df ac">
+							<div class="gt-df gt-ac gt-sb gt-fw gt-mb-3">
+								<h4 class="release-list-title gt-df gt-ac">
 									<a href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{.Title}}</a>
 									{{if .IsDraft}}
-										<span class="ui yellow label ml-3 mt-1">{{$.locale.Tr "repo.release.draft"}}</span>
+										<span class="ui yellow label gt-ml-3 gt-mt-1">{{$.locale.Tr "repo.release.draft"}}</span>
 									{{else if .IsPrerelease}}
-										<span class="ui orange label ml-3 mt-1">{{$.locale.Tr "repo.release.prerelease"}}</span>
+										<span class="ui orange label gt-ml-3 gt-mt-1">{{$.locale.Tr "repo.release.prerelease"}}</span>
 									{{else if not .IsTag}}
-										<span class="ui green label ml-3 mt-1">{{$.locale.Tr "repo.release.stable"}}</span>
+										<span class="ui green label gt-ml-3 gt-mt-1">{{$.locale.Tr "repo.release.stable"}}</span>
 									{{end}}
 								</h4>
-								<div class="df ac">
+								<div class="gt-df gt-ac">
 									{{if $.CanCreateRelease}}
-										<a class="muted tooltip ml-3 df ac" data-content="{{$.locale.Tr "repo.release.edit"}}" href="{{$.RepoLink}}/releases/edit/{{.TagName | PathEscapeSegments}}" rel="nofollow">
+										<a class="muted tooltip gt-ml-3 gt-df gt-ac" data-content="{{$.locale.Tr "repo.release.edit"}}" href="{{$.RepoLink}}/releases/edit/{{.TagName | PathEscapeSegments}}" rel="nofollow">
 											{{svg "octicon-pencil"}}
 										</a>
 									{{end}}
@@ -136,7 +136,7 @@
 							<p class="text grey">
 								<span class="author">
 								{{if .OriginalAuthor}}
-									{{svg "octicon-mark-github" 16 "mr-2"}}{{.OriginalAuthor}}
+									{{svg "octicon-mark-github" 16 "gt-mr-2"}}{{.OriginalAuthor}}
 								{{else if .Publisher}}
 									{{avatar .Publisher 20}}
 									<a href="{{.Publisher.HomeLink}}">{{.Publisher.GetDisplayName}}</a>
@@ -157,17 +157,17 @@
 							<div class="markup desc">
 								{{Str2html .Note}}
 							</div>
-							<details class="download border-secondary-top mt-4 pt-4" {{if eq $idx 0}}open{{end}}>
-								<summary class="mb-4">
+							<details class="download gt-border-secondary-top gt-mt-4 gt-pt-4" {{if eq $idx 0}}open{{end}}>
+								<summary class="gt-mb-4">
 									{{$.locale.Tr "repo.release.downloads"}}
 								</summary>
 								<ul class="list">
 									{{if and (not $.DisableDownloadSourceArchives) (not .IsDraft) ($.Permission.CanRead $.UnitTypeCode)}}
 										<li>
-											<a class="archive-link" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "mr-2"}}{{$.locale.Tr "repo.release.source_code"}} (ZIP)</strong></a>
+											<a class="archive-link" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "gt-mr-2"}}{{$.locale.Tr "repo.release.source_code"}} (ZIP)</strong></a>
 										</li>
 										<li>
-											<a class="archive-link" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "mr-2"}}{{$.locale.Tr "repo.release.source_code"}} (TAR.GZ)</strong></a>
+											<a class="archive-link" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "gt-mr-2"}}{{$.locale.Tr "repo.release.source_code"}} (TAR.GZ)</strong></a>
 										</li>
 									{{end}}
 									{{if .Attachments}}
@@ -180,7 +180,7 @@
 													</span>
 												</span>
 												<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
-													<strong>{{svg "octicon-package" 16 "mr-2"}}{{.Name}}</strong>
+													<strong>{{svg "octicon-package" 16 "gt-mr-2"}}{{.Name}}</strong>
 												</a>
 											</li>
 										{{end}}
@@ -201,7 +201,7 @@
 {{if (and ($.Permission.CanWrite $.UnitTypeCode) .PageIsTagList)}}
 	<div class="ui small basic delete modal">
 		<div class="ui header">
-			{{svg "octicon-trash" 16 "mr-2"}}
+			{{svg "octicon-trash" 16 "gt-mr-2"}}
 			{{.locale.Tr "repo.release.delete_tag"}}
 		</div>
 		<div class="content">
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index 738b3bd17409c..37d7ca032196e 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -59,15 +59,15 @@
 				</div>
 				{{range .attachments}}
 					<div class="field" id="attachment-{{.ID}}">
-						<div class="ui right df ac wrap_remove">
+						<div class="ui right gt-df gt-ac wrap_remove">
 							<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
 								{{$.locale.Tr "remove"}}
 							</a>
 						</div>
-						<div class="df ac">
-							<input name="attachment-edit-{{.UUID}}" class="mr-3 attachment_edit" required value="{{.Name}}"/>
+						<div class="gt-df gt-ac">
+							<input name="attachment-edit-{{.UUID}}" class="gt-mr-3 attachment_edit" required value="{{.Name}}"/>
 							<input name="attachment-del-{{.UUID}}" type="hidden" value="false"/>
-							<span class="ui text grey mr-3">{{.Size | FileSize}}</span>
+							<span class="ui text grey gt-mr-3">{{.Size | FileSize}}</span>
 							<span class="tooltip" data-content="{{$.locale.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}">
 								{{svg "octicon-info"}}
 							</span>
diff --git a/templates/repo/search.tmpl b/templates/repo/search.tmpl
index e4f1d01a08b34..4122961eff4d7 100644
--- a/templates/repo/search.tmpl
+++ b/templates/repo/search.tmpl
@@ -27,10 +27,10 @@
 				{{.locale.Tr "repo.search.results" (.Keyword|Escape) (.RepoLink|Escape) (.RepoName|Escape) | Str2html}}
 			</h3>
 			{{if .SearchResults}}
-				<div class="df ac fw">
+				<div class="gt-df gt-ac gt-fw">
 					{{range $term := .SearchResultLanguages}}
-					<a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{$.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
-						<i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
+					<a class="ui text-label gt-df gt-ac gt-mr-1 gt-my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{$.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
+						<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i>
 						{{$term.Language}}
 						<div class="detail">{{$term.Count}}</div>
 					</a>
diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl
index f7127fd7934ec..cf3ca0a7d65ca 100644
--- a/templates/repo/settings/branches.tmpl
+++ b/templates/repo/settings/branches.tmpl
@@ -98,7 +98,7 @@
 
 <div class="ui small basic delete modal">
 	<div class="ui header">
-		{{svg "octicon-trash" 16 "mr-2"}}
+		{{svg "octicon-trash" 16 "gt-mr-2"}}
 		{{.locale.Tr "repo.settings.protected_branch_deletion"}}
 	</div>
 	<div class="content">
diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index ff9628d3502bf..b2463733f7658 100644
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -15,7 +15,7 @@
 			</div>
 		</h4>
 		<div class="ui attached segment">
-			<div class="{{if not .HasError}}hide{{end}} mb-4" id="add-deploy-key-panel">
+			<div class="{{if not .HasError}}hide{{end}} gt-mb-4" id="add-deploy-key-panel">
 				<form class="ui form" action="{{.Link}}" method="post">
 					{{.CsrfTokenHtml}}
 					<div class="field">
diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl
index 81d61fcd169eb..a72d5ba290399 100644
--- a/templates/repo/settings/githooks.tmpl
+++ b/templates/repo/settings/githooks.tmpl
@@ -14,9 +14,9 @@
 				</div>
 				{{range .Hooks}}
 					<div class="item truncated-item-container">
-						<span class="text {{if .IsActive}}green{{else}}grey{{end}} mr-3">{{svg "octicon-dot-fill" 22}}</span>
-						<span class="text truncate f1 mr-3">{{.Name}}</span>
-						<a class="muted ui right p-3" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
+						<span class="text {{if .IsActive}}green{{else}}grey{{end}} gt-mr-3">{{svg "octicon-dot-fill" 22}}</span>
+						<span class="text truncate gt-f1 gt-mr-3">{{.Name}}</span>
+						<a class="muted ui right gt-p-3" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
 							{{svg "octicon-pencil"}}
 						</a>
 					</div>
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index cc298ddd849f6..53bee569e460a 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -126,10 +126,10 @@
 										<p class="help">{{.locale.Tr "repo.mirror_address_desc"}}</p>
 									</div>
 									<details class="ui optional field" {{if or .Err_Auth $address.Username}}open{{end}}>
-										<summary class="p-2">
+										<summary class="gt-p-2">
 											{{.locale.Tr "repo.need_auth"}}
 										</summary>
-										<div class="p-2">
+										<div class="gt-p-2">
 											<div class="inline field {{if .Err_Auth}}error{{end}}">
 												<label for="mirror_username">{{.locale.Tr "username"}}</label>
 												<input id="mirror_username" name="mirror_username" value="{{$address.Username}}" {{if not .mirror_username}}data-need-clear="true"{{end}}>
@@ -205,10 +205,10 @@
 											<p class="help">{{.locale.Tr "repo.mirror_address_desc"}}</p>
 										</div>
 										<details class="ui optional field" {{if or .Err_PushMirrorAuth .push_mirror_username}}open{{end}}>
-											<summary class="p-2">
+											<summary class="gt-p-2">
 												{{.locale.Tr "repo.need_auth"}}
 											</summary>
-											<div class="p-2">
+											<div class="gt-p-2">
 												<div class="inline field {{if .Err_PushMirrorAuth}}error{{end}}">
 													<label for="push_mirror_username">{{.locale.Tr "username"}}</label>
 													<input id="push_mirror_username" name="push_mirror_username" value="{{.push_mirror_username}}">
diff --git a/templates/repo/settings/tags.tmpl b/templates/repo/settings/tags.tmpl
index 1b2d6f7c88b78..8d36354a16e42 100644
--- a/templates/repo/settings/tags.tmpl
+++ b/templates/repo/settings/tags.tmpl
@@ -111,7 +111,7 @@
 										</td>
 										<td class="right aligned">
 											<a class="ui tiny primary button" href="{{$.RepoLink}}/settings/tags/{{.ID}}">{{$.locale.Tr "edit"}}</a>
-											<form class="dib" action="{{$.RepoLink}}/settings/tags/delete" method="post">
+											<form class="gt-dib" action="{{$.RepoLink}}/settings/tags/delete" method="post">
 												{{$.CsrfTokenHtml}}
 												<input type="hidden" name="id" value="{{.ID}}" />
 												<button class="ui tiny red button">{{$.locale.Tr "remove"}}</button>
diff --git a/templates/repo/settings/webhook/base_list.tmpl b/templates/repo/settings/webhook/base_list.tmpl
index d082f0b008501..61c57995134c1 100644
--- a/templates/repo/settings/webhook/base_list.tmpl
+++ b/templates/repo/settings/webhook/base_list.tmpl
@@ -48,10 +48,10 @@
 		</div>
 		{{range .Webhooks}}
 			<div class="item truncated-item-container">
-				<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}} mr-3">{{svg "octicon-dot-fill" 22}}</span>
-				<a class="text truncate f1 mr-3" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
-				<a class="muted p-3" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a></span>
-				<a class="delete-button p-3" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a>
+				<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}} gt-mr-3">{{svg "octicon-dot-fill" 22}}</span>
+				<a class="text truncate gt-f1 gt-mr-3" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
+				<a class="muted gt-p-3" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a></span>
+				<a class="delete-button gt-p-3" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a>
 			</div>
 		{{end}}
 	</div>
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index e74823e36dea8..54423079616d8 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -1,5 +1,5 @@
 {{if and (not .HideRepoInfo) (not .IsBlame)}}
-<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}} repository-summary-language-stats{{end}} mt-2 mb-0">
+<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}} repository-summary-language-stats{{end}} gt-mt-2 gt-mb-0">
 	<div class="ui segment sub-menu repository-menu">
 		<div class="ui two horizontal center link list">
 			{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}
@@ -24,9 +24,9 @@
 	<div class="ui segment sub-menu language-stats-details" style="display: none">
 		<div class="ui horizontal center link list">
 			{{range .LanguageStats}}
-			<div class="item df ac jc">
-				<i class="color-icon mr-3" style="background-color: {{.Color}}"></i>
-				<span class="bold mr-3">
+			<div class="item gt-df gt-ac gt-jc">
+				<i class="color-icon gt-mr-3" style="background-color: {{.Color}}"></i>
+				<span class="gt-bold gt-mr-3">
 					{{if eq .Language "other"}}
 						{{$.locale.Tr "repo.language_other"}}
 					{{else}}
diff --git a/templates/repo/unicode_escape_prompt.tmpl b/templates/repo/unicode_escape_prompt.tmpl
index ab3452efa4bbc..d55bd0150a1b6 100644
--- a/templates/repo/unicode_escape_prompt.tmpl
+++ b/templates/repo/unicode_escape_prompt.tmpl
@@ -1,6 +1,6 @@
 {{if .EscapeStatus}}
 	{{if .EscapeStatus.HasInvisible}}
-		<div class="ui error message unicode-escape-prompt tl">
+		<div class="ui error message unicode-escape-prompt gt-tl">
 			<span class="close icon hide-panel button" data-panel-closest=".message">{{svg "octicon-x" 16 "close inside"}}</span>
 			<div class="header">
 				{{$.root.locale.Tr "repo.invisible_runes_header"}}
@@ -11,7 +11,7 @@
 			{{end}}
 		</div>
 	{{else if .EscapeStatus.HasAmbiguous}}
-		<div class="ui warning message unicode-escape-prompt tl">
+		<div class="ui warning message unicode-escape-prompt gt-tl">
 			<span class="close icon hide-panel button" data-panel-closest=".message">{{svg "octicon-x" 16 "close inside"}}</span>
 			<div class="header">
 				{{$.root.locale.Tr "repo.ambiguous_runes_header"}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index e92aeb0702bf5..5c2c953a5b8d3 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -6,16 +6,16 @@
 			</div>
 		</div>
 	{{end}}
-	<h4 class="file-header ui top attached header df ac sb fw">
-		<div class="file-header-left df ac py-3 pr-4">
+	<h4 class="file-header ui top attached header gt-df gt-ac gt-sb gt-fw">
+		<div class="file-header-left gt-df gt-ac gt-py-3 gt-pr-4">
 			{{if .ReadmeInList}}
-				{{svg "octicon-book" 16 "mr-3"}}
+				{{svg "octicon-book" 16 "gt-mr-3"}}
 				<strong>{{.FileName}}</strong>
 			{{else}}
 				{{template "repo/file_info" .}}
 			{{end}}
 		</div>
-		<div class="file-header-right file-actions df ac fw">
+		<div class="file-header-right file-actions gt-df gt-ac gt-fw">
 			{{if .HasSourceRenderedToggle}}
 				<div class="ui compact icon buttons two-toggle-buttons">
 					<a href="{{$.Link}}?display=source" class="ui mini basic button tooltip {{if .IsDisplayingSource}}active{{end}}" data-content="{{.locale.Tr "repo.file_view_source"}}" data-position="bottom center">{{svg "octicon-code" 15}}</a>
@@ -23,7 +23,7 @@
 				</div>
 			{{end}}
 			{{if not .ReadmeInList}}
-				<div class="ui buttons mr-2">
+				<div class="ui buttons gt-mr-2">
 					<a class="ui mini basic button" href="{{$.RawFileLink}}">{{.locale.Tr "repo.file_raw"}}</a>
 					{{if not .IsViewCommit}}
 						<a class="ui mini basic button" href="{{.RepoLink}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.file_permalink"}}</a>
@@ -52,8 +52,8 @@
 					{{end}}
 				{{end}}
 			{{else if .EscapeStatus.Escaped}}
-				<a class="ui mini basic button unescape-button mr-2" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a>
-				<a class="ui mini basic button escape-button mr-2">{{.locale.Tr "repo.escape_control_characters"}}</a>
+				<a class="ui mini basic button unescape-button gt-mr-2" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a>
+				<a class="ui mini basic button escape-button gt-mr-2">{{.locale.Tr "repo.escape_control_characters"}}</a>
 			{{end}}
 		</div>
 	</h4>
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index b923a9e6c08b2..b8c534da4950e 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -1,4 +1,4 @@
-<table id="repo-files-table" class="ui single line table mt-0" data-last-commit-loader-url="{{.LastCommitLoaderURL}}">
+<table id="repo-files-table" class="ui single line table gt-mt-0" data-last-commit-loader-url="{{.LastCommitLoaderURL}}">
 	<thead>
 		<tr class="commit-list">
 			<th colspan="2" {{if not .LatestCommit}}class="notready"{{end}}>
diff --git a/templates/repo/wiki/pages.tmpl b/templates/repo/wiki/pages.tmpl
index ea5b9709c47a9..9d3a3e8061f28 100644
--- a/templates/repo/wiki/pages.tmpl
+++ b/templates/repo/wiki/pages.tmpl
@@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository wiki pages">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<h2 class="ui header df ac sb">
+		<h2 class="ui header gt-df gt-ac gt-sb">
 			<div>
 				{{.locale.Tr "repo.wiki.pages"}}
 			</div>
diff --git a/templates/repo/wiki/revision.tmpl b/templates/repo/wiki/revision.tmpl
index c5256ab5347f5..4e66be2f34fd9 100644
--- a/templates/repo/wiki/revision.tmpl
+++ b/templates/repo/wiki/revision.tmpl
@@ -4,7 +4,7 @@
 	{{$title := .title}}
 	<div class="ui container">
 		<div class="ui stackable grid">
-			<div class="ui eight wide column text right df ac je">
+			<div class="ui eight wide column text right gt-df gt-ac gt-je">
 				<div class="ui action small input" id="clone-panel">
 					{{template "repo/clone_buttons" .}}
 					{{template "repo/clone_script" .}}
@@ -13,7 +13,7 @@
 			<div class="ui header eight wide column">
 				<a class="file-revisions-btn ui basic button" title="{{.locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}" ><span>{{.revision}}</span> {{svg "octicon-home"}}</a>
 				{{$title}}
-				<div class="ui sub header word-break">
+				<div class="ui sub header gt-word-break">
 					{{$timeSince := TimeSince .Author.When $.locale}}
 					{{.locale.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince | Safe}}
 				</div>
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index b5e65dffcf272..e56c66fa4a250 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -3,8 +3,8 @@
 	{{template "repo/header" .}}
 	{{$title := .title}}
 	<div class="ui container">
-		<div class="repo-button-row df ac sb fw">
-			<div class="df ac">
+		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
+			<div class="gt-df gt-ac">
 				<div class="choose page">
 					<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
 						<div class="ui basic small button">
@@ -16,7 +16,7 @@
 						</div>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+								<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
 								<input name="search" placeholder="{{.locale.Tr "repo.wiki.filter_page"}}...">
 							</div>
 							<div class="scrolling menu">
@@ -28,7 +28,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="df ac">
+			<div class="gt-df gt-ac">
 				<div class="ui action small input" id="clone-panel">
 					{{template "repo/clone_buttons" .}}
 					{{template "repo/clone_script" .}}
diff --git a/templates/shared/actions/runner_edit.tmpl b/templates/shared/actions/runner_edit.tmpl
index 5cb65eb0e47b1..8ef8387baa2b6 100644
--- a/templates/shared/actions/runner_edit.tmpl
+++ b/templates/shared/actions/runner_edit.tmpl
@@ -8,15 +8,15 @@
 			{{template "base/disable_form_autofill"}}
 			{{.CsrfTokenHtml}}
 			<div class="runner-basic-info">
-				<div class="field dib disabled">
+				<div class="field gt-dib gt-mr-4 disabled">
 					<label>{{.locale.Tr "actions.runners.status"}}</label>
 					<span class="runner-status-{{if .Runner.IsOnline}}online{{else}}offline{{end}}">{{.Runner.StatusLocaleName $.locale}}</span>
 				</div>
-				<div class="field dib disabled">
+				<div class="field gt-dib gt-mr-4 disabled">
 					<label>{{.locale.Tr "actions.runners.last_online"}}</label>
 					<span>{{TimeSinceUnix .Runner.LastOnline $.locale}}</span>
 				</div>
-				<div class="field dib disabled">
+				<div class="field gt-dib gt-mr-4 disabled">
 					<label>{{.locale.Tr "actions.runners.agent_labels"}}</label>
 					<span>
 						{{range .Runner.AgentLabels}}
@@ -24,7 +24,7 @@
 						{{end}}
 					</span>
 				</div>
-				<div class="field dib disabled">
+				<div class="field gt-dib gt-mr-4 disabled">
 					<label>{{.locale.Tr "actions.runners.owner_type"}}</label>
 					<span>{{.Runner.OwnType}}</span>
 				</div>
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 9e3f6054565b8..b1210509302f9 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -1,8 +1,8 @@
 <div class="issue list">
 	{{$approvalCounts := .ApprovalCounts}}
 	{{range .Issues}}
-		<li class="item df py-3">
-			<div class="issue-item-left df">
+		<li class="item gt-df gt-py-3">
+			<div class="issue-item-left gt-df">
 				{{if $.CanWriteIssuesOrPulls}}
 					<div class="ui checkbox issue-checkbox">
 						<input type="checkbox" data-issue-id={{.ID}} title="{{$.locale.Tr "repo.issues.action_check"}} «{{.Title}}»">
@@ -32,22 +32,22 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="issue-item-main f1 fc df">
+			<div class="issue-item-main gt-f1 gt-fc gt-df">
 				<div class="issue-item-top-row">
-					<a class="title tdn issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji .Title | RenderCodeBlock}}</a>
+					<a class="title gt-tdn issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji .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" $}}
 						{{end}}
 					{{end}}
-					<span class="labels-list ml-2">
+					<span class="labels-list gt-ml-2">
 						{{range .Labels}}
 							<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
 						{{end}}
 					</span>
 				</div>
-				<div class="desc issue-item-bottom-row df ac fw my-1">
-					<a class="index ml-0 mr-2" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+				<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1">
+					<a class="index gt-ml-0 gt-mr-2" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{if eq $.listType "dashboard"}}
 							{{.Repo.FullName}}#{{.Index}}
 						{{else}}
@@ -63,14 +63,14 @@
 						{{$.locale.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
 					{{end}}
 					{{if .IsPull}}
-						<div class="branches df ac">
+						<div class="branches gt-df gt-ac">
 							<div class="branch">
 								<a href="{{.PullRequest.BaseRepo.Link}}/src/branch/{{PathEscapeSegments .PullRequest.BaseBranch}}">
 									{{/* inline to remove the spaces between spans */}}
 									{{if ne .RepoID .PullRequest.BaseRepoID}}<span class="truncated-name">{{.PullRequest.BaseRepo.OwnerName}}</span>:{{end}}<span class="truncated-name">{{.PullRequest.BaseBranch}}</span>
 								</a>
 							</div>
-							{{svg "gitea-double-chevron-left" 12 "mx-1"}}
+							{{svg "gitea-double-chevron-left" 12 "gt-mx-1"}}
 							{{if .PullRequest.HeadRepo}}
 							<div class="branch">
 								<a href="{{.PullRequest.HeadRepo.Link}}/src/branch/{{PathEscapeSegments .PullRequest.HeadBranch}}">
@@ -83,31 +83,31 @@
 					{{end}}
 					{{if and .Milestone (ne $.listType "milestone")}}
 						<a class="milestone" {{if $.RepoLink}}href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}"{{else}}href="{{.Repo.Link}}/milestone/{{.Milestone.ID}}"{{end}}>
-							{{svg "octicon-milestone" 14 "mr-2"}}{{.Milestone.Name}}
+							{{svg "octicon-milestone" 14 "gt-mr-2"}}{{.Milestone.Name}}
 						</a>
 					{{end}}
 					{{if .Project}}
 						<a class="project" {{if $.RepoLink}}href="{{$.RepoLink}}/projects/{{.Project.ID}}"{{else}}href="{{.Repo.Link}}/projects/{{.Project.ID}}"{{end}}>
-							{{svg "octicon-project" 14 "mr-2"}}{{.Project.Title}}
+							{{svg "octicon-project" 14 "gt-mr-2"}}{{.Project.Title}}
 						</a>
 					{{end}}
 					{{if .Ref}}
 						<a class="ref" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}>
-							{{svg "octicon-git-branch" 14 "mr-2"}}{{index $.IssueRefEndNames .ID}}
+							{{svg "octicon-git-branch" 14 "gt-mr-2"}}{{index $.IssueRefEndNames .ID}}
 						</a>
 					{{end}}
 					{{$tasks := .GetTasks}}
 					{{if gt $tasks 0}}
 						{{$tasksDone := .GetTasksDone}}
 						<span class="checklist">
-							{{svg "octicon-checklist" 14 "mr-2"}}{{$tasksDone}} / {{$tasks}}
+							{{svg "octicon-checklist" 14 "gt-mr-2"}}{{$tasksDone}} / {{$tasks}}
 							<progress value="{{$tasksDone}}" max="{{$tasks}}"></progress>
 						</span>
 					{{end}}
 					{{if ne .DeadlineUnix 0}}
 						<span class="due-date tooltip" data-content="{{$.locale.Tr "repo.issues.due_date"}}" data-position="right center">
 							<span{{if .IsOverdue}} class="overdue"{{end}}>
-								{{svg "octicon-calendar" 14 "mr-2"}}
+								{{svg "octicon-calendar" 14 "gt-mr-2"}}
 								<time data-format="short-date" datetime="{{.DeadlineUnix.FormatLong}}">{{.DeadlineUnix.FormatShort}}</time>
 							</span>
 						</span>
@@ -117,25 +117,25 @@
 						{{$rejectOfficial := call $approvalCounts .ID "reject"}}
 						{{$waitingOfficial := call $approvalCounts .ID "waiting"}}
 						{{if gt $approveOfficial 0}}
-							<span class="approvals df ac green">
-								{{svg "octicon-check" 14 "mr-1"}}
+							<span class="approvals gt-df gt-ac green">
+								{{svg "octicon-check" 14 "gt-mr-1"}}
 								{{$.locale.TrN $approveOfficial "repo.pulls.approve_count_1" "repo.pulls.approve_count_n" $approveOfficial}}
 							</span>
 						{{end}}
 						{{if gt $rejectOfficial 0}}
-							<span class="rejects df ac red">
-								{{svg "octicon-diff" 14 "mr-2"}}
+							<span class="rejects gt-df gt-ac red">
+								{{svg "octicon-diff" 14 "gt-mr-2"}}
 								{{$.locale.TrN $rejectOfficial "repo.pulls.reject_count_1" "repo.pulls.reject_count_n" $rejectOfficial}}
 							</span>
 						{{end}}
 						{{if gt $waitingOfficial 0}}
-							<span class="waiting df ac">
-								{{svg "octicon-eye" 14 "mr-2"}}
+							<span class="waiting gt-df gt-ac">
+								{{svg "octicon-eye" 14 "gt-mr-2"}}
 								{{$.locale.TrN $waitingOfficial "repo.pulls.waiting_count_1" "repo.pulls.waiting_count_n" $waitingOfficial}}
 							</span>
 						{{end}}
 						{{if and (not .PullRequest.HasMerged) (gt (len .PullRequest.ConflictedFiles) 0)}}
-							<span class="conflicting df ac">
+							<span class="conflicting gt-df gt-ac">
 								{{svg "octicon-x" 14}}
 								{{$.locale.TrN (len .PullRequest.ConflictedFiles) "repo.pulls.num_conflicting_files_1" "repo.pulls.num_conflicting_files_n" (len .PullRequest.ConflictedFiles)}}
 							</span>
@@ -143,24 +143,24 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="issue-item-icons-right df p-2">
+			<div class="issue-item-icons-right gt-df gt-p-2">
 				<div class="issue-item-icon-right text grey">
 					{{if .TotalTrackedTime}}
-						{{svg "octicon-clock" 16 "mr-2"}}
+						{{svg "octicon-clock" 16 "gt-mr-2"}}
 						{{.TotalTrackedTime | Sec2Time}}
 					{{end}}
 				</div>
 				<div class="issue-item-icon-right text grey">
 					{{range .Assignees}}
-						<a class="ui assignee tooltip tdn" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-position="left center">
+						<a class="ui assignee tooltip gt-tdn" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-position="left center">
 							{{avatar .}}
 						</a>
 					{{end}}
 				</div>
 				<div class="issue-item-icon-right text grey">
 					{{if .NumComments}}
-						<a class="tdn muted" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
-							{{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}}
+						<a class="gt-tdn muted" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+							{{svg "octicon-comment" 16 "gt-mr-2"}}{{.NumComments}}
 						</a>
 					{{end}}
 				</div>
diff --git a/templates/shared/searchbottom.tmpl b/templates/shared/searchbottom.tmpl
index 9a008cc31ed83..cce82721cd094 100644
--- a/templates/shared/searchbottom.tmpl
+++ b/templates/shared/searchbottom.tmpl
@@ -1,10 +1,10 @@
-<div class="ui bottom attached table segment df ac sb">
-		<div class="df ac ml-4">
+<div class="ui bottom attached table segment gt-df gt-ac gt-sb">
+		<div class="gt-df gt-ac gt-ml-4">
 			{{if .result.Language}}
-					<i class="color-icon mr-3" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
+					<i class="color-icon gt-mr-3" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
 			{{end}}
 		</div>
-		<div class="mr-4">
+		<div class="gt-mr-4">
 			{{if not .result.UpdatedUnix.IsZero}}
 					<span class="ui grey text">{{.root.locale.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.locale) | Safe}}</span>
 			{{end}}
diff --git a/templates/shared/secrets/add_list.tmpl b/templates/shared/secrets/add_list.tmpl
index 94bc8a1695bf1..27d415be81836 100644
--- a/templates/shared/secrets/add_list.tmpl
+++ b/templates/shared/secrets/add_list.tmpl
@@ -5,7 +5,7 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasError}}hide {{end}}mb-4" id="add-secret-panel">
+	<div class="{{if not .HasError}}hide {{end}}gt-mb-4" id="add-secret-panel">
 		<form class="ui form" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="field">
@@ -58,7 +58,7 @@
 </div>
 <div class="ui small basic delete modal">
 	<div class="ui header">
-		{{svg "octicon-trash" 16 "mr-2"}}
+		{{svg "octicon-trash" 16 "gt-mr-2"}}
 		{{.locale.Tr "secrets.deletion"}}
 	</div>
 	<div class="content">
diff --git a/templates/shared/user/authorlink.tmpl b/templates/shared/user/authorlink.tmpl
index 4a6672181f43b..4e45fdfd0f2f0 100644
--- a/templates/shared/user/authorlink.tmpl
+++ b/templates/shared/user/authorlink.tmpl
@@ -1 +1 @@
-<a class="author text black bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
+<a class="author text black gt-bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl
index fcef783f68212..c561e0ad8e65e 100644
--- a/templates/status/404.tmpl
+++ b/templates/status/404.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content ui container center full-screen-width {{if .IsRepo}}repository{{end}}">
+<div role="main" aria-label="{{.Title}}" class="page-content ui container center gt-full-screen-width {{if .IsRepo}}repository{{end}}">
 	{{if .IsRepo}}{{template "repo/header" .}}{{end}}
 	<div class="ui container center">
 		<p style="margin-top: 100px"><img src="{{AssetUrlPrefix}}/img/404.png" alt="404"/></p>
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index 89dfeac3f2c6f..8c4f27834ada8 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content ui container full-screen-width center">
+<div role="main" aria-label="{{.Title}}" class="page-content ui container gt-full-screen-width center">
 	<p style="margin-top: 100px"><img src="{{AssetUrlPrefix}}/img/500.png" alt="500"/></p>
 	<div class="ui divider"></div>
 	<br>
diff --git a/templates/user/auth/captcha.tmpl b/templates/user/auth/captcha.tmpl
index a794c8f543ea8..62a3779e55285 100644
--- a/templates/user/auth/captcha.tmpl
+++ b/templates/user/auth/captcha.tmpl
@@ -16,13 +16,13 @@
 		<div id="captcha" data-captcha-type="h-captcha" class="h-captcha-style" data-sitekey="{{.HcaptchaSitekey}}"></div>
 	</div>
 {{else if eq .CaptchaType "mcaptcha"}}
-	<div class="inline field df ac db-small captcha-field">
+	<div class="inline field gt-df gt-ac gt-db-small captcha-field">
 		<span>{{.locale.Tr "captcha"}}</span>
-		<div class="border-secondary w-100-small" id="mcaptcha__widget-container" style="width: 50%; height: 5em"></div>
+		<div class="gt-border-secondary gt-w-100-small" id="mcaptcha__widget-container" style="width: 50%; height: 5em"></div>
 		<div id="captcha" data-captcha-type="m-captcha" class="m-captcha" data-sitekey="{{.McaptchaSitekey}}" data-instance-url="{{.McaptchaURL}}"></div>
 	</div>
 {{else if eq .CaptchaType "cfturnstile"}}
-	<div class="inline field captcha-field tc">
+	<div class="inline field captcha-field gt-tc">
 		<div id="captcha" data-captcha-type="cf-turnstile" data-sitekey="{{.CfTurnstileSitekey}}"></div>
 	</div>
 {{end}}{{end}}
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index 94bbbc470aa3b..3bf9b5fcb7a2e 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -88,8 +88,8 @@
 								{{range $push.Commits}}
 									{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
 									<li>
-										{{avatarHTML ($push.AvatarLink .AuthorEmail) 16 "mr-2" .AuthorName}}
-										<a class="commit-id mr-2" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
+										{{avatarHTML ($push.AvatarLink .AuthorEmail) 16 "gt-mr-2" .AuthorName}}
+										<a class="commit-id gt-mr-2" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
 										<span class="text truncate light grey">
 											{{RenderCommitMessage $.Context .Message $repoLink $.ComposeMetas}}
 										</span>
diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index ab7a403fa3a31..5ecae3a7b9f3f 100644
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@@ -60,11 +60,11 @@
 					<div class="column">
 						<div class="ui compact tiny menu">
 							<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
-								{{svg "octicon-issue-opened" 16 "mr-3"}}
+								{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 								{{JsPrettyNumber .IssueStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
 							</a>
 							<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
-								{{svg "octicon-issue-closed" 16 "mr-3"}}
+								{{svg "octicon-issue-closed" 16 "gt-mr-3"}}
 								{{JsPrettyNumber .IssueStats.ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
 							</a>
 						</div>
@@ -81,7 +81,7 @@
 							</div>
 						</form>
 					</div>
-					<div class="column right aligned df ac je">
+					<div class="column right aligned gt-df gt-ac gt-je">
 						<!-- Sort -->
 						<div class="ui dropdown type jump item">
 							<span class="text">
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index 907dd6f0ee9c1..5c65512907a85 100644
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@@ -38,11 +38,11 @@
 					<div class="column">
 						<div class="ui compact tiny menu">
 							<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
-								{{svg "octicon-milestone" 16 "mr-3"}}
+								{{svg "octicon-milestone" 16 "gt-mr-3"}}
 								{{JsPrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
 							</a>
 							<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
-								{{svg "octicon-check" 16 "mr-3"}}
+								{{svg "octicon-check" 16 "gt-mr-3"}}
 								{{JsPrettyNumber .MilestoneStats.ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
 							</a>
 						</div>
@@ -59,7 +59,7 @@
 							</div>
 						</form>
 					</div>
-					<div class="column right aligned df ac je">
+					<div class="column right aligned gt-df gt-ac gt-je">
 						<!-- Sort -->
 						<div class="ui dropdown type jump item">
 							<span class="text">
@@ -80,13 +80,13 @@
 				<div class="milestone list">
 					{{range .Milestones}}
 						<li class="item">
-							<div class="df ac sb">
-								<h3 class="df ac m-0 fw">
+							<div class="gt-df gt-ac gt-sb">
+								<h3 class="gt-df gt-ac gt-m-0 gt-fw">
 									<span class="ui large label">{{.Repo.FullName}}</span>
-									{{svg "octicon-milestone" 16 "mr-3"}}<a class="muted" href="{{.Repo.Link}}/milestone/{{.ID}}">{{.Name}}</a>
+									{{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{.Repo.Link}}/milestone/{{.ID}}">{{.Name}}</a>
 								</h3>
-								<div class="df ac">
-									<span class="mr-3">{{.Completeness}}%</span>
+								<div class="gt-df gt-ac">
+									<span class="gt-mr-3">{{.Completeness}}%</span>
 									<progress value="{{.Completeness}}" max="100"></progress>
 								</div>
 							</div>
@@ -103,9 +103,9 @@
 									{{end}}
 								{{end}}
 								<span class="issue-stats">
-									{{svg "octicon-issue-opened" 16 "mr-3"}}
+									{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 									{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-									{{svg "octicon-check" 16 "mr-3"}}
+									{{svg "octicon-check" 16 "gt-mr-3"}}
 									{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
 									{{if .TotalTrackedTime}}
 										{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index 8fb5763f3a5ed..22af578fc39c5 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -29,10 +29,10 @@
 			<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{.locale.Tr "organization"}}</a>
 		</div>
 		<div v-show="tab === 'repos'" class="ui tab active list dashboard-repos">
-			<h4 class="ui top attached header df ac">
-				<div class="f1 df ac">
+			<h4 class="ui top attached header gt-df gt-ac">
+				<div class="gt-f1 gt-df gt-ac">
 					{{.locale.Tr "home.my_repos"}}
-					<span class="ui grey label ml-3">${reposTotalCount}</span>
+					<span class="ui grey label gt-ml-3">${reposTotalCount}</span>
 				</div>
 				<a class="tooltip" :href="subUrl + '/repo/create'" data-content="{{.locale.Tr "new_repo"}}" data-position="left center">
 					{{svg "octicon-plus"}}
@@ -42,30 +42,30 @@
 			<div class="ui attached segment repos-search">
 				<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
 					<input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.locale.Tr "home.search_repos"}}">
-					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+					<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 					<div class="ui dropdown icon button" title="{{.locale.Tr "home.filter"}}">
-						<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+						<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
 						<div class="menu">
 							<div class="item">
 								<a @click="toggleArchivedFilter()">
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
 										<input type="checkbox">
 										<label>
-											{{svg "octicon-archive" 16 "mr-2"}}
+											{{svg "octicon-archive" 16 "gt-mr-2"}}
 											{{.locale.Tr "home.show_archived"}}
 										</label>
 									</div>
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'">
 										<input type="checkbox">
 										<label>
-											{{svg "octicon-archive" 16 "mr-2"}}
+											{{svg "octicon-archive" 16 "gt-mr-2"}}
 											{{.locale.Tr "home.show_archived"}}
 										</label>
 									</div>
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
 										<input type="checkbox">
 										<label>
-											{{svg "octicon-archive" 16 "mr-2"}}
+											{{svg "octicon-archive" 16 "gt-mr-2"}}
 											{{.locale.Tr "home.show_archived"}}
 										</label>
 									</div>
@@ -76,21 +76,21 @@
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
 										<input type="checkbox">
 										<label>
-											{{svg "octicon-lock" 16 "mr-2"}}
+											{{svg "octicon-lock" 16 "gt-mr-2"}}
 											{{.locale.Tr "home.show_private"}}
 										</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
 										<input type="checkbox">
 										<label>
-											{{svg "octicon-lock" 16 "mr-2"}}
+											{{svg "octicon-lock" 16 "gt-mr-2"}}
 											{{.locale.Tr "home.show_private"}}
 										</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
 										<input type="checkbox">
 											<label>
-												{{svg "octicon-lock" 16 "mr-2"}}
+												{{svg "octicon-lock" 16 "gt-mr-2"}}
 												{{.locale.Tr "home.show_private"}}
 											</label>
 									</div>
@@ -124,71 +124,71 @@
 					</a>
 				</div>
 			</div>
-			<div v-if="repos.length" class="ui attached table segment rounded-bottom">
+			<div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
 				<ul class="repo-owner-name-list">
 					<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
-						<a class="repo-list-link df ac sb" :href="repo.link">
-							<div class="item-name df ac f1 mr-2">
-								<component v-bind:is="repoIcon(repo)" size="16" class="mr-2"></component>
-								<div class="text bold truncate ml-1">${repo.full_name}</div>
+						<a class="repo-list-link gt-df gt-ac gt-sb" :href="repo.link">
+							<div class="item-name gt-df gt-ac gt-f1 gt-mr-2">
+								<component v-bind:is="repoIcon(repo)" size="16" class="gt-mr-2"></component>
+								<div class="text gt-bold truncate gt-ml-1">${repo.full_name}</div>
 								<span v-if="repo.archived">
-									{{svg "octicon-archive" 16 "ml-2"}}
+									{{svg "octicon-archive" 16 "gt-ml-2"}}
 								</span>
 							</div>
 							{{if not .DisableStars}}
-								<div class="text light grey df ac">
+								<div class="text light grey gt-df gt-ac">
 									${repo.stars_count}
-									{{svg "octicon-star" 16 "ml-2"}}
+									{{svg "octicon-star" 16 "gt-ml-2"}}
 								</div>
 							{{end}}
 						</a>
 					</li>
 				</ul>
-				<div v-if="showMoreReposLink" class="center py-3 border-secondary-top">
+				<div v-if="showMoreReposLink" class="center gt-py-3 gt-border-secondary-top">
 					<div class="ui borderless pagination menu narrow">
-						<a class="item navigation py-2" :class="{'disabled': page === 1}"
+						<a class="item navigation gt-py-2" :class="{'disabled': page === 1}"
 							@click="changePage(1)" title="{{$.locale.Tr "admin.first_page"}}">
-							{{svg "gitea-double-chevron-left" 16 "mr-2"}}
+							{{svg "gitea-double-chevron-left" 16 "gt-mr-2"}}
 						</a>
-						<a class="item navigation py-2" :class="{'disabled': page === 1}"
+						<a class="item navigation gt-py-2" :class="{'disabled': page === 1}"
 							@click="changePage(page - 1)" title="{{$.locale.Tr "repo.issues.previous"}}">
-							{{svg "octicon-chevron-left" 16 "mr-2"}}
+							{{svg "octicon-chevron-left" 16 "gt-mr-2"}}
 						</a>
-						<a class="active item py-2">${page}</a>
+						<a class="active item gt-py-2">${page}</a>
 						<a class="item navigation" :class="{'disabled': page === finalPage}"
 							@click="changePage(page + 1)" title="{{$.locale.Tr "repo.issues.next"}}">
-							{{svg "octicon-chevron-right" 16 "ml-2"}}
+							{{svg "octicon-chevron-right" 16 "gt-ml-2"}}
 						</a>
-						<a class="item navigation py-2" :class="{'disabled': page === finalPage}"
+						<a class="item navigation gt-py-2" :class="{'disabled': page === finalPage}"
 							@click="changePage(finalPage)" title="{{$.locale.Tr "admin.last_page"}}">
-							{{svg "gitea-double-chevron-right" 16 "ml-2"}}
+							{{svg "gitea-double-chevron-right" 16 "gt-ml-2"}}
 						</a>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs">
-			<h4 class="ui top attached header df ac">
-				<div class="f1 df ac">
+			<h4 class="ui top attached header gt-df gt-ac">
+				<div class="gt-f1 gt-df gt-ac">
 					{{.locale.Tr "home.my_orgs"}}
-					<span class="ui grey label ml-3">${organizationsTotalCount}</span>
+					<span class="ui grey label gt-ml-3">${organizationsTotalCount}</span>
 				</div>
 				<a v-if="canCreateOrganization" class="tooltip" :href="subUrl + '/org/create'" data-content="{{.locale.Tr "new_org"}}" data-position="left center">
 					{{svg "octicon-plus"}}
 					<span class="sr-only">{{.locale.Tr "new_org"}}</span>
 				</a>
 			</h4>
-			<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
+			<div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom">
 				<ul class="repo-owner-name-list">
 					<li v-for="org in organizations">
-						<a class="repo-list-link df ac sb" :href="subUrl + '/' + encodeURIComponent(org.name)">
-							<div class="text truncate item-name f1">
-								{{svg "octicon-organization" 16 "mr-2"}}
+						<a class="repo-list-link gt-df gt-ac gt-sb" :href="subUrl + '/' + encodeURIComponent(org.name)">
+							<div class="text truncate item-name gt-f1">
+								{{svg "octicon-organization" 16 "gt-mr-2"}}
 								<strong>${org.name}</strong>
 							</div>
-							<div class="text light grey df ac">
+							<div class="text light grey gt-df gt-ac">
 								${org.num_repos}
-								{{svg "octicon-repo" 16 "ml-2 mt-1"}}
+								{{svg "octicon-repo" 16 "gt-ml-2 gt-mt-1"}}
 							</div>
 						</a>
 					</li>
diff --git a/templates/user/notification/notification_subscriptions.tmpl b/templates/user/notification/notification_subscriptions.tmpl
index 2083902c5af74..5aff7ef9d6d71 100644
--- a/templates/user/notification/notification_subscriptions.tmpl
+++ b/templates/user/notification/notification_subscriptions.tmpl
@@ -18,11 +18,11 @@
 								{{.locale.Tr "all"}}
 							</a>
 							<a class="{{if eq .State "open"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=open&issueType={{$.IssueType}}&labels={{$.Labels}}">
-								{{svg "octicon-issue-opened" 16 "mr-3"}}
+								{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 								{{.locale.Tr "repo.issues.open_title"}}
 							</a>
 							<a class="{{if eq .State "closed"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=closed&issueType={{$.IssueType}}&labels={{$.Labels}}">
-								{{svg "octicon-issue-closed" 16 "mr-3"}}
+								{{svg "octicon-issue-closed" 16 "gt-mr-3"}}
 								{{.locale.Tr "repo.issues.closed_title"}}
 							</a>
 						</div>
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index 512e1187cd0b3..4de1aea562638 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui stackable grid">
 			<div class="ui five wide column">
 				<div class="ui card">
-					<div id="profile-avatar" class="content df"/>
+					<div id="profile-avatar" class="content gt-df"/>
 					{{if eq .SignedUserName .Owner.Name}}
 						<a class="image tooltip" href="{{AppSubUrl}}/user/settings" data-content="{{.locale.Tr "user.change_avatar"}}" data-position="bottom center">
 							{{avatar .Owner 290}}
@@ -15,17 +15,17 @@
 						</span>
 					{{end}}
 					</div>
-					<div class="content word-break profile-avatar-name">
+					<div class="content gt-word-break profile-avatar-name">
 						{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
 						<span class="username text center">{{.Owner.Name}}</span>
 						{{if .EnableFeed}}
-							<a href="{{.Owner.HomeLink}}.rss"><i class="ui grey icon tooltip ml-3" data-content="{{.locale.Tr "rss_feed"}}" data-position="bottom center">{{svg "octicon-rss" 18}}</i></a>
+							<a href="{{.Owner.HomeLink}}.rss"><i class="ui grey icon tooltip gt-ml-3" data-content="{{.locale.Tr "rss_feed"}}" data-position="bottom center">{{svg "octicon-rss" 18}}</i></a>
 						{{end}}
-						<div class="mt-3">
-							<a class="muted" href="{{.Owner.HomeLink}}?tab=followers">{{svg "octicon-person" 18 "mr-2"}}{{.Owner.NumFollowers}} {{.locale.Tr "user.followers"}}</a> · <a class="muted" href="{{.Owner.HomeLink}}?tab=following">{{.Owner.NumFollowing}} {{.locale.Tr "user.following"}}</a>
+						<div class="gt-mt-3">
+							<a class="muted" href="{{.Owner.HomeLink}}?tab=followers">{{svg "octicon-person" 18 "gt-mr-2"}}{{.Owner.NumFollowers}} {{.locale.Tr "user.followers"}}</a> · <a class="muted" href="{{.Owner.HomeLink}}?tab=following">{{.Owner.NumFollowing}} {{.locale.Tr "user.following"}}</a>
 						</div>
 					</div>
-					<div class="extra content word-break">
+					<div class="extra content gt-word-break">
 						<ul>
 							{{if .Owner.Location}}
 								<li>{{svg "octicon-location"}} {{.Owner.Location}}</li>
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 29d76862f54dd..439ed5e1483fd 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -15,7 +15,7 @@
 					<div class="item">
 						<div class="right floated content">
 								<button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
-									{{svg "octicon-trash" 16 "mr-2"}}
+									{{svg "octicon-trash" 16 "gt-mr-2"}}
 									{{$.locale.Tr "settings.delete_token"}}
 								</button>
 						</div>
@@ -42,16 +42,16 @@
 					<input id="name" name="name" value="{{.name}}" autofocus required>
 				</div>
 				<details class="ui optional field">
-					<summary class="p-2">
+					<summary class="gt-p-2">
 						{{.locale.Tr "settings.select_scopes"}}
 					</summary>
-					<div class="field pl-2">
+					<div class="field gt-pl-2">
 						<div class="ui checkbox">
 							<input class="enable-system" type="checkbox" name="scope" value="repo">
 							<label>repo</label>
 						</div>
 					</div>
-					<div class="field pl-4">
+					<div class="field gt-pl-4">
 						<div class="field">
 							<div class="ui checkbox">
 								<input class="enable-system" type="checkbox" name="scope" value="repo:status">
@@ -71,7 +71,7 @@
 							<label>admin:org</label>
 						</div>
 					</div>
-					<div class="field pl-4">
+					<div class="field gt-pl-4">
 						<div class="field">
 							<div class="ui checkbox">
 								<input class="enable-system" type="checkbox" name="scope" value="write:org">
@@ -91,7 +91,7 @@
 							<label>admin:public_key</label>
 						</div>
 					</div>
-					<div class="field pl-4">
+					<div class="field gt-pl-4">
 						<div class="field">
 							<div class="ui checkbox">
 								<input class="enable-system" type="checkbox" name="scope" value="write:public_key">
@@ -111,7 +111,7 @@
 							<label>admin:repo_hook</label>
 						</div>
 					</div>
-					<div class="field pl-4">
+					<div class="field gt-pl-4">
 						<div class="field">
 							<div class="ui checkbox">
 								<input class="enable-system" type="checkbox" name="scope" value="write:repo_hook">
@@ -143,7 +143,7 @@
 							<label>user</label>
 						</div>
 					</div>
-					<div class="field pl-4">
+					<div class="field gt-pl-4">
 						<div class="field">
 							<div class="ui checkbox">
 								<input class="enable-system" type="checkbox" name="scope" value="read:user">
@@ -175,7 +175,7 @@
 							<label>package</label>
 						</div>
 					</div>
-					<div class="field pl-4">
+					<div class="field gt-pl-4">
 						<div class="field">
 							<div class="ui checkbox">
 								<input class="enable-system" type="checkbox" name="scope" value="write:package">
@@ -201,7 +201,7 @@
 							<label>admin:gpg_key</label>
 						</div>
 					</div>
-					<div class="field pl-4">
+					<div class="field gt-pl-4">
 						<div class="field">
 							<div class="ui checkbox">
 								<input class="enable-system" type="checkbox" name="scope" value="write:gpg_key">
@@ -221,7 +221,7 @@
 							<label>admin:application</label>
 						</div>
 					</div>
-					<div class="field pl-4">
+					<div class="field gt-pl-4">
 						<div class="field">
 							<div class="ui checkbox">
 								<input class="enable-system" type="checkbox" name="scope" value="write:application">
diff --git a/templates/user/settings/applications_oauth2_list.tmpl b/templates/user/settings/applications_oauth2_list.tmpl
index fbca5934cd572..8ec304532422e 100644
--- a/templates/user/settings/applications_oauth2_list.tmpl
+++ b/templates/user/settings/applications_oauth2_list.tmpl
@@ -7,12 +7,12 @@
 			<div class="item">
 				<div class="right floated content">
 					<a href="{{$.Link}}/oauth2/{{$app.ID}}" class="ui primary tiny button">
-						{{svg "octicon-pencil" 16 "mr-2"}}
+						{{svg "octicon-pencil" 16 "gt-mr-2"}}
 						{{$.locale.Tr "settings.oauth2_application_edit"}}
 					</a>
 					<button class="ui red tiny button delete-button" data-modal-id="remove-gitea-oauth2-application"
 							data-url="{{$.Link}}/oauth2/{{$app.ID}}/delete">
-						{{svg "octicon-trash" 16 "mr-2"}}
+						{{svg "octicon-trash" 16 "gt-mr-2"}}
 						{{$.locale.Tr "settings.delete_key"}}
 					</button>
 				</div>
diff --git a/templates/user/settings/grants_oauth2.tmpl b/templates/user/settings/grants_oauth2.tmpl
index 878c258dd32a0..0adc98168378c 100644
--- a/templates/user/settings/grants_oauth2.tmpl
+++ b/templates/user/settings/grants_oauth2.tmpl
@@ -30,7 +30,7 @@
 
 <div class="ui small basic delete modal" id="revoke-gitea-oauth2-grant">
 	<div class="ui icon header">
-		{{svg "octicon-shield" 16 "mr-2"}}
+		{{svg "octicon-shield" 16 "gt-mr-2"}}
 		{{.locale.Tr "settings.revoke_oauth2_grant"}}
 	</div>
 	<div class="content">
diff --git a/templates/user/settings/keys_gpg.tmpl b/templates/user/settings/keys_gpg.tmpl
index 0968069c3a0af..b200a4937464c 100644
--- a/templates/user/settings/keys_gpg.tmpl
+++ b/templates/user/settings/keys_gpg.tmpl
@@ -5,7 +5,7 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasGPGError}}hide{{end}} mb-4" id="add-gpg-key-panel">
+	<div class="{{if not .HasGPGError}}hide{{end}} gt-mb-4" id="add-gpg-key-panel">
 		<form class="ui form{{if .HasGPGError}} error{{end}}" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<input type="hidden" name="title" value="none">
@@ -39,7 +39,7 @@
 			</button>
 		</form>
 	</div>
-	<div class="ui key list mt-0">
+	<div class="ui key list gt-mt-0">
 		<div class="item">
 			{{.locale.Tr "settings.gpg_desc"}}
 		</div>
diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl
index 09339539096ef..8228a1b7f2abe 100644
--- a/templates/user/settings/keys_ssh.tmpl
+++ b/templates/user/settings/keys_ssh.tmpl
@@ -11,7 +11,7 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasSSHError}}hide{{end}} mb-4" id="add-ssh-key-panel">
+	<div class="{{if not .HasSSHError}}hide{{end}} gt-mb-4" id="add-ssh-key-panel">
 		<form class="ui form" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="field {{if .Err_Title}}error{{end}}">
@@ -31,7 +31,7 @@
 			</button>
 		</form>
 	</div>
-	<div class="ui key list mt-0">
+	<div class="ui key list gt-mt-0">
 		<div class="item">
 			{{.locale.Tr "settings.ssh_desc"}}
 		</div>
diff --git a/templates/user/settings/repos.tmpl b/templates/user/settings/repos.tmpl
index c655aa86d716f..902b3fb2f33b2 100644
--- a/templates/user/settings/repos.tmpl
+++ b/templates/user/settings/repos.tmpl
@@ -109,15 +109,15 @@
 							<div class="item">
 								<div class="content">
 									{{if .IsPrivate}}
-										{{svg "octicon-lock" 16 "mr-2 iconFloat text gold"}}
+										{{svg "octicon-lock" 16 "gt-mr-2 iconFloat text gold"}}
 									{{else if .IsFork}}
-										{{svg "octicon-repo-forked" 16 "mr-2 iconFloat"}}
+										{{svg "octicon-repo-forked" 16 "gt-mr-2 iconFloat"}}
 									{{else if .IsMirror}}
-										{{svg "octicon-mirror" 16 "mr-2 iconFloat"}}
+										{{svg "octicon-mirror" 16 "gt-mr-2 iconFloat"}}
 									{{else if .IsTemplate}}
-										{{svg "octicon-repo-template" 16 "mr-2 iconFloat"}}
+										{{svg "octicon-repo-template" 16 "gt-mr-2 iconFloat"}}
 									{{else}}
-										{{svg "octicon-repo" 16 "mr-2 iconFloat"}}
+										{{svg "octicon-repo" 16 "gt-mr-2 iconFloat"}}
 									{{end}}
 									<a class="name" href="{{.Link}}">{{.OwnerName}}/{{.Name}}</a>
 									<span>{{FileSize .Size}}</span>
diff --git a/tests/integration/release_test.go b/tests/integration/release_test.go
index 3fcd4a5b5e8e8..9f971d4c8517a 100644
--- a/tests/integration/release_test.go
+++ b/tests/integration/release_test.go
@@ -205,7 +205,7 @@ func TestViewTagsList(t *testing.T) {
 
 	tagNames := make([]string, 0, 5)
 	tags.Each(func(i int, s *goquery.Selection) {
-		tagNames = append(tagNames, s.Find(".tag a.df.ac").Text())
+		tagNames = append(tagNames, s.Find(".tag a.gt-df.gt-ac").Text())
 	})
 
 	assert.EqualValues(t, []string{"v1.0", "delete-tag", "v1.1"}, tagNames)
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index f95f28528d6a6..71ee6eae570e9 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -1,19 +1,19 @@
 <template>
-  <ol class="diff-detail-box diff-stats m-0" ref="root" v-if="fileListIsVisible">
+  <ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="fileListIsVisible">
     <li v-for="file in files" :key="file.NameHash">
-      <div class="bold df ac pull-right">
-        <span v-if="file.IsBin" class="ml-1 mr-3">{{ binaryFileMessage }}</span>
+      <div class="gt-bold gt-df gt-ac pull-right">
+        <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ binaryFileMessage }}</span>
         {{ file.IsBin ? '' : file.Addition + file.Deletion }}
-        <span v-if="!file.IsBin" class="diff-stats-bar tooltip mx-3" :data-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
+        <span v-if="!file.IsBin" class="diff-stats-bar tooltip gt-mx-3" :data-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
           <div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }" />
         </span>
       </div>
       <!-- todo finish all file status, now modify, add, delete and rename -->
       <span :class="['status', diffTypeToString(file.Type), 'tooltip']" :data-content="diffTypeToString(file.Type)" data-position="right center">&nbsp;</span>
-      <a class="file mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
+      <a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
     </li>
-    <li v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
-      <span class="file df ac sb">{{ tooManyFilesMessage }}
+    <li v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
+      <span class="file gt-df gt-ac sb">{{ tooManyFilesMessage }}
         <a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
       </span>
     </li>
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 6d77b202410f6..3742f3a53f2fe 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     v-if="fileTreeIsVisible"
-    class="mr-3 mt-3 diff-detail-box"
+    class="gt-mr-3 gt-mt-3 diff-detail-box"
   >
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <div class="ui list">
       <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
     </div>
-    <div v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
-      <span class="mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
+    <div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
+      <span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
     </div>
   </div>
 </template>
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 40d56b22627c6..245286dded982 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-show="show">
-    <div class="item" :class="item.isFile ? 'filewrapper p-1' : ''">
+    <div class="item" :class="item.isFile ? 'filewrapper gt-p-1' : ''">
       <!-- Files -->
       <SvgIcon
         v-if="item.isFile"
@@ -10,7 +10,7 @@
       />
       <a
         v-if="item.isFile"
-        class="file ellipsis muted"
+        class="file gt-ellipsis muted"
         :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
       >{{ item.name }}</a>
       <SvgIcon
@@ -21,7 +21,7 @@
       />
 
       <!-- Directories -->
-      <div v-if="!item.isFile" class="directory p-1" @click.stop="handleClick(item.isFile)">
+      <div v-if="!item.isFile" class="directory gt-p-1" @click.stop="handleClick(item.isFile)">
         <SvgIcon
           class="svg-icon"
           :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"
@@ -30,7 +30,7 @@
           class="svg-icon directory"
           name="octicon-file-directory-fill"
         />
-        <span class="ellipsis">{{ item.name }}</span>
+        <span class="gt-ellipsis">{{ item.name }}</span>
       </div>
       <div v-show="!collapsed">
         <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" />
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 1e0ebc5a47c2c..2e10ce2531f06 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -47,14 +47,14 @@
           {{ mergeForm.textCancel }}
         </button>
 
-        <div class="ui checkbox ml-2" v-if="mergeForm.isPullBranchDeletable && !autoMergeWhenSucceed">
+        <div class="ui checkbox gt-ml-2" v-if="mergeForm.isPullBranchDeletable && !autoMergeWhenSucceed">
           <input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
           <label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
         </div>
       </form>
     </div>
 
-    <div v-if="!showActionForm" class="df">
+    <div v-if="!showActionForm" class="gt-df">
       <!-- the merge button -->
       <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'green' : 'red']" @click="toggleActionForm(true)" >
         <button class="ui button">
@@ -95,7 +95,7 @@
       </div>
 
       <!-- the cancel auto merge button -->
-      <form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="ml-4">
+      <form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="gt-ml-4">
         <input type="hidden" name="_csrf" :value="csrfToken">
         <button class="ui button">
           {{ mergeForm.textAutoMergeCancelSchedule }}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index ddc7139a2e2ea..c947819ada5b9 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -42,15 +42,15 @@
         <div class="job-step-container">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
             <div class="job-step-summary" @click.stop="toggleStepLogs(i)">
-              <SvgIcon name="octicon-chevron-down" class="mr-3" v-show="currentJobStepsStates[i].expanded"/>
-              <SvgIcon name="octicon-chevron-right" class="mr-3" v-show="!currentJobStepsStates[i].expanded"/>
-
-              <SvgIcon name="octicon-check-circle-fill" class="green mr-3" v-if="jobStep.status === 'success'"/>
-              <SvgIcon name="octicon-skip" class="ui text grey mr-3" v-else-if="jobStep.status === 'skipped'"/>
-              <SvgIcon name="octicon-clock" class="ui text yellow mr-3" v-else-if="jobStep.status === 'waiting'"/>
-              <SvgIcon name="octicon-blocked" class="ui text yellow mr-3" v-else-if="jobStep.status === 'blocked'"/>
-              <SvgIcon name="octicon-meter" class="ui text yellow mr-3" class-name="job-status-rotate" v-else-if="jobStep.status === 'running'"/>
-              <SvgIcon name="octicon-x-circle-fill" class="red mr-3 " v-else/>
+              <SvgIcon name="octicon-chevron-down" class="gt-mr-3" v-show="currentJobStepsStates[i].expanded"/>
+              <SvgIcon name="octicon-chevron-right" class="gt-mr-3" v-show="!currentJobStepsStates[i].expanded"/>
+
+              <SvgIcon name="octicon-check-circle-fill" class="green gt-mr-3" v-if="jobStep.status === 'success'"/>
+              <SvgIcon name="octicon-skip" class="ui text grey gt-mr-3" v-else-if="jobStep.status === 'skipped'"/>
+              <SvgIcon name="octicon-clock" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'waiting'"/>
+              <SvgIcon name="octicon-blocked" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'blocked'"/>
+              <SvgIcon name="octicon-meter" class="ui text yellow gt-mr-3" class-name="job-status-rotate" v-else-if="jobStep.status === 'running'"/>
+              <SvgIcon name="octicon-x-circle-fill" class="red gt-mr-3 " v-else/>
 
               <span class="step-summary-msg">{{ jobStep.summary }}</span>
               <span class="step-summary-dur">{{ jobStep.duration }}</span>
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index f2edf31249ce6..c0acf091c7f87 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -172,7 +172,7 @@ export function initGlobalDropzone() {
           // Create a "Copy Link" element, to conveniently copy the image
           // or file link as Markdown to the clipboard
           const copyLinkElement = document.createElement('div');
-          copyLinkElement.className = 'tc';
+          copyLinkElement.className = 'gt-tc';
           // The a element has a hardcoded cursor: pointer because the default is overridden by .dropzone
           copyLinkElement.innerHTML = `<a href="#" style="cursor: pointer;">${svg('octicon-copy', 14, 'copy link')} Copy link</a>`;
           copyLinkElement.addEventListener('click', (e) => {
diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js
index ee0da03005969..a218c5b307803 100644
--- a/web_src/js/features/repo-common.js
+++ b/web_src/js/features/repo-common.js
@@ -54,8 +54,8 @@ export function initRepoCloneLink() {
 
   // restore animation after first init
   setTimeout(() => {
-    $repoCloneSsh.removeClass('no-transition');
-    $repoCloneHttps.removeClass('no-transition');
+    $repoCloneSsh.removeClass('gt-no-transition');
+    $repoCloneHttps.removeClass('gt-no-transition');
   }, 100);
 
   $repoCloneSsh.on('click', () => {
diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js
index f279dfeeb73aa..0eae4a75dbf2b 100644
--- a/web_src/js/features/repo-findfile.js
+++ b/web_src/js/features/repo-findfile.js
@@ -88,7 +88,7 @@ function filterRepoFiles(filter) {
     const $row = $(tmplRow);
     const $a = $row.find('a');
     $a.attr('href', `${treeLink}/${escapePath(r.matchResult.join(''))}`);
-    const $octiconFile = $(svg('octicon-file')).addClass('mr-3');
+    const $octiconFile = $(svg('octicon-file')).addClass('gt-mr-3');
     $a.append($octiconFile);
     // if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz']
     // the matchResult[odd] is matched and highlighted to red.
diff --git a/web_src/js/features/repo-findfile.test.js b/web_src/js/features/repo-findfile.test.js
index 50321853960be..cb3d32eae3f53 100644
--- a/web_src/js/features/repo-findfile.test.js
+++ b/web_src/js/features/repo-findfile.test.js
@@ -7,12 +7,12 @@ describe('Repo Find Files', () => {
     expect(strSubMatch('abc', 'a')).toEqual(['', 'a', 'bc']);
     expect(strSubMatch('abc', 'b')).toEqual(['a', 'b', 'c']);
     expect(strSubMatch('abc', 'c')).toEqual(['ab', 'c']);
-    expect(strSubMatch('abc', 'ac')).toEqual(['', 'a', 'b', 'c']);
+    expect(strSubMatch('abc', 'gt-ac')).toEqual(['', 'a', 'b', 'c']);
     expect(strSubMatch('abc', 'z')).toEqual(['abc']);
     expect(strSubMatch('abc', 'az')).toEqual(['abc']);
 
-    expect(strSubMatch('ABc', 'ac')).toEqual(['', 'A', 'B', 'c']);
-    expect(strSubMatch('abC', 'ac')).toEqual(['', 'a', 'b', 'C']);
+    expect(strSubMatch('ABc', 'gt-ac')).toEqual(['', 'A', 'B', 'c']);
+    expect(strSubMatch('abC', 'gt-ac')).toEqual(['', 'a', 'b', 'C']);
 
     expect(strSubMatch('aabbcc', 'abc')).toEqual(['', 'a', 'a', 'b', 'b', 'c', 'c']);
     expect(strSubMatch('the/directory', 'hedir')).toEqual(['t', 'he', '/', 'dir', 'ectory']);
diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js
index 37801d2ad4a40..91c8b924c91c2 100644
--- a/web_src/js/features/repo-issue-content.js
+++ b/web_src/js/features/repo-issue-content.js
@@ -14,16 +14,16 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
   $dialog = $(`
 <div class="ui modal content-history-detail-dialog">
   ${svg('octicon-x', 16, 'close icon inside')}
-  <div class="header df ac sb">
+  <div class="header gt-df gt-ac sb">
     <div>${itemTitleHtml}</div>
-    <div class="ui dropdown dialog-header-options df ac mr-5 hide">
+    <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 hide">
       ${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}
       <div class="menu">
         <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
       </div>
     </div>
   </div>
-  <div class="comment-diff-data tl p-3 is-loading"></div>
+  <div class="comment-diff-data gt-tl gt-p-3 is-loading"></div>
 </div>`);
   $dialog.appendTo($('body'));
   $dialog.find('.dialog-header-options').dropdown({
@@ -76,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
   const $headerLeft = $item.find('.comment-header-left');
   const menuHtml = `
   <div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
-    &bull; <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon ml-1 mt-1')}</a>
+    &bull; <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
     <div class="menu">
     </div>
   </div>`;
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 37366578e2d27..07c67ba5da60b 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -219,11 +219,11 @@ export function initRepoCommentForm() {
 
       let icon = '';
       if (input_id === '#milestone_id') {
-        icon = svg('octicon-milestone', 18, 'mr-3');
+        icon = svg('octicon-milestone', 18, 'gt-mr-3');
       } else if (input_id === '#project_id') {
-        icon = svg('octicon-project', 18, 'mr-3');
+        icon = svg('octicon-project', 18, 'gt-mr-3');
       } else if (input_id === '#assignee_id') {
-        icon = `<img class="ui avatar image mr-3" src=${$(this).data('avatar')}>`;
+        icon = `<img class="ui avatar image gt-mr-3" src=${$(this).data('avatar')}>`;
       }
 
       $list.find('.selected').html(`
diff --git a/web_src/js/markup/math.js b/web_src/js/markup/math.js
index cfd058c93cc8e..dcc656ea82cee 100644
--- a/web_src/js/markup/math.js
+++ b/web_src/js/markup/math.js
@@ -2,7 +2,7 @@ function displayError(el, err) {
   const target = targetElement(el);
   target.classList.remove('is-loading');
   const errorNode = document.createElement('div');
-  errorNode.setAttribute('class', 'ui message error markup-block-error mono');
+  errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
   errorNode.textContent = err.str || err.message || String(err);
   target.before(errorNode);
 }
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js
index 29fa92552dca0..60f53d2b341d5 100644
--- a/web_src/js/markup/mermaid.js
+++ b/web_src/js/markup/mermaid.js
@@ -12,7 +12,7 @@ const iframeCss = `
 function displayError(el, err) {
   el.closest('pre').classList.remove('is-loading');
   const errorNode = document.createElement('div');
-  errorNode.setAttribute('class', 'ui message error markup-block-error mono');
+  errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
   errorNode.textContent = err.str || err.message || String(err);
   el.closest('pre').before(errorNode);
 }
diff --git a/web_src/less/_runner.less b/web_src/less/_runner.less
index 74d917fc87a0a..cebe345b0cfce 100644
--- a/web_src/less/_runner.less
+++ b/web_src/less/_runner.less
@@ -8,7 +8,7 @@
   .runner-ops-delete {
     color: var(--color-red-light);
   }
-  .runner-basic-info .dib {
+  .runner-basic-info .gt-dib {
     margin-right: 1em;
   }
   .runner-status-online {
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 20670a378670b..6624edbfb6c83 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -1,182 +1,182 @@
-.df { display: flex !important; }
-.di { display: inline !important; }
-.dif { display: inline-flex !important; }
-.dib { display: inline-block !important; }
-.pr { position: relative !important; }
-.ac { align-items: center !important; }
-.tc { text-align: center !important; }
-.tl { text-align: left !important; }
-.tdn { text-decoration: none !important; }
-.jc { justify-content: center !important; }
-.js { justify-content: flex-start !important; }
-.je { justify-content: flex-end !important; }
-.sb { justify-content: space-between !important; }
-.fc { flex-direction: column !important; }
-.f1 { flex: 1 !important; }
-.fw { flex-wrap: wrap !important; }
-.vm { vertical-align: middle !important; }
-.w-100 { width: 100% !important; }
-.h-100 { height: 100% !important; }
-.br-0 { border-radius: 0 !important; }
+.gt-df { display: flex !important; }
+.gt-di { display: inline !important; }
+.gt-dif { display: inline-flex !important; }
+.gt-dib { display: inline-block !important; }
+.gt-pr { position: relative !important; }
+.gt-ac { align-items: center !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; }
+.gt-sb { justify-content: space-between !important; }
+.gt-fc { flex-direction: column !important; }
+.gt-f1 { flex: 1 !important; }
+.gt-fw { flex-wrap: wrap !important; }
+.gt-vm { vertical-align: middle !important; }
+.gt-w-100 { width: 100% !important; }
+.gt-h-100 { height: 100% !important; }
+.gt-br-0 { border-radius: 0 !important; }
 
 /* below class names match Tailwind CSS */
-.pointer-events-none { pointer-events: none !important; }
-.relative { position: relative !important; }
+.gt-pointer-events-none { pointer-events: none !important; }
+.gt-relative { position: relative !important; }
 
-.mono {
+.gt-mono {
   font-family: var(--fonts-monospace) !important;
   font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */
 }
 
-.bold { font-weight: 600 !important; }
+.gt-bold { font-weight: 600 !important; }
 
-.word-break {
+.gt-word-break {
   word-wrap: break-word !important;
   word-break: break-word; /* compat: Safari */
   overflow-wrap: anywhere;
 }
 
-.ellipsis {
+.gt-ellipsis {
   overflow: hidden !important;
   white-space: nowrap !important;
   text-overflow: ellipsis !important;
 }
 
-.full-screen-width { width: 100vw !important; }
-.full-screen-height { height: 100vh !important; }
-
-.rounded { border-radius: var(--border-radius) !important; }
-.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
-.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
-.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
-.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
-
-.border-secondary { border: 1px solid var(--color-secondary) !important; }
-.border-secondary-top { border-top: 1px solid var(--color-secondary) !important; }
-.border-secondary-bottom { border-bottom: 1px solid var(--color-secondary) !important; }
-.border-secondary-left { border-left: 1px solid var(--color-secondary) !important; }
-.border-secondary-right { border-right: 1px solid var(--color-secondary) !important; }
-
-.no-transition { transition: none !important; }
-
-.bg-red { background: var(--color-red) !important; }
-.bg-orange { background: var(--color-orange) !important; }
-.bg-yellow { background: var(--color-yellow) !important; }
-.bg-olive { background: var(--color-olive) !important; }
-.bg-green { background: var(--color-green) !important; }
-.bg-teal { background: var(--color-teal) !important; }
-.bg-blue { background: var(--color-blue) !important; }
-.bg-violet { background: var(--color-violet) !important; }
-.bg-purple { background: var(--color-purple) !important; }
-.bg-pink { background: var(--color-pink) !important; }
-.bg-brown { background: var(--color-brown) !important; }
-.bg-grey { background: var(--color-grey) !important; }
-.bg-gold { background: var(--color-gold) !important; }
-
-.text-white { color: var(--color-white) !important; }
-
-.m-0 { margin: 0 !important; }
-.m-1 { margin: .125rem !important; }
-.m-2 { margin: .25rem !important; }
-.m-3 { margin: .5rem !important; }
-.m-4 { margin: 1rem !important; }
-.m-5 { margin: 2rem !important; }
-
-.ml-0 { margin-left: 0 !important; }
-.ml-1 { margin-left: .125rem !important; }
-.ml-2 { margin-left: .25rem !important; }
-.ml-3 { margin-left: .5rem !important; }
-.ml-4 { margin-left: 1rem !important; }
-.ml-5 { margin-left: 2rem !important; }
-
-.mr-0 { margin-right: 0 !important; }
-.mr-1 { margin-right: .125rem !important; }
-.mr-2 { margin-right: .25rem !important; }
-.mr-3 { margin-right: .5rem !important; }
-.mr-4 { margin-right: 1rem !important; }
-.mr-5 { margin-right: 2rem !important; }
-
-.mt-0 { margin-top: 0 !important; }
-.mt-1 { margin-top: .125rem !important; }
-.mt-2 { margin-top: .25rem !important; }
-.mt-3 { margin-top: .5rem !important; }
-.mt-4 { margin-top: 1rem !important; }
-.mt-5 { margin-top: 2rem !important; }
-
-.mb-0 { margin-bottom: 0 !important; }
-.mb-1 { margin-bottom: .125rem !important; }
-.mb-2 { margin-bottom: .25rem !important; }
-.mb-3 { margin-bottom: .5rem !important; }
-.mb-4 { margin-bottom: 1rem !important; }
-.mb-5 { margin-bottom: 2rem !important; }
-
-.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
-.mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; }
-.mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; }
-.mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; }
-.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
-.mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
-
-.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
-.my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; }
-.my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
-.my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
-.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
-.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
-
-.p-0 { padding: 0 !important; }
-.p-1 { padding: .125rem !important; }
-.p-2 { padding: .25rem !important; }
-.p-3 { padding: .5rem !important; }
-.p-4 { padding: 1rem !important; }
-.p-5 { padding: 2rem !important; }
-
-.pl-0 { padding-left: 0 !important; }
-.pl-1 { padding-left: .125rem !important; }
-.pl-2 { padding-left: .25rem !important; }
-.pl-3 { padding-left: .5rem !important; }
-.pl-4 { padding-left: 1rem !important; }
-.pl-5 { padding-left: 2rem !important; }
-
-.pr-0 { padding-right: 0 !important; }
-.pr-1 { padding-right: .125rem !important; }
-.pr-2 { padding-right: .25rem !important; }
-.pr-3 { padding-right: .5rem !important; }
-.pr-4 { padding-right: 1rem !important; }
-.pr-5 { padding-right: 2rem !important; }
-
-.pt-0 { padding-top: 0 !important; }
-.pt-1 { padding-top: .125rem !important; }
-.pt-2 { padding-top: .25rem !important; }
-.pt-3 { padding-top: .5rem !important; }
-.pt-4 { padding-top: 1rem !important; }
-.pt-5 { padding-top: 2rem !important; }
-
-.pb-0 { padding-bottom: 0 !important; }
-.pb-1 { padding-bottom: .125rem !important; }
-.pb-2 { padding-bottom: .25rem !important; }
-.pb-3 { padding-bottom: .5rem !important; }
-.pb-4 { padding-bottom: 1rem !important; }
-.pb-5 { padding-bottom: 2rem !important; }
-
-.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
-.px-1 { padding-left: .125rem !important; padding-right: .125rem !important; }
-.px-2 { padding-left: .25rem !important; padding-right: .25rem !important; }
-.px-3 { padding-left: .5rem !important; padding-right: .5rem !important; }
-.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
-.px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
-
-.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
-.py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
-.py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
-.py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
-.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
-.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
-
-.content-center { align-content: center !important; }
+.gt-full-screen-width { width: 100vw !important; }
+.gt-full-screen-height { height: 100vh !important; }
+
+.gt-rounded { border-radius: var(--border-radius) !important; }
+.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
+.gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
+.gt-rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
+.gt-rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
+
+.gt-border-secondary { border: 1px solid var(--color-secondary) !important; }
+.gt-border-secondary-top { border-top: 1px solid var(--color-secondary) !important; }
+.gt-border-secondary-bottom { border-bottom: 1px solid var(--color-secondary) !important; }
+.gt-border-secondary-left { border-left: 1px solid var(--color-secondary) !important; }
+.gt-border-secondary-right { border-right: 1px solid var(--color-secondary) !important; }
+
+.gt-no-transition { transition: none !important; }
+
+.gt-bg-red { background: var(--color-red) !important; }
+.gt-bg-orange { background: var(--color-orange) !important; }
+.gt-bg-yellow { background: var(--color-yellow) !important; }
+.gt-bg-olive { background: var(--color-olive) !important; }
+.gt-bg-green { background: var(--color-green) !important; }
+.gt-bg-teal { background: var(--color-teal) !important; }
+.gt-bg-blue { background: var(--color-blue) !important; }
+.gt-bg-violet { background: var(--color-violet) !important; }
+.gt-bg-purple { background: var(--color-purple) !important; }
+.gt-bg-pink { background: var(--color-pink) !important; }
+.gt-bg-brown { background: var(--color-brown) !important; }
+.gt-bg-grey { background: var(--color-grey) !important; }
+.gt-bg-gold { background: var(--color-gold) !important; }
+
+.gt-text-white { color: var(--color-white) !important; }
+
+.gt-m-0 { margin: 0 !important; }
+.gt-m-1 { margin: .125rem !important; }
+.gt-m-2 { margin: .25rem !important; }
+.gt-m-3 { margin: .5rem !important; }
+.gt-m-4 { margin: 1rem !important; }
+.gt-m-5 { margin: 2rem !important; }
+
+.gt-ml-0 { margin-left: 0 !important; }
+.gt-ml-1 { margin-left: .125rem !important; }
+.gt-ml-2 { margin-left: .25rem !important; }
+.gt-ml-3 { margin-left: .5rem !important; }
+.gt-ml-4 { margin-left: 1rem !important; }
+.gt-ml-5 { margin-left: 2rem !important; }
+
+.gt-mr-0 { margin-right: 0 !important; }
+.gt-mr-1 { margin-right: .125rem !important; }
+.gt-mr-2 { margin-right: .25rem !important; }
+.gt-mr-3 { margin-right: .5rem !important; }
+.gt-mr-4 { margin-right: 1rem !important; }
+.gt-mr-5 { margin-right: 2rem !important; }
+
+.gt-mt-0 { margin-top: 0 !important; }
+.gt-mt-1 { margin-top: .125rem !important; }
+.gt-mt-2 { margin-top: .25rem !important; }
+.gt-mt-3 { margin-top: .5rem !important; }
+.gt-mt-4 { margin-top: 1rem !important; }
+.gt-mt-5 { margin-top: 2rem !important; }
+
+.gt-mb-0 { margin-bottom: 0 !important; }
+.gt-mb-1 { margin-bottom: .125rem !important; }
+.gt-mb-2 { margin-bottom: .25rem !important; }
+.gt-mb-3 { margin-bottom: .5rem !important; }
+.gt-mb-4 { margin-bottom: 1rem !important; }
+.gt-mb-5 { margin-bottom: 2rem !important; }
+
+.gt-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
+.gt-mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; }
+.gt-mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; }
+.gt-mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; }
+.gt-mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
+.gt-mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
+
+.gt-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
+.gt-my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; }
+.gt-my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
+.gt-my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
+.gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
+.gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
+
+.gt-p-0 { padding: 0 !important; }
+.gt-p-1 { padding: .125rem !important; }
+.gt-p-2 { padding: .25rem !important; }
+.gt-p-3 { padding: .5rem !important; }
+.gt-p-4 { padding: 1rem !important; }
+.gt-p-5 { padding: 2rem !important; }
+
+.gt-pl-0 { padding-left: 0 !important; }
+.gt-pl-1 { padding-left: .125rem !important; }
+.gt-pl-2 { padding-left: .25rem !important; }
+.gt-pl-3 { padding-left: .5rem !important; }
+.gt-pl-4 { padding-left: 1rem !important; }
+.gt-pl-5 { padding-left: 2rem !important; }
+
+.gt-pr-0 { padding-right: 0 !important; }
+.gt-pr-1 { padding-right: .125rem !important; }
+.gt-pr-2 { padding-right: .25rem !important; }
+.gt-pr-3 { padding-right: .5rem !important; }
+.gt-pr-4 { padding-right: 1rem !important; }
+.gt-pr-5 { padding-right: 2rem !important; }
+
+.gt-pt-0 { padding-top: 0 !important; }
+.gt-pt-1 { padding-top: .125rem !important; }
+.gt-pt-2 { padding-top: .25rem !important; }
+.gt-pt-3 { padding-top: .5rem !important; }
+.gt-pt-4 { padding-top: 1rem !important; }
+.gt-pt-5 { padding-top: 2rem !important; }
+
+.gt-pb-0 { padding-bottom: 0 !important; }
+.gt-pb-1 { padding-bottom: .125rem !important; }
+.gt-pb-2 { padding-bottom: .25rem !important; }
+.gt-pb-3 { padding-bottom: .5rem !important; }
+.gt-pb-4 { padding-bottom: 1rem !important; }
+.gt-pb-5 { padding-bottom: 2rem !important; }
+
+.gt-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
+.gt-px-1 { padding-left: .125rem !important; padding-right: .125rem !important; }
+.gt-px-2 { padding-left: .25rem !important; padding-right: .25rem !important; }
+.gt-px-3 { padding-left: .5rem !important; padding-right: .5rem !important; }
+.gt-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
+.gt-px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
+
+.gt-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
+.gt-py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
+.gt-py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
+.gt-py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
+.gt-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
+.gt-py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
+
+.gt-content-center { align-content: center !important; }
 
 @media @mediaSm {
-  .db-small { display: block !important; }
-  .w-100-small { width: 100% !important; }
-  .js-small { justify-content: flex-start !important; }
+  .gt-db-small { display: block !important; }
+  .gt-w-100-small { width: 100% !important; }
+  .gt-js-small { justify-content: flex-start !important; }
 }

From d52a7356223136e0da87355e8450e5e93a389c4f Mon Sep 17 00:00:00 2001
From: Andrew Thornton <art27@cantab.net>
Date: Sun, 12 Feb 2023 17:06:28 +0000
Subject: [PATCH 2/9] Add the gt-hidden style in order to fix #22845

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 templates/base/head_navbar.tmpl | 4 ++--
 web_src/less/helpers.less       | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 068d9fde86408..84ee1984c1ae6 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -12,7 +12,7 @@
 			<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only gt-mr-4 gt-mt-3" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
 				<span class="fitted item">
 					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
+					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
 						{{$notificationUnreadCount}}
 					</span>
 				</span>
@@ -80,7 +80,7 @@
 	{{else if .IsSigned}}
 		<div class="right stackable menu">
 			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
+			<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
 				<span class="fitted gt-relative">
 					{{svg "octicon-stopwatch"}}
 					<span class="header-stopwatch-dot"></span>
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 6624edbfb6c83..74c34007e9d2e 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -22,6 +22,7 @@
 /* below class names match Tailwind CSS */
 .gt-pointer-events-none { pointer-events: none !important; }
 .gt-relative { position: relative !important; }
+.gt-hidden { display: none !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;

From fda34004947fad0abc522c95dd882c801b10d30f Mon Sep 17 00:00:00 2001
From: Andrew Thornton <art27@cantab.net>
Date: Sun, 12 Feb 2023 17:07:35 +0000
Subject: [PATCH 3/9] oops

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 web_src/js/features/repo-findfile.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/features/repo-findfile.test.js b/web_src/js/features/repo-findfile.test.js
index cb3d32eae3f53..50321853960be 100644
--- a/web_src/js/features/repo-findfile.test.js
+++ b/web_src/js/features/repo-findfile.test.js
@@ -7,12 +7,12 @@ describe('Repo Find Files', () => {
     expect(strSubMatch('abc', 'a')).toEqual(['', 'a', 'bc']);
     expect(strSubMatch('abc', 'b')).toEqual(['a', 'b', 'c']);
     expect(strSubMatch('abc', 'c')).toEqual(['ab', 'c']);
-    expect(strSubMatch('abc', 'gt-ac')).toEqual(['', 'a', 'b', 'c']);
+    expect(strSubMatch('abc', 'ac')).toEqual(['', 'a', 'b', 'c']);
     expect(strSubMatch('abc', 'z')).toEqual(['abc']);
     expect(strSubMatch('abc', 'az')).toEqual(['abc']);
 
-    expect(strSubMatch('ABc', 'gt-ac')).toEqual(['', 'A', 'B', 'c']);
-    expect(strSubMatch('abC', 'gt-ac')).toEqual(['', 'a', 'b', 'C']);
+    expect(strSubMatch('ABc', 'ac')).toEqual(['', 'A', 'B', 'c']);
+    expect(strSubMatch('abC', 'ac')).toEqual(['', 'a', 'b', 'C']);
 
     expect(strSubMatch('aabbcc', 'abc')).toEqual(['', 'a', 'a', 'b', 'b', 'c', 'c']);
     expect(strSubMatch('the/directory', 'hedir')).toEqual(['t', 'he', '/', 'dir', 'ectory']);

From 1ae4bcf61a568ebb99addf8ab3fa5921d655ff7e Mon Sep 17 00:00:00 2001
From: Andrew Thornton <art27@cantab.net>
Date: Sun, 12 Feb 2023 17:42:10 +0000
Subject: [PATCH 4/9] fix some mistaken commits

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 templates/repo/graph.tmpl                   | 2 +-
 templates/repo/home.tmpl                    | 2 +-
 templates/repo/issue/view_content/pull.tmpl | 2 +-
 templates/repo/pulls/status.tmpl            | 2 +-
 web_src/js/features/repo-issue-content.js   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index df11ad0fa8751..26f3823668e23 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -11,7 +11,7 @@
 						<i class="dropdown icon"></i>
 						<div class="default text">{{.locale.Tr "repo.commit_graph.select"}}</div>
 						<div class="menu">
-							<div class="item" data-value="...flow-hide-gt-pr-refs">
+							<div class="item" data-value="...flow-hide-pr-refs">
 								<span class="truncate">
 									{{svg "octicon-eye-closed" 16 "gt-mr-2"}}<span title="{{.locale.Tr "repo.commit_graph.hide_pr_refs"}}">{{.locale.Tr "repo.commit_graph.hide_pr_refs"}}</span>
 								</span>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index bab499a2afa4c..fb33441d54123 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -67,7 +67,7 @@
 				{{template "repo/branch_dropdown" dict "root" .}}
 				{{$n := len .TreeNames}}
 				{{$l := Subtract $n 1}}
-				<!-- If home page, show new gt-pr. If not, show breadcrumb -->
+				<!-- If home page, show new pr. If not, show breadcrumb -->
 				{{if eq $n 0}}
 					{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 						<a href="{{CompareLink .BaseRepo .Repository .BranchName}}">
diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 1ae8d06812464..ae463d1b3f079 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -333,7 +333,7 @@
 								'hasPendingPullRequestMergeTip': {{$hasPendingPullRequestMergeTip}},
 							};
 
-							const generalHideAutoMerge = mergeForm.canMergeNow && mergeForm.allOverridableChecksOk; // if this gt-pr can be merged now, then hide the auto merge
+							const generalHideAutoMerge = mergeForm.canMergeNow && mergeForm.allOverridableChecksOk; // if this pr can be merged now, then hide the auto merge
 							mergeForm['mergeStyles'] = [
 								{
 									'name': 'merge',
diff --git a/templates/repo/pulls/status.tmpl b/templates/repo/pulls/status.tmpl
index 81272c74b57ec..ca090ee843e4f 100644
--- a/templates/repo/pulls/status.tmpl
+++ b/templates/repo/pulls/status.tmpl
@@ -18,7 +18,7 @@
 	{{end}}
 
 	{{range $.LatestCommitStatuses}}
-		<div class="ui attached segment gt-pr-status">
+		<div class="ui attached segment pr-status">
 			{{template "repo/commit_status" .}}
 			<div class="status-context">
 				<span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js
index 91c8b924c91c2..a96da53f24071 100644
--- a/web_src/js/features/repo-issue-content.js
+++ b/web_src/js/features/repo-issue-content.js
@@ -14,7 +14,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
   $dialog = $(`
 <div class="ui modal content-history-detail-dialog">
   ${svg('octicon-x', 16, 'close icon inside')}
-  <div class="header gt-df gt-ac sb">
+  <div class="header gt-df gt-ac gt-sb">
     <div>${itemTitleHtml}</div>
     <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 hide">
       ${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}

From 17874385853af485d40ea1df83e823c15fcfaadb Mon Sep 17 00:00:00 2001
From: Andrew Thornton <art27@cantab.net>
Date: Sun, 12 Feb 2023 17:43:56 +0000
Subject: [PATCH 5/9] and set gt-hidden for stopwatch and notification

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 web_src/js/features/notification.js | 6 +++---
 web_src/js/features/stopwatch.js    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 405b92d7e1626..6c056c6d14d25 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -29,7 +29,7 @@ async function receiveUpdateCount(event) {
     const data = JSON.parse(event.data);
 
     for (const count of document.querySelectorAll('.notification_count')) {
-      count.classList.toggle('hidden', data.Count === 0);
+      count.classList.toggle('gt-hidden', data.Count === 0);
       count.textContent = `${data.Count}`;
     }
     await updateNotificationTable();
@@ -165,9 +165,9 @@ async function updateNotificationCount() {
 
   const notificationCount = $('.notification_count');
   if (data.new === 0) {
-    notificationCount.addClass('hidden');
+    notificationCount.addClass('gt-hidden');
   } else {
-    notificationCount.removeClass('hidden');
+    notificationCount.removeClass('gt-hidden');
   }
 
   notificationCount.text(`${data.new}`);
diff --git a/web_src/js/features/stopwatch.js b/web_src/js/features/stopwatch.js
index 33915a1d83713..f43014fec5b7d 100644
--- a/web_src/js/features/stopwatch.js
+++ b/web_src/js/features/stopwatch.js
@@ -125,7 +125,7 @@ function updateStopwatchData(data) {
   const btnEl = $('.active-stopwatch-trigger');
   if (!watch) {
     clearStopwatchTimer();
-    btnEl.addClass('hidden');
+    btnEl.addClass('gt-hidden');
   } else {
     const {repo_owner_name, repo_name, issue_index, seconds} = watch;
     const issueUrl = `${appSubUrl}/${repo_owner_name}/${repo_name}/issues/${issue_index}`;
@@ -134,7 +134,7 @@ function updateStopwatchData(data) {
     $('.stopwatch-cancel').attr('action', `${issueUrl}/times/stopwatch/cancel`);
     $('.stopwatch-issue').text(`${repo_owner_name}/${repo_name}#${issue_index}`);
     updateStopwatchTime(seconds);
-    btnEl.removeClass('hidden');
+    btnEl.removeClass('gt-hidden');
   }
   return Boolean(data.length);
 }

From 0e99d6e042551a2c8f29389c27c72f238ceb95da Mon Sep 17 00:00:00 2001
From: Andrew Thornton <art27@cantab.net>
Date: Sun, 12 Feb 2023 17:44:55 +0000
Subject: [PATCH 6/9] and another

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 templates/base/head_navbar.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 84ee1984c1ae6..dafc64cad7c2d 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -121,7 +121,7 @@
 			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile gt-mx-0" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
 				<span class="fitted item">
 					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
+					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
 						{{$notificationUnreadCount}}
 					</span>
 				</span>

From 054b8e7d60b5cbf1ed57aec91715a032e7c99c22 Mon Sep 17 00:00:00 2001
From: Andrew Thornton <art27@cantab.net>
Date: Sun, 12 Feb 2023 17:47:55 +0000
Subject: [PATCH 7/9] one final thing for notification

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 templates/user/notification/notification_div.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index 0ea001ff3d046..8dae8baa28688 100644
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -5,7 +5,7 @@
 			{{$notificationUnreadCount := call .NotificationUnreadCount}}
 			<a href="{{AppSubUrl}}/notifications?q=unread" class="{{if eq .Status 1}}active {{end}}item">
 				{{.locale.Tr "notification.unread"}}
-				<div class="ui label {{if not $notificationUnreadCount}}hidden{{end}}">{{$notificationUnreadCount}}</div>
+				<div class="ui label {{if not $notificationUnreadCount}}gt-hidden{{end}}">{{$notificationUnreadCount}}</div>
 			</a>
 			<a href="{{AppSubUrl}}/notifications?q=read" class="{{if eq .Status 2}}active {{end}}item">
 				{{.locale.Tr "notification.read"}}

From 382b35ba14ffc6b0c03a728b2addbe749f30b92a Mon Sep 17 00:00:00 2001
From: Andrew Thornton <art27@cantab.net>
Date: Sun, 12 Feb 2023 21:32:14 +0000
Subject: [PATCH 8/9] missing commit

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 web_src/js/components/DiffFileList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 71ee6eae570e9..32919156b8ddd 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -13,7 +13,7 @@
       <a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
     </li>
     <li v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
-      <span class="file gt-df gt-ac sb">{{ tooManyFilesMessage }}
+      <span class="file gt-df gt-ac gt-sb">{{ tooManyFilesMessage }}
         <a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
       </span>
     </li>

From 3b7f553727ecafa3d798d56e3997a15825494b63 Mon Sep 17 00:00:00 2001
From: Lunny Xiao <xiaolunwen@gmail.com>
Date: Mon, 13 Feb 2023 20:20:52 +0800
Subject: [PATCH 9/9] Update templates/admin/process-row.tmpl

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/admin/process-row.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/admin/process-row.tmpl b/templates/admin/process-row.tmpl
index 71870d553c920..477bf5a41ea1a 100644
--- a/templates/admin/process-row.tmpl
+++ b/templates/admin/process-row.tmpl
@@ -1,5 +1,5 @@
 <div class="item">
-	<div class="df gt-ac">
+	<div class="gt-df gt-ac">
 		<div class="icon gt-ml-3 gt-mr-3">{{if eq .Process.Type "request"}}{{svg "octicon-globe" 16}}{{else if eq .Process.Type "system"}}{{svg "octicon-cpu" 16}}{{else}}{{svg "octicon-terminal" 16}}{{end}}</div>
 		<div class="content gt-f1">
 			<div class="header">{{.Process.Description}}</div>