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="alert alert-error hidden" id="webauthn-error">
+    <div class="webauthn">
-        {{ t "page.login.webauthn_login.error" }}
+        <div class="alert alert-error hidden" id="webauthn-error">
-    </div>
+            {{ t "page.login.webauthn_login.error" }}
-    <div class="buttons">
+        </div>
-        <button class="button" id="webauthn-login" disabled>{{ t "page.login.webauthn_login" }}</button>
+        <div class="buttons">
+            <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

@@ -46,55 +46,56 @@
         <div class="buttons">
             <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
         </div>
-        </fieldset>
+    </fieldset>
+
+    {{ if .webAuthnEnabled }}
+    <fieldset>
+        <legend>{{ t "page.settings.webauthn.passkeys" }}</legend>
 
-        {{ 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>
+
+        {{ if .webAuthnCerts}}
+        <table>
+            <tr>
+                <th>{{ t "page.settings.webauthn.passkey_name" }}</th>
+                <th>{{ t "page.settings.webauthn.added_on" }}</th>
+                <th>{{ t "page.settings.webauthn.last_seen_on" }}</th>
+                <th>{{ t "page.settings.webauthn.actions" }}</th>
+            </tr>
+            {{ range .webAuthnCerts }}
+            <tr>
+                <td>{{ .Name }}</td>
+                <td>{{ elapsed $.user.Timezone .AddedOn }}</td>
+                <td>{{ elapsed $.user.Timezone .LastSeenOn }}</td>
+                <td>
+                    <a href="#"
+                        data-confirm="true"
+                        data-label-question="{{ t "confirm.question" }}"
+                        data-label-yes="{{ t "confirm.yes" }}"
+                        data-label-no="{{ t "confirm.no" }}"
+                        data-label-loading="{{ t "confirm.loading" }}"
+                        data-url="{{ route "webauthnDelete" "credentialHandle" .HandleEncoded }}">{{ icon "delete" }}{{ t "action.remove" }}</a>
+                    <a href="{{ route "webauthnRename" "credentialHandle" .HandleEncoded }}">{{ icon "edit" }} {{ t "action.edit" }}</a>
+                </td>
+            </tr>
+            {{ end }}
+        </table>
+        {{ end }}
+
         <div class="buttons">
-            <button class="button" id="webauthn-register" disabled>
+            <button class="button button-primary" id="webauthn-register" disabled>
                 {{ t "page.settings.webauthn.register" }}
             </button>
             {{ if gt .countWebAuthnCerts 0}}
-            <button class="button" id="webauthn-delete">
+            <button class="button button-danger" 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>
-                    <th>{{ t "page.settings.webauthn.added_on" }}</th>
-                    <th>{{ t "page.settings.webauthn.last_seen_on" }}</th>
-                    <th>{{ t "page.settings.webauthn.actions" }}</th>
-                </tr>
-                {{ range .webAuthnCerts }}
-                <tr>
-                    <td>{{ .Name }}</td>
-                    <td>{{ elapsed $.user.Timezone .AddedOn }}</td>
-                    <td>{{ elapsed $.user.Timezone .LastSeenOn }}</td>
-                    <td>
-                        <a href="#"
-                            data-confirm="true"
-                            data-label-question="{{ t "confirm.question" }}"
-                            data-label-yes="{{ t "confirm.yes" }}"
-                            data-label-no="{{ t "confirm.no" }}"
-                            data-label-loading="{{ t "confirm.loading" }}"
-                            data-url="{{ route "webauthnDelete" "credentialHandle" .HandleEncoded }}">{{ icon "delete" }}{{ t "action.remove" }}</a>
-                        <a href="{{ route "webauthnRename" "credentialHandle" .HandleEncoded }}">{{ icon "edit" }} {{ t "action.edit" }}</a>
-                    </td>
-                </tr>
-                {{ end }}
-            </table>
-            </div>
-            {{ end }}
     </fieldset>
-        {{ end }}
+    {{ end }}
 
     <fieldset>
         <legend>{{ t "form.prefs.fieldset.reader_settings" }}</legend>

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;
+    appearance: none;
-    -moz-appearance: none;
     font-size: 1.1em;
     cursor: pointer;
     padding: 3px 10px;