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,
color: "#da9",
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 },
inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
@ -1072,7 +1072,7 @@ RED.nodes = (function() {
color:"#fee",
defaults: {},
label: "unknown: "+n.type,
labelStyle: "node_label_italic",
labelStyle: "red-ui-flow-node-label-italic",
outputs: n.outputs||n.wires.length,
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>'+
'</span>'+
'</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">'+
'<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+
'</div>'+
@ -200,7 +200,7 @@ RED.clipboard = (function() {
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">'+
'<ul id="red-ui-clipboard-dialog-import-tabs"></ul>'+
'</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>'+
'</div>').appendTo(message);
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);
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);
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);
localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
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);
element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell);
propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y},
@ -807,7 +807,7 @@ RED.diff = (function() {
if (remoteNode !== undefined) {
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) {
$('<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);
@ -856,7 +856,7 @@ RED.diff = (function() {
localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) {
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);
} else {
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);
if (remoteNode) {
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);
} else {
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);
if (localNode) {
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);
} else {
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);
if (remoteNode) {
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);
} else {
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 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 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') {
localRadio.prop('checked',true);
} else if (state === 'remote') {
@ -1549,7 +1549,7 @@ RED.diff = (function() {
}
currentBlock.end = diffLength;
diffBlocks.push(currentBlock);
// console.table(diffBlocks);
console.table(diffBlocks);
var diffRow;
for (var b = 0; b<diffBlocks.length; 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({
top: top+"px",
left: containerPos.left+"px",
}).appendTo("body");
}).appendTo("#red-ui-editor");
var hide = function() {
pickerBackground.remove();

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

@ -15,7 +15,7 @@
**/
(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) {
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">'+
'<div id="red-ui-editor-type-expression-panels">'+
'<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>'+
'<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>'+
'<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 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>'+

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) {
persistentNotifications[options.id] = n;
if (options.fixed) {
console.log("SHPW)")
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) {
var entry = object.info;
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);
$('<span>',{class:"red-ui-palette-module-name"}).text(entry.name||entry.id).appendTo(titleRow);
var titleRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
$('<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);
var descRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
$('<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;
$(d).draggable({
helper: 'clone',
appendTo: 'body',
appendTo: '#red-ui-editor',
revert: 'invalid',
revertDuration: 300,
revertDuration: 200,
containment:'#red-ui-main-container',
start: function() {
paletteWidth = $("#red-ui-palette").width();
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
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) {
ui.originalPosition.left = $('#' + e.target.id).offset().left;
@ -293,7 +293,7 @@ RED.palette = (function() {
for (var i=0;i<nodes.length;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();
for (var j=0;j<length;j+=10) {
var p = nodes[i].getPointAtLength(j);
@ -306,12 +306,12 @@ RED.palette = (function() {
}
}
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) {
d3.select(bestLink.parentNode).classed('link_splice',true)
d3.select(bestLink.parentNode).classed('red-ui-flow-link-splice',true)
} 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 (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);
var commitMessage = $('<textarea placeholder='+RED._("sidebar.project.versionControl.commitPlaceholder")+'></textarea>')
var commitMessage = $('<textarea></textarea>').attr("placeholder",RED._("sidebar.project.versionControl.commitPlaceholder"))
.appendTo(commitBox)
.on("change keyup paste",function() {
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.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);
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);
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);
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.stopPropagation();
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 = "";
// Note: these are the permitted status colour aliases. The actual RGB values
// are set in the CSS - flow.scss/colors.scss
var status_colours = {
"red": "#c00",
"green": "#5a8",
@ -438,23 +440,23 @@ RED.view = (function() {
for (var i=0;i<space_width;i+=+gridSize) {
gridTicks.push(i);
}
gridLayer.selectAll("line.horizontal").remove();
gridLayer.selectAll("line.horizontal").data(gridTicks).enter()
gridLayer.selectAll("line.red-ui-workspace-chart-grid-h").remove();
gridLayer.selectAll("line.red-ui-workspace-chart-grid-h").data(gridTicks).enter()
.append("line")
.attr(
{
"class":"horizontal",
"class":"red-ui-workspace-chart-grid-h",
"x1" : 0,
"x2" : space_width,
"y1" : function(d){ return d;},
"y2" : function(d){ return d;}
});
gridLayer.selectAll("line.vertical").remove();
gridLayer.selectAll("line.vertical").data(gridTicks).enter()
gridLayer.selectAll("line.red-ui-workspace-chart-grid-v").remove();
gridLayer.selectAll("line.red-ui-workspace-chart-grid-v").data(gridTicks).enter()
.append("line")
.attr(
{
"class":"vertical",
"class":"red-ui-workspace-chart-grid-v",
"y1" : 0,
"y2" : space_width,
"x1" : function(d){ return d;},
@ -466,10 +468,10 @@ RED.view = (function() {
showAllLinkPorts = -1;
for (var i=0;i<nodes.length;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) ||
(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;
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.append("rect")
.attr("class","node_placeholder")
.attr("class","red-ui-flow-node-placeholder")
.attr("rx", 5)
.attr("ry", 5)
.attr("width",node_width)
.attr("height",node_height)
.attr("fill","none")
// 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("opacity",0);
@ -744,7 +746,7 @@ RED.view = (function() {
return;
}
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 sourcePort = quickAddLink.port;
@ -1188,7 +1190,7 @@ RED.view = (function() {
nodes = RED.view.getLinksAtPoint(mouseX,mouseY);
}
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();
for (var j=0;j<length;j+=10) {
var p = nodes[i].getPointAtLength(j);
@ -1201,12 +1203,12 @@ RED.view = (function() {
}
}
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) {
d3.select(bestLink.parentNode).classed("link_splice",true)
d3.select(bestLink.parentNode).classed("red-ui-flow-link-splice",true)
} 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;
spliceTimer = null;
@ -1777,7 +1779,7 @@ RED.view = (function() {
mousedown_port_type = null;
activeSpliceLink = null;
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) {
clearTimeout(spliceTimer);
spliceTimer = null;
@ -2048,7 +2050,7 @@ RED.view = (function() {
function showTooltip(x,y,content,direction) {
var tooltip = eventLayer.append("g")
.attr("transform","translate("+x+","+y+")")
.attr("class","port_tooltip");
.attr("class","red-ui-flow-port-tooltip");
var lines = content.split("\n");
var labelWidth = 0;
@ -2056,7 +2058,7 @@ RED.view = (function() {
var labelHeights = [];
var lineHeight = 0;
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]);
labelHeights.push(0.8*labelDimensions[1]);
if (i === 0) {
@ -2090,7 +2092,7 @@ RED.view = (function() {
tooltip.append("path").attr("d",path);
lines.forEach(function(l,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("y", ly)
.attr("text-anchor",anchor)
@ -2128,7 +2130,7 @@ RED.view = (function() {
);
},500);
}
port.classed("port_hovered",active);
port.classed("red-ui-flow-port-hovered",active);
}
function portMouseOut(port,d,portType,portIndex) {
clearTimeout(portLabelHoverTimeout);
@ -2136,7 +2138,7 @@ RED.view = (function() {
portLabelHover.remove();
portLabelHover = null;
}
port.classed("port_hovered",false);
port.classed("red-ui-flow-port-hovered",false);
}
function nodeMouseUp(d) {
@ -2168,7 +2170,7 @@ RED.view = (function() {
portMouseUp(d, direction, 0);
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("class","fa-lg")
.attr("x",15)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome")
.text(fontAwesomeUnicode);
} else {
var icon = icon_group.append("image")
.attr("xlink:href",iconUrl)
.attr("class","node_icon")
.attr("class","red-ui-flow-node-icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
@ -2392,14 +2390,14 @@ RED.view = (function() {
var dirtyNodes = {};
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();
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) {
d.w=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
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
@ -2424,7 +2422,7 @@ RED.view = (function() {
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("touchstart", function(d,i){portMouseDown(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("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","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").attr("x",20).attr("y",8).style("font-size","10px").text("output");
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();
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) {
d.w=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
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
@ -2467,7 +2465,7 @@ RED.view = (function() {
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("touchstart", function(d,i){portMouseDown(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("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();
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) {
d.w=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
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
@ -2510,7 +2508,7 @@ RED.view = (function() {
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("touchstart", function(d,i){portMouseDown(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("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) {
if (d.dirty) {
var output = d3.select(this);
output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
output.selectAll(".port_index").text(function(d){ return d.i+1});
output.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
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) + ")"; });
dirtyNodes[d.id] = d;
d.dirty = false;
@ -2533,7 +2531,7 @@ RED.view = (function() {
subflowInputs.each(function(d,i) {
if (d.dirty) {
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) + ")"; });
dirtyNodes[d.id] = d;
d.dirty = false;
@ -2542,8 +2540,8 @@ RED.view = (function() {
subflowStatus.each(function(d,i) {
if (d.dirty) {
var output = d3.select(this);
output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
output.selectAll(".port_index").text(function(d){ return d.i+1});
output.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
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) + ")"; });
dirtyNodes[d.id] = d;
d.dirty = false;
@ -2552,18 +2550,17 @@ RED.view = (function() {
} else {
nodeLayer.selectAll(".subflowoutput").remove();
nodeLayer.selectAll(".subflowinput").remove();
nodeLayer.selectAll(".subflowstatus").remove();
nodeLayer.selectAll(".red-ui-flow-subflow-port-output").remove();
nodeLayer.selectAll(".red-ui-flow-subflow-port-input").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();
var nodeEnter = node.enter().insert("svg:g")
.attr("class", "node nodegroup")
.classed("node_subflow",function(d) { return activeSubflow != null; })
.classed("node_link",function(d) { return d.type === "link in" || d.type === "link out" });
.attr("class", "red-ui-flow-node red-ui-flow-node-group")
.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; });
nodeEnter.each(function(d,i) {
var node = d3.select(this);
@ -2574,32 +2571,32 @@ RED.view = (function() {
if (hideLabel) {
d.w = node_height;
} 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);
if (d._def.badge) {
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);
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) {
badgeRect.attr("cursor","pointer")
.on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
}
}
// if (d._def.badge) {
// 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);
// 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) {
// badgeRect.attr("cursor","pointer")
// .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
// }
// }
if (d._def.button) {
var nodeButtonGroup = node.append("svg:g")
.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")
.attr("class","red-ui-flow-node-button-background")
.attr("rx",5)
.attr("ry",5)
.attr("width",32)
.attr("height",node_height-4)
.attr("fill","#eee");//function(d) { return d._def.color;})
.attr("height",node_height-4);
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("y",4)
.attr("rx",4)
@ -2623,8 +2620,8 @@ RED.view = (function() {
}
var mainRect = node.append("rect")
.attr("class", "node")
.classed("node_unknown",function(d) { return d.type == "unknown"; })
.attr("class", "red-ui-flow-node")
.classed("red-ui-flow-node-unknown",function(d) { return d.type == "unknown"; })
.attr("rx", 5)
.attr("ry", 5)
.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 portType;
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;
} else {
selectClass = ".port_output .port";
selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
portType = PORT_TYPE_OUTPUT;
}
portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@ -2707,10 +2704,10 @@ RED.view = (function() {
var selectClass;
var portType;
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;
} else {
selectClass = ".port_output .port";
selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
portType = PORT_TYPE_OUTPUT;
}
portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@ -2724,33 +2721,27 @@ RED.view = (function() {
if (d._def.icon) {
var icon_url = RED.utils.getNodeIcon(d._def,d);
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);
var icon_shade = icon_group.append("rect")
.attr("x",0).attr("y",0)
.attr("class","node_icon_shade")
.attr("class","red-ui-flow-node-icon-shade")
.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);});
createIconAttributes(icon_url, icon_group, d);
var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
.attr("class","node_icon_shade_border")
.attr("stroke-opacity","0.1")
.attr("stroke","#000")
.attr("stroke-width","1");
.attr("class","red-ui-flow-node-icon-shade-border");
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.attr("class","node_icon node_icon_"+d._def.align);
//icon.attr("class","node_icon_shade 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 red-ui-flow-node-icon-"+d._def.align);
//icon.attr("class","red-ui-flow-node-icon-shade red-ui-flow-node-icon-shade-"+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) {
@ -2766,29 +2757,29 @@ RED.view = (function() {
icon_group.style("pointer-events","none");
}
var text = node.append("svg:text")
.attr("class","node_label")
.attr("class","red-ui-flow-node-label")
.attr("x", 38)
.attr("dy", ".35em")
.attr("text-anchor","start")
.classed("hide",hideLabel);
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") {
text.attr("text-anchor","end");
}
}
var status = node.append("svg:g").attr("class","node_status_group").style("display","none");
var statusRect = status.append("rect").attr("class","node_status")
var status = node.append("svg:g").attr("class","red-ui-flow-node-status-group").style("display","none");
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("rx",2).attr("ry",2).attr("stroke-width","3");
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);
node.append("g").attr("class","red-ui-view-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");
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-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() {
// clearTimeout(portLabelHoverTimeout);
// portLabelHoverTimeout = setTimeout(function() {
@ -2822,60 +2813,54 @@ RED.view = (function() {
if (hideLabel) {
d.w = node_height;
} 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.x += (d.w-ow)/2;
d.resize = false;
}
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.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
if (mouse_mode != RED.state.MOVING_ACTIVE) {
thisNode.selectAll(".node")
thisNode.selectAll(".red-ui-flow-node")
.attr("width",function(d){return d.w})
.attr("height",function(d){return d.h})
.classed("node_selected",function(d) { return d.selected; })
.classed("node_highlighted",function(d) { return d.highlighted; })
.classed("red-ui-flow-node-selected",function(d) { return d.selected; })
.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) {
thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", true);
thisNode.selectAll(".node_label").classed("node_label_right", true).attr("text-anchor", "end");
thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", true);
thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end");
} else {
thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", false);
thisNode.selectAll(".node_label").classed("node_label_right", false).attr("text-anchor", "start");
thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", false);
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(".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(".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(".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-group").attr("transform", function (d) { return "translate(0, 0)"; });
thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { return 38; });
thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){return d.w-38});
//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(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;});
//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()) {
inputPorts.remove();
} 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;
if (d.type === "link in") {
inputGroupPorts = inputGroup.append("circle")
.attr("cx",-1).attr("cy",5)
.attr("r",5)
.attr("class","port 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")
.attr("class","red-ui-flow-port red-ui-flow-link-port")
} 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);})
.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;
d.ports = d.ports || d3.range(numOutputs);
d._ports = thisNode.selectAll(".port_output").data(d.ports);
var output_group = d._ports.enter().append("g").attr("class","port_output");
d._ports = thisNode.selectAll(".red-ui-flow-port-output").data(d.ports);
var output_group = d._ports.enter().append("g").attr("class","red-ui-flow-port-output");
var output_group_ports;
if (d.type === "link out") {
output_group_ports = output_group.append("circle")
.attr("cx",11).attr("cy",5)
.attr("r",5)
.attr("class","port 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")
.attr("class","red-ui-flow-port red-ui-flow-link-port")
} else {
output_group_ports = output_group.append("rect")
.attr("class","port")
.attr("class","red-ui-flow-port")
.attr("rx",3).attr("ry",3)
.attr("width",10)
.attr("height",10)
@ -2931,11 +2913,10 @@ RED.view = (function() {
var x = d.w - 5;
d._ports.each(function(d,i) {
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)+")";});
});
}
thisNode.selectAll("text.node_label").text(function(d,i){
thisNode.selectAll("text.red-ui-flow-node-label").text(function(d,i){
var l = "";
if (d._def.label) {
l = d._def.label;
@ -2962,10 +2943,10 @@ RED.view = (function() {
}
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);
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 current_url;
if (!icon.empty()) {
@ -2980,45 +2961,45 @@ RED.view = (function() {
} else {
faIcon.remove();
}
var iconGroup = thisNode.select(".node_icon_group");
var iconGroup = thisNode.select(".red-ui-flow-node-icon-group");
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)"})
.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)"})
.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);
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(".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").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
thisNode.selectAll(".red-ui-flow-node-icon-shade").attr("height",function(d){return d.h;});
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);
});
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
});
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";
});
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;
if (d._def.button.toggle && !d[d._def.button.toggle]) {
x = x - (d._def.align == "right"?8:-8);
}
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) {
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.visible.call(d) === false) {
thisNode.selectAll(".node_button").style("display","none");
thisNode.selectAll(".red-ui-flow-node-button").style("display","none");
}
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) {
// 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(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
thisNode.selectAll("text.node_badge_label").text(function(d,i) {
if (d._def.badge) {
if (typeof d._def.badge == "function") {
try {
return d._def.badge.call(d);
} catch(err) {
console.log("Definition error: "+d.type+".badge",err);
return "";
}
} else {
return d._def.badge;
}
}
return "";
});
// thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
// thisNode.selectAll("text.node_badge_label").text(function(d,i) {
// if (d._def.badge) {
// if (typeof d._def.badge == "function") {
// try {
// return d._def.badge.call(d);
// } catch(err) {
// console.log("Definition error: "+d.type+".badge",err);
// return "";
// }
// } else {
// return d._def.badge;
// }
// }
// return "";
// });
}
if (!showStatus || !d.status) {
thisNode.selectAll(".node_status_group").style("display","none");
thisNode.selectAll(".red-ui-flow-node-status-group").style("display","none");
} else {
var fill = status_colours[d.status.fill]; // Only allow our colours for now
if (d.status.shape == null && fill == null) {
thisNode.selectAll(".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").style("display","none");
thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline").attr("transform","translate(-14,"+(d.h+3)+")");
} else {
thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
var style;
if (d.status.shape == null || d.status.shape == "dot") {
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);
thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
thisNode.selectAll(".red-ui-flow-node-status").attr("class","red-ui-flow-node-status "+statusClass);
}
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 {
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,
function(d) {
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) {
var l = d3.select(this);
d.added = true;
l.append("svg:path").attr("class","link_background link_path")
.classed("link_link", function(d) { return d.link })
l.append("svg:path").attr("class","red-ui-flow-link-background red-ui-flow-link-path")
.classed("red-ui-flow-link-link", function(d) { return d.link })
.on("mousedown",function(d) {
mousedown_link = d;
clearSelection();
@ -3131,19 +3095,19 @@ RED.view = (function() {
showTouchMenu(obj,pos);
},touchLongPressTimeout);
})
l.append("svg:path").attr("class","link_outline link_path");
l.append("svg:path").attr("class","link_line link_path")
.classed("link_link", function(d) { return d.link })
.classed("link_subflow", function(d) { return !d.link && activeSubflow });
l.append("svg:path").attr("class","red-ui-flow-link-outline red-ui-flow-link-path");
l.append("svg:path").attr("class","red-ui-flow-link-line red-ui-flow-link-path")
.classed("red-ui-flow-link-link", function(d) { return d.link })
.classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
});
link.exit().remove();
var links = linkLayer.selectAll(".link_path");
var links = linkLayer.selectAll(".red-ui-flow-link-path");
links.each(function(d) {
var link = d3.select(this);
if (d.added || d===selected_link || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) {
if (/link_line/.test(link.attr('class'))) {
link.classed("link_subflow", function(d) { return !d.link && activeSubflow });
if (/red-ui-flow-link-line/.test(link.attr('class'))) {
link.classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
}
link.attr("d",function(d){
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("link_unknown",function(d) {
link.classed("red-ui-flow-link-selected", function(d) { return d === selected_link || d.selected; });
link.classed("red-ui-flow-link-unknown",function(d) {
delete d.added;
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,
function(d) {
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) {
var g = d3.select(this);
var s = 1;
@ -3190,8 +3154,7 @@ RED.view = (function() {
}
var stemLength = s*30;
var branchLength = s*20;
var l = g.append("svg:path").attr("class","link_flow_link")
.attr("class","link_link").attr("d","M 0 0 h "+stemLength);
var l = g.append("svg:path").attr("class","red-ui-flow-link-link").attr("d","M 0 0 h "+stemLength);
var links = d.links;
var flows = Object.keys(links);
var tabOrder = RED.nodes.getWorkspaceOrder();
@ -3201,10 +3164,10 @@ RED.view = (function() {
var linkWidth = 10;
var h = node_height;
var y = -(flows.length-1)*h/2;
var linkGroups = g.selectAll(".link_group").data(flows);
var enterLinkGroups = linkGroups.enter().append("g").attr("class","link_group")
.on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',true)})
.on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',false)})
var linkGroups = g.selectAll(".red-ui-flow-link-group").data(flows);
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('red-ui-flow-link-group-active',true)})
.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('mouseup', function(f) {
if (mouse_mode !== 0) {
@ -3223,8 +3186,8 @@ RED.view = (function() {
});
enterLinkGroups.each(function(f) {
var linkG = d3.select(this);
linkG.append("svg:path").attr("class","link_flow_link")
.attr("class","link_link")
linkG.append("svg:path")
.attr("class","red-ui-flow-link-link")
.attr("d",
"M "+stemLength+" 0 "+
"C "+(stemLength+(1.7*branchLength))+" "+0+
@ -3232,7 +3195,7 @@ RED.view = (function() {
(stemLength+branchLength*1.5)+" "+y+" "
);
linkG.append("svg:path")
.attr("class","link_port")
.attr("class","red-ui-flow-link-port")
.attr("d",
"M "+(stemLength+branchLength*1.5+s*(linkWidth+7))+" "+(y-12)+" "+
"h "+(-s*linkWidth)+" "+
@ -3242,14 +3205,14 @@ RED.view = (function() {
"h "+(s*linkWidth)
);
linkG.append("svg:path")
.attr("class","link_port")
.attr("class","red-ui-flow-link-port")
.attr("d",
"M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y-12)+" "+
"h "+(s*(linkWidth*3))+" "+
"M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y+12)+" "+
"h "+(s*(linkWidth*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("y",y-4)
.attr("rx",2)
@ -3269,7 +3232,7 @@ RED.view = (function() {
label = tab.label || tab.id;
}
linkG.append("svg:text")
.attr("class","port_label")
.attr("class","red-ui-flow-port-label")
.attr("x",stemLength+branchLength*1.5+(s*15))
.attr("y",y+1)
.style("font-size","10px")
@ -3281,7 +3244,7 @@ RED.view = (function() {
linkGroups.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) {
var s = 1;
if (d.node.type === "link in") {
@ -3294,12 +3257,12 @@ RED.view = (function() {
} else {
// JOINING - unselect any selected links
linkLayer.selectAll(".link_selected").data(
linkLayer.selectAll(".red-ui-flow-link-selected").data(
activeLinks,
function(d) {
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();
if (d3.event) {
@ -3543,7 +3506,7 @@ RED.view = (function() {
},
getLinksAtPoint: function(x,y) {
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++) {
var bb = links[i].getBBox();
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 {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.ace_scroller {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.red-ui-editor, .red-ui-editor-dialog {
#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 {
background: #444;
color: #dd9;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.ace_active-line {
background: #666 !important;
}
.ace_selection {
background: #999 !important;
}
}
.ace_tooltip {
background-image: none;
background: #fcffdc;
border-radius: 4px;
@include component-shadow;
border-color: $primary-border-color;
.ace_scroller {
background: $text-editor-background;
color: $text-editor-color;
}
.ace_marker-layer .ace_active-line {
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;
z-index: 15;
}
a {
color: #0088cc;
text-decoration: none;
}
a:hover,
a:focus {
color: #005580;
text-decoration: underline;
}
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;
.red-ui-editor,
.red-ui-editor-dialog,
.red-ui-menu,
.red-ui-popover,
.red-ui-typedInput-options,
.red-ui-icon-picker {
a {
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: none;
}
p {
font-size: 14px;
font-weight: inherit;
line-height: 1.25;
color: #777;
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;
}
}
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 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 $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 {
@ -231,7 +222,7 @@ table {
right: 1px;
text-align: center;
padding: 40px;
background: white;
background: $secondary-background;
&:before {
content: '';
display: inline-block;
@ -245,14 +236,14 @@ table {
width: 80px;
}
&.red-ui-component-spinner-sidebar {
background: white;
background: $secondary-background;
padding:0;
img {
width: 40px;
}
}
&.projects-version-control-spinner-sidebar {
background: white;
background: $secondary-background;
padding:0;
img {
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;
$monospace-font: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace;
$primary-background: #f3f3f3;//#0ff;
$primary-background: #f3f3f3;
$primary-text-color: #555;
$secondary-text-color: #999;
$secondary-background: #fff;//#ff0;
$secondary-background-selected: #efefef;//#e9e900;
$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-disabled: $secondary-text-color-disabled;
$form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc;
$form-input-border-selected-color: #aaa;
$form-input-border-color: $tertiary-border-color;
$form-input-border-selected-color: #aaa;//#f0f;
$form-input-border-error-color: rgb(214, 97, 95);
$form-input-background: #fff;
$form-input-background-disabled: #eee;
$form-input-background: $secondary-background;
$form-input-background-disabled: $secondary-background-disabled;
$form-button-background: $secondary-background-selected;
$list-item-color: #666;
$list-item-background: #fff;
$list-item-background-hover: #f3f3f3;
$list-item-background-active: #efefef;
$list-item-background-selected: #eee;
$list-item-border-selected: #999;
$form-tips-background: #ffe;
$primary-border-color: #bbbbbb;
$secondary-border-color: #dddddd;
$tab-text-color-active: #555;
$tab-text-color-inactive: #666;
$tab-text-color-disabled-active: #999;
$tab-text-color-disabled-inactive: #aaa;
$tab-badge-color: #aaa;
$tab-background: #fff;
$tab-background-active: #fff;
$tab-background-selected: #f9f9f9;
$tab-background-inactive: #f0f0f0;
$tab-background-hover: #ddd;
$text-editor-color: #4D4D4C;//#00f;
$text-editor-background: $secondary-background;
$text-editor-color-disabled: $secondary-text-color-inactive;
$text-editor-background-disabled: $secondary-background-disabled;
$text-editor-gutter-background: #f6f6f6;//#ee0;
$text-editor-gutter-color: #777;//#00e;
$text-editor-gutter-active-line-background: #dcdcdc;//#dd0;
$text-editor-active-line-background: #efefef;//#ee0;
$text-editor-selection-background: #D6D6D6;//#e0e;
$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-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-hover: #ddd;
$workspace-button-background-active: #efefef;
$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-background: $secondary-background;
$workspace-button-background-hover: $secondary-background-hover;
$workspace-button-background-active: $secondary-background-selected;
$workspace-button-toggle-color: #999;
$workspace-button-toggle-color-selected: #888;
$workspace-button-toggle-color-disabled: #ddd;
$workspace-button-color: $secondary-text-color;
$workspace-button-color-disabled: $secondary-text-color-disabled;
$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;
$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;
$workspace-button-color-focus-outline: $form-input-border-color;
$shade-color: rgba(160,160,160,0.5);
$popover-background: #333;
$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-deleted: #f80000;
$diff-state-changed: #f89406;
$diff-state-changed-background: #fff2e1;
$diff-state-unchanged: #bbb;
$diff-state-unchanged-background: #fff;
$diff-state-conflicted: purple;
$diff-state-moved: #3f81b3;
$diff-state-conflict: #9b45ce;
$diff-state-conflict-background: #ffdad4;
$menuBackground: #f3f3f3;
$menuDivider: #e5e5e5;
$menuColor: #444;
$menuActiveColor: #ffffff;
$menuActiveBackground: #777;
$menuDisabledColor: #999;
$menuHoverColor: #ffffff;
$menuHoverBackground: #999;
$menuCaret: #e0e0e0;
$diff-state-added-background: #e7ffe3;
$diff-state-added-border: #b8daad;
$diff-state-added-header-background: #c0f6c0;
$diff-state-added-header-border: #aaeeaa;
$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;
$keyboard-help-key-background: #f6f6f6;
$keyboard-help-key-shadow: #999;
$diff-merge-header-color: #800080;
$diff-merge-header-background: #e5f9ff;
$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-lasso-stroke: #ff7f0e;
$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;
$port-selected-color: #ff7f0e;
$link-color: #888;
$link-link-color: #ccc;
$link-link-active-color: #ff7f0e;
@ -130,3 +229,56 @@ $link-subflow-color: #bbb;
$link-unknown-color: #f00;
$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 {
padding:0;
margin:0;
background: #fff;
background: $secondary-background;
line-height: 20px;
.red-ui-debug-msg-payload {
font-size: 14px;
@ -38,10 +38,10 @@
left: 0px;
right: 0px;
z-index: 20;
background: #f9f9f9;
background: $tertiary-background;
padding: 10px;
border-bottom: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
border-bottom: 1px solid $secondary-border-color;
box-shadow: 0 2px 6px $shadow;
}
.red-ui-debug-filter-row {
.red-ui-nodeList {
@ -51,16 +51,16 @@
.red-ui-debug-msg {
position: relative;
border-bottom: 1px solid #eee;
border-left: 8px solid #eee;
border-right: 8px solid #eee;
border-bottom: 1px solid $debug-message-border;
border-left: 8px solid $debug-message-border;
border-right: 8px solid $debug-message-border;
padding: 2px;
&>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
display: none;
}
&.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 {
display: inline-block;
}
@ -74,7 +74,7 @@
display: inline-block;
}
&:hover {
background: #f3f3f3;
background: $debug-message-background-hover;
&>.red-ui-debug-msg-tools {
.red-ui-debug-msg-tools-copy {
display: inline-block;
@ -104,32 +104,24 @@
border-radius: 1px;
padding: 0 3px;
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 {
background: #fff;
background: $debug-message-background;
font-size: 11px;
color: #707070;
color: $secondary-text-color-inactive;
}
.red-ui-debug-msg-date {
padding: 1px 5px 1px 1px;
}
.red-ui-debug-msg-topic {
display: block;
color: #a66;
color: $debug-message-text-color-meta;
}
.red-ui-debug-msg-name {
padding: 1px 5px;
color: #707070;
color: $secondary-text-color-inactive;
}
.red-ui-debug-msg-tools {
position: absolute;
@ -145,38 +137,38 @@
.red-ui-debug-msg-payload {
display: block;
padding: 2px;
background: #fff;
background: $debug-message-background;
font-family: $monospace-font;
font-size: 13px !important;
}
.red-ui-debug-msg-level-log {
border-left-color: #eee;
border-right-color: #eee;
border-left-color: $debug-message-border;
border-right-color: $debug-message-border;
}
.red-ui-debug-msg-level-30 {
border-left-color: #ffdf9d;
border-right-color: #ffdf9d;
border-left-color: $debug-message-border-warning;
border-right-color: $debug-message-border-warning;
}
.red-ui-debug-msg-level-20 {
border-left-color: #f99;
border-right-color: #f99;
border-left-color: $debug-message-border-error;
border-right-color: $debug-message-border-error;
}
.red-ui-debug-msg-object-entry {
position: relative;
padding-left: 15px;
}
.red-ui-debug-msg-element {
color: #333;
font-family: $monospace-font;
font-size: 13px !important;
color: $debug-message-text-color;
line-height: 1.3em;
}
.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-handle {
color: #666;
color: $secondary-text-color;
font-size: 1em;
width: 1em;
text-align: center;
@ -217,11 +209,11 @@
margin: 0 0 0 -1em;
}
.red-ui-debug-msg-type-other { color: #2033d6; }
.red-ui-debug-msg-type-string { color: #b72828; }
.red-ui-debug-msg-type-null { color: #666; font-style: italic;}
.red-ui-debug-msg-type-meta { color: #666; font-style: italic;}
.red-ui-debug-msg-type-number { color: #2033d6; };
.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;}
.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; };
.red-ui-debug-msg-type-number-toggle { cursor: pointer;}
.red-ui-debug-msg-row {
@ -229,30 +221,20 @@
padding: 4px 2px 2px;
position: relative;
&.red-ui-debug-msg-row-pinned {
background: #f6f6f6;
background: $list-item-border-selected;
}
}
.red-ui-debug-msg-expandable {
cursor: pointer;
}
.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 {
font-size: 9px;
color: #bbb;
border: 1px solid #bbb;
border-radius: 2px;
padding: 2px 5px;
.red-ui-debug-msg-buffer-opts {
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 {
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 {
border-radius:1px;
padding:0;
background: #f9f9f9;
background: $tertiary-background;
}
.red-ui-diff-list {
li {
background: #f9f9f9;
background: $tertiary-background;
padding: 0px;
border: none;
min-height: 0;
@ -62,7 +62,7 @@
white-space: nowrap;
text-overflow: ellipsis;
width: 50%;
background: #f9f9f9;
background: $tertiary-background;
text-align: center;
border-top: 1px solid $secondary-border-color;
border-color:$secondary-border-color;
@ -75,16 +75,16 @@
.red-ui-diff-dialog-toolbar {
box-sizing: border-box;
color: #666;
color: $secondary-text-color;
text-align: right;
padding: 8px 10px;
background: #f3f3f3;
background: $primary-background;
border-bottom: 1px solid $secondary-border-color;
white-space: nowrap;
}
.red-ui-diff-list-flow {
background: #fff;
border: 1px solid #ddd;
background: $secondary-background;
border: 1px solid $secondary-border-color;
border-radius: 1px;
overflow: hidden;
@ -114,10 +114,10 @@
font-size: 0.9em;
&:first-child {
border-top: 1px solid $secondary-border-color;
border-top: 1px solid $tertiary-border-color;
}
&:not(:last-child) {
border-bottom: 1px solid $secondary-border-color;
border-bottom: 1px solid $tertiary-border-color;
}
&.collapsed {
@ -150,7 +150,7 @@
width: 100%;
}
td, th {
border-top: 1px solid #f3f3f3;
border-top: 1px solid $secondary-border-color;
border-left: 1px solid $secondary-border-color;
&:first-child {
border-left: none;
@ -166,7 +166,7 @@
overflow:hidden;
}
&:hover {
background: #f9f9f9;
background: $secondary-background-selected;
}
}
@ -211,9 +211,8 @@
.red-ui-diff-list-flow-title {
cursor: pointer;
padding: 0;
// background: #f6f6f6;
&:hover {
background: #f9f9f9;
background: $secondary-background-selected;
}
}
.red-ui-diff-list-flow-title-meta {
@ -224,7 +223,7 @@
.red-ui-diff-list-node-header {
cursor: pointer;
&:hover {
background: #f9f9f9;
background: $secondary-background-selected;
}
}
.red-ui-diff-list-node-icon {
@ -233,9 +232,9 @@
margin: 5px;
width: 18px;
height: 15px;
background: #ddd;
background: $form-input-background;
border-radius: 2px;
border: 1px solid #999;
border: 1px solid $node-border;
background-position: 5% 50%;
background-repeat: no-repeat;
background-size: contain;
@ -266,7 +265,6 @@
}
}
.red-ui-diff-status-deleted {
//background: #fadddd;
cursor: default !important;
.red-ui-diff-status {
color: $diff-state-deleted;
@ -280,27 +278,23 @@
}
}
.red-ui-diff-status-added {
//background: #eefaee;
cursor: default !important;
.red-ui-diff-status {
color: $diff-state-added;
}
}
.red-ui-diff-status-moved {
//background: #eefaee;
.red-ui-diff-status {
color: $diff-state-moved;
}
}
.red-ui-diff-status-changed {
//background: #fff2ca;
.red-ui-diff-status {
color: $diff-state-changed;
}
}
.red-ui-diff-status-unchanged {
//background: #fff2ca;
.red-ui-diff-status {
color: $diff-state-unchanged;
}
@ -318,7 +312,7 @@
}
.red-ui-diff-list-node-properties {
margin: 0;
color: #666;
color: $primary-text-color;
}
.red-ui-diff-status {
display: inline-block;
@ -366,12 +360,12 @@
position: relative;
}
.red-ui-diff-empty {
background: #f3f3f3;
background: $secondary-background-disabled;
background: repeating-linear-gradient(
20deg,
#fff, #fff 5px,
#f6f6f6 5px,
#f6f6f6 10px
$secondary-background, $secondary-background 5px,
$secondary-background-disabled 5px,
$secondary-background-disabled 10px
);
}
.red-ui-diff-list-node-cell:first-child {
@ -416,9 +410,6 @@
width: 30px;
text-align: center;
}
& > li:not(:last-child) {
border-bottom: 1px solid #999;
}
}
}
@ -430,57 +421,60 @@
}
.red-ui-diff-list-cell {
.red-ui-debug-msg-row:hover {
background: none;
}
&.red-ui-diff-status-changed {
background: #fff2e1 !important;
background: $diff-state-changed-background;
}
&.red-ui-diff-status-conflict {
background: #ffdad4 !important;
background: $diff-state-conflict-background;
}
}
.red-ui-diff-selectbox {
label.red-ui-diff-selectbox {
position: absolute;
top:0;
right:0;
bottom:0;
width: 35px;
text-align: center;
border-left: 1px solid #eee;
border-left: 1px solid $secondary-border-color;
margin:0;
input.red-ui-diff-selectbox-input {
input[type="radio"] {
margin-top: 8px;
}
&:hover {
background: #f3f3f3;
background: $secondary-background-hover;
}
}
.red-ui-diff-list-node-conflict.node-diff-select-remote {
.red-ui-diff-list-node-remote {
background: #e7ffe3;
background: $diff-state-added-background;
label {
border-left-color: #b8daad;
border-left-color: $diff-state-added-border;
}
}
.red-ui-diff-list-node-local {
background: #ffe1e1;
background: $diff-state-deleted-background;
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-local {
background: #e7ffe3;
background: $diff-state-added-background;
label {
border-left-color: #b8daad;
border-left-color: $diff-state-added-border;
}
}
.red-ui-diff-list-node-remote {
background: #ffe1e1;
background: $diff-state-deleted-background;
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;
width: 30px;
margin-right: 10px;
&.fa-check {
color: $text-color-green;
}
&.fa-exclamation {
color: $secondary-text-color;
}
}
div {
vertical-align: middle;
@ -540,14 +540,14 @@ ul.red-ui-deploy-dialog-confirm-list {
td.lineno {
font-family: $monospace-font;
text-align: right;
color: #999;
background: #f6f6f6;
color: $tertiary-text-color;
background: $tertiary-background;
padding: 1px 5px;
&.added {
background: #c0f6c0;
background: $diff-state-added-header-background;
}
&.removed {
background: #ffcccc;
background: $diff-state-deleted-header-background;
}
}
td.lineno:nth-child(3) {
@ -557,66 +557,67 @@ ul.red-ui-deploy-dialog-confirm-list {
font-family: $monospace-font;
white-space: pre-wrap;
padding: 1px 5px;
border-left: 1px solid #ccc;
border-left: 1px solid $tertiary-border-color;
span.prefix {
width: 30px;
display: inline-block;
text-align: center;
color: #999;
color: $secondary-text-color;
}
&.added {
border-left-color: #aaeeaa
border-left-color: $diff-state-added-header-border;
}
&.removed {
border-left-color: #eebbbb
border-left-color: $diff-state-deleted-header-border;
}
}
td.blank {
background: #f6f6f6;
background: $tertiary-background;
}
td.added {
background: #eefaee;
background: $diff-state-added-background;
}
td.removed {
background: #ffecec;
background: $diff-state-deleted-background;
}
tr.mergeHeader td {
color: #800080;
background: #e5f9ff;
color: $diff-merge-header-color;
background: $diff-merge-header-background;
height: 26px;
vertical-align: middle;
}
tr.mergeHeader-separator td {
color: #800080;
background: darken(#e5f9ff, 10%);
color: $diff-merge-header-color;
background: $diff-merge-header-border-color;
height: 0px;
}
tr.mergeHeader-ours td {
border-top: 2px solid darken(#e5f9ff, 10%);
border-top: 2px solid $diff-merge-header-border-color;
}
tr.mergeHeader-theirs td {
border-bottom: 2px solid darken(#e5f9ff, 10%);
border-bottom: 2px solid $diff-merge-header-border-color;
}
td.unchanged {
color: #999;
background: $diff-state-unchanged-background;
color: $diff-state-unchanged;
}
tr.unchanged {
background: #fefefe;
background: $diff-state-unchanged-background;
}
tr.start-block {
border-top: 1px solid #f0f0f0;
border-top: 1px solid $secondary-border-color;
}
tr.end-block {
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid $secondary-border-color;
}
tr.red-ui-diff-text-file-header td {
.filename {
font-family: $monospace-font;
}
background: #f3f3f3;
background: $primary-background;
padding: 5px 10px 5px 0;
color: #333;
color: $primary-text-color;
cursor: pointer;
i.red-ui-diff-list-chevron {
width: 30px;
@ -628,9 +629,9 @@ ul.red-ui-deploy-dialog-confirm-list {
}
}
tr.red-ui-diff-text-commit-header td {
background: #f3f3f3;
background: $primary-background;
padding: 5px 10px;
color: #333;
color: $primary-text-color;
h3 {
font-size: 1.4em;
margin: 0;
@ -638,7 +639,7 @@ ul.red-ui-deploy-dialog-confirm-list {
.commit-summary {
border-top: 1px solid $secondary-border-color;
padding-top: 5px;
color: #999;
color: $secondary-text-color;
}
.commit-body {
margin-bottom:15px;
@ -651,17 +652,17 @@ ul.red-ui-deploy-dialog-confirm-list {
font-family: $monospace-font;
padding: 5px 10px;
text-align: left;
color: #666;
background: #ffd;
color: $secondary-text-color;
background: $diff-text-header-background;
height: 30px;
vertical-align: middle;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid $secondary-border-color;
border-bottom: 1px solid $secondary-border-color;
}
tr.red-ui-diff-text-expand td {
cursor: pointer;
&: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;
top: 0; bottom: 0;
left: 0; right: 0;
background: rgba(0,0,0,0.3);
background: $dnd-background;
display:table;
width: 100%;
height: 100%;
@ -30,7 +30,7 @@
vertical-align: middle;
text-align: center;
font-size: 40px;
color: #fff;
color: $dnd-color;
i {
pointer-events: none;
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;
background: $menuBackground;
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 {
right: 0;
@ -45,7 +45,7 @@
}
& > li > a {
display: block;
padding: 3px 0 3px 32px;
padding: 4px 0 4px 32px;
clear: both;
font-weight: normal;
line-height: 20px;
@ -168,5 +168,5 @@
}
.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;
right: -1000px;
bottom: 0;
background: #fff;
background: $secondary-background;
border-left: 1px solid $secondary-border-color;
border-bottom: 1px solid $primary-border-color;
box-sizing: content-box;
@ -111,10 +111,11 @@
}
.red-ui-tray-titlebar {
color: $header-text-color;
border-bottom: 1px solid $secondary-border-color;
padding: 8px;
}
.red-ui-tray-breadcrumbs {
.red-ui-editor ul.red-ui-tray-breadcrumbs {
list-style-type: none;
margin: 0;
padding:0;
@ -125,7 +126,7 @@
margin:0;
&:not(:last-child) {
color: $editor-button-color;
color: $workspace-button-color;
font-weight: normal;
&:after {
@ -146,7 +147,7 @@
background: $primary-background url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize;
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 {
background: $primary-background;
@ -166,20 +167,19 @@ button.red-ui-tray-resize-button {
color: $workspace-button-color;
}
.red-ui-editor {
.red-ui-editor .red-ui-tray {
.dialog-form, #dialog-form, #node-config-dialog-edit-form {
margin: 20px;
height: calc(100% - 40px);
}
}
.red-ui-editor-dialog {
.red-ui-editor,.red-ui-editor-dialog {
.dialog-form, #dialog-form, #node-config-dialog-edit-form {
margin: 0;
height:100%;
}
}
.red-ui-editor,.red-ui-editor-dialog {
.input-error {
border-color: $form-input-border-error-color !important;
@ -198,7 +198,7 @@ button.red-ui-tray-resize-button {
width:70%;
}
.form-tips {
background: #ffe;
background: $form-tips-background;
padding: 8px;
border-radius: 2px;
border: 1px solid $secondary-border-color;
@ -213,7 +213,7 @@ button.red-ui-tray-resize-button {
}
.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 {
border:1px solid #ccc;
border:1px solid $tertiary-border-color;
border-radius:5px;
overflow: hidden;
font-size: $primary-font-size !important;
@ -271,7 +271,7 @@ button.editor-button-small {
#red-ui-editor-config-scope-warning {
display: inline-block;
margin-right: 5px;
color: #AD1625;
color: $text-color-warning;
vertical-align: middle;
}
#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;
height: 100%;
.red-ui-panel {
@ -317,47 +317,38 @@ button.editor-button-small {
}
}
}
.red-ui-editor-type-expression-legacy, .red-ui-editor-type-buffer-type {
font-size: 0.8em;
.red-ui-editor-type-expression-legacy {
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 {
float: none;
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;
height: 100%;
.red-ui-panel {
padding: 20px 20px 10px;
&:last-child {
padding-top: 60px;
background: #f9f9f9;
background: $primary-background;
}
}
}
.red-ui-editor-type-markdown-panel-preview {
padding: 10px;
border:1px solid #ccc;
border:1px solid $secondary-border-color;
border-radius:5px;
height: calc(100% - 21px);
overflow-y: scroll;
background: #fff;
background: $secondary-background;
}
#red-ui-clipboard-hidden {
position: absolute;
top: -3000px;
}
.red-ui-editor-node-label-form-row {
.form-row .red-ui-editor-node-label-form-row {
margin: 5px 0 0 50px;
label {
margin-right: 20px;
@ -382,17 +373,11 @@ button.editor-button-small {
span {
padding-left: 50px;
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 {
position: relative;
padding-left: 30px;
@ -411,7 +396,7 @@ button.editor-button-small {
position: absolute;
border: 1px solid $primary-border-color;
box-shadow: 0 1px 6px -3px black;
background: white;
background: $secondary-background;
z-Index: 21;
display: none;
select {
@ -433,12 +418,12 @@ button.editor-button-small {
cursor: pointer;
border-radius: 4px;
&:hover {
background: lighten($node-selected-color,20%);
background: $list-item-background-hover;
}
&.selected {
background: lighten($node-selected-color,20%);
background: $list-item-background-selected;
.red-ui-search-result-node {
border-color: white;
// border-color: white;
}
}
.red-ui-palette-icon-fa {
@ -450,7 +435,7 @@ button.editor-button-small {
background: $palette-header-background;
font-size: 0.9em;
padding: 3px;
color: #666;
color: $secondary-text-color;
clear: both;
i {
margin-right: 5px;
@ -458,9 +443,11 @@ button.editor-button-small {
}
.red-ui-icon-meta {
border-top: 1px solid $secondary-border-color;
background: $tertiary-background;
height: 24px;
span {
padding: 4px;
color: #666;
color: $secondary-text-color;
font-size: 0.9em;
}
button {

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

@ -21,28 +21,25 @@
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;
}
.node_label_unknown {
font-style: italic;
fill: #e00 !important;
.red-ui-flow-node-label-white {
fill: $view-background !important;
}
.node_label_white {
fill: #eee !important;
}
.node_label {
.red-ui-flow-node-label {
stroke-width: 0;
fill: #333;
fill: $node-label-color;
font-size: 14px;
pointer-events: none;
-webkit-touch-callout: none;
@include disable-selection;
}
.port_label {
.red-ui-flow-port-label {
stroke-width: 0;
fill: #888;
fill: $secondary-text-color;
font-size: 16px;
alignment-baseline: middle;
text-anchor: middle;
@ -52,158 +49,142 @@
}
.function_label {
font-size: 12px;
}
.node {
stroke: #999;
.red-ui-flow-node {
stroke: $node-border;
cursor: move;
stroke-width: 1;
}
.node_unknown {
.red-ui-flow-node-unknown {
stroke-dasharray:10,4;
stroke: #f33;
stroke: $node-border-unknown;
}
.node_placeholder {
.red-ui-flow-node-placeholder {
stroke-dasharray:10,4;
stroke: #aaa;
fill: #eee;
stroke: $node-border-placeholder;
fill: $node-background-placeholder;
opacity: 0.5;
stroke-width: 2;
}
.node_button {
fill: inherit;
.red-ui-flow-node-icon-group {
.fa-lg {
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 {
stroke: #999;
.red-ui-flow-node-button {
fill: inherit;
}
.red-ui-flow-node-button-background {
fill: $node-background-placeholder;
}
.red-ui-flow-port {
stroke: $node-border;
stroke-width: 1;
fill: #ddd;
fill: $node-port-background;
cursor: crosshair;
}
.port_highlight {
stroke: #6DA332;
stroke-width: 3;
fill: #fff;
pointer-events:none;
fill-opacity: 0.5;
}
.red-ui-view-node-error {
fill: rgb(255, 102, 0);
stroke: rgb(145, 16, 2);
.red-ui-flow-node-error {
fill: $node-status-error-background;
stroke: $node-status-error-border;
stroke-width:1px;
cursor: default;
stroke-linejoin: round;
stroke-linecap: round;
}
.red-ui-view-node-changed {
fill: rgb(0, 188, 255);
stroke: rgb(28, 102, 140);
.red-ui-flow-node-changed {
fill: $node-status-changed-background;
stroke: $node-status-changed-border;
cursor: default;
stroke-width:1px;
stroke-linejoin: round;
stroke-linecap: round;
}
.node_badge {
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 {
.red-ui-flow-node-selected {
stroke-width: 2;
stroke: $node-selected-color !important;
}
.node_highlighted {
border-color: #dd1616 !important;
.red-ui-flow-node-highlighted {
border-color: $node-selected-color !important;
border-style: dashed !important;
stroke: #dd1616;
stroke: $node-selected-color;
stroke-width: 2;
stroke-dasharray: 10, 4;
}
.node_hovered {
}
.node_subflow .node {
.red-ui-flow-subflow .red-ui-flow-node {
stroke-dasharray:8, 3;
}
.workspace-disabled {
.link_line {
.red-ui-workspace-disabled {
.red-ui-flow-link-line {
stroke-dasharray: 10,5 !important;
stroke-width: 2 !important;
stroke: $link-subflow-color;
}
.node {
.red-ui-flow-node {
stroke-dasharray: 10,4;
}
}
.node_quickadd * {
stroke-dasharray: 12,3;
@each $current-color in red green yellow blue grey {
.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;
stroke-width: 0;
fill: #888;
fill: $secondary-text-color;
font-size:9pt;
stroke:#000;
text-anchor:start;
}
.port_hovered {
stroke: $port-selected-color !important;
fill: $port-selected-color !important;
}
.port_quick_link {
.red-ui-flow-port-hovered {
stroke: $port-selected-color;
fill: $port-selected-color;
}
.subflowport {
.red-ui-flow-subflow-port {
stroke-dasharray: 5,5;
fill: #eee;
stroke: #999;
fill: $node-background-placeholder;
stroke: $node-border;
}
.drag_line {
.red-ui-flow-drag-line {
stroke: $node-selected-color !important;
stroke-width: 3;
fill: none;
pointer-events: none;
}
.drag_line_hidden {
stroke: $node-selected-color;
stroke-width: 0;
pointer-events: none;
fill: none;
}
.link_line {
.red-ui-flow-link-line {
stroke: $link-color;
stroke-width: 3;
fill: none;
pointer-events: none;
}
.link_link {
.red-ui-flow-link-link {
stroke-width: 2;
stroke-dasharray: 10,5;
stroke: $link-link-color;
@ -211,55 +192,55 @@
stroke-dasharray: 15,2;
// pointer-events: none;
}
.link_port {
fill: #eee;
.red-ui-flow-link-port {
fill: $node-link-port-background;
stroke: $link-link-color;
stroke-width: 1;
}
.link_group_active .link_port {
.red-ui-flow-link-group-active .red-ui-flow-link-port {
stroke: $link-link-active-color;
}
.link_group:hover {
.red-ui-flow-link-group:hover {
cursor: pointer;
}
.link_subflow {
.red-ui-flow-subflow-link {
stroke: $link-subflow-color;
stroke-dasharray: 10,5;
stroke-width: 2;
}
.link_outline {
stroke: #fff;
.red-ui-flow-link-outline {
stroke: $view-background;
stroke-width: 5;
cursor: crosshair;
fill: none;
pointer-events: none;
}
.link_background {
stroke: #fff;
.red-ui-flow-link-background {
stroke: $view-background;
opacity: 0;
stroke-width: 20;
cursor: crosshair;
fill: none;
}
.link_splice > .link_line {
.red-ui-flow-link-splice > .red-ui-flow-link-line {
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;
}
g.link_unknown path.link_line {
g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
stroke: $link-unknown-color;
stroke-width: 2;
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;
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;
path {
@ -268,7 +249,7 @@ g.link_unknown path.link_line {
stroke-width: 1;
}
}
.port_tooltip_label {
.red-ui-flow-port-tooltip-label {
stroke-width: 0;
fill: $popover-color;
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;
font-size: 21px;
line-height: 40px;
color: #333333;
color: $tertiary-text-color;
border: 0;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $secondary-border-color;
}
legend small {
font-size: 15px;
color: #999999;
color: $tertiary-text-color;
}
@ -194,7 +193,6 @@
.uneditable-input {
background-color: $form-input-background;
border: 1px solid $form-input-border-color;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
textarea:focus,
@ -258,18 +256,16 @@
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: 2px auto $form-input-focus-color;
outline-offset: -3px;
}
.uneditable-input,
.uneditable-textarea {
color: #999999;
color: $form-text-color-disabled;
cursor: not-allowed;
background-color: #fcfcfc;
border-color: #cccccc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
background-color: $form-input-background-disabled;
border-color: $form-input-border-color;
}
.uneditable-input {
@ -386,7 +382,7 @@
}
label.disabled {
color: #bbb !important;
color: $form-text-color-disabled;
cursor: default;
}
@ -407,20 +403,25 @@
background-color: transparent;
}
input:invalid,
div[contenteditable="true"]:invalid,
textarea:invalid,
select:invalid {
border-color: $form-input-border-error-color;
}
input:focus:invalid,
div[contenteditable="true"]:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
border-color: $form-input-border-error-color;
}
input:focus:invalid:focus,
div[contenteditable="true"]:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
border-color: #e9322d;
box-shadow: 0 0 6px #f8b9b7;
border-color: $form-input-border-error-color;
}
.input-append,
@ -484,9 +485,8 @@
font-weight: normal;
line-height: 20px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
background-color: #eeeeee;
border: 1px solid #ccc;
background-color: $form-button-background;
border: 1px solid $form-input-border-color;
}
.input-append .add-on,
@ -499,12 +499,6 @@
border-radius: 0;
}
.input-append .active,
.input-prepend .active {
background-color: #a9dba9;
border-color: #46a546;
}
.input-prepend .add-on,
.input-prepend .btn {
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.
**/
$activeButton: #121212;
$deployButton: #8C101C;
$deployButtonHover: #6E0A1E;
$deployButtonActive: #4C0A17;
$deployDisabledButton: #444;
$deployDisabledButtonHover: #555;
$deployDisabledButtonActive: #444;
$headerMenuColor: #C7C7C7;
$headerMenuBackground: #121212;
$headerMenuItemHover: #323232;
$headerMenuItemDivider: #464646;
.button {
@include disable-selection;
}
@ -40,10 +24,10 @@ $headerMenuItemDivider: #464646;
left: 0;
width: 100%;
height: 40px;
background: #000;
background: $header-background;
box-sizing: border-box;
padding: 0px 0px 0px 20px;
color: $headerMenuColor;
color: $header-menu-color;
font-size: 14px;
span.red-ui-header-logo {
@ -96,17 +80,17 @@ $headerMenuItemDivider: #464646;
font-size: 20px;
padding: 0px 12px;
text-decoration: none;
color: $headerMenuColor;
color: $header-menu-color;
margin: auto 5px;
vertical-align: middle;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid $header-background;
border-right: 2px solid $header-background;
&:hover {
border-color: $headerMenuItemHover;
border-color: $header-menu-item-hover;
}
&:active, &.active {
background: $activeButton;
background: $header-button-background-active;
}
&:focus {
outline: none;
@ -131,16 +115,18 @@ $headerMenuItemDivider: #464646;
}
.red-ui-deploy-button {
background: $deployButton;
color: #eee !important;
background: $deploy-button-background;
color: $deploy-button-color;
&:hover {
background: $deployButtonHover;
background: $deploy-button-background-hover;
}
&:focus {
outline: none;
}
&:active {
background: $deployButtonActive;
color: #ccc !important;
background: $deploy-button-background-active;
color: $deploy-button-color-active;
}
}
@ -162,21 +148,21 @@ $headerMenuItemDivider: #464646;
padding: 4px 12px;
&.disabled {
cursor: default;
background: $deployDisabledButton;
color: #999 !important;
background: $deploy-button-background-disabled;
color: $deploy-button-color-disabled;
.red-ui-deploy-button-content>img {
opacity: 0.3;
}
&+ #red-ui-header-button-deploy-options {
background: $deployDisabledButton;
color: #ddd;
background: $deploy-button-background-disabled;
color: $deploy-button-color-active;
}
&+ #red-ui-header-button-deploy-options:hover {
background: $deployDisabledButtonHover;
background: $deploy-button-background-disabled-hover;
}
&+ #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-header-button-deploy-options {
background: $activeButton !important;
background: $header-button-background-active !important;
}
}
li.open .button {
background: $activeButton;
border-color: $activeButton;
background: $header-button-background-active;
border-color: $header-button-background-active;
}
ul.red-ui-menu-dropdown {
background: $headerMenuBackground;
border: 1px solid rgba(0,0,0,0.2);
background: $header-menu-background;
border: 1px solid $header-menu-background;
width: 250px !important;
margin-top: 0;
li a {
color: $headerMenuColor;
color: $header-menu-color;
padding: 3px 40px;
img {
margin-right: 10px;
padding: 4px;
border: 3px solid rgba(0,0,0,0);
border: 3px solid transparent;
}
&.active img {
border: 3px solid #777677;
border: 3px solid $header-menu-item-border-active;
}
span.red-ui-menu-label-container {
@ -227,7 +213,7 @@ $headerMenuItemDivider: #464646;
text-indent: 0px;
}
span.red-ui-menu-sublabel {
color: #aeaeae;
color: $header-menu-sublabel-color;
font-size: 13px;
display: inline-block;
text-indent: 0px;
@ -235,40 +221,43 @@ $headerMenuItemDivider: #464646;
}
> li:hover > a,
> li:focus > a {
background: $headerMenuItemHover !important;
background: $header-menu-item-hover !important;
}
li.divider {
background: $headerMenuItemDivider;
border-bottom-color: $headerMenuItemHover;
border-bottom-color: $header-menu-item-hover;
}
li.disabled a {
color: #666;
color: $header-menu-color-disabled;
}
> li.disabled:hover > a,
> li.disabled:focus > a {
background: none !important;
}
}
.red-ui-menu-dropdown-submenu>a:before {
border-right-color: $headerMenuCaret;
}
/* Deploy menu customisations */
ul#red-ui-header-button-deploy-options-submenu {
width: 300px !important;
li a {
padding: 10px 30px;
color: #fff;
color: $header-menu-heading-color;
span.red-ui-menu-label {
font-size: 16px;
display: inline-block;
text-indent: 0px;
}
> i.fa {
display: none !important;
display: none;
}
}
}
/* User menu customisations */
#usermenu-item-username > .red-ui-menu-label {
color: #fff;
color: $header-menu-heading-color;
}
#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 {
border-radius: 1px;
background: #fff;
background: $secondary-background;
padding: 0;
@include component-shadow;
}
@ -51,16 +51,20 @@
}
.ui-dialog .ui-dialog-titlebar {
padding: 10px;
background: #f3f3f3;
background: $primary-background;
border: none;
border-bottom: 1px solid #999;
border-bottom: 1px solid $primary-border-color;
border-radius: 0;
}
.ui-dialog .ui-dialog-buttonpane.ui-widget-content {
background: $tertiary-background;
}
.ui-corner-all {
border-radius: 1px;
}
.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 {
display: none;
@ -80,8 +84,8 @@
padding: 6px 14px;
margin-right: 8px;
border-radius: 2px;
color: $editor-button-color;
background: $editor-button-background;
color: $workspace-button-color;
background: $workspace-button-background;
&.leftButton {
float: left;
@ -92,18 +96,18 @@
}
&.primary {
border-color: $editor-button-background-primary;
color: $editor-button-color-primary !important;
background: $editor-button-background-primary;
border-color: $workspace-button-background-primary;
color: $workspace-button-color-primary !important;
background: $workspace-button-background-primary;
&:not(.disabled):hover {
border-color: $editor-button-background-primary-hover;
background: $editor-button-background-primary-hover;
color: $editor-button-color-primary !important;
border-color: $workspace-button-background-primary-hover;
background: $workspace-button-background-primary-hover;
color: $workspace-button-color-primary !important;
}
&.disabled {
border-color: $form-input-border-color;
color: $workspace-button-color-disabled !important;
background: $editor-button-background;
background: $workspace-button-background;
}
}
&.disabled {
@ -130,15 +134,12 @@
border: 1px solid $form-input-border-color;
}
.ui-spinner input {
background: $form-input-background;
margin: 0 17px 0 0;
padding: 6px;
border: none;
border-top-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 {
outline: none;
}
@ -150,3 +151,41 @@
z-index: 100;
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;
border-bottom: 1px solid $primary-border-color;
div {
color: #666 !important;
color: $header-text-color !important;
}
.red-ui-searchBox-container {
width: calc(100% - 20px);
@ -49,7 +49,7 @@
}
}
li:hover {
background: #f6f6f6;
background: $list-item-background-hover;
}
}
.keyboard-shortcut-entry {
@ -78,13 +78,13 @@
width: calc(100% - 160px - 100px - 10px);
overflow: hidden;
i {
color: #ccc;
color: $tertiary-text-color;
margin-right: 5px;
}
}
.keyboard-shortcut-entry-scope {
width:100px;
color: #999;
color: $tertiary-text-color;
vertical-align: middle;
text-align: right;
}
@ -94,12 +94,13 @@
}
}
.keyboard-shortcut-entry-unassigned {
color: #999;
color: $tertiary-text-color;
.keyboard-shortcut-entry-key {
font-style: italic;
}
}
.keyboard-shortcut-entry-expanded {
background: $list-item-background-selected;
.keyboard-shortcut-entry-key {
width: 150px;
}
@ -114,12 +115,12 @@
}
}
.help-key {
border: 1px solid $keyboard-help-key-border;
border: 1px solid $tertiary-border-color;
padding: 4px;
border-radius: 3px;
background: $keyboard-help-key-background;
background: $tertiary-background;
font-family: $monospace-font;
box-shadow: $keyboard-help-key-shadow 1px 1px 1px;
box-shadow: $shade-color 1px 1px 1px;
}
.help-key-block {
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)
}
}
.red-ui-clipboard-dialog-box {
height: 400px;
position:relative;
border:1px solid $primary-border-color;
}
.red-ui-clipboard-dialog-tab-library {
.form-row {
@ -101,7 +106,7 @@
position: relative;
height: 100%;
.red-ui-treeList-container {
background: white;
background: $secondary-background;
border: none;
border-radius: 0;
li {

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

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

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

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

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

@ -20,7 +20,7 @@
top: 0px;
bottom: 0px;
left:0px;
background: #f3f3f3;
background: $primary-background;
width: 180px;
text-align: center;
@include disable-selection;
@ -55,7 +55,7 @@
.red-ui-palette-search {
position: relative;
overflow: hidden;
background: #ffffff;
background: $secondary-background;
text-align: center;
height: 35px;
padding: 3px;
@ -64,10 +64,10 @@
}
.red-ui-palette-category {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid $secondary-border-color;
}
.red-ui-palette-content {
background: #fff;
background: $palette-content-background;
padding: 3px;
}
@ -106,6 +106,7 @@
clear: both;
}
.red-ui-palette-label {
color: $node-label-color;
font-size: 13px;
margin: 4px 0 4px 32px;
line-height: 20px;
@ -118,22 +119,35 @@
}
.red-ui-palette-node {
display: block;
cursor:move;
background: #ddd;
margin: 10px auto;
display: inline-block;
cursor: move;
background: $secondary-background;
margin: 5px auto;
height: 25px;
border-radius: 5px;
border: 1px solid #999;
border: 1px solid $node-border;
background-position: 5% 50%;
background-repeat: no-repeat;
width: 120px;
background-size: contain;
position: relative;
&:first-child {
margin-top: 10px;
}
&:last-child {
margin-bottom: 10px;
}
}
.red-ui-palette-node:hover {
margin: 4px auto;
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 {
position: absolute;
@ -141,11 +155,11 @@
left: -5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background:#d9d9d9;
background: $node-port-background;
border-radius: 3px;
width: 10px;
height: 10px;
border: 1px solid #999;
border: 1px solid $node-border;
}
.red-ui-palette-port-output {
left:auto;
@ -153,8 +167,7 @@
}
.red-ui-palette-node:hover .red-ui-palette-port {
border-color: #999;
background-color: #eee;
background-color: $node-port-background-hover;
}
.red-ui-palette-icon-container {
position: absolute;
@ -163,14 +176,14 @@
bottom:0;
left:0;
width: 30px;
border-right: 1px solid rgba(0,0,0,0.1);
background-color: rgba(0,0,0,0.05);
border-right: 1px solid $node-icon-background-color;
background-color: $node-icon-background-color;
}
.red-ui-palette-icon-container-right {
left: auto;
right: 0;
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 {
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 {
border-color: rgba(136, 183, 213, 0);
border-color: transparent;
border-right-color: $popover-background;
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover.red-ui-popover-right:before {
border-color: rgba(194, 225, 245, 0);
border-color: transparent;
border-right-color: $popover-background;
border-width: 11px;
margin-top: -11px;
}
.red-ui-popover.red-ui-popover-left:after {
border-color: rgba(136, 183, 213, 0);
border-color: transparent;
border-left-color: $popover-background;
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover.red-ui-popover-left:before {
border-color: rgba(194, 225, 245, 0);
border-color: transparent;
border-left-color: $popover-background;
border-width: 11px;
margin-top: -11px;
@ -87,26 +87,26 @@
.red-ui-popover.red-ui-popover-bottom:after {
border-color: rgba(136, 183, 213, 0);
border-color: transparent;
border-bottom-color: $popover-background;
border-width: 10px;
margin-left: -10px;
}
.red-ui-popover.red-ui-popover-bottom:before {
border-color: rgba(194, 225, 245, 0);
border-color: transparent;
border-bottom-color: $popover-background;
border-width: 11px;
margin-left: -11px;
}
.red-ui-popover.red-ui-popover-top:after {
border-color: rgba(136, 183, 213, 0);
border-color: transparent;
border-top-color: $popover-background;
border-width: 10px;
margin-left: -10px;
}
.red-ui-popover.red-ui-popover-top:before {
border-color: rgba(194, 225, 245, 0);
border-color: transparent;
border-top-color: $popover-background;
border-width: 11px;
margin-left: -11px;
@ -143,25 +143,22 @@
font-size: 11px;
font-family: $monospace-font;
margin-left: 3px;
border: 1px solid #999;
border: 1px solid $popover-color;
border-radius:3px;
padding: 1px 2px;
}
.red-ui-popover .editor-button {
&:not(.primary) {
color: #444 !important;
border-color: rgba(0,0,0,0);
}
.red-ui-popover a.editor-button,
.red-ui-popover button.editor-button {
&.primary {
border-color: #bbb;
border-color: $popover-button-border-color;
}
&.primary:hover {
border-color: #666 !important;
&.primary:not(.disabled):not(.ui-button-disabled):hover {
border-color: $popover-button-border-color-hover;
}
}
.red-ui-popover code {
border: 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;
}
.red-ui-sidebar-vc-shade {
background: #f3f3f3;
background: $primary-background;
}
.red-ui-projects-edit-form form {
@ -32,7 +32,7 @@
.form-row {
margin-bottom: 15px;
label {
color: #555;
color: $primary-text-color;
width: 100%;
display: block;
&.red-ui-projects-edit-form-inline-label {
@ -52,7 +52,7 @@
}
.red-ui-projects-edit-form-sublabel {
color: #999;
color: $tertiary-text-color;
text-align: right;
margin-bottom: -15px;
font-weight: normal;
@ -67,19 +67,11 @@
.red-ui-projects-dialog-screen-start {
.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;
font-size: 2em;
padding: 10px;
min-height: 60px;
color: #555;
h1 {
text-align: center;
color: #f0f0f0;
font-size: 2em;
font-weight: normal;
}
color: $primary-text-color;
}
.red-ui-projects-dialog-screen-start-body {
min-height: 400px;
@ -99,13 +91,6 @@
height: auto;
line-height: 2em;
padding: 10px;
border-color: #aaa;
i {
color: #aaa;
}
&:hover i {
color: #999;
}
}
.button-group {
text-align: center;
@ -200,37 +185,44 @@
}
.red-ui-projects-dialog-project-list-entry {
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 {
&:not(.selectable) {
background: #f9f9f9;
border-left: 3px solid #f9f9f9;
border-right: 3px solid #f9f9f9;
color: $form-text-color;
background: $list-item-background-selected;
border-left-color:$list-item-border-selected;
border-right-color:$list-item-border-selected;
}
i {
color: #999;
color: $secondary-text-color;
}
}
&.selectable {
cursor: pointer;
&:hover {
background: #f3f3f3;
border-left-color: #f3f3f3;
border-right-color: #f3f3f3;
&:hover:not(.selected) {
color: $form-text-color;
background: $list-item-background-hover;
border-left-color:$list-item-background-hover;
border-right-color:$list-item-background-hover;
}
}
.red-ui-projects-dialog-project-list-entry-icon {
i {
color: #ccc;
color: $tertiary-text-color;
font-size: 2em;
}
}
&.selected {
background: #efefef;
border-left-color:#999;
border-right-color:#999;
color: $form-text-color;
background: $list-item-background-selected;
border-left-color:$list-item-border-selected;
border-right-color:$list-item-border-selected;
}
span {
display: inline-block;
@ -246,7 +238,7 @@
float: right;
margin-right: 20px;
font-size: 0.9em;
color: #999;
color: $secondary-text-color;
padding-top: 4px;
}
.red-ui-projects-dialog-project-list-entry-tools {
@ -254,7 +246,7 @@
top: 16px;
right: 30px;
display: none;
color: #999;
color: $secondary-text-color;
}
&:hover {
.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) {
background: #fff !important;
color: #666 !important;
color: $secondary-text-color-active !important;
}
.red-ui-projects-dialog-screen-input-status {
text-align: right;
@ -273,21 +264,13 @@
right: 8px;
width: 70px;
height: 30px;
color: #999;
color: $secondary-text-color;
}
.red-ui-sidebar-vc {
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 {
position: absolute;
top: 0px;
@ -321,19 +304,17 @@
}
.red-ui-palette-module-unused {
& > * {
color: #bbb;
color: $secondary-text-color;
}
// border: 1px dashed #bbb;
}
.red-ui-palette-module-unknown {
border: 1px dashed #aaa;
background: #fafafa;
border: 1px dashed $secondary-border-color;
background: $secondary-background-inactive;
}
.red-ui-palette-module-not-installed {
border: 1px dashed #b07575;
background: #fee;
border: 1px dashed $text-color-warning;
i.fa-warning {
color: #b07575; //#b72828;
color: $text-color-warning;
}
}
}
@ -350,11 +331,11 @@
}
.red-ui-sidebar-vc {
.red-ui-editableList-container {
background: #f9f9f9;
background: $tertiary-background;
padding: 0;
li {
padding:0;
background: #fff;
background: $secondary-background;
}
}
.red-ui-editableList-border {
@ -384,7 +365,7 @@
right:0;
height:0;
transition: height 0.2s ease-in-out;
background: #f6f6f6;
background: $tertiary-background;
box-sizing: border-box;
overflow: hidden;
&.red-ui-sidebar-vc-slide-box-top {
@ -396,10 +377,10 @@
border-left: 1px solid $primary-border-color;
border-right: 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;
background: #f6f6f6;
color: $primary-text-color;
background: $tertiary-background;
padding: 10px;
box-sizing: border-box;
@ -441,7 +422,7 @@
padding: 0;
li {
padding: 0;
background: #fff;
background: $secondary-background;
}
}
}
@ -467,23 +448,24 @@
}
.red-ui-sidebar-vc-branch-list-entry {
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;
&.selected {
border-left-color:#999;
border-right-color:#999;
border-left-color:$list-item-border-selected;
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}
&.input-error {
cursor: default;
}
&:not(.input-error):hover {
background: #f3f3f3;
border-left-color:#999;
border-right-color:#999;
background: $list-item-background-hover;
border-left-color:$list-item-border-selected;
border-right-color:$list-item-border-selected;
}
span {
margin-left: 5px;
@ -491,7 +473,7 @@
span.current {
float: right;
font-size: 0.8em;
color: #999;
color: $tertiary-text-color;
}
}
@ -526,7 +508,7 @@
}
&.node-info-none {
text-align: center;
background: #fefefe;
background: $list-item-background;
white-space: normal;
height: auto;
}
@ -540,11 +522,11 @@
overflow: hidden;
cursor: pointer;
&:hover {
background: #eee;
background: $secondary-background-hover;
}
}
.red-ui-sidebar-vc-commit-more {
color: #999;
color: $secondary-text-color;
text-align: center;
padding: 10px;
font-style: italic;
@ -552,39 +534,39 @@
.red-ui-sidebar-vc-commit-sha {
float: right;
font-family: $monospace-font;
color: #c38888;
color: $vcCommitShaColor;
display: inline-block;
font-size: 0.85em;
margin-left: 5px;
}
.red-ui-sidebar-vc-commit-subject {
color: #666;
color: $primary-text-color;
}
.red-ui-sidebar-vc-commit-refs {
min-height: 22px;
}
.red-ui-sidebar-vc-commit-ref {
color: #aaa;
color: $tertiary-text-color;
font-size: 0.7em;
border: 1px solid #ccc;
border: 1px solid $tertiary-border-color;
border-radius: 10px;
padding: 2px 5px;
margin-right: 5px;
}
.red-ui-sidebar-vc-commit-date {
color: #999;
color: $secondary-text-color;
font-size: 0.85em;
}
.red-ui-sidebar-vc-commit-user {
float: right;
color: #999;
color: $secondary-text-color;
font-size: 0.85em;
}
.red-ui-sidebar-vc-commit-head {
}
.red-ui-sidebar-vc-change-header {
color: #666;
background: #f6f6f6;
color: $primary-text-color;
background: $tertiary-background;
padding: 4px 10px;
height: 30px;
box-sizing: border-box;
@ -595,8 +577,8 @@
}
}
.red-ui-sidebar-vc-repo-toolbar {
color: #666;
background: #f6f6f6;
color: $primary-text-color;
background: $tertiary-background;
padding: 10px;
box-sizing: border-box;
}
@ -638,37 +620,39 @@
}
.red-ui-projects-dialog-file-list-entry {
padding: 3px 0;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
border-left: 2px solid $list-item-background;
border-right: 2px solid $list-item-background;
background: $list-item-background;
&.projects-list-entry-current {
&:not(.selectable) {
background: #f9f9f9;
background: $list-item-background-selected;
}
i {
color: #999;
color: $secondary-text-color-selected;
}
}
&.selectable {
cursor: pointer;
&:hover {
background: #f3f3f3;
border-left-color:#999;
border-right-color:#999;
background: $list-item-background-hover;
border-left-color:$list-item-border-selected;
border-right-color:$list-item-border-selected;
}
}
&.unselectable {
color: #ccc;
color: $secondary-text-color-disabled;
}
i {
color: #999;
color: $secondary-text-color;
width: 16px;
text-align: center;
}
&.selected {
background: #efefef;
border-left-color:#999;
border-right-color:#999;
background: $list-item-background-selected;
border-left-color:$list-item-border-selected;
border-right-color:$list-item-border-selected;
}
span {
display: inline-block;
@ -678,7 +662,7 @@
margin: 0 10px 0 0px;
.fa-angle-right {
color: #333;
color: $primary-text-color;
transition: all 0.2s ease-in-out;
}
@ -693,7 +677,7 @@
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-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 {
position: relative;
padding: 15px 20px 0;
@ -809,7 +713,7 @@ div.red-ui-projects-dialog-ssh-public-key {
padding: 10px 5px;
cursor: pointer;
&:hover {
background: #f3f3f3;
background: $list-item-background-hover;
}
}
}
@ -818,7 +722,7 @@ div.red-ui-projects-dialog-ssh-public-key {
position: relative;
.red-ui-editableList-container {
padding: 1px;
background: #f6f6f6;
background: $tertiary-background;
li:last-child {
border-bottom: none;
}
@ -837,7 +741,7 @@ div.red-ui-projects-dialog-ssh-public-key {
text-align: center;
min-width: 30px;
vertical-align: top;
color: #999;
color: $secondary-text-color;
}
.entry-name {
min-width: 250px;
@ -846,7 +750,7 @@ div.red-ui-projects-dialog-ssh-public-key {
font-weight: bold;
}
.entry-detail {
color: #aaa;
color: $tertiary-text-color;
font-size: 0.9em;
}
@ -864,7 +768,7 @@ div.red-ui-projects-dialog-ssh-public-key {
position: relative;
margin-top: 10px;
margin-bottom: 20px;
background: white;
background: $secondary-background;
border-radius: 4px;
border: 1px solid $secondary-border-color;
.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 {
font-weight: bold;
background: #f3f3f3;
background: $primary-background;
margin-top: 0 !important;
padding: 5px 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;
top: 0px;
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 {
@ -71,12 +71,12 @@
.red-ui-search-result-node-port {
position: absolute;
border-radius: 2px;
border: 1px solid #999;
border: 1px solid $node-border;;
width: 6px;
height: 7px;
top:4px;
left:-4px;
background: #eee;
background: $node-port-background;
box-sizing: border-box;
}
.red-ui-search-result-node-output{
@ -92,7 +92,7 @@
margin-left:28px;
}
.red-ui-search-result-node-label {
color: #999;
color: $secondary-text-color;
}
}
@ -114,13 +114,6 @@
background: $primary-background;
li {
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;
border-left: 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 {
text-decoration: none;
color: $form-text-color;
@ -155,9 +153,8 @@
width: 30px;
float:left;
height: 25px;
background: #ddd;
border-radius: 5px;
border: 1px solid #999;
border: 1px solid $node-border;
background-position: 5% 50%;
background-repeat: no-repeat;
background-size: contain;
@ -173,19 +170,22 @@
margin-right: 5px;
}
.red-ui-search-result-node-label {
color: #222;
color: $primary-text-color;
}
.red-ui-search-result-node-type {
font-style: italic;
font-size: 0.9em;
color: $tertiary-text-color;
}
.red-ui-search-result-node-flow {
float:right;
font-size: 0.8em;
color: $tertiary-text-color;
}
.red-ui-search-result-node-id {
display:none;
font-size: 0.8em;
color: $tertiary-text-color;
}
.red-ui-search-empty {
padding: 10px;

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

@ -20,20 +20,19 @@
right: 0px;
bottom: 0px;
width: 315px;
background: #fff;
background: $primary-background;
box-sizing: border-box;
z-index: 10;
@include component-border;
}
#red-ui-sidebar.closing {
background: #eee;
border-color: #900;
border-style: dashed;
}
#red-ui-sidebar-content {
position: absolute;
background: $secondary-background;
top: 35px;
right: 0;
bottom: 25px;
@ -67,10 +66,10 @@
.sidebar-header, /* Deprecated -> red-ui-sidebar-header */
.red-ui-sidebar-header {
color: #666;
color: $primary-text-color;
text-align: right;
padding: 8px 10px;
background: #f3f3f3;
background: $primary-background;
border-bottom: 1px solid $secondary-border-color;
white-space: nowrap;
}
@ -120,9 +119,9 @@ button.red-ui-sidebar-header-button-toggle {
top: calc(50% - 26px);
padding:15px 8px;
border:1px solid #ccc;
background:#f9f9f9;
color: #999;
border:1px solid $primary-border-color;
background:$primary-background;
color: $secondary-text-color;
text-align: center;
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 {
position: relative;
background: #f3f3f3;
background: $secondary-background;
height: 100%;
overflow-y:auto;
@include disable-selection;
@ -28,8 +28,9 @@
.red-ui-palette-node {
overflow: hidden;
&.selected {
margin: 10px auto;
border-color: $node-selected-color;
background-color: #eee;
border-width: 2px;
}
}
.red-ui-palette-label {
@ -43,7 +44,7 @@
.red-ui-palette-icon-container {
font-size: 12px;
line-height: 30px;
background-color: #e8e8e8;
background-color: $secondary-background-selected;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
a {
@ -52,10 +53,10 @@
bottom: 0;
left: 0;
right: 0;
color: #666;
color: $secondary-text-color;
&:hover {
text-decoration: none;
background: #ccc;
background: $secondary-background-hover;
}
}
}
@ -63,12 +64,12 @@
.red-ui-palette-node-config {
width: 160px;
height: 30px;
background: #f3f3f3;
color: #666;
background: $primary-background;
color: $primary-text-color;
cursor: pointer;
}
.red-ui-palette-node-config-type {
color: #999;
color: $secondary-text-color;
text-align: right;
padding-right: 3px;
&:not(:first-child) {
@ -76,15 +77,15 @@
}
}
.red-ui-palette-node-config-none {
color: #ddd;
color: $tertiary-text-color;
text-align:right;
padding-right: 3px;
}
.red-ui-palette-node-config-unused {
border-color: #aaa;
background: #f9f9f9;
border-color: $primary-border-color;
background: $secondary-background-inactive;
border-style: dashed;
color: #aaa;
color: $tertiary-text-color;
}
.red-ui-sidebar-node-config-filter-info {
position: absolute;
@ -95,6 +96,6 @@
padding: 0 8px;
background: $palette-header-background;
font-size: 0.8em;
color: #999;
color: $secondary-text-color;
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 {
text-align: right;
font-size: 11px;
color: #bbb;
color: $tertiary-text-color;
padding: 1px 3px;
}
.red-ui-sidebar-context-property-storename {
display: block;
font-size: 0.8em;
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%;
}
table.node-info tr:not(.blank) {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-top: 1px solid $secondary-border-color;
border-bottom: 1px solid $secondary-border-color;
}
.node-info-property-expand {
font-size: 0.8em;
@ -40,7 +40,7 @@ table.node-info tr.blank {
th {
text-align: left;
font-weight: 500;
color: #444;
color: $primary-text-color;
padding: 6px 3px 3px;
}
>* {
@ -52,9 +52,9 @@ table.node-info tr.blank {
a {
display: block;
color: #666;
color: $primary-text-color;
&:hover,&:focus {
color: #666;
color: $primary-text-color;
text-decoration: none;
}
&:not(.expanded) {
@ -89,27 +89,40 @@ table.node-info tr.blank {
}
.node-info-none {
font-style: italic;
color: #aaa;
color: $tertiary-text-color;
}
table.node-info tr:not(.blank) td:first-child{
color: #444;
color: $header-text-color;
vertical-align: top;
width: 90px;
padding: 3px 3px 3px 6px;
background:#f9f9f9;
border-right: 1px solid #ddd;
background:$tertiary-background;
border-right: 1px solid $secondary-border-color;
}
table.node-info tr:not(.blank) td:last-child{
padding: 3px 3px 3px 6px;
color: #666;
color: $primary-text-color;
overflow-y: hidden;
}
div.node-info {
margin: 5px;
}
.node-help {
font-size: 14px;
font-size: $primary-font-size;
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 {
font-weight: 500;
font-size: 1.296em;
@ -138,7 +151,7 @@ div.node-info {
& > span > p:first-child {
}
dl.message-properties {
border: 1px solid #ddd;
border: 1px solid $secondary-border-color;
border-radius: 2px;
margin: 5px auto 10px;
@ -147,7 +160,7 @@ div.node-info {
font-family: $monospace-font;
font-weight: normal;
margin: 5px 3px 1px;
color: #AD1625;
color: $text-color-warning;
white-space: nowrap;
&.optional {
font-style: italic;
@ -155,7 +168,7 @@ div.node-info {
}
.property-type {
font-family: $primary-font;
color: #666;
color: $primary-text-color;
font-style: italic;
font-size: 11px;
float: right;
@ -174,7 +187,7 @@ div.node-info {
ol.node-ports {
margin: 0;
li {
border: 1px solid #ddd;
border: 1px solid $secondary-border-color;
border-radius: 2px;
list-style-position: inside;
padding: 3px;
@ -191,7 +204,7 @@ div.node-info {
transition: transform 0.2s ease-in-out;
margin-right: 4px;
}
color: #333;
color: $header-text-color;
&:hover, &:focus {
text-decoration: none;
}
@ -211,7 +224,7 @@ div.node-info {
right: 0;
overflow-y: scroll;
}
.node-info-tips {
.red-ui-help-tips {
display: none;
position: absolute;
left:0;
@ -220,21 +233,21 @@ div.node-info {
height: 150px;
box-sizing: border-box;
border-top: 1px solid $secondary-border-color;
background-color: #fff;
background-color: $secondary-background;
padding: 20px;
box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 20px 0px $shadow;
overflow-y: auto;
}
.sidebar-node-info.show-tips {
.sidebar-node-info-stack {
bottom: 150px;
}
.node-info-tips {
.red-ui-help-tips {
display: block;
}
}
.node-info-tips:before {
.red-ui-help-tips:before {
content: '';
display: inline-block;
height: 100%;
@ -249,23 +262,23 @@ div.node-info {
font-size: 16px;
text-align: center;
line-height: 1.9em;
color : #bbb;
color : $tertiary-text-color;
@include disable-selection;
cursor: default;
}
.node-info-tips-buttons {
.red-ui-help-tips-buttons {
position: absolute;
top: 4px;
right: 6px;
a {
color: #ddd !important;
border-color: #d9d9d9 !important;
color: $secondary-text-color;
border-color: $secondary-border-color !important;
margin-left: 4px;
}
}
.node-info-property-config-node {
border: 1px solid #eee;
border: 1px solid $secondary-border-color;
border-radius: 4px;
padding: 2px 4px 2px;
}

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

@ -30,7 +30,6 @@
}
}
& ul {
//background: #9999ff;
list-style-type: none;
padding:0;
margin: 0;
@ -159,7 +158,7 @@
height: 100%;
border-right: 1px solid $primary-border-color;
margin: 0;
background: $primary-background;
background: $tertiary-background;
overflow: visible;
.red-ui-tabs-scroll-container {
@ -245,11 +244,6 @@
width: 28px;
margin: 4px 3px 3px;
z-index: 2;
&.red-ui-tab-link-button {
&:not(.active) {
// background: #eee;
}
}
&.red-ui-tab-link-button-menu {
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 {
width: 15px;
display: inline-block;
color: #888;
color: $secondary-text-color;
cursor: pointer;
input {
display:none;
@ -24,6 +24,6 @@
&.disabled {
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 {
box-sizing: border-box;
position: relative;
background: #fff;
background: $secondary-background;
margin:0;
padding:8px 0px;
border-bottom: 1px solid $secondary-border-color;
@ -47,7 +47,7 @@
top: 50%;
left: 2px;
margin-top: -7px;
color: #eee;
color: $tertiary-text-color;
cursor: move;
}
.red-ui-editableList-item-remove {
@ -68,7 +68,7 @@
margin-right: 28px;
}
&.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;
white-space: nowrap;
border: none;
background: #fefefe;
background: $secondary-background;
&:hover {
background: #f0f0f0;
background: $secondary-background-hover;
}
i.fa-angle-right {
@ -44,12 +44,12 @@
}
}
.red-ui-editableList-item-content.disabled {
color: #ccc;
color: $secondary-text-color-disabled;
}
&.red-ui-editableList-section-header {
background: #f0f0f0;
background: $primary-background;
.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;
i {
font-size: 10px;
color: #666;
color: $secondary-text-color;
}
i.fa-search {
position: absolute;
@ -61,8 +61,8 @@
position: absolute;
right: 18px;
top: 4px;
background: #eee;
color: #666;
background: $primary-background;
color: $secondary-text-color;
padding: 1px 8px;
font-size: 9px;
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 {
background: white;
background: $secondary-background;
.red-ui-palette-category {
background: white;
background: $secondary-background;
&:last-child {
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%;
height: 100%;
position: relative;
background: #f9f9f9;
background: $tertiary-background;
border: 1px solid $form-input-border-color;
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;
box-shadow: none;
vertical-align: middle;
// backgroun/d: #f0fff0;
}
&.red-ui-typedInput-focus:not(.input-error) {
@ -62,11 +61,11 @@
border-bottom-left-radius: 4px;
padding: 0 1px 0 5px;
display:inline-block;
background: $typedInput-button-background;
background: $form-button-background;
height: 32px;
line-height: 32px;
vertical-align: middle;
color: #555;
color: $form-text-color;
i.red-ui-typedInput-icon {
position: relative;
top: -3px;
@ -81,7 +80,7 @@
&.disabled {
cursor: default;
i.red-ui-typedInput-icon {
color: #bbb;
color: $secondary-text-color-disabled;
}
}
.red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
@ -92,7 +91,7 @@
&:not(.disabled):hover {
text-decoration: none;
background: $typedInput-button-background-hover;
background: $workspace-button-background-hover;
}
&:focus {
text-decoration: none;
@ -100,7 +99,7 @@
box-shadow: inset 0 0 0 1px $form-input-focus-color;
}
&:not(.disabled):active {
background: $typedInput-button-background-active;
background: $workspace-button-background-active;
text-decoration: none;
}
&.red-ui-typedInput-full-width {
@ -127,7 +126,8 @@
position:absolute;
right: 0;
.red-ui-typedInput-option-label {
background:$typedInput-button-background;
background:$form-button-background;
color: $form-text-color;
position:absolute;
left:0;
right:23px;
@ -160,25 +160,25 @@
position: absolute;
border: 1px solid $primary-border-color;
background: #fff;
background: $secondary-background;
z-index: 2000;
a {
padding: 6px 18px 6px 6px;
display: block;
border-bottom: 1px solid $secondary-border-color;
color: #333;
color: $form-text-color;
&:hover {
text-decoration: none;
background: $typedInput-button-background-hover;
background: $workspace-button-background-hover;
}
&:focus {
text-decoration: none;
background: $typedInput-button-background-active;
background: $workspace-button-background-active;
outline: none;
}
&:active {
text-decoration: none;
background: $typedInput-button-background-active;
background: $workspace-button-background-active;
}
}
.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;
bottom: 0;
width: 120px;
background: #f3f3f3;
background: $tertiary-background;
}
.red-ui-settings-tabs-content {
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 {
fill: $workspace-background;
fill: $view-background;
}
.red-ui-workspace-chart-grid line {
fill: none;
shape-rendering: crispEdges;
stroke: $workspace-grid-color;
stroke: $view-grid-color;
stroke-width: 1px;
}
@ -100,7 +100,7 @@
border-left: 1px solid $primary-border-color;
border-top: 1px solid $primary-border-color;
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 {
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;
height: 40px;
box-sizing: border-box;
background: #fff;
background: $secondary-background;
border-bottom: 1px solid $secondary-border-color;
white-space: nowrap;
transition: right 0.2s ease;
@ -77,7 +77,7 @@
margin: 0;
height: 24px;
font-size: 12px;
background: #f9f9f9;
background: $form-input-background;
line-height: 22px;
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">
</div>
<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 id="node-config-mqtt-broker-tabs-content" style="min-height: 170px;">
<div id="mqtt-broker-tab-connection" style="display:none">
<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>
<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>
<input type="text" id="node-config-input-port" data-i18n="[placeholder]mqtt.label.port" style="width:55px">
</div>