fix: unify shadow & rounded

src/assets/main.css

@@ -6,3 +6,12 @@
   font-family: 'NotoEmoji';
   src: url('./NotoColorEmoji-flagsonly.ttf') format('truetype');
 }
+
+@layer components {
+  .card {
+    @apply rounded-btn bg-base-100 shadow-card;
+  }
+  .collapse {
+    @apply rounded-btn bg-base-100 shadow-card;
+  }
+}

src/components/connections/ConnectionCard.tsx

@@ -35,7 +35,7 @@ export default defineComponent<{
         </span>
       )
       const download = (
-        <div class="badge flex bg-base-200 px-1 text-sm text-base-content">
+        <div class="badge flex px-1 text-sm text-base-content">
           <ArrowDownIcon class="h-4 w-3" />
           <div class="hidden w-16 text-right sm:inline">
             {prettyBytesHelper(props.conn.download)} |{' '}
@@ -44,14 +44,14 @@ export default defineComponent<{
         </div>
       )
       const uploadCompact = (
-        <div class="badge hidden bg-base-200 px-1 text-sm text-base-content 2xl:flex">
+        <div class="badge hidden px-1 text-sm text-base-content 2xl:flex">
           <ArrowUpIcon class="h-4 w-3" />
           <div class="w-16 text-right">{prettyBytesHelper(props.conn.upload)} | </div>
           <div class="w-20 text-right">{prettyBytesHelper(props.conn.uploadSpeed)}/s</div>
         </div>
       )
       const upload = (
-        <div class="badge hidden bg-base-200 px-1 text-sm text-base-content lg:flex">
+        <div class="badge hidden px-1 text-sm text-base-content lg:flex">
           <ArrowUpIcon class="h-4 w-3" />
           <div class="w-16 text-right">{prettyBytesHelper(props.conn.upload)} | </div>
           <div class="w-20 text-right">{prettyBytesHelper(props.conn.uploadSpeed)}/s</div>
@@ -125,7 +125,7 @@ export default defineComponent<{
 
       if (isLargeScreen.value && compactConnectionCard.value) {
         return (
-          <div class="card w-full flex-row items-center justify-between gap-1 rounded-xl bg-base-100 px-2 py-1 shadow-lg">
+          <div class="card w-full flex-row items-center justify-between gap-1 px-2 py-1">
             {host}
             {chians}
             {connectionCompact}
@@ -138,7 +138,7 @@ export default defineComponent<{
         )
       } else {
         return (
-          <div class="card w-full gap-[1px] rounded-xl bg-base-100 px-2 py-[1px] shadow-lg">
+          <div class="card w-full gap-[1px] px-2 py-[1px]">
             <div class="flex flex-row items-center gap-1 px-1">
               {host}
               {flex1}

src/components/connections/ConnectionTable.vue

@@ -1,6 +1,6 @@
 <template>
-  <table class="table table-zebra table-xs overflow-hidden rounded-lg bg-base-100 shadow-lg">
-    <thead class="bg-base-100">
+  <table class="table table-zebra table-xs overflow-hidden rounded-btn shadow-card">
+    <thead class="">
       <tr
         v-for="headerGroup in table.getHeaderGroups()"
         :key="headerGroup.id"

src/components/proxies/ProxyGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="collapse collapse-arrow bg-base-100 shadow-lg">
+  <div class="collapse collapse-arrow">
     <div class="collapse-title">
       <div class="flex items-center gap-2">
         <div class="flex items-center gap-1 text-lg font-medium sm:text-xl">

src/components/proxies/ProxyNodeCard.vue

@@ -2,7 +2,7 @@
   <div
     :class="
       twMerge(
-        'flex cursor-pointer flex-wrap items-center justify-end gap-1 rounded-md bg-base-200 p-2 shadow-md sm:hover:scale-105',
+        'flex cursor-pointer flex-wrap items-center justify-end gap-1 rounded-btn bg-base-200 p-2 shadow-card shadow-md sm:hover:scale-105',
         active && 'bg-primary text-primary-content',
         truncateProxyName && isTruncated && 'tooltip text-left',
       )

src/components/proxies/ProxyPreview.vue

@@ -6,7 +6,7 @@
     <div
       v-for="node in nodesLatency"
       :key="node.name"
-      class="flex h-4 w-4 items-center justify-center rounded-full shadow-lg"
+      class="flex h-4 w-4 items-center justify-center rounded-full"
       :class="getBgColor(node.latency)"
     >
       <div

src/components/proxies/ProxyProvider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="collapse collapse-arrow bg-base-100 shadow-lg">
+  <div class="collapse collapse-arrow">
     <div class="collapse-title">
       <div class="flex items-center gap-2">
         <div class="text-lg font-medium sm:text-xl">

src/components/rules/RuleCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card block w-full gap-2 rounded-xl bg-base-100 p-2 text-sm shadow-lg">
+  <div class="card block w-full gap-2 p-2 text-sm">
     <span>{{ rule.type }}</span>
     <span class="mx-2">{{ rule.payload }}</span>
     <span class="min-w-32 text-primary">-> {{ rule.proxy }}</span>

src/components/rules/RuleProvider.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="card w-full flex-row items-center gap-2 rounded-xl bg-base-100 p-1 px-2 text-sm shadow-lg"
-  >
+  <div class="card w-full flex-row items-center gap-2 p-1 px-2 text-sm">
     <div class="flex flex-1 flex-col sm:flex-row">
       <div class="w-48 flex-1 text-primary">
         {{ ruleProvider.name }} ({{ ruleProvider.ruleCount }})

src/components/settings/SourceIPLabels.vue

@@ -13,7 +13,7 @@
         v-model="sourceIPLabelMap[ip]"
       />
       <button
-        class="btn btn-circle btn-xs bg-base-300"
+        class="btn btn-circle btn-xs"
         @click="() => handlerLabelRemove(ip)"
       >
         <MinusCircleIcon class="h-4 w-4" />
@@ -32,7 +32,7 @@
         v-model="newLabelForIP.label"
       />
       <button
-        class="btn btn-circle btn-xs bg-base-300"
+        class="btn btn-circle btn-xs"
         @click="handlerLabelAdd"
       >
         <PlusIcon class="h-4 w-4" />

src/components/settings/TableSettings.vue

@@ -1,8 +1,8 @@
 <template>
   <div>{{ $t('customTableColumns') }}:</div>
-  <div class="flex rounded bg-base-200 lg:flex-col">
+  <div class="flex rounded lg:flex-col">
     <VueDraggable
-      class="flex flex-1 flex-col gap-2 bg-base-300 p-2 lg:flex-row"
+      class="flex flex-1 flex-col gap-2 bg-base-200 p-2 lg:flex-row"
       v-model="connectionTableColumns"
       :animation="150"
       group="list"
@@ -11,7 +11,7 @@
       <div
         v-for="item in connectionTableColumns"
         :key="item"
-        class="flex h-8 cursor-move items-center rounded bg-neutral px-2 text-neutral-content shadow-lg"
+        class="flex h-8 cursor-move items-center rounded bg-neutral px-2 text-neutral-content"
       >
         {{ $t(item) }}
       </div>
@@ -26,7 +26,7 @@
       <div
         v-for="item in restOfColumns"
         :key="item"
-        class="flex h-8 cursor-move items-center rounded bg-neutral px-2 text-neutral-content shadow-lg"
+        class="flex h-8 cursor-move items-center rounded bg-neutral px-2 text-neutral-content"
       >
         {{ $t(item) }}
       </div>

src/components/sidebar/CommonCtrl.vue

@@ -5,7 +5,7 @@
       {{ $t('version') }}:
       <img
         :src="isSingBox ? SingBoxLogo : MetacubexLogo"
-        class="w-4 rounded-sm"
+        class="w-4"
       />
       {{ version }}
     </div>

src/components/sidebar/SideBar.vue

@@ -36,15 +36,15 @@
         <VerticalInfos />
       </template>
       <template v-else>
-        <div class="card bg-base-100 shadow-lg">
+        <div class="card shadow-sm">
           <component
             v-if="sidebarComp"
             :is="sidebarComp"
           />
           <CommonSidebar />
         </div>
         <div
-          class="card overflow-hidden bg-base-100 shadow-lg"
+          class="card overflow-hidden shadow-sm"
           v-if="route.name !== ROUTE_NAME.settings"
         >
           <SpeedCharts />

src/components/statistics/MemoryCharts.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="chart"
-    class="h-28 w-full bg-base-100"
+    class="h-28 w-full"
   ></div>
   <span
     class="hidden text-base-content"

src/components/statistics/SpeedCharts.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="chart"
-    class="h-28 w-full bg-base-100"
+    class="h-28 w-full"
   ></div>
   <span
     class="hidden text-base-content"

src/views/ConnectionsPage.vue

@@ -2,7 +2,7 @@
   <div class="h-full overflow-auto p-2">
     <template v-if="useConnectionCard">
       <template v-if="!renderConnections.length">
-        <div class="card w-full flex-row gap-1 rounded-xl bg-base-100 p-2 text-sm shadow-lg">
+        <div class="card w-full flex-row gap-1 p-2 text-sm">
           {{ $t('noContent') }}
         </div>
       </template>

src/views/HomePage.vue

@@ -9,7 +9,7 @@
     <SideBar />
 
     <div
-      class="drawer-content fixed bottom-0 flex h-full w-full flex-col overflow-hidden bg-base-200/50 md:relative md:w-auto"
+      class="drawer-content fixed bottom-0 flex h-full w-full flex-col overflow-hidden bg-base-200/20 md:relative md:w-auto"
     >
       <component
         v-if="ctrlComp && isSiderbarCollapsed"
@@ -41,9 +41,7 @@
             </li>
           </ul>
           <label for="sidebar">
-            <div
-              class="btn btn-circle drawer-button btn-sm bg-neutral text-neutral-content shadow-lg"
-            >
+            <div class="btn btn-circle drawer-button btn-sm bg-neutral text-neutral-content">
               <Bars3Icon class="h-4 w-4" />
             </div>
           </label>

src/views/LogsPage.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="flex h-full flex-col gap-1 overflow-y-auto overflow-x-hidden p-2">
     <template v-if="!renderLogs.length">
-      <div class="card w-full flex-row gap-1 rounded-xl bg-base-100 p-2 text-sm shadow-lg">
+      <div class="card w-full flex-row gap-1 p-2 text-sm">
         {{ $t('noContent') }}
       </div>
     </template>
     <div
       v-for="log in renderLogs"
       :key="log.seq"
-      class="card block rounded-xl bg-base-100 p-2 text-sm shadow-lg"
+      class="card block p-2 text-sm"
     >
       <span>{{ log.seq }}</span>
       <span class="mx-2 text-primary">{{

src/views/SettingsPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cols-1 gap-2 overflow-y-auto p-2">
     <!-- dashboard -->
-    <div class="card card-compact bg-base-100 shadow-lg">
+    <div class="card card-compact">
       <div class="card-title px-4 pt-4 text-primary">
         <div class="indicator">
           <span
@@ -79,7 +79,7 @@
     </div>
 
     <!-- statistics -->
-    <div class="card card-compact bg-base-100 shadow-lg">
+    <div class="card card-compact">
       <div class="card-title px-4 pt-4">
         {{ $t('statistics') }}
       </div>
@@ -91,7 +91,7 @@
     </div>
 
     <!-- backend -->
-    <div class="card card-compact bg-base-100 shadow-lg">
+    <div class="card card-compact">
       <div class="card-title px-4 pt-4">
         {{ $t('backend') }}
       </div>
@@ -138,7 +138,7 @@
     </div>
 
     <!-- proxies -->
-    <div class="card card-compact bg-base-100 shadow-lg">
+    <div class="card card-compact">
       <div class="card-title px-4 pt-4">
         {{ $t('proxies') }}
       </div>
@@ -237,7 +237,7 @@
     </div>
 
     <!-- connections -->
-    <div class="card card-compact bg-base-100 shadow-lg">
+    <div class="card card-compact">
       <div class="card-title px-4 pt-4">
         {{ $t('connections') }}
       </div>

src/views/SetupPage.vue

@@ -16,7 +16,7 @@
     <div class="absolute bottom-4 right-4">
       <LanguageSelect />
     </div>
-    <div class="rounded-lg bg-base-100 p-6 shadow-lg">
+    <div class="card p-6">
       <h1 class="mb-4 text-2xl font-semibold">{{ $t('setup') }}</h1>
       <div class="form-control mb-4">
         <label class="label">
@@ -152,7 +152,11 @@ const query = new URLSearchParams(
 )
 if (query.has('hostname')) {
   handleSubmit({
-    protocol: query.get('http') ? 'http' : query.get('https') ? 'https' : window.location.protocol.replace(':', ''),
+    protocol: query.get('http')
+      ? 'http'
+      : query.get('https')
+        ? 'https'
+        : window.location.protocol.replace(':', ''),
     host: query.get('hostname') as string,
     port: Number(query.get('port')) as unknown as number,
     password: query.get('secret') as string,

tailwind.config.ts

@@ -16,6 +16,9 @@ export default {
       '3xl': '1800px',
     },
     extend: {
+      boxShadow: {
+        card: '0 0 8px rgba(0, 0, 0, 0.06), 0 4px 32px rgba(0, 0, 0, 0.04)',
+      },
       fontFamily: {
         MiSans: ['MiSans-VF', 'NotoEmoji', 'system-ui'],
         SarasaUI: ['SarasaUiSC-Regular', 'NotoEmoji', 'system-ui'],