MarcoBuster/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2024-12-22 12:17:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Code editor theme enhancements (#31629)

Browse Source 
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">
This commit is contained in:
silverwind 2024-07-15 01:22:48 +02:00 committed by GitHub
parent 0f53324182
commit 0bb4c1cde2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 5 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/editor/edit.tmpl
View File

@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<div class="ui bottom attached segment tw-p-0"> <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}}" <textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
data-url="{{.Repository.Link}}/markup" data-url="{{.Repository.Link}}/markup"
data-context="{{.RepoLink}}" data-context="{{.RepoLink}}"

13
web_src/css/features/codeeditor.css
View File

@ -23,18 +23,7 @@
.monaco-editor, .monaco-editor,
.monaco-editor .overflow-guard { .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 */ /* fomantic styles destroy this element only visible on IOS, restore it */

1
web_src/css/themes/theme-gitea-dark.css
View File

@ -212,6 +212,7 @@
--color-button: #171a1e; --color-button: #171a1e;
--color-code-bg: #14171a; --color-code-bg: #14171a;
--color-shadow: #00001758; --color-shadow: #00001758;
--color-shadow-opaque: #000017;
--color-secondary-bg: #2a3137; --color-secondary-bg: #2a3137;
--color-expand-button: #2f363d; --color-expand-button: #2f363d;
--color-placeholder-text: var(--color-text-light-3); --color-placeholder-text: var(--color-text-light-3);

1
web_src/css/themes/theme-gitea-light.css
View File

@ -212,6 +212,7 @@
--color-button: #f8f9fb; --color-button: #f8f9fb;
--color-code-bg: #fafdff; --color-code-bg: #fafdff;
--color-shadow: #00001726; --color-shadow: #00001726;
--color-shadow-opaque: #c7ced5;
--color-secondary-bg: #f2f5f8; --color-secondary-bg: #f2f5f8;
--color-expand-button: #cfe8fa; --color-expand-button: #cfe8fa;
--color-placeholder-text: var(--color-text-light-3); --color-placeholder-text: var(--color-text-light-3);

2
web_src/js/features/codeeditor.ts
View File

@ -96,7 +96,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
'input.background': getColor('--color-input-background'), 'input.background': getColor('--color-input-background'),
'input.border': getColor('--color-input-border'), 'input.border': getColor('--color-input-border'),
'input.foreground': getColor('--color-input-text'), 'input.foreground': getColor('--color-input-text'),
'scrollbar.shadow': getColor('--color-shadow'), 'scrollbar.shadow': getColor('--color-shadow-opaque'),
'progressBar.background': getColor('--color-primary'), 'progressBar.background': getColor('--color-primary'),
'focusBorder': '#0000', // prevent blue border 'focusBorder': '#0000', // prevent blue border
}, },