From 8cbdf9946b2384faf53d3d0d6c823ff32d112e43 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Tue, 18 Oct 2022 13:41:46 +0200
Subject: [PATCH] Remove is-focused class to prevent squared outline on Safari

---
 resources/js/views/Start.vue |  4 ++--
 resources/sass/app.scss      | 11 ++---------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/resources/js/views/Start.vue b/resources/js/views/Start.vue
index 93d20afe..afc6446e 100644
--- a/resources/js/views/Start.vue
+++ b/resources/js/views/Start.vue
@@ -11,12 +11,12 @@
             <div class="column is-full quick-uploader-button" >
                 <div class="quick-uploader-centerer">
                     <!-- upload a qr code (with basic file field and backend decoding) -->
-                    <label role="button" tabindex="0" v-if="$root.appSettings.useBasicQrcodeReader" class="button is-link is-medium is-rounded is-focused" ref="qrcodeInputLabel" @keyup.enter="$refs.qrcodeInputLabel.click()">
+                    <label role="button" tabindex="0" v-if="$root.appSettings.useBasicQrcodeReader" class="button is-link is-medium is-rounded is-main" ref="qrcodeInputLabel" @keyup.enter="$refs.qrcodeInputLabel.click()">
                         <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
                         {{ $t('twofaccounts.forms.upload_qrcode') }}
                     </label>
                     <!-- scan button that launch camera stream -->
-                    <button v-else class="button is-link is-medium is-rounded is-focused is-double-focused" @click="capture()">
+                    <button v-else class="button is-link is-medium is-rounded is-main" @click="capture()">
                         {{ $t('twofaccounts.forms.scan_qrcode') }}
                     </button>
                 </div>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 7d50719f..72666b9f 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -430,10 +430,8 @@ figure.no-icon {
 .button.is-like-text:focus-within {
   background: inherit;
   color: inherit;
-  // box-shadow: inherit;
 }
 
-
 .button:focus-visible, .button.is-focused,
 .file[role=button]:focus-visible {
   border-color: transparent;
@@ -513,14 +511,9 @@ figure.no-icon {
   outline-color: $danger;
 }
 
-button.is-double-focused:focus-visible
+button.is-main
 {
-  outline-style: double !important;
-  outline-width: 6px !important;
-}
-button.is-double-focused:focus:not(:focus-visible)
-{
-  outline: none;
+  box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
 }
 
 .file[role=button]:focus-visible {