Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-19 05:19:39 +02:00
Code Issues Releases Activity

fix(ui/code-editor): apply theme colors [EE-5104] (#8558)

Browse source 
* fix(ui/code-editor): apply theme colors [EE-5104]

fix [EE-5104]

* fix(kube/yaml): expand yaml inspector

* fix(ui/code-editor): have default height

* fix(ui/code-editor): boolean color

* fix(ui/code-editor): style search bar
This commit is contained in:
Chaim Lev-Ari 2023-03-06 09:13:42 +02:00 • committed by GitHub
parent 07100258cd
commit 03712966e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 128 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

72
app/react/components/CodeEditor.module.css Normal file
View file

@ -0,0 +1,72 @@
.root {
--text-cm-default-color: var(--blue-1);
--text-cm-meta-color: var(--black-color);
--text-cm-string-color: var(--red-3);
--text-cm-number-color: var(--green-1);
--text-cm-keyword-color: var(--ui-blue-dark-9);
--text-codemirror-color: var(--black-color);
--bg-codemirror-color: var(--white-color);
--bg-codemirror-gutters-color: var(--grey-17);
--bg-codemirror-selected-color: var(--grey-22);
--border-codemirror-cursor-color: var(--black-color);
}
:global([theme='dark']) .root {
--text-cm-default-color: var(--blue-10);
--text-cm-meta-color: var(--white-color);
--text-cm-string-color: var(--red-5);
--text-cm-number-color: var(--green-2);
--text-cm-keyword-color: var(--ui-purple-6);
--text-codemirror-color: var(--white-color);
--bg-codemirror-color: var(--grey-2);
--bg-codemirror-gutters-color: var(--grey-3);
--bg-codemirror-selected-color: var(--grey-3);
--border-codemirror-cursor-color: var(--white-color);
}
:global([theme='highcontrast']) .root {
--text-cm-default-color: var(--blue-9);
--text-cm-meta-color: var(--white-color);
--text-cm-string-color: var(--red-7);
--text-cm-number-color: var(--green-2);
--text-cm-keyword-color: var(--ui-purple-6);
--text-codemirror-color: var(--white-color);
--bg-codemirror-color: var(--black-color);
--bg-codemirror-gutters-color: var(--ui-gray-warm-11);
--bg-codemirror-selected-color: var(--grey-3);
--border-codemirror-cursor-color: var(--white-color);
}
.root :global(.cm-editor .cm-gutters) {
border-right: 0px;
}
.root :global(.cm-editor .cm-gutters .cm-lineNumbers .cm-gutterElement) {
text-align: left;
}
.root :global(.cm-editor),
.root :global(.cm-editor .cm-scroller) {
border-radius: 8px;
}
/* Search Panel */
/* Ideally we would use a react component for that, but this is the easy solution for onw */
.root :global(.cm-panels.cm-panels-bottom) {
background-color: var(--bg-codemirror-gutters-color);
border-top-color: transparent;
color: var(--text-codemirror-color);
}
.root :global(.cm-button) {
@apply bg-blue-8;
color: var(--text-codemirror-color);
background-image: none;
}
.root :global(.cm-textfield) {
border: 1px solid var(--border-form-control-color);
background-color: var(--bg-inputbox);
color: var(--text-form-control-color);
}