Fix styling on the targets tab

PhotonVision · Aug 7, 2023 · 654f115 · 654f115
1 parent 3ee45cd
commit 654f115
Showing 1 changed file with 29 additions and 13 deletions.
diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -93,24 +93,40 @@ import { useStateStore } from "@/stores/StateStore";
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .v-data-table {
-  text-align: center;
-  background-color: transparent !important;
   width: 100%;
   height: 100%;
-  overflow-y: auto;
-}
-
-.v-data-table th {
+  text-align: center;
   background-color: #006492 !important;
-}
 
-.v-data-table th,td {
-  font-size: 1rem !important;
-}
+  th, td {
+    background-color: #006492 !important;
+    font-size: 1rem !important;
+  }
+
+  td {
+    font-family: monospace !important;
+  }
+
+  tbody :hover td {
+    background-color: #005281 !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0.55em;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+  }
 
-.v-data-table td {
-  font-family: monospace !important;
+  ::-webkit-scrollbar-thumb {
+    background-color: #ffd843;
+    border-radius: 10px;
+  }
 }
 </style>