fix: tab items css refactoring (#1495)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -1,39 +1,22 @@
 {% load i18n %}
 
 {% if inlines_list or tabs_list %}
-    <nav class="bg-base-100 flex flex-col font-medium gap-1 p-1 rounded-default w-full dark:border-base-700 md:flex-row md:w-auto dark:bg-white/[.04]">
+    <nav class="bg-base-100 flex flex-col font-medium gap-1 p-1 rounded-default w-full dark:border-base-700 md:flex-row md:w-auto dark:bg-white/[.04] *:flex *:flex-row *:font-medium *:items-center *:px-2.5 *:py-[5px] *:rounded-default *:transition-colors *:hover:bg-base-700/[.04] *:dark:hover:bg-white/[.04] [&>.active]:bg-white [&>.active]:shadow-xs [&>.active]:text-font-important-light [&>.active]:hover:bg-white [&>.active]:dark:bg-base-900 [&>.active]:dark:hover:bg-base-900 [&>.active]:dark:text-font-important-dark">
         {% for item in tabs_list %}
             {% if item.has_permission %}
-                <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}{% if item.inline %}#{{ item.inline|slugify }}{% endif %}"
-                   class="flex flex-row font-medium items-center px-2.5 py-[5px] rounded-default transition-colors
-                          {% if item.active and not item.inline %}
-                              bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark
-                          {% else %}
-                              hover:bg-base-700/[.04] dark:hover:bg-white/[.04]
-                          {% endif %}"
-                   {% if item.inline %}
-                       x-on:click="activeTab = '{{ item.inline|slugify }}'"
-                       x-bind:class="{'bg-base-100 text-primary-600 hover:text-primary-500 dark:text-primary-500 dark:bg-white/[.06]': activeTab == '{{ item.inline|slugify }}'}"
-                   {% endif %}
-                >
+                <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}{% if item.inline %}#{{ item.inline|slugify }}{% endif %}" class="{% if item.active and not item.inline %}active{% endif %}" {% if item.inline %}x-on:click="activeTab = '{{ item.inline|slugify }}'" x-bind:class="{'active': activeTab == '{{ item.inline|slugify }}'}"{% endif %}>
                     {{ item.title }}
                 </a>
             {% endif %}
         {% endfor %}
 
         {% if inlines_list %}
-            <a class="flex flex-row items-center px-2.5 py-[5px] rounded-default transition-colors"
-               href="#general"
-               x-on:click="activeTab = 'general'"
-               x-bind:class="{'bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark': activeTab == 'general', 'hover:bg-base-700/[.04] dark:hover:bg-white/[.04]': activeTab != 'general'}">
+            <a href="#general" x-on:click="activeTab = 'general'" x-bind:class="{'active': activeTab == 'general'}">
                 {% trans "General" %}
             </a>
 
             {% for inline in inlines_list %}
-                <a class="flex flex-row items-center px-2.5 py-[5px] rounded-default transition-colors"
-                   href="#{{ inline.formset.prefix|slugify }}"
-                   x-on:click="activeTab = '{{ inline.formset.prefix|slugify }}'"
-                   x-bind:class="{'bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark': activeTab == '{{ inline.formset.prefix|slugify }}', 'hover:bg-base-700/[.04] dark:hover:bg-white/[.04]': activeTab != '{{ inline.formset.prefix|slugify }}'}">
+                <a href="#{{ inline.formset.prefix|slugify }}" x-on:click="activeTab = '{{ inline.formset.prefix|slugify }}'" x-bind:class="{'active': activeTab == '{{ inline.formset.prefix|slugify }}'}">
                     {% if inline.formset.max_num == 1 %}
                         {{ inline.opts.verbose_name|capfirst }}
                     {% else %}