diff --git a/public/app/plugins/panel/gettingstarted/module.html b/public/app/plugins/panel/gettingstarted/module.html
index ae5f3b9ed54..86605c52fb8 100644
--- a/public/app/plugins/panel/gettingstarted/module.html
+++ b/public/app/plugins/panel/gettingstarted/module.html
@@ -8,8 +8,8 @@
diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss
index b3967c0b421..9703f8086d0 100644
--- a/public/sass/components/_panel_gettingstarted.scss
+++ b/public/sass/components/_panel_gettingstarted.scss
@@ -4,13 +4,14 @@ $progress-color-dark: $panel-bg !default;
$progress-color: $panel-bg !default;
$progress-color-light: $panel-bg !default;
$progress-color-grey-light: $body-bg !default;
+$progress-color-shadow: $panel-border !default;
$progress-color-grey: $iconContainerBackground !default;
$progress-color-grey-dark: $iconContainerBackground !default;
// Sizing
$marker-size: 60px !default;
$marker-size-half: ($marker-size / 2);
-$path-height: 4px !default;
+$path-height: 2px !default;
$path-position: $marker-size-half - ($path-height / 2);
@@ -62,9 +63,16 @@ $path-position: $marker-size-half - ($path-height / 2);
right: - $marker-size-half;
width: 100%;
height: $path-height;
+ border-top: 2px solid $progress-color-grey-light;
+ border-bottom: $progress-color-shadow;
background: $progress-color-grey-light;
}
+ &:first-child {
+ &::after {
+ left: 50%;
+ }
+ }
&:last-child {
&::after {
right: 50%;
@@ -105,10 +113,12 @@ $path-position: $marker-size-half - ($path-height / 2);
}
.progress-text {
text-decoration: line-through;
+ &:hover {
+ color: $text-color-weak;
+ }
}
-
&::after {
- background: $progress-color-grey;
+ background: $progress-color-grey-light;
}
}
}
@@ -136,6 +146,9 @@ $path-position: $marker-size-half - ($path-height / 2);
color: $text-color-weak;
font-size: 35px;
vertical-align: sub;
+ &:hover {
+ color: $link-hover-color;
+ }
}
// Progress text
@@ -143,6 +156,10 @@ $path-position: $marker-size-half - ($path-height / 2);
display: block;
overflow: hidden;
text-overflow: ellipsis;
+ color: $text-muted;
+ &:hover {
+ color: $link-hover-color;
+ }
}
.progress-marker {
@@ -151,6 +168,3 @@ $path-position: $marker-size-half - ($path-height / 2);
font-size: 35px;
vertical-align: sub;
}
-
-
-