css: Avoid Icinga Web variables in list styles

Icinga · Sep 8, 2023 · fca48e3 · fca48e3
1 parent 20105f9
commit fca48e3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/asset/css/list/item-list.less b/asset/css/list/item-list.less
@@ -5,7 +5,7 @@
 
   > .empty-state {
     .rounded-corners();
-    background-color: @gray-lighter;
+    background-color: @empty-state-bg-in-lists;
   }
 }
 

diff --git a/asset/css/list/item-table.less b/asset/css/list/item-table.less
@@ -7,23 +7,23 @@ ul.item-table {
 div.item-table {
   > .empty-state {
     .rounded-corners();
-    background-color: @gray-lighter;
+    background-color: @empty-state-bg-in-lists;
   }
 }
 
 .table-row {
-  color: @text-color-light;
+  color: @default-text-color-light;
 
   .title {
     .subject {
-      color: @text-color;
+      color: @default-text-color;
     }
 
     a {
       font-weight: bold;
 
       &:hover {
-        color: @icinga-blue;
+        color: @list-item-title-hover-color;
         text-decoration: none;
       }
     }

diff --git a/asset/css/list/list-item.less b/asset/css/list/list-item.less
@@ -1,10 +1,10 @@
 // Style
 
 .list-item {
-  color: @text-color-light;
+  color: @default-text-color-light;
 
   &:not(:first-child) > .main {
-    border-top: 1px solid @gray-light;
+    border-top: 1px solid @list-item-separation-bg;
   }
 
   &:not(:first-child) .visual {
@@ -17,21 +17,21 @@
     }
 
     a {
-      color: @text-color;
+      color: @default-text-color;
     }
   }
 
   .title {
     .subject {
-      color: @text-color;
+      color: @default-text-color;
     }
 
     a {
-      color: @text-color;
+      color: @default-text-color;
       font-weight: bold;
 
       &:hover {
-        color: @icinga-blue;
+        color: @list-item-title-hover-color;
         text-decoration: none;
       }
     }

diff --git a/asset/css/variables.less b/asset/css/variables.less
@@ -121,6 +121,10 @@
 @schedule-element-fields-disabled-selected-bg: @base-gray-light;
 @schedule-element-keyboard-note-bg: @base-gray-light;
 
+@empty-state-bg-in-lists: @base-gray-lighter;
+@list-item-title-hover-color: @base-primary-color;
+@list-item-separation-bg: @base-gray-light;
+
 @iplWebLightRules: {
   :root {
     --base-gray: #819398;
@@ -199,5 +203,9 @@
     --schedule-element-fields-disabled-bg: var(--base-gray-lighter);
     --schedule-element-fields-disabled-selected-bg: var(--base-gray-light);
     --schedule-element-keyboard-note-bg: var(--base-gray-light);
+
+    --empty-state-bg-in-lists: var(--base-gray-lighter);
+    --list-item-title-hover-color: var(--base-primary-color);
+    --list-item-separation-bg: var(--base-gray-light);
   }
 };