django-unfold 0.42.0__py3-none-any.whl → 0.44.0__py3-none-any.whl

unfold/styles.css

@@ -4,19 +4,6 @@
 
 @tailwind utilities;
 
-html {
-  --color-primary-50: theme("colors.purple.50");
-  --color-primary-100: theme("colors.purple.100");
-  --color-primary-200: theme("colors.purple.200");
-  --color-primary-300: theme("colors.purple.300");
-  --color-primary-400: theme("colors.purple.400");
-  --color-primary-500: theme("colors.purple.500");
-  --color-primary-600: theme("colors.purple.600");
-  --color-primary-700: theme("colors.purple.700");
-  --color-primary-800: theme("colors.purple.800");
-  --color-primary-900: theme("colors.purple.900");
-  --color-primary-950: theme("colors.purple.950");
-}
 
 /*******************************************************
  Classes
@@ -85,6 +72,10 @@ select:not([class*="bg-none"]):not([multiple]) {
   background-size: 1.125rem 1.125rem;
 }
 
+#changelist-actions select:not([class*="bg-none"]):not([multiple]) {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3e%3cpath fill='#ffffff' d='M24 31.4 11.3 18.7l2.85-2.8L24 25.8l9.85-9.85 2.85 2.8Z'/%3e%3c/svg%3e");
+}
+
 select:after {
   content: "";
   display: block;
@@ -94,13 +85,14 @@ select:after {
  Table
  *******************************************************/
 table select {
-  @apply appearance-none bg-no-repeat border block cursor-pointer font-medium px-3 py-2 pr-5 rounded-md shadow-sm text-gray-500;
+  @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;
 
   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;
   background-position: right 0.5rem center;
 }
 
+
 table select:focus {
   @apply border-primary-600;
 }
@@ -118,15 +110,15 @@ table tr.selected th {
 }
 
 .datetimeshortcuts a {
-  @apply text-0 text-gray-400 transition hover:text-gray-700;
+  @apply text-0 text-base-400 transition hover:text-base-700;
 }
 
 .datetimeshortcuts a:first-child {
-  @apply hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200;
+  @apply hover:text-base-700 dark:text-base-500 dark:hover:text-base-200;
 }
 
 .datetimeshortcuts a:first-child:after {
-  @apply border-l flex h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-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-base text-center w-9 hover:text-base-700 dark:border-base-700 dark:hover:text-white;
   content: "timer";
 }
 
@@ -135,11 +127,11 @@ table tr.selected th {
 }
 
 .date-icon {
-  @apply block h-9 text-gray-400 transition-all w-9 hover:text-gray-700 dark:text-gray-500 dark:hover:text-white;
+  @apply block h-9 text-base-400 transition-all w-9 hover:text-base-700 dark:text-base-500 dark:hover:text-white;
 }
 
 .date-icon:after {
-  @apply border-l h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700;
+  @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;
   content: "edit";
 }
 
@@ -148,11 +140,11 @@ table tr.selected th {
 }
 
 .clock-icon {
-  @apply block h-9 ml-2 w-9 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200;
+  @apply block h-9 ml-2 w-9 hover:text-base-700 dark:text-base-500 dark:hover:text-base-200;
 }
 
 .clock-icon:after {
-  @apply border-l h-9 items-center justify-center material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700 dark:hover:text-white;
+  @apply border-l border-base-200 h-9 items-center justify-center material-symbols-outlined py-2 text-base text-center w-9 hover:text-base-700 dark:border-base-700 dark:hover:text-white;
   content: "edit";
 }
 
@@ -161,12 +153,12 @@ table tr.selected th {
 }
 
 .timezonewarning {
-  @apply absolute block items-center right-20 top-2.5 text-gray-500 truncate;
+  @apply absolute block items-center right-20 top-2.5 text-base-500 truncate;
   font-size: 0;
 }
 
 .timezonewarning:hover {
-  @apply bg-white bottom-px leading-9 left-px right-px px-3 rounded-md text-xs top-px dark:bg-gray-900;
+  @apply bg-white bottom-px leading-9 left-px right-px px-3 rounded text-xs top-px dark:bg-base-900;
 }
 
 .timezonewarning:hover:before {
@@ -174,7 +166,7 @@ table tr.selected th {
 }
 
 .timezonewarning:before {
-  @apply block cursor-pointer items-center justify-center material-symbols-outlined text-base text-center text-red-600 dark:border-gray-700;
+  @apply block border-base-200 cursor-pointer items-center justify-center material-symbols-outlined text-base text-center text-red-600 dark:border-base-700;
   content: "warning";
 }
 
@@ -186,37 +178,37 @@ table tr.selected th {
 }
 
 .selector select {
-  @apply bg-none flex-grow w-full dark:bg-gray-900;
+  @apply bg-none flex-grow w-full dark:bg-base-900;
 }
 
 .selector option {
-  @apply px-3 text-gray-500 text-sm truncate dark:text-gray-300;
+  @apply px-3 text-base-500 text-sm truncate dark:text-base-300;
 }
 
 .selector .list-footer-display {
-  @apply border-t py-2 text-center text-sm dark:border-gray-700;
+  @apply border-t border-base-200 py-2 text-center text-sm dark:border-base-700;
 }
 
 .selector-chosen,
 .selector-available {
-  @apply border flex flex-col flex-grow rounded-md self-stretch shadow-sm md:w-72 lg:w-96 dark:border-gray-700;
+  @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;
 }
 
 .selector-chosen h2,
 .selector-available h2 {
-  @apply border-b mb-3 py-2 px-3 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-200;
+  @apply border-b border-base-200 mb-3 py-2 px-3 text-sm text-base-500 dark:border-base-700 dark:text-base-200;
 }
 
 .selector-filter {
   @apply flex;
 }
 .selector-filter input {
-  @apply bg-gray-100 block flex-grow font-medium mb-3 mx-3 px-3 py-2 rounded-md text-gray-500 text-sm focus:outline-none dark:bg-gray-800 dark:text-gray-300;
+  @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;
 }
 
 .selector-chooseall,
 .selector-clearall {
-  @apply block border-t py-2 text-center text-sm text-primary-500 dark:border-gray-700;
+  @apply block border-t border-base-200 py-2 text-center text-sm text-primary-500 dark:border-base-700;
 }
 
 .selector-clearall {
@@ -233,7 +225,7 @@ table tr.selected th {
 
 .selector-add:after,
 .selector-remove:after {
-  @apply inline-block material-symbols-outlined text-gray-400 w-5;
+  @apply inline-block material-symbols-outlined text-base-400 w-5;
 }
 
 .selector-add:after {
@@ -259,12 +251,16 @@ table tr.selected th {
   @apply hidden;
 }
 
+.tabular-table .template tr {
+  @apply border-t border-base-200 dark:border-base-800;
+}
+
 .add-row {
-  @apply align-middle bg-gray-50 px-3 py-5 font-normal text-right dark:bg-white/[.02];
+  @apply align-middle bg-base-50 px-3 py-5 font-normal text-right dark:bg-white/[.02];
 }
 
 [data-inline-type="stacked"] .add-row {
-  @apply border-t border-gray-200 overflow-hidden dark:border-gray-800;
+  @apply border-t border-base-200 overflow-hidden dark:border-base-800;
 }
 
 .add-row td {
@@ -272,7 +268,7 @@ table tr.selected th {
 }
 
 .add-row a {
-  @apply bg-white border block font-medium px-3 py-2 rounded-md text-center hover:text-gray-700 lg:float-right dark:bg-gray-900 dark:border-gray-700 dark:hover:text-gray-200;
+  @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;
 }
 
 .inline-deletelink {
@@ -291,7 +287,7 @@ h3 span:nth-child(3) {
  Autocomplete
  *******************************************************/
 .select2.select2-container {
-  @apply bg-white border max-w-2xl !min-h-9.5 relative rounded-md shadow-sm !w-full dark:bg-gray-900 dark:border-gray-700;
+  @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;
 }
 
 .errors .select2.select2-container {
@@ -306,7 +302,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--single
   .select2-selection__rendered {
-  @apply font-medium h-9 px-3 py-2 text-gray-500 text-sm dark:text-gray-300;
+  @apply font-medium h-9 px-3 py-2 text-base-500 text-sm dark:text-base-300;
 }
 
 .select2-container.select2-container--admin-autocomplete
@@ -324,7 +320,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--single
   .select2-selection__clear:after {
-  @apply material-symbols-outlined text-gray-500;
+  @apply material-symbols-outlined text-base-500;
   content: "close";
   font-size: 14px;
 }
@@ -338,7 +334,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--single
   .select2-selection__arrow:after {
-  @apply left-0 leading-none m-0 material-symbols-outlined text-gray-500 text-lg;
+  @apply left-0 leading-none m-0 material-symbols-outlined text-base-500 text-lg;
   content: "expand_more";
 }
 
@@ -357,7 +353,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-search--dropdown
   .select2-search__field {
-  @apply bg-gray-50 border border-gray-200 border-solid flex-grow font-medium mx-0 outline-none px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm w-full dark:bg-gray-800 dark:border-gray-800 dark:text-gray-300;
+  @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-base-500 text-sm w-full dark:bg-base-800 dark:border-base-800 dark:text-base-300;
 }
 
 .select2-container.select2-container--admin-autocomplete.select2-container--open.select2-container--above {
@@ -369,20 +365,20 @@ 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-gray-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-gray-900 dark:after:border-l-primary-700 dark:after:border-r-primary-700 dark:ring-primary-700 dark:ring-opacity-50;
+  @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;
 }
 
 .select2-container.select2-container--open .select2-dropdown--below {
-  @apply rounded-t-none rounded-b-md;
+  @apply rounded-t-none rounded-b;
 }
 
 .select2-container.select2-container--open .select2-dropdown--above {
-  @apply rounded-b-none rounded-t-md after:bottom-0 after:-mb-1 after:mt-0 after:top-auto;
+  @apply rounded-b-none rounded after:bottom-0 after:-mb-1 after:mt-0 after:top-auto;
 }
 
 .select2-container.select2-container--admin-autocomplete
   .select2-results__option {
-  @apply block px-3 py-2 text-gray-500 text-sm transition-all dark:text-gray-300;
+  @apply block px-3 py-2 text-base-500 text-sm transition-all dark:text-base-300;
 }
 
 .select2-container.select2-container--admin-autocomplete
@@ -411,14 +407,14 @@ h3 span:nth-child(3) {
 .select2-container--admin-autocomplete
   .select2-selection--multiple
   li.select2-selection__choice {
-  @apply bg-gray-100 block font-medium h-7 leading-7 m-0 mr-1 mb-1 px-2 shadow-inner text-sm text-gray-600 hover:text-gray-700 truncate dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-200;
+  @apply bg-base-100 block font-medium h-7 leading-7 m-0 mr-1 mb-1 px-2 shadow-inner text-sm text-base-600 hover:text-base-700 truncate dark:bg-base-800 dark:text-base-300 dark:hover:text-base-200;
 }
 
 .select2-container--admin-autocomplete
   .select2-selection--multiple
   li.select2-selection__choice
   .select2-selection__choice__remove {
-  @apply align-top text-0 hover:text-gray-600 dark:hover:text-gray-200;
+  @apply align-top text-0 hover:text-base-600 dark:hover:text-base-200;
 }
 
 .select2-container--admin-autocomplete
@@ -435,7 +431,7 @@ h3 span:nth-child(3) {
   .select2-selection--multiple
   li.select2-search--inline
   .select2-search__field {
-  @apply m-0 h-7 text-gray-500 text-sm;
+  @apply m-0 h-7 text-base-500 text-sm;
 }
 
 .select2.select2-container--open {
@@ -480,11 +476,11 @@ fieldset details[open] > summary:after {
  *******************************************************/
 .calendarbox,
 .clockbox {
-  @apply bg-white border rounded-md shadow-sm text-gray-500 text-sm w-80 z-50 dark:bg-gray-800 dark:border-gray-700 !fixed !left-1/2 !top-1/2 -translate-x-1/2 -translate-y-1/2;
+  @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;
 }
 
 .calendar caption {
-  @apply font-medium mb-3 py-3 text-gray-700 dark:text-gray-200;
+  @apply font-medium mb-3 py-3 text-base-700 dark:text-base-200;
 }
 
 .calendar table {
@@ -492,7 +488,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendar table th {
-  @apply font-medium text-center text-gray-700 text-xs dark:text-gray-200;
+  @apply font-medium text-center text-base-700 text-xs dark:text-base-200;
 }
 
 .calendar table td {
@@ -500,11 +496,11 @@ fieldset details[open] > summary:after {
 }
 
 .calendar table td a {
-  @apply block flex h-8 items-center justify-center rounded-full transition-all w-8 dark:text-gray-300;
+  @apply block flex h-8 items-center justify-center rounded-full transition-all w-8 dark:text-base-300;
 }
 
 .calendar table td a:hover {
-  @apply bg-gray-100 text-gray-700;
+  @apply bg-base-100 text-base-700;
 }
 
 .calendar table td.today a {
@@ -512,15 +508,15 @@ fieldset details[open] > summary:after {
 }
 
 .calendar-shortcuts {
-  @apply flex flex-row justify-center mb-3 px-1 rounded-b-md text-0;
+  @apply flex flex-row justify-center mb-3 px-1 rounded-b text-0;
 }
 
 .calendar-shortcuts a {
-  @apply border font-medium leading-none mx-1 px-2 py-2 rounded-md shadow-sm text-center text-gray-500 text-xs transition-all w-1/3 dark:border-gray-700 dark:hover:border-gray-600 dark:text-gray-300 dark:hover:text-gray-200;
+  @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;
 }
 
 .calendar-cancel {
-  @apply block border-t py-2 text-center text-xs text-red-600 dark:border-gray-700 dark:text-red-500;
+  @apply block border-t border-base-200 py-2 text-center text-xs text-red-600 dark:border-base-700 dark:text-red-500;
 }
 
 .calendarnav-previous {
@@ -529,7 +525,7 @@ fieldset details[open] > summary:after {
 
 .calendarnav-next:after,
 .calendarnav-previous:after {
-  @apply border flex h-7 items-center justify-center material-symbols-outlined rounded-full text-gray-400 transition-all w-7 hover:border-primary-600 hover:text-primary-500 dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-800;
+  @apply border border-base-200 flex h-7 items-center justify-center material-symbols-outlined rounded-full text-base-400 transition-all w-7 hover:border-primary-600 hover:text-primary-500 dark:bg-base-800 dark:border-base-700 dark:hover:border-base-800;
 
   content: "navigate_before";
   display: flex;
@@ -537,7 +533,7 @@ fieldset details[open] > summary:after {
 
 .calendarnav-next:hover:after,
 .calendarnav-previous:hover:after {
-  @apply dark:border-gray-600 dark:text-gray-200;
+  @apply dark:border-base-600 dark:text-base-200;
 }
 
 .calendarnav-next {
@@ -553,14 +549,14 @@ fieldset details[open] > summary:after {
  Timepicker
  *******************************************************/
 .clockbox {
-  @apply bg-white border rounded-md shadow-sm text-sm dark:bg-gray-800 dark:border-gray-700 z-50;
+  @apply bg-white border border-base-200 rounded shadow-sm text-sm dark:bg-base-800 dark:border-base-700 z-50;
 }
 
 .clockbox h2 {
-  @apply font-medium px-3 py-2 text-gray-700 dark:text-gray-200;
+  @apply font-medium px-3 py-2 text-base-700 dark:text-base-200;
 }
 .clockbox .timelist {
-  @apply pb-2 px-3 text-gray-500 dark:text-gray-300;
+  @apply pb-2 px-3 text-base-500 dark:text-base-300;
 }
 
 .clockbox .timelist li {
@@ -573,13 +569,13 @@ fieldset details[open] > summary:after {
 /*******************************************************
  Htmx
  *******************************************************/
-.htmx-swapping:before {
+.htmx-indicator.htmx-swapping:before {
   @apply absolute bg-white bottom-0 left-0 opacity-80 transition-all right-0 top-0;
   content: "";
 }
 
-.htmx-swapping:after {
-  @apply absolute animate-spin h-4 inset-1/2 material-symbols-outlined md-16 text-gray-400 w-4;
+.htmx-indicator.htmx-swapping:after {
+  @apply absolute animate-spin h-4 inset-1/2 material-symbols-outlined md-16 text-base-400 w-4;
   content: "sync";
 }
 
@@ -587,7 +583,7 @@ fieldset details[open] > summary:after {
  Filters
  *******************************************************/
 #changelist-filter .admin-numeric-filter-slider .noUi-handle {
-  @apply bg-white border border-gray-200 cursor-pointer h-4 -right-4 rounded-full shadow-sm w-4 dark:bg-gray-200 dark:border-gray-200;
+  @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;
 }
 
 #changelist-filter .admin-numeric-filter-slider .noUi-handle-upper {
@@ -603,7 +599,7 @@ fieldset details[open] > summary:after {
 }
 
 #changelist-filter .admin-numeric-filter-slider.noUi-target {
-  @apply bg-gray-200 border-0 h-1 shadow-none dark:bg-gray-600;
+  @apply bg-base-200 border-0 h-1 shadow-none dark:bg-base-600;
 }
 
 #changelist-filter .admin-numeric-filter-slider .noUi-connect {
@@ -611,14 +607,14 @@ fieldset details[open] > summary:after {
 }
 
 #changelist-filter .admin-numeric-filter-slider-tooltips {
-  @apply flex flex-row font-medium mb-5 space-x-4 text-gray-500 text-sm;
+  @apply flex flex-row font-medium mb-5 space-x-4 text-base-500 text-sm;
 }
 
 /*******************************************************
  Trix
  *******************************************************/
 trix-toolbar[id^="trix-toolbar-"] {
-  @apply sticky top-0 dark:bg-gray-900;
+  @apply sticky top-0 dark:bg-base-900;
 }
 
 .trix-active {
@@ -633,7 +629,7 @@ trix-toolbar[id^="trix-toolbar-"] {
 }
 
 .ui-tabs.ui-widget .ui-tabs-nav {
-  @apply bg-gray-100 border-0 flex gap-2 m-0 mb-4 mr-auto p-1 rounded text-sm dark:bg-white/[.04] after:hidden;
+  @apply bg-base-100 border-0 flex gap-2 m-0 mb-4 mr-auto p-1 rounded text-sm dark:bg-white/[.04] after:hidden;
 }
 
 .ui-tabs.ui-widget .ui-tabs-nav li {
@@ -641,18 +637,18 @@ 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-gray-400 text-sm hover:bg-gray-700/[.04] hover:text-gray-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 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-gray-700 hover:bg-white dark:bg-gray-900 dark:hover:bg-gray-900 dark:text-white;
+  @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;
 }
 
 /*******************************************************
  Simplebar
  *******************************************************/
 .simplebar-track .simplebar-scrollbar::before {
-  @apply bg-gray-900/80  dark:bg-gray-400/80;
+  @apply bg-base-900/80  dark:bg-base-400/80;
 }
 
 .simplebar-horizontal-scrollbar-top .simplebar-track.simplebar-horizontal {

unfold/templates/admin/actions.html

@@ -1,8 +1,8 @@
 {% load i18n %}
 
-<div class="actions flex flex-col gap-3 order-last lg:order-none lg:flex-row lg:items-center">
+<div id="changelist-actions" class="actions flex flex-col gap-3 text-white sm:flex-row sm:items-center lg:items-center {% if not cl.model_admin.list_fullwidth %}mx-auto{% endif %}"  x-bind:style="'width: ' + changeListWidth + 'px'">
     {% block actions %}
-        <div class="flex flex-col gap-2 lg:flex-row" x-data="{action: ''}">
+        <div class="flex flex-row gap-2 lg:flex-row" x-data="{action: ''}">
             {% block actions-form %}
                 {% for field in action_form %}
                     {% if field.label %}
@@ -19,7 +19,7 @@
             {% endblock %}
 
             {% block actions-submit %}
-                <button type="submit" x-show="action" class="bg-primary-600 cursor-pointer flex font-medium items-center justify-center px-3 py-2 rounded-md 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 text-sm text-white whitespace-nowrap" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
                     {% trans "Run" %}
                 </button>
             {% endblock %}
@@ -27,28 +27,30 @@
 
         {% block actions-counter %}
             {% if actions_selection_counter %}
-                <div class="bg-gray-100 flex flex-row gap-2 h-9.5 items-center px-3 rounded-md shadow-sm truncate dark:bg-white/[.04] lg:bg-transparent dark:lg:!bg-transparent lg:px-0 lg:shadow-none">
-                    <span class="action-counter text-sm" data-actions-icnt="{{ cl.result_list|length }}">
+                <div class="flex flex-grow flex-col sm:flex-row sm:items-center">
+                    <span class="action-counter" data-actions-icnt="{{ cl.result_list|length }}">
                         {{ selection_note }}
                     </span>
 
                     {% if cl.result_count != cl.result_list|length %}
-                        <span class="all hidden text-gray-500 text-sm">
+                        <span class="all hidden">
                             {{ selection_note_all }}
                         </span>
 
                         {% if not cl.model_admin.list_disable_select_all %}
-                            <span class="question hidden text-primary-600 text-sm dark:text-primary-500">
-                                <a href="#" 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 text-sm text-red-600">
-                                <a href="#">
-                                    {% translate "Clear selection" %}
-                                </a>
-                            </span>
+                            <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" %}">
+                                        {% 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">
+                                        {% translate "Clear selection" %}
+                                    </a>
+                                </span>
+                            </div>
                         {% endif %}
                     {% endif %}
                 </div>

unfold/templates/admin/app_list.html

@@ -15,19 +15,19 @@
                                 </h2>
                             {% endif %}
 
-                            <ol>
+                            <ol class="flex flex-col gap-1">
                                 {% for model in app.models %}
                                     {% if not model.hidden %}
                                         <li class="model-{{ model.object_name|lower }}{% if model.admin_url in request.path|urlencode %} current-model{% endif %}">
                                             {% if model.header %}
-                                                <h3 class="font-medium my-3 text-gray-900 text-sm dark:text-gray-200">
+                                                <h3 class="font-medium my-2 text-base-900 text-sm dark:text-base-200">
                                                     {{ model.header }}
                                                 </h3>
                                             {% endif %}
 
                                             {% if model.admin_url %}
                                                 <a href="{{ model.admin_url }}" id="link-{{ app.app_label }}-{{ model.object_name|lower }}"
-                                                   class="block -mx-3 px-3 py-3 rounded-md truncate hover:text-primary-600 dark:hover:text-primary-500 {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-600 dark:bg-white/[.06] dark:text-primary-500{% endif %}">
+                                                   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 %}">
                                                     {{ 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-md 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 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-gray-200 mb-8 rounded-md pt-3 px-3 shadow-sm dark:border-gray-800">
+            <fieldset class="border border-base-200 mb-8 rounded pt-3 px-3 shadow-sm 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-md text-sm text-white">
+            <button type="submit" class="bg-primary-600 border border-transparent font-medium px-3 py-2 rounded text-sm text-white">
                 {% translate 'Change password' %}
             </button>
         </form>

unfold/templates/admin/base.html

@@ -10,7 +10,7 @@
             {% endblock %}
         {% endif %}
 
-        <div id="main" class="flex-grow min-w-0">
+        <div id="main" class="flex-grow min-w-0"  x-resize="mainWidth = $width">
             {% include "unfold/helpers/header.html" %}
 
             {% if not is_popup %}

unfold/templates/admin/change_form.html

@@ -61,6 +61,10 @@
     <div id="content-main">
         {% block form_before %}{% endblock %}
 
+        {% if adminform.model_admin.change_form_outer_before_template %}
+            {% include adminform.model_admin.change_form_outer_before_template %}
+        {% endif %}
+
         <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
             {% csrf_token %}
 
@@ -116,6 +120,10 @@
             </div>
         </form>
 
+        {% if adminform.model_admin.change_form_outer_after_template %}
+            {% include adminform.model_admin.change_form_outer_after_template %}
+        {% endif %}
+
         {% block form_after %}{% endblock %}
     </div>
 {% endblock %}