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

unfold/static/unfold/fonts/material-symbols/styles.css

@@ -4,19 +4,3 @@
   font-weight: 400;
   src: url("Material-Symbols-Outlined.woff2") format("woff2");
 }
-
-.material-symbols-outlined {
-  font-family: "Material Symbols Outlined";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -moz-font-feature-settings: "liga";
-  -moz-osx-font-smoothing: grayscale;
-}

unfold/styles.css

@@ -1,51 +1,97 @@
-@tailwind base;
-
-@tailwind components;
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+@custom-variant dark (&:where(.dark, .dark *));
+@source inline("h-3 w-3 h-[64px] w-[65px]! left-[65px] dark:hover:bg-white/[.06] translate-x-1/4 -translate-y-1/4");
+@source inline("{-,}{top,bottom,left,right}-{0..4}");
+@source inline("rounded-{t,r,b,l}-default");
+@source inline("{md:,lg:,2xl:,}relative {md:,lg:,2xl:,}flex {md:,lg:,2xl:,}absolute {md:,lg:,2xl:,}sticky");
+@source inline("{-,}m{t,r,b,l,x,y,}-{0..4} {-,}p{t,r,b,l,x,y,}-{0..4}");
+@source inline("{md:,lg:,}border-{0,2} {md:,lg:,}border-{t,r,b,l}-{0,2}");
+@source inline("{hover:,dark:,}bg-primary-{50,{100..900..100},950}");
+@source inline("{hover:,dark:,}border-base-{50,{100..900..100},950} {hover:,dark:,}border-transparent");
+@source inline("{hover:,dark:,}bg-base-{50,{100..900..100},950}");
+@source inline("{md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5}");
+@source inline("{md:,lg:,}gap-{0.5,{1..12}}");
+@source inline("{md:,lg:,}grid-cols-{1..12}");
+@source inline("{md:,lg:,}col-span-{1..12}");
+
+@theme {
+  --font-sans: 'Inter', sans-serif;
+}
+
+@theme inline{
+  --radius-default: var(--border-radius, 6px);
+
+  --color-primary-50: rgb(var(--color-primary-50));
+  --color-primary-100: rgb(var(--color-primary-100));
+  --color-primary-200: rgb(var(--color-primary-200));
+  --color-primary-300: rgb(var(--color-primary-300));
+  --color-primary-400: rgb(var(--color-primary-400));
+  --color-primary-500: rgb(var(--color-primary-500));
+  --color-primary-600: rgb(var(--color-primary-600));
+  --color-primary-700: rgb(var(--color-primary-700));
+  --color-primary-800: rgb(var(--color-primary-800));
+  --color-primary-900: rgb(var(--color-primary-900));
+  --color-primary-950: rgb(var(--color-primary-950));
+
+  --color-base-50: rgb(var(--color-base-50));
+  --color-base-100: rgb(var(--color-base-100));
+  --color-base-200: rgb(var(--color-base-200));
+  --color-base-300: rgb(var(--color-base-300));
+  --color-base-400: rgb(var(--color-base-400));
+  --color-base-500: rgb(var(--color-base-500));
+  --color-base-600: rgb(var(--color-base-600));
+  --color-base-700: rgb(var(--color-base-700));
+  --color-base-800: rgb(var(--color-base-800));
+  --color-base-900: rgb(var(--color-base-900));
+  --color-base-950: rgb(var(--color-base-950));
+
+  --color-font-subtle-light: rgb(var(--color-font-subtle-light));
+  --color-font-subtle-dark: rgb(var(--color-font-subtle-dark));
+  --color-font-default-light: rgb(var(--color-font-default-light));
+  --color-font-default-dark: rgb(var(--color-font-default-dark));
+  --color-font-important-light: rgb(var(--color-font-important-light));
+  --color-font-important-dark: rgb(var(--color-font-important-dark));
+}
+
+@utility field-sizing-content {
+  field-sizing: content;
+}
+
+@utility border-spacing-none {
+  border-spacing: 0;
+}
+
+@utility material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 18px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}
 
-@tailwind utilities;
+@utility scrollable-top {
+  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-gray-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
+}
 
-@layer utilities {
-  .field-sizing-content {
-      field-sizing: content;
-  }
+@utility md-16 {
+  font-size: 16px;
 }
 
-/*******************************************************
- Classes
- *******************************************************/
-.column-fill-auto {
-  column-fill: auto;
+@utility md-18 {
+  font-size: 18px;
 }
 
 [x-cloak] {
-  @apply !hidden;
-}
-
-@layer utilities {
-  .border-spacing-none {
-    border-spacing: 0;
-  }
-
-  .material-symbols-outlined {
-    font-family: "Material Symbols Outlined";
-    font-weight: normal;
-    font-style: normal;
-    font-size: 18px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -moz-font-feature-settings: "liga";
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .scrollable-top:after {
-    @apply absolute bg-gradient-to-t from-gray-100 h-4 left-0 right-0 -top-4 dark:bg-none;
-    content: "";
-  }
+  @apply hidden!;
 }
 
 .asteriskField {
@@ -56,17 +102,6 @@
   @apply opacity-50;
 }
 
-/*******************************************************
- Icons
- *******************************************************/
-.md-16 {
-  font-size: 16px;
-}
-
-.md-18 {
-  font-size: 18px;
-}
-
 /*******************************************************
  Search
  *******************************************************/
@@ -97,7 +132,7 @@ select:after {
  Table
  *******************************************************/
 table select {
-  @apply appearance-none bg-no-repeat border border-base-200 block cursor-pointer font-medium px-3 py-2 pr-5 rounded shadow-sm text-base-500;
+  @apply appearance-none bg-no-repeat border border-base-200 block cursor-pointer font-medium px-3 py-2 pr-5 rounded-default shadow-xs text-base-500;
 
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(156, 163, 175)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>');
   background-size: 1.125rem 1.125rem;
@@ -118,11 +153,11 @@ table tr.selected th {
  Datetime
  *******************************************************/
 .datetimeshortcuts {
-  @apply absolute flex flex-row-reverse items-center right-0 text-0 top-px;
+  @apply absolute flex flex-row-reverse items-center right-0 text-[0px] top-px;
 }
 
 .datetimeshortcuts a {
-  @apply text-0 text-base-400 transition hover:text-base-700;
+  @apply text-[0px] text-base-400 transition hover:text-base-700;
 }
 
 .datetimeshortcuts a:first-child {
@@ -130,7 +165,7 @@ table tr.selected th {
 }
 
 .datetimeshortcuts a:first-child:after {
-  @apply border-l border-base-200 flex h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-base text-center w-9 hover:text-base-700 dark:border-base-700 dark:hover:text-white;
+  @apply border-l border-base-200 flex h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-center w-9 hover:text-base-700 dark:border-base-700 dark:hover:text-white;
   content: "timer";
 }
 
@@ -143,7 +178,7 @@ table tr.selected th {
 }
 
 .date-icon:after {
-  @apply border-l border-base-200 h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-base text-center w-9 hover:text-base-700 dark:border-base-700;
+  @apply border-l border-base-200 h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-center w-9 hover:text-base-700 dark:border-base-700;
   content: "edit";
 }
 
@@ -170,7 +205,7 @@ table tr.selected th {
 }
 
 .timezonewarning:hover {
-  @apply bg-white bottom-px leading-9 left-px right-px px-3 rounded text-xs top-px dark:bg-base-900;
+  @apply bg-white bottom-px leading-9 left-px right-px px-3 rounded-default text-xs top-px dark:bg-base-900;
 }
 
 .timezonewarning:hover:before {
@@ -186,11 +221,20 @@ table tr.selected th {
  Selector
  *******************************************************/
 .selector {
-  @apply flex flex-col flex-grow items-center md:flex-row;
+  @apply flex flex-col grow items-center md:flex-row;
+}
+
+.selector .selector-available-title label,
+.selector .selector-chosen-title label {
+  @apply block border-b border-base-200 font-semibold mb-3 py-2 px-4 text-sm text-font-important-light dark:border-base-700 dark:text-font-important-dark;
+}
+
+.selector .helptext {
+  @apply border-b border-base-200 mb-3 px-4 pb-3 dark:border-base-700;
 }
 
 .selector select {
-  @apply bg-none flex-grow w-full dark:bg-base-900;
+  @apply bg-none grow w-full dark:bg-base-900 dark:scheme-dark;
 }
 
 .selector option {
@@ -203,7 +247,7 @@ table tr.selected th {
 
 .selector-chosen,
 .selector-available {
-  @apply border border-base-200 flex flex-col flex-grow rounded self-stretch shadow-sm md:w-72 lg:w-96 dark:border-base-700;
+  @apply border border-base-200 flex flex-col grow rounded-default self-stretch shadow-xs md:w-72 lg:w-96 dark:border-base-700;
 }
 
 .selector-chosen h2,
@@ -216,7 +260,7 @@ table tr.selected th {
 }
 
 .selector-filter input {
-  @apply bg-base-100 block flex-grow font-medium mb-3 mx-3 px-3 py-2 rounded text-base-500 text-sm focus:outline-none dark:bg-base-800 dark:text-base-300;
+  @apply bg-base-100 block grow font-medium mb-3 mx-3 px-3 py-2 rounded-default text-base-500 text-sm focus:outline-hidden dark:bg-base-800 dark:text-base-300;
 }
 
 .selector-chooseall,
@@ -229,7 +273,7 @@ table tr.selected th {
 }
 
 .selector-chooser {
-  @apply flex flex-col my-4 text-0 w-14;
+  @apply flex flex-col my-4 text-[0px] w-14;
 }
 
 .selector-chooser li {
@@ -250,7 +294,7 @@ table tr.selected th {
 }
 
 .related-widget-wrapper {
-  @apply !flex-nowrap;
+  @apply flex-nowrap!;
 }
 
 .related-widget-wrapper-link {
@@ -269,6 +313,10 @@ table tr.selected th {
   @apply border-t border-base-200 dark:border-base-800;
 }
 
+.tabular-table tbody.has_original:first-of-type {
+  @apply border-t-0;
+}
+
 .add-row {
   @apply align-middle bg-white px-3 py-5 font-normal text-right dark:bg-base-900;
 }
@@ -282,7 +330,7 @@ table tr.selected th {
 }
 
 .add-row a {
-  @apply bg-white border border-base-200 block font-medium px-3 py-2 rounded text-center hover:text-base-700 lg:float-right dark:bg-base-900 dark:border-base-700 dark:hover:text-base-200;
+  @apply bg-white border border-base-200 block font-medium px-3 py-2 rounded-default text-center hover:text-base-700 lg:float-right dark:bg-base-900 dark:border-base-700 dark:hover:text-base-200;
 }
 
 .inline-deletelink {
@@ -301,7 +349,15 @@ h3 span:nth-child(3) {
  Autocomplete
  *******************************************************/
 .select2.select2-container {
-  @apply bg-white border border-base-200 max-w-2xl !min-h-9.5 relative rounded shadow-sm !w-full dark:bg-base-900 dark:border-base-700;
+  @apply bg-white border border-base-200 max-w-2xl min-h-[38px]! relative rounded-default shadow-xs w-full! dark:bg-base-900 dark:border-base-700;
+}
+
+.select2-selection {
+  @apply outline-none;
+}
+
+.select2.select2-container.select2-container--focus{
+  @apply outline-2 outline-primary-600 -outline-offset-2;
 }
 
 .errors .select2.select2-container {
@@ -325,7 +381,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--single
   .select2-selection__clear {
-  @apply flex items-center h-9 -mt-2 text-0;
+  @apply flex items-center h-9 -mt-2 text-[0px];
 }
 
 .select2-container.select2-container--admin-autocomplete
@@ -367,7 +423,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-search--dropdown
   .select2-search__field {
-  @apply bg-base-50 border border-base-200 border-solid flex-grow font-medium mx-0 outline-none px-3 py-2 rounded shadow-sm text-font-default-light text-sm w-full dark:bg-base-800 dark:border-base-800 dark:text-font-default-dark;
+  @apply bg-base-50 border border-base-200 border-solid grow font-medium mx-0 outline-hidden px-3 py-2 rounded-default shadow-xs text-font-default-light text-sm w-full dark:bg-base-800 dark:border-base-800 dark:text-font-default-dark;
 }
 
 .select2-container.select2-container--admin-autocomplete.select2-container--open.select2-container--above {
@@ -379,15 +435,15 @@ h3 span:nth-child(3) {
 }
 
 .select2-container.select2-container--open .select2-dropdown {
-  @apply border-primary-600 ring ring-primary-300 pb-2 shadow-sm dark:bg-base-900 dark:border-primary-700 after:block after:bg-white after:absolute after:border-l after:border-l-primary-600 after:border-r after:border-r-primary-600 after:h-1 after:-left-px after:-right-px after:-mt-1 after:top-0 dark:after:bg-base-900 dark:after:border-l-primary-700 dark:after:border-r-primary-700 dark:ring-primary-700 dark:ring-opacity-50;
+  @apply border border-transparent outline-2 -outline-offset-2 outline-primary-600 pb-2 shadow-xs dark:bg-base-900;
 }
 
 .select2-container.select2-container--open .select2-dropdown--below {
-  @apply rounded-t-none rounded-b;
+  @apply rounded-t-none rounded-b -top-0.5;
 }
 
 .select2-container.select2-container--open .select2-dropdown--above {
-  @apply rounded-b-none rounded after:bottom-0 after:-mb-1 after:mt-0 after:top-auto;
+  @apply rounded-b-none rounded-default -bottom-0.5;
 }
 
 .select2-container.select2-container--admin-autocomplete
@@ -433,14 +489,14 @@ h3 span:nth-child(3) {
   .select2-selection--multiple
   li.select2-selection__choice
   .select2-selection__choice__remove {
-  @apply align-top text-0 hover:text-base-600 dark:hover:text-base-200;
+  @apply align-top text-[0px] hover:text-base-600 dark:hover:text-base-200;
 }
 
 .select2-container--admin-autocomplete
   .select2-selection--multiple
   li.select2-selection__choice
   .select2-selection__choice__remove:after {
-  @apply h-7 !leading-7 material-symbols-outlined;
+  @apply h-7 leading-7! material-symbols-outlined;
 
   content: "close";
   font-size: 14px;
@@ -454,7 +510,7 @@ h3 span:nth-child(3) {
 }
 
 .select2.select2-container--open {
-  @apply border-b-0 border-primary-600 relative ring ring-primary-300 dark:border-primary-700 dark:ring-primary-700 dark:ring-opacity-50;
+  @apply border-b-0 border-primary-600 relative outline-2 -outline-offset-2 outline-primary-600;
 }
 
 /*******************************************************
@@ -495,7 +551,7 @@ fieldset details[open] > summary:after {
  *******************************************************/
 .calendarbox,
 .clockbox {
-  @apply bg-white border border-base-200 rounded shadow-sm text-base-500 text-sm w-80 z-50 dark:bg-base-800 dark:border-base-700 !fixed !left-1/2 !top-1/2 -translate-x-1/2 -translate-y-1/2;
+  @apply bg-white border border-base-200 rounded-default shadow-xs text-base-500 text-sm w-80 z-50 dark:bg-base-800 dark:border-base-700 fixed! left-1/2! top-1/2! -translate-x-1/2 -translate-y-1/2;
 }
 
 .calendar caption {
@@ -527,11 +583,11 @@ fieldset details[open] > summary:after {
 }
 
 .calendar-shortcuts {
-  @apply flex flex-row justify-center mb-3 px-1 rounded-b text-0;
+  @apply flex flex-row justify-center mb-3 px-1 rounded-b text-[0px];
 }
 
 .calendar-shortcuts a {
-  @apply border border-base-200  font-medium leading-none mx-1 px-2 py-2 rounded shadow-sm text-center text-base-500 text-xs transition-all w-1/3 dark:border-base-700 dark:hover:border-base-600 dark:text-base-300 dark:hover:text-base-200;
+  @apply border border-base-200  font-medium leading-none mx-1 px-2 py-2 rounded-default shadow-xs text-center text-base-500 text-xs transition-all w-1/3 dark:border-base-700 dark:hover:border-base-600 dark:text-base-300 dark:hover:text-base-200;
 }
 
 .calendar-cancel {
@@ -539,7 +595,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendarnav-previous {
-  @apply absolute block ml-2 mt-2 left-0 text-0 top-0;
+  @apply absolute block ml-2 mt-2 left-0 text-[0px] top-0;
 }
 
 .calendarnav-next:after,
@@ -556,7 +612,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendarnav-next {
-  @apply absolute block mr-2 mt-2 right-0 text-0 top-0;
+  @apply absolute block mr-2 mt-2 right-0 text-[0px] top-0;
 }
 
 .calendarnav-next:after {
@@ -568,7 +624,7 @@ fieldset details[open] > summary:after {
  Timepicker
  *******************************************************/
 .clockbox {
-  @apply bg-white border border-base-200 rounded shadow-sm text-sm dark:bg-base-800 dark:border-base-700 z-50;
+  @apply bg-white border border-base-200 rounded-default shadow-xs text-sm dark:bg-base-800 dark:border-base-700 z-50;
 }
 
 .clockbox h2 {
@@ -602,7 +658,7 @@ fieldset details[open] > summary:after {
  Filters
  *******************************************************/
 #changelist-filter .admin-numeric-filter-slider .noUi-handle {
-  @apply bg-white border border-base-200 cursor-pointer h-4 -right-4 rounded-full shadow-sm w-4 dark:bg-base-200 dark:border-base-200;
+  @apply bg-white border border-base-200 cursor-pointer h-4 -right-4 rounded-full shadow-xs w-4 dark:bg-base-200 dark:border-base-200;
 }
 
 #changelist-filter .admin-numeric-filter-slider .noUi-handle-upper {
@@ -648,7 +704,7 @@ trix-toolbar[id^="trix-toolbar-"] {
 }
 
 .ui-tabs.ui-widget .ui-tabs-nav {
-  @apply bg-base-100 border-0 flex gap-2 m-0 ml-3 mb-0 mt-3 mr-auto p-1 rounded text-sm dark:bg-white/[.04] after:hidden;
+  @apply bg-base-100 border-0 flex gap-2 m-0 ml-3 mb-0 mt-3 mr-auto p-1 rounded-default text-sm dark:bg-white/[.04] after:hidden;
 }
 
 .ui-tabs.ui-widget .ui-tabs-nav li {
@@ -656,11 +712,11 @@ trix-toolbar[id^="trix-toolbar-"] {
 }
 
 .ui-tabs.ui-widget .ui-tabs-nav li a {
-  @apply bg-transparent border-0 flex flex-row font-medium items-center m-0 px-2.5 py-1 rounded text-base-400 text-sm hover:bg-base-700/[.04] hover:text-base-700 dark:hover:bg-white/[.04] dark:hover:text-white;
+  @apply bg-transparent border-0 flex flex-row font-medium items-center m-0 px-2.5 py-1 rounded-default text-base-400 text-sm hover:bg-base-700/[.04] hover:text-base-700 dark:hover:bg-white/[.04] dark:hover:text-white;
 }
 
 .ui-tabs.ui-widget .ui-tabs-nav li.ui-tabs-active a {
-  @apply flex flex-row font-medium items-center px-2.5 py-1 rounded  bg-white shadow-sm text-base-700 hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-white;
+  @apply flex flex-row font-medium items-center px-2.5 py-1 rounded-default  bg-white shadow-xs text-base-700 hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-white;
 }
 
 /*******************************************************

unfold/templates/admin/actions.html

@@ -19,7 +19,7 @@
             {% endblock %}
 
             {% block actions-submit %}
-                <button type="submit" x-show="action" class="bg-primary-900 cursor-pointer flex font-medium items-center justify-center px-3 py-2 rounded text-sm text-white whitespace-nowrap" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
+                <button type="submit" x-show="action" class="bg-primary-900 cursor-pointer flex font-medium items-center justify-center px-3 py-2 rounded-default text-sm text-white whitespace-nowrap" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
                     {% trans "Run" %}
                 </button>
             {% endblock %}
@@ -27,7 +27,7 @@
 
         {% block actions-counter %}
             {% if actions_selection_counter %}
-                <div class="flex flex-grow flex-col sm:flex-row sm:items-center">
+                <div class="flex grow flex-col sm:flex-row sm:items-center">
                     <span class="action-counter" data-actions-icnt="{{ cl.result_list|length }}">
                         {{ selection_note }}
                     </span>
@@ -40,13 +40,13 @@
                         {% if not cl.model_admin.list_disable_select_all %}
                             <div class="mt-3 sm:ml-auto sm:mt-0">
                                 <span class="question hidden">
-                                    <a href="#" class="bg-white/20 block border border-transparent font-medium px-3 py-2 rounded text-white transition-colors hover:bg-white/30" title="{% translate "Click here to select the objects across all pages" %}">
+                                    <a href="#" class="bg-white/20 block border border-transparent font-medium px-3 py-2 rounded-default text-white transition-colors hover:bg-white/30" title="{% translate "Click here to select the objects across all pages" %}">
                                         {% blocktranslate with cl.result_count as total_count %}Select all {{ total_count }} {{ module_name }}{% endblocktranslate %}
                                     </a>
                                 </span>
 
                                 <span class="clear hidden">
-                                    <a href="#" class="bg-white/20 block border border-transparent font-medium px-3 py-2 rounded text-white transition-colors hover:bg-white/30">
+                                    <a href="#" class="bg-white/20 block border border-transparent font-medium px-3 py-2 rounded-default text-white transition-colors hover:bg-white/30">
                                         {% translate "Clear selection" %}
                                     </a>
                                 </span>

unfold/templates/admin/app_index.html

@@ -30,7 +30,7 @@
 
 {% block content %}
     <div class="flex flex-row -mx-4">
-        <div class="flex-grow px-4">
+        <div class="grow px-4">
             {% include "unfold/helpers/app_list_default.html" %}
         </div>
     </div>

unfold/templates/admin/app_list.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 
 {% if app_list %}
-    <div class="h-0 flex-grow overflow-auto" data-simplebar>
+    <div class="h-0 grow overflow-auto" data-simplebar>
         {% for app in app_list %}
             <div class="app-{{ app.app_label }} module{% if app.app_url in request.path %} current-app{% endif %}">
                 <ol class="px-6">
@@ -27,7 +27,7 @@
 
                                             {% if model.admin_url %}
                                                 <a href="{{ model.admin_url }}" id="link-{{ app.app_label }}-{{ model.object_name|lower }}"
-                                                   class="flex items-center h-9.5 -mx-3 px-3 rounded truncate hover:text-primary-600 dark:hover:text-primary-500 {% if model.admin_url in request.path|urlencode %}bg-base-100 font-semibold text-primary-600 dark:bg-white/[.06] dark:text-primary-500{% endif %}">
+                                                   class="flex items-center h-[38px] -mx-3 px-3 rounded-default truncate hover:text-primary-600 dark:hover:text-primary-500 {% if model.admin_url in request.path|urlencode %}bg-base-100 font-semibold text-primary-600 dark:bg-white/[.06] dark:text-primary-500{% endif %}">
                                                     {{ model.name }}
                                                 </a>
                                             {% else %}

unfold/templates/admin/auth/user/add_form.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block form_top %}
-    <p class="bg-blue-50 border-blue-200 mb-8 p-3 rounded text-blue-500 text-sm dark:bg-blue-500/20 dark:border-blue-500/10">
+    <p class="bg-blue-50 border-blue-200 mb-8 p-3 rounded-default text-blue-500 text-sm dark:bg-blue-500/20 dark:border-blue-500/10">
         {% if not is_popup %}
             {% translate 'First, enter a username and password. Then, you’ll be able to edit more user options.' %}
         {% else %}

unfold/templates/admin/auth/user/change_password.html

@@ -44,14 +44,14 @@
             {% blocktranslate with username=original asvar message %}Enter a new password for the user <strong>{{ username }}</strong>.{% endblocktranslate %}
             {% include "unfold/helpers/messages/info.html" with message=message %}
 
-            <fieldset class="border border-base-200 mb-8 rounded pt-3 px-3 shadow-sm dark:border-base-800">
+            <fieldset class="border border-base-200 mb-8 rounded-default pt-3 px-3 shadow-xs dark:border-base-800">
 
                 {% include "unfold/helpers/field.html" with field=form.password1 %}
 
                 {% include "unfold/helpers/field.html" with field=form.password2 %}
             </fieldset>
 
-            <button type="submit" class="bg-primary-600 border border-transparent font-medium px-3 py-2 rounded text-sm text-white">
+            <button type="submit" class="bg-primary-600 border border-transparent font-medium px-3 py-2 rounded-default text-sm text-white">
                 {% translate 'Change password' %}
             </button>
         </form>

unfold/templates/admin/base.html

@@ -1,22 +1,22 @@
 {% extends 'unfold/layouts/skeleton.html' %}
 
-{% load i18n unfold %}
+{% load admin_list i18n unfold %}
 
 {% block base %}
-    <div id="page" class="flex min-h-screen">
+    <div id="page" class="flex max-w-full min-h-screen {% element_classes 'page' %}">
         {% if not is_popup and is_nav_sidebar_enabled %}
             {% block nav-sidebar %}
                 {% include "admin/nav_sidebar.html" %}
             {% 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' %}">
             {% include "unfold/helpers/header.html" %}
 
             {% if not is_popup %}
                 {% spaceless %}
                     {% block breadcrumbs %}
-                        <div class="px-4 lg:px-8">
+                        <div class="px-4">
                             <div class="container mb-12 mx-auto -my-3">
                                 <ul class="flex flex-wrap">
                                     {% url 'admin:index' as link %}
@@ -31,14 +31,14 @@
             {% endif %}
 
             {% block messages %}
-                <div class="px-4 lg:px-8">
+                <div class="px-4">
                     <div class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mx-auto">
                         {% include "unfold/helpers/messages.html" %}
                     </div>
                 </div>
             {% endblock messages %}
 
-            <div class="px-4 pb-8 lg:px-8">
+            <div class="px-4 pb-8 grow">
                 <div id="content" class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mx-auto {% block coltype %}colM{% endblock %}">
                     {% if cl %}
                         {% tab_list "changelist" cl.opts %}

unfold/templates/admin/change_form.html

@@ -11,7 +11,7 @@
 
 {% if not is_popup %}
     {% block breadcrumbs %}
-        <div class="px-4 lg:px-8">
+        <div class="px-4">
             <div class="container mb-6 mx-auto -my-3 lg:mb-12">
                 <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
@@ -58,7 +58,7 @@
 {% endblock %}
 
 {% block content %}
-    <div id="content-main" x-data="{ changeFormWidth: 0 }" x-resize="changeFormWidth = $width">
+    <div id="content-main">
         {% block form_before %}{% endblock %}
 
         {% if adminform.model_admin.change_form_outer_before_template %}
@@ -111,8 +111,6 @@
                     {% include adminform.model_admin.change_form_after_template %}
                 {% endif %}
 
-                {% block submit_buttons_bottom %}{% submit_row %}{% endblock %}
-
                 {% block admin_change_form_document_ready %}
                     <script id="django-admin-form-add-constants" src="{% static 'admin/js/change_form.js' %}"{% if adminform and add %} data-model-name="{{ opts.model_name }}"{% endif %} async></script>
                 {% endblock %}
@@ -128,3 +126,7 @@
         {% block form_after %}{% endblock %}
     </div>
 {% endblock %}
+
+{% block footer %}
+    {% block submit_buttons_bottom %}{% submit_row %}{% endblock %}
+{% endblock %}