1 files changed, 27 insertions, 56 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index bf7639859d..529ddd5386 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -30,6 +30,15 @@
   --page-spacing: 16px; /* space between page elements */
   --page-margin-x: 32px; /* minimum space on left and right side of page */
   --page-space-bottom: 64px; /* space between last page element and footer */
+
+  /* z-index */
+  --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */
+  --z-index-toast: 1002; /* should be larger than modal */
+
+  --font-size-label: 12px; /* font size of individual labels */
+
+  --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
+  --gap-block: 0.25rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
 }
 
 @media (min-width: 768px) and (max-width: 1200px) {
@@ -318,6 +327,16 @@ a.label,
   background: var(--color-hover);
 }
 
+.empty-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  text-align: center;
+  text-wrap: balance;
+}
+
 .inline-code-block {
   padding: 2px 4px;
   border-radius: .24em;
@@ -815,10 +834,6 @@ overflow-menu .ui.label {
   display: block;
 }
 
-.code-view .lines-num span::after {
-  cursor: pointer;
-}
-
 .lines-type-marker {
   vertical-align: top;
   white-space: nowrap;
@@ -855,39 +870,13 @@ overflow-menu .ui.label {
 .lines-escape {
   width: 0;
   white-space: nowrap;
+  padding: 0;
 }
 
 .lines-code {
   padding-left: 5px;
 }
 
-.file-view tr.active {
-  color: inherit !important;
-  background: inherit !important;
-}
-
-.file-view tr.active .lines-num,
-.file-view tr.active .lines-code {
-  background: var(--color-highlight-bg) !important;
-}
-
-.file-view tr.active:last-of-type .lines-code {
-  border-bottom-right-radius: var(--border-radius);
-}
-
-.file-view tr.active .lines-num {
-  position: relative;
-}
-
-.file-view tr.active .lines-num::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: 2px;
-  height: 100%;
-  background: var(--color-highlight-fg);
-}
-
 .code-inner {
   font: 12px var(--fonts-monospace);
   white-space: pre-wrap;
@@ -938,12 +927,12 @@ overflow-menu .ui.label {
   margin-right: 4px;
 }
 
-.top-line-blame {
+tr.top-line-blame {
   border-top: 1px solid var(--color-secondary);
 }
 
-.code-view tr.top-line-blame:first-of-type {
-  border-top: none;
+tr.top-line-blame:first-of-type {
+  border-top: none; /* merge code lines belonging to the same commit into one block */
 }
 
 .lines-code .bottom-line,
@@ -951,15 +940,6 @@ overflow-menu .ui.label {
   border-bottom: 1px solid var(--color-secondary);
 }
 
-.code-view {
-  background: var(--color-code-bg);
-  border-radius: var(--border-radius);
-}
-
-.code-view table {
-  width: 100%;
-}
-
 .migrate .svg.gitea-git {
   color: var(--color-git);
 }
@@ -1118,7 +1098,7 @@ table th[data-sortt-desc] .svg {
 .flex-text-inline {
   display: inline-flex;
   align-items: center;
-  gap: .25rem;
+  gap: var(--gap-inline);
   vertical-align: middle;
   min-width: 0; /* make ellipsis work */
 }
@@ -1146,10 +1126,11 @@ table th[data-sortt-desc] .svg {
 .flex-text-block {
   display: flex;
   align-items: center;
-  gap: .5rem;
+  gap: var(--gap-block);
   min-width: 0;
 }
 
+.ui.dropdown > .ui.button,
 .flex-text-block > .ui.button,
 .flex-text-inline > .ui.button {
   margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
@@ -1160,7 +1141,7 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
 .ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {
   display: flex !important;
   align-items: center;
-  gap: .5rem;
+  gap: var(--gap-block);
   min-width: 0;
 }
 .ui.dropdown .menu.flex-items-menu > .item img,
@@ -1187,16 +1168,6 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
   text-overflow: ellipsis !important;
 }
 
-.ui.dropdown.text-flex-grow {
-  display: flex;
-}
-
-.ui.dropdown.text-flex-grow > .text {
-  display: flex;
-  flex-grow: 1;
-  justify-content: space-between;
-}
-
 .svg.octicon-file-directory-fill,
 .svg.octicon-file-directory-open-fill,
 .svg.octicon-file-submodule {