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

Move all colours to sass variables

Browse Source
This commit is contained in:
Nick O'Leary 2019-05-15 13:54:29 +01:00
parent 4418f8bfce
commit 031362a633
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
51 changed files with 1303 additions and 1311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/node_modules/@node-red/editor-client/src/js/nodes.js vendored
View File

@ -368,7 +368,7 @@ RED.nodes = (function() {
outputs: sf.out.length, outputs: sf.out.length,
color: "#da9", color: "#da9",
label: function() { return this.name||RED.nodes.subflow(sf.id).name }, label: function() { return this.name||RED.nodes.subflow(sf.id).name },
labelStyle: function() { return this.name?"node_label_italic":""; }, labelStyle: function() { return this.name?"red-ui-flow-node-label-italic":""; },
paletteLabel: function() { return RED.nodes.subflow(sf.id).name }, paletteLabel: function() { return RED.nodes.subflow(sf.id).name },
inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null }, inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null }, outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
@ -1072,7 +1072,7 @@ RED.nodes = (function() {
color:"#fee", color:"#fee",
defaults: {}, defaults: {},
label: "unknown: "+n.type, label: "unknown: "+n.type,
labelStyle: "node_label_italic", labelStyle: "red-ui-flow-node-label-italic",
outputs: n.outputs||n.wires.length, outputs: n.outputs||n.wires.length,
set: registry.getNodeSet("node-red/unknown") set: registry.getNodeSet("node-red/unknown")
} }

4
packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js vendored
View File

@ -172,7 +172,7 @@ RED.clipboard = (function() {
'<a id="export-range-full" class="editor-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+ '<a id="export-range-full" class="editor-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
'</span>'+ '</span>'+
'</div>'+ '</div>'+
'<div style="height: 400px; position:relative; border:1px solid #999;">'+ '<div class="red-ui-clipboard-dialog-box">'+
'<div class="red-ui-clipboard-dialog-tabs">'+ '<div class="red-ui-clipboard-dialog-tabs">'+
'<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+ '<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+
'</div>'+ '</div>'+
@ -200,7 +200,7 @@ RED.clipboard = (function() {
importNodesDialog = importNodesDialog =
'<div style="height: 400px; position:relative; border:1px solid #999; margin-bottom: 12px">'+ '<div class="red-ui-clipboard-dialog-box" style="margin-bottom: 12px">'+
'<div class="red-ui-clipboard-dialog-tabs">'+ '<div class="red-ui-clipboard-dialog-tabs">'+
'<ul id="red-ui-clipboard-dialog-import-tabs"></ul>'+ '<ul id="red-ui-clipboard-dialog-import-tabs"></ul>'+
'</div>'+ '</div>'+

4
packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js vendored
View File

@ -180,10 +180,10 @@ RED.deploy = (function() {
'<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>'+ '<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>'+
'</div>').appendTo(message); '</div>').appendTo(message);
var conflictAutoMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+ var conflictAutoMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
'<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+ '<i class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
'</div>').hide().appendTo(message); '</div>').hide().appendTo(message);
var conflictManualMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+ var conflictManualMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
'<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+ '<i class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
'</div>').hide().appendTo(message); '</div>').hide().appendTo(message);
message.i18n(); message.i18n();

18
packages/node_modules/@node-red/editor-client/src/js/ui/diff.js vendored
View File

@ -787,7 +787,7 @@ RED.diff = (function() {
$("<td>",{class:"red-ui-diff-list-cell-label"}).text("position").appendTo(row); $("<td>",{class:"red-ui-diff-list-cell-label"}).text("position").appendTo(row);
localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row); localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) { if (localNode) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell); $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell); element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell);
propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y}, propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y},
@ -807,7 +807,7 @@ RED.diff = (function() {
if (remoteNode !== undefined) { if (remoteNode !== undefined) {
remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row); remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
if (remoteNode) { if (remoteNode) {
$('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell); $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
element = $('<span class="red-ui-diff-list-element"></span>').appendTo(remoteCell); element = $('<span class="red-ui-diff-list-element"></span>').appendTo(remoteCell);
@ -856,7 +856,7 @@ RED.diff = (function() {
localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row); localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) { if (localNode) {
if (!conflict) { if (!conflict) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell); $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
} else { } else {
localCell.addClass("red-ui-diff-status-conflict"); localCell.addClass("red-ui-diff-status-conflict");
@ -871,7 +871,7 @@ RED.diff = (function() {
remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row); remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
if (remoteNode) { if (remoteNode) {
if (!conflict) { if (!conflict) {
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell); $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
} else { } else {
remoteCell.addClass("red-ui-diff-status-conflict"); remoteCell.addClass("red-ui-diff-status-conflict");
@ -929,7 +929,7 @@ RED.diff = (function() {
localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row); localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) { if (localNode) {
if (!conflict) { if (!conflict) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell); $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
} else { } else {
localCell.addClass("red-ui-diff-status-conflict"); localCell.addClass("red-ui-diff-status-conflict");
@ -954,7 +954,7 @@ RED.diff = (function() {
remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row); remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
if (remoteNode) { if (remoteNode) {
if (!conflict) { if (!conflict) {
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell); $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
} else { } else {
remoteCell.addClass("red-ui-diff-status-conflict"); remoteCell.addClass("red-ui-diff-status-conflict");
@ -1029,9 +1029,9 @@ RED.diff = (function() {
} }
var localSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-local"}).on("click", function(e) { e.stopPropagation();}).appendTo(localDiv); var localSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-local"}).on("click", function(e) { e.stopPropagation();}).appendTo(localDiv);
var localRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv); var localRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
var remoteSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-remote"}).on("click", function(e) { e.stopPropagation();}).appendTo(remoteDiv); var remoteSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-remote"}).on("click", function(e) { e.stopPropagation();}).appendTo(remoteDiv);
var remoteRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv); var remoteRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
if (state === 'local') { if (state === 'local') {
localRadio.prop('checked',true); localRadio.prop('checked',true);
} else if (state === 'remote') { } else if (state === 'remote') {
@ -1549,7 +1549,7 @@ RED.diff = (function() {
} }
currentBlock.end = diffLength; currentBlock.end = diffLength;
diffBlocks.push(currentBlock); diffBlocks.push(currentBlock);
// console.table(diffBlocks); console.table(diffBlocks);
var diffRow; var diffRow;
for (var b = 0; b<diffBlocks.length; b++) { for (var b = 0; b<diffBlocks.length; b++) {
currentBlock = diffBlocks[b]; currentBlock = diffBlocks[b];

2
packages/node_modules/@node-red/editor-client/src/js/ui/editor.js vendored
View File

@ -859,7 +859,7 @@ RED.editor = (function() {
var picker = $('<div class="red-ui-icon-picker">').css({ var picker = $('<div class="red-ui-icon-picker">').css({
top: top+"px", top: top+"px",
left: containerPos.left+"px", left: containerPos.left+"px",
}).appendTo("body"); }).appendTo("#red-ui-editor");
var hide = function() { var hide = function() {
pickerBackground.remove(); pickerBackground.remove();

2
packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js vendored
View File

@ -15,7 +15,7 @@
**/ **/
(function() { (function() {
var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="red-ui-editor-type-buffer-type"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></span></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>'; var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type editor-button editor-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
function stringToUTF8Array(str) { function stringToUTF8Array(str) {
var data = []; var data = [];

6
packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js vendored
View File

@ -19,7 +19,7 @@
var template = '<script type="text/x-red" data-template-name="_expression">'+ var template = '<script type="text/x-red" data-template-name="_expression">'+
'<div id="red-ui-editor-type-expression-panels">'+ '<div id="red-ui-editor-type-expression-panels">'+
'<div id="red-ui-editor-type-expression-panel-expr" class="red-ui-panel">'+ '<div id="red-ui-editor-type-expression-panel-expr" class="red-ui-panel">'+
'<div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="red-ui-editor-type-expression-legacy"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></span><button id="red-ui-editor-type-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+ '<div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-expression-legacy editor-button editor-button-small"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></button><button id="red-ui-editor-type-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
'<div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-expression"></div></div>'+ '<div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-expression"></div></div>'+
'</div>'+ '</div>'+
'<div id="red-ui-editor-type-expression-panel-info" class="red-ui-panel">'+ '<div id="red-ui-editor-type-expression-panel-info" class="red-ui-panel">'+
@ -35,10 +35,10 @@
'<div id="red-ui-editor-type-expression-tab-test" class="red-ui-editor-type-expression-tab-content hide">'+ '<div id="red-ui-editor-type-expression-tab-test" class="red-ui-editor-type-expression-tab-content hide">'+
'<div>'+ '<div>'+
'<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+ '<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+
'<span style="display: inline-block; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+ '<span style="display: inline-block; margin-left: 10px; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
'</div>'+ '</div>'+
'<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-data"></div>'+ '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-data"></div>'+
'<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-result"></div>'+ '<div style="display: inline-block; margin-left: 10px; width:calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-result"></div>'+
'</div>'+ '</div>'+
'</div>'+ '</div>'+
'</div>'+ '</div>'+

1
packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js vendored
View File

@ -234,7 +234,6 @@ RED.notifications = (function() {
if (options.id) { if (options.id) {
persistentNotifications[options.id] = n; persistentNotifications[options.id] = n;
if (options.fixed) { if (options.fixed) {
console.log("SHPW)")
notificationButtonWrapper.show(); notificationButtonWrapper.show();
} }
} }

4
packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js vendored
View File

@ -815,8 +815,8 @@ RED.palette.editor = (function() {
if (object.info) { if (object.info) {
var entry = object.info; var entry = object.info;
var headerRow = $('<div>',{class:"red-ui-palette-module-header"}).appendTo(container); var headerRow = $('<div>',{class:"red-ui-palette-module-header"}).appendTo(container);
var titleRow = $('<div class="red-ui-palette-module-meta"><i class="fa fa-cube"></i></div>').appendTo(headerRow); var titleRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
$('<span>',{class:"red-ui-palette-module-name"}).text(entry.name||entry.id).appendTo(titleRow); $('<span>').text(entry.name||entry.id).appendTo(titleRow);
$('<a target="_blank" class="red-ui-palette-module-link"><i class="fa fa-external-link"></i></a>').attr('href',entry.url).appendTo(titleRow); $('<a target="_blank" class="red-ui-palette-module-link"><i class="fa fa-external-link"></i></a>').attr('href',entry.url).appendTo(titleRow);
var descRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow); var descRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
$('<div>',{class:"red-ui-palette-module-description"}).text(entry.description).appendTo(descRow); $('<div>',{class:"red-ui-palette-module-description"}).text(entry.description).appendTo(descRow);

14
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@ -253,16 +253,16 @@ RED.palette = (function() {
var paletteTop; var paletteTop;
$(d).draggable({ $(d).draggable({
helper: 'clone', helper: 'clone',
appendTo: 'body', appendTo: '#red-ui-editor',
revert: 'invalid', revert: 'invalid',
revertDuration: 300, revertDuration: 200,
containment:'#red-ui-main-container', containment:'#red-ui-main-container',
start: function() { start: function() {
paletteWidth = $("#red-ui-palette").width(); paletteWidth = $("#red-ui-palette").width();
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top; paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
RED.view.focus(); RED.view.focus();
}, },
stop: function() { d3.select('.link_splice').classed('link_splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}}, stop: function() { d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
drag: function(e,ui) { drag: function(e,ui) {
ui.originalPosition.left = $('#' + e.target.id).offset().left; ui.originalPosition.left = $('#' + e.target.id).offset().left;
@ -293,7 +293,7 @@ RED.palette = (function() {
for (var i=0;i<nodes.length;i++) { for (var i=0;i<nodes.length;i++) {
var node = d3.select(nodes[i]); var node = d3.select(nodes[i]);
if (node.classed('link_background') && !node.classed('link_link')) { if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) {
var length = nodes[i].getTotalLength(); var length = nodes[i].getTotalLength();
for (var j=0;j<length;j+=10) { for (var j=0;j<length;j+=10) {
var p = nodes[i].getPointAtLength(j); var p = nodes[i].getPointAtLength(j);
@ -306,12 +306,12 @@ RED.palette = (function() {
} }
} }
if (activeSpliceLink && activeSpliceLink !== bestLink) { if (activeSpliceLink && activeSpliceLink !== bestLink) {
d3.select(activeSpliceLink.parentNode).classed('link_splice',false); d3.select(activeSpliceLink.parentNode).classed('red-ui-flow-link-splice',false);
} }
if (bestLink) { if (bestLink) {
d3.select(bestLink.parentNode).classed('link_splice',true) d3.select(bestLink.parentNode).classed('red-ui-flow-link-splice',true)
} else { } else {
d3.select('.link_splice').classed('link_splice',false); d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
} }
if (activeSpliceLink !== bestLink) { if (activeSpliceLink !== bestLink) {
if (bestLink) { if (bestLink) {

2
packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js vendored
View File

@ -490,7 +490,7 @@ RED.sidebar.versionControl = (function() {
commitBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-bottom"></div>').hide().appendTo(localChanges.content); commitBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-bottom"></div>').hide().appendTo(localChanges.content);
var commitMessage = $('<textarea placeholder='+RED._("sidebar.project.versionControl.commitPlaceholder")+'></textarea>') var commitMessage = $('<textarea></textarea>').attr("placeholder",RED._("sidebar.project.versionControl.commitPlaceholder"))
.appendTo(commitBox) .appendTo(commitBox)
.on("change keyup paste",function() { .on("change keyup paste",function() {
submitCommitButton.prop('disabled',$(this).val().trim()===""); submitCommitButton.prop('disabled',$(this).val().trim()==="");

4
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js vendored
View File

@ -70,9 +70,9 @@ RED.sidebar.info = (function() {
helpSection.expand(); helpSection.expand();
helpSection.content.css("padding","6px"); helpSection.content.css("padding","6px");
var tipContainer = $('<div class="node-info-tips"></div>').appendTo(content); var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer); tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
var tipButtons = $('<div class="node-info-tips-buttons"></div>').appendTo(tipContainer); var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer);
var tipRefresh = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons); var tipRefresh = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
tipRefresh.on("click", function(e) { tipRefresh.on("click", function(e) {

2
packages/node_modules/@node-red/editor-client/src/js/ui/utils.js vendored
View File

@ -424,7 +424,7 @@ RED.utils = (function() {
} }
$('<pre class="red-ui-debug-msg-type-string"></pre>').text(stringEncoding).appendTo(sr); $('<pre class="red-ui-debug-msg-type-string"></pre>').text(stringEncoding).appendTo(sr);
var bufferOpts = $('<span class="red-ui-debug-msg-buffer-opts"></span>').appendTo(headerHead); var bufferOpts = $('<span class="red-ui-debug-msg-buffer-opts"></span>').appendTo(headerHead);
var switchFormat = $('<a href="#"></a>').addClass('selected').text('raw').appendTo(bufferOpts).on("click", function(e) { var switchFormat = $('<a class="editor-button editor-button-small" href="#"></a>').text('raw').appendTo(bufferOpts).on("click", function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
formatBuffer(element,$(this),sourceId,path,true); formatBuffer(element,$(this),sourceId,path,true);

399
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -79,6 +79,8 @@ RED.view = (function() {
var clipboard = ""; var clipboard = "";
// Note: these are the permitted status colour aliases. The actual RGB values
// are set in the CSS - flow.scss/colors.scss
var status_colours = { var status_colours = {
"red": "#c00", "red": "#c00",
"green": "#5a8", "green": "#5a8",
@ -438,23 +440,23 @@ RED.view = (function() {
for (var i=0;i<space_width;i+=+gridSize) { for (var i=0;i<space_width;i+=+gridSize) {
gridTicks.push(i); gridTicks.push(i);
} }
gridLayer.selectAll("line.horizontal").remove(); gridLayer.selectAll("line.red-ui-workspace-chart-grid-h").remove();
gridLayer.selectAll("line.horizontal").data(gridTicks).enter() gridLayer.selectAll("line.red-ui-workspace-chart-grid-h").data(gridTicks).enter()
.append("line") .append("line")
.attr( .attr(
{ {
"class":"horizontal", "class":"red-ui-workspace-chart-grid-h",
"x1" : 0, "x1" : 0,
"x2" : space_width, "x2" : space_width,
"y1" : function(d){ return d;}, "y1" : function(d){ return d;},
"y2" : function(d){ return d;} "y2" : function(d){ return d;}
}); });
gridLayer.selectAll("line.vertical").remove(); gridLayer.selectAll("line.red-ui-workspace-chart-grid-v").remove();
gridLayer.selectAll("line.vertical").data(gridTicks).enter() gridLayer.selectAll("line.red-ui-workspace-chart-grid-v").data(gridTicks).enter()
.append("line") .append("line")
.attr( .attr(
{ {
"class":"vertical", "class":"red-ui-workspace-chart-grid-v",
"y1" : 0, "y1" : 0,
"y2" : space_width, "y2" : space_width,
"x1" : function(d){ return d;}, "x1" : function(d){ return d;},
@ -466,10 +468,10 @@ RED.view = (function() {
showAllLinkPorts = -1; showAllLinkPorts = -1;
for (var i=0;i<nodes.length;i++) { for (var i=0;i<nodes.length;i++) {
var node = nodes[i]; var node = nodes[i];
node.el = dragGroupLayer.append("svg:path").attr("class", "drag_line"); node.el = dragGroupLayer.append("svg:path").attr("class", "red-ui-flow-drag-line");
if ((node.node.type === "link out" && node.portType === PORT_TYPE_OUTPUT) || if ((node.node.type === "link out" && node.portType === PORT_TYPE_OUTPUT) ||
(node.node.type === "link in" && node.portType === PORT_TYPE_INPUT)) { (node.node.type === "link in" && node.portType === PORT_TYPE_INPUT)) {
node.el.attr("class","link_link drag_line"); node.el.attr("class","red-ui-flow-link-link red-ui-flow-drag-line");
node.virtualLink = true; node.virtualLink = true;
showAllLinkPorts = (node.portType === PORT_TYPE_OUTPUT)?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT; showAllLinkPorts = (node.portType === PORT_TYPE_OUTPUT)?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT;
} }
@ -708,14 +710,14 @@ RED.view = (function() {
} }
ghostNode = eventLayer.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')'); ghostNode = eventLayer.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
ghostNode.append("rect") ghostNode.append("rect")
.attr("class","node_placeholder") .attr("class","red-ui-flow-node-placeholder")
.attr("rx", 5) .attr("rx", 5)
.attr("ry", 5) .attr("ry", 5)
.attr("width",node_width) .attr("width",node_width)
.attr("height",node_height) .attr("height",node_height)
.attr("fill","none") .attr("fill","none")
// var ghostLink = ghostNode.append("svg:path") // var ghostLink = ghostNode.append("svg:path")
// .attr("class","link_link") // .attr("class","red-ui-flow-link-link")
// .attr("d","M 0 "+(node_height/2)+" H "+(gridSize * -2)) // .attr("d","M 0 "+(node_height/2)+" H "+(gridSize * -2))
// .attr("opacity",0); // .attr("opacity",0);
@ -744,7 +746,7 @@ RED.view = (function() {
return; return;
} }
if (!quickAddLink.el) { if (!quickAddLink.el) {
quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "drag_line"); quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "red-ui-flow-drag-line");
} }
var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1; var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1;
var sourcePort = quickAddLink.port; var sourcePort = quickAddLink.port;
@ -1188,7 +1190,7 @@ RED.view = (function() {
nodes = RED.view.getLinksAtPoint(mouseX,mouseY); nodes = RED.view.getLinksAtPoint(mouseX,mouseY);
} }
for (var i=0;i<nodes.length;i++) { for (var i=0;i<nodes.length;i++) {
if (d3.select(nodes[i]).classed("link_background")) { if (d3.select(nodes[i]).classed("red-ui-flow-link-background")) {
var length = nodes[i].getTotalLength(); var length = nodes[i].getTotalLength();
for (var j=0;j<length;j+=10) { for (var j=0;j<length;j+=10) {
var p = nodes[i].getPointAtLength(j); var p = nodes[i].getPointAtLength(j);
@ -1201,12 +1203,12 @@ RED.view = (function() {
} }
} }
if (activeSpliceLink && activeSpliceLink !== bestLink) { if (activeSpliceLink && activeSpliceLink !== bestLink) {
d3.select(activeSpliceLink.parentNode).classed("link_splice",false); d3.select(activeSpliceLink.parentNode).classed("red-ui-flow-link-splice",false);
} }
if (bestLink) { if (bestLink) {
d3.select(bestLink.parentNode).classed("link_splice",true) d3.select(bestLink.parentNode).classed("red-ui-flow-link-splice",true)
} else { } else {
d3.select(".link_splice").classed("link_splice",false); d3.select(".red-ui-flow-link-splice").classed("red-ui-flow-link-splice",false);
} }
activeSpliceLink = bestLink; activeSpliceLink = bestLink;
spliceTimer = null; spliceTimer = null;
@ -1777,7 +1779,7 @@ RED.view = (function() {
mousedown_port_type = null; mousedown_port_type = null;
activeSpliceLink = null; activeSpliceLink = null;
spliceActive = false; spliceActive = false;
d3.select(".link_splice").classed("link_splice",false); d3.select(".red-ui-flow-link-splice").classed("red-ui-flow-link-splice",false);
if (spliceTimer) { if (spliceTimer) {
clearTimeout(spliceTimer); clearTimeout(spliceTimer);
spliceTimer = null; spliceTimer = null;
@ -2048,7 +2050,7 @@ RED.view = (function() {
function showTooltip(x,y,content,direction) { function showTooltip(x,y,content,direction) {
var tooltip = eventLayer.append("g") var tooltip = eventLayer.append("g")
.attr("transform","translate("+x+","+y+")") .attr("transform","translate("+x+","+y+")")
.attr("class","port_tooltip"); .attr("class","red-ui-flow-port-tooltip");
var lines = content.split("\n"); var lines = content.split("\n");
var labelWidth = 0; var labelWidth = 0;
@ -2056,7 +2058,7 @@ RED.view = (function() {
var labelHeights = []; var labelHeights = [];
var lineHeight = 0; var lineHeight = 0;
lines.forEach(function(l,i) { lines.forEach(function(l,i) {
var labelDimensions = calculateTextDimensions(l||"&nbsp;", "port_tooltip_label", 8,0); var labelDimensions = calculateTextDimensions(l||"&nbsp;", "red-ui-flow-port-tooltip-label", 8,0);
labelWidth = Math.max(labelWidth,labelDimensions[0]); labelWidth = Math.max(labelWidth,labelDimensions[0]);
labelHeights.push(0.8*labelDimensions[1]); labelHeights.push(0.8*labelDimensions[1]);
if (i === 0) { if (i === 0) {
@ -2090,7 +2092,7 @@ RED.view = (function() {
tooltip.append("path").attr("d",path); tooltip.append("path").attr("d",path);
lines.forEach(function(l,i) { lines.forEach(function(l,i) {
ly += labelHeights[i]; ly += labelHeights[i];
tooltip.append("svg:text").attr("class","port_tooltip_label") tooltip.append("svg:text").attr("class","red-ui-flow-port-tooltip-label")
.attr("x", lx) .attr("x", lx)
.attr("y", ly) .attr("y", ly)
.attr("text-anchor",anchor) .attr("text-anchor",anchor)
@ -2128,7 +2130,7 @@ RED.view = (function() {
); );
},500); },500);
} }
port.classed("port_hovered",active); port.classed("red-ui-flow-port-hovered",active);
} }
function portMouseOut(port,d,portType,portIndex) { function portMouseOut(port,d,portType,portIndex) {
clearTimeout(portLabelHoverTimeout); clearTimeout(portLabelHoverTimeout);
@ -2136,7 +2138,7 @@ RED.view = (function() {
portLabelHover.remove(); portLabelHover.remove();
portLabelHover = null; portLabelHover = null;
} }
port.classed("port_hovered",false); port.classed("red-ui-flow-port-hovered",false);
} }
function nodeMouseUp(d) { function nodeMouseUp(d) {
@ -2168,7 +2170,7 @@ RED.view = (function() {
portMouseUp(d, direction, 0); portMouseUp(d, direction, 0);
if (wasJoining) { if (wasJoining) {
d3.selectAll(".port_hovered").classed("port_hovered",false); d3.selectAll(".red-ui-flow-port-hovered").classed("red-ui-flow-port-hovered",false);
} }
} }
@ -2352,15 +2354,11 @@ RED.view = (function() {
.attr("xlink:href",iconUrl) .attr("xlink:href",iconUrl)
.attr("class","fa-lg") .attr("class","fa-lg")
.attr("x",15) .attr("x",15)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome")
.text(fontAwesomeUnicode); .text(fontAwesomeUnicode);
} else { } else {
var icon = icon_group.append("image") var icon = icon_group.append("image")
.attr("xlink:href",iconUrl) .attr("xlink:href",iconUrl)
.attr("class","node_icon") .attr("class","red-ui-flow-node-icon")
.attr("x",0) .attr("x",0)
.attr("width","30") .attr("width","30")
.attr("height","30"); .attr("height","30");
@ -2392,14 +2390,14 @@ RED.view = (function() {
var dirtyNodes = {}; var dirtyNodes = {};
if (activeSubflow) { if (activeSubflow) {
var subflowOutputs = nodeLayer.selectAll(".subflowoutput").data(activeSubflow.out,function(d,i){ return d.id;}); var subflowOutputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-output").data(activeSubflow.out,function(d,i){ return d.id;});
subflowOutputs.exit().remove(); subflowOutputs.exit().remove();
var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","node subflowoutput").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"}); var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-output").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
outGroup.each(function(d,i) { outGroup.each(function(d,i) {
d.w=40; d.w=40;
d.h=40; d.h=40;
}); });
outGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40) outGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
// TODO: This is exactly the same set of handlers used for regular nodes - DRY // TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp) .on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown) .on("mousedown",nodeMouseDown)
@ -2424,7 +2422,7 @@ RED.view = (function() {
nodeMouseUp.call(this,d); nodeMouseUp.call(this,d);
}); });
outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);}) .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
@ -2432,17 +2430,17 @@ RED.view = (function() {
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);}) .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);}); .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
outGroup.append("svg:text").attr("class","port_label").attr("x",20).attr("y",8).style("font-size","10px").text("output"); outGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",20).attr("y",8).style("font-size","10px").text("output");
outGroup.append("svg:text").attr("class","port_label port_index").attr("x",20).attr("y",24).text(function(d,i){ return i+1}); outGroup.append("svg:text").attr("class","red-ui-flow-port-label red-ui-flow-port-index").attr("x",20).attr("y",24).text(function(d,i){ return i+1});
var subflowInputs = nodeLayer.selectAll(".subflowinput").data(activeSubflow.in,function(d,i){ return d.id;}); var subflowInputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-input").data(activeSubflow.in,function(d,i){ return d.id;});
subflowInputs.exit().remove(); subflowInputs.exit().remove();
var inGroup = subflowInputs.enter().insert("svg:g").attr("class","node subflowinput").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"}); var inGroup = subflowInputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-input").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
inGroup.each(function(d,i) { inGroup.each(function(d,i) {
d.w=40; d.w=40;
d.h=40; d.h=40;
}); });
inGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40) inGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
// TODO: This is exactly the same set of handlers used for regular nodes - DRY // TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp) .on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown) .on("mousedown",nodeMouseDown)
@ -2467,7 +2465,7 @@ RED.view = (function() {
nodeMouseUp.call(this,d); nodeMouseUp.call(this,d);
}); });
inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} ) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} ) .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);}) .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
@ -2475,17 +2473,17 @@ RED.view = (function() {
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);}) .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);})
.on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);}); .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);});
inGroup.append("svg:text").attr("class","port_label").attr("x",18).attr("y",20).style("font-size","10px").text("input"); inGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",18).attr("y",20).style("font-size","10px").text("input");
var subflowStatus = nodeLayer.selectAll(".subflowstatus").data(activeSubflow.status?[activeSubflow.status]:[],function(d,i){ return d.id;}); var subflowStatus = nodeLayer.selectAll(".red-ui-flow-subflow-port-status").data(activeSubflow.status?[activeSubflow.status]:[],function(d,i){ return d.id;});
subflowStatus.exit().remove(); subflowStatus.exit().remove();
var statusGroup = subflowStatus.enter().insert("svg:g").attr("class","node subflowstatus").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"}); var statusGroup = subflowStatus.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-status").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
statusGroup.each(function(d,i) { statusGroup.each(function(d,i) {
d.w=40; d.w=40;
d.h=40; d.h=40;
}); });
statusGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40) statusGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
// TODO: This is exactly the same set of handlers used for regular nodes - DRY // TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp) .on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown) .on("mousedown",nodeMouseDown)
@ -2510,7 +2508,7 @@ RED.view = (function() {
nodeMouseUp.call(this,d); nodeMouseUp.call(this,d);
}); });
statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);}) .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
@ -2518,13 +2516,13 @@ RED.view = (function() {
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);}) .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);}); .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
statusGroup.append("svg:text").attr("class","port_label").attr("x",22).attr("y",20).style("font-size","10px").text("status"); statusGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",22).attr("y",20).style("font-size","10px").text("status");
subflowOutputs.each(function(d,i) { subflowOutputs.each(function(d,i) {
if (d.dirty) { if (d.dirty) {
var output = d3.select(this); var output = d3.select(this);
output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; }) output.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
output.selectAll(".port_index").text(function(d){ return d.i+1}); output.selectAll(".red-ui-flow-port-index").text(function(d){ return d.i+1});
output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; }); output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
dirtyNodes[d.id] = d; dirtyNodes[d.id] = d;
d.dirty = false; d.dirty = false;
@ -2533,7 +2531,7 @@ RED.view = (function() {
subflowInputs.each(function(d,i) { subflowInputs.each(function(d,i) {
if (d.dirty) { if (d.dirty) {
var input = d3.select(this); var input = d3.select(this);
input.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; }) input.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
input.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; }); input.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
dirtyNodes[d.id] = d; dirtyNodes[d.id] = d;
d.dirty = false; d.dirty = false;
@ -2542,8 +2540,8 @@ RED.view = (function() {
subflowStatus.each(function(d,i) { subflowStatus.each(function(d,i) {
if (d.dirty) { if (d.dirty) {
var output = d3.select(this); var output = d3.select(this);
output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; }) output.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
output.selectAll(".port_index").text(function(d){ return d.i+1}); output.selectAll(".red-ui-flow-port-index").text(function(d){ return d.i+1});
output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; }); output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
dirtyNodes[d.id] = d; dirtyNodes[d.id] = d;
d.dirty = false; d.dirty = false;
@ -2552,18 +2550,17 @@ RED.view = (function() {
} else { } else {
nodeLayer.selectAll(".subflowoutput").remove(); nodeLayer.selectAll(".red-ui-flow-subflow-port-output").remove();
nodeLayer.selectAll(".subflowinput").remove(); nodeLayer.selectAll(".red-ui-flow-subflow-port-input").remove();
nodeLayer.selectAll(".subflowstatus").remove(); nodeLayer.selectAll(".red-ui-flow-subflow-port-status").remove();
} }
var node = nodeLayer.selectAll(".nodegroup").data(activeNodes,function(d){return d.id}); var node = nodeLayer.selectAll(".red-ui-flow-node-group").data(activeNodes,function(d){return d.id});
node.exit().remove(); node.exit().remove();
var nodeEnter = node.enter().insert("svg:g") var nodeEnter = node.enter().insert("svg:g")
.attr("class", "node nodegroup") .attr("class", "red-ui-flow-node red-ui-flow-node-group")
.classed("node_subflow",function(d) { return activeSubflow != null; }) .classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; });
.classed("node_link",function(d) { return d.type === "link in" || d.type === "link out" });
nodeEnter.each(function(d,i) { nodeEnter.each(function(d,i) {
var node = d3.select(this); var node = d3.select(this);
@ -2574,32 +2571,32 @@ RED.view = (function() {
if (hideLabel) { if (hideLabel) {
d.w = node_height; d.w = node_height;
} else { } else {
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) ); d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
} }
d.h = Math.max(node_height,(d.outputs||0) * 15); d.h = Math.max(node_height,(d.outputs||0) * 15);
if (d._def.badge) { // if (d._def.badge) {
var badge = node.append("svg:g").attr("class","node_badge_group"); // var badge = node.append("svg:g").attr("class","node_badge_group");
var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15); // var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15);
badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge()); // badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge());
if (d._def.onbadgeclick) { // if (d._def.onbadgeclick) {
badgeRect.attr("cursor","pointer") // badgeRect.attr("cursor","pointer")
.on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();}); // .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
} // }
} // }
if (d._def.button) { if (d._def.button) {
var nodeButtonGroup = node.append("svg:g") var nodeButtonGroup = node.append("svg:g")
.attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; }) .attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
.attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); }); .attr("class","red-ui-flow-node-button");
nodeButtonGroup.append("rect") nodeButtonGroup.append("rect")
.attr("class","red-ui-flow-node-button-background")
.attr("rx",5) .attr("rx",5)
.attr("ry",5) .attr("ry",5)
.attr("width",32) .attr("width",32)
.attr("height",node_height-4) .attr("height",node_height-4);
.attr("fill","#eee");//function(d) { return d._def.color;})
nodeButtonGroup.append("rect") nodeButtonGroup.append("rect")
.attr("class","node_button_button") .attr("class","red-ui-flow-node-button-button")
.attr("x",function(d) { return d._def.align == "right"? 11:5}) .attr("x",function(d) { return d._def.align == "right"? 11:5})
.attr("y",4) .attr("y",4)
.attr("rx",4) .attr("rx",4)
@ -2623,8 +2620,8 @@ RED.view = (function() {
} }
var mainRect = node.append("rect") var mainRect = node.append("rect")
.attr("class", "node") .attr("class", "red-ui-flow-node")
.classed("node_unknown",function(d) { return d.type == "unknown"; }) .classed("red-ui-flow-node-unknown",function(d) { return d.type == "unknown"; })
.attr("rx", 5) .attr("rx", 5)
.attr("ry", 5) .attr("ry", 5)
.attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/}) .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
@ -2684,10 +2681,10 @@ RED.view = (function() {
var selectClass; var selectClass;
var portType; var portType;
if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) { if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
selectClass = ".port_input .port"; selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
portType = PORT_TYPE_INPUT; portType = PORT_TYPE_INPUT;
} else { } else {
selectClass = ".port_output .port"; selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
portType = PORT_TYPE_OUTPUT; portType = PORT_TYPE_OUTPUT;
} }
portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0); portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@ -2707,10 +2704,10 @@ RED.view = (function() {
var selectClass; var selectClass;
var portType; var portType;
if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) { if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
selectClass = ".port_input .port"; selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
portType = PORT_TYPE_INPUT; portType = PORT_TYPE_INPUT;
} else { } else {
selectClass = ".port_output .port"; selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
portType = PORT_TYPE_OUTPUT; portType = PORT_TYPE_OUTPUT;
} }
portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0); portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@ -2724,33 +2721,27 @@ RED.view = (function() {
if (d._def.icon) { if (d._def.icon) {
var icon_url = RED.utils.getNodeIcon(d._def,d); var icon_url = RED.utils.getNodeIcon(d._def,d);
var icon_group = node.append("g") var icon_group = node.append("g")
.attr("class","node_icon_group") .attr("class","red-ui-flow-node-icon-group")
.attr("x",0).attr("y",0); .attr("x",0).attr("y",0);
var icon_shade = icon_group.append("rect") var icon_shade = icon_group.append("rect")
.attr("x",0).attr("y",0) .attr("x",0).attr("y",0)
.attr("class","node_icon_shade") .attr("class","red-ui-flow-node-icon-shade")
.attr("width","30") .attr("width","30")
.attr("stroke","none")
.attr("fill","#000")
.attr("fill-opacity","0.05")
.attr("height",function(d){return Math.min(50,d.h-4);}); .attr("height",function(d){return Math.min(50,d.h-4);});
createIconAttributes(icon_url, icon_group, d); createIconAttributes(icon_url, icon_group, d);
var icon_shade_border = icon_group.append("path") var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)}) .attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
.attr("class","node_icon_shade_border") .attr("class","red-ui-flow-node-icon-shade-border");
.attr("stroke-opacity","0.1")
.attr("stroke","#000")
.attr("stroke-width","1");
if ("right" == d._def.align) { if ("right" == d._def.align) {
icon_group.attr("class","node_icon_group node_icon_group_"+d._def.align); icon_group.attr("class","red-ui-flow-node-icon-group red-ui-flow-node-icon-group-"+d._def.align);
icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)}) icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)})
//icon.attr("class","node_icon node_icon_"+d._def.align); //icon.attr("class","red-ui-flow-node-icon red-ui-flow-node-icon-"+d._def.align);
//icon.attr("class","node_icon_shade node_icon_shade_"+d._def.align); //icon.attr("class","red-ui-flow-node-icon-shade red-ui-flow-node-icon-shade-"+d._def.align);
//icon.attr("class","node_icon_shade_border node_icon_shade_border_"+d._def.align); //icon.attr("class","red-ui-flow-node-icon-shade-border red-ui-flow-node-icon-shade-border-"+d._def.align);
} }
//if (d.inputs > 0 && d._def.align == null) { //if (d.inputs > 0 && d._def.align == null) {
@ -2766,29 +2757,29 @@ RED.view = (function() {
icon_group.style("pointer-events","none"); icon_group.style("pointer-events","none");
} }
var text = node.append("svg:text") var text = node.append("svg:text")
.attr("class","node_label") .attr("class","red-ui-flow-node-label")
.attr("x", 38) .attr("x", 38)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor","start") .attr("text-anchor","start")
.classed("hide",hideLabel); .classed("hide",hideLabel);
if (d._def.align) { if (d._def.align) {
text.attr("class","node_label node_label_"+d._def.align); text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align);
if (d._def.align === "right") { if (d._def.align === "right") {
text.attr("text-anchor","end"); text.attr("text-anchor","end");
} }
} }
var status = node.append("svg:g").attr("class","node_status_group").style("display","none"); var status = node.append("svg:g").attr("class","red-ui-flow-node-status-group").style("display","none");
var statusRect = status.append("rect").attr("class","node_status") var statusRect = status.append("rect").attr("class","red-ui-flow-node-status")
.attr("x",6).attr("y",1).attr("width",9).attr("height",9) .attr("x",6).attr("y",1).attr("width",9).attr("height",9)
.attr("rx",2).attr("ry",2).attr("stroke-width","3"); .attr("rx",2).attr("ry",2).attr("stroke-width","3");
var statusLabel = status.append("svg:text") var statusLabel = status.append("svg:text")
.attr("class","node_status_label") .attr("class","red-ui-flow-node-status-label")
.attr("x",20).attr("y",10); .attr("x",20).attr("y",10);
node.append("g").attr("class","red-ui-view-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5); node.append("g").attr("class","red-ui-flow-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
var nodeErrorButton = node.append("g").attr("class","red-ui-view-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z"); var nodeErrorButton = node.append("g").attr("class","red-ui-flow-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
// nodeErrorButton.on("mouseenter", function() { // nodeErrorButton.on("mouseenter", function() {
// clearTimeout(portLabelHoverTimeout); // clearTimeout(portLabelHoverTimeout);
// portLabelHoverTimeout = setTimeout(function() { // portLabelHoverTimeout = setTimeout(function() {
@ -2822,60 +2813,54 @@ RED.view = (function() {
if (hideLabel) { if (hideLabel) {
d.w = node_height; d.w = node_height;
} else { } else {
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) ); d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
} }
// d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) ); // d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
d.h = Math.max(node_height,(d.outputs||0) * 15); d.h = Math.max(node_height,(d.outputs||0) * 15);
d.x += (d.w-ow)/2; d.x += (d.w-ow)/2;
d.resize = false; d.resize = false;
} }
var thisNode = d3.select(this); var thisNode = d3.select(this);
thisNode.classed("node_subflow",function(d) { return activeSubflow != null; }) thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; })
//thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}}); //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; }); thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
if (mouse_mode != RED.state.MOVING_ACTIVE) { if (mouse_mode != RED.state.MOVING_ACTIVE) {
thisNode.selectAll(".node") thisNode.selectAll(".red-ui-flow-node")
.attr("width",function(d){return d.w}) .attr("width",function(d){return d.w})
.attr("height",function(d){return d.h}) .attr("height",function(d){return d.h})
.classed("node_selected",function(d) { return d.selected; }) .classed("red-ui-flow-node-selected",function(d) { return d.selected; })
.classed("node_highlighted",function(d) { return d.highlighted; }) .classed("red-ui-flow-node-highlighted",function(d) { return d.highlighted; })
; ;
//thisNode.selectAll(".node-gradient-top").attr("width",function(d){return d.w});
//thisNode.selectAll(".node-gradient-bottom").attr("width",function(d){return d.w}).attr("y",function(d){return d.h-30});
if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) { if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) {
thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", true); thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", true);
thisNode.selectAll(".node_label").classed("node_label_right", true).attr("text-anchor", "end"); thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end");
} else { } else {
thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", false); thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", false);
thisNode.selectAll(".node_label").classed("node_label_right", false).attr("text-anchor", "start"); thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start");
} }
thisNode.selectAll(".node_icon_group").attr("transform", function (d) { return "translate(0, 0)"; }); thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", function (d) { return "translate(0, 0)"; });
thisNode.selectAll(".node_label").attr("x", function (d) { return 38; }); thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { return 38; });
thisNode.selectAll(".node_icon_group_right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"}); thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
thisNode.selectAll(".node_label_right").attr("x", function(d){return d.w-38}); thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){return d.w-38});
//thisNode.selectAll(".node_icon_right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);}); //thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
//thisNode.selectAll(".node_icon_shade_right").attr("x",function(d){return d.w-30;}); //thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;});
//thisNode.selectAll(".node_icon_shade_border_right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)}); //thisNode.selectAll(".red-ui-flow-node-icon-shade-border-right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
var inputPorts = thisNode.selectAll(".port_input"); var inputPorts = thisNode.selectAll(".red-ui-flow-port-input");
if (isLink && showAllLinkPorts === -1 && !activeLinkNodes[d.id] && d.inputs === 0 && !inputPorts.empty()) { if (isLink && showAllLinkPorts === -1 && !activeLinkNodes[d.id] && d.inputs === 0 && !inputPorts.empty()) {
inputPorts.remove(); inputPorts.remove();
} else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) { } else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) {
var inputGroup = thisNode.append("g").attr("class","port_input"); var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input");
var inputGroupPorts; var inputGroupPorts;
if (d.type === "link in") { if (d.type === "link in") {
inputGroupPorts = inputGroup.append("circle") inputGroupPorts = inputGroup.append("circle")
.attr("cx",-1).attr("cy",5) .attr("cx",-1).attr("cy",5)
.attr("r",5) .attr("r",5)
.attr("class","port link_port") .attr("class","red-ui-flow-port red-ui-flow-link-port")
// inputGroupPorts = inputGroup.append("path")
// .attr("d","M 4 -1 h -3 a 6 6 0 1 0 0 12 h 3")
// .attr("class","port link_port")
} else { } else {
inputGroupPorts = inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
} }
inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
.on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
@ -2897,21 +2882,18 @@ RED.view = (function() {
} }
var y = (d.h/2)-((numOutputs-1)/2)*13; var y = (d.h/2)-((numOutputs-1)/2)*13;
d.ports = d.ports || d3.range(numOutputs); d.ports = d.ports || d3.range(numOutputs);
d._ports = thisNode.selectAll(".port_output").data(d.ports); d._ports = thisNode.selectAll(".red-ui-flow-port-output").data(d.ports);
var output_group = d._ports.enter().append("g").attr("class","port_output"); var output_group = d._ports.enter().append("g").attr("class","red-ui-flow-port-output");
var output_group_ports; var output_group_ports;
if (d.type === "link out") { if (d.type === "link out") {
output_group_ports = output_group.append("circle") output_group_ports = output_group.append("circle")
.attr("cx",11).attr("cy",5) .attr("cx",11).attr("cy",5)
.attr("r",5) .attr("r",5)
.attr("class","port link_port") .attr("class","red-ui-flow-port red-ui-flow-link-port")
// output_group_ports = output_group.append("path")
// .attr("d","M 6 -1 h 3 a 6 6 0 1 1 0 12 h -3")
// .attr("class","port link_port")
} else { } else {
output_group_ports = output_group.append("rect") output_group_ports = output_group.append("rect")
.attr("class","port") .attr("class","red-ui-flow-port")
.attr("rx",3).attr("ry",3) .attr("rx",3).attr("ry",3)
.attr("width",10) .attr("width",10)
.attr("height",10) .attr("height",10)
@ -2931,11 +2913,10 @@ RED.view = (function() {
var x = d.w - 5; var x = d.w - 5;
d._ports.each(function(d,i) { d._ports.each(function(d,i) {
var port = d3.select(this); var port = d3.select(this);
//port.attr("y",(y+13*i)-5).attr("x",x);
port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
}); });
} }
thisNode.selectAll("text.node_label").text(function(d,i){ thisNode.selectAll("text.red-ui-flow-node-label").text(function(d,i){
var l = ""; var l = "";
if (d._def.label) { if (d._def.label) {
l = d._def.label; l = d._def.label;
@ -2962,10 +2943,10 @@ RED.view = (function() {
} }
s = " "+s; s = " "+s;
} }
return "node_label"+(d._def.align?" node_label_"+d._def.align:"")+s; return "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+s;
}).classed("hide",hideLabel); }).classed("hide",hideLabel);
if (d._def.icon) { if (d._def.icon) {
var icon = thisNode.select(".node_icon"); var icon = thisNode.select(".red-ui-flow-node-icon");
var faIcon = thisNode.select(".fa-lg"); var faIcon = thisNode.select(".fa-lg");
var current_url; var current_url;
if (!icon.empty()) { if (!icon.empty()) {
@ -2980,45 +2961,45 @@ RED.view = (function() {
} else { } else {
faIcon.remove(); faIcon.remove();
} }
var iconGroup = thisNode.select(".node_icon_group"); var iconGroup = thisNode.select(".red-ui-flow-node-icon-group");
createIconAttributes(new_url, iconGroup, d); createIconAttributes(new_url, iconGroup, d);
} }
} }
thisNode.selectAll(".red-ui-view-node-changed") thisNode.selectAll(".red-ui-flow-node-changed")
.attr("transform",function(d){return "translate("+(d.w-10)+", -2)"}) .attr("transform",function(d){return "translate("+(d.w-10)+", -2)"})
.classed("hide",function(d) { return !(d.changed||d.moved); }); .classed("hide",function(d) { return !(d.changed||d.moved); });
thisNode.selectAll(".red-ui-view-node-error") thisNode.selectAll(".red-ui-flow-node-error")
.attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"}) .attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"})
.classed("hide",function(d) { return d.valid; }); .classed("hide",function(d) { return d.valid; });
thisNode.selectAll(".port_input").each(function(d,i) { thisNode.selectAll(".red-ui-flow-port-input").each(function(d,i) {
var port = d3.select(this); var port = d3.select(this);
port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";}) port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";})
}); });
thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;}); thisNode.selectAll(".red-ui-flow-node-icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
thisNode.selectAll(".node_icon_shade").attr("height",function(d){return d.h;}); thisNode.selectAll(".red-ui-flow-node-icon-shade").attr("height",function(d){return d.h;});
thisNode.selectAll(".node_icon_shade_border").attr("d", function (d) { thisNode.selectAll(".red-ui-flow-node-icon-shade-border").attr("d", function (d) {
return "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2); return "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2);
}); });
thisNode.selectAll(".fa-lg").attr("y",function(d){return (d.h+13)/2;}); thisNode.selectAll(".fa-lg").attr("y",function(d){return (d.h+13)/2;});
thisNode.selectAll(".node_button").attr("opacity",function(d) { thisNode.selectAll(".red-ui-flow-node-button").attr("opacity",function(d) {
return (!isButtonEnabled(d))?0.4:1 return (!isButtonEnabled(d))?0.4:1
}); });
thisNode.selectAll(".node_button_button").attr("cursor",function(d) { thisNode.selectAll(".red-ui-flow-node-button-button").attr("cursor",function(d) {
return (!isButtonEnabled(d))?"":"pointer"; return (!isButtonEnabled(d))?"":"pointer";
}); });
thisNode.selectAll(".node_button").attr("transform",function(d){ thisNode.selectAll(".red-ui-flow-node-button").attr("transform",function(d){
var x = d._def.align == "right"?d.w-6:-25; var x = d._def.align == "right"?d.w-6:-25;
if (d._def.button.toggle && !d[d._def.button.toggle]) { if (d._def.button.toggle && !d[d._def.button.toggle]) {
x = x - (d._def.align == "right"?8:-8); x = x - (d._def.align == "right"?8:-8);
} }
return "translate("+x+",2)"; return "translate("+x+",2)";
}); });
thisNode.selectAll(".node_button rect").attr("fill-opacity",function(d){ thisNode.selectAll(".red-ui-flow-node-button rect").attr("fill-opacity",function(d){
if (d._def.button.toggle) { if (d._def.button.toggle) {
return d[d._def.button.toggle]?1:0.2; return d[d._def.button.toggle]?1:0.2;
} }
@ -3027,64 +3008,47 @@ RED.view = (function() {
if (d._def.button && (typeof d._def.button.visible === "function")) { // is defined and a function... if (d._def.button && (typeof d._def.button.visible === "function")) { // is defined and a function...
if (d._def.button.visible.call(d) === false) { if (d._def.button.visible.call(d) === false) {
thisNode.selectAll(".node_button").style("display","none"); thisNode.selectAll(".red-ui-flow-node-button").style("display","none");
} }
else { else {
thisNode.selectAll(".node_button").style("display","inherit"); thisNode.selectAll(".red-ui-flow-node-button").style("display","inherit");
} }
} }
//thisNode.selectAll(".node_right_button").attr("transform",function(d){return "translate("+(d.w - d._def.button.width.call(d))+","+0+")";}).attr("fill",function(d) { // thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
// return typeof d._def.button.color === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color) // thisNode.selectAll("text.node_badge_label").text(function(d,i) {
//}); // if (d._def.badge) {
// if (typeof d._def.badge == "function") {
thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";}); // try {
thisNode.selectAll("text.node_badge_label").text(function(d,i) { // return d._def.badge.call(d);
if (d._def.badge) { // } catch(err) {
if (typeof d._def.badge == "function") { // console.log("Definition error: "+d.type+".badge",err);
try { // return "";
return d._def.badge.call(d); // }
} catch(err) { // } else {
console.log("Definition error: "+d.type+".badge",err); // return d._def.badge;
return ""; // }
} // }
} else { // return "";
return d._def.badge; // });
}
}
return "";
});
} }
if (!showStatus || !d.status) { if (!showStatus || !d.status) {
thisNode.selectAll(".node_status_group").style("display","none"); thisNode.selectAll(".red-ui-flow-node-status-group").style("display","none");
} else { } else {
var fill = status_colours[d.status.fill]; // Only allow our colours for now var fill = status_colours[d.status.fill]; // Only allow our colours for now
if (d.status.shape == null && fill == null) { if (d.status.shape == null && fill == null) {
thisNode.selectAll(".node_status").style("display","none"); thisNode.selectAll(".red-ui-flow-node-status").style("display","none");
thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(-14,"+(d.h+3)+")"); thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline").attr("transform","translate(-14,"+(d.h+3)+")");
} else { } else {
thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")"); thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
var style; var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
if (d.status.shape == null || d.status.shape == "dot") { thisNode.selectAll(".red-ui-flow-node-status").attr("class","red-ui-flow-node-status "+statusClass);
style = {
display: "inline",
fill: fill,
stroke: fill
};
} else if (d.status.shape == "ring" ){
style = {
display: "inline",
fill: "#fff",
stroke: fill
}
}
thisNode.selectAll(".node_status").style(style);
} }
if (d.status.text) { if (d.status.text) {
thisNode.selectAll(".node_status_label").text(d.status.text); thisNode.selectAll(".red-ui-flow-node-status-label").text(d.status.text);
} else { } else {
thisNode.selectAll(".node_status_label").text(""); thisNode.selectAll(".red-ui-flow-node-status-label").text("");
} }
} }
@ -3092,19 +3056,19 @@ RED.view = (function() {
} }
}); });
var link = linkLayer.selectAll(".link").data( var link = linkLayer.selectAll(".red-ui-flow-link").data(
activeLinks, activeLinks,
function(d) { function(d) {
return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i; return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
} }
); );
var linkEnter = link.enter().insert("g",".node").attr("class","link"); var linkEnter = link.enter().insert("g",".red-ui-flow-node").attr("class","red-ui-flow-link");
linkEnter.each(function(d,i) { linkEnter.each(function(d,i) {
var l = d3.select(this); var l = d3.select(this);
d.added = true; d.added = true;
l.append("svg:path").attr("class","link_background link_path") l.append("svg:path").attr("class","red-ui-flow-link-background red-ui-flow-link-path")
.classed("link_link", function(d) { return d.link }) .classed("red-ui-flow-link-link", function(d) { return d.link })
.on("mousedown",function(d) { .on("mousedown",function(d) {
mousedown_link = d; mousedown_link = d;
clearSelection(); clearSelection();
@ -3131,19 +3095,19 @@ RED.view = (function() {
showTouchMenu(obj,pos); showTouchMenu(obj,pos);
},touchLongPressTimeout); },touchLongPressTimeout);
}) })
l.append("svg:path").attr("class","link_outline link_path"); l.append("svg:path").attr("class","red-ui-flow-link-outline red-ui-flow-link-path");
l.append("svg:path").attr("class","link_line link_path") l.append("svg:path").attr("class","red-ui-flow-link-line red-ui-flow-link-path")
.classed("link_link", function(d) { return d.link }) .classed("red-ui-flow-link-link", function(d) { return d.link })
.classed("link_subflow", function(d) { return !d.link && activeSubflow }); .classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
}); });
link.exit().remove(); link.exit().remove();
var links = linkLayer.selectAll(".link_path"); var links = linkLayer.selectAll(".red-ui-flow-link-path");
links.each(function(d) { links.each(function(d) {
var link = d3.select(this); var link = d3.select(this);
if (d.added || d===selected_link || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) { if (d.added || d===selected_link || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) {
if (/link_line/.test(link.attr('class'))) { if (/red-ui-flow-link-line/.test(link.attr('class'))) {
link.classed("link_subflow", function(d) { return !d.link && activeSubflow }); link.classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
} }
link.attr("d",function(d){ link.attr("d",function(d){
var numOutputs = d.source.outputs || 1; var numOutputs = d.source.outputs || 1;
@ -3167,19 +3131,19 @@ RED.view = (function() {
} }
}) })
link.classed("link_selected", function(d) { return d === selected_link || d.selected; }); link.classed("red-ui-flow-link-selected", function(d) { return d === selected_link || d.selected; });
link.classed("link_unknown",function(d) { link.classed("red-ui-flow-link-unknown",function(d) {
delete d.added; delete d.added;
return d.target.type == "unknown" || d.source.type == "unknown" return d.target.type == "unknown" || d.source.type == "unknown"
}); });
var offLinks = linkLayer.selectAll(".link_flow_link_g").data( var offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow").data(
activeFlowLinks, activeFlowLinks,
function(d) { function(d) {
return d.node.id+":"+d.refresh return d.node.id+":"+d.refresh
} }
); );
var offLinksEnter = offLinks.enter().insert("g",".node").attr("class","link_flow_link_g"); var offLinksEnter = offLinks.enter().insert("g",".red-ui-flow-node").attr("class","red-ui-flow-link-off-flow");
offLinksEnter.each(function(d,i) { offLinksEnter.each(function(d,i) {
var g = d3.select(this); var g = d3.select(this);
var s = 1; var s = 1;
@ -3190,8 +3154,7 @@ RED.view = (function() {
} }
var stemLength = s*30; var stemLength = s*30;
var branchLength = s*20; var branchLength = s*20;
var l = g.append("svg:path").attr("class","link_flow_link") var l = g.append("svg:path").attr("class","red-ui-flow-link-link").attr("d","M 0 0 h "+stemLength);
.attr("class","link_link").attr("d","M 0 0 h "+stemLength);
var links = d.links; var links = d.links;
var flows = Object.keys(links); var flows = Object.keys(links);
var tabOrder = RED.nodes.getWorkspaceOrder(); var tabOrder = RED.nodes.getWorkspaceOrder();
@ -3201,10 +3164,10 @@ RED.view = (function() {
var linkWidth = 10; var linkWidth = 10;
var h = node_height; var h = node_height;
var y = -(flows.length-1)*h/2; var y = -(flows.length-1)*h/2;
var linkGroups = g.selectAll(".link_group").data(flows); var linkGroups = g.selectAll(".red-ui-flow-link-group").data(flows);
var enterLinkGroups = linkGroups.enter().append("g").attr("class","link_group") var enterLinkGroups = linkGroups.enter().append("g").attr("class","red-ui-flow-link-group")
.on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',true)}) .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',true)})
.on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',false)}) .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',false)})
.on('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); }) .on('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); })
.on('mouseup', function(f) { .on('mouseup', function(f) {
if (mouse_mode !== 0) { if (mouse_mode !== 0) {
@ -3223,8 +3186,8 @@ RED.view = (function() {
}); });
enterLinkGroups.each(function(f) { enterLinkGroups.each(function(f) {
var linkG = d3.select(this); var linkG = d3.select(this);
linkG.append("svg:path").attr("class","link_flow_link") linkG.append("svg:path")
.attr("class","link_link") .attr("class","red-ui-flow-link-link")
.attr("d", .attr("d",
"M "+stemLength+" 0 "+ "M "+stemLength+" 0 "+
"C "+(stemLength+(1.7*branchLength))+" "+0+ "C "+(stemLength+(1.7*branchLength))+" "+0+
@ -3232,7 +3195,7 @@ RED.view = (function() {
(stemLength+branchLength*1.5)+" "+y+" " (stemLength+branchLength*1.5)+" "+y+" "
); );
linkG.append("svg:path") linkG.append("svg:path")
.attr("class","link_port") .attr("class","red-ui-flow-link-port")
.attr("d", .attr("d",
"M "+(stemLength+branchLength*1.5+s*(linkWidth+7))+" "+(y-12)+" "+ "M "+(stemLength+branchLength*1.5+s*(linkWidth+7))+" "+(y-12)+" "+
"h "+(-s*linkWidth)+" "+ "h "+(-s*linkWidth)+" "+
@ -3242,14 +3205,14 @@ RED.view = (function() {
"h "+(s*linkWidth) "h "+(s*linkWidth)
); );
linkG.append("svg:path") linkG.append("svg:path")
.attr("class","link_port") .attr("class","red-ui-flow-link-port")
.attr("d", .attr("d",
"M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y-12)+" "+ "M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y-12)+" "+
"h "+(s*(linkWidth*3))+" "+ "h "+(s*(linkWidth*3))+" "+
"M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y+12)+" "+ "M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y+12)+" "+
"h "+(s*(linkWidth*3)) "h "+(s*(linkWidth*3))
).style("stroke-dasharray","12 3 8 4 3"); ).style("stroke-dasharray","12 3 8 4 3");
linkG.append("rect").attr("class","port link_port") linkG.append("rect").attr("class","red-ui-flow-port red-ui-flow-link-port")
.attr("x",stemLength+branchLength*1.5-4+(s*4)) .attr("x",stemLength+branchLength*1.5-4+(s*4))
.attr("y",y-4) .attr("y",y-4)
.attr("rx",2) .attr("rx",2)
@ -3269,7 +3232,7 @@ RED.view = (function() {
label = tab.label || tab.id; label = tab.label || tab.id;
} }
linkG.append("svg:text") linkG.append("svg:text")
.attr("class","port_label") .attr("class","red-ui-flow-port-label")
.attr("x",stemLength+branchLength*1.5+(s*15)) .attr("x",stemLength+branchLength*1.5+(s*15))
.attr("y",y+1) .attr("y",y+1)
.style("font-size","10px") .style("font-size","10px")
@ -3281,7 +3244,7 @@ RED.view = (function() {
linkGroups.exit().remove(); linkGroups.exit().remove();
}); });
offLinks.exit().remove(); offLinks.exit().remove();
offLinks = linkLayer.selectAll(".link_flow_link_g"); offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow");
offLinks.each(function(d) { offLinks.each(function(d) {
var s = 1; var s = 1;
if (d.node.type === "link in") { if (d.node.type === "link in") {
@ -3294,12 +3257,12 @@ RED.view = (function() {
} else { } else {
// JOINING - unselect any selected links // JOINING - unselect any selected links
linkLayer.selectAll(".link_selected").data( linkLayer.selectAll(".red-ui-flow-link-selected").data(
activeLinks, activeLinks,
function(d) { function(d) {
return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i; return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
} }
).classed("link_selected", false); ).classed("red-ui-flow-link-selected", false);
} }
RED.view.navigator.refresh(); RED.view.navigator.refresh();
if (d3.event) { if (d3.event) {
@ -3543,7 +3506,7 @@ RED.view = (function() {
}, },
getLinksAtPoint: function(x,y) { getLinksAtPoint: function(x,y) {
var result = []; var result = [];
var links = outer.selectAll(".link_background")[0]; var links = outer.selectAll(".red-ui-flow-link-background")[0];
for (var i=0;i<links.length;i++) { for (var i=0;i<links.length;i++) {
var bb = links[i].getBBox(); var bb = links[i].getBBox();
if (x >= bb.x && y >= bb.y && x <= bb.x+bb.width && y <= bb.y+bb.height) { if (x >= bb.x && y >= bb.y && x <= bb.x+bb.width && y <= bb.y+bb.height) {

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

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

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

@ -52,175 +52,166 @@
@include shade; @include shade;
z-index: 15; z-index: 15;
} }
.red-ui-editor,
a { .red-ui-editor-dialog,
color: #0088cc; .red-ui-menu,
text-decoration: none; .red-ui-popover,
} .red-ui-typedInput-options,
.red-ui-icon-picker {
a:hover, a {
a:focus { text-decoration: none;
color: #005580; }
text-decoration: underline; a:hover,
} a:focus {
text-decoration: none;
p { }
margin: 0 0 10px;
}
small {
font-size: 85%;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
cite {
font-style: normal;
}
ul,
ol {
padding: 0;
margin: 0 0 10px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
li {
line-height: 20px;
}
dl {
margin-bottom: 20px;
}
dt,
dd {
line-height: 20px;
}
dt {
font-weight: bold;
}
dd {
margin-left: 10px;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #ffffff;
}
i.spinner {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
margin-top: 0px;
background: url(images/spin.svg) no-repeat 50% 50%;
background-size: contain
}
code, pre {
padding: 0 3px 2px;
font-family: $monospace-font;
font-size: 14px;
color: #333333;
border-radius: 1px;
}
code {
padding: 0px 3px 2px 3px;
margin: 1px;
color: #AD1625;
white-space: nowrap;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 2px;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 2px;
}
pre code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.hide {
display: none;
}
.show {
display: block;
}
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
blockquote {
padding: 0 0 0 15px;
margin: 0 0 20px;
border-left: 4px solid #ddd;
p { p {
font-size: 14px; margin: 0 0 10px;
font-weight: inherit; }
line-height: 1.25;
color: #777; small {
font-size: 85%;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
cite {
font-style: normal;
}
ul,
ol {
padding: 0;
margin: 0 0 10px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0; margin-bottom: 0;
} }
}
table { li {
max-width: 100%; line-height: 20px;
background-color: transparent; }
border-collapse: collapse; dl {
border-spacing: 0; margin-bottom: 20px;
}
dt,
dd {
line-height: 20px;
}
dt {
font-weight: bold;
}
dd {
margin-left: 10px;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid $tertiary-border-color;
}
i.spinner {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
margin-top: 0px;
background: url(images/spin.svg) no-repeat 50% 50%;
background-size: contain
}
code {
font-family: $monospace-font;
font-size: $primary-font-size;
padding: 0px;
margin: 1px;
color: $info-text-code-color;
white-space: nowrap;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
background-color:$tertiary-background;
border: 1px solid $tertiary-border-color;
border-radius: 2px;
}
pre code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.hide {
display: none;
}
.show {
display: block;
}
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
blockquote {
padding: 0 0 0 15px;
margin: 0 0 20px;
border-left: 4px solid $secondary-border-color;
color: $secondary-text-color;
p {
font-size: 14px;
font-weight: inherit;
line-height: 1.25;
margin-bottom: 0;
}
}
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
} }
.red-ui-component-spinner { .red-ui-component-spinner {
@ -231,7 +222,7 @@ table {
right: 1px; right: 1px;
text-align: center; text-align: center;
padding: 40px; padding: 40px;
background: white; background: $secondary-background;
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -245,14 +236,14 @@ table {
width: 80px; width: 80px;
} }
&.red-ui-component-spinner-sidebar { &.red-ui-component-spinner-sidebar {
background: white; background: $secondary-background;
padding:0; padding:0;
img { img {
width: 40px; width: 40px;
} }
} }
&.projects-version-control-spinner-sidebar { &.projects-version-control-spinner-sidebar {
background: white; background: $secondary-background;
padding:0; padding:0;
img { img {
width: 20px; width: 20px;

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

@ -18,111 +18,210 @@ $primary-font: 'Helvetica Neue', Arial, Helvetica, sans-serif;
$primary-font-size: 14px; $primary-font-size: 14px;
$monospace-font: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace; $monospace-font: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace;
$primary-background: #f3f3f3;//#0ff;
$primary-background: #f3f3f3; $secondary-background: #fff;//#ff0;
$primary-text-color: #555; $secondary-background-selected: #efefef;//#e9e900;
$secondary-text-color: #999; $secondary-background-inactive: #f0f0f0;//#f0f000;
$secondary-background-hover: #ddd;//#dd0;
$secondary-background-disabled: #f9f9f9;//#fafa0;
$form-background: #fff; $tertiary-background: #f7f7f7;//#f0f;
$form-placeholder-color: #bbbbbb; $shadow: rgba(0, 0, 0, 0.2);
// Main body text
$primary-text-color: #555;//#0f0;
// UI control label text
$secondary-text-color: #888;//#00f;
$secondary-text-color-focus: #999;//#009;
$secondary-text-color-hover: #666;//#006;
$secondary-text-color-active: #666;//#006;
$secondary-text-color-selected: #AAA;//#00A;
$secondary-text-color-inactive: #666;//#006;
$secondary-text-color-disabled: #bbb;//#00C;
$secondary-text-color-disabled-active: #999;//#009;
$secondary-text-color-disabled-inactive: #aaa;//#00A;
// Sub label text
$tertiary-text-color: #aaa;//#90f;
// Heading text
$header-text-color: #444;//#f00;
$text-color-warning: #AD1625;
$text-color-green: #3a3;
$primary-border-color: #bbbbbb;//#f00;
$secondary-border-color: #dddddd;//#0f0;
$tertiary-border-color: #ccc;//#00f;
$form-background: $secondary-background;
$form-placeholder-color: $tertiary-text-color;
$form-text-color: $primary-text-color; $form-text-color: $primary-text-color;
$form-text-color-disabled: $secondary-text-color-disabled;
$form-input-focus-color: rgba(85,150,230,0.8); $form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc; $form-input-border-color: $tertiary-border-color;
$form-input-border-selected-color: #aaa; $form-input-border-selected-color: #aaa;//#f0f;
$form-input-border-error-color: rgb(214, 97, 95); $form-input-border-error-color: rgb(214, 97, 95);
$form-input-background: #fff; $form-input-background: $secondary-background;
$form-input-background-disabled: #eee; $form-input-background-disabled: $secondary-background-disabled;
$form-button-background: $secondary-background-selected;
$list-item-color: #666; $form-tips-background: #ffe;
$list-item-background: #fff;
$list-item-background-hover: #f3f3f3;
$list-item-background-active: #efefef;
$list-item-background-selected: #eee;
$list-item-border-selected: #999;
$primary-border-color: #bbbbbb;
$secondary-border-color: #dddddd;
$tab-text-color-active: #555; $text-editor-color: #4D4D4C;//#00f;
$tab-text-color-inactive: #666; $text-editor-background: $secondary-background;
$tab-text-color-disabled-active: #999; $text-editor-color-disabled: $secondary-text-color-inactive;
$tab-text-color-disabled-inactive: #aaa; $text-editor-background-disabled: $secondary-background-disabled;
$tab-badge-color: #aaa; $text-editor-gutter-background: #f6f6f6;//#ee0;
$tab-background: #fff; $text-editor-gutter-color: #777;//#00e;
$tab-background-active: #fff; $text-editor-gutter-active-line-background: #dcdcdc;//#dd0;
$tab-background-selected: #f9f9f9; $text-editor-active-line-background: #efefef;//#ee0;
$tab-background-inactive: #f0f0f0; $text-editor-selection-background: #D6D6D6;//#e0e;
$tab-background-hover: #ddd;
$event-log-background: #444;
$event-log-color: #dd9;
$event-log-active-line-background: #333;
$event-log-selection-background: #999;
$list-item-color: $primary-text-color;
$list-item-background: $secondary-background;
$list-item-background-disabled: $secondary-background-inactive;
$list-item-background-hover: $secondary-background-hover;
$list-item-background-selected: $secondary-background-selected;
$list-item-border-selected: $secondary-text-color-selected;
$tab-text-color-active: $header-text-color;
$tab-text-color-inactive: $secondary-text-color-inactive;
$tab-text-color-disabled-active: $secondary-text-color-disabled-active;
$tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
$tab-badge-color: $tertiary-text-color;
$tab-background: $secondary-background;
$tab-background-active: $secondary-background;
$tab-background-selected: $secondary-background-selected;
$tab-background-inactive: $secondary-background-inactive;
$tab-background-hover: $secondary-background-hover;
$palette-header-background: $primary-background; $palette-header-background: $primary-background;
$palette-header-color: #444; $palette-header-color: $header-text-color;
$palette-content-background: $secondary-background;
$workspace-background: #fff;
$workspace-grid-color: #eee;
$workspace-button-background: #fff; $workspace-button-background: $secondary-background;
$workspace-button-background-hover: #ddd; $workspace-button-background-hover: $secondary-background-hover;
$workspace-button-background-active: #efefef; $workspace-button-background-active: $secondary-background-selected;
$workspace-button-color: #888;
$workspace-button-color-disabled: #ccc;
$workspace-button-color-focus: #999;
$workspace-button-color-hover: #666;
$workspace-button-color-active: #666;
$workspace-button-color-selected: #AAA;
$workspace-button-toggle-color: #999; $workspace-button-color: $secondary-text-color;
$workspace-button-toggle-color-selected: #888; $workspace-button-color-disabled: $secondary-text-color-disabled;
$workspace-button-toggle-color-disabled: #ddd; $workspace-button-color-focus: $secondary-text-color-focus;
$workspace-button-color-hover: $secondary-text-color-hover;
$workspace-button-color-active: $secondary-text-color-active;
$workspace-button-color-selected: $secondary-text-color-selected;
$workspace-button-color-focus-outline: rgba(85,150,230,0.2); $workspace-button-color-primary: #eee;
$workspace-button-background-primary: #AD1625;
$workspace-button-background-primary-hover: #6E0A1E;
$typedInput-button-background: #efefef; $workspace-button-color-focus-outline: $form-input-border-color;
$typedInput-button-background-hover: #ddd;
$typedInput-button-background-active: #ddd;
$editor-button-color-primary: #eee;
$editor-button-background-primary: #AD1625;
$editor-button-background-primary-hover: #6E0A1E;
$editor-button-color: #999;
$editor-button-background: #fff;
$shade-color: rgba(160,160,160,0.5); $shade-color: rgba(160,160,160,0.5);
$popover-background: #333; $popover-background: #333;
$popover-color: #eee; $popover-color: #eee;
$popover-button-border-color: #bbb;
$popover-button-border-color-hover: #666;
$diff-text-header-color: $secondary-text-color;
$diff-text-header-background: #ffd;
$diff-text-header-background-hover: #ffc;
$diff-state-added: #009900; $diff-state-added: #009900;
$diff-state-deleted: #f80000; $diff-state-deleted: #f80000;
$diff-state-changed: #f89406; $diff-state-changed: #f89406;
$diff-state-changed-background: #fff2e1;
$diff-state-unchanged: #bbb; $diff-state-unchanged: #bbb;
$diff-state-unchanged-background: #fff;
$diff-state-conflicted: purple; $diff-state-conflicted: purple;
$diff-state-moved: #3f81b3; $diff-state-moved: #3f81b3;
$diff-state-conflict: #9b45ce; $diff-state-conflict: #9b45ce;
$diff-state-conflict-background: #ffdad4;
$menuBackground: #f3f3f3; $diff-state-added-background: #e7ffe3;
$menuDivider: #e5e5e5; $diff-state-added-border: #b8daad;
$menuColor: #444; $diff-state-added-header-background: #c0f6c0;
$menuActiveColor: #ffffff; $diff-state-added-header-border: #aaeeaa;
$menuActiveBackground: #777;
$menuDisabledColor: #999;
$menuHoverColor: #ffffff;
$menuHoverBackground: #999;
$menuCaret: #e0e0e0;
$diff-state-deleted-background: #ffe1e1;
$diff-state-deleted-border: #e4bcbc;
$diff-state-deleted-header-background: #ffcccc;
$diff-state-deleted-header-border: #eebbbb;
$keyboard-help-key-border: #ddd; $diff-merge-header-color: #800080;
$keyboard-help-key-background: #f6f6f6; $diff-merge-header-background: #e5f9ff;
$keyboard-help-key-shadow: #999; $diff-merge-header-border-color: #b2edff;
$menuBackground: $primary-background;
$menuDivider: $secondary-border-color;
$menuColor: $primary-text-color;
$menuActiveColor: $secondary-text-color-active;
$menuActiveBackground: $secondary-background-hover;
$menuDisabledColor: $secondary-text-color-disabled;
$menuHoverColor: $secondary-text-color-hover;
$menuHoverBackground: $secondary-background-hover;
$menuCaret: $tertiary-text-color;
$view-navigator-background: rgba(245,245,245,0.8); $view-navigator-background: rgba(245,245,245,0.8);
$view-lasso-stroke: #ff7f0e; $view-lasso-stroke: #ff7f0e;
$view-lasso-fill: rgba(20,125,255,0.1); $view-lasso-fill: rgba(20,125,255,0.1);
$view-background: $secondary-background;
$view-grid-color: #eee;
$node-label-color: #333;
$node-border: #999;
$node-border-unknown: #f33;
$node-border-placeholder: #aaa;
$node-background-placeholder: #eee;
$node-port-background: #d9d9d9;
$node-port-background-hover: #eee;
$node-icon-color: #fff;
$node-icon-background-color: rgba(0,0,0,0.05);
$node-icon-background-color-fill: #000;
$node-icon-background-color-opacity: 0.05;
$node-icon-border-color: #000;
$node-icon-border-color-opacity: 0.1;
$node-link-port-background: #eee;
$node-status-error-border: rgb(145, 16, 2);
$node-status-error-background: rgb(255, 102, 0);
$node-status-changed-border: rgb(28, 102, 140);
$node-status-changed-background: rgb(0, 188, 255);
$node-status-colors: (
red: #c00,
green: #5a8,
yellow: #F9DF31,
blue: #53A3F3,
grey: #d3d3d3
);
$node-selected-color: #ff7f0e; $node-selected-color: #ff7f0e;
$port-selected-color: #ff7f0e; $port-selected-color: #ff7f0e;
$link-color: #888; $link-color: #888;
$link-link-color: #ccc; $link-link-color: #ccc;
$link-link-active-color: #ff7f0e; $link-link-active-color: #ff7f0e;
@ -130,3 +229,56 @@ $link-subflow-color: #bbb;
$link-unknown-color: #f00; $link-unknown-color: #f00;
$clipboard-textarea-background: #F3E7E7; $clipboard-textarea-background: #F3E7E7;
$deploy-button-color: #eee;
$deploy-button-color-active: #ccc;
$deploy-button-color-disabled: #999;
$deploy-button-background: #8C101C;
$deploy-button-background-hover: #6E0A1E;
$deploy-button-background-active: #4C0A17;
$deploy-button-background-disabled: #444;
$deploy-button-background-disabled-hover: #555;
$header-background: #000;
$header-button-background-active: #121212;
$header-menu-color: #C7C7C7;
$header-menu-color-disabled: #666;
$header-menu-heading-color: #fff;
$header-menu-sublabel-color: #aeaeae;
$header-menu-background: #121212;
$header-menu-item-hover: #323232;
$header-menu-item-border-active: #777677;
$headerMenuItemDivider: #464646;
$headerMenuCaret: #C7C7C7;
$vcCommitShaColor: #c38888;
$info-text-code-color: #AD1625;
$info-text-link-color: #0088cc;
$dnd-background: rgba(0,0,0,0.3);
$dnd-color: #fff;
$notification-border-default: #325C80;
$notification-border-success: #4B8400;
$notification-border-warning: #D74108;
$notification-border-error: $text-color-warning;
$debug-message-background: $secondary-background;
$debug-message-background-hover: $secondary-background-selected;
$debug-message-text-color: #333;
$debug-message-text-color-meta: #a66;
$debug-message-text-color-object-key: #792e90;
$debug-message-text-color-msg-type-other: #2033d6;
$debug-message-text-color-msg-type-string: #b72828;
$debug-message-text-color-msg-type-null: #666;
$debug-message-text-color-msg-type-meta: #666;
$debug-message-text-color-msg-type-number: #2033d6;
$debug-message-border: #eee;
$debug-message-border-hover: #999;
$debug-message-border-warning: #ffdf9d;
$debug-message-border-error: #f99;

86
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: #fff; background: $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,10 +38,10 @@
left: 0px; left: 0px;
right: 0px; right: 0px;
z-index: 20; z-index: 20;
background: #f9f9f9; background: $tertiary-background;
padding: 10px; padding: 10px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid $secondary-border-color;
box-shadow: 0 2px 6px rgba(0,0,0,0.1); box-shadow: 0 2px 6px $shadow;
} }
.red-ui-debug-filter-row { .red-ui-debug-filter-row {
.red-ui-nodeList { .red-ui-nodeList {
@ -51,16 +51,16 @@
.red-ui-debug-msg { .red-ui-debug-msg {
position: relative; position: relative;
border-bottom: 1px solid #eee; border-bottom: 1px solid $debug-message-border;
border-left: 8px solid #eee; border-left: 8px solid $debug-message-border;
border-right: 8px solid #eee; border-right: 8px solid $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: #999; border-right-color: $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;
} }
@ -74,7 +74,7 @@
display: inline-block; display: inline-block;
} }
&:hover { &:hover {
background: #f3f3f3; background: $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;
@ -104,32 +104,24 @@
border-radius: 1px; border-radius: 1px;
padding: 0 3px; padding: 0 3px;
min-width: 18px; min-width: 18px;
i.fa-terminal {
// terminal icon is a bit thin, so darken its color for better contrast
color: darken($editor-button-color, 30%) !important;
}
&.selected {
color: darken($workspace-button-color-selected, 10%) !important;
background: darken($workspace-button-background-active,10%);
}
} }
} }
.red-ui-debug-msg-meta { .red-ui-debug-msg-meta {
background: #fff; background: $debug-message-background;
font-size: 11px; font-size: 11px;
color: #707070; color: $secondary-text-color-inactive;
} }
.red-ui-debug-msg-date { .red-ui-debug-msg-date {
padding: 1px 5px 1px 1px; padding: 1px 5px 1px 1px;
} }
.red-ui-debug-msg-topic { .red-ui-debug-msg-topic {
display: block; display: block;
color: #a66; color: $debug-message-text-color-meta;
} }
.red-ui-debug-msg-name { .red-ui-debug-msg-name {
padding: 1px 5px; padding: 1px 5px;
color: #707070; color: $secondary-text-color-inactive;
} }
.red-ui-debug-msg-tools { .red-ui-debug-msg-tools {
position: absolute; position: absolute;
@ -145,38 +137,38 @@
.red-ui-debug-msg-payload { .red-ui-debug-msg-payload {
display: block; display: block;
padding: 2px; padding: 2px;
background: #fff; background: $debug-message-background;
font-family: $monospace-font;
font-size: 13px !important;
} }
.red-ui-debug-msg-level-log { .red-ui-debug-msg-level-log {
border-left-color: #eee; border-left-color: $debug-message-border;
border-right-color: #eee; border-right-color: $debug-message-border;
} }
.red-ui-debug-msg-level-30 { .red-ui-debug-msg-level-30 {
border-left-color: #ffdf9d; border-left-color: $debug-message-border-warning;
border-right-color: #ffdf9d; border-right-color: $debug-message-border-warning;
} }
.red-ui-debug-msg-level-20 { .red-ui-debug-msg-level-20 {
border-left-color: #f99; border-left-color: $debug-message-border-error;
border-right-color: #f99; border-right-color: $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: #333; color: $debug-message-text-color;
font-family: $monospace-font;
font-size: 13px !important;
line-height: 1.3em; line-height: 1.3em;
} }
.red-ui-debug-msg-object-key { .red-ui-debug-msg-object-key {
color: #792e90; color: $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: #666; color: $secondary-text-color;
font-size: 1em; font-size: 1em;
width: 1em; width: 1em;
text-align: center; text-align: center;
@ -217,11 +209,11 @@
margin: 0 0 0 -1em; margin: 0 0 0 -1em;
} }
.red-ui-debug-msg-type-other { color: #2033d6; } .red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
.red-ui-debug-msg-type-string { color: #b72828; } .red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
.red-ui-debug-msg-type-null { color: #666; font-style: italic;} .red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
.red-ui-debug-msg-type-meta { color: #666; 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-number { color: #2033d6; }; .red-ui-debug-msg-type-number { color: $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-row { .red-ui-debug-msg-row {
@ -229,30 +221,20 @@
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: #f6f6f6; background: $list-item-border-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: #b72828 !important; color:$secondary-text-color-hover;
} }
.red-ui-debug-msg-buffer-opts a { .red-ui-debug-msg-buffer-opts {
font-size: 9px;
color: #bbb;
border: 1px solid #bbb;
border-radius: 2px;
padding: 2px 5px;
margin-left: 5px; margin-left: 5px;
} }
.red-ui-debug-msg-buffer-opts a:hover {
text-decoration: none;
color: #999;
border: 1px solid #999;
background: #f3f3f3;
}
.red-ui-debug-msg-buffer-raw > .red-ui-debug-msg-string-rows { .red-ui-debug-msg-buffer-raw > .red-ui-debug-msg-string-rows {
display: none; display: none;
} }

149
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: #f9f9f9; background: $tertiary-background;
} }
.red-ui-diff-list { .red-ui-diff-list {
li { li {
background: #f9f9f9; background: $tertiary-background;
padding: 0px; padding: 0px;
border: none; border: none;
min-height: 0; min-height: 0;
@ -62,7 +62,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 50%; width: 50%;
background: #f9f9f9; background: $tertiary-background;
text-align: center; text-align: center;
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
border-color:$secondary-border-color; border-color:$secondary-border-color;
@ -75,16 +75,16 @@
.red-ui-diff-dialog-toolbar { .red-ui-diff-dialog-toolbar {
box-sizing: border-box; box-sizing: border-box;
color: #666; color: $secondary-text-color;
text-align: right; text-align: right;
padding: 8px 10px; padding: 8px 10px;
background: #f3f3f3; background: $primary-background;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
white-space: nowrap; white-space: nowrap;
} }
.red-ui-diff-list-flow { .red-ui-diff-list-flow {
background: #fff; background: $secondary-background;
border: 1px solid #ddd; border: 1px solid $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 $secondary-border-color; border-top: 1px solid $tertiary-border-color;
} }
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $tertiary-border-color;
} }
&.collapsed { &.collapsed {
@ -150,7 +150,7 @@
width: 100%; width: 100%;
} }
td, th { td, th {
border-top: 1px solid #f3f3f3; border-top: 1px solid $secondary-border-color;
border-left: 1px solid $secondary-border-color; border-left: 1px solid $secondary-border-color;
&:first-child { &:first-child {
border-left: none; border-left: none;
@ -166,7 +166,7 @@
overflow:hidden; overflow:hidden;
} }
&:hover { &:hover {
background: #f9f9f9; background: $secondary-background-selected;
} }
} }
@ -211,9 +211,8 @@
.red-ui-diff-list-flow-title { .red-ui-diff-list-flow-title {
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
// background: #f6f6f6;
&:hover { &:hover {
background: #f9f9f9; background: $secondary-background-selected;
} }
} }
.red-ui-diff-list-flow-title-meta { .red-ui-diff-list-flow-title-meta {
@ -224,7 +223,7 @@
.red-ui-diff-list-node-header { .red-ui-diff-list-node-header {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #f9f9f9; background: $secondary-background-selected;
} }
} }
.red-ui-diff-list-node-icon { .red-ui-diff-list-node-icon {
@ -233,9 +232,9 @@
margin: 5px; margin: 5px;
width: 18px; width: 18px;
height: 15px; height: 15px;
background: #ddd; background: $form-input-background;
border-radius: 2px; border-radius: 2px;
border: 1px solid #999; border: 1px solid $node-border;
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -266,7 +265,6 @@
} }
} }
.red-ui-diff-status-deleted { .red-ui-diff-status-deleted {
//background: #fadddd;
cursor: default !important; cursor: default !important;
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-deleted; color: $diff-state-deleted;
@ -280,27 +278,23 @@
} }
} }
.red-ui-diff-status-added { .red-ui-diff-status-added {
//background: #eefaee;
cursor: default !important; cursor: default !important;
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-added; color: $diff-state-added;
} }
} }
.red-ui-diff-status-moved { .red-ui-diff-status-moved {
//background: #eefaee;
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-moved; color: $diff-state-moved;
} }
} }
.red-ui-diff-status-changed { .red-ui-diff-status-changed {
//background: #fff2ca;
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-changed; color: $diff-state-changed;
} }
} }
.red-ui-diff-status-unchanged { .red-ui-diff-status-unchanged {
//background: #fff2ca;
.red-ui-diff-status { .red-ui-diff-status {
color: $diff-state-unchanged; color: $diff-state-unchanged;
} }
@ -318,7 +312,7 @@
} }
.red-ui-diff-list-node-properties { .red-ui-diff-list-node-properties {
margin: 0; margin: 0;
color: #666; color: $primary-text-color;
} }
.red-ui-diff-status { .red-ui-diff-status {
display: inline-block; display: inline-block;
@ -366,12 +360,12 @@
position: relative; position: relative;
} }
.red-ui-diff-empty { .red-ui-diff-empty {
background: #f3f3f3; background: $secondary-background-disabled;
background: repeating-linear-gradient( background: repeating-linear-gradient(
20deg, 20deg,
#fff, #fff 5px, $secondary-background, $secondary-background 5px,
#f6f6f6 5px, $secondary-background-disabled 5px,
#f6f6f6 10px $secondary-background-disabled 10px
); );
} }
.red-ui-diff-list-node-cell:first-child { .red-ui-diff-list-node-cell:first-child {
@ -416,9 +410,6 @@
width: 30px; width: 30px;
text-align: center; text-align: center;
} }
& > li:not(:last-child) {
border-bottom: 1px solid #999;
}
} }
} }
@ -430,57 +421,60 @@
} }
.red-ui-diff-list-cell { .red-ui-diff-list-cell {
.red-ui-debug-msg-row:hover {
background: none;
}
&.red-ui-diff-status-changed { &.red-ui-diff-status-changed {
background: #fff2e1 !important; background: $diff-state-changed-background;
} }
&.red-ui-diff-status-conflict { &.red-ui-diff-status-conflict {
background: #ffdad4 !important; background: $diff-state-conflict-background;
} }
} }
.red-ui-diff-selectbox { label.red-ui-diff-selectbox {
position: absolute; position: absolute;
top:0; top:0;
right:0; right:0;
bottom:0; bottom:0;
width: 35px; width: 35px;
text-align: center; text-align: center;
border-left: 1px solid #eee; border-left: 1px solid $secondary-border-color;
margin:0; margin:0;
input.red-ui-diff-selectbox-input { input[type="radio"] {
margin-top: 8px; margin-top: 8px;
} }
&:hover { &:hover {
background: #f3f3f3; background: $secondary-background-hover;
} }
} }
.red-ui-diff-list-node-conflict.node-diff-select-remote { .red-ui-diff-list-node-conflict.node-diff-select-remote {
.red-ui-diff-list-node-remote { .red-ui-diff-list-node-remote {
background: #e7ffe3; background: $diff-state-added-background;
label { label {
border-left-color: #b8daad; border-left-color: $diff-state-added-border;
} }
} }
.red-ui-diff-list-node-local { .red-ui-diff-list-node-local {
background: #ffe1e1; background: $diff-state-deleted-background;
label { label {
border-left-color: #e4bcbc; border-left-color: $diff-state-deleted-border;
} }
} }
} }
.red-ui-diff-list-node-conflict.node-diff-select-local { .red-ui-diff-list-node-conflict.node-diff-select-local {
.red-ui-diff-list-node-local { .red-ui-diff-list-node-local {
background: #e7ffe3; background: $diff-state-added-background;
label { label {
border-left-color: #b8daad; border-left-color: $diff-state-added-border;
} }
} }
.red-ui-diff-list-node-remote { .red-ui-diff-list-node-remote {
background: #ffe1e1; background: $diff-state-deleted-background;
label { label {
border-left-color: #e4bcbc; border-left-color: $diff-state-deleted-border;
} }
} }
} }
@ -505,6 +499,12 @@ ul.red-ui-deploy-dialog-confirm-list {
font-size: 30px; font-size: 30px;
width: 30px; width: 30px;
margin-right: 10px; margin-right: 10px;
&.fa-check {
color: $text-color-green;
}
&.fa-exclamation {
color: $secondary-text-color;
}
} }
div { div {
vertical-align: middle; vertical-align: middle;
@ -540,14 +540,14 @@ ul.red-ui-deploy-dialog-confirm-list {
td.lineno { td.lineno {
font-family: $monospace-font; font-family: $monospace-font;
text-align: right; text-align: right;
color: #999; color: $tertiary-text-color;
background: #f6f6f6; background: $tertiary-background;
padding: 1px 5px; padding: 1px 5px;
&.added { &.added {
background: #c0f6c0; background: $diff-state-added-header-background;
} }
&.removed { &.removed {
background: #ffcccc; background: $diff-state-deleted-header-background;
} }
} }
td.lineno:nth-child(3) { td.lineno:nth-child(3) {
@ -557,66 +557,67 @@ ul.red-ui-deploy-dialog-confirm-list {
font-family: $monospace-font; font-family: $monospace-font;
white-space: pre-wrap; white-space: pre-wrap;
padding: 1px 5px; padding: 1px 5px;
border-left: 1px solid #ccc; border-left: 1px solid $tertiary-border-color;
span.prefix { span.prefix {
width: 30px; width: 30px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: #999; color: $secondary-text-color;
} }
&.added { &.added {
border-left-color: #aaeeaa border-left-color: $diff-state-added-header-border;
} }
&.removed { &.removed {
border-left-color: #eebbbb border-left-color: $diff-state-deleted-header-border;
} }
} }
td.blank { td.blank {
background: #f6f6f6; background: $tertiary-background;
} }
td.added { td.added {
background: #eefaee; background: $diff-state-added-background;
} }
td.removed { td.removed {
background: #ffecec; background: $diff-state-deleted-background;
} }
tr.mergeHeader td { tr.mergeHeader td {
color: #800080; color: $diff-merge-header-color;
background: #e5f9ff; background: $diff-merge-header-background;
height: 26px; height: 26px;
vertical-align: middle; vertical-align: middle;
} }
tr.mergeHeader-separator td { tr.mergeHeader-separator td {
color: #800080; color: $diff-merge-header-color;
background: darken(#e5f9ff, 10%); background: $diff-merge-header-border-color;
height: 0px; height: 0px;
} }
tr.mergeHeader-ours td { tr.mergeHeader-ours td {
border-top: 2px solid darken(#e5f9ff, 10%); border-top: 2px solid $diff-merge-header-border-color;
} }
tr.mergeHeader-theirs td { tr.mergeHeader-theirs td {
border-bottom: 2px solid darken(#e5f9ff, 10%); border-bottom: 2px solid $diff-merge-header-border-color;
} }
td.unchanged { td.unchanged {
color: #999; background: $diff-state-unchanged-background;
color: $diff-state-unchanged;
} }
tr.unchanged { tr.unchanged {
background: #fefefe; background: $diff-state-unchanged-background;
} }
tr.start-block { tr.start-block {
border-top: 1px solid #f0f0f0; border-top: 1px solid $secondary-border-color;
} }
tr.end-block { tr.end-block {
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid $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: $monospace-font;
} }
background: #f3f3f3; background: $primary-background;
padding: 5px 10px 5px 0; padding: 5px 10px 5px 0;
color: #333; color: $primary-text-color;
cursor: pointer; cursor: pointer;
i.red-ui-diff-list-chevron { i.red-ui-diff-list-chevron {
width: 30px; width: 30px;
@ -628,9 +629,9 @@ ul.red-ui-deploy-dialog-confirm-list {
} }
} }
tr.red-ui-diff-text-commit-header td { tr.red-ui-diff-text-commit-header td {
background: #f3f3f3; background: $primary-background;
padding: 5px 10px; padding: 5px 10px;
color: #333; color: $primary-text-color;
h3 { h3 {
font-size: 1.4em; font-size: 1.4em;
margin: 0; margin: 0;
@ -638,7 +639,7 @@ ul.red-ui-deploy-dialog-confirm-list {
.commit-summary { .commit-summary {
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
padding-top: 5px; padding-top: 5px;
color: #999; color: $secondary-text-color;
} }
.commit-body { .commit-body {
margin-bottom:15px; margin-bottom:15px;
@ -651,17 +652,17 @@ ul.red-ui-deploy-dialog-confirm-list {
font-family: $monospace-font; font-family: $monospace-font;
padding: 5px 10px; padding: 5px 10px;
text-align: left; text-align: left;
color: #666; color: $secondary-text-color;
background: #ffd; background: $diff-text-header-background;
height: 30px; height: 30px;
vertical-align: middle; vertical-align: middle;
border-top: 1px solid #f0f0f0; border-top: 1px solid $secondary-border-color;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid $secondary-border-color;
} }
tr.red-ui-diff-text-expand td { tr.red-ui-diff-text-expand td {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #ffc; background: $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: rgba(0,0,0,0.3); background: $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: #fff; color: $dnd-color;
i { i {
pointer-events: none; pointer-events: none;
font-size: 80px; font-size: 80px;

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

@ -30,7 +30,7 @@
list-style: none; list-style: none;
background: $menuBackground; background: $menuBackground;
border: 1px solid $secondary-border-color; border: 1px solid $secondary-border-color;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px $shadow;
&.pull-right { &.pull-right {
right: 0; right: 0;
@ -45,7 +45,7 @@
} }
& > li > a { & > li > a {
display: block; display: block;
padding: 3px 0 3px 32px; padding: 4px 0 4px 32px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
@ -168,5 +168,5 @@
} }
.red-ui-menu-dropdown-submenu.disabled > a:before { .red-ui-menu-dropdown-submenu.disabled > a:before {
border-right-color: #444; border-right-color: $menuCaret;
} }

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

@ -32,7 +32,7 @@
width: auto; width: auto;
right: -1000px; right: -1000px;
bottom: 0; bottom: 0;
background: #fff; background: $secondary-background;
border-left: 1px solid $secondary-border-color; border-left: 1px solid $secondary-border-color;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid $primary-border-color;
box-sizing: content-box; box-sizing: content-box;
@ -111,10 +111,11 @@
} }
.red-ui-tray-titlebar { .red-ui-tray-titlebar {
color: $header-text-color;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
padding: 8px; padding: 8px;
} }
.red-ui-tray-breadcrumbs { .red-ui-editor ul.red-ui-tray-breadcrumbs {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding:0; padding:0;
@ -125,7 +126,7 @@
margin:0; margin:0;
&:not(:last-child) { &:not(:last-child) {
color: $editor-button-color; color: $workspace-button-color;
font-weight: normal; font-weight: normal;
&:after { &:after {
@ -146,7 +147,7 @@
background: $primary-background url(images/grip.png) no-repeat 50% 50%; background: $primary-background url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize; cursor: col-resize;
border-left: 1px solid $primary-border-color; border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px rgba(0,0,0,0.1); box-shadow: -1px 0 6px $shadow;
&.red-ui-tray-resize-maximised { &.red-ui-tray-resize-maximised {
background: $primary-background; background: $primary-background;
@ -166,20 +167,19 @@ button.red-ui-tray-resize-button {
color: $workspace-button-color; color: $workspace-button-color;
} }
.red-ui-editor { .red-ui-editor .red-ui-tray {
.dialog-form, #dialog-form, #node-config-dialog-edit-form { .dialog-form, #dialog-form, #node-config-dialog-edit-form {
margin: 20px; margin: 20px;
height: calc(100% - 40px); height: calc(100% - 40px);
} }
} }
.red-ui-editor-dialog {
.red-ui-editor,.red-ui-editor-dialog {
.dialog-form, #dialog-form, #node-config-dialog-edit-form { .dialog-form, #dialog-form, #node-config-dialog-edit-form {
margin: 0; margin: 0;
height:100%; height:100%;
} }
}
.red-ui-editor,.red-ui-editor-dialog {
.input-error { .input-error {
border-color: $form-input-border-error-color !important; border-color: $form-input-border-error-color !important;
@ -198,7 +198,7 @@ button.red-ui-tray-resize-button {
width:70%; width:70%;
} }
.form-tips { .form-tips {
background: #ffe; background: $form-tips-background;
padding: 8px; padding: 8px;
border-radius: 2px; border-radius: 2px;
border: 1px solid $secondary-border-color; border: 1px solid $secondary-border-color;
@ -213,7 +213,7 @@ button.red-ui-tray-resize-button {
} }
.form-warning { .form-warning {
border-color: #d6615f; border-color: $text-color-warning;
} }
} }
@ -230,7 +230,7 @@ button.red-ui-tray-resize-button {
} }
} }
.red-ui-editor-text-container { .red-ui-editor-text-container {
border:1px solid #ccc; border:1px solid $tertiary-border-color;
border-radius:5px; border-radius:5px;
overflow: hidden; overflow: hidden;
font-size: $primary-font-size !important; font-size: $primary-font-size !important;
@ -271,7 +271,7 @@ button.editor-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: #AD1625; color: $text-color-warning;
vertical-align: middle; vertical-align: middle;
} }
#red-ui-editor-config-scope { #red-ui-editor-config-scope {
@ -282,7 +282,7 @@ button.editor-button-small {
} }
.red-ui-editor-type-expression #dialog-form { .red-ui-editor .red-ui-tray .red-ui-editor-type-expression #dialog-form {
margin: 0; margin: 0;
height: 100%; height: 100%;
.red-ui-panel { .red-ui-panel {
@ -317,47 +317,38 @@ button.editor-button-small {
} }
} }
} }
.red-ui-editor-type-expression-legacy, .red-ui-editor-type-buffer-type { .red-ui-editor-type-expression-legacy {
font-size: 0.8em;
float: left; float: left;
cursor: pointer;
border: 1px solid white;
padding: 2px 5px;
border-radius: 2px;
&:hover {
border-color: $form-input-border-color;
}
} }
.red-ui-editor-type-buffer-type { .red-ui-editor-type-buffer-type {
float: none;
text-align: right; text-align: right;
} }
.red-ui-editor-type-markdown-editor #dialog-form { .red-ui-editor .red-ui-tray .red-ui-editor-type-markdown-editor #dialog-form {
margin: 0; margin: 0;
height: 100%; height: 100%;
.red-ui-panel { .red-ui-panel {
padding: 20px 20px 10px; padding: 20px 20px 10px;
&:last-child { &:last-child {
padding-top: 60px; padding-top: 60px;
background: #f9f9f9; background: $primary-background;
} }
} }
} }
.red-ui-editor-type-markdown-panel-preview { .red-ui-editor-type-markdown-panel-preview {
padding: 10px; padding: 10px;
border:1px solid #ccc; border:1px solid $secondary-border-color;
border-radius:5px; border-radius:5px;
height: calc(100% - 21px); height: calc(100% - 21px);
overflow-y: scroll; overflow-y: scroll;
background: #fff; background: $secondary-background;
} }
#red-ui-clipboard-hidden { #red-ui-clipboard-hidden {
position: absolute; position: absolute;
top: -3000px; top: -3000px;
} }
.red-ui-editor-node-label-form-row { .form-row .red-ui-editor-node-label-form-row {
margin: 5px 0 0 50px; margin: 5px 0 0 50px;
label { label {
margin-right: 20px; margin-right: 20px;
@ -382,17 +373,11 @@ button.editor-button-small {
span { span {
padding-left: 50px; padding-left: 50px;
width: 100px; width: 100px;
color: #999; color: $secondary-text-color;
} }
} }
.ace_read-only {
background: #eee !important;
.ace_cursor {
color: transparent !important;
}
}
#red-ui-editor-node-icon-button { #red-ui-editor-node-icon-button {
position: relative; position: relative;
padding-left: 30px; padding-left: 30px;
@ -411,7 +396,7 @@ button.editor-button-small {
position: absolute; position: absolute;
border: 1px solid $primary-border-color; border: 1px solid $primary-border-color;
box-shadow: 0 1px 6px -3px black; box-shadow: 0 1px 6px -3px black;
background: white; background: $secondary-background;
z-Index: 21; z-Index: 21;
display: none; display: none;
select { select {
@ -433,12 +418,12 @@ button.editor-button-small {
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
background: lighten($node-selected-color,20%); background: $list-item-background-hover;
} }
&.selected { &.selected {
background: lighten($node-selected-color,20%); background: $list-item-background-selected;
.red-ui-search-result-node { .red-ui-search-result-node {
border-color: white; // border-color: white;
} }
} }
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
@ -450,7 +435,7 @@ button.editor-button-small {
background: $palette-header-background; background: $palette-header-background;
font-size: 0.9em; font-size: 0.9em;
padding: 3px; padding: 3px;
color: #666; color: $secondary-text-color;
clear: both; clear: both;
i { i {
margin-right: 5px; margin-right: 5px;
@ -458,9 +443,11 @@ button.editor-button-small {
} }
.red-ui-icon-meta { .red-ui-icon-meta {
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
background: $tertiary-background;
height: 24px;
span { span {
padding: 4px; padding: 4px;
color: #666; color: $secondary-text-color;
font-size: 0.9em; font-size: 0.9em;
} }
button { button {

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

@ -21,28 +21,25 @@
stroke-dasharray: 10 5; stroke-dasharray: 10 5;
} }
.node_label_italic { .node_label_italic, // deprecated: use red-ui-flow-node-label-italic
.red-ui-flow-node-label-italic {
font-style: italic; font-style: italic;
} }
.node_label_unknown { .red-ui-flow-node-label-white {
font-style: italic; fill: $view-background !important;
fill: #e00 !important;
} }
.node_label_white { .red-ui-flow-node-label {
fill: #eee !important;
}
.node_label {
stroke-width: 0; stroke-width: 0;
fill: #333; fill: $node-label-color;
font-size: 14px; font-size: 14px;
pointer-events: none; pointer-events: none;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@include disable-selection; @include disable-selection;
} }
.port_label { .red-ui-flow-port-label {
stroke-width: 0; stroke-width: 0;
fill: #888; fill: $secondary-text-color;
font-size: 16px; font-size: 16px;
alignment-baseline: middle; alignment-baseline: middle;
text-anchor: middle; text-anchor: middle;
@ -52,158 +49,142 @@
} }
.function_label { .red-ui-flow-node {
font-size: 12px; stroke: $node-border;
}
.node {
stroke: #999;
cursor: move; cursor: move;
stroke-width: 1; stroke-width: 1;
} }
.node_unknown { .red-ui-flow-node-unknown {
stroke-dasharray:10,4; stroke-dasharray:10,4;
stroke: #f33; stroke: $node-border-unknown;
} }
.node_placeholder { .red-ui-flow-node-placeholder {
stroke-dasharray:10,4; stroke-dasharray:10,4;
stroke: #aaa; stroke: $node-border-placeholder;
fill: #eee; fill: $node-background-placeholder;
opacity: 0.5; opacity: 0.5;
stroke-width: 2; stroke-width: 2;
} }
.red-ui-flow-node-icon-group {
.node_button { .fa-lg {
fill: inherit; stroke: none;
fill: $node-icon-color;
text-anchor: middle;
font-family: FontAwesome;
}
}
.red-ui-flow-node-icon-shade {
stroke: none;
fill: $node-icon-background-color-fill;
fill-opacity: $node-icon-background-color-opacity;
}
.red-ui-flow-node-icon-shade-border {
stroke-opacity: $node-icon-border-color-opacity;
stroke: $node-icon-border-color;
stroke-width: 1;
} }
.port { .red-ui-flow-node-button {
stroke: #999; fill: inherit;
}
.red-ui-flow-node-button-background {
fill: $node-background-placeholder;
}
.red-ui-flow-port {
stroke: $node-border;
stroke-width: 1; stroke-width: 1;
fill: #ddd; fill: $node-port-background;
cursor: crosshair; cursor: crosshair;
} }
.port_highlight { .red-ui-flow-node-error {
stroke: #6DA332; fill: $node-status-error-background;
stroke-width: 3; stroke: $node-status-error-border;
fill: #fff;
pointer-events:none;
fill-opacity: 0.5;
}
.red-ui-view-node-error {
fill: rgb(255, 102, 0);
stroke: rgb(145, 16, 2);
stroke-width:1px; stroke-width:1px;
cursor: default; cursor: default;
stroke-linejoin: round; stroke-linejoin: round;
stroke-linecap: round; stroke-linecap: round;
} }
.red-ui-view-node-changed { .red-ui-flow-node-changed {
fill: rgb(0, 188, 255); fill: $node-status-changed-background;
stroke: rgb(28, 102, 140); stroke: $node-status-changed-border;
cursor: default; cursor: default;
stroke-width:1px; stroke-width:1px;
stroke-linejoin: round; stroke-linejoin: round;
stroke-linecap: round; stroke-linecap: round;
} }
.node_badge { .red-ui-flow-node-selected {
stroke: rgb(93, 114, 145);
stroke-width: 1;
fill: rgb(190, 209, 255);
}
.node_badge_label {
stroke-width:0;
fill: #fff;
font-size: 11px;
pointer-events: none;
-webkit-touch-callout: none;
@include disable-selection;
}
.node_invalid {
stroke: #ff0000;
}
.node_selected {
stroke-width: 2; stroke-width: 2;
stroke: $node-selected-color !important; stroke: $node-selected-color !important;
} }
.node_highlighted { .red-ui-flow-node-highlighted {
border-color: #dd1616 !important; border-color: $node-selected-color !important;
border-style: dashed !important; border-style: dashed !important;
stroke: #dd1616; stroke: $node-selected-color;
stroke-width: 2; stroke-width: 2;
stroke-dasharray: 10, 4; stroke-dasharray: 10, 4;
} }
.node_hovered {
}
.node_subflow .node { .red-ui-flow-subflow .red-ui-flow-node {
stroke-dasharray:8, 3; stroke-dasharray:8, 3;
} }
.workspace-disabled { .red-ui-workspace-disabled {
.link_line { .red-ui-flow-link-line {
stroke-dasharray: 10,5 !important; stroke-dasharray: 10,5 !important;
stroke-width: 2 !important; stroke-width: 2 !important;
stroke: $link-subflow-color; stroke: $link-subflow-color;
} }
.node { .red-ui-flow-node {
stroke-dasharray: 10,4; stroke-dasharray: 10,4;
} }
} }
.node_quickadd * { @each $current-color in red green yellow blue grey {
stroke-dasharray: 12,3; .red-ui-flow-node-status-dot-#{$current-color} {
fill: map-get($node-status-colors,$current-color);
stroke: map-get($node-status-colors,$current-color);
}
.red-ui-flow-node-status-ring-#{$current-color} {
fill: $view-background;
stroke: map-get($node-status-colors,$current-color);
}
} }
.node_status_label { .red-ui-flow-node-status-label {
@include disable-selection; @include disable-selection;
stroke-width: 0; stroke-width: 0;
fill: #888; fill: $secondary-text-color;
font-size:9pt; font-size:9pt;
stroke:#000;
text-anchor:start; text-anchor:start;
} }
.port_hovered { .red-ui-flow-port-hovered {
stroke: $port-selected-color !important;
fill: $port-selected-color !important;
}
.port_quick_link {
stroke: $port-selected-color; stroke: $port-selected-color;
fill: $port-selected-color; fill: $port-selected-color;
} }
.red-ui-flow-subflow-port {
.subflowport {
stroke-dasharray: 5,5; stroke-dasharray: 5,5;
fill: #eee; fill: $node-background-placeholder;
stroke: #999; stroke: $node-border;
} }
.drag_line { .red-ui-flow-drag-line {
stroke: $node-selected-color !important; stroke: $node-selected-color !important;
stroke-width: 3; stroke-width: 3;
fill: none; fill: none;
pointer-events: none; pointer-events: none;
} }
.drag_line_hidden { .red-ui-flow-link-line {
stroke: $node-selected-color;
stroke-width: 0;
pointer-events: none;
fill: none;
}
.link_line {
stroke: $link-color; stroke: $link-color;
stroke-width: 3; stroke-width: 3;
fill: none; fill: none;
pointer-events: none; pointer-events: none;
} }
.link_link { .red-ui-flow-link-link {
stroke-width: 2; stroke-width: 2;
stroke-dasharray: 10,5; stroke-dasharray: 10,5;
stroke: $link-link-color; stroke: $link-link-color;
@ -211,55 +192,55 @@
stroke-dasharray: 15,2; stroke-dasharray: 15,2;
// pointer-events: none; // pointer-events: none;
} }
.link_port { .red-ui-flow-link-port {
fill: #eee; fill: $node-link-port-background;
stroke: $link-link-color; stroke: $link-link-color;
stroke-width: 1; stroke-width: 1;
} }
.link_group_active .link_port { .red-ui-flow-link-group-active .red-ui-flow-link-port {
stroke: $link-link-active-color; stroke: $link-link-active-color;
} }
.link_group:hover { .red-ui-flow-link-group:hover {
cursor: pointer; cursor: pointer;
} }
.link_subflow { .red-ui-flow-subflow-link {
stroke: $link-subflow-color; stroke: $link-subflow-color;
stroke-dasharray: 10,5; stroke-dasharray: 10,5;
stroke-width: 2; stroke-width: 2;
} }
.link_outline { .red-ui-flow-link-outline {
stroke: #fff; stroke: $view-background;
stroke-width: 5; stroke-width: 5;
cursor: crosshair; cursor: crosshair;
fill: none; fill: none;
pointer-events: none; pointer-events: none;
} }
.link_background { .red-ui-flow-link-background {
stroke: #fff; stroke: $view-background;
opacity: 0; opacity: 0;
stroke-width: 20; stroke-width: 20;
cursor: crosshair; cursor: crosshair;
fill: none; fill: none;
} }
.link_splice > .link_line { .red-ui-flow-link-splice > .red-ui-flow-link-line {
stroke-dasharray: 15,8; stroke-dasharray: 15,8;
} }
g.link_selected path.link_line { g.red-ui-flow-link-selected path.red-ui-flow-link-line {
stroke: $node-selected-color; stroke: $node-selected-color;
} }
g.link_unknown path.link_line { g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
stroke: $link-unknown-color; stroke: $link-unknown-color;
stroke-width: 2; stroke-width: 2;
stroke-dasharray: 10, 4; stroke-dasharray: 10, 4;
} }
@keyframes port_tooltip_fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes red-ui-flow-port-tooltip-fadeIn { from { opacity:0; } to { opacity:1; } }
.port_tooltip { .red-ui-flow-port-tooltip {
opacity:0; opacity:0;
animation: 0.1s ease-in 0s 1 normal forwards port_tooltip_fadeIn; animation: 0.1s ease-in 0s 1 normal forwards red-ui-flow-port-tooltip-fadeIn;
pointer-events: none; pointer-events: none;
path { path {
@ -268,7 +249,7 @@ g.link_unknown path.link_line {
stroke-width: 1; stroke-width: 1;
} }
} }
.port_tooltip_label { .red-ui-flow-port-tooltip-label {
stroke-width: 0; stroke-width: 0;
fill: $popover-color; fill: $popover-color;
font-family: $primary-font; font-family: $primary-font;

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

@ -99,14 +99,13 @@
margin-bottom: 20px; margin-bottom: 20px;
font-size: 21px; font-size: 21px;
line-height: 40px; line-height: 40px;
color: #333333; color: $tertiary-text-color;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $secondary-border-color;
} }
legend small { legend small {
font-size: 15px; color: $tertiary-text-color;
color: #999999;
} }
@ -194,7 +193,6 @@
.uneditable-input { .uneditable-input {
background-color: $form-input-background; background-color: $form-input-background;
border: 1px solid $form-input-border-color; border: 1px solid $form-input-border-color;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
} }
textarea:focus, textarea:focus,
@ -258,18 +256,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: thin dotted #333;
outline: 2px auto $form-input-focus-color; outline: 2px auto $form-input-focus-color;
outline-offset: -3px; outline-offset: -3px;
} }
.uneditable-input, .uneditable-input,
.uneditable-textarea { .uneditable-textarea {
color: #999999; color: $form-text-color-disabled;
cursor: not-allowed; cursor: not-allowed;
background-color: #fcfcfc; background-color: $form-input-background-disabled;
border-color: #cccccc; border-color: $form-input-border-color;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
} }
.uneditable-input { .uneditable-input {
@ -386,7 +382,7 @@
} }
label.disabled { label.disabled {
color: #bbb !important; color: $form-text-color-disabled;
cursor: default; cursor: default;
} }
@ -407,20 +403,25 @@
background-color: transparent; background-color: transparent;
} }
input:invalid,
div[contenteditable="true"]:invalid,
textarea:invalid,
select:invalid {
border-color: $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 {
color: #b94a48; border-color: $form-input-border-error-color;
border-color: #ee5f5b;
} }
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: #e9322d; border-color: $form-input-border-error-color;
box-shadow: 0 0 6px #f8b9b7;
} }
.input-append, .input-append,
@ -484,9 +485,8 @@
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
text-shadow: 0 1px 0 #ffffff; background-color: $form-button-background;
background-color: #eeeeee; border: 1px solid $form-input-border-color;
border: 1px solid #ccc;
} }
.input-append .add-on, .input-append .add-on,
@ -499,12 +499,6 @@
border-radius: 0; border-radius: 0;
} }
.input-append .active,
.input-prepend .active {
background-color: #a9dba9;
border-color: #46a546;
}
.input-prepend .add-on, .input-prepend .add-on,
.input-prepend .btn { .input-prepend .btn {
margin-right: -1px; margin-right: -1px;

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

@ -14,22 +14,6 @@
* limitations under the License. * limitations under the License.
**/ **/
$activeButton: #121212;
$deployButton: #8C101C;
$deployButtonHover: #6E0A1E;
$deployButtonActive: #4C0A17;
$deployDisabledButton: #444;
$deployDisabledButtonHover: #555;
$deployDisabledButtonActive: #444;
$headerMenuColor: #C7C7C7;
$headerMenuBackground: #121212;
$headerMenuItemHover: #323232;
$headerMenuItemDivider: #464646;
.button { .button {
@include disable-selection; @include disable-selection;
} }
@ -40,10 +24,10 @@ $headerMenuItemDivider: #464646;
left: 0; left: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: #000; background: $header-background;
box-sizing: border-box; box-sizing: border-box;
padding: 0px 0px 0px 20px; padding: 0px 0px 0px 20px;
color: $headerMenuColor; color: $header-menu-color;
font-size: 14px; font-size: 14px;
span.red-ui-header-logo { span.red-ui-header-logo {
@ -96,17 +80,17 @@ $headerMenuItemDivider: #464646;
font-size: 20px; font-size: 20px;
padding: 0px 12px; padding: 0px 12px;
text-decoration: none; text-decoration: none;
color: $headerMenuColor; color: $header-menu-color;
margin: auto 5px; margin: auto 5px;
vertical-align: middle; vertical-align: middle;
border-left: 2px solid #000; border-left: 2px solid $header-background;
border-right: 2px solid #000; border-right: 2px solid $header-background;
&:hover { &:hover {
border-color: $headerMenuItemHover; border-color: $header-menu-item-hover;
} }
&:active, &.active { &:active, &.active {
background: $activeButton; background: $header-button-background-active;
} }
&:focus { &:focus {
outline: none; outline: none;
@ -131,16 +115,18 @@ $headerMenuItemDivider: #464646;
} }
.red-ui-deploy-button { .red-ui-deploy-button {
background: $deployButton; background: $deploy-button-background;
color: #eee !important; color: $deploy-button-color;
&:hover { &:hover {
background: $deployButtonHover; background: $deploy-button-background-hover;
}
&:focus {
outline: none;
} }
&:active { &:active {
background: $deployButtonActive; background: $deploy-button-background-active;
color: #ccc !important; color: $deploy-button-color-active;
} }
} }
@ -162,21 +148,21 @@ $headerMenuItemDivider: #464646;
padding: 4px 12px; padding: 4px 12px;
&.disabled { &.disabled {
cursor: default; cursor: default;
background: $deployDisabledButton; background: $deploy-button-background-disabled;
color: #999 !important; color: $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: $deployDisabledButton; background: $deploy-button-background-disabled;
color: #ddd; color: $deploy-button-color-active;
} }
&+ #red-ui-header-button-deploy-options:hover { &+ #red-ui-header-button-deploy-options:hover {
background: $deployDisabledButtonHover; background: $deploy-button-background-disabled-hover;
} }
&+ #red-ui-header-button-deploy-options:active { &+ #red-ui-header-button-deploy-options:active {
background: $deployDisabledButton; background: $deploy-button-background-disabled;
} }
} }
@ -187,32 +173,32 @@ $headerMenuItemDivider: #464646;
.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: $activeButton !important; background: $header-button-background-active !important;
} }
} }
li.open .button { li.open .button {
background: $activeButton; background: $header-button-background-active;
border-color: $activeButton; border-color: $header-button-background-active;
} }
ul.red-ui-menu-dropdown { ul.red-ui-menu-dropdown {
background: $headerMenuBackground; background: $header-menu-background;
border: 1px solid rgba(0,0,0,0.2); border: 1px solid $header-menu-background;
width: 250px !important; width: 250px !important;
margin-top: 0; margin-top: 0;
li a { li a {
color: $headerMenuColor; color: $header-menu-color;
padding: 3px 40px; padding: 3px 40px;
img { img {
margin-right: 10px; margin-right: 10px;
padding: 4px; padding: 4px;
border: 3px solid rgba(0,0,0,0); border: 3px solid transparent;
} }
&.active img { &.active img {
border: 3px solid #777677; border: 3px solid $header-menu-item-border-active;
} }
span.red-ui-menu-label-container { span.red-ui-menu-label-container {
@ -227,7 +213,7 @@ $headerMenuItemDivider: #464646;
text-indent: 0px; text-indent: 0px;
} }
span.red-ui-menu-sublabel { span.red-ui-menu-sublabel {
color: #aeaeae; color: $header-menu-sublabel-color;
font-size: 13px; font-size: 13px;
display: inline-block; display: inline-block;
text-indent: 0px; text-indent: 0px;
@ -235,40 +221,43 @@ $headerMenuItemDivider: #464646;
} }
> li:hover > a, > li:hover > a,
> li:focus > a { > li:focus > a {
background: $headerMenuItemHover !important; background: $header-menu-item-hover !important;
} }
li.divider { li.divider {
background: $headerMenuItemDivider; background: $headerMenuItemDivider;
border-bottom-color: $headerMenuItemHover; border-bottom-color: $header-menu-item-hover;
} }
li.disabled a { li.disabled a {
color: #666; color: $header-menu-color-disabled;
} }
> li.disabled:hover > a, > li.disabled:hover > a,
> li.disabled:focus > a { > li.disabled:focus > a {
background: none !important; background: none !important;
} }
} }
.red-ui-menu-dropdown-submenu>a:before {
border-right-color: $headerMenuCaret;
}
/* Deploy menu customisations */ /* Deploy menu customisations */
ul#red-ui-header-button-deploy-options-submenu { ul#red-ui-header-button-deploy-options-submenu {
width: 300px !important; width: 300px !important;
li a { li a {
padding: 10px 30px; padding: 10px 30px;
color: #fff; color: $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;
text-indent: 0px; text-indent: 0px;
} }
> i.fa { > i.fa {
display: none !important; display: none;
} }
} }
} }
/* User menu customisations */ /* User menu customisations */
#usermenu-item-username > .red-ui-menu-label { #usermenu-item-username > .red-ui-menu-label {
color: #fff; color: $header-menu-heading-color;
} }
#red-ui-header-button-user .user-profile { #red-ui-header-button-user .user-profile {

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

@ -39,7 +39,7 @@
.ui-dialog { .ui-dialog {
border-radius: 1px; border-radius: 1px;
background: #fff; background: $secondary-background;
padding: 0; padding: 0;
@include component-shadow; @include component-shadow;
} }
@ -51,16 +51,20 @@
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
padding: 10px; padding: 10px;
background: #f3f3f3; background: $primary-background;
border: none; border: none;
border-bottom: 1px solid #999; border-bottom: 1px solid $primary-border-color;
border-radius: 0; border-radius: 0;
} }
.ui-dialog .ui-dialog-buttonpane.ui-widget-content {
background: $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: #f3f3f3; background: $primary-background;
} }
.ui-dialog-no-close .ui-dialog-titlebar-close { .ui-dialog-no-close .ui-dialog-titlebar-close {
display: none; display: none;
@ -80,8 +84,8 @@
padding: 6px 14px; padding: 6px 14px;
margin-right: 8px; margin-right: 8px;
border-radius: 2px; border-radius: 2px;
color: $editor-button-color; color: $workspace-button-color;
background: $editor-button-background; background: $workspace-button-background;
&.leftButton { &.leftButton {
float: left; float: left;
@ -92,18 +96,18 @@
} }
&.primary { &.primary {
border-color: $editor-button-background-primary; border-color: $workspace-button-background-primary;
color: $editor-button-color-primary !important; color: $workspace-button-color-primary !important;
background: $editor-button-background-primary; background: $workspace-button-background-primary;
&:not(.disabled):hover { &:not(.disabled):hover {
border-color: $editor-button-background-primary-hover; border-color: $workspace-button-background-primary-hover;
background: $editor-button-background-primary-hover; background: $workspace-button-background-primary-hover;
color: $editor-button-color-primary !important; color: $workspace-button-color-primary !important;
} }
&.disabled { &.disabled {
border-color: $form-input-border-color; border-color: $form-input-border-color;
color: $workspace-button-color-disabled !important; color: $workspace-button-color-disabled !important;
background: $editor-button-background; background: $workspace-button-background;
} }
} }
&.disabled { &.disabled {
@ -130,15 +134,12 @@
border: 1px solid $form-input-border-color; border: 1px solid $form-input-border-color;
} }
.ui-spinner input { .ui-spinner input {
background: $form-input-background;
margin: 0 17px 0 0; margin: 0 17px 0 0;
padding: 6px; padding: 6px;
border: none; border: none;
border-top-right-radius: 0px; border-top-right-radius: 0px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
&:focus { &:focus {
outline: none; outline: none;
} }
@ -150,3 +151,41 @@
z-index: 100; z-index: 100;
opacity: 1; opacity: 1;
} }
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
border: 1px solid $secondary-border-color;
background: $form-button-background;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover, .ui-button:focus {
border: 1px solid $secondary-border-color;
background: $workspace-button-background-hover;
color: $workspace-button-color-hover;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
border: 1px solid $secondary-border-color;
background: $workspace-button-background-active;
font-weight: normal;
color: $workspace-button-color-active;
}
.ui-state-active .ui-icon, .ui-button:active .ui-icon {
background-image: url(../vendor/jquery/css/base/images/ui-icons_777777_256x240.png);
}

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

@ -25,7 +25,7 @@
padding:0 5px 0 5px; padding:0 5px 0 5px;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid $primary-border-color;
div { div {
color: #666 !important; color: $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: #f6f6f6; background: $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: #ccc; color: $tertiary-text-color;
margin-right: 5px; margin-right: 5px;
} }
} }
.keyboard-shortcut-entry-scope { .keyboard-shortcut-entry-scope {
width:100px; width:100px;
color: #999; color: $tertiary-text-color;
vertical-align: middle; vertical-align: middle;
text-align: right; text-align: right;
} }
@ -94,12 +94,13 @@
} }
} }
.keyboard-shortcut-entry-unassigned { .keyboard-shortcut-entry-unassigned {
color: #999; color: $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;
.keyboard-shortcut-entry-key { .keyboard-shortcut-entry-key {
width: 150px; width: 150px;
} }
@ -114,12 +115,12 @@
} }
} }
.help-key { .help-key {
border: 1px solid $keyboard-help-key-border; border: 1px solid $tertiary-border-color;
padding: 4px; padding: 4px;
border-radius: 3px; border-radius: 3px;
background: $keyboard-help-key-background; background: $tertiary-background;
font-family: $monospace-font; font-family: $monospace-font;
box-shadow: $keyboard-help-key-shadow 1px 1px 1px; box-shadow: $shade-color 1px 1px 1px;
} }
.help-key-block { .help-key-block {
white-space: nowrap; white-space: nowrap;

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

@ -64,6 +64,11 @@
height: calc(100% - 20px) height: calc(100% - 20px)
} }
} }
.red-ui-clipboard-dialog-box {
height: 400px;
position:relative;
border:1px solid $primary-border-color;
}
.red-ui-clipboard-dialog-tab-library { .red-ui-clipboard-dialog-tab-library {
.form-row { .form-row {
@ -101,7 +106,7 @@
position: relative; position: relative;
height: 100%; height: 100%;
.red-ui-treeList-container { .red-ui-treeList-container {
background: white; background: $secondary-background;
border: none; border: none;
border-radius: 0; border-radius: 0;
li { li {

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

@ -73,11 +73,10 @@
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: $workspace-button-color-selected !important;
// background: $workspace-button-background-active; background: $workspace-button-background-active;
// background: #9f9; }
// }
.button-group &:not(:first-child) { .button-group &:not(:first-child) {
border-left: none; border-left: none;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -110,24 +109,24 @@
} }
&.primary { &.primary {
border-color: $editor-button-background-primary; border-color: $workspace-button-background-primary;
color: $editor-button-color-primary !important; color: $workspace-button-color-primary !important;
background: $editor-button-background-primary; background: $workspace-button-background-primary;
&.disabled, &.ui-state-disabled { &.disabled, &.ui-state-disabled {
background: none; background: none;
color: $editor-button-color !important; color: $workspace-button-color !important;
border-color: $form-input-border-color; border-color: $form-input-border-color;
} }
&:not(.disabled):not(.ui-button-disabled):hover { &:not(.disabled):not(.ui-button-disabled):hover {
border-color: $editor-button-background-primary-hover; border-color: $workspace-button-background-primary-hover;
background: $editor-button-background-primary-hover; background: $workspace-button-background-primary-hover;
color: $editor-button-color-primary !important; color: $workspace-button-color-primary !important;
} }
} }
&.secondary { &.secondary {
background: none; background: none;
&:not(:hover) { &:not(:hover) {
border-color: rgba(0,0,0,0); border-color: transparent;
} }
} }
@ -144,59 +143,23 @@
@mixin workspace-button-toggle { @mixin workspace-button-toggle {
@include workspace-button; @include workspace-button;
&.single {
color: $workspace-button-color !important;
background: $workspace-button-background;
&.selected:not(.disabled):not(:disabled) {
color: $workspace-button-toggle-color !important;
background: $workspace-button-background-active;
}
}
&:not(.single) { &:not(.single) {
color: $workspace-button-toggle-color !important;
background:$workspace-button-background;
margin-bottom: 1px; margin-bottom: 1px;
&.selected:not(.disabled):not(:disabled) { &.selected:not(.disabled):not(:disabled) {
color: $workspace-button-toggle-color-selected !important;
background: $workspace-button-background-active;
border-bottom-width: 2px; border-bottom-width: 2px;
border-bottom-color: $form-input-border-selected-color; border-bottom-color: $form-input-border-selected-color;
margin-bottom: 0; margin-bottom: 0;
cursor: default; cursor: default;
} }
} }
&.disabled,&:disabled {
color: $workspace-button-toggle-color-disabled !important;
}
} }
@mixin editor-button { @mixin editor-button {
@include workspace-button; @include workspace-button;
font-size: 14px; font-size: 14px;
padding: 6px 14px; padding: 6px 14px;
margin-right: 8px; margin-right: 8px;
color: $editor-button-color !important;
background: $editor-button-background;
// &.primary {
// border-color: $editor-button-background-primary;
// color: $editor-button-color-primary !important;
// background: $editor-button-background-primary;
// &.disabled, &.ui-state-disabled {
// background: none;
// color: $editor-button-color !important;
// border-color: $form-input-border-color;
// }
// &:not(.disabled):not(.ui-button-disabled):hover {
// border-color: $editor-button-background-primary-hover;
// background: $editor-button-background-primary-hover;
// color: $editor-button-color-primary !important;
// }
// }
&:not(.disabled):hover { &:not(.disabled):hover {
//color: $editor-button-color; //color: $workspace-button-color;
} }
&.disabled { &.disabled {
background: none; background: none;
@ -204,8 +167,6 @@
&.disabled:focus { &.disabled:focus {
outline: none; outline: none;
} }
&.leftButton { &.leftButton {
float: left; float: left;
margin-top: 1px; margin-top: 1px;
@ -220,7 +181,7 @@
@mixin component-footer { @mixin component-footer {
border-top: 1px solid $primary-border-color; border-top: 1px solid $primary-border-color;
background: #f3f3f3; background: $primary-background;
text-align: right; text-align: right;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -263,8 +224,7 @@
} }
@mixin component-shadow { @mixin component-shadow {
border: 1px solid $secondary-border-color; box-shadow: 1px 1px 4px $shadow;
box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
} }

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

@ -27,10 +27,10 @@
position: relative; position: relative;
padding: 14px 18px; padding: 14px 18px;
margin-bottom: 4px; margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15); box-shadow: 0 1px 1px 1px $shadow;
background-color: #fff; background-color: $secondary-background;
color: #666; color: $primary-text-color;
border: 1px solid #325C80; border: 1px solid $notification-border-default;
border-left-width: 16px; border-left-width: 16px;
overflow: hidden; overflow: hidden;
} }
@ -46,13 +46,13 @@
} }
.red-ui-notification-success { .red-ui-notification-success {
border-color: #4B8400; border-color: $notification-border-success;
} }
.red-ui-notification-warning { .red-ui-notification-warning {
border-color: #D74108; border-color: $notification-border-warning;
} }
.red-ui-notification-error { .red-ui-notification-error {
border-color: #AD1625; border-color: $notification-border-error;
} }
.red-ui-notification-shake-horizontal { .red-ui-notification-shake-horizontal {

56
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: #fff; background: $secondary-background;
.red-ui-editableList-container { .red-ui-editableList-container {
border: none; border: none;
@ -39,21 +39,25 @@
// border: none; // border: none;
// border-top: 1px solid $primary-border-color; // border-top: 1px solid $primary-border-color;
padding: 0px; padding: 0px;
.editor-button {
min-width: 60px;
}
.disabled { .disabled {
background: #f3f3f3; // background: $secondary-background-inactive;//f3f3f3;
.red-ui-palette-module-name { .red-ui-palette-module-name {
font-style: italic; font-style: italic;
color: #aaa; color: $tertiary-text-color;
} }
.red-ui-palette-module-version { .red-ui-palette-module-version {
color: #aaa; color: $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: #aaa; color: $tertiary-text-color;
} }
@ -75,14 +79,14 @@
bottom:0 bottom:0
} }
.red-ui-palette-editor-toolbar { .red-ui-palette-editor-toolbar {
background: #f3f3f3; background: $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 $primary-border-color;
text-align: right; text-align: right;
} }
.red-ui-palette-module-shade-status { .red-ui-palette-module-shade-status {
color: #666; color: $secondary-text-color;
} }
.red-ui-palette-module-updated { .red-ui-palette-module-updated {
margin-left: 10px; margin-left: 10px;
@ -94,18 +98,12 @@
.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: #999; color: $secondary-text-color;
} }
.red-ui-palette-module-link { .red-ui-palette-module-link {
} }
.red-ui-palette-module-set-button-group { .red-ui-palette-module-set-button-group {
} }
.red-ui-palette-module-count {
border-radius: 4px;
background: #eee;
padding: 2px 8px;
font-size: 12px;
}
.red-ui-palette-module-content { .red-ui-palette-module-content {
display: none; display: none;
padding: 10px 3px; padding: 10px 3px;
@ -120,10 +118,6 @@
i.fa.red-ui-palette-module-node-chevron { i.fa.red-ui-palette-module-node-chevron {
transform: rotate(90deg); transform: rotate(90deg);
} }
.red-ui-palette-module-set-button {
background:#f3f3f3 !important;
}
} }
.red-ui-palette-module-set { .red-ui-palette-module-set {
border:1px solid $secondary-border-color; border:1px solid $secondary-border-color;
@ -144,7 +138,7 @@
} }
.red-ui-palette-module-type { .red-ui-palette-module-type {
color: #666; color: $secondary-text-color;
padding-left: 5px; padding-left: 5px;
font-size: 0.9em; font-size: 0.9em;
@include enable-selection; @include enable-selection;
@ -156,8 +150,8 @@
border-radius: 3px; border-radius: 3px;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
background: #eee; background: $primary-background;
border: 1px dashed #fff; border: 1px dashed $secondary-border-color;
} }
.red-ui-palette-module-set-button-group { .red-ui-palette-module-set-button-group {
position: absolute; position: absolute;
@ -166,9 +160,9 @@
} }
.red-ui-palette-module-set-disabled { .red-ui-palette-module-set-disabled {
background: #eee; background: $list-item-background-disabled;
.red-ui-palette-module-type { .red-ui-palette-module-type {
color: #999; color: $secondary-text-color-disabled-active;
} }
} }
.red-ui-palette-module-more { .red-ui-palette-module-more {
@ -180,7 +174,7 @@
display: block; display: block;
text-align: center; text-align: center;
padding: 12px 8px; padding: 12px 8px;
color: #AD1625; color: $text-color-warning;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -191,10 +185,10 @@
} }
.red-ui-palette-module-meta { .red-ui-palette-module-meta {
color: #666; color: $secondary-text-color;
position: relative; position: relative;
&.disabled { &.disabled {
color: #ccc; color: $secondary-text-color-disabled;
} }
.fa { .fa {
@ -204,6 +198,7 @@
} }
} }
.red-ui-palette-module-name { .red-ui-palette-module-name {
color: $primary-text-color;
white-space: nowrap; white-space: nowrap;
@include enable-selection; @include enable-selection;
} }
@ -212,13 +207,6 @@
font-size: 0.8em; font-size: 0.8em;
@include enable-selection; @include enable-selection;
} }
.red-ui-palette-module-section {
padding:0 !important;
background: #f9f9f9 !important;
font-size: 0.9em;
color: #666;
}
.red-ui-palette-module-button-group { .red-ui-palette-module-button-group {
position: absolute; position: absolute;
right: 0; right: 0;
@ -228,7 +216,7 @@
} }
} }
.red-ui-palette-module-meta .fa-warning { .red-ui-palette-module-meta .fa-warning {
color: #AD1625; color: $text-color-warning;
} }
ul.red-ui-palette-module-error-list { ul.red-ui-palette-module-error-list {
display: inline-block; display: inline-block;

47
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: #f3f3f3; background: $primary-background;
width: 180px; width: 180px;
text-align: center; text-align: center;
@include disable-selection; @include disable-selection;
@ -55,7 +55,7 @@
.red-ui-palette-search { .red-ui-palette-search {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #ffffff; background: $secondary-background;
text-align: center; text-align: center;
height: 35px; height: 35px;
padding: 3px; padding: 3px;
@ -64,10 +64,10 @@
} }
.red-ui-palette-category { .red-ui-palette-category {
border-bottom: 1px solid #ccc; border-bottom: 1px solid $secondary-border-color;
} }
.red-ui-palette-content { .red-ui-palette-content {
background: #fff; background: $palette-content-background;
padding: 3px; padding: 3px;
} }
@ -106,6 +106,7 @@
clear: both; clear: both;
} }
.red-ui-palette-label { .red-ui-palette-label {
color: $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;
@ -118,22 +119,35 @@
} }
.red-ui-palette-node { .red-ui-palette-node {
display: block; display: inline-block;
cursor:move; cursor: move;
background: #ddd; background: $secondary-background;
margin: 10px auto; margin: 5px auto;
height: 25px; height: 25px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #999; border: 1px solid $node-border;
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 120px; width: 120px;
background-size: contain; background-size: contain;
position: relative; position: relative;
&:first-child {
margin-top: 10px;
}
&:last-child {
margin-bottom: 10px;
}
} }
.red-ui-palette-node:hover { .red-ui-palette-node:hover {
margin: 4px auto;
border-color: $node-selected-color; border-color: $node-selected-color;
background-color: #eee; border-width: 2px;
&:first-child {
margin-top: 9px;
}
&:last-child {
margin-bottom: 9px;
}
} }
.red-ui-palette-port { .red-ui-palette-port {
position: absolute; position: absolute;
@ -141,11 +155,11 @@
left: -5px; left: -5px;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
background:#d9d9d9; background: $node-port-background;
border-radius: 3px; border-radius: 3px;
width: 10px; width: 10px;
height: 10px; height: 10px;
border: 1px solid #999; border: 1px solid $node-border;
} }
.red-ui-palette-port-output { .red-ui-palette-port-output {
left:auto; left:auto;
@ -153,8 +167,7 @@
} }
.red-ui-palette-node:hover .red-ui-palette-port { .red-ui-palette-node:hover .red-ui-palette-port {
border-color: #999; background-color: $node-port-background-hover;
background-color: #eee;
} }
.red-ui-palette-icon-container { .red-ui-palette-icon-container {
position: absolute; position: absolute;
@ -163,14 +176,14 @@
bottom:0; bottom:0;
left:0; left:0;
width: 30px; width: 30px;
border-right: 1px solid rgba(0,0,0,0.1); border-right: 1px solid $node-icon-background-color;
background-color: rgba(0,0,0,0.05); background-color: $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 rgba(0,0,0,0.1); border-left: 1px solid $node-icon-background-color;
} }
.red-ui-palette-icon { .red-ui-palette-icon {
display: inline-block; display: inline-block;

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

@ -60,26 +60,26 @@
} }
.red-ui-popover.red-ui-popover-right:after { .red-ui-popover.red-ui-popover-right:after {
border-color: rgba(136, 183, 213, 0); border-color: transparent;
border-right-color: $popover-background; border-right-color: $popover-background;
border-width: 10px; border-width: 10px;
margin-top: -10px; margin-top: -10px;
} }
.red-ui-popover.red-ui-popover-right:before { .red-ui-popover.red-ui-popover-right:before {
border-color: rgba(194, 225, 245, 0); border-color: transparent;
border-right-color: $popover-background; border-right-color: $popover-background;
border-width: 11px; border-width: 11px;
margin-top: -11px; margin-top: -11px;
} }
.red-ui-popover.red-ui-popover-left:after { .red-ui-popover.red-ui-popover-left:after {
border-color: rgba(136, 183, 213, 0); border-color: transparent;
border-left-color: $popover-background; border-left-color: $popover-background;
border-width: 10px; border-width: 10px;
margin-top: -10px; margin-top: -10px;
} }
.red-ui-popover.red-ui-popover-left:before { .red-ui-popover.red-ui-popover-left:before {
border-color: rgba(194, 225, 245, 0); border-color: transparent;
border-left-color: $popover-background; border-left-color: $popover-background;
border-width: 11px; border-width: 11px;
margin-top: -11px; margin-top: -11px;
@ -87,26 +87,26 @@
.red-ui-popover.red-ui-popover-bottom:after { .red-ui-popover.red-ui-popover-bottom:after {
border-color: rgba(136, 183, 213, 0); border-color: transparent;
border-bottom-color: $popover-background; border-bottom-color: $popover-background;
border-width: 10px; border-width: 10px;
margin-left: -10px; margin-left: -10px;
} }
.red-ui-popover.red-ui-popover-bottom:before { .red-ui-popover.red-ui-popover-bottom:before {
border-color: rgba(194, 225, 245, 0); border-color: transparent;
border-bottom-color: $popover-background; border-bottom-color: $popover-background;
border-width: 11px; border-width: 11px;
margin-left: -11px; margin-left: -11px;
} }
.red-ui-popover.red-ui-popover-top:after { .red-ui-popover.red-ui-popover-top:after {
border-color: rgba(136, 183, 213, 0); border-color: transparent;
border-top-color: $popover-background; border-top-color: $popover-background;
border-width: 10px; border-width: 10px;
margin-left: -10px; margin-left: -10px;
} }
.red-ui-popover.red-ui-popover-top:before { .red-ui-popover.red-ui-popover-top:before {
border-color: rgba(194, 225, 245, 0); border-color: transparent;
border-top-color: $popover-background; border-top-color: $popover-background;
border-width: 11px; border-width: 11px;
margin-left: -11px; margin-left: -11px;
@ -143,25 +143,22 @@
font-size: 11px; font-size: 11px;
font-family: $monospace-font; font-family: $monospace-font;
margin-left: 3px; margin-left: 3px;
border: 1px solid #999; border: 1px solid $popover-color;
border-radius:3px; border-radius:3px;
padding: 1px 2px; padding: 1px 2px;
} }
.red-ui-popover .editor-button { .red-ui-popover a.editor-button,
&:not(.primary) { .red-ui-popover button.editor-button {
color: #444 !important;
border-color: rgba(0,0,0,0);
}
&.primary { &.primary {
border-color: #bbb; border-color: $popover-button-border-color;
} }
&.primary:hover { &.primary:not(.disabled):not(.ui-button-disabled):hover {
border-color: #666 !important; border-color: $popover-button-border-color-hover;
} }
} }
.red-ui-popover code { .red-ui-popover code {
border: none; border: none;
background: none; background: none;
color: #ccc; color: $tertiary-text-color;
} }

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

@ -24,7 +24,7 @@
overflow-y: scroll; overflow-y: scroll;
} }
.red-ui-sidebar-vc-shade { .red-ui-sidebar-vc-shade {
background: #f3f3f3; background: $primary-background;
} }
.red-ui-projects-edit-form form { .red-ui-projects-edit-form form {
@ -32,7 +32,7 @@
.form-row { .form-row {
margin-bottom: 15px; margin-bottom: 15px;
label { label {
color: #555; color: $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 {
@ -52,7 +52,7 @@
} }
.red-ui-projects-edit-form-sublabel { .red-ui-projects-edit-form-sublabel {
color: #999; color: $tertiary-text-color;
text-align: right; text-align: right;
margin-bottom: -15px; margin-bottom: -15px;
font-weight: normal; font-weight: normal;
@ -67,19 +67,11 @@
.red-ui-projects-dialog-screen-start { .red-ui-projects-dialog-screen-start {
.red-ui-projects-dialog-screen-start-hero { .red-ui-projects-dialog-screen-start-hero {
// background: url(https://nodered.org/images/title-wave.png) no-repeat 0% 100% #8f0000;
// background-size: contain;
text-align: center; text-align: center;
font-size: 2em; font-size: 2em;
padding: 10px; padding: 10px;
min-height: 60px; min-height: 60px;
color: #555; color: $primary-text-color;
h1 {
text-align: center;
color: #f0f0f0;
font-size: 2em;
font-weight: normal;
}
} }
.red-ui-projects-dialog-screen-start-body { .red-ui-projects-dialog-screen-start-body {
min-height: 400px; min-height: 400px;
@ -99,13 +91,6 @@
height: auto; height: auto;
line-height: 2em; line-height: 2em;
padding: 10px; padding: 10px;
border-color: #aaa;
i {
color: #aaa;
}
&:hover i {
color: #999;
}
} }
.button-group { .button-group {
text-align: center; text-align: center;
@ -200,37 +185,44 @@
} }
.red-ui-projects-dialog-project-list-entry { .red-ui-projects-dialog-project-list-entry {
padding: 12px 0; padding: 12px 0;
border-left: 3px solid #fff;
border-right: 3px solid #fff; color: $list-item-color;
background: $list-item-background;
border-left: 3px solid $list-item-background;
border-right: 3px solid $list-item-background;
&.projects-list-entry-current { &.projects-list-entry-current {
&:not(.selectable) { &:not(.selectable) {
background: #f9f9f9; color: $form-text-color;
border-left: 3px solid #f9f9f9; background: $list-item-background-selected;
border-right: 3px solid #f9f9f9; border-left-color:$list-item-border-selected;
border-right-color:$list-item-border-selected;
} }
i { i {
color: #999; color: $secondary-text-color;
} }
} }
&.selectable { &.selectable {
cursor: pointer; cursor: pointer;
&:hover { &:hover:not(.selected) {
background: #f3f3f3; color: $form-text-color;
border-left-color: #f3f3f3; background: $list-item-background-hover;
border-right-color: #f3f3f3; border-left-color:$list-item-background-hover;
border-right-color:$list-item-background-hover;
} }
} }
.red-ui-projects-dialog-project-list-entry-icon { .red-ui-projects-dialog-project-list-entry-icon {
i { i {
color: #ccc; color: $tertiary-text-color;
font-size: 2em; font-size: 2em;
} }
} }
&.selected { &.selected {
background: #efefef; color: $form-text-color;
border-left-color:#999; background: $list-item-background-selected;
border-right-color:#999; border-left-color:$list-item-border-selected;
border-right-color:$list-item-border-selected;
} }
span { span {
display: inline-block; display: inline-block;
@ -246,7 +238,7 @@
float: right; float: right;
margin-right: 20px; margin-right: 20px;
font-size: 0.9em; font-size: 0.9em;
color: #999; color: $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 {
@ -254,7 +246,7 @@
top: 16px; top: 16px;
right: 30px; right: 30px;
display: none; display: none;
color: #999; color: $secondary-text-color;
} }
&:hover { &:hover {
.red-ui-projects-dialog-project-list-entry-tools { .red-ui-projects-dialog-project-list-entry-tools {
@ -263,8 +255,7 @@
} }
} }
.red-ui-projects-dialog-screen-create-type.editor-button.toggle.selected:not(.disabled):not(:disabled) { .red-ui-projects-dialog-screen-create-type.editor-button.toggle.selected:not(.disabled):not(:disabled) {
background: #fff !important; color: $secondary-text-color-active !important;
color: #666 !important;
} }
.red-ui-projects-dialog-screen-input-status { .red-ui-projects-dialog-screen-input-status {
text-align: right; text-align: right;
@ -273,21 +264,13 @@
right: 8px; right: 8px;
width: 70px; width: 70px;
height: 30px; height: 30px;
color: #999; color: $secondary-text-color;
} }
.red-ui-sidebar-vc { .red-ui-sidebar-vc {
height: 100%; height: 100%;
} }
.red-ui-sidebar-vc-stack-info {
height: 100px;
box-sizing: border-box;
border-bottom: 1px solid $secondary-border-color;
color: #333;
i {
color: #999;
}
}
.red-ui-sidebar-vc-stack { .red-ui-sidebar-vc-stack {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -321,19 +304,17 @@
} }
.red-ui-palette-module-unused { .red-ui-palette-module-unused {
& > * { & > * {
color: #bbb; color: $secondary-text-color;
} }
// border: 1px dashed #bbb;
} }
.red-ui-palette-module-unknown { .red-ui-palette-module-unknown {
border: 1px dashed #aaa; border: 1px dashed $secondary-border-color;
background: #fafafa; background: $secondary-background-inactive;
} }
.red-ui-palette-module-not-installed { .red-ui-palette-module-not-installed {
border: 1px dashed #b07575; border: 1px dashed $text-color-warning;
background: #fee;
i.fa-warning { i.fa-warning {
color: #b07575; //#b72828; color: $text-color-warning;
} }
} }
} }
@ -350,11 +331,11 @@
} }
.red-ui-sidebar-vc { .red-ui-sidebar-vc {
.red-ui-editableList-container { .red-ui-editableList-container {
background: #f9f9f9; background: $tertiary-background;
padding: 0; padding: 0;
li { li {
padding:0; padding:0;
background: #fff; background: $secondary-background;
} }
} }
.red-ui-editableList-border { .red-ui-editableList-border {
@ -384,7 +365,7 @@
right:0; right:0;
height:0; height:0;
transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out;
background: #f6f6f6; background: $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 {
@ -396,10 +377,10 @@
border-left: 1px solid $primary-border-color; border-left: 1px solid $primary-border-color;
border-right: 1px solid $primary-border-color; border-right: 1px solid $primary-border-color;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid $primary-border-color;
box-shadow: 1px 1px 4px rgba(0,0,0,0.2); box-shadow: 1px 1px 4px $shadow;
color: #666; color: $primary-text-color;
background: #f6f6f6; background: $tertiary-background;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
@ -441,7 +422,7 @@
padding: 0; padding: 0;
li { li {
padding: 0; padding: 0;
background: #fff; background: $secondary-background;
} }
} }
} }
@ -467,23 +448,24 @@
} }
.red-ui-sidebar-vc-branch-list-entry { .red-ui-sidebar-vc-branch-list-entry {
padding: 5px 8px; padding: 5px 8px;
color: #666; margin: 0 1px;
color: $list-item-color;
background: $list-item-background;
border-left: 2px solid $list-item-background;
border-right: 2px solid $list-item-background;
cursor: pointer; cursor: pointer;
&.selected { &.selected {
border-left-color:#999; border-left-color:$list-item-border-selected;
border-right-color:#999; border-right-color:$list-item-border-selected;
} }
border-left: 2px solid #fff;
border-right: 2px solid #fff;
margin: 0 1px;
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: #f3f3f3; background: $list-item-background-hover;
border-left-color:#999; border-left-color:$list-item-border-selected;
border-right-color:#999; border-right-color:$list-item-border-selected;
} }
span { span {
margin-left: 5px; margin-left: 5px;
@ -491,7 +473,7 @@
span.current { span.current {
float: right; float: right;
font-size: 0.8em; font-size: 0.8em;
color: #999; color: $tertiary-text-color;
} }
} }
@ -526,7 +508,7 @@
} }
&.node-info-none { &.node-info-none {
text-align: center; text-align: center;
background: #fefefe; background: $list-item-background;
white-space: normal; white-space: normal;
height: auto; height: auto;
} }
@ -540,11 +522,11 @@
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #eee; background: $secondary-background-hover;
} }
} }
.red-ui-sidebar-vc-commit-more { .red-ui-sidebar-vc-commit-more {
color: #999; color: $secondary-text-color;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
font-style: italic; font-style: italic;
@ -552,39 +534,39 @@
.red-ui-sidebar-vc-commit-sha { .red-ui-sidebar-vc-commit-sha {
float: right; float: right;
font-family: $monospace-font; font-family: $monospace-font;
color: #c38888; color: $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: #666; color: $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: #aaa; color: $tertiary-text-color;
font-size: 0.7em; font-size: 0.7em;
border: 1px solid #ccc; border: 1px solid $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: #999; color: $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: #999; color: $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: #666; color: $primary-text-color;
background: #f6f6f6; background: $tertiary-background;
padding: 4px 10px; padding: 4px 10px;
height: 30px; height: 30px;
box-sizing: border-box; box-sizing: border-box;
@ -595,8 +577,8 @@
} }
} }
.red-ui-sidebar-vc-repo-toolbar { .red-ui-sidebar-vc-repo-toolbar {
color: #666; color: $primary-text-color;
background: #f6f6f6; background: $tertiary-background;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
@ -638,37 +620,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 #fff; border-left: 2px solid $list-item-background;
border-right: 2px solid #fff; border-right: 2px solid $list-item-background;
background: $list-item-background;
&.projects-list-entry-current { &.projects-list-entry-current {
&:not(.selectable) { &:not(.selectable) {
background: #f9f9f9; background: $list-item-background-selected;
} }
i { i {
color: #999; color: $secondary-text-color-selected;
} }
} }
&.selectable { &.selectable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #f3f3f3; background: $list-item-background-hover;
border-left-color:#999; border-left-color:$list-item-border-selected;
border-right-color:#999; border-right-color:$list-item-border-selected;
} }
} }
&.unselectable { &.unselectable {
color: #ccc; color: $secondary-text-color-disabled;
} }
i { i {
color: #999; color: $secondary-text-color;
width: 16px; width: 16px;
text-align: center; text-align: center;
} }
&.selected { &.selected {
background: #efefef; background: $list-item-background-selected;
border-left-color:#999; border-left-color:$list-item-border-selected;
border-right-color:#999; border-right-color:$list-item-border-selected;
} }
span { span {
display: inline-block; display: inline-block;
@ -678,7 +662,7 @@
margin: 0 10px 0 0px; margin: 0 10px 0 0px;
.fa-angle-right { .fa-angle-right {
color: #333; color: $primary-text-color;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
@ -693,7 +677,7 @@
transform: rotate(90deg); transform: rotate(90deg);
} }
} }
.red-ui-projects-dialog-file-list-entry-file-type-git { color: #999 } .red-ui-projects-dialog-file-list-entry-file-type-git { color: $tertiary-text-color }
.red-ui-projects-dialog-remote-list { .red-ui-projects-dialog-remote-list {
.red-ui-editableList-container { .red-ui-editableList-container {
@ -707,86 +691,6 @@
} }
} }
.red-ui-projects-dialog-sshkey-list {
li {
padding: 0 !important;
}
&.red-ui-projects-dialog-sshkey-list-small {
.red-ui-projects-dialog-sshkey-list-entry {
padding: 6px 0;
i {
font-size: 1em;
}
}
.red-ui-projects-dialog-sshkey-list-entry-name {
font-size: 1em;
}
.red-ui-projects-dialog-sshkey-list-entry-current {
margin-right: 10px;
padding-top: 2px;
}
}
}
.red-ui-editableList-container {
.red-ui-projects-dialog-sshkey-list {
li:last-child {
border-bottom: 0px none;
}
}
}
.red-ui-projects-dialog-sshkey-list-entry {
padding: 12px 0;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
&.sshkey-list-entry-current {
&:not(.selectable) {
background: #f9f9f9;
}
i {
color: #999;
}
}
&.selectable {
cursor: pointer;
&:hover {
background: #f3f3f3;
border-left-color: #aaa;
border-right-color: #aaa;
}
}
i {
color: #ccc;
font-size: 2em;
}
&.selected {
background: #efefef;
border-left-color:#999;
border-right-color:#999;
}
span {
display: inline-block;
vertical-align:middle;
}
.red-ui-projects-dialog-sshkey-list-entry-icon {
margin: 0 10px 0 5px;
}
.red-ui-projects-dialog-sshkey-list-entry-name {
font-size: 1.2em;
}
.red-ui-projects-dialog-sshkey-list-entry-current {
float: right;
margin-right: 20px;
font-size: 0.9em;
color: #999;
padding-top: 4px;
}
.red-ui-projects-dialog-sshkey-list-button-remove {
position: absolute;
right: 4px;
}
}
div.red-ui-projects-dialog-ssh-public-key { div.red-ui-projects-dialog-ssh-public-key {
position: relative; position: relative;
padding: 15px 20px 0; padding: 15px 20px 0;
@ -809,7 +713,7 @@ div.red-ui-projects-dialog-ssh-public-key {
padding: 10px 5px; padding: 10px 5px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #f3f3f3; background: $list-item-background-hover;
} }
} }
} }
@ -818,7 +722,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: #f6f6f6; background: $tertiary-background;
li:last-child { li:last-child {
border-bottom: none; border-bottom: none;
} }
@ -837,7 +741,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: #999; color: $secondary-text-color;
} }
.entry-name { .entry-name {
min-width: 250px; min-width: 250px;
@ -846,7 +750,7 @@ div.red-ui-projects-dialog-ssh-public-key {
font-weight: bold; font-weight: bold;
} }
.entry-detail { .entry-detail {
color: #aaa; color: $tertiary-text-color;
font-size: 0.9em; font-size: 0.9em;
} }
@ -864,7 +768,7 @@ 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: white; background: $secondary-background;
border-radius: 4px; border-radius: 4px;
border: 1px solid $secondary-border-color; border: 1px solid $secondary-border-color;
.red-ui-projects-edit-form-sublabel { .red-ui-projects-edit-form-sublabel {
@ -880,7 +784,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: #f3f3f3; background: $primary-background;
margin-top: 0 !important; margin-top: 0 !important;
padding: 5px 10px; padding: 5px 10px;
margin-bottom: 10px; margin-bottom: 10px;

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

@ -23,7 +23,7 @@
margin-left: -250px; margin-left: -250px;
top: 0px; top: 0px;
border: 1px solid $primary-border-color; border: 1px solid $primary-border-color;
box-shadow: 0 0 10px rgba(0,0,0,0.4); box-shadow: 0 0 10px $shadow;
} }
.red-ui-type-search { .red-ui-type-search {
@ -71,12 +71,12 @@
.red-ui-search-result-node-port { .red-ui-search-result-node-port {
position: absolute; position: absolute;
border-radius: 2px; border-radius: 2px;
border: 1px solid #999; border: 1px solid $node-border;;
width: 6px; width: 6px;
height: 7px; height: 7px;
top:4px; top:4px;
left:-4px; left:-4px;
background: #eee; background: $node-port-background;
box-sizing: border-box; box-sizing: border-box;
} }
.red-ui-search-result-node-output{ .red-ui-search-result-node-output{
@ -92,7 +92,7 @@
margin-left:28px; margin-left:28px;
} }
.red-ui-search-result-node-label { .red-ui-search-result-node-label {
color: #999; color: $secondary-text-color;
} }
} }
@ -114,13 +114,6 @@
background: $primary-background; background: $primary-background;
li { li {
padding: 0; padding: 0;
&.selected {
background: $list-item-background-selected;
.red-ui-search-result {
border-left-color: $list-item-border-selected;
border-right-color: $list-item-border-selected;
}
}
} }
} }
} }
@ -132,6 +125,11 @@
background: $list-item-background; background: $list-item-background;
border-left: 3px solid $list-item-background; border-left: 3px solid $list-item-background;
border-right: 3px solid $list-item-background; border-right: 3px solid $list-item-background;
li.selected & {
background: $list-item-background-selected;
border-left-color: $list-item-border-selected;
border-right-color: $list-item-border-selected;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $form-text-color; color: $form-text-color;
@ -155,9 +153,8 @@
width: 30px; width: 30px;
float:left; float:left;
height: 25px; height: 25px;
background: #ddd;
border-radius: 5px; border-radius: 5px;
border: 1px solid #999; border: 1px solid $node-border;
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -173,19 +170,22 @@
margin-right: 5px; margin-right: 5px;
} }
.red-ui-search-result-node-label { .red-ui-search-result-node-label {
color: #222; color: $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;
} }
.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;
} }
.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;
} }
.red-ui-search-empty { .red-ui-search-empty {
padding: 10px; padding: 10px;

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

@ -20,20 +20,19 @@
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
width: 315px; width: 315px;
background: #fff; background: $primary-background;
box-sizing: border-box; box-sizing: border-box;
z-index: 10; z-index: 10;
@include component-border; @include component-border;
} }
#red-ui-sidebar.closing { #red-ui-sidebar.closing {
background: #eee;
border-color: #900;
border-style: dashed; border-style: dashed;
} }
#red-ui-sidebar-content { #red-ui-sidebar-content {
position: absolute; position: absolute;
background: $secondary-background;
top: 35px; top: 35px;
right: 0; right: 0;
bottom: 25px; bottom: 25px;
@ -67,10 +66,10 @@
.sidebar-header, /* Deprecated -> red-ui-sidebar-header */ .sidebar-header, /* Deprecated -> red-ui-sidebar-header */
.red-ui-sidebar-header { .red-ui-sidebar-header {
color: #666; color: $primary-text-color;
text-align: right; text-align: right;
padding: 8px 10px; padding: 8px 10px;
background: #f3f3f3; background: $primary-background;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
white-space: nowrap; white-space: nowrap;
} }
@ -120,9 +119,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 #ccc; border:1px solid $primary-border-color;
background:#f9f9f9; background:$primary-background;
color: #999; color: $secondary-text-color;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }

27
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: #f3f3f3; background: $secondary-background;
height: 100%; height: 100%;
overflow-y:auto; overflow-y:auto;
@include disable-selection; @include disable-selection;
@ -28,8 +28,9 @@
.red-ui-palette-node { .red-ui-palette-node {
overflow: hidden; overflow: hidden;
&.selected { &.selected {
margin: 10px auto;
border-color: $node-selected-color; border-color: $node-selected-color;
background-color: #eee; border-width: 2px;
} }
} }
.red-ui-palette-label { .red-ui-palette-label {
@ -43,7 +44,7 @@
.red-ui-palette-icon-container { .red-ui-palette-icon-container {
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
background-color: #e8e8e8; background-color: $secondary-background-selected;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
a { a {
@ -52,10 +53,10 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
color: #666; color: $secondary-text-color;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: #ccc; background: $secondary-background-hover;
} }
} }
} }
@ -63,12 +64,12 @@
.red-ui-palette-node-config { .red-ui-palette-node-config {
width: 160px; width: 160px;
height: 30px; height: 30px;
background: #f3f3f3; background: $primary-background;
color: #666; color: $primary-text-color;
cursor: pointer; cursor: pointer;
} }
.red-ui-palette-node-config-type { .red-ui-palette-node-config-type {
color: #999; color: $secondary-text-color;
text-align: right; text-align: right;
padding-right: 3px; padding-right: 3px;
&:not(:first-child) { &:not(:first-child) {
@ -76,15 +77,15 @@
} }
} }
.red-ui-palette-node-config-none { .red-ui-palette-node-config-none {
color: #ddd; color: $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-unused {
border-color: #aaa; border-color: $primary-border-color;
background: #f9f9f9; background: $secondary-background-inactive;
border-style: dashed; border-style: dashed;
color: #aaa; color: $tertiary-text-color;
} }
.red-ui-sidebar-node-config-filter-info { .red-ui-sidebar-node-config-filter-info {
position: absolute; position: absolute;
@ -95,6 +96,6 @@
padding: 0 8px; padding: 0 8px;
background: $palette-header-background; background: $palette-header-background;
font-size: 0.8em; font-size: 0.8em;
color: #999; color: $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

@ -43,12 +43,12 @@
.red-ui-sidebar-context-updated { .red-ui-sidebar-context-updated {
text-align: right; text-align: right;
font-size: 11px; font-size: 11px;
color: #bbb; color: $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: #aaa; color: $tertiary-text-color;
} }

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

@ -23,8 +23,8 @@ table.node-info {
width: 100%; width: 100%;
} }
table.node-info tr:not(.blank) { table.node-info tr:not(.blank) {
border-top: 1px solid #ddd; border-top: 1px solid $secondary-border-color;
border-bottom: 1px solid #ddd; border-bottom: 1px solid $secondary-border-color;
} }
.node-info-property-expand { .node-info-property-expand {
font-size: 0.8em; font-size: 0.8em;
@ -40,7 +40,7 @@ table.node-info tr.blank {
th { th {
text-align: left; text-align: left;
font-weight: 500; font-weight: 500;
color: #444; color: $primary-text-color;
padding: 6px 3px 3px; padding: 6px 3px 3px;
} }
>* { >* {
@ -52,9 +52,9 @@ table.node-info tr.blank {
a { a {
display: block; display: block;
color: #666; color: $primary-text-color;
&:hover,&:focus { &:hover,&:focus {
color: #666; color: $primary-text-color;
text-decoration: none; text-decoration: none;
} }
&:not(.expanded) { &:not(.expanded) {
@ -89,27 +89,40 @@ table.node-info tr.blank {
} }
.node-info-none { .node-info-none {
font-style: italic; font-style: italic;
color: #aaa; color: $tertiary-text-color;
} }
table.node-info tr:not(.blank) td:first-child{ table.node-info tr:not(.blank) td:first-child{
color: #444; color: $header-text-color;
vertical-align: top; vertical-align: top;
width: 90px; width: 90px;
padding: 3px 3px 3px 6px; padding: 3px 3px 3px 6px;
background:#f9f9f9; background:$tertiary-background;
border-right: 1px solid #ddd; border-right: 1px solid $secondary-border-color;
} }
table.node-info tr:not(.blank) td:last-child{ table.node-info tr:not(.blank) td:last-child{
padding: 3px 3px 3px 6px; padding: 3px 3px 3px 6px;
color: #666; color: $primary-text-color;
overflow-y: hidden; overflow-y: hidden;
} }
div.node-info { div.node-info {
margin: 5px; margin: 5px;
} }
.node-help { .node-help {
font-size: 14px; font-size: $primary-font-size;
line-height: 1.5em; line-height: 1.5em;
a {
color: $info-text-link-color;
text-decoration: none;
}
a:hover,
a:focus {
color: $info-text-link-color;
text-decoration: underline;
}
h1 { h1 {
font-weight: 500; font-weight: 500;
font-size: 1.296em; font-size: 1.296em;
@ -138,7 +151,7 @@ div.node-info {
& > span > p:first-child { & > span > p:first-child {
} }
dl.message-properties { dl.message-properties {
border: 1px solid #ddd; border: 1px solid $secondary-border-color;
border-radius: 2px; border-radius: 2px;
margin: 5px auto 10px; margin: 5px auto 10px;
@ -147,7 +160,7 @@ div.node-info {
font-family: $monospace-font; font-family: $monospace-font;
font-weight: normal; font-weight: normal;
margin: 5px 3px 1px; margin: 5px 3px 1px;
color: #AD1625; color: $text-color-warning;
white-space: nowrap; white-space: nowrap;
&.optional { &.optional {
font-style: italic; font-style: italic;
@ -155,7 +168,7 @@ div.node-info {
} }
.property-type { .property-type {
font-family: $primary-font; font-family: $primary-font;
color: #666; color: $primary-text-color;
font-style: italic; font-style: italic;
font-size: 11px; font-size: 11px;
float: right; float: right;
@ -174,7 +187,7 @@ div.node-info {
ol.node-ports { ol.node-ports {
margin: 0; margin: 0;
li { li {
border: 1px solid #ddd; border: 1px solid $secondary-border-color;
border-radius: 2px; border-radius: 2px;
list-style-position: inside; list-style-position: inside;
padding: 3px; padding: 3px;
@ -191,7 +204,7 @@ div.node-info {
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
margin-right: 4px; margin-right: 4px;
} }
color: #333; color: $header-text-color;
&:hover, &:focus { &:hover, &:focus {
text-decoration: none; text-decoration: none;
} }
@ -211,7 +224,7 @@ div.node-info {
right: 0; right: 0;
overflow-y: scroll; overflow-y: scroll;
} }
.node-info-tips { .red-ui-help-tips {
display: none; display: none;
position: absolute; position: absolute;
left:0; left:0;
@ -220,21 +233,21 @@ div.node-info {
height: 150px; height: 150px;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
background-color: #fff; background-color: $secondary-background;
padding: 20px; padding: 20px;
box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 20px 0px $shadow;
overflow-y: auto; overflow-y: auto;
} }
.sidebar-node-info.show-tips { .sidebar-node-info.show-tips {
.sidebar-node-info-stack { .sidebar-node-info-stack {
bottom: 150px; bottom: 150px;
} }
.node-info-tips { .red-ui-help-tips {
display: block; display: block;
} }
} }
.node-info-tips:before { .red-ui-help-tips:before {
content: ''; content: '';
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -249,23 +262,23 @@ div.node-info {
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
line-height: 1.9em; line-height: 1.9em;
color : #bbb; color : $tertiary-text-color;
@include disable-selection; @include disable-selection;
cursor: default; cursor: default;
} }
.node-info-tips-buttons { .red-ui-help-tips-buttons {
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 6px; right: 6px;
a { a {
color: #ddd !important; color: $secondary-text-color;
border-color: #d9d9d9 !important; border-color: $secondary-border-color !important;
margin-left: 4px; margin-left: 4px;
} }
} }
.node-info-property-config-node { .node-info-property-config-node {
border: 1px solid #eee; border: 1px solid $secondary-border-color;
border-radius: 4px; border-radius: 4px;
padding: 2px 4px 2px; padding: 2px 4px 2px;
} }

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

@ -30,7 +30,6 @@
} }
} }
& ul { & ul {
//background: #9999ff;
list-style-type: none; list-style-type: none;
padding:0; padding:0;
margin: 0; margin: 0;
@ -159,7 +158,7 @@
height: 100%; height: 100%;
border-right: 1px solid $primary-border-color; border-right: 1px solid $primary-border-color;
margin: 0; margin: 0;
background: $primary-background; background: $tertiary-background;
overflow: visible; overflow: visible;
.red-ui-tabs-scroll-container { .red-ui-tabs-scroll-container {
@ -245,11 +244,6 @@
width: 28px; width: 28px;
margin: 4px 3px 3px; margin: 4px 3px 3px;
z-index: 2; z-index: 2;
&.red-ui-tab-link-button {
&:not(.active) {
// background: #eee;
}
}
&.red-ui-tab-link-button-menu { &.red-ui-tab-link-button-menu {
border-color: $tab-background; border-color: $tab-background;
} }

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: #888; color: $secondary-text-color;
cursor: pointer; cursor: pointer;
input { input {
display:none; display:none;
@ -24,6 +24,6 @@
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
color: #ddd; color: $secondary-text-color-disabled;
} }
} }

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

@ -37,7 +37,7 @@
li { li {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background: #fff; background: $secondary-background;
margin:0; margin:0;
padding:8px 0px; padding:8px 0px;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
@ -47,7 +47,7 @@
top: 50%; top: 50%;
left: 2px; left: 2px;
margin-top: -7px; margin-top: -7px;
color: #eee; color: $tertiary-text-color;
cursor: move; cursor: move;
} }
.red-ui-editableList-item-remove { .red-ui-editableList-item-remove {
@ -68,7 +68,7 @@
margin-right: 28px; margin-right: 28px;
} }
&.red-ui-editableList-item-deleting { &.red-ui-editableList-item-deleting {
background: #fee; background: $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: #fefefe; background: $secondary-background;
&:hover { &:hover {
background: #f0f0f0; background: $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: #ccc; color: $secondary-text-color-disabled;
} }
&.red-ui-editableList-section-header { &.red-ui-editableList-section-header {
background: #f0f0f0; background: $primary-background;
.red-ui-editableList-item-content.disabled { .red-ui-editableList-item-content.disabled {
color: #bbb; color: $secondary-text-color-disabled;
} }
} }

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

@ -19,7 +19,7 @@
position: relative; position: relative;
i { i {
font-size: 10px; font-size: 10px;
color: #666; color: $secondary-text-color;
} }
i.fa-search { i.fa-search {
position: absolute; position: absolute;
@ -61,8 +61,8 @@
position: absolute; position: absolute;
right: 18px; right: 18px;
top: 4px; top: 4px;
background: #eee; background: $primary-background;
color: #666; color: $secondary-text-color;
padding: 1px 8px; padding: 1px 8px;
font-size: 9px; font-size: 9px;
border-radius: 4px; border-radius: 4px;

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: white; background: $secondary-background;
.red-ui-palette-category { .red-ui-palette-category {
background: white; background: $secondary-background;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;

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

@ -24,7 +24,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
background: #f9f9f9; background: $tertiary-background;
border: 1px solid $form-input-border-color; border: 1px solid $form-input-border-color;
border-radius: 4px; border-radius: 4px;

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

@ -43,7 +43,6 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
box-shadow: none; box-shadow: none;
vertical-align: middle; vertical-align: middle;
// backgroun/d: #f0fff0;
} }
&.red-ui-typedInput-focus:not(.input-error) { &.red-ui-typedInput-focus:not(.input-error) {
@ -62,11 +61,11 @@
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
padding: 0 1px 0 5px; padding: 0 1px 0 5px;
display:inline-block; display:inline-block;
background: $typedInput-button-background; background: $form-button-background;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
vertical-align: middle; vertical-align: middle;
color: #555; color: $form-text-color;
i.red-ui-typedInput-icon { i.red-ui-typedInput-icon {
position: relative; position: relative;
top: -3px; top: -3px;
@ -81,7 +80,7 @@
&.disabled { &.disabled {
cursor: default; cursor: default;
i.red-ui-typedInput-icon { i.red-ui-typedInput-icon {
color: #bbb; color: $secondary-text-color-disabled;
} }
} }
.red-ui-typedInput-type-label,.red-ui-typedInput-option-label { .red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
@ -92,7 +91,7 @@
&:not(.disabled):hover { &:not(.disabled):hover {
text-decoration: none; text-decoration: none;
background: $typedInput-button-background-hover; background: $workspace-button-background-hover;
} }
&:focus { &:focus {
text-decoration: none; text-decoration: none;
@ -100,7 +99,7 @@
box-shadow: inset 0 0 0 1px $form-input-focus-color; box-shadow: inset 0 0 0 1px $form-input-focus-color;
} }
&:not(.disabled):active { &:not(.disabled):active {
background: $typedInput-button-background-active; background: $workspace-button-background-active;
text-decoration: none; text-decoration: none;
} }
&.red-ui-typedInput-full-width { &.red-ui-typedInput-full-width {
@ -127,7 +126,8 @@
position:absolute; position:absolute;
right: 0; right: 0;
.red-ui-typedInput-option-label { .red-ui-typedInput-option-label {
background:$typedInput-button-background; background:$form-button-background;
color: $form-text-color;
position:absolute; position:absolute;
left:0; left:0;
right:23px; right:23px;
@ -160,25 +160,25 @@
position: absolute; position: absolute;
border: 1px solid $primary-border-color; border: 1px solid $primary-border-color;
background: #fff; background: $secondary-background;
z-index: 2000; z-index: 2000;
a { a {
padding: 6px 18px 6px 6px; padding: 6px 18px 6px 6px;
display: block; display: block;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
color: #333; color: $form-text-color;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: $typedInput-button-background-hover; background: $workspace-button-background-hover;
} }
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background: $typedInput-button-background-active; background: $workspace-button-background-active;
outline: none; outline: none;
} }
&:active { &:active {
text-decoration: none; text-decoration: none;
background: $typedInput-button-background-active; background: $workspace-button-background-active;
} }
} }
.red-ui-typedInput-icon { .red-ui-typedInput-icon {

2
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: #f3f3f3; background: $tertiary-background;
} }
.red-ui-settings-tabs-content { .red-ui-settings-tabs-content {
position: absolute; position: absolute;

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

@ -41,12 +41,12 @@
} }
.red-ui-workspace-chart-background { .red-ui-workspace-chart-background {
fill: $workspace-background; fill: $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: $workspace-grid-color; stroke: $view-grid-color;
stroke-width: 1px; stroke-width: 1px;
} }
@ -100,7 +100,7 @@
border-left: 1px solid $primary-border-color; border-left: 1px solid $primary-border-color;
border-top: 1px solid $primary-border-color; border-top: 1px solid $primary-border-color;
background: $view-navigator-background; background: $view-navigator-background;
box-shadow: -1px 0 3px rgba(0,0,0,0.1); box-shadow: -1px 0 3px $shadow;
} }
.red-ui-navigator-border { .red-ui-navigator-border {
stroke-dasharray: 5,5; stroke-dasharray: 5,5;

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

@ -27,7 +27,7 @@
padding: 7px; padding: 7px;
height: 40px; height: 40px;
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: $secondary-background;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
white-space: nowrap; white-space: nowrap;
transition: right 0.2s ease; transition: right 0.2s ease;
@ -77,7 +77,7 @@
margin: 0; margin: 0;
height: 24px; height: 24px;
font-size: 12px; font-size: 12px;
background: #f9f9f9; background: $form-input-background;
line-height: 22px; line-height: 22px;
box-sizing: border-box; box-sizing: border-box;
} }

4
packages/node_modules/@node-red/nodes/core/io/10-mqtt.html vendored
View File

@ -135,13 +135,13 @@
<input type="text" id="node-config-input-name" data-i18n="[placeholder]common.label.name"> <input type="text" id="node-config-input-name" data-i18n="[placeholder]common.label.name">
</div> </div>
<div class="form-row"> <div class="form-row">
<ul style="background: #fff; min-width: 600px; margin-bottom: 20px;" id="node-config-mqtt-broker-tabs"></ul> <ul style="min-width: 600px; margin-bottom: 20px;" id="node-config-mqtt-broker-tabs"></ul>
</div> </div>
<div id="node-config-mqtt-broker-tabs-content" style="min-height: 170px;"> <div id="node-config-mqtt-broker-tabs-content" style="min-height: 170px;">
<div id="mqtt-broker-tab-connection" style="display:none"> <div id="mqtt-broker-tab-connection" style="display:none">
<div class="form-row node-input-broker"> <div class="form-row node-input-broker">
<label for="node-config-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label> <label for="node-config-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
<input class="input-append-left" type="text" id="node-config-input-broker" style="width:40%;" data-i18n="[placeholder]mqtt.label.example"> <input type="text" id="node-config-input-broker" style="width:40%;" data-i18n="[placeholder]mqtt.label.example">
<label for="node-config-input-port" style="margin-left:20px; width:43px; "> <span data-i18n="mqtt.label.port"></span></label> <label for="node-config-input-port" style="margin-left:20px; width:43px; "> <span data-i18n="mqtt.label.port"></span></label>
<input type="text" id="node-config-input-port" data-i18n="[placeholder]mqtt.label.port" style="width:55px"> <input type="text" id="node-config-input-port" data-i18n="[placeholder]mqtt.label.port" style="width:55px">
</div> </div>