mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Merge pull request #3161 from node-red/tour-theme
Improve themeing of tourGuide
This commit is contained in:
commit
f62040f0ec
@ -285,9 +285,10 @@ RED.tourGuide = (function() {
|
||||
$('<span></span>').text(RED._("common.label.close")).appendTo(nextButton);
|
||||
} else if (state.index === 0) {
|
||||
$('<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) {
|
||||
$('<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);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -295,9 +295,8 @@ $group-default-stroke: #999;
|
||||
$group-default-stroke-opacity: 1;
|
||||
$group-default-label-color: #a4a4a4;
|
||||
|
||||
$tourGuide-shade: $shade-color;
|
||||
$tourGuide-border: #a22222;
|
||||
$tourGuide-heading-color: #a22222;
|
||||
$tourGuide-border: #c56c6c;
|
||||
$tourGuide-heading-color: #c56c6c;
|
||||
|
||||
// Deprecated
|
||||
$text-color-green: $text-color-success;
|
||||
|
@ -16,7 +16,7 @@
|
||||
z-index: 2001;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
border: 2px solid $tourGuide-border;
|
||||
border: 2px solid var(--red-ui-tourGuide-border);
|
||||
|
||||
&.transition {
|
||||
transition: 0.4s ease;
|
||||
@ -33,7 +33,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: solid 6000px $tourGuide-shade;
|
||||
border: solid 6000px var(--red-ui-shade-color);
|
||||
margin-left: -6000px;
|
||||
margin-top: -6000px;
|
||||
pointer-events: none;
|
||||
@ -41,15 +41,15 @@
|
||||
}
|
||||
.red-ui-popover.red-ui-tourGuide-popover {
|
||||
z-index: 2003;
|
||||
--red-ui-popover-background: #{$secondary-background};
|
||||
--red-ui-popover-border: #{$tourGuide-border};
|
||||
--red-ui-popover-color: #{$primary-text-color};
|
||||
--red-ui-popover-background: var(--red-ui-secondary-background);
|
||||
--red-ui-popover-border: var(--red-ui-tourGuide-border);
|
||||
--red-ui-popover-color: var(--red-ui-primary-text-color);
|
||||
|
||||
.red-ui-popover-content {
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
color: #a22222;
|
||||
color: var(--red-ui-tourGuide-heading-color);
|
||||
i.fa {
|
||||
font-size: 1.5em
|
||||
}
|
||||
@ -90,9 +90,8 @@
|
||||
}
|
||||
.red-ui-popover.red-ui-tourGuide-popover button.red-ui-button {
|
||||
&:not(.primary) {
|
||||
border-color: transparent;
|
||||
background: $secondary-background;
|
||||
color: $primary-text-color !important;
|
||||
background: var(--red-ui-secondary-background);
|
||||
color: var(--red-ui-primary-text-color) !important;
|
||||
}
|
||||
&:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
|
||||
border-color: $popover-button-border-color-hover;
|
||||
|
@ -92,4 +92,7 @@
|
||||
--red-ui-popover-border: #{$popover-border};
|
||||
--red-ui-popover-color: #{$popover-color};
|
||||
|
||||
--red-ui-tourGuide-border: #{$tourGuide-border};
|
||||
--red-ui-tourGuide-heading-color: #{$tourGuide-heading-color};
|
||||
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user