Define and use color variables

edan-bainglass · Dec 29, 2024 · 81800ed · 81800ed
1 parent 8e03a3a
commit 81800ed
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css
@@ -7,6 +7,13 @@
 }
 /* end override */
 
+:root {
+  --color-ready: #fcf8e3;
+  --color-active: #d9edf7;
+  --color-success: #dff0d8;
+  --color-failed: #f2dede;
+}
+
 .app-header {
   margin-bottom: 1em;
 }
@@ -88,23 +95,23 @@ footer {
 }
 
 .p-Accordion-child:has(.qe-app-step-ready) > .p-Collapse-header {
-  background-color: #fcf8e3;
+  background-color: var(--color-ready);
 }
 
 .p-Accordion-child:has(.qe-app-step-configured) > .p-Collapse-header {
-  background-color: #fcf8e3;
+  background-color: var(--color-ready);
   filter: brightness(0.95);
   -webkit-filter: brightness(0.95);
 }
 
 .p-Accordion-child:has(.qe-app-step-active) > .p-Collapse-header {
-  background-color: #d9edf7;
+  background-color: var(--color-active);
 }
 
 .p-Accordion-child:has(.qe-app-step-success) > .p-Collapse-header {
-  background-color: #dff0d8;
+  background-color: var(--color-success);
 }
 
 .p-Accordion-child:has(.qe-app-step-fail) > .p-Collapse-header {
-  background-color: #f2dede;
+  background-color: var(--color-failed);
 }