frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Merge pull request #3692 from bonanitech/use-css-variables

Browse Source 
Move all colours to CSS variables
This commit is contained in:
Nick O'Leary 2022-06-29 20:54:25 +01:00 committed by GitHub
commit c13d2ac044
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 1174 additions and 941 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/node_modules/@node-red/editor-client/src/sass/ace.scss vendored
View File

@ -2,48 +2,48 @@
.ace_read-only { .ace_read-only {
.ace_scroller { .ace_scroller {
background: $text-editor-background-disabled; background: var(--red-ui-text-editor-background-disabled);
color: $text-editor-color-disabled; color: var(--red-ui-text-editor-color-disabled);
} }
.ace_cursor { .ace_cursor {
color: transparent !important; color: transparent !important;
} }
} }
.ace_gutter { .ace_gutter {
background: $text-editor-gutter-background; background: var(--red-ui-text-editor-gutter-background);
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
.ace_scroller { .ace_scroller {
background: $text-editor-background; background: var(--red-ui-text-editor-background);
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
color: $text-editor-color; color: var(--red-ui-text-editor-color);
} }
.ace_marker-layer .ace_active-line { .ace_marker-layer .ace_active-line {
background: $text-editor-active-line-background; background: var(--red-ui-text-editor-active-line-background);
} }
.ace_marker-layer .ace_selection { .ace_marker-layer .ace_selection {
background: $text-editor-selection-background; background: var(--red-ui-text-editor-selection-background);
border-radius: 1px; border-radius: 1px;
} }
.ace_gutter-cell { .ace_gutter-cell {
color: $text-editor-gutter-color; color: var(--red-ui-text-editor-gutter-color);
} }
.ace_gutter-active-line { .ace_gutter-active-line {
background: $text-editor-gutter-active-line-background; background: var(--red-ui-text-editor-gutter-active-line-background);
} }
.ace_tooltip { .ace_tooltip {
font-family: $primary-font; font-family: var(--red-ui-primary-font);
line-height: 1.4em; line-height: 1.4em;
max-width: 400px; max-width: 400px;
white-space: normal; white-space: normal;
background-image: none; background-image: none;
background: $popover-background; background: var(--red-ui-popover-background);
color: $popover-color; color: var(--red-ui-popover-color);
border-radius: 4px; border-radius: 4px;
@include component-shadow; @include component-shadow;
border-color: $popover-background; border-color: var(--red-ui-popover-background);
} }
.ace_content { .ace_content {
line-height: 1; line-height: 1;
@ -55,14 +55,14 @@
#red-ui-event-log-editor { #red-ui-event-log-editor {
.ace_scroller { .ace_scroller {
background: $event-log-background; background: var(--red-ui-event-log-background);
color: $event-log-color; color: var(--red-ui-event-log-color);
} }
.ace_marker-layer .ace_active-line { .ace_marker-layer .ace_active-line {
background: $event-log-active-line-background; background: var(--red-ui-event-log-active-line-background);
} }
.ace_marker-layer .ace_selection { .ace_marker-layer .ace_selection {
background: $event-log-selection-background; background: var(--red-ui-event-log-selection-background);
} }
} }
} }

44
packages/node_modules/@node-red/editor-client/src/sass/base.scss vendored
View File

@ -20,12 +20,12 @@ body {
} }
.red-ui-editor { .red-ui-editor {
font-size: $primary-font-size; font-size: var(--red-ui-primary-font-size);
font-family: $primary-font; font-family: var(--red-ui-primary-font);
padding: 0; padding: 0;
margin: 0; margin: 0;
background: $primary-background; background: var(--red-ui-primary-background);
color: $primary-text-color; color: var(--red-ui-primary-text-color);
line-height: 20px; line-height: 20px;
} }
@ -63,15 +63,15 @@ body {
.red-ui-icon-picker { .red-ui-icon-picker {
a { a {
text-decoration: none; text-decoration: none;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
} }
a:hover, a:hover,
a:focus { a:focus {
text-decoration: none; text-decoration: none;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
} }
a:focus { a:focus {
outline: 1px solid $form-input-focus-color; outline: 1px solid var(--red-ui-form-input-focus-color);
} }
p { p {
@ -130,7 +130,7 @@ body {
hr { hr {
margin: 20px 0; margin: 20px 0;
border: 0; border: 0;
border-top: 1px solid $tertiary-border-color; border-top: 1px solid var(--red-ui-tertiary-border-color);
} }
@ -150,22 +150,22 @@ body {
mask-position: 50% 50%; mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $spinner-color; background-color: var(--red-ui-spinner-color);
} }
.red-ui-font-code { .red-ui-font-code {
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
font-size: $primary-font-size; font-size: var(--red-ui-primary-font-size);
color: $text-color-code; color: var(--red-ui-text-color-code);
white-space: nowrap; white-space: nowrap;
} }
code { code {
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
font-size: $primary-font-size; font-size: var(--red-ui-primary-font-size);
padding: 0px; padding: 0px;
margin: 1px; margin: 1px;
color: $text-color-code; color: var(--red-ui-text-color-code);
white-space: nowrap; white-space: nowrap;
} }
@ -177,8 +177,8 @@ body {
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
background-color:$tertiary-background; background-color:var(--red-ui-tertiary-background);
border: 1px solid $tertiary-border-color; border: 1px solid var(--red-ui-tertiary-border-color);
border-radius: 2px; border-radius: 2px;
} }
@ -217,8 +217,8 @@ body {
blockquote { blockquote {
padding: 0 0 0 15px; padding: 0 0 0 15px;
margin: 0 0 20px; margin: 0 0 20px;
border-left: 4px solid $secondary-border-color; border-left: 4px solid var(--red-ui-secondary-border-color);
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
p { p {
font-size: 14px; font-size: 14px;
@ -244,7 +244,7 @@ body {
right: 1px; right: 1px;
text-align: center; text-align: center;
padding: 40px; padding: 40px;
background: $secondary-background; background: var(--red-ui-secondary-background);
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -258,14 +258,14 @@ body {
width: 80px; width: 80px;
} }
&.red-ui-component-spinner-sidebar { &.red-ui-component-spinner-sidebar {
background: $secondary-background; background: var(--red-ui-secondary-background);
padding:0; padding:0;
img { img {
width: 40px; width: 40px;
} }
} }
&.projects-version-control-spinner-sidebar { &.projects-version-control-spinner-sidebar {
background: $secondary-background; background: var(--red-ui-secondary-background);
padding:0; padding:0;
img { img {
width: 20px; width: 20px;

4
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -112,9 +112,13 @@ $tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
$tab-badge-color: $tertiary-text-color; $tab-badge-color: $tertiary-text-color;
$tab-background: $secondary-background; $tab-background: $secondary-background;
$tab-background-active: $secondary-background; $tab-background-active: $secondary-background;
$tab-background-active-alpha: rgba($tab-background-active, 0.001);
$tab-background-selected: $secondary-background-selected; $tab-background-selected: $secondary-background-selected;
$tab-background-selected-alpha: rgba($tab-background-selected, 0.001);
$tab-background-inactive: $secondary-background-inactive; $tab-background-inactive: $secondary-background-inactive;
$tab-background-inactive-alpha: rgba($tab-background-inactive, 0.001);
$tab-background-hover: $secondary-background-hover; $tab-background-hover: $secondary-background-hover;
$tab-background-hover-alpha: rgba($tab-background-hover, 0.001);
$palette-header-background: $primary-background; $palette-header-background: $primary-background;
$palette-header-color: $header-text-color; $palette-header-color: $header-text-color;

68
packages/node_modules/@node-red/editor-client/src/sass/debug.scss vendored
View File

@ -17,7 +17,7 @@
.red-ui-debug-window { .red-ui-debug-window {
padding:0; padding:0;
margin:0; margin:0;
background: $secondary-background; background: var(--red-ui-secondary-background);
line-height: 20px; line-height: 20px;
.red-ui-debug-msg-payload { .red-ui-debug-msg-payload {
font-size: 14px; font-size: 14px;
@ -38,15 +38,15 @@
left: 0px; left: 0px;
right: 0px; right: 0px;
z-index: 20; z-index: 20;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
padding: 10px; padding: 10px;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
box-shadow: 0 2px 6px $shadow; box-shadow: 0 2px 6px var(--red-ui-shadow);
} }
#red-ui-sidebar-debug-filter-node-list-row { #red-ui-sidebar-debug-filter-node-list-row {
.red-ui-treeList-label.disabled { .red-ui-treeList-label.disabled {
font-style: italic; font-style: italic;
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
.red-ui-treeList-label { .red-ui-treeList-label {
@ -57,22 +57,22 @@
background: inherit; background: inherit;
} }
&.focus, &.focus .red-ui-treeList-sublabel-text { &.focus, &.focus .red-ui-treeList-sublabel-text {
background: $list-item-background-hover !important; background: var(--red-ui-list-item-background-hover) !important;
} }
} }
} }
.red-ui-debug-msg { .red-ui-debug-msg {
position: relative; position: relative;
border-bottom: 1px solid $debug-message-border; border-bottom: 1px solid var(--red-ui-debug-message-border);
border-left: 8px solid $debug-message-border; border-left: 8px solid var(--red-ui-debug-message-border);
border-right: 8px solid $debug-message-border; border-right: 8px solid var(--red-ui-debug-message-border);
padding: 2px; padding: 2px;
&>.red-ui-debug-msg-meta .red-ui-debug-msg-tools { &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
display: none; display: none;
} }
&.red-ui-debug-msg-hover { &.red-ui-debug-msg-hover {
border-right-color: $debug-message-border-hover; border-right-color: var(--red-ui-debug-message-border-hover);
&>.red-ui-debug-msg-meta .red-ui-debug-msg-tools { &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
display: inline-block; display: inline-block;
} }
@ -86,7 +86,7 @@
display: inline-block; display: inline-block;
} }
&:hover { &:hover {
background: $debug-message-background-hover; background: var(--red-ui-debug-message-background-hover);
&>.red-ui-debug-msg-tools { &>.red-ui-debug-msg-tools {
.red-ui-debug-msg-tools-copy { .red-ui-debug-msg-tools-copy {
display: inline-block; display: inline-block;
@ -120,9 +120,9 @@
} }
.red-ui-debug-msg-meta { .red-ui-debug-msg-meta {
background: $debug-message-background; background: var(--red-ui-debug-message-background);
font-size: 11px; font-size: 11px;
color: $secondary-text-color-inactive; color: var(--red-ui-secondary-text-color-inactive);
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.red-ui-debug-msg-date { .red-ui-debug-msg-date {
@ -131,11 +131,11 @@
} }
.red-ui-debug-msg-topic { .red-ui-debug-msg-topic {
display: block; display: block;
color: $debug-message-text-color-meta; color: var(--red-ui-debug-message-text-color-meta);
} }
.red-ui-debug-msg-name { .red-ui-debug-msg-name {
padding: 1px 0px; padding: 1px 0px;
color: $secondary-text-color-inactive; color: var(--red-ui-secondary-text-color-inactive);
white-space: nowrap; white-space: nowrap;
} }
.red-ui-debug-msg-tools { .red-ui-debug-msg-tools {
@ -152,39 +152,39 @@
.red-ui-debug-msg-payload { .red-ui-debug-msg-payload {
display: block; display: block;
padding: 2px; padding: 2px;
background: $debug-message-background; background: var(--red-ui-debug-message-background);
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
font-size: 13px !important; font-size: 13px !important;
} }
.red-ui-debug-msg-level-log { .red-ui-debug-msg-level-log {
border-left-color: $debug-message-border; border-left-color: var(--red-ui-debug-message-border);
border-right-color: $debug-message-border; border-right-color: var(--red-ui-debug-message-border);
} }
.red-ui-debug-msg-level-30 { .red-ui-debug-msg-level-30 {
border-left-color: $debug-message-border-warning; border-left-color: var(--red-ui-debug-message-border-warning);
border-right-color: $debug-message-border-warning; border-right-color: var(--red-ui-debug-message-border-warning);
} }
.red-ui-debug-msg-level-20 { .red-ui-debug-msg-level-20 {
border-left-color: $debug-message-border-error; border-left-color: var(--red-ui-debug-message-border-error);
border-right-color: $debug-message-border-error; border-right-color: var(--red-ui-debug-message-border-error);
} }
.red-ui-debug-msg-object-entry { .red-ui-debug-msg-object-entry {
position: relative; position: relative;
padding-left: 15px; padding-left: 15px;
} }
.red-ui-debug-msg-element { .red-ui-debug-msg-element {
color: $debug-message-text-color; color: var(--red-ui-debug-message-text-color);
line-height: 1.3em; line-height: 1.3em;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.red-ui-debug-msg-object-key { .red-ui-debug-msg-object-key {
color: $debug-message-text-color-object-key; color: var(--red-ui-debug-message-text-color-object-key);
} }
.red-ui-debug-msg-object-value { .red-ui-debug-msg-object-value {
} }
.red-ui-debug-msg-object-handle { .red-ui-debug-msg-object-handle {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-size: 1em; font-size: 1em;
width: 1em; width: 1em;
text-align: center; text-align: center;
@ -219,17 +219,17 @@
display:none; display:none;
} }
.red-ui-debug-msg-object-entry pre { .red-ui-debug-msg-object-entry pre {
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
font-size: 13px; font-size: 13px;
line-height: 1.2em; line-height: 1.2em;
margin: 0 0 0 -1em; margin: 0 0 0 -1em;
} }
.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; } .red-ui-debug-msg-type-other { color: var(--red-ui-debug-message-text-color-msg-type-other); }
.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; } .red-ui-debug-msg-type-string { color: var(--red-ui-debug-message-text-color-msg-type-string); }
.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;} .red-ui-debug-msg-type-null { color: var(--red-ui-debug-message-text-color-msg-type-null); font-style: italic;}
.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;} .red-ui-debug-msg-type-meta { color: var(--red-ui-debug-message-text-color-msg-type-meta); font-style: italic;}
.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; }; .red-ui-debug-msg-type-number { color: var(--red-ui-debug-message-text-color-msg-type-number); }
.red-ui-debug-msg-type-number-toggle { cursor: pointer;} .red-ui-debug-msg-type-number-toggle { cursor: pointer;}
.red-ui-debug-msg-type-string { .red-ui-debug-msg-type-string {
@ -241,14 +241,14 @@
padding: 4px 2px 2px; padding: 4px 2px 2px;
position: relative; position: relative;
&.red-ui-debug-msg-row-pinned { &.red-ui-debug-msg-row-pinned {
background: $secondary-background-selected; background: var(--red-ui-secondary-background-selected);
} }
} }
.red-ui-debug-msg-expandable { .red-ui-debug-msg-expandable {
cursor: pointer; cursor: pointer;
} }
.red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle { .red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle {
color:$secondary-text-color-hover; color:var(--red-ui-secondary-text-color-hover);
} }
.red-ui-debug-msg-buffer-opts { .red-ui-debug-msg-buffer-opts {

188
packages/node_modules/@node-red/editor-client/src/sass/diff.scss vendored
View File

@ -23,11 +23,11 @@
.red-ui-editableList-container { .red-ui-editableList-container {
border-radius:1px; border-radius:1px;
padding:0; padding:0;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
} }
.red-ui-diff-list { .red-ui-diff-list {
li { li {
background: $tertiary-background; background: var(--red-ui-tertiary-background);
padding: 0px; padding: 0px;
border: none; border: none;
min-height: 0; min-height: 0;
@ -62,29 +62,29 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 50%; width: 50%;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
text-align: center; text-align: center;
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
border-color:$secondary-border-color; border-color:var(--red-ui-secondary-border-color);
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
} }
div:last-child { div:last-child {
border-right: 1px solid $secondary-border-color; border-right: 1px solid var(--red-ui-secondary-border-color);
} }
} }
.red-ui-diff-dialog-toolbar { .red-ui-diff-dialog-toolbar {
box-sizing: border-box; box-sizing: border-box;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
text-align: right; text-align: right;
padding: 8px 10px; padding: 8px 10px;
background: $primary-background; background: var(--red-ui-primary-background);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
white-space: nowrap; white-space: nowrap;
} }
.red-ui-diff-list-flow { .red-ui-diff-list-flow {
background: $secondary-background; background: var(--red-ui-secondary-background);
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 1px; border-radius: 1px;
overflow: hidden; overflow: hidden;
@ -114,10 +114,10 @@
font-size: 0.9em; font-size: 0.9em;
&:first-child { &:first-child {
border-top: 1px solid $tertiary-border-color; border-top: 1px solid var(--red-ui-tertiary-border-color);
} }
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid $tertiary-border-color; border-bottom: 1px solid var(--red-ui-tertiary-border-color);
} }
&.collapsed { &.collapsed {
@ -150,8 +150,8 @@
width: 100%; width: 100%;
} }
td, th { td, th {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
&:first-child { &:first-child {
border-left: none; border-left: none;
} }
@ -166,7 +166,7 @@
overflow:hidden; overflow:hidden;
} }
&:hover { &:hover {
background: $secondary-background-selected; background: var(--red-ui-secondary-background-selected);
} }
} }
@ -212,7 +212,7 @@
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
&:hover { &:hover {
background: $secondary-background-selected; background: var(--red-ui-secondary-background-selected);
} }
} }
.red-ui-diff-list-flow-title-meta { .red-ui-diff-list-flow-title-meta {
@ -223,7 +223,7 @@
.red-ui-diff-list-node-header { .red-ui-diff-list-node-header {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $secondary-background-selected; background: var(--red-ui-secondary-background-selected);
} }
} }
.red-ui-diff-list-node-icon { .red-ui-diff-list-node-icon {
@ -232,9 +232,9 @@
margin: 5px; margin: 5px;
width: 18px; width: 18px;
height: 15px; height: 15px;
background: $form-input-background; background: var(--red-ui-form-input-background);
border-radius: 2px; border-radius: 2px;
border: 1px solid $node-border; border: 1px solid var(--red-ui-node-border);
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -267,7 +267,7 @@
.red-ui-diff-status-deleted { .red-ui-diff-status-deleted {
cursor: default !important; cursor: default !important;
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-deleted; color: var(--red-ui-diff-state-deleted);
} }
.red-ui-diff-list-node-node { .red-ui-diff-list-node-node {
opacity: 0.5; opacity: 0.5;
@ -280,28 +280,28 @@
.red-ui-diff-status-added { .red-ui-diff-status-added {
cursor: default !important; cursor: default !important;
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-added; color: var(--red-ui-diff-state-added);
} }
} }
.red-ui-diff-status-moved { .red-ui-diff-status-moved {
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-moved; color: var(--red-ui-diff-state-moved);
} }
} }
.red-ui-diff-status-changed { .red-ui-diff-status-changed {
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-changed; color: var(--red-ui-diff-state-changed);
} }
} }
.red-ui-diff-status-unchanged { .red-ui-diff-status-unchanged {
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-unchanged; color: var(--red-ui-diff-state-unchanged);
} }
} }
.red-ui-diff-status-conflict { .red-ui-diff-status-conflict {
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-conflict; color: var(--red-ui-diff-state-conflict);
} }
} }
.red-ui-diff-list-node-title { .red-ui-diff-list-node-title {
@ -312,7 +312,7 @@
} }
.red-ui-diff-list-node-properties { .red-ui-diff-list-node-properties {
margin: 0; margin: 0;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
} }
.red-ui-diff-status { .red-ui-diff-status {
display: inline-block; display: inline-block;
@ -329,7 +329,7 @@
} }
.red-ui-diff-list-node-description { .red-ui-diff-list-node-description {
color: $form-text-color; color: var(--red-ui-form-text-color);
margin-right: 5px; margin-right: 5px;
padding-top: 5px; padding-top: 5px;
display: inline-block; display: inline-block;
@ -340,11 +340,11 @@
} }
} }
.red-ui-diff-state-added { color: $diff-state-added; } .red-ui-diff-state-added { color: var(--red-ui-diff-state-added); }
.red-ui-diff-state-deleted { color: $diff-state-deleted; } .red-ui-diff-state-deleted { color: var(--red-ui-diff-state-deleted); }
.red-ui-diff-state-changed { color: $diff-state-changed; } .red-ui-diff-state-changed { color: var(--red-ui-diff-state-changed); }
.red-ui-diff-state-unchanged { color: $diff-state-unchanged; } .red-ui-diff-state-unchanged { color: var(--red-ui-diff-state-unchanged); }
.red-ui-diff-state-conflicted { color: $diff-state-conflicted; } .red-ui-diff-state-conflicted { color: var(--red-ui-diff-state-conflicted); }
.red-ui-diff-list-node-cell { .red-ui-diff-list-node-cell {
@ -353,19 +353,19 @@
box-sizing: border-box; box-sizing: border-box;
width: calc( (100% - 20px) / 2); width: calc( (100% - 20px) / 2);
height: 32px; height: 32px;
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
padding-top: 2px; padding-top: 2px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.red-ui-diff-empty { .red-ui-diff-empty {
background: $secondary-background-disabled; background: var(--red-ui-secondary-background-disabled);
background: repeating-linear-gradient( background: repeating-linear-gradient(
20deg, 20deg,
$secondary-background, $secondary-background 5px, var(--red-ui-secondary-background), var(--red-ui-secondary-background) 5px,
$secondary-background-disabled 5px, var(--red-ui-secondary-background-disabled) 5px,
$secondary-background-disabled 10px var(--red-ui-secondary-background-disabled) 10px
); );
} }
.red-ui-diff-list-node-cell:first-child { .red-ui-diff-list-node-cell:first-child {
@ -425,10 +425,10 @@
background: none; background: none;
} }
&.red-ui-diff-status-changed { &.red-ui-diff-status-changed {
background: $diff-state-changed-background; background: var(--red-ui-diff-state-changed-background);
} }
&.red-ui-diff-status-conflict { &.red-ui-diff-status-conflict {
background: $diff-state-conflict-background; background: var(--red-ui-diff-state-conflict-background);
} }
} }
@ -439,42 +439,42 @@ label.red-ui-diff-selectbox {
bottom:0; bottom:0;
width: 35px; width: 35px;
text-align: center; text-align: center;
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
margin:0; margin:0;
input[type="radio"] { input[type="radio"] {
margin-top: 8px; margin-top: 8px;
} }
&:hover { &:hover {
background: $secondary-background-hover; background: var(--red-ui-secondary-background-hover);
} }
} }
.red-ui-diff-list-node-conflict.red-ui-diff-select-remote { .red-ui-diff-list-node-conflict.red-ui-diff-select-remote {
.red-ui-diff-list-node-remote { .red-ui-diff-list-node-remote {
background: $diff-state-added-background; background: var(--red-ui-diff-state-added-background);
label { label {
border-left-color: $diff-state-added-border; border-left-color: var(--red-ui-diff-state-added-border);
} }
} }
.red-ui-diff-list-node-local { .red-ui-diff-list-node-local {
background: $diff-state-deleted-background; background: var(--red-ui-diff-state-deleted-background);
label { label {
border-left-color: $diff-state-deleted-border; border-left-color: var(--red-ui-diff-state-deleted-border);
} }
} }
} }
.red-ui-diff-list-node-conflict.red-ui-diff-select-local { .red-ui-diff-list-node-conflict.red-ui-diff-select-local {
.red-ui-diff-list-node-local { .red-ui-diff-list-node-local {
background: $diff-state-added-background; background: var(--red-ui-diff-state-added-background);
label { label {
border-left-color: $diff-state-added-border; border-left-color: var(--red-ui-diff-state-added-border);
} }
} }
.red-ui-diff-list-node-remote { .red-ui-diff-list-node-remote {
background: $diff-state-deleted-background; background: var(--red-ui-diff-state-deleted-background);
label { label {
border-left-color: $diff-state-deleted-border; border-left-color: var(--red-ui-diff-state-deleted-border);
} }
} }
} }
@ -500,10 +500,10 @@ ul.red-ui-deploy-dialog-confirm-list {
width: 30px; width: 30px;
margin-right: 10px; margin-right: 10px;
&.fa-check { &.fa-check {
color: $text-color-success; color: var(--red-ui-text-color-success);
} }
&.fa-exclamation { &.fa-exclamation {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
} }
div { div {
@ -529,7 +529,7 @@ ul.red-ui-deploy-dialog-confirm-list {
table.red-ui-diff-text-content { table.red-ui-diff-text-content {
margin: 10px; margin: 10px;
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 3px; border-radius: 3px;
table-layout: fixed; table-layout: fixed;
width: calc(100% - 20px); width: calc(100% - 20px);
@ -538,88 +538,88 @@ ul.red-ui-deploy-dialog-confirm-list {
word-wrap: break-word; word-wrap: break-word;
} }
td.lineno { td.lineno {
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
text-align: right; text-align: right;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
background: $tertiary-background; background: var(--red-ui-tertiary-background);
padding: 1px 5px; padding: 1px 5px;
&.added { &.added {
background: $diff-state-added-header-background; background: var(--red-ui-diff-state-added-header-background);
} }
&.removed { &.removed {
background: $diff-state-deleted-header-background; background: var(--red-ui-diff-state-deleted-header-background);
} }
} }
td.lineno:nth-child(3) { td.lineno:nth-child(3) {
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
} }
td.linetext { td.linetext {
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
white-space: pre-wrap; white-space: pre-wrap;
padding: 1px 5px; padding: 1px 5px;
border-left: 1px solid $tertiary-border-color; border-left: 1px solid var(--red-ui-tertiary-border-color);
span.prefix { span.prefix {
width: 30px; width: 30px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: $diff-state-prefix-color; color: var(--red-ui-diff-state-prefix-color);
} }
&.added { &.added {
border-left-color: $diff-state-added-header-border; border-left-color: var(--red-ui-diff-state-added-header-border);
} }
&.removed { &.removed {
border-left-color: $diff-state-deleted-header-border; border-left-color: var(--red-ui-diff-state-deleted-header-border);
} }
} }
td.blank { td.blank {
background: $tertiary-background; background: var(--red-ui-tertiary-background);
} }
td.added { td.added {
background: $diff-state-added-background; background: var(--red-ui-diff-state-added-background);
color: $diff-state-color; color: var(--red-ui-diff-state-color);
} }
td.removed { td.removed {
background: $diff-state-deleted-background; background: var(--red-ui-diff-state-deleted-background);
color: $diff-state-color; color: var(--red-ui-diff-state-color);
} }
tr.mergeHeader td { tr.mergeHeader td {
color: $diff-merge-header-color; color: var(--red-ui-diff-merge-header-color);
background: $diff-merge-header-background; background: var(--red-ui-diff-merge-header-background);
height: 26px; height: 26px;
vertical-align: middle; vertical-align: middle;
} }
tr.mergeHeader-separator td { tr.mergeHeader-separator td {
color: $diff-merge-header-color; color: var(--red-ui-diff-merge-header-color);
background: $diff-merge-header-border-color; background: var(--red-ui-diff-merge-header-border-color);
height: 0px; height: 0px;
} }
tr.mergeHeader-ours td { tr.mergeHeader-ours td {
border-top: 2px solid $diff-merge-header-border-color; border-top: 2px solid var(--red-ui-diff-merge-header-border-color);
} }
tr.mergeHeader-theirs td { tr.mergeHeader-theirs td {
border-bottom: 2px solid $diff-merge-header-border-color; border-bottom: 2px solid var(--red-ui-diff-merge-header-border-color);
} }
td.unchanged { td.unchanged {
background: $diff-state-unchanged-background; background: var(--red-ui-diff-state-unchanged-background);
color: $diff-state-unchanged; color: var(--red-ui-diff-state-unchanged);
} }
tr.unchanged { tr.unchanged {
background: $diff-state-unchanged-background; background: var(--red-ui-diff-state-unchanged-background);
} }
tr.start-block { tr.start-block {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
} }
tr.end-block { tr.end-block {
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
tr.red-ui-diff-text-file-header td { tr.red-ui-diff-text-file-header td {
.filename { .filename {
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
} }
background: $primary-background; background: var(--red-ui-primary-background);
padding: 5px 10px 5px 0; padding: 5px 10px 5px 0;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
cursor: pointer; cursor: pointer;
i.red-ui-diff-list-chevron { i.red-ui-diff-list-chevron {
width: 30px; width: 30px;
@ -631,17 +631,17 @@ ul.red-ui-deploy-dialog-confirm-list {
} }
} }
tr.red-ui-diff-text-commit-header td { tr.red-ui-diff-text-commit-header td {
background: $primary-background; background: var(--red-ui-primary-background);
padding: 5px 10px; padding: 5px 10px;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
h3 { h3 {
font-size: 1.4em; font-size: 1.4em;
margin: 0; margin: 0;
} }
.commit-summary { .commit-summary {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
padding-top: 5px; padding-top: 5px;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
.commit-body { .commit-body {
margin-bottom:15px; margin-bottom:15px;
@ -651,20 +651,20 @@ ul.red-ui-deploy-dialog-confirm-list {
} }
tr.red-ui-diff-text-header > td:not(.red-ui-diff-flow-diff) { tr.red-ui-diff-text-header > td:not(.red-ui-diff-flow-diff) {
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
padding: 5px 10px; padding: 5px 10px;
text-align: left; text-align: left;
color: $diff-text-header-color; color: var(--red-ui-diff-text-header-color);
background: $diff-text-header-background; background: var(--red-ui-diff-text-header-background);
height: 30px; height: 30px;
vertical-align: middle; vertical-align: middle;
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
tr.red-ui-diff-text-expand td { tr.red-ui-diff-text-expand td {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $diff-text-header-background; background: var(--red-ui-diff-text-header-background);
} }
} }
} }

4
packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss vendored
View File

@ -18,7 +18,7 @@
position: absolute; position: absolute;
top: 0; bottom: 0; top: 0; bottom: 0;
left: 0; right: 0; left: 0; right: 0;
background: $dnd-background; background: var(--red-ui-dnd-background);
display:table; display:table;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -30,7 +30,7 @@
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
font-size: 40px; font-size: 40px;
color: $dnd-color; color: var(--red-ui-dnd-color);
i { i {
pointer-events: none; pointer-events: none;
font-size: 80px; font-size: 80px;

46
packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss vendored
View File

@ -15,8 +15,8 @@
**/ **/
.red-ui-menu-dropdown { .red-ui-menu-dropdown {
font-family: $primary-font; font-family: var(--red-ui-primary-font);
font-size: $primary-font-size; font-size: var(--red-ui-primary-font-size);
position: absolute; position: absolute;
top: 100%; top: 100%;
width: 230px; width: 230px;
@ -28,9 +28,9 @@
margin-left: 0px !important; margin-left: 0px !important;
padding: 5px 0; padding: 5px 0;
list-style: none; list-style: none;
background: $menuBackground; background: var(--red-ui-menuBackground);
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
box-shadow: 0 5px 10px $shadow; box-shadow: 0 5px 10px var(--red-ui-shadow);
&.pull-right { &.pull-right {
right: 0; right: 0;
@ -41,7 +41,7 @@
height: 1px; height: 1px;
margin: 9px 1px; margin: 9px 1px;
overflow: hidden; overflow: hidden;
background-color: $menuDivider; background-color: var(--red-ui-menuDivider);
} }
& > li > a, & > li > a,
& > li > a:focus { & > li > a:focus {
@ -50,7 +50,7 @@
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
color: $menuColor; color: var(--red-ui-menuColor);
white-space: normal !important; white-space: normal !important;
outline: none; outline: none;
} }
@ -73,19 +73,19 @@
& > .active > a, & > .active > a,
& > .active > a:hover, & > .active > a:hover,
& > .active > a:focus { & > .active > a:focus {
color: $menuActiveColor; color: var(--red-ui-menuActiveColor);
text-decoration: none; text-decoration: none;
background-color: $menuActiveBackground; background-color: var(--red-ui-menuActiveBackground);
outline: 0; outline: 0;
} }
& > .disabled > a, & > .disabled > a,
& > .disabled > a:hover, & > .disabled > a:hover,
& > .disabled > a:focus { & > .disabled > a:focus {
color: $menuDisabledColor; color: var(--red-ui-menuDisabledColor);
.red-ui-popover-key { .red-ui-popover-key {
color: $menuDisabledColor; color: var(--red-ui-menuDisabledColor);
border-color: $menuDisabledColor; border-color: var(--red-ui-menuDisabledColor);
} }
} }
@ -133,8 +133,8 @@
padding: 0; padding: 0;
font-size: 13px; font-size: 13px;
// float: right; // float: right;
color: $menuColor; color: var(--red-ui-menuColor);
border-color: $menuColor; border-color: var(--red-ui-menuColor);
} }
} }
@ -151,9 +151,9 @@
.red-ui-menu-dropdown > li > a:focus, .red-ui-menu-dropdown > li > a:focus,
.red-ui-menu-dropdown-submenu:hover > a, .red-ui-menu-dropdown-submenu:hover > a,
.red-ui-menu-dropdown-submenu:focus > a { .red-ui-menu-dropdown-submenu:focus > a {
color: $menuHoverColor; color: var(--red-ui-menuHoverColor);
text-decoration: none; text-decoration: none;
background-color: $menuHoverBackground; background-color: var(--red-ui-menuHoverBackground);
} }
.red-ui-menu-dropdown-submenu { .red-ui-menu-dropdown-submenu {
@ -176,7 +176,7 @@
margin-top: 5px; margin-top: 5px;
margin-right: -10px; margin-right: -10px;
border-color: transparent; border-color: transparent;
border-left-color: $menuCaret; border-left-color: var(--red-ui-menuCaret);
border-style: solid; border-style: solid;
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
content: " "; content: " ";
@ -202,7 +202,7 @@
margin-left: -30px; margin-left: -30px;
/* Caret Arrow */ /* Caret Arrow */
border-color: transparent; border-color: transparent;
border-right-color: $menuCaret; border-right-color: var(--red-ui-menuCaret);
border-style: solid; border-style: solid;
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
content: " "; content: " ";
@ -227,13 +227,13 @@
} }
} }
.red-ui-menu-dropdown-submenu.disabled > a:before { .red-ui-menu-dropdown-submenu.disabled > a:before {
border-right-color: $menuCaret; border-right-color: var(--red-ui-menuCaret);
} }
// Menu NG // Menu NG
ul.red-ui-menu:not(.red-ui-menu-dropdown) { ul.red-ui-menu:not(.red-ui-menu-dropdown) {
font-family: $primary-font; font-family: var(--red-ui-primary-font);
font-size: 12px; font-size: 12px;
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
@ -244,14 +244,14 @@ ul.red-ui-menu:not(.red-ui-menu-dropdown) {
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
color: $menuColor; color: var(--red-ui-menuColor);
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
&:hover,&:focus { &:hover,&:focus {
color: $menuHoverColor; color: var(--red-ui-menuHoverColor);
text-decoration: none; text-decoration: none;
background-color: $menuHoverBackground; background-color: var(--red-ui-menuHoverBackground);
border: none; border: none;
outline: none; outline: none;
} }

178
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -32,9 +32,9 @@
width: auto; width: auto;
right: -1000px; right: -1000px;
bottom: 0; bottom: 0;
background: $secondary-background; background: var(--red-ui-secondary-background);
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
box-sizing: content-box; box-sizing: content-box;
} }
.red-ui-tray.open { .red-ui-tray.open {
@ -67,8 +67,8 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
background: $palette-header-background; background: var(--red-ui-palette-header-background);
&:after { &:after {
content: ""; content: "";
display: table; display: table;
@ -88,8 +88,8 @@
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
&.toggle:not(.selected) { &.toggle:not(.selected) {
color: $workspace-button-color-selected !important; color: var(--red-ui-workspace-button-color-selected) !important;
background: $workspace-button-background-active; background: var(--red-ui-workspace-button-background-active);
} }
} }
@ -116,8 +116,8 @@
} }
.red-ui-tray-titlebar { .red-ui-tray-titlebar {
color: $header-text-color; color: var(--red-ui-header-text-color);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
padding: 8px; padding: 8px;
} }
.red-ui-editor ul.red-ui-tray-breadcrumbs { .red-ui-editor ul.red-ui-tray-breadcrumbs {
@ -131,7 +131,7 @@
margin:0; margin:0;
&:not(:last-child) { &:not(:last-child) {
color: $workspace-button-color; color: var(--red-ui-workspace-button-color);
font-weight: normal; font-weight: normal;
&:after { &:after {
@ -149,10 +149,10 @@
bottom: 0px; bottom: 0px;
width: 7px; width: 7px;
left: -9px; left: -9px;
background-color: $primary-background; background-color: var(--red-ui-primary-background);
cursor: col-resize; cursor: col-resize;
border-left: 1px solid $primary-border-color; border-left: 1px solid var(--red-ui-primary-border-color);
box-shadow: -1px 0 6px $shadow; box-shadow: -1px 0 6px var(--red-ui-shadow);
&:before { &:before {
content: ''; content: '';
@ -167,11 +167,11 @@
mask-position: 50% 50%; mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $grip-color; background-color: var(--red-ui-grip-color);
} }
&.red-ui-tray-resize-maximised { &.red-ui-tray-resize-maximised {
background: $primary-background; background: var(--red-ui-primary-background);
cursor: default; cursor: default;
} }
} }
@ -182,10 +182,10 @@ button.red-ui-tray-resize-button {
height: 37px; height: 37px;
line-height: 35px; line-height: 35px;
border: none; border: none;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
margin: 0; margin: 0;
background: $primary-background; background: var(--red-ui-primary-background);
color: $workspace-button-color; color: var(--red-ui-workspace-button-color);
} }
.red-ui-editor .red-ui-tray { .red-ui-editor .red-ui-tray {
@ -203,16 +203,16 @@ button.red-ui-tray-resize-button {
} }
.input-error { .input-error {
border-color: $form-input-border-error-color !important; border-color: var(--red-ui-form-input-border-error-color) !important;
} }
.input-updated { .input-updated {
border-color: $node-selected-color !important; border-color: var(--red-ui-node-selected-color) !important;
} }
.form-row { .form-row {
clear: both; clear: both;
color: $form-text-color; color: var(--red-ui-form-text-color);
margin-bottom:12px; margin-bottom:12px;
} }
.form-row label { .form-row label {
@ -223,10 +223,10 @@ button.red-ui-tray-resize-button {
width:70%; width:70%;
} }
.form-tips { .form-tips {
background: $form-tips-background; background: var(--red-ui-form-tips-background);
padding: 8px; padding: 8px;
border-radius: 2px; border-radius: 2px;
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
max-width: 450px; max-width: 450px;
} }
.form-tips code { .form-tips code {
@ -238,7 +238,7 @@ button.red-ui-tray-resize-button {
} }
.form-warning { .form-warning {
border-color: $text-color-error; border-color: var(--red-ui-text-color-error);
} }
} }
@ -255,11 +255,11 @@ button.red-ui-tray-resize-button {
} }
} }
.red-ui-editor-text-container { .red-ui-editor-text-container {
border:1px solid $tertiary-border-color; border:1px solid var(--red-ui-tertiary-border-color);
border-radius:5px; border-radius:5px;
overflow: hidden; overflow: hidden;
font-size: $primary-font-size !important; font-size: var(--red-ui-primary-font-size !important);
font-family: $monospace-font !important; font-family: var(--red-ui-monospace-font !important);
height: 100%; height: 100%;
&.red-ui-editor-text-container-toolbar { &.red-ui-editor-text-container-toolbar {
@ -302,7 +302,7 @@ button.red-ui-button-small
#red-ui-editor-config-scope-warning { #red-ui-editor-config-scope-warning {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
color: $text-color-warning; color: var(--red-ui-text-color-warning);
vertical-align: middle; vertical-align: middle;
} }
#red-ui-editor-config-scope { #red-ui-editor-config-scope {
@ -358,18 +358,18 @@ button.red-ui-button-small
padding: 20px 20px 10px; padding: 20px 20px 10px;
&:last-child { &:last-child {
padding-top: 60px; padding-top: 60px;
background: $primary-background; background: var(--red-ui-primary-background);
} }
} }
} }
.red-ui-editor-type-markdown-panel-preview { .red-ui-editor-type-markdown-panel-preview {
padding: 10px; padding: 10px;
border:1px solid $secondary-border-color; border:1px solid var(--red-ui-secondary-border-color);
border-radius:5px; border-radius:5px;
height: calc(100% - 21px); height: calc(100% - 21px);
overflow-y: scroll; overflow-y: scroll;
background: $secondary-background; background: var(--red-ui-secondary-background);
} }
#red-ui-clipboard-hidden { #red-ui-clipboard-hidden {
@ -402,7 +402,7 @@ button.red-ui-button-small
span { span {
padding-left: 50px; padding-left: 50px;
width: 100px; width: 100px;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
} }
@ -427,14 +427,14 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
.red-ui-group-layout-picker { .red-ui-group-layout-picker {
padding: 5px; padding: 5px;
background: $secondary-background; background: var(--red-ui-secondary-background);
} }
.red-ui-group-layout-picker-cell-text { .red-ui-group-layout-picker-cell-text {
position: absolute; position: absolute;
width: 14px; width: 14px;
height: 2px; height: 2px;
border-top: 2px solid $secondary-text-color; border-top: 2px solid var(--red-ui-secondary-text-color);
border-bottom: 2px solid $secondary-text-color; border-bottom: 2px solid var(--red-ui-secondary-text-color);
margin: 2px; margin: 2px;
&.red-ui-group-layout-text-pos-nw { top: 0; left: 0; } &.red-ui-group-layout-text-pos-nw { top: 0; left: 0; }
@ -451,7 +451,7 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
background-color: #FFF; background-color: #FFF;
background-size: 100% 100%; background-size: 100% 100%;
background-position: 0 0, 50% 50%; background-position: 0 0, 50% 50%;
background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent); background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent);
border: none; border: none;
} }
} }
@ -475,17 +475,17 @@ button.red-ui-group-layout-picker-none {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
border: none; border: none;
border-bottom: 1px solid $form-input-border-color; border-bottom: 1px solid var(--red-ui-form-input-border-color);
} }
small { small {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
margin-left: 5px; margin-left: 5px;
margin-right: 4px; margin-right: 4px;
display: inline-block; display: inline-block;
min-width: 35px; min-width: 35px;
text-align: right; text-align: right;
} }
background: $primary-background; background: var(--red-ui-primary-background);
} }
.red-ui-editor-node-appearance-button { .red-ui-editor-node-appearance-button {
.red-ui-search-result-node { .red-ui-search-result-node {
@ -496,7 +496,7 @@ button.red-ui-group-layout-picker-none {
padding: 0; padding: 0;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: $secondary-border-color; border-color: var(--red-ui-secondary-border-color);
} }
.red-ui-color-picker-swatch { .red-ui-color-picker-swatch {
position: absolute; position: absolute;
@ -509,7 +509,7 @@ button.red-ui-group-layout-picker-none {
background-color: #FFF; background-color: #FFF;
background-size: 100% 100%; background-size: 100% 100%;
background-position: 0 0, 50% 50%; background-position: 0 0, 50% 50%;
background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent) background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent)
} }
.red-ui-search-result-node .red-ui-color-picker-cell-none { .red-ui-search-result-node .red-ui-color-picker-cell-none {
border-radius: 4px; border-radius: 4px;
@ -536,7 +536,7 @@ button.red-ui-group-layout-picker-none {
top:0;right:0;left:0;bottom:0; top:0;right:0;left:0;bottom:0;
background-image:linear-gradient(90deg, transparent 0%, #f00 100%); background-image:linear-gradient(90deg, transparent 0%, #f00 100%);
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
} }
div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
@ -547,9 +547,9 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
width: 10px; width: 10px;
height: 22px; height: 22px;
padding: 0; padding: 0;
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
border-radius: 1px; border-radius: 1px;
background: $secondary-background; background: var(--red-ui-secondary-background);
box-sizing: border-box; box-sizing: border-box;
} }
.red-ui-icon-picker { .red-ui-icon-picker {
@ -567,10 +567,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
position: relative; position: relative;
&.red-ui-icon-list-dark { &.red-ui-icon-list-dark {
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
.red-ui-palette-icon-container { .red-ui-palette-icon-container {
background: $secondary-background; background: var(--red-ui-secondary-background);
border-radius: 4px; border-radius: 4px;
} }
} }
@ -583,10 +583,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
} }
&.selected { &.selected {
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
.red-ui-search-result-node { .red-ui-search-result-node {
// border-color: white; // border-color: white;
} }
@ -597,22 +597,22 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
} }
} }
.red-ui-icon-list-module { .red-ui-icon-list-module {
background: $palette-header-background; background: var(--red-ui-palette-header-background);
font-size: 0.9em; font-size: 0.9em;
padding: 3px; padding: 3px;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
clear: both; clear: both;
i { i {
margin-right: 5px; margin-right: 5px;
} }
} }
.red-ui-icon-meta { .red-ui-icon-meta {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
background: $tertiary-background; background: var(--red-ui-tertiary-background);
height: 24px; height: 24px;
span { span {
padding: 4px; padding: 4px;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-size: 0.9em; font-size: 0.9em;
line-height: 24px; line-height: 24px;
} }
@ -630,7 +630,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
.red-ui-editor-type-json-editor { .red-ui-editor-type-json-editor {
height: calc(100% - 10px); height: calc(100% - 10px);
.red-ui-treeList-container { .red-ui-treeList-container {
background: $secondary-background; background: var(--red-ui-secondary-background);
} }
.red-ui-treeList-label { .red-ui-treeList-label {
padding-top: 0; padding-top: 0;
@ -647,7 +647,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
vertical-align: middle; vertical-align: middle;
} }
&:hover, &:hover .red-ui-treeList-sublabel-text { &:hover, &:hover .red-ui-treeList-sublabel-text {
background: $secondary-background-disabled; background: var(--red-ui-secondary-background-disabled);
.red-ui-editor-type-json-editor-item-gutter { .red-ui-editor-type-json-editor-item-gutter {
> span, > button { > span, > button {
display: inline-block; display: inline-block;
@ -656,11 +656,11 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
} }
&.selected { &.selected {
.red-ui-editor-type-json-editor-item-gutter { .red-ui-editor-type-json-editor-item-gutter {
background: $secondary-background-hover; background: var(--red-ui-secondary-background-hover);
} }
&:hover { &:hover {
.red-ui-editor-type-json-editor-item-gutter { .red-ui-editor-type-json-editor-item-gutter {
background: $secondary-background-selected; background: var(--red-ui-secondary-background-selected);
} }
} }
} }
@ -698,7 +698,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
border: 2px solid rgba(0,0,0,0); border: 2px solid rgba(0,0,0,0);
border-radius: 3px; border-radius: 3px;
&:not(.red-ui-editor-type-json-editor-label-array-key):hover { &:not(.red-ui-editor-type-json-editor-label-array-key):hover {
border-color: $list-item-background-hover; border-color: var(--red-ui-list-item-background-hover);
border-style: dashed; border-style: dashed;
} }
&.readonly { &.readonly {
@ -712,8 +712,8 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
height: 100%; height: 100%;
line-height: 35px; line-height: 35px;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
background: $secondary-background-disabled; background: var(--red-ui-secondary-background-disabled);
> span { > span {
display: inline-block; display: inline-block;
height: 35px; height: 35px;
@ -755,7 +755,7 @@ button.red-ui-toggleButton.toggle {
} }
>div:first-child { >div:first-child {
font-size: 0.9em; font-size: 0.9em;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
margin: 3px 0 -4px; margin: 3px 0 -4px;
>div { >div {
padding-left: 3px; padding-left: 3px;
@ -767,15 +767,15 @@ button.red-ui-toggleButton.toggle {
line-height: 30px; line-height: 30px;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
// border-left: 2px dashed $secondary-border-color; // border-left: 2px dashed var(--red-ui-secondary-border-color);
// border-bottom: 2px dashed $secondary-border-color; // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
// border: 1px dashed $secondary-border-color; // border: 1px dashed var(--red-ui-secondary-border-color);
border-right: none; border-right: none;
&:not(:first-child) { &:not(:first-child) {
padding: 3px; padding: 3px;
} }
// &:last-child { // &:last-child {
// border-right: 1px dashed $secondary-border-color; // border-right: 1px dashed var(--red-ui-secondary-border-color);
// } // }
.placeholder-input { .placeholder-input {
position: relative; position: relative;
@ -800,8 +800,8 @@ button.red-ui-toggleButton.toggle {
height: 100%; height: 100%;
width: 20px; width: 20px;
text-align:center; text-align:center;
border-right: 1px solid $secondary-border-color; border-right: 1px solid var(--red-ui-secondary-border-color);
background: $tertiary-background; background: var(--red-ui-tertiary-background);
} }
} }
input[type="checkbox"] { input[type="checkbox"] {
@ -817,13 +817,13 @@ button.red-ui-toggleButton.toggle {
.red-ui-editableList-item-handle { .red-ui-editableList-item-handle {
position:relative; position:relative;
top: 0px; top: 0px;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
} }
>div:nth-child(2) { >div:nth-child(2) {
margin: 4px; margin: 4px;
height: 32px; height: 32px;
border: 1px dashed $secondary-border-color; border: 1px dashed var(--red-ui-secondary-border-color);
text-align: center; text-align: center;
a { a {
display: block; display: block;
@ -831,7 +831,7 @@ button.red-ui-toggleButton.toggle {
height: 100%; height: 100%;
line-height: 32px; line-height: 32px;
&:hover { &:hover {
background: $secondary-background-hover; background: var(--red-ui-secondary-background-hover);
} }
i { i {
height: 100%; height: 100%;
@ -851,7 +851,7 @@ button.red-ui-toggleButton.toggle {
span.red-ui-editor-subflow-env-lang-icon { span.red-ui-editor-subflow-env-lang-icon {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
background: $secondary-background; background: var(--red-ui-secondary-background);
opacity: 0.8; opacity: 0.8;
width: 20px; width: 20px;
line-height: 32px; line-height: 32px;
@ -864,12 +864,12 @@ span.red-ui-editor-subflow-env-lang-icon {
} }
.red-ui-editor-subflow-env-input-type { .red-ui-editor-subflow-env-input-type {
background: $secondary-background; background: var(--red-ui-secondary-background);
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.red-ui-editor-subflow-env-input-type-placeholder { .red-ui-editor-subflow-env-input-type-placeholder {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
padding-left: 4px; padding-left: 4px;
} }
@ -886,7 +886,7 @@ span.red-ui-editor-subflow-env-lang-icon {
// border-top: none; // border-top: none;
// } // }
// &.ui-sortable-helper { // &.ui-sortable-helper {
// border: 2px dashed $secondary-border-color; // border: 2px dashed var(--red-ui-secondary-border-color);
// .red-ui-editableList-item-content { // .red-ui-editableList-item-content {
// >div { // >div {
// border: none; // border: none;
@ -901,15 +901,15 @@ span.red-ui-editor-subflow-env-lang-icon {
// >div>div { // >div>div {
// display: inline-block; // display: inline-block;
// box-sizing: border-box; // box-sizing: border-box;
// border-left: 1px dashed $secondary-border-color; // border-left: 1px dashed var(--red-ui-secondary-border-color);
// border-bottom: 1px dashed $secondary-border-color; // border-bottom: 1px dashed var(--red-ui-secondary-border-color);
// } // }
// >div:first-child { // >div:first-child {
// font-size: 0.9em; // font-size: 0.9em;
// display: grid; // display: grid;
// grid-template-columns: 25px auto 20px; // grid-template-columns: 25px auto 20px;
// >div { // >div {
// border-top: 1px dashed $secondary-border-color; // border-top: 1px dashed var(--red-ui-secondary-border-color);
// padding: 1px; // padding: 1px;
// } // }
// >div:nth-child(3) { // >div:nth-child(3) {
@ -929,9 +929,9 @@ span.red-ui-editor-subflow-env-lang-icon {
// // line-height: 30px; // // line-height: 30px;
// // box-sizing: border-box; // // box-sizing: border-box;
// // // //
// // border-left: 2px dashed $secondary-border-color; // // border-left: 2px dashed var(--red-ui-secondary-border-color);
// border-top: none; // border-top: none;
// // border-bottom: 2px dashed $secondary-border-color; // // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
// &:not(:first-child) { // &:not(:first-child) {
// padding: 6px 3px; // padding: 6px 3px;
// } // }
@ -963,7 +963,7 @@ span.red-ui-editor-subflow-env-lang-icon {
// height: 100%; // height: 100%;
// line-height: 45px; // line-height: 45px;
// &:hover { // &:hover {
// background: $secondary-background-hover; // background: var(--red-ui-secondary-background-hover);
// } // }
// } // }
// } // }
@ -993,11 +993,11 @@ span.red-ui-editor-subflow-env-lang-icon {
// } // }
.red-ui-editor-subflow-ui-edit-panel { .red-ui-editor-subflow-ui-edit-panel {
padding-bottom: 3px; padding-bottom: 3px;
background: $primary-background; background: var(--red-ui-primary-background);
.red-ui-editableList-border { .red-ui-editableList-border {
border: none; border: none;
border-radius: 0; border-radius: 0;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
.red-ui-editableList-container { .red-ui-editableList-container {
} }
@ -1005,10 +1005,10 @@ span.red-ui-editor-subflow-env-lang-icon {
margin-left: 2px; margin-left: 2px;
} }
.red-ui-editableList-header { .red-ui-editableList-header {
background: $primary-background; background: var(--red-ui-primary-background);
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
div:first-child { div:first-child {
padding-left: 23px; padding-left: 23px;
} }
@ -1019,7 +1019,7 @@ span.red-ui-editor-subflow-env-lang-icon {
.red-ui-editableList-container { .red-ui-editableList-container {
padding: 0 1px; padding: 0 1px;
li { li {
background: $secondary-background; background: var(--red-ui-secondary-background);
// border-bottom: none; // border-bottom: none;
padding: 0; padding: 0;
.red-ui-editableList-item-content { .red-ui-editableList-item-content {
@ -1034,14 +1034,14 @@ span.red-ui-editor-subflow-env-lang-icon {
margin-bottom: 0; margin-bottom: 0;
border:none; border:none;
width: 100%; width: 100%;
border-right: 1px solid $secondary-border-color; border-right: 1px solid var(--red-ui-secondary-border-color);
border-radius: 0; border-radius: 0;
&:focus { &:focus {
box-shadow: 0 0 0 1px inset $form-input-focus-color; box-shadow: 0 0 0 1px inset var(--red-ui-form-input-focus-color);
} }
&:first-child { &:first-child {
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
} }
} }
button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger { button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger {
@ -1131,7 +1131,7 @@ span.red-ui-editor-subflow-env-lang-icon {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
padding: 0; padding: 0;
>div { >div {
display: grid; display: grid;

136
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@ -16,14 +16,14 @@
.nr-ui-view-lasso { .nr-ui-view-lasso {
stroke-width: 1px; stroke-width: 1px;
stroke: $view-lasso-stroke; stroke: var(--red-ui-view-lasso-stroke);
fill: $view-lasso-fill; fill: var(--red-ui-view-lasso-fill);
stroke-dasharray: 10 5; stroke-dasharray: 10 5;
} }
.nr-ui-view-slice { .nr-ui-view-slice {
stroke-width: 1px; stroke-width: 1px;
stroke: $view-lasso-stroke; stroke: var(--red-ui-view-lasso-stroke);
fill: none; fill: none;
stroke-dasharray: 10 5; stroke-dasharray: 10 5;
} }
@ -33,11 +33,11 @@
font-style: italic; font-style: italic;
} }
.red-ui-flow-node-label-white { .red-ui-flow-node-label-white {
fill: $view-background !important; fill: var(--red-ui-view-background) !important;
} }
.red-ui-flow-node-label { .red-ui-flow-node-label {
stroke-width: 0; stroke-width: 0;
fill: $node-label-color; fill: var(--red-ui-node-label-color);
font-size: 14px; font-size: 14px;
pointer-events: none; pointer-events: none;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -54,7 +54,7 @@
.red-ui-flow-port-label { .red-ui-flow-port-label {
stroke-width: 0; stroke-width: 0;
fill: $node-port-label-color; fill: var(--red-ui-node-port-label-color);
font-size: 16px; font-size: 16px;
dominant-baseline: middle; dominant-baseline: middle;
text-anchor: middle; text-anchor: middle;
@ -65,7 +65,7 @@
.red-ui-flow-node { .red-ui-flow-node {
stroke: $node-border; stroke: var(--red-ui-node-border);
cursor: move; cursor: move;
stroke-width: 1; stroke-width: 1;
} }
@ -80,7 +80,7 @@
opacity: 0.9; opacity: 0.9;
.red-ui-flow-node { .red-ui-flow-node {
stroke-width: 2; stroke-width: 2;
stroke: $node-selected-color !important; stroke: var(--red-ui-node-selected-color) !important;
stroke-dasharray: 10, 4; stroke-dasharray: 10, 4;
} }
} }
@ -95,53 +95,53 @@
} }
&.red-ui-flow-group-active-hovered:not(.red-ui-flow-group-hovered) { &.red-ui-flow-group-active-hovered:not(.red-ui-flow-group-hovered) {
.red-ui-flow-group-outline-select { .red-ui-flow-group-outline-select {
stroke: $link-link-color; stroke: var(--red-ui-link-link-color);
} }
} }
} }
.red-ui-flow-group-outline { .red-ui-flow-group-outline {
fill: none; fill: none;
stroke: $node-selected-color; stroke: var(--red-ui-node-selected-color);
stroke-opacity: 0; stroke-opacity: 0;
stroke-width: 12; stroke-width: 12;
pointer-events: stroke; pointer-events: stroke;
} }
.red-ui-flow-group-outline-select { .red-ui-flow-group-outline-select {
fill: none; fill: none;
stroke: $node-selected-color; stroke: var(--red-ui-node-selected-color);
pointer-events: stroke; pointer-events: stroke;
stroke-opacity: 0; stroke-opacity: 0;
stroke-width: 3; stroke-width: 3;
&.red-ui-flow-group-outline-select-background { &.red-ui-flow-group-outline-select-background {
stroke: $view-background; stroke: var(--red-ui-view-background);
stroke-width: 6; stroke-width: 6;
} }
} }
.red-ui-flow-group-body { .red-ui-flow-group-body {
pointer-events: none; pointer-events: none;
fill: $group-default-fill; fill: var(--red-ui-group-default-fill);
fill-opacity: $group-default-fill-opacity; fill-opacity: var(--red-ui-group-default-fill-opacity);
stroke-width: 2; stroke-width: 2;
stroke: $group-default-stroke; stroke: var(--red-ui-group-default-stroke);
stroke-opacity: $group-default-stroke-opacity; stroke-opacity: var(--red-ui-group-default-stroke-opacity);
} }
.red-ui-flow-group-label { .red-ui-flow-group-label {
@include disable-selection; @include disable-selection;
fill: $group-default-label-color; fill: var(--red-ui-group-default-label-color);
} }
.red-ui-flow-node-unknown { .red-ui-flow-node-unknown {
stroke-dasharray:10,4; stroke-dasharray:10,4;
stroke: $node-border-unknown; stroke: var(--red-ui-node-border-unknown);
} }
.red-ui-flow-node-placeholder { .red-ui-flow-node-placeholder {
stroke-dasharray:10,4; stroke-dasharray:10,4;
stroke: $node-border-placeholder; stroke: var(--red-ui-node-border-placeholder);
fill: $node-background-placeholder; fill: var(--red-ui-node-background-placeholder);
opacity: 0.5; opacity: 0.5;
stroke-width: 2; stroke-width: 2;
} }
@ -152,19 +152,19 @@
.fa-lg { .fa-lg {
@include disable-selection; @include disable-selection;
stroke: none; stroke: none;
fill: $node-icon-color; fill: var(--red-ui-node-icon-color);
text-anchor: middle; text-anchor: middle;
font-family: FontAwesome; font-family: FontAwesome;
} }
} }
.red-ui-flow-node-icon-shade { .red-ui-flow-node-icon-shade {
stroke: none; stroke: none;
fill: $node-icon-background-color-fill; fill: var(--red-ui-node-icon-background-color-fill);
fill-opacity: $node-icon-background-color-opacity; fill-opacity: var(--red-ui-node-icon-background-color-opacity);
} }
.red-ui-flow-node-icon-shade-border { .red-ui-flow-node-icon-shade-border {
stroke-opacity: $node-icon-border-color-opacity; stroke-opacity: var(--red-ui-node-icon-border-color-opacity);
stroke: $node-icon-border-color; stroke: var(--red-ui-node-icon-border-color);
stroke-width: 1; stroke-width: 1;
} }
@ -181,27 +181,27 @@
cursor: pointer; cursor: pointer;
} }
.red-ui-flow-node-button-background { .red-ui-flow-node-button-background {
fill: $node-background-placeholder; fill: var(--red-ui-node-background-placeholder);
} }
.red-ui-flow-port { .red-ui-flow-port {
stroke: $node-border; stroke: var(--red-ui-node-border);
stroke-width: 1; stroke-width: 1;
fill: $node-port-background; fill: var(--red-ui-node-port-background);
cursor: crosshair; cursor: crosshair;
} }
.red-ui-flow-node-error { .red-ui-flow-node-error {
fill: $node-status-error-background; fill: var(--red-ui-node-status-error-background);
stroke: $node-status-error-border; stroke: var(--red-ui-node-status-error-border);
stroke-width:1px; stroke-width:1px;
cursor: default; cursor: default;
stroke-linejoin: round; stroke-linejoin: round;
stroke-linecap: round; stroke-linecap: round;
} }
.red-ui-flow-node-changed { .red-ui-flow-node-changed {
fill: $node-status-changed-background; fill: var(--red-ui-node-status-changed-background);
stroke: $node-status-changed-border; stroke: var(--red-ui-node-status-changed-border);
cursor: default; cursor: default;
stroke-width:1px; stroke-width:1px;
stroke-linejoin: round; stroke-linejoin: round;
@ -214,13 +214,13 @@ g.red-ui-flow-node-selected {
} }
.red-ui-flow-node,.red-ui-flow-subflow-port { .red-ui-flow-node,.red-ui-flow-subflow-port {
stroke-width: 2; stroke-width: 2;
stroke: $node-selected-color !important; stroke: var(--red-ui-node-selected-color) !important;
} }
} }
.red-ui-flow-node-highlighted { .red-ui-flow-node-highlighted {
border-color: $node-selected-color !important; border-color: var(--red-ui-node-selected-color) !important;
border-style: dashed !important; border-style: dashed !important;
stroke: $node-selected-color; stroke: var(--red-ui-node-selected-color);
stroke-width: 3; stroke-width: 3;
stroke-dasharray: 8, 4; stroke-dasharray: 8, 4;
} }
@ -236,7 +236,7 @@ g.red-ui-flow-node-selected {
.red-ui-flow-link-line { .red-ui-flow-link-line {
stroke-dasharray: 10,8 !important; stroke-dasharray: 10,8 !important;
stroke-width: 2 !important; stroke-width: 2 !important;
stroke: $link-disabled-color; stroke: var(--red-ui-link-disabled-color);
} }
.red-ui-flow-port { .red-ui-flow-port {
fill-opacity: 1; fill-opacity: 1;
@ -254,7 +254,7 @@ g.red-ui-flow-node-selected {
&.red-ui-flow-link-line { &.red-ui-flow-link-line {
stroke-dasharray: 10,8 !important; stroke-dasharray: 10,8 !important;
stroke-width: 2 !important; stroke-width: 2 !important;
stroke: $link-disabled-color; stroke: var(--red-ui-link-disabled-color);
} }
.red-ui-flow-port { .red-ui-flow-port {
fill-opacity: 1; fill-opacity: 1;
@ -263,49 +263,49 @@ g.red-ui-flow-node-selected {
} }
@each $current-color in red green yellow blue grey gray { @each $current-color in red green yellow blue grey gray {
.red-ui-flow-node-status-dot-#{""+$current-color} { .red-ui-flow-node-status-dot-#{""+$current-color} {
fill: map-get($node-status-colors,$current-color); fill: var(--red-ui-node-status-colors-#{"" + $current-color});
stroke: map-get($node-status-colors,$current-color); stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
} }
.red-ui-flow-node-status-ring-#{""+$current-color} { .red-ui-flow-node-status-ring-#{""+$current-color} {
fill: $view-background; fill: var(--red-ui-view-background);
stroke: map-get($node-status-colors,$current-color); stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
} }
} }
.red-ui-flow-node-status-label { .red-ui-flow-node-status-label {
@include disable-selection; @include disable-selection;
stroke-width: 0; stroke-width: 0;
fill: $secondary-text-color; fill: var(--red-ui-secondary-text-color);
font-size:9pt; font-size:9pt;
text-anchor:start; text-anchor:start;
} }
.red-ui-flow-port-hovered { .red-ui-flow-port-hovered {
stroke: $port-selected-color; stroke: var(--red-ui-port-selected-color);
fill: $port-selected-color; fill: var(--red-ui-port-selected-color);
} }
.red-ui-flow-subflow-port { .red-ui-flow-subflow-port {
fill: $node-background-placeholder; fill: var(--red-ui-node-background-placeholder);
stroke: $node-border; stroke: var(--red-ui-node-border);
} }
.red-ui-flow-drag-line { .red-ui-flow-drag-line {
stroke: $node-selected-color !important; stroke: var(--red-ui-node-selected-color) !important;
stroke-width: 3; stroke-width: 3;
fill: none; fill: none;
pointer-events: none; pointer-events: none;
} }
.red-ui-flow-link-line { .red-ui-flow-link-line {
stroke: $link-color; stroke: var(--red-ui-link-color);
stroke-width: 3; stroke-width: 3;
fill: none; fill: none;
pointer-events: none; pointer-events: none;
} }
.red-ui-flow-link-link { .red-ui-flow-link-link {
stroke-width: 2; stroke-width: 2;
stroke: $link-link-color; stroke: var(--red-ui-link-link-color);
fill: none; fill: none;
stroke-dasharray: 25,4; stroke-dasharray: 25,4;
} }
@ -314,19 +314,19 @@ g.red-ui-flow-node-selected {
} }
.red-ui-flow-link-port { .red-ui-flow-link-port {
fill: $node-link-port-background; fill: var(--red-ui-node-link-port-background);
stroke: $link-link-color; stroke: var(--red-ui-link-link-color);
stroke-width: 1; stroke-width: 1;
} }
.red-ui-flow-link-group-active .red-ui-flow-link-port { .red-ui-flow-link-group-active .red-ui-flow-link-port {
stroke: $link-link-active-color; stroke: var(--red-ui-link-link-active-color);
} }
.red-ui-flow-link-group:hover { .red-ui-flow-link-group:hover {
cursor: pointer; cursor: pointer;
} }
.red-ui-flow-link-outline { .red-ui-flow-link-outline {
stroke: $view-background; stroke: var(--red-ui-view-background);
stroke-opacity: 0.4; stroke-opacity: 0.4;
stroke-width: 5; stroke-width: 5;
cursor: crosshair; cursor: crosshair;
@ -334,7 +334,7 @@ g.red-ui-flow-node-selected {
pointer-events: none; pointer-events: none;
} }
.red-ui-flow-link-background { .red-ui-flow-link-background {
stroke: $view-background; stroke: var(--red-ui-view-background);
opacity: 0; opacity: 0;
stroke-width: 20; stroke-width: 20;
cursor: crosshair; cursor: crosshair;
@ -345,10 +345,10 @@ g.red-ui-flow-node-selected {
} }
g.red-ui-flow-link-selected path.red-ui-flow-link-line { g.red-ui-flow-link-selected path.red-ui-flow-link-line {
stroke: $node-selected-color; stroke: var(--red-ui-node-selected-color);
} }
g.red-ui-flow-link-unknown path.red-ui-flow-link-line { g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
stroke: $link-unknown-color; stroke: var(--red-ui-link-unknown-color);
stroke-width: 2; stroke-width: 2;
stroke-dasharray: 10, 4; stroke-dasharray: 10, 4;
} }
@ -364,15 +364,15 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
pointer-events: none; pointer-events: none;
path:first-child { path:first-child {
fill: $popover-background; fill: var(--red-ui-popover-background);
stroke: $popover-background; stroke: var(--red-ui-popover-background);
stroke-width: 1; stroke-width: 1;
} }
} }
.red-ui-flow-port-tooltip-label { .red-ui-flow-port-tooltip-label {
stroke-width: 0; stroke-width: 0;
fill: $popover-color; fill: var(--red-ui-popover-color);
font-family: $primary-font; font-family: var(--red-ui-primary-font);
font-size: 12px; font-size: 12px;
pointer-events: none; pointer-events: none;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -401,18 +401,18 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
} }
} }
.red-ui-flow-junction-port { .red-ui-flow-junction-port {
stroke: $node-border; stroke: var(--red-ui-node-border);
stroke-width: 1; stroke-width: 1;
fill: $node-port-background; fill: var(--red-ui-node-port-background);
cursor: crosshair; cursor: crosshair;
transition: transform 0.1s; transition: transform 0.1s;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.red-ui-flow-junction-background { .red-ui-flow-junction-background {
stroke: $node-border; stroke: var(--red-ui-node-border);
stroke-width: 1; stroke-width: 1;
fill: $node-port-background; fill: var(--red-ui-node-port-background);
cursor: crosshair; cursor: crosshair;
transform: scale(1); transform: scale(1);
transition: transform 0.1s; transition: transform 0.1s;
@ -421,10 +421,10 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
} }
} }
.red-ui-flow-junction-hovered { .red-ui-flow-junction-hovered {
stroke: $port-selected-color; stroke: var(--red-ui-port-selected-color);
fill: $port-selected-color; fill: var(--red-ui-port-selected-color);
} }
.red-ui-flow-junction.selected .red-ui-flow-junction-background { .red-ui-flow-junction.selected .red-ui-flow-junction-background {
stroke: $port-selected-color; stroke: var(--red-ui-port-selected-color);
// fill: $port-selected-color; // fill: var(--red-ui-port-selected-color);
} }

50
packages/node_modules/@node-red/editor-client/src/sass/forms.scss vendored
View File

@ -99,13 +99,13 @@
margin-bottom: 20px; margin-bottom: 20px;
font-size: 21px; font-size: 21px;
line-height: 40px; line-height: 40px;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
border: 0; border: 0;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
legend small { legend small {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
@ -125,7 +125,7 @@
button, button,
select, select,
textarea { textarea {
font-family: $primary-font; font-family: var(--red-ui-primary-font);
} }
label { label {
@ -159,7 +159,7 @@
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: $form-text-color; color: var(--red-ui-form-text-color);
vertical-align: middle; vertical-align: middle;
border-radius: 4px; border-radius: 4px;
} }
@ -193,8 +193,8 @@
div[contenteditable="true"], div[contenteditable="true"],
.uneditable-input, .uneditable-input,
.placeholder-input { .placeholder-input {
background-color: $form-input-background; background-color: var(--red-ui-form-input-background);
border: 1px solid $form-input-border-color; border: 1px solid var(--red-ui-form-input-border-color);
} }
textarea:focus, textarea:focus,
@ -214,7 +214,7 @@
input[type="color"]:focus, input[type="color"]:focus,
div[contenteditable="true"]:focus, div[contenteditable="true"]:focus,
.uneditable-input:focus { .uneditable-input:focus {
border-color: $form-input-focus-color; border-color: var(--red-ui-form-input-focus-color);
outline: 0; outline: 0;
outline: thin dotted \9; outline: thin dotted \9;
} }
@ -245,8 +245,8 @@
select { select {
width: 220px; width: 220px;
background-color: $form-input-background; background-color: var(--red-ui-form-input-background);
border: 1px solid $form-input-border-color; border: 1px solid var(--red-ui-form-input-border-color);
} }
select[multiple], select[multiple],
@ -258,16 +258,16 @@
input[type="file"]:focus, input[type="file"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
input[type="checkbox"]:focus { input[type="checkbox"]:focus {
outline: 2px auto $form-input-focus-color; outline: 2px auto var(--red-ui-form-input-focus-color);
outline-offset: -3px; outline-offset: -3px;
} }
.uneditable-input, .uneditable-input,
.uneditable-textarea { .uneditable-textarea {
color: $form-text-color-disabled; color: var(--red-ui-form-text-color-disabled);
cursor: not-allowed; cursor: not-allowed;
background-color: $form-input-background-disabled; background-color: var(--red-ui-form-input-background-disabled);
border-color: $form-input-border-color; border-color: var(--red-ui-form-input-border-color);
} }
.uneditable-input { .uneditable-input {
@ -282,19 +282,19 @@
input:-moz-placeholder, input:-moz-placeholder,
textarea:-moz-placeholder { textarea:-moz-placeholder {
color: $form-placeholder-color; color: var(--red-ui-form-placeholder-color);
} }
input:-ms-input-placeholder, input:-ms-input-placeholder,
div[contenteditable="true"]:-ms-input-placeholder, div[contenteditable="true"]:-ms-input-placeholder,
textarea:-ms-input-placeholder { textarea:-ms-input-placeholder {
color: $form-placeholder-color; color: var(--red-ui-form-placeholder-color);
} }
input::-webkit-input-placeholder, input::-webkit-input-placeholder,
div[contenteditable="true"]::-webkit-input-placeholder, div[contenteditable="true"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { textarea::-webkit-input-placeholder {
color: $form-placeholder-color; color: var(--red-ui-form-placeholder-color);
} }
.radio, .radio,
@ -384,7 +384,7 @@
} }
label.disabled { label.disabled {
color: $form-text-color-disabled; color: var(--red-ui-form-text-color-disabled);
cursor: default; cursor: default;
} }
@ -395,8 +395,8 @@
select[readonly], select[readonly],
textarea[readonly] { textarea[readonly] {
cursor: not-allowed; cursor: not-allowed;
color: $form-text-color-disabled; color: var(--red-ui-form-text-color-disabled);
background-color: $form-input-background-disabled; background-color: var(--red-ui-form-input-background-disabled);
} }
input[type="radio"][disabled], input[type="radio"][disabled],
@ -410,21 +410,21 @@
div[contenteditable="true"]:invalid, div[contenteditable="true"]:invalid,
textarea:invalid, textarea:invalid,
select:invalid { select:invalid {
border-color: $form-input-border-error-color; border-color: var(--red-ui-form-input-border-error-color);
} }
input:focus:invalid, input:focus:invalid,
div[contenteditable="true"]:focus:invalid, div[contenteditable="true"]:focus:invalid,
textarea:focus:invalid, textarea:focus:invalid,
select:focus:invalid { select:focus:invalid {
border-color: $form-input-border-error-color; border-color: var(--red-ui-form-input-border-error-color);
} }
input:focus:invalid:focus, input:focus:invalid:focus,
div[contenteditable="true"]:focus:invalid:focus, div[contenteditable="true"]:focus:invalid:focus,
textarea:focus:invalid:focus, textarea:focus:invalid:focus,
select:focus:invalid:focus { select:focus:invalid:focus {
border-color: $form-input-border-error-color; border-color: var(--red-ui-form-input-border-error-color);
} }
.input-append, .input-append,
@ -488,8 +488,8 @@
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
background-color: $form-button-background; background-color: var(--red-ui-form-button-background);
border: 1px solid $form-input-border-color; border: 1px solid var(--red-ui-form-input-border-color);
} }
.input-append .add-on, .input-append .add-on,

68
packages/node_modules/@node-red/editor-client/src/sass/header.scss vendored
View File

@ -24,10 +24,10 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: $header-background; background: var(--red-ui-header-background);
box-sizing: border-box; box-sizing: border-box;
padding: 0px 0px 0px 20px; padding: 0px 0px 0px 20px;
color: $header-menu-color; color: var(--red-ui-header-menu-color);
font-size: 14px; font-size: 14px;
span.red-ui-header-logo { span.red-ui-header-logo {
@ -81,17 +81,17 @@
font-size: 20px; font-size: 20px;
padding: 0px 12px; padding: 0px 12px;
text-decoration: none; text-decoration: none;
color: $header-menu-color; color: var(--red-ui-header-menu-color);
margin: auto 5px; margin: auto 5px;
vertical-align: middle; vertical-align: middle;
border-left: 2px solid $header-background; border-left: 2px solid var(--red-ui-header-background);
border-right: 2px solid $header-background; border-right: 2px solid var(--red-ui-header-background);
&:hover { &:hover {
border-color: $header-menu-item-hover; border-color: var(--red-ui-header-menu-item-hover);
} }
&:active, &.active { &:active, &.active {
background: $header-button-background-active; background: var(--red-ui-header-button-background-active);
} }
&:focus { &:focus {
outline: none; outline: none;
@ -116,18 +116,18 @@
} }
.red-ui-deploy-button { .red-ui-deploy-button {
background: $deploy-button-background; background: var(--red-ui-deploy-button-background);
color: $deploy-button-color; color: var(--red-ui-deploy-button-color);
&:hover { &:hover {
background: $deploy-button-background-hover; background: var(--red-ui-deploy-button-background-hover);
} }
&:focus { &:focus {
outline: none; outline: none;
} }
&:active { &:active {
background: $deploy-button-background-active; background: var(--red-ui-deploy-button-background-active);
color: $deploy-button-color-active; color: var(--red-ui-deploy-button-color-active);
} }
} }
@ -149,21 +149,21 @@
padding: 4px 12px; padding: 4px 12px;
&.disabled { &.disabled {
cursor: default; cursor: default;
background: $deploy-button-background-disabled; background: var(--red-ui-deploy-button-background-disabled);
color: $deploy-button-color-disabled; color: var(--red-ui-deploy-button-color-disabled);
.red-ui-deploy-button-content>img { .red-ui-deploy-button-content>img {
opacity: 0.3; opacity: 0.3;
} }
&+ #red-ui-header-button-deploy-options { &+ #red-ui-header-button-deploy-options {
background: $deploy-button-background-disabled; background: var(--red-ui-deploy-button-background-disabled);
color: $deploy-button-color-active; color: var(--red-ui-deploy-button-color-active);
} }
&+ #red-ui-header-button-deploy-options:hover { &+ #red-ui-header-button-deploy-options:hover {
background: $deploy-button-background-disabled-hover; background: var(--red-ui-deploy-button-background-disabled-hover);
} }
&+ #red-ui-header-button-deploy-options:active { &+ #red-ui-header-button-deploy-options:active {
background: $deploy-button-background-disabled; background: var(--red-ui-deploy-button-background-disabled);
} }
} }
@ -174,23 +174,23 @@
.red-ui-deploy-button-group.open { .red-ui-deploy-button-group.open {
#red-ui-header-button-deploy-options { #red-ui-header-button-deploy-options {
background: $header-button-background-active !important; background: var(--red-ui-header-button-background-active) !important;
} }
} }
li.open .button { li.open .button {
background: $header-button-background-active; background: var(--red-ui-header-button-background-active);
border-color: $header-button-background-active; border-color: var(--red-ui-header-button-background-active);
} }
ul.red-ui-menu-dropdown { ul.red-ui-menu-dropdown {
background: $header-menu-background; background: var(--red-ui-header-menu-background);
border: 1px solid $header-menu-background; border: 1px solid var(--red-ui-header-menu-background);
width: 260px !important; width: 260px !important;
margin-top: 0; margin-top: 0;
li a { li a {
color: $header-menu-color; color: var(--red-ui-header-menu-color);
padding: 3px 10px 3px 40px; padding: 3px 10px 3px 40px;
img { img {
max-width: 100%; max-width: 100%;
@ -199,11 +199,11 @@
border: 3px solid transparent; border: 3px solid transparent;
} }
.red-ui-popover-key { .red-ui-popover-key {
color: $header-menu-color-disabled !important; color: var(--red-ui-header-menu-color-disabled) !important;
border-color: $header-menu-color-disabled !important; border-color: var(--red-ui-header-menu-color-disabled) !important;
} }
&.active img { &.active img {
border: 3px solid $header-menu-item-border-active; border: 3px solid var(--red-ui-header-menu-item-border-active);
} }
span.red-ui-menu-label-container { span.red-ui-menu-label-container {
@ -217,7 +217,7 @@
text-indent: 0px; text-indent: 0px;
} }
span.red-ui-menu-sublabel { span.red-ui-menu-sublabel {
color: $header-menu-sublabel-color; color: var(--red-ui-header-menu-sublabel-color);
font-size: 13px; font-size: 13px;
display: inline-block; display: inline-block;
text-indent: 0px; text-indent: 0px;
@ -228,13 +228,13 @@
> li > a:focus, > li > a:focus,
> li:hover > a, > li:hover > a,
> li:focus > a { > li:focus > a {
background: $header-menu-item-hover !important; background: var(--red-ui-header-menu-item-hover) !important;
} }
li.red-ui-menu-divider { li.red-ui-menu-divider {
background: $headerMenuItemDivider; background: var(--red-ui-headerMenuItemDivider);
} }
li.disabled a { li.disabled a {
color: $header-menu-color-disabled; color: var(--red-ui-header-menu-color-disabled);
} }
> li.disabled > a:hover, > li.disabled > a:hover,
> li.disabled > a:focus { > li.disabled > a:focus {
@ -242,7 +242,7 @@
} }
} }
.red-ui-menu-dropdown-submenu>a:before { .red-ui-menu-dropdown-submenu>a:before {
border-right-color: $headerMenuCaret; border-right-color: var(--red-ui-headerMenuCaret);
} }
/* Deploy menu customisations */ /* Deploy menu customisations */
@ -250,7 +250,7 @@
width: 300px !important; width: 300px !important;
li a { li a {
padding: 10px 30px; padding: 10px 30px;
color: $header-menu-heading-color; color: var(--red-ui-header-menu-heading-color);
span.red-ui-menu-label { span.red-ui-menu-label {
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
@ -263,7 +263,7 @@
} }
/* User menu customisations */ /* User menu customisations */
#usermenu-item-username > .red-ui-menu-label { #usermenu-item-username > .red-ui-menu-label {
color: $header-menu-heading-color; color: var(--red-ui-header-menu-heading-color);
} }
#red-ui-header-button-user .user-profile { #red-ui-header-button-user .user-profile {

74
packages/node_modules/@node-red/editor-client/src/sass/jquery.scss vendored
View File

@ -16,25 +16,27 @@
.ui-widget { .ui-widget {
font-size: 14px !important; font-size: 14px !important;
font-family: $primary-font; font-family: var(--red-ui-primary-font);
} }
.ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button { .ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
font-size: 14px !important; font-size: 14px !important;
font-family: $primary-font; font-family: var(--red-ui-primary-font);
} }
.ui-widget input, .ui-widget div[contenteditable="true"] { .ui-widget input, .ui-widget div[contenteditable="true"] {
box-shadow: none; box-shadow: none;
} }
.ui-widget.ui-widget-content { .ui-widget.ui-widget-content {
border: 1px solid $tertiary-border-color; border: 1px solid var(--red-ui-tertiary-border-color);
} }
.ui-widget-content { .ui-widget-content {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
background: var(--red-ui-secondary-background);
color: var(--red-ui-primary-text-color);
} }
.ui-widget-header { .ui-widget-header {
color: $header-text-color; color: var(--red-ui-header-text-color);
} }
/* jQuery Theme overrides */ /* jQuery Theme overrides */
@ -50,7 +52,7 @@
.ui-dialog { .ui-dialog {
border-radius: 1px; border-radius: 1px;
background: $secondary-background; background: var(--red-ui-secondary-background);
padding: 0; padding: 0;
@include component-shadow; @include component-shadow;
} }
@ -62,20 +64,20 @@
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
padding: 10px; padding: 10px;
background: $primary-background; background: var(--red-ui-primary-background);
border: none; border: none;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
border-radius: 0; border-radius: 0;
} }
.ui-dialog .ui-dialog-buttonpane.ui-widget-content { .ui-dialog .ui-dialog-buttonpane.ui-widget-content {
background: $tertiary-background; background: var(--red-ui-tertiary-background);
} }
.ui-corner-all { .ui-corner-all {
border-radius: 1px; border-radius: 1px;
} }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: $primary-background; background: var(--red-ui-primary-background);
} }
.ui-dialog-no-close .ui-dialog-titlebar-close { .ui-dialog-no-close .ui-dialog-titlebar-close {
display: none; display: none;
@ -95,8 +97,8 @@
padding: 6px 14px; padding: 6px 14px;
margin-right: 8px; margin-right: 8px;
border-radius: 2px; border-radius: 2px;
color: $workspace-button-color; color: var(--red-ui-workspace-button-color);
background: $workspace-button-background; background: var(--red-ui-workspace-button-background);
&.leftButton { &.leftButton {
float: left; float: left;
@ -107,18 +109,18 @@
} }
&.primary { &.primary {
border-color: $workspace-button-background-primary; border-color: var(--red-ui-workspace-button-background-primary);
color: $workspace-button-color-primary !important; color: var(--red-ui-workspace-button-color-primary) !important;
background: $workspace-button-background-primary; background: var(--red-ui-workspace-button-background-primary);
&:not(.disabled):hover { &:not(.disabled):hover {
border-color: $workspace-button-background-primary-hover; border-color: var(--red-ui-workspace-button-background-primary-hover);
background: $workspace-button-background-primary-hover; background: var(--red-ui-workspace-button-background-primary-hover);
color: $workspace-button-color-primary !important; color: var(--red-ui-workspace-button-color-primary) !important;
} }
&.disabled { &.disabled {
border-color: $form-input-border-color; border-color: var(--red-ui-form-input-border-color);
color: $workspace-button-color-disabled !important; color: var(--red-ui-workspace-button-color-disabled) !important;
background: $workspace-button-background; background: var(--red-ui-workspace-button-background);
} }
} }
&.disabled { &.disabled {
@ -142,10 +144,10 @@
.ui-spinner { .ui-spinner {
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
border: 1px solid $form-input-border-color; border: 1px solid var(--red-ui-form-input-border-color);
} }
.ui-spinner input { .ui-spinner input {
background: $form-input-background; background: var(--red-ui-form-input-background);
margin: 0 17px 0 0; margin: 0 17px 0 0;
padding: 6px; padding: 6px;
border: none; border: none;
@ -169,8 +171,18 @@
.ui-button, .ui-button,
html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { html .ui-button.ui-state-disabled:active {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
background: $form-button-background; background: var(--red-ui-form-button-background);
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button{
color: var(--red-ui-primary-text-color);
} }
.ui-state-hover, .ui-state-hover,
@ -180,9 +192,9 @@ html .ui-button.ui-state-disabled:active {
.ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-focus,
.ui-button:hover, .ui-button:focus { .ui-button:hover, .ui-button:focus {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
background: $workspace-button-background-hover; background: var(--red-ui-workspace-button-background-hover);
color: $workspace-button-color-hover; color: var(--red-ui-workspace-button-color-hover);
} }
.ui-state-active, .ui-state-active,
@ -191,10 +203,10 @@ html .ui-button.ui-state-disabled:active {
a.ui-button:active, a.ui-button:active,
.ui-button:active, .ui-button:active,
.ui-button.ui-state-active:hover { .ui-button.ui-state-active:hover {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
background: $workspace-button-background-active; background: var(--red-ui-workspace-button-background-active);
font-weight: normal; font-weight: normal;
color: $workspace-button-color-active; color: var(--red-ui-workspace-button-color-active);
} }
.ui-state-active .ui-icon, .ui-button:active .ui-icon { .ui-state-active .ui-icon, .ui-button:active .ui-icon {

22
packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss vendored
View File

@ -23,9 +23,9 @@
} }
.keyboard-shortcut-list-header { .keyboard-shortcut-list-header {
padding:0 5px 0 5px; padding:0 5px 0 5px;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
div { div {
color: $header-text-color !important; color: var(--red-ui-header-text-color) !important;
} }
.red-ui-searchBox-container { .red-ui-searchBox-container {
width: calc(100% - 20px); width: calc(100% - 20px);
@ -49,7 +49,7 @@
} }
} }
li:hover { li:hover {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
} }
} }
.keyboard-shortcut-entry { .keyboard-shortcut-entry {
@ -78,13 +78,13 @@
width: calc(100% - 160px - 100px - 10px); width: calc(100% - 160px - 100px - 10px);
overflow: hidden; overflow: hidden;
i { i {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
margin-right: 5px; margin-right: 5px;
} }
} }
.keyboard-shortcut-entry-scope { .keyboard-shortcut-entry-scope {
width:100px; width:100px;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
vertical-align: middle; vertical-align: middle;
text-align: right; text-align: right;
} }
@ -94,13 +94,13 @@
} }
} }
.keyboard-shortcut-entry-unassigned { .keyboard-shortcut-entry-unassigned {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
.keyboard-shortcut-entry-key { .keyboard-shortcut-entry-key {
font-style: italic; font-style: italic;
} }
} }
.keyboard-shortcut-entry-expanded { .keyboard-shortcut-entry-expanded {
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
.keyboard-shortcut-entry-key { .keyboard-shortcut-entry-key {
width: 150px; width: 150px;
} }
@ -115,12 +115,12 @@
} }
} }
.help-key { .help-key {
border: 1px solid $tertiary-border-color; border: 1px solid var(--red-ui-tertiary-border-color);
padding: 4px; padding: 4px;
border-radius: 3px; border-radius: 3px;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
box-shadow: $shade-color 1px 1px 1px; box-shadow: var(--red-ui-shade-color 1px 1px 1px);
} }
.help-key-block { .help-key-block {
white-space: nowrap; white-space: nowrap;

36
packages/node_modules/@node-red/editor-client/src/sass/library.scss vendored
View File

@ -18,13 +18,13 @@
pre { pre {
margin: 10px 0; margin: 10px 0;
border: none; border: none;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
span { span {
padding: 5px 0; padding: 5px 0;
} }
span.error { span.error {
padding: 5px; padding: 5px;
border: 1px solid $form-input-border-error-color; border: 1px solid var(--red-ui-form-input-border-error-color);
margin: 0 1px; margin: 0 1px;
} }
} }
@ -52,16 +52,16 @@
.red-ui-clipboard-dialog-tab-clipboard { .red-ui-clipboard-dialog-tab-clipboard {
textarea { textarea {
color: $secondary-text-color-active !important; color: var(--red-ui-secondary-text-color-active) !important;
resize: none; resize: none;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
font-family: $monospace-font !important; font-family: var(--red-ui-monospace-font !important);
font-size: 13px !important; font-size: 13px !important;
height: 100%; height: 100%;
line-height: 1.3em; line-height: 1.3em;
padding: 6px 10px; padding: 6px 10px;
background: $clipboard-textarea-background; background: var(--red-ui-clipboard-textarea-background);
} }
} }
@ -80,7 +80,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 0; padding: 0;
background: $form-input-background; background: var(--red-ui-form-input-background);
&>div { &>div {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -89,7 +89,7 @@
.red-ui-clipboard-dialog-box { .red-ui-clipboard-dialog-box {
height: 400px; height: 400px;
position:relative; position:relative;
border:1px solid $primary-border-color; border:1px solid var(--red-ui-primary-border-color);
} }
#red-ui-clipboard-dialog-export-tab-library-filename { #red-ui-clipboard-dialog-export-tab-library-filename {
@ -111,7 +111,7 @@
.red-ui-clipboard-dialog-tabs-content>div.red-ui-clipboard-dialog-export-tab-library-browser { .red-ui-clipboard-dialog-tabs-content>div.red-ui-clipboard-dialog-export-tab-library-browser {
height: calc(100% - 60px); height: calc(100% - 60px);
margin-bottom: 13px; margin-bottom: 13px;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
box-sizing: border-box; box-sizing: border-box;
} }
#red-ui-clipboard-dialog-import-tab-library-browser { #red-ui-clipboard-dialog-import-tab-library-browser {
@ -124,7 +124,7 @@
position: relative; position: relative;
height: 100%; height: 100%;
.red-ui-treeList-container { .red-ui-treeList-container {
background: $secondary-background; background: var(--red-ui-secondary-background);
border: none; border: none;
border-radius: 0; border-radius: 0;
li { li {
@ -149,14 +149,14 @@
#red-ui-library-dialog-save-browser { #red-ui-library-dialog-save-browser {
height: calc(100% - 60px); height: calc(100% - 60px);
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
margin-bottom: 10px; margin-bottom: 10px;
} }
#red-ui-library-dialog-load-browser { #red-ui-library-dialog-load-browser {
// border: 1px solid $primary-border-color; // border: 1px solid var(--red-ui-primary-border-color);
} }
#red-ui-library-dialog-load-panes { #red-ui-library-dialog-load-panes {
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
} }
@ -180,15 +180,15 @@
position: relative; position: relative;
li:not(:first-child) .red-ui-clipboard-dialog-import-conflicts-item-header { li:not(:first-child) .red-ui-clipboard-dialog-import-conflicts-item-header {
// border-top: 1px solid $secondary-border-color; // border-top: 1px solid var(--red-ui-secondary-border-color);
} }
} }
.red-ui-clipboard-dialog-import-conflicts-item-header { .red-ui-clipboard-dialog-import-conflicts-item-header {
background: $tertiary-background; background: var(--red-ui-tertiary-background);
& > span:first-child { & > span:first-child {
color: $header-text-color; color: var(--red-ui-header-text-color);
padding-left: 4px; padding-left: 4px;
font-size: 12px; font-size: 12px;
} }
@ -199,7 +199,7 @@
bottom: 0; bottom: 0;
right: 0px; right: 0px;
text-align: center; text-align: center;
color: $form-text-color; color: var(--red-ui-form-text-color);
.form-row & label { .form-row & label {
padding: 2px 0; padding: 2px 0;
line-height: 23px; line-height: 23px;
@ -210,7 +210,7 @@
height: 100%; height: 100%;
width: 80px; width: 80px;
text-align: center; text-align: center;
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
} }
input[type="checkbox"] { input[type="checkbox"] {
display: inline-block; display: inline-block;
@ -265,7 +265,7 @@
span:nth-child(3), span:nth-child(4) { span:nth-child(3), span:nth-child(4) {
flex-grow: 0; flex-grow: 0;
padding-right: 5px; padding-right: 5px;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-size: 0.9em; font-size: 0.9em;
} }
} }

56
packages/node_modules/@node-red/editor-client/src/sass/mixins.scss vendored
View File

@ -31,33 +31,33 @@
} }
@mixin component-border { @mixin component-border {
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
box-sizing: border-box; box-sizing: border-box;
} }
@mixin reset-a-style { @mixin reset-a-style {
color: $workspace-button-color !important; color: var(--red-ui-workspace-button-color) !important;
background: $workspace-button-background; background: var(--red-ui-workspace-button-background);
text-decoration: none; text-decoration: none;
&.disabled, &:disabled { &.disabled, &:disabled {
cursor: default; cursor: default;
color: $workspace-button-color-disabled !important; color: var(--red-ui-workspace-button-color-disabled) !important;
} }
&:hover, &:focus { &:hover, &:focus {
text-decoration: none; text-decoration: none;
} }
&:not(.disabled):not(:disabled):hover, { &:not(.disabled):not(:disabled):hover {
color: $workspace-button-color-hover !important; color: var(--red-ui-workspace-button-color-hover) !important;
background: $workspace-button-background-hover; background: var(--red-ui-workspace-button-background-hover);
} }
&:not(.disabled):not(:disabled):focus { &:not(.disabled):not(:disabled):focus {
color: $workspace-button-color-focus !important; color: var(--red-ui-workspace-button-color-focus) !important;
} }
&:not(.disabled):not(:disabled):active { &:not(.disabled):not(:disabled):active {
color: $workspace-button-color-active !important; color: var(--red-ui-workspace-button-color-active) !important;
background: $workspace-button-background-active; background: var(--red-ui-workspace-button-background-active);
text-decoration: none; text-decoration: none;
} }
} }
@ -68,14 +68,14 @@
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
border: 1px solid $form-input-border-color; border: 1px solid var(--red-ui-form-input-border-color);
text-align: center; text-align: center;
margin:0; margin:0;
cursor:pointer; cursor:pointer;
&.selected:not(.disabled):not(:disabled) { &.selected:not(.disabled):not(:disabled) {
color: $workspace-button-color-selected !important; color: var(--red-ui-workspace-button-color-selected) !important;
background: $workspace-button-background-active; background: var(--red-ui-workspace-button-background-active);
} }
.button-group &:not(:first-child) { .button-group &:not(:first-child) {
border-left: none; border-left: none;
@ -108,23 +108,23 @@
} }
&:focus { &:focus {
outline: 1px solid $workspace-button-color-focus-outline; outline: 1px solid var(--red-ui-workspace-button-color-focus-outline);
outline-offset: 1px; outline-offset: 1px;
} }
&.primary { &.primary {
border-color: $workspace-button-background-primary; border-color: var(--red-ui-workspace-button-background-primary);
color: $workspace-button-color-primary !important; color: var(--red-ui-workspace-button-color-primary) !important;
background: $workspace-button-background-primary; background: var(--red-ui-workspace-button-background-primary);
&.disabled, &.ui-state-disabled { &.disabled, &.ui-state-disabled {
background: none; background: none;
color: $workspace-button-color !important; color: var(--red-ui-workspace-button-color) !important;
border-color: $form-input-border-color; border-color: var(--red-ui-form-input-border-color);
} }
&:not(.disabled):not(.ui-button-disabled):hover { &:not(.disabled):not(.ui-button-disabled):hover {
border-color: $workspace-button-background-primary-hover; border-color: var(--red-ui-workspace-button-background-primary-hover);
background: $workspace-button-background-primary-hover; background: var(--red-ui-workspace-button-background-primary-hover);
color: $workspace-button-color-primary !important; color: var(--red-ui-workspace-button-color-primary) !important;
} }
} }
&.secondary { &.secondary {
@ -151,7 +151,7 @@
margin-bottom: 1px; margin-bottom: 1px;
&.selected:not(.disabled):not(:disabled) { &.selected:not(.disabled):not(:disabled) {
border-bottom-width: 2px; border-bottom-width: 2px;
border-bottom-color: $form-input-border-selected-color; border-bottom-color: var(--red-ui-form-input-border-selected-color);
margin-bottom: 0; margin-bottom: 0;
cursor: default; cursor: default;
} }
@ -166,7 +166,7 @@
padding: 6px 14px; padding: 6px 14px;
margin-right: 8px; margin-right: 8px;
&:not(.disabled):hover { &:not(.disabled):hover {
//color: $workspace-button-color; //color: var(--red-ui-workspace-button-color);
} }
&.disabled { &.disabled {
background: none; background: none;
@ -187,8 +187,8 @@
} }
@mixin component-footer { @mixin component-footer {
border-top: 1px solid $primary-border-color; border-top: 1px solid var(--red-ui-primary-border-color);
background: $primary-background; background: var(--red-ui-primary-background);
text-align: right; text-align: right;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -231,7 +231,7 @@
} }
@mixin component-shadow { @mixin component-shadow {
box-shadow: 1px 1px 4px $shadow; box-shadow: 1px 1px 4px var(--red-ui-shadow);
} }
@ -241,7 +241,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: $shade-color; background: var(--red-ui-shade-color);
z-index: 5; z-index: 5;
} }
.red-ui-shade { .red-ui-shade {

14
packages/node_modules/@node-red/editor-client/src/sass/notifications.scss vendored
View File

@ -27,10 +27,10 @@
position: relative; position: relative;
padding: 8px 18px 0px; padding: 8px 18px 0px;
margin-bottom: 4px; margin-bottom: 4px;
box-shadow: 0 1px 1px 1px $shadow; box-shadow: 0 1px 1px 1px var(--red-ui-shadow);
background-color: $secondary-background; background-color: var(--red-ui-secondary-background);
color: $primary-text-color; color: var(--red-ui-primary-text-color);
border: 1px solid $notification-border-default; border: 1px solid var(--red-ui-notification-border-default);
border-left-width: 16px; border-left-width: 16px;
overflow: hidden; overflow: hidden;
.ui-dialog-buttonset { .ui-dialog-buttonset {
@ -50,13 +50,13 @@
} }
.red-ui-notification-success { .red-ui-notification-success {
border-color: $notification-border-success; border-color: var(--red-ui-notification-border-success);
} }
.red-ui-notification-warning { .red-ui-notification-warning {
border-color: $notification-border-warning; border-color: var(--red-ui-notification-border-warning);
} }
.red-ui-notification-error { .red-ui-notification-error {
border-color: $notification-border-error; border-color: var(--red-ui-notification-border-error);
} }
.red-ui-notification-compact { .red-ui-notification-compact {

54
packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss vendored
View File

@ -27,7 +27,7 @@
left:0; left:0;
padding: 0; padding: 0;
box-sizing:border-box; box-sizing:border-box;
background: $secondary-background; background: var(--red-ui-secondary-background);
.red-ui-editableList-container { .red-ui-editableList-container {
border: none; border: none;
@ -37,27 +37,27 @@
li { li {
// border: none; // border: none;
// border-top: 1px solid $primary-border-color; // border-top: 1px solid var(--red-ui-primary-border-color);
padding: 0px; padding: 0px;
.red-ui-button { .red-ui-button {
min-width: 60px; min-width: 60px;
} }
.disabled { .disabled {
// background: $secondary-background-inactive;//f3f3f3; // background: var(--red-ui-secondary-background-inactive;//f3f3f3);
.red-ui-palette-module-name { .red-ui-palette-module-name {
font-style: italic; font-style: italic;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
.red-ui-palette-module-version { .red-ui-palette-module-version {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
.red-ui-palette-module-errors .fa-warning { .red-ui-palette-module-errors .fa-warning {
opacity: 0.5; opacity: 0.5;
} }
ul.red-ui-palette-module-error-list li { ul.red-ui-palette-module-error-list li {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
@ -66,7 +66,7 @@
padding: 12px 16px; padding: 12px 16px;
} }
&:last-child { &:last-child {
// border-bottom: 1px solid $primary-border-color; // border-bottom: 1px solid var(--red-ui-primary-border-color);
} }
} }
@ -79,14 +79,14 @@
bottom:0 bottom:0
} }
.red-ui-palette-editor-toolbar { .red-ui-palette-editor-toolbar {
background: $primary-background; background: var(--red-ui-primary-background);
box-sizing: border-box; box-sizing: border-box;
padding: 8px 10px; padding: 8px 10px;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
text-align: right; text-align: right;
} }
.red-ui-palette-module-shade-status { .red-ui-palette-module-shade-status {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
.red-ui-palette-module-updated { .red-ui-palette-module-updated {
margin-left: 10px; margin-left: 10px;
@ -98,7 +98,7 @@
.red-ui-palette-module-description { .red-ui-palette-module-description {
margin-left: 20px; margin-left: 20px;
font-size: 0.9em; font-size: 0.9em;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
.red-ui-palette-module-link { .red-ui-palette-module-link {
} }
@ -120,7 +120,7 @@
} }
} }
.red-ui-palette-module-set { .red-ui-palette-module-set {
border:1px solid $secondary-border-color; border:1px solid var(--red-ui-secondary-border-color);
border-radius: 0; border-radius: 0;
padding: 5px; padding: 5px;
position: relative; position: relative;
@ -138,7 +138,7 @@
} }
.red-ui-palette-module-type { .red-ui-palette-module-type {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
padding-left: 5px; padding-left: 5px;
font-size: 0.9em; font-size: 0.9em;
@include enable-selection; @include enable-selection;
@ -150,8 +150,8 @@
border-radius: 3px; border-radius: 3px;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
background: $primary-background; background: var(--red-ui-primary-background);
border: 1px dashed $secondary-border-color; border: 1px dashed var(--red-ui-secondary-border-color);
} }
.red-ui-palette-module-set-button-group { .red-ui-palette-module-set-button-group {
position: absolute; position: absolute;
@ -160,35 +160,35 @@
} }
.red-ui-palette-module-set-disabled { .red-ui-palette-module-set-disabled {
background: $list-item-background-disabled; background: var(--red-ui-list-item-background-disabled);
.red-ui-palette-module-type { .red-ui-palette-module-type {
color: $secondary-text-color-disabled-active; color: var(--red-ui-secondary-text-color-disabled-active);
} }
} }
.red-ui-palette-module-more { .red-ui-palette-module-more {
padding: 0 !important; padding: 0 !important;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
background: $tab-background-inactive; background: var(--red-ui-tab-background-inactive);
a { a {
display: block; display: block;
text-align: center; text-align: center;
padding: 12px 8px; padding: 12px 8px;
color: $text-color-code; color: var(--red-ui-text-color-code);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: $tab-background-hover; background: var(--red-ui-tab-background-hover);
} }
} }
} }
} }
.red-ui-palette-module-meta { .red-ui-palette-module-meta {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
position: relative; position: relative;
&.disabled { &.disabled {
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
.fa { .fa {
@ -198,7 +198,7 @@
} }
} }
.red-ui-palette-module-name { .red-ui-palette-module-name {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
white-space: nowrap; white-space: nowrap;
@include enable-selection; @include enable-selection;
} }
@ -216,7 +216,7 @@
} }
} }
.red-ui-palette-module-meta .fa-warning { .red-ui-palette-module-meta .fa-warning {
color: $text-color-warning; color: var(--red-ui-text-color-warning);
} }
ul.red-ui-palette-module-error-list { ul.red-ui-palette-module-error-list {
display: inline-block; display: inline-block;
@ -264,9 +264,9 @@ button.red-ui-palette-editor-upload-button {
right: 0; right: 0;
top: 44px; top: 44px;
padding: 20px; padding: 20px;
background: $secondary-background; background: var(--red-ui-secondary-background);
border-bottom: 1px $secondary-border-color solid; border-bottom: 1px var(--red-ui-secondary-border-color solid);
box-shadow: 1px 1px 4px $shadow; box-shadow: 1px 1px 4px var(--red-ui-shadow);
.placeholder-input { .placeholder-input {
width: calc(100% - 180px); width: calc(100% - 180px);

46
packages/node_modules/@node-red/editor-client/src/sass/palette.scss vendored
View File

@ -20,7 +20,7 @@
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
left:0px; left:0px;
background: $primary-background; background: var(--red-ui-primary-background);
width: 180px; width: 180px;
text-align: center; text-align: center;
@include disable-selection; @include disable-selection;
@ -55,26 +55,26 @@
.red-ui-palette-search { .red-ui-palette-search {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: $secondary-background; background: var(--red-ui-secondary-background);
text-align: center; text-align: center;
height: 35px; height: 35px;
padding: 3px; padding: 3px;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
box-sizing:border-box; box-sizing:border-box;
} }
.red-ui-palette-category { .red-ui-palette-category {
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
.red-ui-palette-content { .red-ui-palette-content {
background: $palette-content-background; background: var(--red-ui-palette-content-background);
padding: 3px; padding: 3px;
} }
.red-ui-palette-header { .red-ui-palette-header {
position: relative; position: relative;
background: $palette-header-background; background: var(--red-ui-palette-header-background);
color: $palette-header-color; color: var(--red-ui-palette-header-color);
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
padding: 9px; padding: 9px;
@ -83,7 +83,7 @@
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
&:hover { &:hover {
background: $palette-header-background !important; background: var(--red-ui-palette-header-background) !important;
} }
} }
.red-ui-palette-header > i { .red-ui-palette-header > i {
@ -106,7 +106,7 @@
clear: both; clear: both;
} }
.red-ui-palette-label { .red-ui-palette-label {
color: $node-label-color; color: var(--red-ui-node-label-color);
font-size: 13px; font-size: 13px;
margin: 4px 0 4px 32px; margin: 4px 0 4px 32px;
line-height: 20px; line-height: 20px;
@ -121,11 +121,11 @@
.red-ui-palette-node { .red-ui-palette-node {
// display: inline-block; // display: inline-block;
cursor: move; cursor: move;
background: $secondary-background; background: var(--red-ui-secondary-background);
margin: 10px auto; margin: 10px auto;
height: 25px; height: 25px;
border-radius: 5px; border-radius: 5px;
border: 1px solid $node-border; border: 1px solid var(--red-ui-node-border);
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 120px; width: 120px;
@ -141,7 +141,7 @@
} }
.red-ui-palette-node:hover { .red-ui-palette-node:hover {
border-color: transparent; border-color: transparent;
box-shadow: 0 0 0 2px $node-selected-color; box-shadow: 0 0 0 2px var(--red-ui-node-selected-color);
} }
.red-ui-palette-port { .red-ui-palette-port {
position: absolute; position: absolute;
@ -149,11 +149,11 @@
left: -5px; left: -5px;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
background: $node-port-background; background: var(--red-ui-node-port-background);
border-radius: 3px; border-radius: 3px;
width: 10px; width: 10px;
height: 10px; height: 10px;
border: 1px solid $node-border; border: 1px solid var(--red-ui-node-border);
} }
.red-ui-palette-port-output { .red-ui-palette-port-output {
left:auto; left:auto;
@ -161,7 +161,7 @@
} }
.red-ui-palette-node:hover .red-ui-palette-port { .red-ui-palette-node:hover .red-ui-palette-port {
background-color: $node-port-background-hover; background-color: var(--red-ui-node-port-background-hover);
} }
.red-ui-palette-icon-container { .red-ui-palette-icon-container {
position: absolute; position: absolute;
@ -170,14 +170,14 @@
bottom:0; bottom:0;
left:0; left:0;
width: 30px; width: 30px;
border-right: 1px solid $node-icon-background-color; border-right: 1px solid var(--red-ui-node-icon-background-color);
background-color: $node-icon-background-color; background-color: var(--red-ui-node-icon-background-color);
} }
.red-ui-palette-icon-container-right { .red-ui-palette-icon-container-right {
left: auto; left: auto;
right: 0; right: 0;
border-right: none; border-right: none;
border-left: 1px solid $node-icon-background-color; border-left: 1px solid var(--red-ui-node-icon-background-color);
} }
.red-ui-palette-icon { .red-ui-palette-icon {
display: inline-block; display: inline-block;
@ -198,7 +198,7 @@
background: none; background: none;
} }
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-size: 18px; font-size: 18px;
} }
} }
@ -249,12 +249,12 @@
// width: 30px; // width: 30px;
// height: 25px; // height: 25px;
border-radius: 3px; border-radius: 3px;
border: 1px solid $node-border; border: 1px solid var(--red-ui-node-border);
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
position: relative; position: relative;
background-color: $node-icon-background-color; background-color: var(--red-ui-node-icon-background-color);
text-align: center; text-align: center;
.red-ui-palette-icon { .red-ui-palette-icon {
@ -278,7 +278,7 @@
background: none; background: none;
} }
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-size: 16px; font-size: 16px;
} }
} }
@ -318,5 +318,5 @@
.red-ui-node-label { .red-ui-node-label {
white-space: nowrap; white-space: nowrap;
margin-left: 4px; margin-left: 4px;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }

16
packages/node_modules/@node-red/editor-client/src/sass/panels.scss vendored
View File

@ -35,12 +35,12 @@
.red-ui-panels-separator { .red-ui-panels-separator {
flex: 0 0 auto; flex: 0 0 auto;
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
height: 7px; height: 7px;
box-sizing: border-box; box-sizing: border-box;
cursor: ns-resize; cursor: ns-resize;
background-color: $primary-background; background-color: var(--red-ui-primary-background);
&:before { &:before {
content: ''; content: '';
@ -55,7 +55,7 @@
mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $grip-color; background-color: var(--red-ui-grip-color);
} }
} }
@ -80,13 +80,13 @@
vertical-align: top; vertical-align: top;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
border-right: 1px solid $secondary-border-color; border-right: 1px solid var(--red-ui-secondary-border-color);
height: 100%; height: 100%;
width: 7px; width: 7px;
display: inline-block; display: inline-block;
cursor: ew-resize; cursor: ew-resize;
background-color: $primary-background; background-color: var(--red-ui-primary-background);
&:before { &:before {
content: ''; content: '';
@ -101,7 +101,7 @@
mask-position: 50% 50%; mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $grip-color; background-color: var(--red-ui-grip-color);
} }
} }
} }

24
packages/node_modules/@node-red/editor-client/src/sass/popover.scss vendored
View File

@ -25,7 +25,7 @@
color: var(--red-ui-popover-color); color: var(--red-ui-popover-color);
border-radius: 4px; border-radius: 4px;
z-index: 1000; z-index: 1000;
font-family: $primary-font; font-family: var(--red-ui-primary-font);
font-size: 14px; font-size: 14px;
line-height: 1.4em; line-height: 1.4em;
@include component-shadow; @include component-shadow;
@ -146,7 +146,7 @@
.red-ui-popover-key { .red-ui-popover-key {
font-size: 11px; font-size: 11px;
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
margin-left: 3px; margin-left: 3px;
border: 1px solid var(--red-ui-popover-color); border: 1px solid var(--red-ui-popover-color);
border-radius:3px; border-radius:3px;
@ -163,42 +163,42 @@
color: var(--red-ui-popover-color) !important; color: var(--red-ui-popover-color) !important;
} }
a:focus { a:focus {
outline: 1px solid $form-input-focus-color; outline: 1px solid var(--red-ui-form-input-focus-color);
} }
} }
.red-ui-popover a.red-ui-button, .red-ui-popover a.red-ui-button,
.red-ui-popover button.red-ui-button { .red-ui-popover button.red-ui-button {
&:not(.primary) { &:not(.primary) {
border-color: $popover-button-border-color; border-color: var(--red-ui-popover-button-border-color);
background: var(--red-ui-popover-background); background: var(--red-ui-popover-background);
color: var(--red-ui-popover-color) !important; color: var(--red-ui-popover-color) !important;
} }
&:not(.primary):not(.disabled):not(.ui-button-disabled):hover { &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
border-color: $popover-button-border-color-hover; border-color: var(--red-ui-popover-button-border-color-hover);
} }
&.primary { &.primary {
border-color: $popover-button-border-color; border-color: var(--red-ui-popover-button-border-color);
} }
&.primary:not(.disabled):not(.ui-button-disabled):hover { &.primary:not(.disabled):not(.ui-button-disabled):hover {
border-color: $popover-button-border-color-hover; border-color: var(--red-ui-popover-button-border-color-hover);
} }
} }
.red-ui-popover code { .red-ui-popover code {
border: none; border: none;
background: none; background: none;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
.red-ui-popover-panel { .red-ui-popover-panel {
@include component-shadow; @include component-shadow;
font-family: $primary-font; font-family: var(--red-ui-primary-font);
font-size: $primary-font-size; font-size: var(--red-ui-primary-font-size);
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
background: $secondary-background; background: var(--red-ui-secondary-background);
z-index: 2000; z-index: 2000;
} }

206
packages/node_modules/@node-red/editor-client/src/sass/projects.scss vendored
View File

@ -29,7 +29,7 @@
overflow-y: scroll; overflow-y: scroll;
} }
.red-ui-sidebar-vc-shade { .red-ui-sidebar-vc-shade {
background: $primary-background; background: var(--red-ui-primary-background);
} }
.red-ui-projects-edit-form form { .red-ui-projects-edit-form form {
@ -37,7 +37,7 @@
.form-row { .form-row {
margin-bottom: 15px; margin-bottom: 15px;
label { label {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
width: 100%; width: 100%;
display: block; display: block;
&.red-ui-projects-edit-form-inline-label { &.red-ui-projects-edit-form-inline-label {
@ -57,7 +57,7 @@
} }
.red-ui-projects-edit-form-sublabel { .red-ui-projects-edit-form-sublabel {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
text-align: right; text-align: right;
margin-bottom: -15px; margin-bottom: -15px;
font-weight: normal; font-weight: normal;
@ -76,7 +76,7 @@
font-size: 1.4em; font-size: 1.4em;
padding: 10px; padding: 10px;
min-height: 40px; min-height: 40px;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
} }
.red-ui-projects-dialog-screen-start-body { .red-ui-projects-dialog-screen-start-body {
min-height: 300px; min-height: 300px;
@ -132,21 +132,21 @@
margin-left: -1px; margin-left: -1px;
padding: 15px; padding: 15px;
margin-top: -15px; margin-top: -15px;
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 3px; border-radius: 3px;
} }
.red-ui-projects-dialog-credentials-box-left { .red-ui-projects-dialog-credentials-box-left {
width: 220px; width: 220px;
> div { > div {
padding: 7px 8px 3px 8px; padding: 7px 8px 3px 8px;
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 4px; border-radius: 4px;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-right-color: $form-background; border-right-color: var(--red-ui-form-background);
&.disabled { &.disabled {
border-color: $form-background; border-color: var(--red-ui-form-background);
border-right-color:$secondary-border-color; border-right-color:var(--red-ui-secondary-border-color);
} }
i { i {
font-size: 1.4em; font-size: 1.4em;
@ -173,7 +173,7 @@
} }
.red-ui-projects-dialog-project-list-container { .red-ui-projects-dialog-project-list-container {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -197,43 +197,43 @@
.red-ui-projects-dialog-project-list-entry { .red-ui-projects-dialog-project-list-entry {
padding: 12px 0; padding: 12px 0;
color: $list-item-color; color: var(--red-ui-list-item-color);
background: $list-item-background; background: var(--red-ui-list-item-background);
border-left: 3px solid $list-item-background; border-left: 3px solid var(--red-ui-list-item-background);
border-right: 3px solid $list-item-background; border-right: 3px solid var(--red-ui-list-item-background);
&.projects-list-entry-current { &.projects-list-entry-current {
&:not(.selectable) { &:not(.selectable) {
color: $form-text-color; color: var(--red-ui-form-text-color);
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
border-left-color:$list-item-border-selected; border-left-color:var(--red-ui-list-item-border-selected);
border-right-color:$list-item-border-selected; border-right-color:var(--red-ui-list-item-border-selected);
} }
i { i {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
} }
&.selectable { &.selectable {
cursor: pointer; cursor: pointer;
&:hover:not(.selected) { &:hover:not(.selected) {
color: $form-text-color; color: var(--red-ui-form-text-color);
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
border-left-color:$list-item-background-hover; border-left-color:var(--red-ui-list-item-background-hover);
border-right-color:$list-item-background-hover; border-right-color:var(--red-ui-list-item-background-hover);
} }
} }
.red-ui-projects-dialog-project-list-entry-icon { .red-ui-projects-dialog-project-list-entry-icon {
i { i {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
font-size: 2em; font-size: 2em;
} }
} }
&.selected { &.selected {
color: $form-text-color; color: var(--red-ui-form-text-color);
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
border-left-color:$list-item-border-selected; border-left-color:var(--red-ui-list-item-border-selected);
border-right-color:$list-item-border-selected; border-right-color:var(--red-ui-list-item-border-selected);
} }
span { span {
display: inline-block; display: inline-block;
@ -249,7 +249,7 @@
float: right; float: right;
margin-right: 20px; margin-right: 20px;
font-size: 0.9em; font-size: 0.9em;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
padding-top: 4px; padding-top: 4px;
} }
.red-ui-projects-dialog-project-list-entry-tools { .red-ui-projects-dialog-project-list-entry-tools {
@ -257,7 +257,7 @@
top: 16px; top: 16px;
right: 30px; right: 30px;
display: none; display: none;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
&:hover { &:hover {
.red-ui-projects-dialog-project-list-entry-tools { .red-ui-projects-dialog-project-list-entry-tools {
@ -274,7 +274,7 @@
width: 1000px; width: 1000px;
overflow: hidden; overflow: hidden;
padding: 5px 20px; padding: 5px 20px;
background: $secondary-background; background: var(--red-ui-secondary-background);
transition: left 0.4s; transition: left 0.4s;
white-space: nowrap; white-space: nowrap;
> span { > span {
@ -289,7 +289,7 @@
position: relative; position: relative;
} }
.red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) { .red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) {
color: $secondary-text-color-active !important; color: var(--red-ui-secondary-text-color-active) !important;
} }
.red-ui-projects-dialog-screen-input-status { .red-ui-projects-dialog-screen-input-status {
text-align: right; text-align: right;
@ -298,7 +298,7 @@
right: 8px; right: 8px;
width: 70px; width: 70px;
height: 30px; height: 30px;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
.red-ui-sidebar-vc { .red-ui-sidebar-vc {
@ -338,17 +338,17 @@
} }
.red-ui-palette-module-unused { .red-ui-palette-module-unused {
& > * { & > * {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
} }
.red-ui-palette-module-unknown { .red-ui-palette-module-unknown {
border: 1px dashed $secondary-border-color; border: 1px dashed var(--red-ui-secondary-border-color);
background: $secondary-background-inactive; background: var(--red-ui-secondary-background-inactive);
} }
.red-ui-palette-module-not-installed { .red-ui-palette-module-not-installed {
border: 1px dashed $text-color-warning; border: 1px dashed var(--red-ui-text-color-warning);
i.fa-warning { i.fa-warning {
color: $text-color-warning; color: var(--red-ui-text-color-warning);
} }
} }
} }
@ -365,11 +365,11 @@
} }
.red-ui-sidebar-vc { .red-ui-sidebar-vc {
.red-ui-editableList-container { .red-ui-editableList-container {
background: $tertiary-background; background: var(--red-ui-tertiary-background);
padding: 0; padding: 0;
li { li {
padding:0; padding:0;
background: $secondary-background; background: var(--red-ui-secondary-background);
} }
} }
.red-ui-editableList-border { .red-ui-editableList-border {
@ -384,7 +384,7 @@
box-sizing: border-box; box-sizing: border-box;
transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out;
&:first-child { &:first-child {
// border-bottom: 1px solid $primary-border-color; // border-bottom: 1px solid var(--red-ui-primary-border-color);
} }
} }
.red-ui-sidebar-vc-merging { .red-ui-sidebar-vc-merging {
@ -399,7 +399,7 @@
right:0; right:0;
height:0; height:0;
transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
&.red-ui-sidebar-vc-slide-box-top { &.red-ui-sidebar-vc-slide-box-top {
@ -408,20 +408,20 @@
left: auto; left: auto;
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;
border-left: 1px solid $primary-border-color; border-left: 1px solid var(--red-ui-primary-border-color);
border-right: 1px solid $primary-border-color; border-right: 1px solid var(--red-ui-primary-border-color);
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
box-shadow: 1px 1px 4px $shadow; box-shadow: 1px 1px 4px var(--red-ui-shadow);
color: $primary-text-color; color: var(--red-ui-primary-text-color);
background: $tertiary-background; background: var(--red-ui-tertiary-background);
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
&.red-ui-sidebar-vc-slide-box-bottom { &.red-ui-sidebar-vc-slide-box-bottom {
bottom: 0px; bottom: 0px;
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
} }
textarea { textarea {
@ -437,15 +437,15 @@
.red-ui-projects-branch-list { .red-ui-projects-branch-list {
position: relative; position: relative;
.red-ui-searchBox-container { .red-ui-searchBox-container {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
border-left: 1px solid $secondary-border-color; border-left: 1px solid var(--red-ui-secondary-border-color);
border-right: 1px solid $secondary-border-color; border-right: 1px solid var(--red-ui-secondary-border-color);
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
overflow: hidden; overflow: hidden;
} }
.red-ui-editableList { .red-ui-editableList {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
& > .red-ui-editableList-border { & > .red-ui-editableList-border {
@ -456,7 +456,7 @@
padding: 0; padding: 0;
li { li {
padding: 0; padding: 0;
background: $secondary-background; background: var(--red-ui-secondary-background);
} }
} }
} }
@ -483,23 +483,23 @@
.red-ui-sidebar-vc-branch-list-entry { .red-ui-sidebar-vc-branch-list-entry {
padding: 5px 8px; padding: 5px 8px;
margin: 0 1px; margin: 0 1px;
color: $list-item-color; color: var(--red-ui-list-item-color);
background: $list-item-background; background: var(--red-ui-list-item-background);
border-left: 2px solid $list-item-background; border-left: 2px solid var(--red-ui-list-item-background);
border-right: 2px solid $list-item-background; border-right: 2px solid var(--red-ui-list-item-background);
cursor: pointer; cursor: pointer;
&.selected { &.selected {
border-left-color:$list-item-border-selected; border-left-color:var(--red-ui-list-item-border-selected);
border-right-color:$list-item-border-selected; border-right-color:var(--red-ui-list-item-border-selected);
} }
i { width: 16px; text-align: center} i { width: 16px; text-align: center}
&.input-error { &.input-error {
cursor: default; cursor: default;
} }
&:not(.input-error):hover { &:not(.input-error):hover {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
border-left-color:$list-item-border-selected; border-left-color:var(--red-ui-list-item-border-selected);
border-right-color:$list-item-border-selected; border-right-color:var(--red-ui-list-item-border-selected);
} }
span { span {
margin-left: 5px; margin-left: 5px;
@ -507,7 +507,7 @@
span.current { span.current {
float: right; float: right;
font-size: 0.8em; font-size: 0.8em;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
} }
@ -542,7 +542,7 @@
} }
&.red-ui-help-info-node { &.red-ui-help-info-node {
text-align: center; text-align: center;
background: $list-item-background; background: var(--red-ui-list-item-background);
white-space: normal; white-space: normal;
height: auto; height: auto;
} }
@ -556,63 +556,63 @@
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $secondary-background-hover; background: var(--red-ui-secondary-background-hover);
} }
} }
.red-ui-sidebar-vc-commit-more { .red-ui-sidebar-vc-commit-more {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
text-align: center; text-align: center;
padding: 10px; padding: 10px;
font-style: italic; font-style: italic;
} }
.red-ui-sidebar-vc-commit-sha { .red-ui-sidebar-vc-commit-sha {
float: right; float: right;
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
color: $vcCommitShaColor; color: var(--red-ui-vcCommitShaColor);
display: inline-block; display: inline-block;
font-size: 0.85em; font-size: 0.85em;
margin-left: 5px; margin-left: 5px;
} }
.red-ui-sidebar-vc-commit-subject { .red-ui-sidebar-vc-commit-subject {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
} }
.red-ui-sidebar-vc-commit-refs { .red-ui-sidebar-vc-commit-refs {
min-height: 22px; min-height: 22px;
} }
.red-ui-sidebar-vc-commit-ref { .red-ui-sidebar-vc-commit-ref {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
font-size: 0.7em; font-size: 0.7em;
border: 1px solid $tertiary-border-color; border: 1px solid var(--red-ui-tertiary-border-color);
border-radius: 10px; border-radius: 10px;
padding: 2px 5px; padding: 2px 5px;
margin-right: 5px; margin-right: 5px;
} }
.red-ui-sidebar-vc-commit-date { .red-ui-sidebar-vc-commit-date {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-size: 0.85em; font-size: 0.85em;
} }
.red-ui-sidebar-vc-commit-user { .red-ui-sidebar-vc-commit-user {
float: right; float: right;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-size: 0.85em; font-size: 0.85em;
} }
.red-ui-sidebar-vc-commit-head { .red-ui-sidebar-vc-commit-head {
} }
.red-ui-sidebar-vc-change-header { .red-ui-sidebar-vc-change-header {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
background: $tertiary-background; background: var(--red-ui-tertiary-background);
padding: 4px 10px; padding: 4px 10px;
height: 30px; height: 30px;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
i { i {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
} }
.red-ui-sidebar-vc-repo-toolbar { .red-ui-sidebar-vc-repo-toolbar {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
background: $tertiary-background; background: var(--red-ui-tertiary-background);
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
@ -637,7 +637,7 @@
.red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border { .red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
border-radius: 0; border-radius: 0;
border: none; border: none;
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
} }
.red-ui-editableList-container .red-ui-projects-dialog-file-list { .red-ui-editableList-container .red-ui-projects-dialog-file-list {
@ -654,39 +654,39 @@
} }
.red-ui-projects-dialog-file-list-entry { .red-ui-projects-dialog-file-list-entry {
padding: 3px 0; padding: 3px 0;
border-left: 2px solid $list-item-background; border-left: 2px solid var(--red-ui-list-item-background);
border-right: 2px solid $list-item-background; border-right: 2px solid var(--red-ui-list-item-background);
background: $list-item-background; background: var(--red-ui-list-item-background);
&.projects-list-entry-current { &.projects-list-entry-current {
&:not(.selectable) { &:not(.selectable) {
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
} }
i { i {
color: $secondary-text-color-selected; color: var(--red-ui-secondary-text-color-selected);
} }
} }
&.selectable { &.selectable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
border-left-color:$list-item-border-selected; border-left-color:var(--red-ui-list-item-border-selected);
border-right-color:$list-item-border-selected; border-right-color:var(--red-ui-list-item-border-selected);
} }
} }
&.unselectable { &.unselectable {
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
i { i {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
width: 16px; width: 16px;
text-align: center; text-align: center;
} }
&.selected { &.selected {
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
border-left-color:$list-item-border-selected; border-left-color:var(--red-ui-list-item-border-selected);
border-right-color:$list-item-border-selected; border-right-color:var(--red-ui-list-item-border-selected);
} }
span { span {
display: inline-block; display: inline-block;
@ -696,7 +696,7 @@
margin: 0 10px 0 0px; margin: 0 10px 0 0px;
.fa-angle-right { .fa-angle-right {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
@ -747,7 +747,7 @@ div.red-ui-projects-dialog-ssh-public-key {
padding: 10px 5px; padding: 10px 5px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
} }
} }
} }
@ -756,7 +756,7 @@ div.red-ui-projects-dialog-ssh-public-key {
position: relative; position: relative;
.red-ui-editableList-container { .red-ui-editableList-container {
padding: 1px; padding: 1px;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
li:last-child { li:last-child {
border-bottom: none; border-bottom: none;
} }
@ -775,7 +775,7 @@ div.red-ui-projects-dialog-ssh-public-key {
text-align: center; text-align: center;
min-width: 30px; min-width: 30px;
vertical-align: top; vertical-align: top;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
.entry-name { .entry-name {
min-width: 250px; min-width: 250px;
@ -784,7 +784,7 @@ div.red-ui-projects-dialog-ssh-public-key {
font-weight: bold; font-weight: bold;
} }
.entry-detail { .entry-detail {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
font-size: 0.9em; font-size: 0.9em;
} }
@ -802,9 +802,9 @@ div.red-ui-projects-dialog-ssh-public-key {
position: relative; position: relative;
margin-top: 10px; margin-top: 10px;
margin-bottom: 20px; margin-bottom: 20px;
background: $secondary-background; background: var(--red-ui-secondary-background);
border-radius: 4px; border-radius: 4px;
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
.red-ui-projects-edit-form-sublabel { .red-ui-projects-edit-form-sublabel {
margin-top: -8px !important; margin-top: -8px !important;
margin-right: 50px; margin-right: 50px;
@ -819,7 +819,7 @@ div.red-ui-projects-dialog-ssh-public-key {
.red-ui-projects-dialog-list-dialog-header { .red-ui-projects-dialog-list-dialog-header {
font-weight: bold; font-weight: bold;
background: $primary-background; background: var(--red-ui-primary-background);
margin-top: 0 !important; margin-top: 0 !important;
padding: 5px 10px; padding: 5px 10px;
margin-bottom: 10px; margin-bottom: 10px;
@ -830,5 +830,5 @@ div.red-ui-projects-dialog-ssh-public-key {
padding: 8px 20px 20px; padding: 8px 20px 20px;
} }
.red-ui-settings-section-description { .red-ui-settings-section-description {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }

20
packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss vendored
View File

@ -15,8 +15,8 @@
**/ **/
.red-ui-editor-radial-menu { .red-ui-editor-radial-menu {
font-size: $primary-font-size; font-size: var(--red-ui-primary-font-size);
font-family: $primary-font; font-family: var(--red-ui-primary-font);
position: absolute; position: absolute;
top: 0; top: 0;
left:0; left:0;
@ -29,8 +29,8 @@
border-radius: 80px; border-radius: 80px;
width: 160px; width: 160px;
height: 160px; height: 160px;
background: $shadow; background: var(--red-ui-shadow);
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
} }
} }
@ -39,20 +39,20 @@
border-radius: 20px; border-radius: 20px;
width: 50px; width: 50px;
height: 50px; height: 50px;
background: $secondary-background; background: var(--red-ui-secondary-background);
border: 2px solid $primary-border-color; border: 2px solid var(--red-ui-primary-border-color);
text-align: center; text-align: center;
line-height:50px; line-height:50px;
&.selected { &.selected {
background: $workspace-button-background-hover; background: var(--red-ui-workspace-button-background-hover);
} }
} }
.red-ui-editor-radial-menu-opt-disabled { .red-ui-editor-radial-menu-opt-disabled {
border-color: $tertiary-border-color; border-color: var(--red-ui-tertiary-border-color);
color: $tertiary-border-color; color: var(--red-ui-tertiary-border-color);
} }
.red-ui-editor-radial-menu-opt-active { .red-ui-editor-radial-menu-opt-active {
background: $secondary-background-hover; background: var(--red-ui-secondary-background-hover);
} }

64
packages/node_modules/@node-red/editor-client/src/sass/search.scss vendored
View File

@ -22,9 +22,9 @@
left: 50%; left: 50%;
margin-left: -250px; margin-left: -250px;
top: 0px; top: 0px;
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
box-shadow: 0 0 10px $shadow; box-shadow: 0 0 10px var(--red-ui-shadow);
background: $secondary-background; background: var(--red-ui-secondary-background);
.red-ui-searchBox-container { .red-ui-searchBox-container {
display: inline-block; display: inline-block;
@ -47,7 +47,7 @@
.red-ui-search-container { .red-ui-search-container {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border: 1px dashed $primary-border-color; border: 1px dashed var(--red-ui-primary-border-color);
border-bottom: none; border-bottom: none;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -56,8 +56,8 @@
display: none; display: none;
height: 195px; height: 195px;
.red-ui-editableList-container { .red-ui-editableList-container {
border: 1px dashed $primary-border-color; border: 1px dashed var(--red-ui-primary-border-color);
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
} }
} }
.red-ui-search-result { .red-ui-search-result {
@ -73,7 +73,7 @@
} }
} }
.red-ui-search-result-separator { .red-ui-search-result-separator {
border-bottom: 3px solid $secondary-border-color; border-bottom: 3px solid var(--red-ui-secondary-border-color);
} }
.red-ui-search-result-node { .red-ui-search-result-node {
position: relative; position: relative;
@ -89,7 +89,7 @@
height: 7px; height: 7px;
top:4px; top:4px;
left:-4px; left:-4px;
background: $node-port-background; background: var(--red-ui-node-port-background);
box-sizing: border-box; box-sizing: border-box;
} }
.red-ui-search-result-node-output{ .red-ui-search-result-node-output{
@ -107,26 +107,26 @@
margin-left:8px; margin-left:8px;
} }
.red-ui-search-result-node-label { .red-ui-search-result-node-label {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
} }
.red-ui-search-container { .red-ui-search-container {
padding: 3px; padding: 3px;
background: $form-input-background; background: var(--red-ui-form-input-background);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
.red-ui-search-results-container { .red-ui-search-results-container {
position:relative; position:relative;
height: 300px; height: 300px;
padding: 5px; padding: 5px;
background: $primary-background; background: var(--red-ui-primary-background);
.red-ui-search-results-list { .red-ui-search-results-list {
} }
.red-ui-editableList-container { .red-ui-editableList-container {
padding: 0; padding: 0;
background: $primary-background; background: var(--red-ui-primary-background);
li { li {
padding: 0; padding: 0;
} }
@ -137,21 +137,21 @@
display: flex; display: flex;
align-items: start; align-items: start;
cursor: pointer; cursor: pointer;
color: $list-item-color; color: var(--red-ui-list-item-color);
background: $list-item-background; background: var(--red-ui-list-item-background);
border-left: 3px solid $list-item-background; border-left: 3px solid var(--red-ui-list-item-background);
border-right: 3px solid $list-item-background; border-right: 3px solid var(--red-ui-list-item-background);
li.selected & { li.selected & {
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
border-left-color: $list-item-border-selected; border-left-color: var(--red-ui-list-item-border-selected);
border-right-color: $list-item-border-selected; border-right-color: var(--red-ui-list-item-border-selected);
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $form-text-color; color: var(--red-ui-form-text-color);
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
border-left-color:$list-item-background-hover; border-left-color:var(--red-ui-list-item-background-hover);
border-right-color:$list-item-background-hover; border-right-color:var(--red-ui-list-item-background-hover);
} }
&:after { &:after {
content: ""; content: "";
@ -165,7 +165,7 @@
float:left; float:left;
height: 25px; height: 25px;
border-radius: 3px; border-radius: 3px;
border: 1px solid $node-border; border: 1px solid var(--red-ui-node-border);
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -182,28 +182,28 @@
flex-grow: 1; flex-grow: 1;
} }
.red-ui-search-result-node-label { .red-ui-search-result-node-label {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
} }
.red-ui-search-result-node-type { .red-ui-search-result-node-type {
font-style: italic; font-style: italic;
font-size: 0.9em; font-size: 0.9em;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
.red-ui-search-result-node-flow { .red-ui-search-result-node-flow {
float:right; float:right;
font-size: 0.8em; font-size: 0.8em;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
.red-ui-search-result-node-id { .red-ui-search-result-node-id {
display:none; display:none;
font-size: 0.8em; font-size: 0.8em;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
.red-ui-search-empty { .red-ui-search-empty {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
font-style: italic; font-style: italic;
color: $form-placeholder-color; color: var(--red-ui-form-placeholder-color);
} }
.red-ui-search-history { .red-ui-search-history {
button { button {
@ -229,12 +229,12 @@
} }
.red-ui-search-result-action { .red-ui-search-result-action {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
} }
.red-ui-search-result-action-key { .red-ui-search-result-action-key {
position: absolute; position: absolute;
top: 9px; top: 9px;
right: 0; right: 0;
margin-right: 10px; margin-right: 10px;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }

20
packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss vendored
View File

@ -20,7 +20,7 @@
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
width: 315px; width: 315px;
background: $primary-background; background: var(--red-ui-primary-background);
box-sizing: border-box; box-sizing: border-box;
z-index: 10; z-index: 10;
@include component-border; @include component-border;
@ -32,7 +32,7 @@
#red-ui-sidebar-content { #red-ui-sidebar-content {
position: absolute; position: absolute;
background: $secondary-background; background: var(--red-ui-secondary-background);
top: 35px; top: 35px;
right: 0; right: 0;
bottom: 25px; bottom: 25px;
@ -47,7 +47,7 @@
bottom:10px; bottom:10px;
width: 7px; width: 7px;
// z-index: 11; // z-index: 11;
background-color: $primary-background; background-color: var(--red-ui-primary-background);
cursor: col-resize; cursor: col-resize;
&:before { &:before {
@ -63,7 +63,7 @@
mask-position: 50% 50%; mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $grip-color; background-color: var(--red-ui-grip-color);
} }
} }
@ -82,11 +82,11 @@
.sidebar-header, /* Deprecated -> red-ui-sidebar-header */ .sidebar-header, /* Deprecated -> red-ui-sidebar-header */
.red-ui-sidebar-header { .red-ui-sidebar-header {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
text-align: right; text-align: right;
padding: 8px 10px; padding: 8px 10px;
background: $primary-background; background: var(--red-ui-primary-background);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
white-space: nowrap; white-space: nowrap;
} }
@ -138,9 +138,9 @@ button.red-ui-sidebar-header-button-toggle {
top: calc(50% - 26px); top: calc(50% - 26px);
padding:15px 8px; padding:15px 8px;
border:1px solid $primary-border-color; border:1px solid var(--red-ui-primary-border-color);
background:$primary-background; background:var(--red-ui-primary-background);
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }

18
packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss vendored Normal file
View File

@ -0,0 +1,18 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
@import "colors";
@import "variables";

32
packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss vendored
View File

@ -16,7 +16,7 @@
.red-ui-sidebar-node-config { .red-ui-sidebar-node-config {
position: relative; position: relative;
background: $secondary-background; background: var(--red-ui-secondary-background);
height: 100%; height: 100%;
overflow-y:auto; overflow-y:auto;
@include disable-selection; @include disable-selection;
@ -40,11 +40,11 @@ ul.red-ui-sidebar-node-config-list {
cursor: default; cursor: default;
&.selected { &.selected {
border-color: transparent; border-color: transparent;
box-shadow: 0 0 0 2px $node-selected-color; box-shadow: 0 0 0 2px var(--red-ui-node-selected-color);
} }
&.highlighted { &.highlighted {
border-color: transparent; border-color: transparent;
outline: dashed $node-selected-color 4px; outline: dashed var(--red-ui-node-selected-color) 4px;
} }
} }
.red-ui-palette-label { .red-ui-palette-label {
@ -58,7 +58,7 @@ ul.red-ui-sidebar-node-config-list {
.red-ui-palette-icon-container { .red-ui-palette-icon-container {
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
background-color: $node-port-background; background-color: var(--red-ui-node-icon-background-color);
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
a { a {
@ -67,11 +67,11 @@ ul.red-ui-sidebar-node-config-list {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
color: $node-port-label-color; color: var(--red-ui-node-port-label-color);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: $node-port-background-hover; background: var(--red-ui-node-port-background-hover);
} }
} }
} }
@ -79,12 +79,12 @@ ul.red-ui-sidebar-node-config-list {
.red-ui-palette-node-config { .red-ui-palette-node-config {
width: 160px; width: 160px;
height: 30px; height: 30px;
background: $node-config-background; background: var(--red-ui-node-config-background);
color: $primary-text-color; color: var(--red-ui-primary-text-color);
cursor: pointer; cursor: pointer;
} }
ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
text-align: right; text-align: right;
padding-right: 3px; padding-right: 3px;
&:not(:first-child) { &:not(:first-child) {
@ -92,21 +92,21 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
} }
} }
.red-ui-palette-node-config-none { .red-ui-palette-node-config-none {
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
text-align:right; text-align:right;
padding-right: 3px; padding-right: 3px;
} }
.red-ui-palette-node-config-unused,.red-ui-palette-node-config-disabled { .red-ui-palette-node-config-unused,.red-ui-palette-node-config-disabled {
border-color: $primary-border-color; border-color: var(--red-ui-primary-border-color);
background: $secondary-background-inactive; background: var(--red-ui-secondary-background-inactive);
border-style: dashed; border-style: dashed;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
.red-ui-palette-node-config-disabled { .red-ui-palette-node-config-disabled {
opacity: 0.6; opacity: 0.6;
font-style: italic; font-style: italic;
i { i {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
margin-right: 5px; margin-right: 5px;
} }
} }
@ -117,8 +117,8 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
padding: 0 8px; padding: 0 8px;
background: $palette-header-background; background: var(--red-ui-palette-header-background);
font-size: 0.8em; font-size: 0.8em;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-weight: normal; font-weight: normal;
} }

4
packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss vendored
View File

@ -63,12 +63,12 @@
.red-ui-sidebar-context-updated { .red-ui-sidebar-context-updated {
text-align: right; text-align: right;
font-size: 11px; font-size: 11px;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
padding: 1px 3px; padding: 1px 3px;
} }
.red-ui-sidebar-context-property-storename { .red-ui-sidebar-context-property-storename {
display: block; display: block;
font-size: 0.8em; font-size: 0.8em;
font-style: italic; font-style: italic;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }

2
packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss vendored
View File

@ -2,7 +2,7 @@
// height: calc(100% - 39px); // height: calc(100% - 39px);
} }
.red-ui-help-search { .red-ui-help-search {
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
.red-ui-sidebar-help-toc { .red-ui-sidebar-help-toc {

88
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@ -32,7 +32,7 @@
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
} }
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
table.red-ui-info-table { table.red-ui-info-table {
font-size: 14px; font-size: 14px;
@ -40,8 +40,8 @@ table.red-ui-info-table {
width: 100%; width: 100%;
} }
table.red-ui-info-table tr:not(.blank) { table.red-ui-info-table tr:not(.blank) {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
.red-ui-help-property-expand { .red-ui-help-property-expand {
font-size: 0.8em; font-size: 0.8em;
@ -57,7 +57,7 @@ table.red-ui-info-table tr.blank {
th { th {
text-align: left; text-align: left;
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
padding: 6px 3px 3px; padding: 6px 3px 3px;
} }
>* { >* {
@ -69,9 +69,9 @@ table.red-ui-info-table tr.blank {
a { a {
display: block; display: block;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
&:hover,&:focus { &:hover,&:focus {
color: $primary-text-color; color: var(--red-ui-primary-text-color);
text-decoration: none; text-decoration: none;
} }
&:not(.expanded) { &:not(.expanded) {
@ -103,36 +103,36 @@ table.red-ui-info-table tr.blank {
} }
.red-ui-help-info-none { .red-ui-help-info-none {
font-style: italic; font-style: italic;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
} }
table.red-ui-info-table tr:not(.blank) td:first-child{ table.red-ui-info-table tr:not(.blank) td:first-child{
color: $header-text-color; color: var(--red-ui-header-text-color);
vertical-align: top; vertical-align: top;
width: 90px; width: 90px;
padding: 3px 3px 3px 6px; padding: 3px 3px 3px 6px;
background:$tertiary-background; background:var(--red-ui-tertiary-background);
border-right: 1px solid $secondary-border-color; border-right: 1px solid var(--red-ui-secondary-border-color);
} }
table.red-ui-info-table tr:not(.blank) td:last-child{ table.red-ui-info-table tr:not(.blank) td:last-child{
padding: 3px 3px 3px 6px; padding: 3px 3px 3px 6px;
color: $primary-text-color; color: var(--red-ui-primary-text-color);
overflow-y: hidden; overflow-y: hidden;
} }
div.red-ui-info-table { div.red-ui-info-table {
margin: 5px; margin: 5px;
} }
.red-ui-help { .red-ui-help {
font-size: $primary-font-size; font-size: var(--red-ui-primary-font-size);
line-height: 1.5em; line-height: 1.5em;
a { a {
color: $text-color-link; color: var(--red-ui-text-color-link);
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
a:focus { a:focus {
color: $text-color-link; color: var(--red-ui-text-color-link);
text-decoration: underline; text-decoration: underline;
} }
@ -143,7 +143,7 @@ div.red-ui-info-table {
line-height: 1.3em; line-height: 1.3em;
margin: 8px auto; margin: 8px auto;
&.red-ui-help-title { &.red-ui-help-title {
border-bottom: 1px solid $tertiary-border-color; border-bottom: 1px solid var(--red-ui-tertiary-border-color);
} }
} }
h2 { h2 {
@ -168,24 +168,24 @@ div.red-ui-info-table {
& > span > p:first-child { & > span > p:first-child {
} }
dl.message-properties { dl.message-properties {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 2px; border-radius: 2px;
margin: 5px auto 10px; margin: 5px auto 10px;
&>dt { &>dt {
padding: 0px 3px 2px 3px; padding: 0px 3px 2px 3px;
font-family: $monospace-font; font-family: var(--red-ui-monospace-font);
font-weight: normal; font-weight: normal;
margin: 5px 3px 1px; margin: 5px 3px 1px;
color: $text-color-code; color: var(--red-ui-text-color-code);
white-space: nowrap; white-space: nowrap;
&.optional { &.optional {
font-style: italic; font-style: italic;
} }
.property-type { .property-type {
font-family: $primary-font; font-family: var(--red-ui-primary-font);
color: $primary-text-color; color: var(--red-ui-primary-text-color);
font-style: italic; font-style: italic;
font-size: 11px; font-size: 11px;
float: right; float: right;
@ -204,7 +204,7 @@ div.red-ui-info-table {
ol.node-ports { ol.node-ports {
margin: 0; margin: 0;
li { li {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 2px; border-radius: 2px;
list-style-position: inside; list-style-position: inside;
padding: 3px; padding: 3px;
@ -224,7 +224,7 @@ div.red-ui-info-table {
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
margin-right: 4px; margin-right: 4px;
} }
color: $header-text-color; color: var(--red-ui-header-text-color);
&:hover, &:focus { &:hover, &:focus {
text-decoration: none; text-decoration: none;
} }
@ -242,7 +242,7 @@ div.red-ui-info-table {
overflow : hidden; overflow : hidden;
} }
table thead tr { table thead tr {
background-color: var(--red-ui-primary-background); //$primary-text-color; background-color: var(--red-ui-primary-background); //var(--red-ui-primary-text-color);
border-bottom: 1px solid var(--red-ui-secondary-border-color); border-bottom: 1px solid var(--red-ui-secondary-border-color);
color: var(--red-ui-header-text-color); color: var(--red-ui-header-text-color);
text-align: left; text-align: left;
@ -252,7 +252,7 @@ div.red-ui-info-table {
padding: 6px 8px; padding: 6px 8px;
} }
table tbody tr:nth-of-type(even) { table tbody tr:nth-of-type(even) {
background-color: var(--red-ui-tertiary-background); //$primary-background; background-color: var(--red-ui-tertiary-background); //var(--red-ui-primary-background);
} }
} }
.red-ui-sidebar-info-stack { .red-ui-sidebar-info-stack {
@ -273,10 +273,10 @@ div.red-ui-info-table {
height: 0; height: 0;
transition: height 0.2s, padding 0.2s; transition: height 0.2s, padding 0.2s;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
background-color: $secondary-background; background-color: var(--red-ui-secondary-background);
padding: 0; padding: 0;
box-shadow: 0 5px 20px 0px $shadow; box-shadow: 0 5px 20px 0px var(--red-ui-shadow);
overflow-y: auto; overflow-y: auto;
} }
.red-ui-sidebar-info.show-tips { .red-ui-sidebar-info.show-tips {
@ -305,7 +305,7 @@ div.red-ui-info-table {
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
line-height: 1.9em; line-height: 1.9em;
color : $tertiary-text-color; color : var(--red-ui-tertiary-text-color);
@include disable-selection; @include disable-selection;
cursor: default; cursor: default;
} }
@ -314,14 +314,14 @@ div.red-ui-info-table {
top: 4px; top: 4px;
right: 6px; right: 6px;
a { a {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
border-color: $secondary-border-color !important; border-color: var(--red-ui-secondary-border-color) !important;
margin-left: 4px; margin-left: 4px;
} }
} }
.node-info-property-config-node { .node-info-property-config-node {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 4px; border-radius: 4px;
padding: 2px 4px 2px; padding: 2px 4px 2px;
} }
@ -346,7 +346,7 @@ div.red-ui-info-table {
} }
.red-ui-info-outline-project { .red-ui-info-outline-project {
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
} }
.red-ui-info-outline, .red-ui-info-outline,
@ -380,13 +380,13 @@ div.red-ui-info-table {
background: none; background: none;
} }
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
font-size: 18px; font-size: 18px;
} }
} }
&.red-ui-info-outline-item-empty { &.red-ui-info-outline-item-empty {
font-style: italic; font-style: italic;
color: $form-placeholder-color; color: var(--red-ui-form-placeholder-color);
} }
} }
@ -414,7 +414,7 @@ div.red-ui-info-table {
white-space: nowrap; white-space: nowrap;
} }
.red-ui-search-result-node-label { .red-ui-search-result-node-label {
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
} }
@ -439,16 +439,16 @@ div.red-ui-info-table {
right: 1px; right: 1px;
padding: 1px 2px 0 1px; padding: 1px 2px 0 1px;
text-align: right; text-align: right;
background: $list-item-background; background: var(--red-ui-list-item-background);
.red-ui-treeList-label:hover & { .red-ui-treeList-label:hover & {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
} }
.red-ui-treeList-label.focus & { .red-ui-treeList-label.focus & {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
} }
.red-ui-treeList-label.selected & { .red-ui-treeList-label.selected & {
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
} }
@ -510,7 +510,7 @@ div.red-ui-info-table {
} }
.red-ui-info-outline-item-label { .red-ui-info-outline-item-label {
font-style: italic; font-style: italic;
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
.red-ui-icons-flow { .red-ui-icons-flow {
opacity: 0.4; opacity: 0.4;
@ -538,7 +538,7 @@ div.red-ui-info-table {
-webkit-mask-size: contain; -webkit-mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
background-color: $icons-flow-color; background-color: var(--red-ui-icons-flow-color);
// filter: brightness(2.5); // filter: brightness(2.5);
} }
@ -549,8 +549,8 @@ div.red-ui-info-table {
text-align: left; text-align: left;
// padding-left: 9px; // padding-left: 9px;
// box-sizing: border-box; // box-sizing: border-box;
// background: $palette-header-background; // background: var(--red-ui-palette-header-background);
// border-bottom: 1px solid $secondary-border-color; // border-bottom: 1px solid var(--red-ui-secondary-border-color);
.red-ui-searchBox-container { .red-ui-searchBox-container {
position: absolute; position: absolute;
@ -558,7 +558,7 @@ div.red-ui-info-table {
right: 8px; right: 8px;
width: calc(100% - 130px); width: calc(100% - 130px);
max-width: 250px; max-width: 250px;
background: $palette-header-background; background: var(--red-ui-palette-header-background);
} }
} }

96
packages/node_modules/@node-red/editor-client/src/sass/tabs.scss vendored
View File

@ -16,7 +16,7 @@
.red-ui-tabs { .red-ui-tabs {
position: relative; position: relative;
background: $tab-background; background: var(--red-ui-tab-background);
overflow: hidden; overflow: hidden;
height: 35px; height: 35px;
box-sizing: border-box; box-sizing: border-box;
@ -39,18 +39,18 @@
display: block; display: block;
height: 35px; height: 35px;
box-sizing:border-box; box-sizing:border-box;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
white-space: nowrap; white-space: nowrap;
@include disable-selection; @include disable-selection;
li { li {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
border-left: 1px solid $primary-border-color; border-left: 1px solid var(--red-ui-primary-border-color);
border-top: 1px solid $primary-border-color; border-top: 1px solid var(--red-ui-primary-border-color);
border-right: 1px solid $primary-border-color; border-right: 1px solid var(--red-ui-primary-border-color);
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
background: $tab-background-inactive; background: var(--red-ui-tab-background-inactive);
margin: 3px 3px 0 3px; margin: 3px 3px 0 3px;
height: 32px; height: 32px;
line-height: 29px; line-height: 29px;
@ -73,7 +73,7 @@
padding-left: 12px; padding-left: 12px;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: $tab-text-color-inactive; color: var(--red-ui-tab-text-color-inactive);
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@ -83,27 +83,27 @@
} }
&:not(.active) a:hover+a.red-ui-tab-close { &:not(.active) a:hover+a.red-ui-tab-close {
background: $tab-background-hover; background: var(--red-ui-tab-background-hover);
} }
&.highlighted { &.highlighted {
box-shadow: 0px 0px 4px 2px $node-selected-color; box-shadow: 0px 0px 4px 2px var(--red-ui-node-selected-color);
border: dashed 1px $node-selected-color; border: dashed 1px var(--red-ui-node-selected-color);
} }
&.active { &.active {
background: $tab-background-active; background: var(--red-ui-tab-background-active);
font-weight: bold; font-weight: bold;
border-bottom: 1px solid $tab-background-active; border-bottom: 1px solid var(--red-ui-tab-background-active);
z-index: 2; z-index: 2;
a { a {
color: $tab-text-color-active; color: var(--red-ui-tab-text-color-active);
} }
a.red-ui-tab-close { a.red-ui-tab-close {
color: $workspace-button-color; color: var(--red-ui-workspace-button-color);
background: $tab-background-active; background: var(--red-ui-tab-background-active);
&:hover { &:hover {
background: $workspace-button-background-hover !important; background: var(--red-ui-workspace-button-background-hover) !important;
color: $workspace-button-color-hover; color: var(--red-ui-workspace-button-color-hover);
} }
} }
img.red-ui-tab-icon { img.red-ui-tab-icon {
@ -111,24 +111,24 @@
} }
.red-ui-tabs-fade { .red-ui-tabs-fade {
background-image: linear-gradient(to right, change-color($tab-background-active, $alpha: 0.001), $tab-background-active); background-image: linear-gradient(to right, var(--red-ui-tab-background-active-alpha), var(--red-ui-tab-background-active));
} }
} }
&.selected { &.selected {
&:not(.active) { &:not(.active) {
background: $tab-background-selected; background: var(--red-ui-tab-background-selected);
.red-ui-tabs-fade { .red-ui-tabs-fade {
background-image: linear-gradient(to right, change-color($tab-background-selected, $alpha: 0.001), $tab-background-selected); background-image: linear-gradient(to right, var(--red-ui-tab-background-selected-alpha), var(--red-ui-tab-background-selected));
} }
.red-ui-tabs-badge-selected { .red-ui-tabs-badge-selected {
background: $tab-background-selected; background: var(--red-ui-tab-background-selected);
} }
} }
font-weight: bold; font-weight: bold;
.red-ui-tabs-badge-selected { .red-ui-tabs-badge-selected {
display: inline; display: inline;
background: $tab-background; background: var(--red-ui-tab-background);
} }
.red-ui-tabs-badge-changed { .red-ui-tabs-badge-changed {
display: none; display: none;
@ -136,10 +136,10 @@
} }
&:not(.active) a:hover { &:not(.active) a:hover {
color: $workspace-button-color-hover; color: var(--red-ui-workspace-button-color-hover);
background: $tab-background-hover; background: var(--red-ui-tab-background-hover);
&+.red-ui-tabs-fade { &+.red-ui-tabs-fade {
background-image: linear-gradient(to right, change-color($tab-background-hover, $alpha: 0.001), $tab-background-hover); background-image: linear-gradient(to right, var(--red-ui-tab-background-hover-alpha), var(--red-ui-tab-background-hover));
} }
} }
} }
@ -182,9 +182,9 @@
&.red-ui-tabs-vertical { &.red-ui-tabs-vertical {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
border-right: 1px solid $primary-border-color; border-right: 1px solid var(--red-ui-primary-border-color);
margin: 0; margin: 0;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
overflow: visible; overflow: visible;
.red-ui-tabs-scroll-container { .red-ui-tabs-scroll-container {
@ -203,13 +203,13 @@
display: block; display: block;
margin: 0; margin: 0;
border: none; border: none;
border-right: 1px solid $primary-border-color; border-right: 1px solid var(--red-ui-primary-border-color);
height: auto; height: auto;
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
} }
&:last-child { &:last-child {
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
} }
a.red-ui-tab-label { a.red-ui-tab-label {
@ -217,7 +217,7 @@
} }
&.active { &.active {
border-right: 1px solid $tab-background-active; border-right: 1px solid var(--red-ui-tab-background-active);
} }
} }
} }
@ -238,8 +238,8 @@
top: 0; top: 0;
right: 0; right: 0;
height: 35px; height: 35px;
background: $tab-background; background: var(--red-ui-tab-background);
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
z-index: 2; z-index: 2;
a { a {
@ -261,8 +261,8 @@
top: 0; top: 0;
right: 0; right: 0;
height: 35px; height: 35px;
background: $tab-background; background: var(--red-ui-tab-background);
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
z-index: 2; z-index: 2;
a { a {
@include workspace-button-toggle; @include workspace-button-toggle;
@ -272,7 +272,7 @@
margin: 4px 3px 3px; margin: 4px 3px 3px;
z-index: 2; z-index: 2;
&.red-ui-tab-link-button-menu { &.red-ui-tab-link-button-menu {
border-color: $tab-background; border-color: var(--red-ui-tab-background);
} }
&:not(.single):not(.selected) { &:not(.single):not(.selected) {
margin-top: 4px; margin-top: 4px;
@ -286,27 +286,27 @@
height: 35px; height: 35px;
width: 21px; width: 21px;
display: block; display: block;
color: $workspace-button-color; color: var(--red-ui-workspace-button-color);
font-size: 22px; font-size: 22px;
text-align: center; text-align: center;
margin:0; margin:0;
border-left: none; border-left: none;
border-right: none; border-right: none;
border-top: none; border-top: none;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid var(--red-ui-primary-border-color);
line-height: 34px; line-height: 34px;
} }
} }
.red-ui-tab-scroll-left { .red-ui-tab-scroll-left {
left:0; left:0;
a { a {
border-right: 1px solid $primary-border-color; border-right: 1px solid var(--red-ui-primary-border-color);
} }
} }
.red-ui-tab-scroll-right { .red-ui-tab-scroll-right {
right: 0px; right: 0px;
a { a {
border-left: 1px solid $primary-border-color; border-left: 1px solid var(--red-ui-primary-border-color);
} }
} }
@ -341,7 +341,7 @@
top: 0; top: 0;
right: 0; right: 0;
width: 15px; width: 15px;
background-image: linear-gradient(to right, change-color($tab-background-inactive, $alpha: 0.001), $tab-background-inactive); background-image: linear-gradient(to right, var(--red-ui-tab-background-inactive-alpha), var(--red-ui-tab-background-inactive));
pointer-events: none; pointer-events: none;
} }
@ -365,7 +365,7 @@ i.red-ui-tab-icon {
mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $tab-icon-color; background-color: var(--red-ui-tab-icon-color);
} }
} }
.red-ui-tabs-badges { .red-ui-tabs-badges {
@ -379,7 +379,7 @@ i.red-ui-tab-icon {
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
padding:0px; padding:0px;
color: $tab-badge-color; color: var(--red-ui-tab-badge-color);
} }
.red-ui-tabs-badges i { .red-ui-tabs-badges i {
@ -415,7 +415,7 @@ i.red-ui-tab-icon {
} }
.red-ui-tab-close { .red-ui-tab-close {
display: none; display: none;
background: $tab-background-inactive; background: var(--red-ui-tab-background-inactive);
opacity: 0.8; opacity: 0.8;
position: absolute; position: absolute;
right: 0px; right: 0px;
@ -425,10 +425,10 @@ i.red-ui-tab-icon {
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
padding: 0px; padding: 0px;
color: $workspace-button-color; color: var(--red-ui-workspace-button-color);
&:hover { &:hover {
background: $workspace-button-background-hover !important; background: var(--red-ui-workspace-button-background-hover) !important;
color: $workspace-button-color-hover; color: var(--red-ui-workspace-button-color-hover);
opacity: 1; opacity: 1;
} }
} }

2
packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss vendored
View File

@ -97,7 +97,7 @@
color: var(--red-ui-primary-text-color) !important; color: var(--red-ui-primary-text-color) !important;
} }
&:not(.primary):not(.disabled):not(.ui-button-disabled):hover { &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
border-color: $popover-button-border-color-hover; border-color: var(--red-ui-popover-button-border-color-hover);
} }
} }

4
packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss vendored
View File

@ -16,7 +16,7 @@
.red-ui-checkboxSet { .red-ui-checkboxSet {
width: 15px; width: 15px;
display: inline-block; display: inline-block;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
cursor: pointer; cursor: pointer;
input { input {
display:none !important; display:none !important;
@ -24,6 +24,6 @@
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
} }

16
packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss vendored
View File

@ -14,10 +14,10 @@
* limitations under the License. * limitations under the License.
**/ **/
.red-ui-editableList-border { .red-ui-editableList-border {
border: 1px solid $form-input-border-color; border: 1px solid var(--red-ui-form-input-border-color);
border-radius: 4px; border-radius: 4px;
.red-ui-editableList-header { .red-ui-editableList-header {
border-bottom: 1px solid $form-input-border-color; border-bottom: 1px solid var(--red-ui-form-input-border-color);
padding: 2px 16px 2px 4px; padding: 2px 16px 2px 4px;
font-size: 0.9em; font-size: 0.9em;
} }
@ -32,22 +32,22 @@
margin: 0; margin: 0;
} }
.red-ui-editabelList-item-placeholder { .red-ui-editabelList-item-placeholder {
border: 2px dashed $secondary-border-color !important; border: 2px dashed var(--red-ui-secondary-border-color) !important;
} }
li { li {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background: $secondary-background; background: var(--red-ui-secondary-background);
margin:0; margin:0;
padding:8px 0px; padding:8px 0px;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
min-height: 20px; min-height: 20px;
.red-ui-editableList-item-handle { .red-ui-editableList-item-handle {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 2px; left: 2px;
margin-top: -7px; margin-top: -7px;
color: $tertiary-text-color; color: var(--red-ui-tertiary-text-color);
cursor: move; cursor: move;
} }
.red-ui-editableList-item-remove { .red-ui-editableList-item-remove {
@ -57,7 +57,7 @@
margin-top: -9px; margin-top: -9px;
} }
&.ui-sortable-helper { &.ui-sortable-helper {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
} }
//.red-ui-editableList-item-content { outline: 1px solid red} //.red-ui-editableList-item-content { outline: 1px solid red}
@ -68,7 +68,7 @@
margin-right: 28px; margin-right: 28px;
} }
&.red-ui-editableList-item-deleting { &.red-ui-editableList-item-deleting {
background: $secondary-background-inactive; background: var(--red-ui-secondary-background-inactive);
} }
} }

10
packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss vendored
View File

@ -21,9 +21,9 @@
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
border: none; border: none;
background: $secondary-background; background: var(--red-ui-secondary-background);
&:hover { &:hover {
background: $secondary-background-hover; background: var(--red-ui-secondary-background-hover);
} }
i.fa-angle-right { i.fa-angle-right {
@ -44,12 +44,12 @@
} }
} }
.red-ui-editableList-item-content.disabled { .red-ui-editableList-item-content.disabled {
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
&.red-ui-editableList-section-header { &.red-ui-editableList-section-header {
background: $primary-background; background: var(--red-ui-primary-background);
.red-ui-editableList-item-content.disabled { .red-ui-editableList-item-content.disabled {
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
} }

14
packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss vendored
View File

@ -21,7 +21,7 @@
position: absolute; position: absolute;
top: 9px; top: 9px;
font-size: 10px; font-size: 10px;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
i.fa-search { i.fa-search {
pointer-events: none; pointer-events: none;
@ -41,8 +41,8 @@
margin: 0; margin: 0;
} }
a.red-ui-searchBox-opts:hover { a.red-ui-searchBox-opts:hover {
color: $workspace-button-color-hover; color: var(--red-ui-workspace-button-color-hover);
background: $workspace-button-background-hover; background: var(--red-ui-workspace-button-background-hover);
} }
input.red-ui-searchBox-input { input.red-ui-searchBox-input {
border-radius: 0; border-radius: 0;
@ -76,8 +76,8 @@
position: absolute; position: absolute;
right: 18px; right: 18px;
top: 4px; top: 4px;
background: $primary-background; background: var(--red-ui-primary-background);
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
padding: 1px 8px; padding: 1px 8px;
font-size: 9px; font-size: 9px;
border-radius: 4px; border-radius: 4px;
@ -97,12 +97,12 @@
.red-ui-searchBox-compact { .red-ui-searchBox-compact {
input:focus.red-ui-searchBox-input { input:focus.red-ui-searchBox-input {
outline: 1px solid $form-input-focus-color; outline: 1px solid var(--red-ui-form-input-focus-color);
} }
input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input { input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input {
border: 1px solid $secondary-border-color; border: 1px solid var(--red-ui-secondary-border-color);
border-radius: 3px; border-radius: 3px;
font-size: 12px; font-size: 12px;
height: 26px; height: 26px;

4
packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss vendored
View File

@ -15,9 +15,9 @@
**/ **/
.red-ui-stack { .red-ui-stack {
background: $secondary-background; background: var(--red-ui-secondary-background);
.red-ui-palette-category { .red-ui-palette-category {
background: $secondary-background; background: var(--red-ui-secondary-background);
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;

30
packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss vendored
View File

@ -24,9 +24,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
border: 1px solid $form-input-border-color; border: 1px solid var(--red-ui-form-input-border-color);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
@ -71,7 +71,7 @@
padding: 6px 0; padding: 6px 0;
display: flex; display: flex;
align-items: center; align-items: center;
color: $list-item-color; color: var(--red-ui-list-item-color);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
@ -79,26 +79,26 @@
position: relative; position: relative;
&:hover, &:hover .red-ui-treeList-sublabel-text { &:hover, &:hover .red-ui-treeList-sublabel-text {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
color: $list-item-color; color: var(--red-ui-list-item-color);
text-decoration: none; text-decoration: none;
} }
&:focus, &:focus .red-ui-treeList-sublabel-text { &:focus, &:focus .red-ui-treeList-sublabel-text {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
outline: none; outline: none;
color: $list-item-color; color: var(--red-ui-list-item-color);
text-decoration: none; text-decoration: none;
} }
&.focus, &.focus .red-ui-treeList-sublabel-text { &.focus, &.focus .red-ui-treeList-sublabel-text {
background: $list-item-background-hover; background: var(--red-ui-list-item-background-hover);
outline: 1px solid $form-input-focus-color !important; outline: 1px solid var(--red-ui-form-input-focus-color) !important;
outline-offset: -1px; outline-offset: -1px;
color: $list-item-color; color: var(--red-ui-list-item-color);
} }
&.selected, &.selected .red-ui-treeList-sublabel-text { &.selected, &.selected .red-ui-treeList-sublabel-text {
background: $list-item-background-selected; background: var(--red-ui-list-item-background-selected);
outline: none; outline: none;
color: $list-item-color; color: var(--red-ui-list-item-color);
} }
input.red-ui-treeList-checkbox, input.red-ui-treeList-checkbox,
@ -121,9 +121,9 @@
padding: 0 10px 0 5px; padding: 0 10px 0 5px;
line-height: 32px; line-height: 32px;
font-size: 0.9em; font-size: 0.9em;
color: $list-item-secondary-color; color: var(--red-ui-list-item-secondary-color);
position: absolute; position: absolute;
background: $list-item-background; background: var(--red-ui-list-item-background);
} }
@ -143,5 +143,5 @@
mask-position: 50% 50%; mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $spinner-color; background-color: var(--red-ui-spinner-color);
} }

50
packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss vendored
View File

@ -15,7 +15,7 @@
**/ **/
.red-ui-typedInput-container { .red-ui-typedInput-container {
border: 1px solid $form-input-border-color; border: 1px solid var(--red-ui-form-input-border-color);
border-radius: 5px; border-radius: 5px;
height: 34px; height: 34px;
line-height: 14px; line-height: 14px;
@ -28,7 +28,7 @@
position: relative; position: relative;
&[disabled] { &[disabled] {
input, button { input, button {
background: $secondary-background-inactive; background: var(--red-ui-secondary-background-inactive);
pointer-events: none; pointer-events: none;
cursor: not-allowed; cursor: not-allowed;
} }
@ -50,7 +50,7 @@
} }
&.red-ui-typedInput-focus:not(.input-error) { &.red-ui-typedInput-focus:not(.input-error) {
border-color: $form-input-focus-color !important; border-color: var(--red-ui-form-input-focus-color) !important;
} }
.red-ui-typedInput-value-label { .red-ui-typedInput-value-label {
flex-grow: 1; flex-grow: 1;
@ -61,42 +61,42 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.red-ui-typedInput-value-label-inactive { .red-ui-typedInput-value-label-inactive {
background: $secondary-background-disabled; background: var(--red-ui-secondary-background-disabled);
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
} }
} }
.red-ui-typedInput-options { .red-ui-typedInput-options {
@include component-shadow; @include component-shadow;
font-family: $primary-font; font-family: var(--red-ui-primary-font);
font-size: $primary-font-size; font-size: var(--red-ui-primary-font-size);
position: absolute; position: absolute;
max-height: 350px; max-height: 350px;
overflow-y: auto; overflow-y: auto;
border: 1px solid $primary-border-color; border: 1px solid var(--red-ui-primary-border-color);
box-sizing: border-box; box-sizing: border-box;
background: $secondary-background; background: var(--red-ui-secondary-background);
white-space: nowrap; white-space: nowrap;
z-index: 2000; z-index: 2000;
a { a {
padding: 6px 18px 6px 6px; padding: 6px 18px 6px 6px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
color: $form-text-color; color: var(--red-ui-form-text-color);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: $workspace-button-background-hover; background: var(--red-ui-workspace-button-background-hover);
} }
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background: $workspace-button-background-active; background: var(--red-ui-workspace-button-background-active);
outline: none; outline: none;
} }
&:active { &:active {
text-decoration: none; text-decoration: none;
background: $workspace-button-background-active; background: var(--red-ui-workspace-button-background-active);
} }
input[type="checkbox"] { input[type="checkbox"] {
margin: 0 6px 0 0; margin: 0 6px 0 0;
@ -111,7 +111,7 @@
mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-text-color; background-color: var(--red-ui-primary-text-color);
height: 14px; height: 14px;
width: 12px; width: 12px;
} }
@ -128,11 +128,11 @@ button.red-ui-typedInput-option-trigger
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
padding: 0 1px 0 5px; padding: 0 1px 0 5px;
background: $form-button-background; background: var(--red-ui-form-button-background);
height: 32px; height: 32px;
line-height: 30px; line-height: 30px;
vertical-align: middle; vertical-align: middle;
color: $form-text-color; color: var(--red-ui-form-text-color);
white-space: nowrap; white-space: nowrap;
i.red-ui-typedInput-icon { i.red-ui-typedInput-icon {
margin-left: 1px; margin-left: 1px;
@ -142,7 +142,7 @@ button.red-ui-typedInput-option-trigger
&.disabled { &.disabled {
cursor: default; cursor: default;
> i.red-ui-typedInput-icon { > i.red-ui-typedInput-icon {
color: $secondary-text-color-disabled; color: var(--red-ui-secondary-text-color-disabled);
} }
} }
.red-ui-typedInput-type-label,.red-ui-typedInput-option-label { .red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
@ -161,21 +161,21 @@ button.red-ui-typedInput-option-trigger
mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-text-color; background-color: var(--red-ui-primary-text-color);
} }
} }
&:not(.disabled):hover { &:not(.disabled):hover {
text-decoration: none; text-decoration: none;
background: $workspace-button-background-hover; background: var(--red-ui-workspace-button-background-hover);
} }
&:focus { &:focus {
text-decoration: none; text-decoration: none;
outline: none; outline: none;
box-shadow: inset 0 0 0 1px $form-input-focus-color; box-shadow: inset 0 0 0 1px var(--red-ui-form-input-focus-color);
} }
&:not(.disabled):active { &:not(.disabled):active {
background: $workspace-button-background-active; background: var(--red-ui-workspace-button-background-active);
text-decoration: none; text-decoration: none;
} }
&.red-ui-typedInput-full-width { &.red-ui-typedInput-full-width {
@ -208,8 +208,8 @@ button.red-ui-typedInput-option-trigger {
line-height: 32px; line-height: 32px;
display: inline-flex; display: inline-flex;
.red-ui-typedInput-option-label { .red-ui-typedInput-option-label {
background:$form-button-background; background:var(--red-ui-form-button-background);
color: $form-text-color; color: var(--red-ui-form-text-color);
flex-grow: 1; flex-grow: 1;
padding: 0 0 0 8px; padding: 0 0 0 8px;
display:inline-block; display:inline-block;
@ -231,6 +231,6 @@ button.red-ui-typedInput-option-trigger {
box-shadow: none; box-shadow: none;
} }
&:focus .red-ui-typedInput-option-caret { &:focus .red-ui-typedInput-option-caret {
box-shadow: inset 0 0 0 1px $form-input-focus-color; box-shadow: inset 0 0 0 1px var(--red-ui-form-input-focus-color);
} }
} }

4
packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss vendored
View File

@ -20,7 +20,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 120px; width: 120px;
background: $tertiary-background; background: var(--red-ui-tertiary-background);
} }
.red-ui-settings-tabs-content { .red-ui-settings-tabs-content {
position: absolute; position: absolute;
@ -30,7 +30,7 @@
bottom: 0; bottom: 0;
padding: 0; padding: 0;
h3:not(:first-child) { h3:not(:first-child) {
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
margin-top: 15px; margin-top: 15px;
margin-bottom: 10px; margin-bottom: 10px;
padding-top: 20px; padding-top: 20px;

221
packages/node_modules/@node-red/editor-client/src/sass/variables.scss vendored
View File

@ -1,4 +1,5 @@
:root { :root {
--red-ui-primary-font: #{$primary-font}; --red-ui-primary-font: #{$primary-font};
--red-ui-primary-font-size: #{$primary-font-size}; --red-ui-primary-font-size: #{$primary-font-size};
--red-ui-monospace-font: #{$monospace-font}; --red-ui-monospace-font: #{$monospace-font};
@ -40,7 +41,6 @@
--red-ui-text-color-link: #{$text-color-link}; --red-ui-text-color-link: #{$text-color-link};
--red-ui-primary-border-color: #{$primary-border-color}; --red-ui-primary-border-color: #{$primary-border-color};
--red-ui-secondary-border-color: #{$secondary-border-color}; --red-ui-secondary-border-color: #{$secondary-border-color};
--red-ui-tertiary-border-color: #{$tertiary-border-color}; --red-ui-tertiary-border-color: #{$tertiary-border-color};
@ -50,20 +50,38 @@
--red-ui-border-color-success: #{$border-color-success}; --red-ui-border-color-success: #{$border-color-success};
--red-ui-form-background: #{$form-background}; --red-ui-form-background: #{$form-background};
--red-ui-form-placeholder-color: #{$form-placeholder-color}; --red-ui-form-placeholder-color: #{$form-placeholder-color};
--red-ui-form-text-color: #{$form-text-color}; --red-ui-form-text-color: #{$form-text-color};
--red-ui-form-text-color-disabled: #{$form-text-color-disabled}; --red-ui-form-text-color-disabled: #{$form-text-color-disabled};
--red-ui-form-input-focus-color: #{$form-input-focus-color};
--red-ui-form-input-border-color: #{$form-input-border-color}; --red-ui-form-input-border-color: #{$form-input-border-color};
--red-ui-form-input-border-color-focus: #{$form-input-focus-color}; --red-ui-form-input-border-selected-color: #{$form-input-border-selected-color};
--red-ui-form-input-border-color-selected: #{$form-input-border-selected-color}; --red-ui-form-input-border-error-color: #{$form-input-border-error-color};
--red-ui-form-input-border-color-error: #{$form-input-border-error-color};
--red-ui-form-input-background: #{$form-input-background}; --red-ui-form-input-background: #{$form-input-background};
--red-ui-form-input-background-disabled: #{$form-input-background-disabled}; --red-ui-form-input-background-disabled: #{$form-input-background-disabled};
--red-ui-form-button-background: #{$form-button-background}; --red-ui-form-button-background: #{$form-button-background};
--red-ui-form-tips-background: #{$form-tips-background}; --red-ui-form-tips-background: #{$form-tips-background};
--red-ui-text-editor-color: #{$text-editor-color};
--red-ui-text-editor-background: #{$text-editor-background};
--red-ui-text-editor-color-disabled: #{$text-editor-color-disabled};
--red-ui-text-editor-background-disabled: #{$text-editor-background-disabled};
--red-ui-text-editor-gutter-background: #{$text-editor-gutter-background};
--red-ui-text-editor-gutter-color: #{$text-editor-gutter-color};
--red-ui-text-editor-gutter-active-line-background: #{$text-editor-gutter-active-line-background};
--red-ui-text-editor-active-line-background: #{$text-editor-active-line-background};
--red-ui-text-editor-selection-background: #{$text-editor-selection-background};
--red-ui-event-log-background: #{$event-log-background};
--red-ui-event-log-color: #{$event-log-color};
--red-ui-event-log-active-line-background: #{$event-log-active-line-background};
--red-ui-event-log-selection-background: #{$event-log-selection-background};
--red-ui-list-item-color: #{$list-item-color}; --red-ui-list-item-color: #{$list-item-color};
--red-ui-list-item-secondary-color: #{$list-item-secondary-color}; --red-ui-list-item-secondary-color: #{$list-item-secondary-color};
--red-ui-list-item-background: #{$list-item-background}; --red-ui-list-item-background: #{$list-item-background};
@ -72,8 +90,120 @@
--red-ui-list-item-background-selected: #{$list-item-background-selected}; --red-ui-list-item-background-selected: #{$list-item-background-selected};
--red-ui-list-item-border-selected: #{$list-item-border-selected}; --red-ui-list-item-border-selected: #{$list-item-border-selected};
--red-ui-tab-text-color-active: #{$tab-text-color-active};
--red-ui-tab-text-color-inactive: #{$tab-text-color-inactive};
--red-ui-tab-text-color-disabled-active: #{$tab-text-color-disabled-active};
--red-ui-tab-text-color-disabled-inactive: #{$tab-text-color-disabled-inactive};
--red-ui-tab-badge-color: #{$tab-badge-color};
--red-ui-tab-background: #{$tab-background};
--red-ui-tab-background-active: #{$tab-background-active};
--red-ui-tab-background-active-alpha: #{$tab-background-active-alpha};
--red-ui-tab-background-selected: #{$tab-background-selected};
--red-ui-tab-background-selected-alpha: #{$tab-background-selected-alpha};
--red-ui-tab-background-inactive: #{$tab-background-inactive};
--red-ui-tab-background-inactive-alpha: #{$tab-background-inactive-alpha};
--red-ui-tab-background-hover: #{$tab-background-hover};
--red-ui-tab-background-hover-alpha: #{$tab-background-hover-alpha};
--red-ui-palette-header-background: #{$palette-header-background};
--red-ui-palette-header-color: #{$palette-header-color};
--red-ui-palette-content-background: #{$palette-content-background};
--red-ui-workspace-button-background: #{$workspace-button-background};
--red-ui-workspace-button-background-hover: #{$workspace-button-background-hover};
--red-ui-workspace-button-background-active: #{$workspace-button-background-active};
--red-ui-workspace-button-color: #{$workspace-button-color};
--red-ui-workspace-button-color-disabled: #{$workspace-button-color-disabled};
--red-ui-workspace-button-color-focus: #{$workspace-button-color-focus};
--red-ui-workspace-button-color-hover: #{$workspace-button-color-hover};
--red-ui-workspace-button-color-active: #{$workspace-button-color-active};
--red-ui-workspace-button-color-selected: #{$workspace-button-color-selected};
--red-ui-workspace-button-color-primary: #{$workspace-button-color-primary};
--red-ui-workspace-button-background-primary: #{$workspace-button-background-primary};
--red-ui-workspace-button-background-primary-hover: #{$workspace-button-background-primary-hover};
--red-ui-workspace-button-color-focus-outline: #{$workspace-button-color-focus-outline};
--red-ui-shade-color: #{$shade-color}; --red-ui-shade-color: #{$shade-color};
--red-ui-popover-background: #{$popover-background};
--red-ui-popover-border: #{$popover-border};
--red-ui-popover-color: #{$popover-color};
--red-ui-popover-button-border-color: #{$popover-button-border-color};
--red-ui-popover-button-border-color-hover: #{$popover-button-border-color-hover};
--red-ui-diff-text-header-color: #{$diff-text-header-color};
--red-ui-diff-text-header-background: #{$diff-text-header-background};
--red-ui-diff-state-color: #{$diff-state-color};
--red-ui-diff-state-prefix-color: #{$diff-state-prefix-color};
--red-ui-diff-state-added: #{$diff-state-added};
--red-ui-diff-state-deleted: #{$diff-state-deleted};
--red-ui-diff-state-changed: #{$diff-state-changed};
--red-ui-diff-state-changed-background: #{$diff-state-changed-background};
--red-ui-diff-state-unchanged: #{$diff-state-unchanged};
--red-ui-diff-state-unchanged-background: #{$diff-state-unchanged-background};
--red-ui-diff-state-conflicted: #{$diff-state-conflicted};
--red-ui-diff-state-moved: #{$diff-state-moved};
--red-ui-diff-state-conflict: #{$diff-state-conflict};
--red-ui-diff-state-conflict-background: #{$diff-state-conflict-background};
--red-ui-diff-state-added-background: #{$diff-state-added-background};
--red-ui-diff-state-added-border: #{$diff-state-added-border};
--red-ui-diff-state-added-header-background: #{$diff-state-added-header-background};
--red-ui-diff-state-added-header-border: #{$diff-state-added-header-border};
--red-ui-diff-state-deleted-background: #{$diff-state-deleted-background};
--red-ui-diff-state-deleted-border: #{$diff-state-deleted-border};
--red-ui-diff-state-deleted-header-background: #{$diff-state-deleted-header-background};
--red-ui-diff-state-deleted-header-border: #{$diff-state-deleted-header-border};
--red-ui-diff-merge-header-color: #{$diff-merge-header-color};
--red-ui-diff-merge-header-background: #{$diff-merge-header-background};
--red-ui-diff-merge-header-border-color: #{$diff-merge-header-border-color};
--red-ui-menuBackground: #{$menuBackground};
--red-ui-menuDivider: #{$menuDivider};
--red-ui-menuColor: #{$menuColor};
--red-ui-menuActiveColor: #{$menuActiveColor};
--red-ui-menuActiveBackground: #{$menuActiveBackground};
--red-ui-menuDisabledColor: #{$menuDisabledColor};
--red-ui-menuHoverColor: #{$menuHoverColor};
--red-ui-menuHoverBackground: #{$menuHoverBackground};
--red-ui-menuCaret: #{$menuCaret};
--red-ui-view-navigator-background: #{$view-navigator-background};
--red-ui-view-lasso-stroke: #{$view-lasso-stroke};
--red-ui-view-lasso-fill: #{$view-lasso-fill};
--red-ui-view-background: #{$view-background};
--red-ui-view-grid-color: #{$view-grid-color};
--red-ui-node-label-color: #{$node-label-color};
--red-ui-node-port-label-color: #{$node-port-label-color};
--red-ui-node-border: #{$node-border};
--red-ui-node-border-unknown: #{$node-border-unknown};
--red-ui-node-border-placeholder: #{$node-border-placeholder};
--red-ui-node-background-placeholder: #{$node-background-placeholder};
--red-ui-node-port-background: #{$node-port-background};
--red-ui-node-port-background-hover: #{$node-port-background-hover};
--red-ui-node-icon-color: #{$node-icon-color};
--red-ui-node-icon-background-color: #{$node-icon-background-color};
--red-ui-node-icon-background-color-fill: #{$node-icon-background-color-fill};
--red-ui-node-icon-background-color-opacity: #{$node-icon-background-color-opacity};
--red-ui-node-icon-border-color: #{$node-icon-border-color};
--red-ui-node-icon-border-color-opacity: #{$node-icon-border-color-opacity};
--red-ui-node-config-background: #{$node-config-background};
--red-ui-node-link-port-background: #{$node-link-port-background}; --red-ui-node-link-port-background: #{$node-link-port-background};
--red-ui-node-status-error-border: #{$node-status-error-border}; --red-ui-node-status-error-border: #{$node-status-error-border};
@ -81,18 +211,87 @@
--red-ui-node-status-changed-border: #{$node-status-changed-border}; --red-ui-node-status-changed-border: #{$node-status-changed-border};
--red-ui-node-status-changed-background: #{$node-status-changed-background}; --red-ui-node-status-changed-background: #{$node-status-changed-background};
--red-ui-node-border: #{$node-border}; @each $current-color in red green yellow blue grey gray {
--red-ui-node-port-background:#{$node-port-background}; --red-ui-node-status-colors-#{"" + $current-color}: #{map-get($node-status-colors, $current-color)};
}
--red-ui-node-label-color: #{$node-label-color};
--red-ui-node-selected-color: #{$node-selected-color}; --red-ui-node-selected-color: #{$node-selected-color};
--red-ui-port-selected-color: #{$port-selected-color}; --red-ui-port-selected-color: #{$port-selected-color};
--red-ui-popover-background: #{$popover-background}; --red-ui-link-color: #{$link-color};
--red-ui-popover-border: #{$popover-border}; --red-ui-link-link-color: #{$link-link-color};
--red-ui-popover-color: #{$popover-color}; --red-ui-link-disabled-color: #{$link-disabled-color};
--red-ui-link-link-active-color: #{$link-link-active-color};
--red-ui-link-unknown-color: #{$link-unknown-color};
--red-ui-clipboard-textarea-background: #{$clipboard-textarea-background};
--red-ui-deploy-button-color: #{$deploy-button-color};
--red-ui-deploy-button-color-active: #{$deploy-button-color-active};
--red-ui-deploy-button-color-disabled: #{$deploy-button-color-disabled};
--red-ui-deploy-button-background: #{$deploy-button-background};
--red-ui-deploy-button-background-hover: #{$deploy-button-background-hover};
--red-ui-deploy-button-background-active: #{$deploy-button-background-active};
--red-ui-deploy-button-background-disabled: #{$deploy-button-background-disabled};
--red-ui-deploy-button-background-disabled-hover: #{$deploy-button-background-disabled-hover};
--red-ui-header-background: #{$header-background};
--red-ui-header-button-background-active: #{$header-button-background-active};
--red-ui-header-menu-color: #{$header-menu-color};
--red-ui-header-menu-color-disabled: #{$header-menu-color-disabled};
--red-ui-header-menu-heading-color: #{$header-menu-heading-color};
--red-ui-header-menu-sublabel-color: #{$header-menu-sublabel-color};
--red-ui-header-menu-background: #{$header-menu-background};
--red-ui-header-menu-item-hover: #{$header-menu-item-hover};
--red-ui-header-menu-item-border-active: #{$header-menu-item-border-active};
--red-ui-headerMenuItemDivider: #{$headerMenuItemDivider};
--red-ui-headerMenuCaret: #{$headerMenuCaret};
--red-ui-vcCommitShaColor: #{$vcCommitShaColor};
--red-ui-dnd-background: #{$dnd-background};
--red-ui-dnd-color: #{$dnd-color};
--red-ui-notification-border-default: #{$notification-border-default};
--red-ui-notification-border-success: #{$notification-border-success};
--red-ui-notification-border-warning: #{$notification-border-warning};
--red-ui-notification-border-error: #{$notification-border-error};
--red-ui-debug-message-background: #{$debug-message-background};
--red-ui-debug-message-background-hover: #{$debug-message-background-hover};
--red-ui-debug-message-text-color: #{$debug-message-text-color};
--red-ui-debug-message-text-color-meta: #{$debug-message-text-color-meta};
--red-ui-debug-message-text-color-object-key: #{$debug-message-text-color-object-key};
--red-ui-debug-message-text-color-msg-type-other: #{$debug-message-text-color-msg-type-other};
--red-ui-debug-message-text-color-msg-type-string: #{$debug-message-text-color-msg-type-string};
--red-ui-debug-message-text-color-msg-type-null: #{$debug-message-text-color-msg-type-null};
--red-ui-debug-message-text-color-msg-type-meta: #{$debug-message-text-color-msg-type-meta};
--red-ui-debug-message-text-color-msg-type-number: #{$debug-message-text-color-msg-type-number};
--red-ui-debug-message-border: #{$debug-message-border};
--red-ui-debug-message-border-hover: #{$debug-message-border-hover};
--red-ui-debug-message-border-warning: #{$debug-message-border-warning};
--red-ui-debug-message-border-error: #{$debug-message-border-error};
--red-ui-group-default-fill: #{$group-default-fill};
--red-ui-group-default-fill-opacity: #{$group-default-fill-opacity};
--red-ui-group-default-stroke: #{$group-default-stroke};
--red-ui-group-default-stroke-opacity: #{$group-default-stroke-opacity};
--red-ui-group-default-label-color: #{$group-default-label-color};
--red-ui-tourGuide-border: #{$tourGuide-border}; --red-ui-tourGuide-border: #{$tourGuide-border};
--red-ui-tourGuide-heading-color: #{$tourGuide-heading-color}; --red-ui-tourGuide-heading-color: #{$tourGuide-heading-color};
--red-ui-grip-color: #{$grip-color};
--red-ui-icons-flow-color: #{$icons-flow-color};
--red-ui-spinner-color: #{$spinner-color};
--red-ui-tab-icon-color: #{$tab-icon-color};
} }

28
packages/node_modules/@node-red/editor-client/src/sass/workspace.scss vendored
View File

@ -47,12 +47,12 @@
} }
.red-ui-workspace-chart-background { .red-ui-workspace-chart-background {
fill: $view-background; fill: var(--red-ui-view-background);
} }
.red-ui-workspace-chart-grid line { .red-ui-workspace-chart-grid line {
fill: none; fill: none;
shape-rendering: crispEdges; shape-rendering: crispEdges;
stroke: $view-grid-color; stroke: var(--red-ui-view-grid-color);
stroke-width: 1px; stroke-width: 1px;
} }
.red-ui-workspace-select-mode { .red-ui-workspace-select-mode {
@ -94,11 +94,11 @@
a { a {
font-style: italic; font-style: italic;
color: $tab-text-color-disabled-inactive !important; color: var(--red-ui-tab-text-color-disabled-inactive) !important;
} }
&.active a { &.active a {
font-weight: normal; font-weight: normal;
color: $tab-text-color-disabled-active !important; color: var(--red-ui-tab-text-color-disabled-active) !important;
} }
.red-ui-workspace-disabled-icon { .red-ui-workspace-disabled-icon {
display: inline; display: inline;
@ -112,17 +112,17 @@
bottom: 0; bottom: 0;
right:0; right:0;
z-index: 101; z-index: 101;
border-left: 1px solid $primary-border-color; border-left: 1px solid var(--red-ui-primary-border-color);
border-top: 1px solid $primary-border-color; border-top: 1px solid var(--red-ui-primary-border-color);
background: $view-navigator-background; background: var(--red-ui-view-navigator-background);
box-shadow: -1px 0 3px $shadow; box-shadow: -1px 0 3px var(--red-ui-shadow);
} }
.red-ui-navigator-border { .red-ui-navigator-border {
stroke-dasharray: 5,5; stroke-dasharray: 5,5;
pointer-events: none; pointer-events: none;
stroke: $secondary-border-color; stroke: var(--red-ui-secondary-border-color);
stroke-width: 1; stroke-width: 1;
fill: $view-background; fill: var(--red-ui-view-background);
} }
.red-ui-component-footer { .red-ui-component-footer {
@ -182,7 +182,7 @@ button.red-ui-footer-button-toggle {
#red-ui-loading-progress { #red-ui-loading-progress {
position: absolute; position: absolute;
background: $primary-background; background: var(--red-ui-primary-background);
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -196,7 +196,7 @@ button.red-ui-footer-button-toggle {
width: 300px; width: 300px;
height:80px; height:80px;
text-align: center; text-align: center;
color: $secondary-text-color; color: var(--red-ui-secondary-text-color);
} }
} }
@ -204,13 +204,13 @@ button.red-ui-footer-button-toggle {
box-sizing: border-box; box-sizing: border-box;
width: 300px; width: 300px;
height: 30px; height: 30px;
border: 2px solid $primary-border-color; border: 2px solid var(--red-ui-primary-border-color);
border-radius: 4px; border-radius: 4px;
> span { > span {
display: block; display: block;
height: 100%; height: 100%;
background: $secondary-border-color; background: var(--red-ui-secondary-border-color);
transition: width 0.2s; transition: width 0.2s;
width: 10%; width: 10%;
} }

16
packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss vendored
View File

@ -17,7 +17,7 @@
#red-ui-workspace-toolbar { #red-ui-workspace-toolbar {
display: none; display: none;
color: $workspace-button-color; color: var(--red-ui-workspace-button-color);
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
position: absolute; position: absolute;
@ -27,8 +27,8 @@
padding: 7px; padding: 7px;
height: 40px; height: 40px;
box-sizing: border-box; box-sizing: border-box;
background: $secondary-background; background: var(--red-ui-secondary-background);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
white-space: nowrap; white-space: nowrap;
transition: right 0.2s ease; transition: right 0.2s ease;
overflow: hidden; overflow: hidden;
@ -61,23 +61,23 @@
} }
} }
.button.active { .button.active {
background: $workspace-button-background-active; background: var(--red-ui-workspace-button-background-active);
cursor: default; cursor: default;
} }
} }
.spinner-value { .spinner-value {
width: 25px; width: 25px;
color: $workspace-button-color; color: var(--red-ui-workspace-button-color);
padding: 0 5px; padding: 0 5px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
border-top: 1px solid $secondary-border-color; border-top: 1px solid var(--red-ui-secondary-border-color);
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid var(--red-ui-secondary-border-color);
margin: 0; margin: 0;
height: 24px; height: 24px;
font-size: 12px; font-size: 12px;
background: $form-input-background; background: var(--red-ui-form-input-background);
line-height: 22px; line-height: 22px;
box-sizing: border-box; box-sizing: border-box;
} }

2
scripts/build-custom-theme.js
View File

@ -83,7 +83,7 @@ while((match = ruleRegex.exec(colorsFile)) !== null) {
const result = sass.renderSync({ const result = sass.renderSync({
outputStyle: "expanded", outputStyle: "expanded",
file: path.join(workingDir,"style.scss"), file: path.join(workingDir,"style-custom-theme.scss"),
}); });
const css = result.css.toString() const css = result.css.toString()