1 files changed, 29 insertions, 73 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index a28fb7b92a..3b819e91bc 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.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
 }
 
 @media (min-width: 768px) and (max-width: 1200px) {
@@ -176,10 +185,6 @@ details summary {
   cursor: pointer;
 }
 
-details summary > * {
-  display: inline;
-}
-
 progress {
   background: var(--color-secondary-dark-1);
   border-radius: var(--border-radius);
@@ -318,6 +323,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;
@@ -455,15 +470,6 @@ a.label,
   color: var(--color-text-light-2);
 }
 
-.ui.comments .comment .actions a {
-  color: var(--color-text-light);
-}
-
-.ui.comments .comment .actions a.active,
-.ui.comments .comment .actions a:hover {
-  color: var(--color-primary);
-}
-
 img.ui.avatar,
 .ui.avatar img,
 .ui.avatar svg {
@@ -815,10 +821,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 +857,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 +914,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 +927,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);
 }
@@ -1051,19 +1018,6 @@ table th[data-sortt-desc] .svg {
   min-height: 0;
 }
 
-.precolors {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-left: 1em;
-}
-
-.precolors .color {
-  display: inline-block;
-  width: 15px;
-  height: 15px;
-}
-
 .ui.dropdown:not(.button) {
   line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
 }
@@ -1115,10 +1069,12 @@ table th[data-sortt-desc] .svg {
 .btn,
 .ui.ui.button,
 .ui.ui.dropdown,
-.flex-text-inline {
+.flex-text-inline,
+.flex-text-inline > a,
+.flex-text-inline > span {
   display: inline-flex;
   align-items: center;
-  gap: .25rem;
+  gap: var(--gap-inline);
   vertical-align: middle;
   min-width: 0; /* make ellipsis work */
 }
@@ -1146,7 +1102,7 @@ table th[data-sortt-desc] .svg {
 .flex-text-block {
   display: flex;
   align-items: center;
-  gap: .5rem;
+  gap: var(--gap-block);
   min-width: 0;
 }
 
@@ -1161,7 +1117,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,