mirror of
https://github.com/go-gitea/gitea
synced 2024-12-24 19:54:41 +01:00
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">
This commit is contained in:
parent
0f53324182
commit
0bb4c1cde2
5 changed files with 5 additions and 14 deletions
|
@ -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}}"
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue