n8n/packages/editor-ui/src/styles/autocomplete-theme.scss
Giulio Andreini 0746783e02
refactor(editor): Color palette updates, introduce dark mode (#6980)
Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Mutasem <mutdmour@gmail.com>
2023-11-01 13:33:36 +01:00

74 lines
1.6 KiB
SCSS

.cm-tooltip-autocomplete:after {
padding: var(--spacing-2xs) var(--spacing-s);
border-top: 1px solid var(--color-foreground-dark);
}
.code-node-editor .cm-tooltip-autocomplete:after {
display: block;
content: 'n8n supports all JavaScript functions, including those not listed.';
}
// Custom autocomplete item type icons
// 1. Native and n8n extension functions:
.cm-completionIcon-extension-function,
.cm-completionIcon-native-function {
&::after {
content: 'ƒ';
}
}
.cm-tooltip-autocomplete {
background-color: var(--color-background-xlight) !important;
.cm-tooltip {
overflow: hidden;
text-overflow: ellipsis;
}
li .cm-completionLabel {
color: var(--color-success);
}
}
.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] {
background-color: var(--color-autocomplete-selected-background);
}
.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel {
color: var(--color-autocomplete-selected-font) !important;
font-weight: 600;
}
.autocomplete-info-container {
display: flex;
flex-direction: column;
padding: var(--spacing-4xs) 0;
}
.cm-completionInfo {
background-color: var(--color-background-xlight) !important;
.autocomplete-info-header {
color: var(--color-text-dark);
line-height: var(--font-line-height-compact);
margin-bottom: var(--spacing-2xs);
}
.autocomplete-info-name {
color: var(--color-success);
font-weight: var(--font-weight-bold);
}
.autocomplete-info-description {
code {
background-color: var(--color-background-base);
padding: 0 2px;
}
p {
line-height: var(--font-line-height-compact);
margin-top: 0;
margin-bottom: var(--spacing-4xs);
}
}
}