style: improved password toggle button

Author: thorsten

phpmyfaq/admin/assets/scss/_global.scss

@@ -85,4 +85,33 @@ body {
       color: var(--bs-gray-400);
     }
   }
+
+  // Improve visibility of input-group-text (e.g., password toggles)
+  .input-group .input-group-text {
+    background-color: var(--bs-gray-800);
+    border-color: var(--bs-gray-700);
+    color: var(--bs-light);
+  }
+
+  // Specific styling for password toggle in dark mode
+  #faqpassword_toggle {
+    cursor: pointer;
+    color: var(--bs-light);
+
+    &:hover {
+      color: var(--bs-primary);
+      background-color: rgba(var(--bs-primary-rgb), 0.1);
+    }
+
+    .bi {
+      color: currentColor;
+    }
+  }
+
+  // Focus state when focusing inputs within the group
+  .input-group:focus-within .input-group-text {
+    border-color: var(--bs-primary);
+    color: var(--bs-primary);
+    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
+  }
 }

phpmyfaq/assets/templates/admin/login.twig

@@ -45,7 +45,7 @@
                                    placeholder="{{ msgPassword }}" data-pmf-toggle="faqpassword_toggle">
                             <label for="faqpassword">{{ msgPassword }}</label>
                           </div>
-                          <span class="input-group-text" id="faqpassword_toggle">
+                          <span class="input-group-text" id="faqpassword_toggle" role="button" tabindex="0">
                         <i class="bi bi-eye-slash" id="faqpassword_toggle_icon"></i>
                       </span>
                         </div>

phpmyfaq/assets/templates/admin/user/password.twig

@@ -51,7 +51,7 @@
               <div class="input-group">
                 <input type="password" autocomplete="off" name="faqpassword" id="faqpassword" class="form-control"
                        data-pmf-toggle="faqpassword_toggle" required>
-                <span class="input-group-text" id="faqpassword_toggle">
+                <span class="input-group-text" id="faqpassword_toggle" role="button" tabindex="0">
                 <i class="bi bi-eye-slash" id="faqpassword_toggle_icon"></i>
               </span>
               </div>

phpmyfaq/assets/templates/default/login.twig

@@ -46,7 +46,7 @@
                         />
                         <label for="faqpassword">{{ password }}</label>
                       </div>
-                      <span class="input-group-text" id="faqpassword_toggle">
+                      <span class="input-group-text" id="faqpassword_toggle" role="button" tabindex="0">
                         <i class="bi bi-eye-slash" id="faqpassword_toggle_icon"></i>
                       </span>
                     </div>

phpmyfaq/assets/templates/default/ucp.twig

@@ -93,7 +93,7 @@
                     required
                     {{ readonly }}
                   />
-                  <span class="input-group-text" id="faqpassword_toggle">
+                  <span class="input-group-text" id="faqpassword_toggle" role="button" tabindex="0">
                   <i class="bi bi-eye-slash" id="faqpassword_toggle_icon"></i>
                 </span>
                 </div>