From 079fd455364a69a483b3666f713e62ba0064d195 Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Mon, 6 Jan 2025 20:12:20 +0800
Subject: [PATCH] fix: opacity style

---
 src/assets/main.css                           | 29 ++++++++++++-------
 .../connections/ConnectionTable.vue           | 12 ++++----
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index fa090aae..4218bcf8 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -10,30 +10,37 @@
 @layer components {
   .card,
   .collapse {
-    background-color: var(--fallback-b1, oklch(var(--b1)));
+    background-color: var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)));
     @apply rounded-xl shadow-md;
   }
+
+  .table tr {
+    @apply border-b-0;
+  }
 }
 
 @for $i from 0 to 100 {
   .custom-background.custom-background-$(i) {
+    .bg-base-100,
+    .bg-base-200,
+    .bg-neutral,
     .card,
     .collapse,
-    .bg-base-100,
-    .table {
-      background-color: var(--fallback-b1, oklch(var(--b1) / calc($(i) / 100)));
+    .table,
+    .drawer-side,
+    .tabs,
+    .input,
+    .btn,
+    .select,
+    .menu .active,
+    .table tbody tr {
+      --tw-border-opacity: calc($(i) / 100);
+      --tw-bg-opacity: calc($(i) / 100);
     }
 
     .drawer-content.bg-base-200\/40 {
       background-color: transparent;
     }
-
-    .drawer-side,
-    .tabs,
-    .bg-base-200,
-    .table tbody tr:nth-child(even) {
-      background-color: var(--fallback-b2, oklch(var(--b2) / calc($(i) / 100)));
-    }
   }
 }
 
diff --git a/src/components/connections/ConnectionTable.vue b/src/components/connections/ConnectionTable.vue
index 8281bd05..d97c519b 100644
--- a/src/components/connections/ConnectionTable.vue
+++ b/src/components/connections/ConnectionTable.vue
@@ -1,13 +1,13 @@
 <template>
   <div
     ref="parentRef"
-    class="h-full overflow-y-auto p-2"
+    class="h-full overflow-y-auto bg-clip-content p-2"
   >
     <div :style="{ height: `${totalSize}px` }">
-      <table :class="`table table-zebra bg-base-100 ${sizeOfTable} rounded-none shadow-md`">
+      <table :class="`table table-zebra ${sizeOfTable} rounded-none shadow-md`">
         <thead class="sticky -top-2 z-10 bg-base-100">
           <tr
-            v-for="headerGroup in table.getHeaderGroups()"
+            v-for="headerGroup in tanstackTable.getHeaderGroups()"
             :key="headerGroup.id"
           >
             <th
@@ -58,7 +58,7 @@
               height: `${virtualRow.size}px`,
               transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
             }"
-            class="hover:!bg-primary hover:text-primary-content"
+            class="bg-base-100 hover:!bg-primary hover:text-primary-content"
           >
             <td
               v-for="cell in rows[virtualRow.index].getVisibleCells()"
@@ -321,7 +321,7 @@ const grouping = ref<GroupingState>([])
 const expanded = ref<ExpandedState>({})
 const sorting = useStorage<SortingState>('config/table-sorting', [])
 
-const table = useVueTable({
+const tanstackTable = useVueTable({
   get data() {
     return renderConnections.value
   },
@@ -374,7 +374,7 @@ const table = useVueTable({
 })
 
 const rows = computed(() => {
-  return table.getRowModel().rows
+  return tanstackTable.getRowModel().rows
 })
 
 const parentRef = ref<HTMLElement | null>(null)