mirror of
https://github.com/portainer/portainer.git
synced 2025-07-22 06:49:40 +02:00
feat(helm): helm actions [r8s-259] (#715)
Co-authored-by: James Player <james.player@portainer.io> Co-authored-by: Cara Ryan <cara.ryan@portainer.io> Co-authored-by: stevensbkang <skan070@gmail.com>
This commit is contained in:
Ali
GitHub
parent
dfa32b6755
commit
4ee349bd6b
117 changed files with 4161 additions and 696 deletions
206
app/react/components/CodeEditor/CodeEditor.module.css
Normal file
206
app/react/components/CodeEditor/CodeEditor.module.css
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
.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-cm-comment-color: var(--ui-orange-6);
|
||||
--text-cm-variable-name-color: var(--ui-green-8);
|
||||
--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);
|
||||
--bg-tooltip-color: var(--white-color);
|
||||
--text-tooltip-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);
|
||||
--bg-tooltip-color: var(--grey-3);
|
||||
--text-tooltip-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);
|
||||
--bg-tooltip-color: var(--black-color);
|
||||
--text-tooltip-color: var(--white-color);
|
||||
}
|
||||
|
||||
.root :global(.cm-editor .cm-gutters) {
|
||||
border-right: 0px;
|
||||
@apply bg-gray-2 th-dark:bg-gray-10 th-highcontrast:bg-black;
|
||||
}
|
||||
|
||||
.root :global(.cm-merge-b) {
|
||||
@apply border-0 border-l border-solid border-l-gray-5 th-dark:border-l-gray-7 th-highcontrast:border-l-gray-2;
|
||||
}
|
||||
|
||||
.root :global(.cm-editor .cm-gutters .cm-lineNumbers .cm-gutterElement) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.codeEditor :global(.cm-editor),
|
||||
.codeEditor :global(.cm-editor .cm-scroller) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* code mirror merge side-by-side editor */
|
||||
.root :global(.cm-merge-a),
|
||||
.root :global(.cm-merge-a .cm-scroller) {
|
||||
@apply !rounded-r-none;
|
||||
}
|
||||
|
||||
.root :global(.cm-merge-b),
|
||||
.root :global(.cm-merge-b .cm-scroller) {
|
||||
@apply !rounded-l-none;
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
background-image: none;
|
||||
border-radius: 4px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.root :global(.cm-button[name='next']),
|
||||
.root :global(.cm-button[name='replace']) {
|
||||
@apply border-blue-8 bg-blue-8 text-white;
|
||||
@apply hover:border-blue-9 hover:bg-blue-9 hover:text-white;
|
||||
@apply th-dark:hover:border-blue-7 th-dark:hover:bg-blue-7;
|
||||
}
|
||||
|
||||
.root :global(.cm-button[name='prev']),
|
||||
.root :global(.cm-button[name='replaceAll']) {
|
||||
@apply border border-solid;
|
||||
|
||||
@apply border-blue-8 bg-blue-2 text-blue-9;
|
||||
@apply hover:bg-blue-3;
|
||||
|
||||
@apply th-dark:border-blue-7 th-dark:bg-gray-10 th-dark:text-blue-3;
|
||||
@apply th-dark:hover:bg-blue-11;
|
||||
}
|
||||
|
||||
.root :global(.cm-button[name='select']) {
|
||||
@apply border-gray-5 bg-white text-gray-9;
|
||||
@apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-10;
|
||||
|
||||
/* dark mode */
|
||||
@apply th-dark:border-gray-warm-7 th-dark:bg-gray-iron-10 th-dark:text-gray-warm-4;
|
||||
@apply th-dark:hover:border-gray-6 th-dark:hover:bg-gray-iron-9 th-dark:hover:text-gray-warm-4;
|
||||
|
||||
@apply th-highcontrast:border-gray-2 th-highcontrast:bg-black th-highcontrast:text-white;
|
||||
@apply th-highcontrast:hover:border-gray-6 th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:text-gray-warm-4;
|
||||
}
|
||||
|
||||
.root :global(.cm-search) label {
|
||||
font-weight: 400;
|
||||
@apply text-gray-7;
|
||||
@apply th-dark:text-gray-warm-3;
|
||||
@apply th-highcontrast:text-white;
|
||||
}
|
||||
|
||||
.root :global(.cm-search) input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.root :global(.cm-textfield) {
|
||||
border: 1px solid var(--border-form-control-color);
|
||||
background-color: var(--bg-inputbox);
|
||||
color: var(--text-form-control-color);
|
||||
}
|
||||
|
||||
.root :global(.cm-content[contenteditable='true']) {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.root :global(.cm-content[aria-readonly='true']) {
|
||||
@apply bg-gray-3;
|
||||
@apply th-dark:bg-gray-iron-10;
|
||||
@apply th-highcontrast:bg-black;
|
||||
}
|
||||
|
||||
.root :global(.cm-textfield) {
|
||||
border: 1px solid var(--border-form-control-color);
|
||||
background-color: var(--bg-inputbox);
|
||||
color: var(--text-form-control-color);
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.root :global(.cm-button) {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.root :global(.cm-panel.cm-search label) {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
/* Tooltip styles for all themes */
|
||||
.root :global(.cm-tooltip) {
|
||||
@apply bg-white border border-solid border-gray-5 shadow-md text-xs rounded h-min;
|
||||
@apply th-dark:bg-gray-9 th-dark:border-gray-7 th-dark:text-white;
|
||||
@apply th-highcontrast:bg-black th-highcontrast:border-gray-7 th-highcontrast:text-white;
|
||||
}
|
||||
|
||||
/* Hide the completionInfo tooltip when it's empty */
|
||||
/* note: I only chose the complicated selector because the simple selector `.cm-tooltip.cm-completionInfo:empty` didn't work */
|
||||
.root :global(.cm-tooltip.cm-completionInfo:not(:has(*:not(:empty)))) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Active line gutter styles for all themes */
|
||||
.root :global(.cm-activeLineGutter) {
|
||||
@apply bg-inherit;
|
||||
}
|
||||
|
||||
/* Collapsed lines gutter styles for all themes */
|
||||
.root :global(.cm-editor .cm-collapsedLines) {
|
||||
/* inherit bg, instead of using styles from library */
|
||||
background: inherit;
|
||||
@apply bg-blue-2 th-dark:bg-blue-10 th-highcontrast:bg-white th-dark:text-white th-highcontrast:text-black;
|
||||
}
|
||||
.root :global(.cm-editor .cm-collapsedLines):hover {
|
||||
@apply bg-blue-3 th-dark:bg-blue-9 th-highcontrast:bg-white th-dark:text-white th-highcontrast:text-black;
|
||||
}
|
||||
|
||||
.root :global(.cm-editor .cm-collapsedLines:before) {
|
||||
content: '↧ Expand all';
|
||||
background: var(--bg-tooltip-color);
|
||||
color: var(--text-tooltip-color);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
margin-left: 4px;
|
||||
}
|
||||
/* override the default content */
|
||||
.root :global(.cm-editor .cm-collapsedLines:after) {
|
||||
content: '';
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue