impl: transitions for hover elements

netresearch · Oct 4, 2023 · 00a61b4 · 00a61b4
1 parent 0ed1676
commit 00a61b4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/internal/web/layouts/logged-in.html b/internal/web/layouts/logged-in.html
@@ -94,9 +94,18 @@
           </a>
         </div>
 
-        <a href="/logout" class="rounded-md p-1 outline-none transition-colors hocus:bg-white hocus:text-black">
+        <a
+          href="/logout"
+          class="flex items-center rounded-md border border-gray-600 p-2 outline-none transition-colors hocus:border-white hocus:bg-white hocus:text-black"
+        >
           <!-- material-symbols:logout -->
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            class="inline-block h-4 w-4"
+          >
             <path
               fill="currentColor"
               d="M5 21q-.825 0-1.413-.588T3 19V5q0-.825.588-1.413T5 3h7v2H5v14h7v2H5Zm11-4l-1.375-1.45l2.55-2.55H9v-2h8.175l-2.55-2.55L16 7l5 5l-5 5Z"

diff --git a/internal/web/views/index.html b/internal/web/views/index.html
@@ -9,7 +9,7 @@
 <h1 class="mb-4 text-3xl">Hi {{ .user.CN }}!</h1>
 
 <h2 class="mb-2 text-xl">Your user information</h2>
-<div class="rounded-md border border-gray-600 p-4">
+<div class="rounded-md border border-gray-600 px-4 py-3">
   <p>CN: {{ template "code" .user.CN }}</p>
   <p>DN: {{ template "code" .user.DN }}</p>
   <p>sAMAccountName: {{ template "code" .user.SAMAccountName }}</p>

diff --git a/internal/web/views/login.html b/internal/web/views/login.html
@@ -13,7 +13,7 @@
       type="text"
       name="username"
       placeholder="Username"
-      class="form-input w-full rounded-md border border-gray-600 bg-black px-2 py-1 outline-none placeholder:select-none focus:border-white hocus:ring-0"
+      class="form-input w-full rounded-md border border-gray-600 bg-black px-2 py-1 outline-none transition-colors placeholder:select-none focus:border-white hocus:ring-0"
     />
   </div>
 
@@ -22,13 +22,13 @@
       type="password"
       name="password"
       placeholder="Password"
-      class="form-input w-full rounded-md border border-gray-600 bg-black px-2 py-1 outline-none placeholder:select-none focus:border-white hocus:ring-0"
+      class="form-input w-full rounded-md border border-gray-600 bg-black px-2 py-1 outline-none transition-colors placeholder:select-none focus:border-white hocus:ring-0"
     />
   </div>
 
   <button
     type="submit"
-    class="w-full rounded-md border border-white bg-white px-3 py-1 font-bold text-black outline-none hover:bg-transparent hover:text-white hocus:bg-opacity-0 hocus:text-white disabled:hocus:bg-opacity-10"
+    class="w-full rounded-md border border-white bg-white px-3 py-1 font-bold text-black outline-none transition-colors hocus:bg-opacity-0 hocus:text-white disabled:hocus:bg-opacity-10"
   >
     Login
   </button>
@@ -37,7 +37,7 @@
     Powered by
     <a
       href="https://github.com/netresearch/ldap-manager"
-      class="break-keep outline-none hocus:text-white hocus:underline hocus:decoration-white"
+      class="break-keep outline-none transition-colors hocus:text-white hocus:underline hocus:decoration-white"
     >
       netresearch/ldap-manager
     </a>