refine list

WEB/src/styles.less

@@ -1,11 +1,75 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 
-tbody {
+
+body {
+  margin: 0px;
+}
+
+html {
+  background-image: url(https://images.unsplash.com/photo-1476136236990-838240be4859?ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80);
+}
+
+.page-container {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  bottom: 20px;
+  right: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 8px;
+  transition: all 300ms ease-in-out;
+  .mat-table tbody {
+    background: none;
+  }
+  th.mat-header-cell:first-of-type {
+    border-top-left-radius: 8px;
+    transition: all 300ms ease-in-out;
+  }
+  th.mat-header-cell:last-of-type {
+    border-top-right-radius: 8px;
+    transition: all 300ms ease-in-out;
+  }
+  .mat-table thead {
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    transition: all 300ms ease-in-out;
+  }
+
+  tr.selected {
+    background-color: #0002;
+  }
   tr:hover {
     cursor: pointer;
+    background-color: #0001;
     td {
       color: #ff9900;
     }
   }
+  td.mat-cell {
+    padding: 0 5px;
+  }
+
+  &.pinned {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 70vw;
+    border-radius: 0px;
+    th.mat-header-cell:first-of-type {
+      border-top-left-radius: 0px;
+      transition: all 300ms ease-in-out;
+    }
+    th.mat-header-cell:last-of-type {
+      border-top-right-radius: 0px;
+      transition: all 300ms ease-in-out;
+    }
+    .mat-table thead {
+      border-top-right-radius: 0px;
+      border-top-left-radius: 0px;
+      transition: all 300ms ease-in-out;
+    }
+
+  }
 }