.details, .stateOff => config.less

src/main/angular/src/app/shared/device-list/device-list.component.html

@@ -13,8 +13,7 @@
         <div class="switchOff" (click)="deviceService.setState(device, false)"></div>
       </div>
 
-      <div class="timestamp">
-        {{ device.stateProperty?.state?.timestamp | relative:now }}
+      <div class="timestamp details">
         {{ device.stateProperty?.lastValueChange | relative:now }}
       </div>
 

src/main/angular/src/app/shared/device-list/device-list.component.less

@@ -14,7 +14,6 @@
       clear: left;
       float: left;
       font-size: 80%;
-      color: gray;
     }
 
     .actions {
@@ -41,17 +40,4 @@
 
   }
 
-  .stateOn {
-    background-color: palegreen;
-  }
-
-  .stateOff {
-    background-color: indianred;
-
-    .timestamp {
-      color: lightgray;
-    }
-
-  }
-
 }

src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.less

@@ -10,34 +10,6 @@
       margin-bottom: @space;
     }
 
-    .details {
-      font-size: 80%;
-      color: gray;
-
-      .stackLeft {
-        float: left;
-        margin-right: @space;
-      }
-
-      .stackRight {
-        float: right;
-        margin-left: @space;
-      }
-
-    }
-
-  }
-
-  .stateOn {
-    background-color: palegreen;
-  }
-
-  .stateOff {
-    background-color: indianred;
-
-    .details {
-      color: lightgray;
-    }
   }
 
 }

src/main/angular/src/config.less

@@ -1,5 +1,5 @@
 @space: 0.4em;
-@border: 0.1em;
+@border: 0.05em;
 
 .flexBox {
   display: flex;
@@ -16,6 +16,34 @@
 
 }
 
+.details {
+  font-size: 80%;
+  color: gray;
+
+  .stackLeft {
+    float: left;
+    margin-right: @space;
+  }
+
+  .stackRight {
+    float: right;
+    margin-left: @space;
+  }
+
+}
+
+.stateOn {
+  background-color: palegreen;
+}
+
+.stateOff {
+  background-color: indianred;
+
+  .details {
+    color: #575757;
+  }
+}
+
 .tileContainer {
   padding: calc(@space / 2);