From 0bb4c1cde24052b535de5770e1db3d3279afe32b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 15 Jul 2024 01:22:48 +0200
Subject: [PATCH] Code editor theme enhancements (#31629)

1. Fixed border-radius
2. Monaco ignores the alpha channel on the shadow color, introduce
`color-shadow-opaque`
3. Remove scrollbar color which follows
https://github.com/go-gitea/gitea/pull/29800

Before:

<img width="34" alt="Screenshot 2024-07-13 at 15 38 18"
src="https://github.com/user-attachments/assets/042d9bde-6db9-4467-a2a4-8f61ecc773eb">
<img width="35" alt="Screenshot 2024-07-13 at 15 38 31"
src="https://github.com/user-attachments/assets/04146ee0-551c-4ff2-9636-bd119b33595a">


After:

<img width="45" alt="Screenshot 2024-07-13 at 15 38 06"
src="https://github.com/user-attachments/assets/1f58fa5a-1289-4e45-83c9-18ca82a5e266">
<img width="39" alt="Screenshot 2024-07-13 at 21 16 56"
src="https://github.com/user-attachments/assets/e12ebe22-b29b-4798-9f0d-4c100f311562">
---
 templates/repo/editor/edit.tmpl          |  2 +-
 web_src/css/features/codeeditor.css      | 13 +------------
 web_src/css/themes/theme-gitea-dark.css  |  1 +
 web_src/css/themes/theme-gitea-light.css |  1 +
 web_src/js/features/codeeditor.ts        |  2 +-
 5 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index e990177d8..c55682682 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -36,7 +36,7 @@
 					</div>
 				</div>
 				<div class="ui bottom attached segment tw-p-0">
-					<div class="ui active tab tw-rounded" data-tab="write">
+					<div class="ui active tab tw-rounded-b" data-tab="write">
 						<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
 							data-url="{{.Repository.Link}}/markup"
 							data-context="{{.RepoLink}}"
diff --git a/web_src/css/features/codeeditor.css b/web_src/css/features/codeeditor.css
index 2a8accbcc..8df3429b0 100644
--- a/web_src/css/features/codeeditor.css
+++ b/web_src/css/features/codeeditor.css
@@ -23,18 +23,7 @@
 
 .monaco-editor,
 .monaco-editor .overflow-guard {
-  border-radius: var(--border-radius);
-}
-
-/* these seem unthemeable */
-.monaco-scrollable-element > .scrollbar > .slider {
-  background: var(--color-primary) !important;
-}
-.monaco-scrollable-element > .scrollbar > .slider:hover {
-  background: var(--color-primary-dark-1) !important;
-}
-.monaco-scrollable-element > .scrollbar > .slider:active {
-  background: var(--color-primary-dark-2) !important;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
 /* fomantic styles destroy this element only visible on IOS, restore it */
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 45102b64f..85de7e210 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -212,6 +212,7 @@
   --color-button: #171a1e;
   --color-code-bg: #14171a;
   --color-shadow: #00001758;
+  --color-shadow-opaque: #000017;
   --color-secondary-bg: #2a3137;
   --color-expand-button: #2f363d;
   --color-placeholder-text: var(--color-text-light-3);
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 8c7fc8a00..0bdfd076d 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -212,6 +212,7 @@
   --color-button: #f8f9fb;
   --color-code-bg: #fafdff;
   --color-shadow: #00001726;
+  --color-shadow-opaque: #c7ced5;
   --color-secondary-bg: #f2f5f8;
   --color-expand-button: #cfe8fa;
   --color-placeholder-text: var(--color-text-light-3);
diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts
index 539db0e96..9a854b265 100644
--- a/web_src/js/features/codeeditor.ts
+++ b/web_src/js/features/codeeditor.ts
@@ -96,7 +96,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
       'input.background': getColor('--color-input-background'),
       'input.border': getColor('--color-input-border'),
       'input.foreground': getColor('--color-input-text'),
-      'scrollbar.shadow': getColor('--color-shadow'),
+      'scrollbar.shadow': getColor('--color-shadow-opaque'),
       'progressBar.background': getColor('--color-primary'),
       'focusBorder': '#0000', // prevent blue border
     },