django-unfold 0.55.2__py3-none-any.whl → 1.0.0__py3-none-any.whl

unfold/templates/unfold/helpers/messages/errornote.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 
 {% if errors %}
-    <p class="errornote bg-red-100 mb-8 text-red-700 px-3 py-3 rounded dark:bg-red-500/20 dark:border-red-500/20 dark:text-red-400">
+    <p class="errornote bg-red-100 mb-8 text-red-700 px-3 py-3 rounded-default dark:bg-red-500/20 dark:border-red-500/20 dark:text-red-400">
         {% if errors.items|length == 1 %}
             {% translate "Please correct the error below." %}
         {% else %}

unfold/templates/unfold/helpers/messages/info.html

@@ -1,3 +1,3 @@
-<div class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
+<div class="mb-3 px-3 py-3 rounded-default text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
     {{ message }}
 </div>

unfold/templates/unfold/helpers/messages/success.html

@@ -1,3 +1,3 @@
-<div class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
+<div class="mb-3 px-3 py-3 rounded-default text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
     {{ message }}
 </div>

unfold/templates/unfold/helpers/messages/warning.html

@@ -1,3 +1,3 @@
-<div class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
+<div class="mb-3 px-3 py-3 rounded-default text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
     {{ message }}
 </div>

unfold/templates/unfold/helpers/messages.html

@@ -1,7 +1,7 @@
 {% if messages %}
     <ul class="flex flex-col gap-4 mb-8">
         {% for message in messages %}
-            <li class="*:!mb-0">
+            <li class="*:mb-0!">
                 {% if message.tags == 'info' %}
                     {% include "unfold/helpers/messages/info.html" with message=message %}
                 {% elif message.tags == 'success' %}

unfold/templates/unfold/helpers/navigation.html

@@ -1,17 +1,13 @@
-{% load i18n %}
+{% load i18n unfold %}
 
-<div class="relative min-w-sidebar transition-width w-sidebar z-30">
-    <nav id="nav-sidebar" class="bg-base-50 border-r border-base-200 bottom-0 fixed max-h-screen top-0 transition-width w-sidebar dark:bg-base-900 dark:border-base-800">
-        <div class="flex flex-col min-h-screen min-w-sidebar dark:bg-base-950/20">
-            {% include "unfold/helpers/navigation_header.html" %}
+<nav class="bg-base-50 flex flex-col min-h-screen dark:bg-base-950/20 {% element_classes 'navigation_inner' %}">
+    {% include "unfold/helpers/navigation_header.html" %}
 
-            {% include "unfold/helpers/search.html" %}
+    {% include "unfold/helpers/search.html" %}
 
-            {% if sidebar_navigation|length > 0 %}
-                {% include "unfold/helpers/app_list.html" with app_list=available_apps %}
-            {% else %}
-                {% include "admin/app_list.html" with app_list=available_apps show_changelinks=False %}
-            {% endif %}
-        </div>
-    </nav>
-</div>
+    {% if sidebar_navigation|length > 0 %}
+        {% include "unfold/helpers/app_list.html" with app_list=available_apps %}
+    {% else %}
+        {% include "admin/app_list.html" with app_list=available_apps show_changelinks=False %}
+    {% endif %}
+</nav>

unfold/templates/unfold/helpers/navigation_header.html

@@ -1,8 +1,10 @@
-<div class="border-b border-base-200 flex gap-3 items-center h-[65px] mb-5 dark:border-base-800 px-3" {% if site_dropdown %}x-data="{ openDropdown: false }"{% endif %}>
-    <div class="bg-transparent border border-transparent flex font-semibold gap-3 grow min-w-0 -mx-px h-[48px] items-center px-3 {% if site_dropdown %}cursor-pointer rounded transition-all hover:bg-white hover:border-base-200 hover:shadow-sm hover:dark:bg-base-800 hover:dark:border-base-700{% endif %}"
+{% load unfold %}
+
+<div class="border-b border-base-200 flex gap-3 items-center h-[65px] mb-5 dark:border-base-800 px-3 {% element_classes 'navigation_header' %}" {% if site_dropdown %}x-data="{ openDropdown: false }"{% endif %}>
+    <div class="bg-transparent border border-transparent flex font-semibold gap-3 grow min-w-0 -mx-px h-[54px] items-center px-3 {% if site_dropdown %}cursor-pointer rounded-default transition-all hover:bg-white hover:border-base-200 hover:shadow-xs dark:hover:bg-base-800 dark:hover:border-base-700{% endif %}"
          {% if site_dropdown %}
              x-on:click="openDropdown = !openDropdown"
-             x-bind:class="{'bg-white border-base-200 shadow-sm dark:bg-base-800 dark:border-base-700': openDropdown, 'bg-transparent border-transparent': !openDropdown}"
+             x-bind:class="{'bg-white border-base-200 shadow-xs dark:bg-base-800 dark:border-base-700': openDropdown, 'bg-transparent border-transparent': !openDropdown}"
          {% endif %}
     >
         {% if site_logo %}
@@ -18,7 +20,7 @@
         {% endif %}
     </div>
 
-    <span class="material-symbols-outlined block cursor-pointer h-4.5 xl:!hidden hover:text-base-700 dark:hover:text-base-200" x-on:click="sidebarMobileOpen = !sidebarMobileOpen">
+    <span class="material-symbols-outlined block cursor-pointer h-[18px] xl:hidden! hover:text-base-700 dark:hover:text-base-200" x-on:click="sidebarMobileOpen = !sidebarMobileOpen">
         close
     </span>
 

unfold/templates/unfold/helpers/pagination.html

@@ -0,0 +1,7 @@
+{% load admin_list unfold %}
+
+{% if cl %}
+    <div {% if not is_popup %}class="px-4 lg:backdrop-blur-xs lg:bg-white/80 lg:flex lg:items-center lg:dark:bg-base-900/80 lg:left-0 lg:right-0 lg:bottom-0 lg:sticky relative z-40 {% if not is_popup %}lg:border-t lg:border-base-200 lg:relative lg:scrollable-top lg:dark:border-base-800{% endif %} {% element_classes 'pagination' %}"{% endif %}>
+        {% pagination cl %}
+    </div>
+{% endif %}

unfold/templates/unfold/helpers/search.html

@@ -2,7 +2,7 @@
 
 {% if sidebar_show_search %}
     <div class="mb-2.5 mx-3 relative" x-data="{openSearchResults: false}">
-        <div class="bg-white border border-base-200 flex items-center overflow-hidden rounded shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-base-900 dark:border-base-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
+        <div class="bg-white border border-base-200 flex items-center overflow-hidden rounded-default shadow-xs focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-base-900 dark:border-base-700">
             <span class="material-symbols-outlined md-18 pl-3 text-base-400">manage_search</span>
 
             <input type="search"
@@ -14,7 +14,7 @@
                    hx-trigger="keyup changed delay:500ms, search"
                    hx-target="#search-results"
                    hx-indicator=".htmx-indicator"
-                   class="flex-grow font-medium overflow-hidden pl-2 pr-3 py-2 text-font-default-light text-sm placeholder-base-400 focus:outline-none dark:bg-base-900 dark:text-font-default-dark"
+                   class="grow font-medium overflow-hidden pl-2 pr-3 py-2 text-font-default-light text-sm placeholder-base-400 focus:outline-hidden dark:bg-base-900 dark:text-font-default-dark"
                    placeholder="{% translate 'Search apps and models...' %}" aria-label="{% translate 'Filter navigation items' %}" />
             <div class="absolute opacity-0 htmx-indicator mt-0.5 right-2 top-2">
                 <span class="animate-spin material-symbols-outlined md-18 text-base-300">sync</span>

unfold/templates/unfold/helpers/search_results.html

@@ -1,5 +1,5 @@
 {% if results %}
-    <ul class="absolute bg-white border border-base-200 left-0 mt-12 right-0 rounded top-0 shadow-sm text-sm z-10 dark:bg-base-800 dark:border-base-700">
+    <ul class="absolute bg-white border border-base-200 left-0 mt-12 right-0 rounded-default top-0 shadow-xs text-sm z-10 dark:bg-base-800 dark:border-base-700">
         {% for app in results %}
             {% for model in app.models %}
                 <li>

unfold/templates/unfold/helpers/site_dropdown.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 
 {% if site_dropdown %}
-    <div class="absolute bg-white border flex flex-col left-3 py-1 rounded shadow-lg top-[73px] w-[264px] z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openDropdown" x-transition x-on:click.outside="openDropdown = false">
+    <div class="absolute bg-white border border-base-200 flex flex-col left-3 py-1 rounded-default shadow-lg top-[73px] w-[264px] z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openDropdown" x-transition x-on:click.outside="openDropdown = false">
         {% for item in site_dropdown %}
-            <a href="{{ item.link }}" class="flex flex-row items-center gap-3 max-h-[30px] mx-1 px-2 py-2 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
+            <a href="{{ item.link }}" class="flex flex-row items-center gap-3 max-h-[30px] mx-1 px-2 py-2 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
                 {% if item.icon %}
                     <span class="material-symbols-outlined">
                         {{ item.icon }}

unfold/templates/unfold/helpers/site_icon.html

@@ -4,27 +4,27 @@
     <div class="shrink-0">
         <{% if site_dropdown %}span{% else %}a href="{% url "admin:index" %}"{% endif %}>
         {% if site_icon.light and site_icon.dark %}
-            <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden dark:block"/>
+            <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-[38px] hidden dark:block"/>
 
-            <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-8 dark:hidden" />
+            <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-[38px] dark:hidden" />
         {% else %}
-            <img src="{{ site_icon }}" class="h-8" alt="{% trans 'Home' %}" />
+            <img src="{{ site_icon }}" class="h-[38px]" alt="{% trans 'Home' %}" />
         {% endif %}
     </{% if site_dropdown %}span{% else %}a{% endif %}>
     </div>
 {% else %}
-    <{% if site_dropdown %}span{% else %}a href="{% url "admin:index" %}"{% endif %} class="bg-primary-600 flex h-8 items-center justify-center rounded shrink-0 text-white text-xs w-8">
+    <{% if site_dropdown %}span{% else %}a href="{% url "admin:index" %}"{% endif %} class="bg-primary-600 flex h-[38px] items-center justify-center rounded-default shrink-0 text-white text-xs w-[38px]">
     <span class="material-symbols-outlined md-18">{% if site_symbol %}{{ site_symbol }}{% else %}settings{% endif %}</span>
     </{% if site_dropdown %}span{% else %}a{% endif %}>
 {% endif %}
 
 <div class="flex flex-col gap-0.5 grow justify-center min-w-0">
-    <div class="text-font-important-light leading-normal tracking-tight dark:text-font-important-dark *:leading-none *:truncate {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
+    <div class="text-font-important-light leading-normal tracking-tight dark:text-font-important-dark *:truncate {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
         {{ branding }}
     </div>
 
     {% if site_subheader %}
-        <div class="font-normal text-font-subtle-light text-xs leading-none dark:text-font-subtle-dark">
+        <div class="font-normal text-font-subtle-light text-xs dark:text-font-subtle-dark">
             {{ site_subheader }}
         </div>
     {% endif %}

unfold/templates/unfold/helpers/submit.html

@@ -1,3 +1,3 @@
-<button type="submit" {% if name %}name="{{ name}}"{% endif %} class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded self-end text-sm text-white">
+<button type="submit" {% if name %}name="{{ name}}"{% endif %} class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-default self-end text-sm text-white">
     {{ title }}
 </button>

unfold/templates/unfold/helpers/tab_action.html

@@ -1,7 +1,7 @@
 {% load unfold %}
 
 <li class="{% action_item_classes action %}" {% if not link %}x-data="{actionDropdownOpen: false}" x-ref="actionDropdown{{ action.method_name }}"{% endif %}>
-    <a {% if link %}href="{{ link }}"{% endif %}class="cursor-pointer flex items-center gap-2 px-3 py-2 text-left whitespace-nowrap" {% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}
+    <a {% if link %}href="{{ link }}"{% endif %}class="cursor-pointer flex grow items-center gap-2 px-3 py-2 text-left whitespace-nowrap" {% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}
        {% if not link %}
            x-on:click="actionDropdownOpen = !actionDropdownOpen"
            x-bind:class="{'{% if action.variant.value == "default" %}text-primary-600 dark:text-primary-500{% endif %}': actionDropdownOpen }"
@@ -15,7 +15,7 @@
         {{ title }}
 
         {% if not link %}
-            <span class="border-l border-base-200 flex items-center select-none self-stretch ml-1 -mr-1 -my-2 pl-2
+            <span class="border-l border-base-200 flex items-center select-none self-stretch ml-auto -mr-1 -my-2 pl-2
                          {% if action.variant.value == "primary" %}
                              border-primary-700 dark:border-primary-500
                          {% elif action.variant.value == "danger" %}
@@ -29,7 +29,7 @@
                          {% else %}
                              border-base-200 dark:border-base-700
                          {% endif %}">
-                <span class="material-symbols-outlined ml-auto rotate-90 transition-transform" x-bind:class="{'!-rotate-90': actionDropdownOpen }">
+                <span class="material-symbols-outlined ml-auto rotate-90 transition-transform" x-bind:class="{'-rotate-90!': actionDropdownOpen }">
                     chevron_right
                 </span>
             </span>
@@ -38,9 +38,9 @@
 
     {% if not link %}
         <template x-teleport="body">
-            <nav x-anchor.bottom-end.offset.4="$refs.actionDropdown{{ action.method_name }}" class="absolute bg-white border flex flex-col -mr-px py-1 right-0 rounded shadow-lg top-10 w-52 z-50 dark:bg-base-800 dark:border-base-700" x-transition x-show="actionDropdownOpen" x-on:click.outside="actionDropdownOpen = false">
+            <nav x-anchor.bottom-end.offset.4="$refs.actionDropdown{{ action.method_name }}" class="absolute bg-white border border-base-200 flex flex-col -mr-px py-1 right-0 rounded-default shadow-lg top-10 w-52 z-50 dark:bg-base-800 dark:border-base-700" x-transition x-show="actionDropdownOpen" x-on:click.outside="actionDropdownOpen = false">
                 {% for item in action.items %}
-                    <a href="{{ item.path }}" class="flex items-center font-normal gap-2 max-h-[30px] mx-1 px-3 py-2 rounded text-left hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=item.attrs %}>
+                    <a href="{{ item.path }}" class="flex items-center font-normal gap-2 max-h-[30px] mx-1 px-3 py-2 rounded-default text-left hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=item.attrs %}>
                         {% if item.icon %}
                             <span class="material-symbols-outlined">
                                 {{ item.icon }}

unfold/templates/unfold/helpers/tab_actions.html

@@ -1,5 +1,5 @@
 {% if actions_list or actions_detail or actions_items or nav_global %}
-    <ul class="flex flex-col font-medium mb-4 ml-auto mt-2 shadow-sm md:flex-row md:mb-2 md:mt-0 max-md:w-full">
+    <ul class="flex flex-col font-medium mb-4 ml-auto mt-2 md:flex-row md:mb-2 md:mt-0 max-md:w-full">
         {% if actions_items %}
             {{ actions_items }}
         {% endif %}

unfold/templates/unfold/helpers/tab_items.html

@@ -1,15 +1,15 @@
 {% load i18n %}
 
 {% if inlines_list or tabs_list %}
-    <ul class="border rounded flex flex-col max-md:w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-base-800">
+    <ul class="border border-base-200 rounded-default flex flex-col max-md:w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-base-800">
         {% for item in tabs_list %}
             {% if item.has_permission %}
-                <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
+                <li class="border-b border-base-200 last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
                     <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}{% if item.inline %}#{{ item.inline|slugify }}{% endif %}"
-                       class="block px-3 py-2 md:py-4 md:px-0 dark:border-base-800 {% if item.active and not item.inline %} border-b font-semibold -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 md:border-primary-500 dark:md:!border-primary-600{% else %}font-medium hover:text-primary-600 dark:hover:text-primary-500{% endif %}"
+                       class="block px-3 py-2 md:py-4 md:px-0 dark:border-base-800 {% if item.active and not item.inline %} border-b font-semibold -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 md:border-primary-500 dark:md:border-primary-600!{% else %}font-medium hover:text-primary-600 dark:hover:text-primary-500{% endif %}"
                        {% if item.inline %}
                            x-on:click="activeTab = '{{ item.inline|slugify }}'"
-                           x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ item.inline|slugify }}'}"
+                           x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:border-primary-600! font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ item.inline|slugify }}'}"
                        {% endif %}
                     >
                         {{ item.title }}
@@ -23,7 +23,7 @@
                 <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
                    href="#general"
                    x-on:click="activeTab = 'general'"
-                   x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == 'general', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-base-800': activeTab != 'general'}">
+                   x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:border-primary-600! font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == 'general', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-base-800': activeTab != 'general'}">
                     {% trans "General" %}
                 </a>
             </li>
@@ -31,9 +31,9 @@
             {% for inline in inlines_list %}
                 <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
                     <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
-                       href="#{{ inline.opts.verbose_name|slugify }}"
-                       x-on:click="activeTab = '{{ inline.opts.verbose_name|slugify }}'"
-                       x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ inline.opts.verbose_name|slugify }}', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-base-800': activeTab != '{{ inline.opts.verbose_name|slugify }}'}">
+                       href="#{{ inline.formset.prefix|slugify }}"
+                       x-on:click="activeTab = '{{ inline.formset.prefix|slugify }}'"
+                       x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:border-primary-600! font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ inline.formset.prefix|slugify }}', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-base-800': activeTab != '{{ inline.formset.prefix|slugify }}'}">
                         {% if inline.formset.max_num == 1 %}
                             {{ inline.opts.verbose_name|capfirst }}
                         {% else %}

unfold/templates/unfold/helpers/tab_list.html

@@ -2,7 +2,7 @@
 
 {% if not is_popup %}
     {% if tabs_list or inlines_list or actions_list or actions_detail or actions_items or nav_global %}
-        <div class="flex items-start flex-col mb-4 md:border-b dark:md:border-base-800 md:border-l-0 md:flex-row md:items-center">
+        <div class="border-base-200 flex items-start flex-col mb-4 md:border-b dark:md:border-base-800 md:border-l-0 md:flex-row md:items-center">
             {% include "unfold/helpers/tab_items.html" %}
 
             {% include "unfold/helpers/tab_actions.html" %}

unfold/templates/unfold/helpers/theme_switch.html

@@ -1,30 +1,30 @@
 {% load i18n %}
 
 <div class="relative" x-data="{ openTheme: false }">
-    <a class="block cursor-pointer h-4.5 leading-none hover:text-base-700 dark:hover:text-base-200" x-on:click="openTheme = !openTheme">
+    <a class="block cursor-pointer h-[18px] leading-none hover:text-base-700 dark:hover:text-base-200" x-on:click="openTheme = !openTheme">
         <span class="material-symbols-outlined">
             <span x-text="adminTheme == 'dark' && 'dark_mode' || adminTheme == 'light' && 'light_mode' || 'computer'"></span>
         </span>
     </a>
 
-    <nav class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-40 z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openTheme" x-transition x-on:click.outside="openTheme = false">
-        <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
+    <nav class="absolute bg-white border border-base-200 flex flex-col leading-none py-1 -right-2 rounded-default shadow-lg top-7 w-40 z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openTheme" x-transition x-on:click.outside="openTheme = false">
+        <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
            x-on:click="adminTheme = 'dark'"
-           x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
+           x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
             <span class="material-symbols-outlined mr-2">dark_mode</span>
             <span class="leading-none self-center">{% trans "Dark" %}</span>
         </a>
 
-        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
+        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
            x-on:click="adminTheme = 'light'"
-           x-bind:class="adminTheme == 'light'  && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
+           x-bind:class="adminTheme == 'light'  && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
             <span class="material-symbols-outlined mr-2">light_mode</span>
             <span class="leading-none self-center">{% trans "Light" %}</span>
         </a>
 
-        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
+        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
            x-on:click="adminTheme = 'auto'"
-           x-bind:class="adminTheme == 'auto' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
+           x-bind:class="adminTheme == 'auto' && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
             <span class="material-symbols-outlined mr-2">computer</span>
             <span class="leading-none self-center">{% trans "System" %}</span>
         </a>

unfold/templates/unfold/helpers/welcomemsg.html

@@ -1,12 +1,12 @@
 {% load unfold i18n %}
 
-<div class="flex flex-row flex-grow font-semibold items-center min-w-0 mr-3">
+<div class="flex flex-row grow font-semibold items-center min-w-0 mr-3">
     <span class="cursor-pointer flex flex-row items-center">
-        <span class="material-symbols-outlined !hidden xl:!block" hx-get="{% url "admin:toggle_sidebar" %}" hx-swap="none" x-on:click="sidebarDesktopOpen = !sidebarDesktopOpen">
+        <span class="material-symbols-outlined hidden! xl:block!" hx-get="{% url "admin:toggle_sidebar" %}" hx-swap="none" x-on:click="sidebarDesktopOpen = !sidebarDesktopOpen">
             dock_to_right
         </span>
 
-        <span class="material-symbols-outlined !block xl:!hidden" x-on:click="sidebarMobileOpen = !sidebarMobileOpen">
+        <span class="material-symbols-outlined block! xl:hidden!" x-on:click="sidebarMobileOpen = !sidebarMobileOpen">
             dock_to_right
         </span>
     </span>

unfold/templates/unfold/layouts/base_simple.html

@@ -1,6 +1,6 @@
 {% extends 'unfold/layouts/skeleton.html' %}
 
-{% load i18n %}
+{% load i18n unfold %}
 
 {% block base %}
     <div id="page" class="flex min-h-screen">
@@ -10,7 +10,7 @@
             {% endblock %}
         {% endif %}
 
-        <div id="main" class="flex-grow min-w-0" x-resize="mainWidth = $width">
+        <div id="main" class="bg-white flex flex-col grow min-w-0 dark:bg-base-900 {% element_classes 'main' %}">
             {% block content_before %}
                 {% include "unfold/helpers/header.html" %}
             {% endblock %}
@@ -21,7 +21,7 @@
                 {% endspaceless %}
             {% endif %}
 
-            <div class="px-4 lg:px-8">
+            <div class="px-4">
                 <div id="content" class="container mx-auto {% block coltype %}colM{% endblock %}">
                     {% block content %}
                         {% block object-tools %}{% endblock %}

unfold/templates/unfold/layouts/skeleton.html

@@ -58,7 +58,7 @@
         {% endblock %}
     </head>
 
-    <body class="antialiased bg-white font-sans text-font-default-light text-sm dark:bg-base-900 dark:text-font-default-dark {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ mainWidth: 0, {% if opts %}activeTab: 'general',{% endif %} sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = {% if opts %}window.location.hash?.replace('#', '') || 'general'{% else %}''{% endif %}">
+    <body class="antialiased bg-base-50 font-sans text-font-default-light text-sm dark:bg-base-900 dark:text-font-default-dark {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{{% if opts %}activeTab: 'general',{% endif %} sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = {% if opts %}window.location.hash?.replace('#', '') || 'general'{% else %}''{% endif %}">
         {% if colors %}
             <style id="unfold-theme-colors">
                 :root {
@@ -77,7 +77,7 @@
 
         {% block base %}{% endblock %}
 
-        <div id="modal-overlay" class="backdrop-blur-sm bg-opacity-80 bg-base-900 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>
+        <div id="modal-overlay" class="backdrop-blur-xs bg-base-900/80 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>
         <script src="{% static 'unfold/js/simplebar/simplebar.js' %}"></script>
     </body>
 

unfold/templates/unfold/widgets/clearable_file_input.html

@@ -3,7 +3,7 @@
 {% if widget.attrs.accept == 'image/*' and widget.is_initial %}
     <div class="mb-4 max-w-48">
         <a href="{{ widget.value.url }}" target="_blank">
-            <img src="{{ widget.value.url }}" alt="{% trans 'Image preview' %}" class="block rounded" />
+            <img src="{{ widget.value.url }}" alt="{% trans 'Image preview' %}" class="block rounded-default" />
         </a>
     </div>
 {% endif %}
@@ -21,10 +21,10 @@
         </div>
     {% endif %}
 
-    <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
+    <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
 
     <div class="bg-white flex flex-none items-center leading-none self-stretch dark:bg-base-900">
-        <div class="hidden">
+        <div class="opacity-0 w-[0px]">
             <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
         </div>
 

unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -14,10 +14,10 @@
             </div>
         {% endif %}
 
-        <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
+        <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
 
         <div class="flex flex-none items-center leading-none self-stretch">
-            <div class="hidden">
+            <div class="opacity-0 w-[0px]">
                 <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
             </div>
 
@@ -34,12 +34,12 @@
     </div>
 
     {% if widget.attrs.accept == 'image/*' and widget.is_initial %}
-        <div class="h-9.5 ml-3 relative w-9.5">
-            <div class="absolute border flex font-medium h-full items-center left-0 rounded justify-center shadow-sm text-base-400 top-0 w-full z-10 dark:bg-base-900 dark:border-base-700 dark:text-base-500">
+        <div class="h-[38px] ml-3 relative w-[38px]">
+            <div class="absolute border flex font-medium h-full items-center left-0 rounded-default justify-center shadow-xs text-base-400 top-0 w-full z-10 dark:bg-base-900 dark:border-base-700 dark:text-base-500">
                 ?
             </div>
 
-            <a href="{{ widget.value.url }}" target="_blank" class="bg-center bg-cover bg-no-repeat block h-9.5 overflow-hidden relative rounded w-9.5 z-20" style="background-image: url('{{ widget.value.url }}')">
+            <a href="{{ widget.value.url }}" target="_blank" class="bg-center bg-cover bg-no-repeat block h-[38px] overflow-hidden relative rounded-default w-[38px] z-20" style="background-image: url('{{ widget.value.url }}')">
             </a>
         </div>
     {% endif %}

unfold/templates/unfold/widgets/foreign_key_raw_id.html

@@ -1,19 +1,19 @@
-<div class="flex flex-row flex-grow">
+<div class="flex flex-row grow">
     {% include 'django/forms/widgets/input.html' %}
 
     {% if related_url %}
-        <a href="{{ related_url }}" class="related-lookup view-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-base-400 text-sm w-9.5 hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200" id="lookup_id_{{ widget.name }}">
-            <span class="material-symbols-outlined text-sm">search</span>
+        <a href="{{ related_url }}" class="related-lookup view-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200" id="lookup_id_{{ widget.name }}">
+            <span class="material-symbols-outlined">search</span>
         </a>
     {% endif %}
 
     {% if link_url %}
-        <a href="{{ link_url }}" title="{{ link_label }}" class="flex items-center h-9.5 justify-center ml-4 rounded shrink-0 text-primary-600 text-sm truncate dark:text-primary-500">
+        <a href="{{ link_url }}" title="{{ link_label }}" class="flex items-center h-[38px] justify-center ml-4 rounded-default shrink-0 text-primary-600 text-sm truncate dark:text-primary-500">
             {{ link_label }}
         </a>
     {% else %}
         {% if link_label %}
-            <span title="{{ link_label }}" class="flex items-center h-9.5 justify-center ml-4 rounded shrink-0 text-sm truncate">
+            <span title="{{ link_label }}" class="flex items-center h-[38px] justify-center ml-4 rounded-default shrink-0 text-sm truncate">
                 {{ link_label }}
             </span>
         {% endif %}

unfold/templates/unfold/widgets/related_widget_wrapper.html

@@ -9,41 +9,41 @@
                 {% if not is_hidden %}
                     {% if can_add_related or can_change_related or can_delete_related or can_view_related%}
                         {% if can_change_related %}
-                            <a class="related-widget-wrapper-link change-related bg-white border border-base-200 cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-base-400 text-sm w-9.5 hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
+                            <a class="related-widget-wrapper-link change-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
                                id="change_id_{{ name }}"
                                data-popup="yes"
                                data-href-template="{{ change_related_template_url }}?{{ url_params }}"
                                title="{% blocktranslate %}Change selected {{ model }}{% endblocktranslate %}">
-                                <span class="material-symbols-outlined text-sm">edit</span>
+                                <span class="material-symbols-outlined">edit</span>
                             </a>
                         {% endif %}
 
                         {% if can_add_related %}
-                            <a class="related-widget-wrapper-link add-related bg-white border border-base-200  cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-base-400 text-sm w-9.5 hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
+                            <a class="related-widget-wrapper-link add-related bg-white border border-base-200  cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
                                data-popup="yes"
                                id="add_id_{{ name }}"
                                href="{{ add_related_url }}?{{ url_params }}"
                                title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}">
-                                <span class="material-symbols-outlined text-sm">add</span>
+                                <span class="material-symbols-outlined">add</span>
                             </a>
                         {% endif %}
 
                         {% if can_view_related %}
-                            <a class="related-widget-wrapper-link view-related bg-white border border-base-200 cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-base-400 text-sm w-9.5 hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
+                            <a class="related-widget-wrapper-link view-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
                                id="view_id_{{ name }}"
                                data-href-template="{{ change_related_template_url }}?{{ view_related_url_params }}"
                                title="{% blocktranslate %}View selected {{ model }}{% endblocktranslate %}">
-                                <span class="material-symbols-outlined text-sm">visibility</span>
+                                <span class="material-symbols-outlined">visibility</span>
                             </a>
                         {% endif %}
 
                         {% if can_delete_related %}
-                            <a class="related-widget-wrapper-link delete-related bg-white border border-base-200 cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-red-600 text-sm w-9.5 dark:bg-base-900 dark:border-base-700 dark:text-red-500"
+                            <a class="related-widget-wrapper-link delete-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-red-600 text-sm w-[38px] dark:bg-base-900 dark:border-base-700 dark:text-red-500"
                                id="delete_id_{{ name }}"
                                data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
                                data-popup="yes"
                                title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}">
-                                <span class="material-symbols-outlined text-sm">delete</span>
+                                <span class="material-symbols-outlined">delete</span>
                             </a>
                         {% endif %}
                     {% endif %}

unfold/templates/unfold/widgets/split_datetime.html

@@ -1,7 +1,7 @@
 <div class="datetime flex flex-col gap-2 max-w-2xl lg:flex-row lg:group-[.field-row]:flex-row lg:group-[.field-row]:items-center lg:group-[.field-tabular]:flex-row lg:group-[.field-tabular]:items-center">
     <div class="basis-1/2 flex flex-col lg:group-[.field-row]:flex-row group-[.field-row]:gap-2 lg:group-[.field-tabular]:flex-row group-[.field-tabular]:gap-2">
         {% with widget=widget.subwidgets.0 %}
-            <div class="flex flex-col min-w-52 relative group-[.field-row]:flex-grow group-[.field-tabular]:flex-grow">
+            <div class="flex flex-col min-w-52 relative group-[.field-row]:grow group-[.field-tabular]:grow">
                 {% include widget.template_name %}
             </div>
         {% endwith %}
@@ -9,7 +9,7 @@
 
     <div class="basis-1/2 flex flex-col lg:ml-auto md:mt-0 lg:group-[.field-row]:flex-row group-[.field-row]:gap-2 lg:group-[.field-tabular]:flex-row group-[.field-tabular]:gap-2">
         {% with widget=widget.subwidgets.1 %}
-            <div class="flex flex-col min-w-52 relative group-[.field-row]:flex-grow group-[.field-tabular]:flex-grow">
+            <div class="flex flex-col min-w-52 relative group-[.field-row]:grow group-[.field-tabular]:grow">
                 {% include widget.template_name %}
             </div>
         {% endwith %}

unfold/templates/unfold_crispy/field.html

@@ -3,7 +3,7 @@
 {% if field.is_hidden %}
     {{ field }}
 {% else %}
-    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="group {% if tag == "td" %}align-top border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden px-3 py-3 text-left dark:border-base-800 dark:before:text-font-important-dark{% endif%} {% if field.errors %}errors{% endif %} {% if field_class %} {{ field_class }}{% endif %} {% if field|is_checkbox and tag == "td" %}flex flex-row gap-2 h-9.5 items-center{% else %}{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
+    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="group {% if tag == "td" %}align-top border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden px-3 py-3 text-left dark:border-base-800 dark:before:text-font-important-dark{% endif%} {% if field.errors %}errors{% endif %} {% if field_class %} {{ field_class }}{% endif %} {% if field|is_checkbox and tag == "td" %}flex flex-row gap-2 h-[38px] items-center{% else %}{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
     {% if field.label and not field|is_checkbox and form_show_labels %}
         <label {% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="block font-semibold mb-2 text-font-important-light text-sm dark:text-font-important-dark {% if label_class %} {{ label_class }}{% endif %}">
             {{ field.label }}{% if field.field.required %} <span class="asteriskField">*</span>{% endif %}

unfold/templates/unfold_crispy/inputs.html

@@ -1,5 +1,5 @@
 {% if inputs %}
-    <div class="border border-base-200 rounded flex flex-col gap-2 justify-end p-3 lg:flex-row dark:border-base-800 {{ field_class }}">
+    <div class="border border-base-200 rounded-default flex flex-col gap-2 justify-end p-3 lg:flex-row dark:border-base-800 {{ field_class }}">
         {% for input in inputs %}
             {% include "unfold_crispy/layout/baseinput.html" %}
         {% endfor %}

unfold/templates/unfold_crispy/layout/checkbox.html

@@ -9,7 +9,7 @@
 {% else %}
     {% with field=field|add_css_class:form_classes.checkbox %}
         {% if tag == "td" %}
-            <div class="flex items-center justify-center h-9.5">
+            <div class="flex items-center justify-center h-[38px]">
                 {% crispy_field field %}
             </div>
         {% else %}

unfold/templates/unfold_crispy/layout/fieldset.html

@@ -1,4 +1,4 @@
-<fieldset {% if fieldset.css_id %}id="{{ fieldset.css_id }}"{% endif %} class="fieldset group flex flex-col gap-5 grow rounded border-base-200 shadow-sm aligned border p-3 relative dark:border-base-800 {% if fieldset.css_class %} {{ fieldset.css_class }}{% endif %}" {{ fieldset.flat_attrs }}>
+<fieldset {% if fieldset.css_id %}id="{{ fieldset.css_id }}"{% endif %} class="fieldset group flex flex-col gap-5 grow rounded-default border-base-200 shadow-xs aligned border p-3 relative dark:border-base-800 {% if fieldset.css_class %} {{ fieldset.css_class }}{% endif %}" {{ fieldset.flat_attrs }}>
     {% if legend %}
         <legend class="border-b border-base-200 font-semibold float-left pb-3 -mx-3 px-3 text-font-important-light dark:text-font-important-dark dark:border-base-800">
             {{ legend|safe }}