From 500c3d7a05020b7d3e2140fcb99a1461c242166c Mon Sep 17 00:00:00 2001
From: szbk <wisecolt@gmail.com>
Date: Sat, 6 Apr 2024 22:43:02 +0300
Subject: [PATCH] css fix

---
 src/components/Details.svelte | 11 +++++-
 src/libs/DeviceDetails.svelte | 63 ++++++++++++++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/src/components/Details.svelte b/src/components/Details.svelte
index 31ef03b..b39619c 100644
--- a/src/components/Details.svelte
+++ b/src/components/Details.svelte
@@ -21,6 +21,15 @@
   onMount(fetchData);
 </script>
 
-<div>
+<div class="body">
   <DeviceDetails {deviceLog} />
 </div>
+
+<style>
+  .body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+</style>
diff --git a/src/libs/DeviceDetails.svelte b/src/libs/DeviceDetails.svelte
index 5119e87..20c9e3c 100644
--- a/src/libs/DeviceDetails.svelte
+++ b/src/libs/DeviceDetails.svelte
@@ -32,4 +32,65 @@
 </div>
 
 <style>
-</style>
+    .table-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 20px;
+      flex-direction: column;
+      background-color: white;
+      width: 95%;
+      border-radius: 4px;
+      box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
+    }
+    .table {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .table-head-item {
+      width: 100%;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      padding: 5px 10px 10px 10px;
+      color: #535151;
+      font-size: 16px;
+    }
+    .table-row {
+      display: flex;
+      width: 100%;
+      text-decoration: none;
+      color: inherit;
+    }
+    .table-body-item {
+      width: calc(100% / 7);
+      display: flex;
+      justify-content: start;
+      padding: 5px 10px 10px 10px;
+    }
+    .table-head {
+      font-size: 15px;
+    }
+    .divider {
+      width: 100%;
+      background-color: #f2f2f2;
+      height: 1px;
+    }
+    /* Link bileşeni üzerinde cursor:pointer stilini uygulama */
+    :global(.svelte-routing-link) {
+      display: flex;
+      width: 100%;
+      text-decoration: none;
+      color: inherit;
+    }
+    :global(.svelte-routing-link:hover) {
+      cursor: pointer;
+      display: flex;
+      width: 100%;
+      text-decoration: none;
+      color: inherit;
+      background-color: #f3f3f3;
+    }
+  </style>