diff --git a/ui/src/pages/Alerts/RuleEditor/wizard.module.css b/ui/src/pages/Alerts/RuleEditor/wizard.module.css index 4dfd103f..4aee7a9a 100644 --- a/ui/src/pages/Alerts/RuleEditor/wizard.module.css +++ b/ui/src/pages/Alerts/RuleEditor/wizard.module.css @@ -1,31 +1,23 @@ .wizard { - padding: 16px; + padding: var(--space-md); display: flex; flex-direction: column; - gap: 16px; + gap: var(--space-md); } .header { display: flex; justify-content: space-between; align-items: center; - gap: 12px; + gap: var(--space-sm); flex-wrap: wrap; } -.promoteBanner { - padding: 8px 12px; - background: var(--amber-bg, rgba(255, 180, 0, 0.12)); - border: 1px solid var(--amber); - border-radius: 6px; - font-size: 13px; -} - .steps { display: flex; - gap: 8px; - border-bottom: 1px solid var(--border); - padding-bottom: 8px; + gap: var(--space-sm); + border-bottom: 1px solid var(--border-subtle); + padding-bottom: var(--space-sm); } .step { @@ -34,17 +26,22 @@ padding: 8px 12px; border-bottom: 2px solid transparent; cursor: pointer; - color: var(--muted); + color: var(--text-muted); font-size: 13px; + font-family: inherit; +} + +.step:hover { + color: var(--text-primary); } .stepActive { - color: var(--fg); - border-bottom-color: var(--accent); + color: var(--text-primary); + border-bottom-color: var(--amber); } .stepDone { - color: var(--fg); + color: var(--text-primary); } .stepBody {