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 #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">
go-gitea · Jul 14, 2024 · 0bb4c1c · 0bb4c1c
1 parent 0f53324
commit 0bb4c1c
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
     },