remove code sidebar, remove 1 var and introduce 2

Author: silverwind

templates/repo/blame.tmpl

@@ -53,7 +53,7 @@
 							</td>
 							<td class="lines-blame-btn">
 								{{if $row.PreviousSha}}
-									<a href="{{$row.PreviousShaURL}}" data-tooltip-content='{{ctx.Locale.Tr "repo.blame_prior"}}'>
+									<a role="button" class="muted" href="{{$row.PreviousShaURL}}" data-tooltip-content='{{ctx.Locale.Tr "repo.blame_prior"}}'>
 										{{svg "octicon-versions"}}
 									</a>
 								{{end}}

web_src/css/base.css

@@ -1421,7 +1421,6 @@ a.ui.active.label:hover {
   padding-left: 10px;
   padding-right: 10px;
   text-align: right !important;
-  background-color: var(--color-code-sidebar-bg);
   width: 2%;
 }
 
@@ -1483,22 +1482,30 @@ a.ui.active.label:hover {
 }
 
 .lines-code {
-  background-color: var(--color-code-bg);
   padding-left: 5px;
 }
 
-.file-view tr.active,
+.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-active-line) !important;
+  background: var(--color-highlight-bg) !important;
 }
 
-.blame .lines-num {
-  padding: 0 !important;
-  background-color: var(--color-code-sidebar-bg);
+.file-view tr.active .lines-num {
+  position: relative;
 }
 
-.blame .lines-code {
-  padding: 0 !important;
+.file-view tr.active .lines-num:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: var(--color-highlight-fg);
 }
 
 .code-inner {
@@ -1518,7 +1525,6 @@ a.ui.active.label:hover {
   vertical-align: top;
   color: var(--color-text-light-2);
   padding: 0 !important;
-  background: var(--color-code-sidebar-bg);
   width: 1%;
 }
 
@@ -1568,6 +1574,11 @@ a.ui.active.label:hover {
   border-bottom: 1px solid var(--color-secondary);
 }
 
+.code-view {
+  background: var(--color-code-bg);
+  border-radius: var(--border-radius);
+}
+
 .code-view table {
   width: 100%;
 }

web_src/css/chroma/base.css

@@ -1,7 +1,3 @@
-.chroma {
-  background-color: var(--color-code-bg);
-}
-
 /* LineTableTD */
 .chroma .lntd {
   vertical-align: top;

web_src/css/themes/theme-gitea-dark.css

@@ -207,8 +207,7 @@
   --color-markup-table-row: #e8e8ff06;
   --color-markup-code-block: #e8e8ff16;
   --color-button: #151a1e;
-  --color-code-bg: #101315;
-  --color-code-sidebar-bg: #1b1f22;
+  --color-code-bg: #121518;
   --color-shadow: #00001758;
   --color-secondary-bg: #2f3138;
   --color-expand-button: #2b353e;
@@ -233,7 +232,8 @@
   --color-label-active-bg: #73828eff;
   --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-5);
-  --color-active-line: #39301e;
+  --color-highlight-fg: #877147;
+  --color-highlight-bg: #39301e;
   --color-overlay-backdrop: #080808c0;
   accent-color: var(--color-accent);
   color-scheme: dark;

web_src/css/themes/theme-gitea-light.css

@@ -208,7 +208,6 @@
   --color-markup-code-block: #00001710;
   --color-button: #f8f9fb;
   --color-code-bg: #fafdff;
-  --color-code-sidebar-bg: #f2f5f8;
   --color-shadow: #00001726;
   --color-secondary-bg: #f2f5f8;
   --color-expand-button: #cfe8fa;
@@ -233,7 +232,8 @@
   --color-label-active-bg: #949da6ff;
   --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-6);
-  --color-active-line: #fffbdd;
+  --color-highlight-fg: #eed200;
+  --color-highlight-bg: #fffbdd;
   --color-overlay-backdrop: #080808c0;
   accent-color: var(--color-accent);
   color-scheme: light;