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

Merge pull request #3161 from node-red/tour-theme

Browse Source 
Improve themeing of tourGuide
This commit is contained in:
Nick O'Leary 2021-10-02 23:24:22 +01:00 committed by GitHub
commit f62040f0ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -285,9 +285,10 @@ RED.tourGuide = (function() {
$('<span></span>').text(RED._("common.label.close")).appendTo(nextButton); $('<span></span>').text(RED._("common.label.close")).appendTo(nextButton);
} else if (state.index === 0) { } else if (state.index === 0) {
$('<span>start</span>').text(RED._("tourGuide.start")).appendTo(nextButton); $('<span>start</span>').text(RED._("tourGuide.start")).appendTo(nextButton);
$('<span style="margin-left: 6px"><i class="fa fa-chevron-right"></i></span>').appendTo(nextButton);
} else if (state.index < state.count-1) { } else if (state.index < state.count-1) {
$('<span></span>').text(RED._("tourGuide.next")).appendTo(nextButton); $('<span></span>').text(RED._("tourGuide.next")).appendTo(nextButton);
$('<span style="margin-left: 4px"><i class="fa fa-chevron-right"></i></span>').appendTo(nextButton); $('<span style="margin-left: 6px"><i class="fa fa-chevron-right"></i></span>').appendTo(nextButton);
} }
} }

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

@ -295,9 +295,8 @@ $group-default-stroke: #999;
$group-default-stroke-opacity: 1; $group-default-stroke-opacity: 1;
$group-default-label-color: #a4a4a4; $group-default-label-color: #a4a4a4;
$tourGuide-shade: $shade-color; $tourGuide-border: #c56c6c;
$tourGuide-border: #a22222; $tourGuide-heading-color: #c56c6c;
$tourGuide-heading-color: #a22222;
// Deprecated // Deprecated
$text-color-green: $text-color-success; $text-color-green: $text-color-success;

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

@ -16,7 +16,7 @@
z-index: 2001; z-index: 2001;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 50%; border-radius: 50%;
border: 2px solid $tourGuide-border; border: 2px solid var(--red-ui-tourGuide-border);
&.transition { &.transition {
transition: 0.4s ease; transition: 0.4s ease;
@ -33,7 +33,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: solid 6000px $tourGuide-shade; border: solid 6000px var(--red-ui-shade-color);
margin-left: -6000px; margin-left: -6000px;
margin-top: -6000px; margin-top: -6000px;
pointer-events: none; pointer-events: none;
@ -41,15 +41,15 @@
} }
.red-ui-popover.red-ui-tourGuide-popover { .red-ui-popover.red-ui-tourGuide-popover {
z-index: 2003; z-index: 2003;
--red-ui-popover-background: #{$secondary-background}; --red-ui-popover-background: var(--red-ui-secondary-background);
--red-ui-popover-border: #{$tourGuide-border}; --red-ui-popover-border: var(--red-ui-tourGuide-border);
--red-ui-popover-color: #{$primary-text-color}; --red-ui-popover-color: var(--red-ui-primary-text-color);
.red-ui-popover-content { .red-ui-popover-content {
h2 { h2 {
text-align: center; text-align: center;
margin-top: 0px; margin-top: 0px;
color: #a22222; color: var(--red-ui-tourGuide-heading-color);
i.fa { i.fa {
font-size: 1.5em font-size: 1.5em
} }
@ -90,9 +90,8 @@
} }
.red-ui-popover.red-ui-tourGuide-popover button.red-ui-button { .red-ui-popover.red-ui-tourGuide-popover button.red-ui-button {
&:not(.primary) { &:not(.primary) {
border-color: transparent; background: var(--red-ui-secondary-background);
background: $secondary-background; color: var(--red-ui-primary-text-color) !important;
color: $primary-text-color !important;
} }
&:not(.primary):not(.disabled):not(.ui-button-disabled):hover { &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
border-color: $popover-button-border-color-hover; border-color: $popover-button-border-color-hover;

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

@ -92,4 +92,7 @@
--red-ui-popover-border: #{$popover-border}; --red-ui-popover-border: #{$popover-border};
--red-ui-popover-color: #{$popover-color}; --red-ui-popover-color: #{$popover-color};
--red-ui-tourGuide-border: #{$tourGuide-border};
--red-ui-tourGuide-heading-color: #{$tourGuide-heading-color};
} }