update styling

Author: ArthurFlag

assets/css/components.css

@@ -101,3 +101,15 @@
 .summary-bar {
   @apply my-1 mt-4 flex flex-col rounded-sm border-1 border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900;
 }
+
+.tabs {
+  @apply bg-blue/2 rounded-sm p-2;
+}
+.tablist {
+  @apply mb-1 border-b border-gray-100 dark:border-gray-800;
+}
+
+.tab-item {
+  @apply inline-block rounded-sm px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-900;
+  @apply dark:text-gray-200;
+}

layouts/shortcodes/tabs.html

@@ -6,6 +6,7 @@
 
 
 <div
+  class="tabs"
   {{ with $group }}
     {{ if $persist }}
       x-data="{ selected: $persist('{{ $first }}').as('{{ $groupID }}') }"
@@ -19,10 +20,10 @@
   {{ end }}
   aria-role="tabpanel"
 >
-  <div aria-role="tablist" class="space-x-2">
+  <div aria-role="tablist" class="tablist">
     {{ range (.Store.Get "tabs") }}
       <button
-        class="p-1"
+        class="tab-item"
         :class="selected === '{{ .name | urlize }}' &&
           'border-blue border-b-4 dark:border-b-blue-600'"
         {{ if $group }}
@@ -36,7 +37,6 @@
       </button>
     {{ end }}
   </div>
-  <hr class="!mt-0" />
   <div>
     {{ range (.Store.Get "tabs") }}
       <div
@@ -47,5 +47,4 @@
       </div>
     {{ end }}
   </div>
-  <hr />
 </div>