refactor: remove absolute classes

components/app/Footer.vue

@@ -16,7 +16,8 @@
           } ${$t('layout.zen_mode')}`"
           :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
           :class="{
-            '!text-accent focus:text-accent hover:text-accent': ZEN_MODE,
+            '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
+              ZEN_MODE,
           }"
           @click.native="ZEN_MODE = !ZEN_MODE"
         />

components/app/Search.vue

@@ -16,8 +16,6 @@
           px-4
           pt-2
           pb-6
-          truncate
-          focus:outline-none
         "
       />
       <div

components/app/Share.vue

@@ -104,11 +104,11 @@ export default {
   @apply rounded;
   @apply flex-col flex;
   @apply p-4;
-  @apply transition;
   @apply items-center;
   @apply justify-center;
   @apply hover:(bg-primaryLight text-secondaryDark);
-  @apply focus:(border-divider outline-none);
+  @apply focus:outline-none;
+  @apply focus-visible:border-divider;
 
   svg {
     @apply opacity-80;

components/app/Shortcuts.vue

@@ -36,10 +36,7 @@
               py-2
               pr-2
               pl-8
-              transition
-              truncate
-              focus:(border-divider
-              outline-none)
+              focus-visible:border-divider
             "
             :placeholder="$t('search')"
           />

components/app/Sidenav.vue

@@ -123,9 +123,8 @@ export default defineComponent({
   @apply flex flex-col flex-1;
   @apply items-center;
   @apply justify-center;
-  @apply transition;
   @apply hover:(bg-primaryDark text-secondaryDark);
-  @apply focus:text-secondaryDark;
+  @apply focus-visible:text-secondaryDark;
 
   &::after {
     @apply absolute;