Fix button inconsistencies and macOS layout shifts

This commit fixes layout shifts experienced in macOS Safari when
hovering over top menu items. Instead of making text bold — which was
causing layout shifts — the hover effect now changes the text color.
This ensures a consistent UI across different browsers and platforms.

Additionally, this commit fixes the styling of the privacy button
located in the bottom right corner. Previously styled as an `<a>`
element, it is now correctly represented as a `<button>`.

Furthermore, the commit enhances HTML conformity and accessibility by
correctly using `<button>` and `<a>` tags instead of relying on click
interactions on `<span>` elements.

This commit introduces `FlatButton` Vue component and a new
`flat-button` mixin. These centralize button usage and link styles,
aligning the hover/touch reactions of buttons across the application,
thereby creating a more consistent user interface.

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -31,7 +31,7 @@
     </div>
     <div class="card__expander" @click.stop>
       <div class="card__expander__close-button">
-        <AppIcon
+        <FlatButton
           icon="xmark"
           @click="collapse()"
         />
@@ -51,6 +51,7 @@ import {
   defineComponent, computed, shallowRef,
 } from 'vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
+import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
@@ -61,6 +62,7 @@ export default defineComponent({
     ScriptsTree,
     AppIcon,
     CardSelectionIndicator,
+    FlatButton,
   },
   props: {
     categoryId: {

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -17,7 +17,7 @@
             class="search__query__close-button"
             @click="clearSearchQuery()"
           >
-            <AppIcon icon="xmark" />
+            <FlatButton icon="xmark" />
           </div>
         </div>
         <div v-if="!searchHasMatches" class="search-no-matches">
@@ -39,19 +39,19 @@
 import {
   defineComponent, PropType, ref, computed,
 } from 'vue';
-import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
 import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
 import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
+import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
 
 export default defineComponent({
   components: {
     ScriptsTree,
     CardList,
-    AppIcon,
+    FlatButton,
   },
   props: {
     currentView: {
@@ -149,14 +149,10 @@ $margin-inner: 4px;
     flex-direction: row;
     align-items: center;
     margin-top: 1em;
-    color: $color-primary;
+    color: $color-primary-light;
     .search__query__close-button {
-      @include clickable;
       font-size: 1.25em;
       margin-left: 0.25rem;
-      @include hover-or-touch {
-        color: $color-primary-dark;
-      }
     }
   }
   .search-no-matches {

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue

@@ -128,7 +128,7 @@ $base-spacing: $text-size;
       */
       @include hover-or-touch {
         &::after{
-          background-color: $globals-color-hover;
+          background-color: $color-highlight;
         }
       }
     }

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue

@@ -1,22 +1,23 @@
 <template>
-  <a
-    class="button"
-    target="_blank"
-    :class="{ 'button-on': isOn }"
+  <div
+    class="documentation-button"
+    :class="{ expanded: isOn }"
     @click.stop
-    @click="toggle()"
   >
-    <AppIcon icon="circle-info" />
-  </a>
+    <FlatButton
+      icon="circle-info"
+      @click="toggle()"
+    />
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
+import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
 
 export default defineComponent({
   components: {
-    AppIcon,
+    FlatButton,
   },
   emits: [
     'show',
@@ -45,14 +46,15 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-.button {
-  @include clickable;
+.documentation-button {
   vertical-align: middle;
   color: $color-primary;
-  @include hover-or-touch {
-    color: $color-primary-darker;
+  :deep() { // This override leads to inconsistent highlight color, it should be re-styled.
+    @include hover-or-touch {
+      color: $color-primary-darker;
+    }
   }
-  &-on {
+  &.expanded {
     color: $color-primary-light;
   }
 }