fix: file input hover (#241)

Author: lukasvinclav

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

@@ -1,9 +1,9 @@
 {% load i18n %}
 
 {% if widget.attrs.accept == 'image/*' and widget.is_initial %}
-    <div class="bg-gray-50 border mb-4 p-1 rounded-md w-48 dark:bg-white/[.02] dark:border-gray-700">
-        <a href="{{ widget.value.url }}">
-            <img src="{{ widget.value.url }}" alt="{% trans 'Image preview' %}" class="rounded" />
+    <div class="bg-gray-50 border flex items-center justify-center mb-4 min-h-32 p-1 rounded-md w-48 dark:bg-white/[.02] dark:border-gray-700">
+        <a href="{{ widget.value.url }}" target="_blank">
+            <img src="{{ widget.value.url }}" alt="{% trans 'Image preview' %}" class="block rounded" />
         </a>
     </div>
 {% endif %}
@@ -26,7 +26,7 @@
     <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" %} />
 
-        <label for="{{ widget.name }}" class="cursor-pointer text-gray-400 px-3 dark:text-gray-500">
+        <label for="{{ widget.name }}" class="cursor-pointer text-gray-400 px-3 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200">
             <span class="material-symbols-outlined">file_upload</span>
         </label>
     </div>

src/unfold/templates/admin/widgets/clearable_file_input.html

@@ -19,7 +19,7 @@
         <div class="flex flex-none items-center leading-none self-stretch">
             <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-500">
+            <label for="{{ widget.name }}" class="cursor-pointer text-gray-400 px-3 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200">
                 <span class="material-symbols-outlined">file_upload</span>
             </label>
         </div>