Fix and restyle menu on code line (#15913)

* Fix and restyle menu on code line

* fix multiline and more tweaks

* move to separate files

* remove has-context-menu class

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

5 files changed, 40 insertions, 27 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 224586b079..7848810940 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -560,6 +560,19 @@ a.ui.card:hover,
   border-color: var(--color-secondary);
 }
 
+.ui.link.list .item,
+.ui.link.list a.item,
+.ui.link.list .item a:not(.ui) {
+  color: var(--color-text);
+}
+
+.ui.link.list.list a.item:hover,
+.ui.link.list.list .item a:not(.ui):hover,
+.ui.link.list.list a.item:active,
+.ui.link.list.list .item a:not(.ui):active {
+  color: var(--color-text-dark);
+}
+
 .dont-break-out {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -1565,20 +1578,8 @@ a.ui.label:hover {
     border-bottom: 1px solid var(--color-secondary);
   }
 }
-.code-view {
-  overflow: auto;
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  &.has-context-menu {
-    overflow: visible;
-    overflow-x: visible;
-    overflow-y: visible;
-  }
-
-  table {
-    width: 100%;
-  }
+.code-view table {
+  width: 100%;
 }
 
 .octicon-tiny {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index ef241661dd..b90e287b44 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3139,10 +3139,3 @@ td.blob-excerpt {
   transform: scale(105%);
   box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
 }
-
-.code-line-marker {
-  width: 13px;
-  height: 20px;
-  background-color: rgb(34 36 38 / 15%);
-  position: absolute;
-}
diff --git a/web_src/less/code/linebutton.less b/web_src/less/code/linebutton.less
new file mode 100644
index 0000000000..a2956ffc1f
--- /dev/null
+++ b/web_src/less/code/linebutton.less
@@ -0,0 +1,24 @@
+.code-view .lines-num:hover {
+  color: var(--color-text-dark) !important;
+}
+
+.code-line-menu {
+  width: auto !important;
+}
+
+.code-line-button {
+  background-color: var(--color-menu);
+  color: var(--color-text-light);
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  padding: 1px 10px;
+  position: absolute;
+  font-family: var(--fonts-regular);
+  left: 0;
+  transform: translateX(-70%);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
diff --git a/web_src/less/index.less b/web_src/less/index.less
index f52953f2a4..d96fe3df82 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -11,6 +11,7 @@
 @import "./features/projects.less";
 @import "./markup/content.less";
 @import "./markup/mermaid.less";
+@import "./code/linebutton.less";
 
 @import "./chroma/base.less";
 @import "./chroma/light.less";
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index c493a255c7..e638f3b461 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -153,12 +153,6 @@
   background: #353945;
 }
 
-.ui.link.list .item,
-.ui.link.list a.item,
-.ui.link.list .item a:not(.ui) {
-  color: #dbdbdb;
-}
-
 .ui.red.label,
 .ui.red.labels .label {
   background-color: #7d3434 !important;