From c039a117fdbc66f5baf6c5cd33aa000e55f901ff Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 21 Jul 2022 19:55:07 +0200 Subject: [PATCH] Setup Assistant: Style adjustments Style current and done step indicators slightly different. Also on hover scale the indicator a bit, on non-disabled items. --- web/app/src/views/FirstTimeWizardView.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/web/app/src/views/FirstTimeWizardView.vue b/web/app/src/views/FirstTimeWizardView.vue index 82e80fd7..7df9e791 100644 --- a/web/app/src/views/FirstTimeWizardView.vue +++ b/web/app/src/views/FirstTimeWizardView.vue @@ -456,8 +456,8 @@ export default { position: absolute; top: calc(50% - calc(var(--setup-progress-indicator-border-width) / 2)); transform: translateY(-50%); - background-color: var(--color-accent); - height: var(--wiz-progress-indicator-border-width); + background-image: linear-gradient(to right, var(--color-accent) 85%, var(--color-accent-text)); + border-radius: 999rem; height: var(--setup-progress-indicator-border-width); position: absolute; transition: width 500ms ease-out; @@ -467,7 +467,7 @@ export default { /* Progress indicator dot. */ .progress li span { - background-color: var(--color-background-column); + background-color: var(--color-background); border-radius: 50%; border: var(--setup-progress-indicator-border-width) solid var(--color-background); box-shadow: 0 0 0 var(--setup-progress-indicator-border-width) var(--setup-progress-indicator-color); @@ -487,6 +487,10 @@ export default { cursor: not-allowed; } +.progress li:not(.disabled):hover span { + transform: scale(1.1); +} + .progress li.done span { background-color: var(--setup-progress-indicator-color-done); box-shadow: 0 0 0 var(--setup-progress-indicator-border-width) var(--setup-progress-indicator-color-done);