fix: file input focus (#103)

src/unfold/styles.css

@@ -5,6 +5,7 @@
 @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');

src/unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -1,7 +1,7 @@
 {% load i18n static %}
 
 <div class="flex flex-row">
-    <div class="border flex items-center overflow-hidden rounded-md shadow-sm text-sm max-w-2xl w-full dark:border-gray-700">
+    <div class="border flex items-center overflow-hidden rounded-md shadow-sm text-sm max-w-2xl w-full focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
         {% if widget.is_initial and not widget.required %}
             <div class="bg-gray-50 border-r flex flex-none items-center self-stretch px-3 dark:bg-gray-900">
                 <label for="{{ widget.checkbox_id }}" class="flex items-center">
@@ -17,7 +17,7 @@
         <input type="text" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white flex-grow font-medium px-3 py-2 text-ellipsis dark:bg-gray-900 {% if widget.value %}text-gray-500 dark:text-gray-400{% else %}text-gray-300 dark:text-gray-400{% endif %}">
 
         <div class="flex flex-none items-center leading-none self-stretch">
-            <input id="{{ widget.name }}" type="{{ widget.type }}" name="{{ widget.name }}" class="hidden" {% include "django/forms/widgets/attrs.html" %} />
+            <input id="{{ widget.name }}" type="{{ widget.type }}" name="{{ widget.name }}" class="opacity-0 pointer-events-none" {% include "django/forms/widgets/attrs.html" %} />
 
             <label for="{{ widget.name }}" class="cursor-pointer text-gray-400 px-3 dark:text-gray-400">
                 <span class="material-symbols-outlined">file_upload</span>
@@ -27,7 +27,7 @@
 
     {% if widget.attrs.accept == 'image/*' and widget.is_initial %}
         <div class="bg-gray-50 border h-9 ml-3 overflow-hidden relative rounded-md shadow-sm w-9 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500">
-            <div class="absolute block flex font-medium h-full items-center left-0 justify-center text-gray-400 top-0 w-full z-10 dark:text-gray-500">
+            <div class="absolute flex font-medium h-full items-center left-0 justify-center text-gray-400 top-0 w-full z-10 dark:text-gray-500">
                 ?
             </div>