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

@@ -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}}"

web_src/css/features/codeeditor.css

@@ -23,18 +23,7 @@
 
 .monaco-editor,
 .monaco-editor .overflow-guard {
-  border-radius: var(--border-radius);
+  border-radius: 0 0 var(--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;
 }
 
 /* fomantic styles destroy this element only visible on IOS, restore it */

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);

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);

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
     },