Improve WebAuthn buttons layout

internal/template/templates/common/layout.html

@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Miniflux">
-    <link rel="manifest" href="{{ route "webManifest" }}" crossorigin="use-credentials"/>
+    <link rel="manifest" href="{{ route "webManifest" }}" crossorigin="use-credentials">
 
     <meta name="robots" content="noindex,nofollow">
     <meta name="referrer" content="no-referrer">

internal/template/templates/views/login.html

@@ -20,11 +20,13 @@
         </div>
     </form>
     {{ if .webAuthnEnabled }}
+    <div class="webauthn">
         <div class="alert alert-error hidden" id="webauthn-error">
             {{ t "page.login.webauthn_login.error" }}
         </div>
         <div class="buttons">
-        <button class="button" id="webauthn-login" disabled>{{ t "page.login.webauthn_login" }}</button>
+            <button class="button button-primary" id="webauthn-login" disabled>{{ t "page.login.webauthn_login" }}</button>
+        </div>
     </div>
     {{ end }}
     {{ if hasOAuth2Provider "google" }}

internal/template/templates/views/settings.html

@@ -51,21 +51,12 @@
     {{ if .webAuthnEnabled }}
     <fieldset>
         <legend>{{ t "page.settings.webauthn.passkeys" }}</legend>
+
         <div class="alert alert-error hidden" id="webauthn-error">
             {{ t "page.settings.webauthn.register.error" }}
         </div>
-        <div class="buttons">
-            <button class="button" id="webauthn-register" disabled>
-                {{ t "page.settings.webauthn.register" }}
-            </button>
-            {{ if gt .countWebAuthnCerts 0}}
-            <button class="button" id="webauthn-delete">
-                {{ plural "page.settings.webauthn.delete" .countWebAuthnCerts .countWebAuthnCerts }}
-            </button>
-            {{ end }}
-        </div>
+
         {{ if .webAuthnCerts}}
-            <div class="details-content">
         <table>
             <tr>
                 <th>{{ t "page.settings.webauthn.passkey_name" }}</th>
@@ -91,8 +82,18 @@
             </tr>
             {{ end }}
         </table>
-            </div>
         {{ end }}
+
+        <div class="buttons">
+            <button class="button button-primary" id="webauthn-register" disabled>
+                {{ t "page.settings.webauthn.register" }}
+            </button>
+            {{ if gt .countWebAuthnCerts 0}}
+            <button class="button button-danger" id="webauthn-delete">
+                {{ plural "page.settings.webauthn.delete" .countWebAuthnCerts .countWebAuthnCerts }}
+            </button>
+            {{ end }}
+        </div>
     </fieldset>
     {{ end }}
 

internal/ui/static/css/common.css

@@ -363,7 +363,7 @@ input[type="number"] {
     font-size: 99%;
     margin-bottom: 10px;
     margin-top: 5px;
-    -webkit-appearance: none;
+    appearance: none;
 }
 
 input[type="search"]:focus,
@@ -393,7 +393,7 @@ textarea {
     padding: 3px;
     margin-bottom: 10px;
     margin-top: 5px;
-    -webkit-appearance: none;
+    appearance: none;
 }
 
 textarea:focus {
@@ -440,8 +440,7 @@ a.button {
 
 .button {
     display: inline-block;
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    appearance: none;
     font-size: 1.1em;
     cursor: pointer;
     padding: 3px 10px;