feat: improved input focus (#1247)

Author: lukasvinclav

src/unfold/contrib/forms/templates/unfold/forms/helpers/toolbar.html

@@ -92,7 +92,7 @@
             <div data-trix-dialogs>
                 <div class="absolute bg-white border-b border-base-200 -bottom-px left-0 px-4 py-2 right-0 shadow-xs translate-y-full dark:bg-base-900 dark:border-base-700" data-trix-dialog="href" data-trix-dialog-attribute="href">
                     <div class="flex flex-row">
-                        <input type="url" name="href" class="border border-base-200 bg-white font-medium px-3 rounded-default shadow-xs text-base-500 text-sm focus:ring-3 focus:ring-primary-300 focus:border-primary-600 focus:outline-hidden group-[.errors]:border-red-600 focus:group-[.errors]:ring-red-200 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:focus:ring-primary-600/30 dark:group-[.errors]:border-red-500 dark:focus:group-[.errors]:ring-red-600/40" placeholder="{% trans "Enter an URL" %}" required data-trix-input>
+                        <input type="url" name="href" class="border border-base-200 bg-white font-medium px-3 rounded-default shadow-xs text-base-500 text-sm focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 group-[.errors]:border-red-600 focus:group-[.errors]:outline-red-600 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:group-[.errors]:border-red-500 dark:focus:group-[.errors]:outline-red-500" placeholder="{% trans "Enter an URL" %}" required data-trix-input>
 
                         <div class="bg-white border border-base-200 border-md flex flex-row ml-4 rounded-default shadow-xs dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
                             <button type="button" data-trix-method="setAttribute" title="{% trans "Link" %}" class="border-r border-base-200 cursor-pointer flex items-center h-8 justify-center text-base-400 transition-colors w-8 hover:text-primary-600 dark:border-base-700">

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

@@ -2,11 +2,15 @@
 @plugin '@tailwindcss/typography';
 @custom-variant dark (&:where(.dark, .dark *));
 
-@source inline("2xl:flex 2xl:relative pb-0 tracking-normal h-3 mb-6 -mr-3 mr-3 pr-3 py-3 max-w-80 min-w-80 w-3 h-[64px] w-[65px]! w-96 max-w-96 md:w-48");
-@source inline("{md:,}sticky {2xl:,}relative rounded-b-default rounded-l-default rounded-t-default left-[65px] dark:hover:bg-white/[.06] bottom-3 top-3 right-3 translate-x-1/4 -translate-y-1/4");
-@source inline("{dark:,}border-transparent border-0 border-2 border-l border-b-0 border-l-0 border-r-0 border-t-0 m-3 my-3 pr-3 md:border-0 md:border-r lg:border-r-0");
+@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}");
+@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}");
@@ -420,15 +424,15 @@ h3 span:nth-child(3) {
 }
 
 .select2-container.select2-container--open .select2-dropdown {
-  @apply border-primary-600 ring-3 ring-primary-300 pb-2 shadow-xs 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/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-default 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
@@ -495,7 +499,7 @@ h3 span:nth-child(3) {
 }
 
 .select2.select2-container--open {
-  @apply border-b-0 border-primary-600 relative ring-3 ring-primary-300 dark:border-primary-700 dark:ring-primary-700/50;
+  @apply border-b-0 border-primary-600 relative outline-2 -outline-offset-2 outline-primary-600;
 }
 
 /*******************************************************

src/unfold/styles.css

@@ -3,7 +3,7 @@
 {% load admin_list i18n unfold %}
 
 {% block base %}
-    <div id="page" class="flex max-w-full min-h-screen dark:bg-base-950/20 {% element_classes 'page' %}">
+    <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" %}

src/unfold/templates/admin/base.html

@@ -24,7 +24,7 @@
 {% endblock %}
 
 {% block base %}
-    <div id="page" class="flex min-h-screen">
+    <div id="page" class="bg-white flex min-h-screen dark:bg-base-900 ">
         <div class="flex grow items-center justify-center mx-auto px-4 relative">
             <div class="w-full sm:w-96">
                 <h1 class="font-semibold mb-10">
@@ -66,7 +66,7 @@ <h1 class="font-semibold mb-10">
                         <button type="submit" class="bg-primary-600 border border-transparent flex flex-row font-semibold group items-center justify-center py-2 rounded-default text-sm text-white w-full">
                             {% translate 'Log in' %}
 
-                            <i class="material-symbols-outlined ml-2 relative right-0 text-lg transition-all group-hover:-right-1">arrow_forward</i>
+                            <span class="material-symbols-outlined ml-2 relative right-0 text-base transition-all group-hover:-right-1">arrow_forward</span>
                         </button>
                     </div>
 

src/unfold/templates/admin/login.html

@@ -2,8 +2,8 @@
 
 <div class="relative z-50">
     <div class="fixed hidden xl:relative xl:block w-[288px] {% element_classes 'navigation_wrapper' %}" x-bind:class="{'xl:hidden!': !sidebarDesktopOpen, 'block!': sidebarMobileOpen}">
-        <div class="relative z-30">
-            <div id="nav-sidebar" class="bg-gray-50 border-r border-base-200 bottom-0 fixed max-h-screen top-0 w-[288px] dark:border-base-800 {% element_classes 'navigation' %}">
+        <div class="bg-gray-50 relative z-30 dark:bg-gray-900">
+            <div id="nav-sidebar" class="border-r border-base-200 bottom-0 fixed max-h-screen top-0 w-[288px] dark:border-base-800 dark:bg-base-950/20 {% element_classes 'navigation' %}">
                 {% if templates.navigation %}
                     {% include templates.navigation %}
                 {% else %}

src/unfold/templates/admin/nav_sidebar.html

@@ -3,7 +3,7 @@
 {% if cl.search_fields %}
     <div id="toolbar">
         <form id="changelist-search" method="get" role="search">
-            <div class="bg-white border border-base-200 flex rounded-default overflow-hidden shadow-xs lg:w-96 focus-within:ring-3 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/50">
+            <div class="bg-white border border-base-200 flex rounded-default overflow-hidden shadow-xs lg:w-96 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-base-900 dark:border-base-700">
                 <input class="font-medium grow min-w-0 h-9 px-3 text-font-default-light text-sm focus:outline-hidden dark:bg-base-900 dark:text-font-default-dark placeholder-shown:truncate placeholder-base-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% if cl.search_help_text %}{{ cl.search_help_text }}{% else %}{% trans "Type to search" %}{% endif %}" />
 
                 <button type="submit" class="flex items-center px-2 focus:outline-hidden" id="searchbar-submit">

src/unfold/templates/admin/search_form.html

@@ -3,16 +3,14 @@
 {% load i18n %}
 
 {% block base %}
-    <div id="page" class="flex min-h-screen">
+    <div id="page" class="bg-white flex min-h-screen dark:bg-base-900 ">
         <div class="flex grow items-center justify-center mx-auto px-4">
             <div class="w-full sm:w-96">
-                <h1 class="font-semibold mb-4 text-xl">
-                    <span class="block leading-relaxed text-base-700 dark:text-base-200">
-                        {% trans "You have been successfully logged out from the administration" %}
-                    </span>
+                <h1 class="font-semibold mb-4 text-font-important-light text-xl tracking-tight dark:text-font-important-dark">
+                    {% trans "You have been successfully logged out from the administration" %}
                 </h1>
 
-                <p class="mb-10">
+                <p class="leading-relaxed mb-10">
                     {% translate "Thanks for spending some quality time with the web site today." %}
                 </p>
 

src/unfold/templates/registration/logged_out.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-default shadow-xs focus-within:ring-3 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/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"

src/unfold/templates/unfold/helpers/search.html

@@ -24,7 +24,7 @@
     <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">
             <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
         </div>