colors and filters

front/sass/_table.scss

@@ -1,27 +1,44 @@
 .table {
     min-width: 600px;
     overflow: auto;
-    border-radius: 12px;
-    padding: 20px;
-    background: var(--background);
-    filter: brightness(97%);
+    background: var(--p20);
+    padding: 1px;
     font-size: 14px;
+    border-radius: 12px;
     table {
+        background: var(--p20);
         width: 100%;
+        border-collapse:separate;
+        border: none;
+        border-spacing: 0;
+    }
+    thead{
+        border-radius: 12px;
+        tr{
+            border-radius: 12px;
+        }
 
     }
+
     th {
         font-size: 14px;
         font-weight: normal;
         white-space: nowrap;
         max-width: 400px;
+        border: none;
+        background: var(--p20);
         text-align: left;
         padding: 8px 16px;
-        background: var(--background);
-        filter: brightness(90%);
+
         &.is-sort {
            font-weight: 700;
         }
+        &:first-child{
+            border-radius: 12px 0 0 0 ;
+        }
+        &:last-child{
+            border-radius: 0  12px 0  0;
+        }
     }
 
     td {
@@ -30,7 +47,7 @@
         max-width: 400px;
         height: 48px;
         padding: 4px 16px;
-
+        border: none;
         overflow: hidden;
 
 
@@ -39,7 +56,7 @@
         //}
 
         .status{
-            color:var(--accent);
+            color:var(--text);
             font-size: 80%;
         }
         .row-name{
@@ -56,16 +73,21 @@
             line-height: 14px;
         }
     }
-    tr {
-        background: var(--background);
-        &:has(input:checked){
-            filter: brightness(90%);
-        }
-        &:hover {
-            box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
+    tbody{
+        tr {
+            border-radius: 12px;
+            background: var(--p10);
+            border: none;
+            &:has(input:checked){
+                background: var(--p30);
+            }
+            &:hover{
+                background: var(--p20);
+            }
         }
     }
 
+
     tr:nth-child(odd) {
         //background-color: #f9f9f9;
     }