From 0c5bfb755f8b43dc547edc7050d8a1babfbf7746 Mon Sep 17 00:00:00 2001
From: Tuomas Airaksinen <tuomas.airaksinen@vrt.fi>
Date: Thu, 29 Aug 2024 12:06:23 +0300
Subject: [PATCH] Improve css scoping so that it is easier to make css
 customization via modules

---
 app/bibleview-js/src/components/BibleView.vue         |  6 +-----
 app/bibleview-js/src/components/BookmarkText.vue      |  2 +-
 app/bibleview-js/src/components/MyBible/B.vue         |  2 +-
 app/bibleview-js/src/components/MyBible/Br.vue        |  2 +-
 app/bibleview-js/src/components/MyBible/H3.vue        |  2 +-
 app/bibleview-js/src/components/MyBible/I.vue         |  2 +-
 app/bibleview-js/src/components/MyBible/Li.vue        |  2 +-
 app/bibleview-js/src/components/MyBible/Ol.vue        |  2 +-
 app/bibleview-js/src/components/MyBible/Pb.vue        |  2 +-
 app/bibleview-js/src/components/MyBible/S.vue         |  2 +-
 app/bibleview-js/src/components/MyBible/Strong.vue    |  2 +-
 app/bibleview-js/src/components/OSIS/A.vue            |  2 +-
 app/bibleview-js/src/components/OSIS/Abbr.vue         |  2 +-
 app/bibleview-js/src/components/OSIS/AndBibleLink.vue |  2 +-
 app/bibleview-js/src/components/OSIS/CatchWord.vue    |  2 +-
 app/bibleview-js/src/components/OSIS/Cell.vue         |  2 +-
 app/bibleview-js/src/components/OSIS/Div.vue          |  2 +-
 app/bibleview-js/src/components/OSIS/DivineName.vue   |  2 +-
 app/bibleview-js/src/components/OSIS/Figure.vue       |  2 +-
 app/bibleview-js/src/components/OSIS/Foreign.vue      |  2 +-
 app/bibleview-js/src/components/OSIS/Hi.vue           |  2 +-
 app/bibleview-js/src/components/OSIS/Item.vue         |  2 +-
 app/bibleview-js/src/components/OSIS/L.vue            |  2 +-
 app/bibleview-js/src/components/OSIS/Lb.vue           |  4 ++--
 app/bibleview-js/src/components/OSIS/Lg.vue           |  2 +-
 app/bibleview-js/src/components/OSIS/List.vue         |  2 +-
 app/bibleview-js/src/components/OSIS/Milestone.vue    |  4 ++--
 app/bibleview-js/src/components/OSIS/NoOp.vue         |  4 ++--
 app/bibleview-js/src/components/OSIS/P.vue            |  2 +-
 app/bibleview-js/src/components/OSIS/Q.vue            |  4 ++--
 app/bibleview-js/src/components/OSIS/Reference.vue    |  2 +-
 app/bibleview-js/src/components/OSIS/Row.vue          |  2 +-
 app/bibleview-js/src/components/OSIS/Seg.vue          |  2 +-
 app/bibleview-js/src/components/OSIS/Table.vue        |  2 +-
 app/bibleview-js/src/components/OSIS/Title.vue        |  2 +-
 app/bibleview-js/src/components/OSIS/TransChange.vue  |  4 ++--
 app/bibleview-js/src/components/OSIS/W.vue            | 10 +++++-----
 app/bibleview-js/src/components/OpenAllLink.vue       |  2 +-
 app/bibleview-js/src/components/VerseNumber.vue       |  2 +-
 39 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/app/bibleview-js/src/components/BibleView.vue b/app/bibleview-js/src/components/BibleView.vue
index f66c8ca947..00368dc5b6 100644
--- a/app/bibleview-js/src/components/BibleView.vue
+++ b/app/bibleview-js/src/components/BibleView.vue
@@ -312,7 +312,7 @@ setupEventBusListener("scroll_up", () => scrollUpDown(true));
 useSharing({topElement, android});
 const direction = computed(() => appSettings.rightToLeft ? "rtl" : "ltr");
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 
 $ring-size: 35px;
@@ -459,10 +459,6 @@ $borderDistance: 0;
   background-color: rgba(0, 0, 0, 0.15);
 }
 
-</style>
-<style lang="scss">
-@import "~@/common.scss";
-
 a {
   color: blue;
 
diff --git a/app/bibleview-js/src/components/BookmarkText.vue b/app/bibleview-js/src/components/BookmarkText.vue
index 6dc5c394b9..0787b086a8 100644
--- a/app/bibleview-js/src/components/BookmarkText.vue
+++ b/app/bibleview-js/src/components/BookmarkText.vue
@@ -64,7 +64,7 @@ const highlightOffset = computed(() => {
 useCommon();
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import "~@/common.scss";
 
 .bookmark-text {
diff --git a/app/bibleview-js/src/components/MyBible/B.vue b/app/bibleview-js/src/components/MyBible/B.vue
index 0a21cc40cb..8abaffe1a2 100644
--- a/app/bibleview-js/src/components/MyBible/B.vue
+++ b/app/bibleview-js/src/components/MyBible/B.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 </style>
diff --git a/app/bibleview-js/src/components/MyBible/Br.vue b/app/bibleview-js/src/components/MyBible/Br.vue
index 17d4fee8e4..63f4c00613 100644
--- a/app/bibleview-js/src/components/MyBible/Br.vue
+++ b/app/bibleview-js/src/components/MyBible/Br.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 </style>
diff --git a/app/bibleview-js/src/components/MyBible/H3.vue b/app/bibleview-js/src/components/MyBible/H3.vue
index 1af09ea205..3dfc7bbf63 100644
--- a/app/bibleview-js/src/components/MyBible/H3.vue
+++ b/app/bibleview-js/src/components/MyBible/H3.vue
@@ -27,6 +27,6 @@ import {useCommon} from "@/composables";
 useCommon()
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 </style>
diff --git a/app/bibleview-js/src/components/MyBible/I.vue b/app/bibleview-js/src/components/MyBible/I.vue
index a3ab40a650..0b0c19692c 100644
--- a/app/bibleview-js/src/components/MyBible/I.vue
+++ b/app/bibleview-js/src/components/MyBible/I.vue
@@ -27,7 +27,7 @@ const {config} = useCommon();
 const show = computed(() => config.showNonCanonical);
 </script>
 
-<style scoped>
+<style>
 .nonCanonical {
     font-style: italic;
 }
diff --git a/app/bibleview-js/src/components/MyBible/Li.vue b/app/bibleview-js/src/components/MyBible/Li.vue
index c71947bb65..2ce682df78 100644
--- a/app/bibleview-js/src/components/MyBible/Li.vue
+++ b/app/bibleview-js/src/components/MyBible/Li.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 </style>
diff --git a/app/bibleview-js/src/components/MyBible/Ol.vue b/app/bibleview-js/src/components/MyBible/Ol.vue
index d718811e64..2ce9488a72 100644
--- a/app/bibleview-js/src/components/MyBible/Ol.vue
+++ b/app/bibleview-js/src/components/MyBible/Ol.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 </style>
diff --git a/app/bibleview-js/src/components/MyBible/Pb.vue b/app/bibleview-js/src/components/MyBible/Pb.vue
index 75477edd1c..2d8d5858e2 100644
--- a/app/bibleview-js/src/components/MyBible/Pb.vue
+++ b/app/bibleview-js/src/components/MyBible/Pb.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 </style>
diff --git a/app/bibleview-js/src/components/MyBible/S.vue b/app/bibleview-js/src/components/MyBible/S.vue
index bfba12621d..88441dedfa 100644
--- a/app/bibleview-js/src/components/MyBible/S.vue
+++ b/app/bibleview-js/src/components/MyBible/S.vue
@@ -59,7 +59,7 @@ function openLink(event: MouseEvent) {
 }
 </script>
 
-<style scoped>
+<style>
 .strongs {
     font-size: 0.6em;
     text-decoration: none;
diff --git a/app/bibleview-js/src/components/MyBible/Strong.vue b/app/bibleview-js/src/components/MyBible/Strong.vue
index 0d08468854..275b5866a7 100644
--- a/app/bibleview-js/src/components/MyBible/Strong.vue
+++ b/app/bibleview-js/src/components/MyBible/Strong.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/A.vue b/app/bibleview-js/src/components/OSIS/A.vue
index 7776fab8b7..9555e3f3a6 100644
--- a/app/bibleview-js/src/components/OSIS/A.vue
+++ b/app/bibleview-js/src/components/OSIS/A.vue
@@ -38,6 +38,6 @@ function openLink(event: MouseEvent, url: string) {
 }
 </script>
 
-<style scoped>
+<style>
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/Abbr.vue b/app/bibleview-js/src/components/OSIS/Abbr.vue
index a2b610f9b6..a4eba27750 100644
--- a/app/bibleview-js/src/components/OSIS/Abbr.vue
+++ b/app/bibleview-js/src/components/OSIS/Abbr.vue
@@ -26,7 +26,7 @@ defineProps<{expansion: string}>();
 useCommon();
 </script>
 
-<style scoped>
+<style>
 .abbreviation {
 
 }
diff --git a/app/bibleview-js/src/components/OSIS/AndBibleLink.vue b/app/bibleview-js/src/components/OSIS/AndBibleLink.vue
index e314afd69d..4bb6d8de3c 100644
--- a/app/bibleview-js/src/components/OSIS/AndBibleLink.vue
+++ b/app/bibleview-js/src/components/OSIS/AndBibleLink.vue
@@ -31,6 +31,6 @@ function openLink(event: MouseEvent, url: string) {
 useCommon();
 </script>
 
-<style scoped>
+<style>
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/CatchWord.vue b/app/bibleview-js/src/components/OSIS/CatchWord.vue
index 9c8635ec9b..c19a6a7ebd 100644
--- a/app/bibleview-js/src/components/OSIS/CatchWord.vue
+++ b/app/bibleview-js/src/components/OSIS/CatchWord.vue
@@ -25,7 +25,7 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style scoped>
+<style>
 
 .catchWord {
     font-weight: bold;
diff --git a/app/bibleview-js/src/components/OSIS/Cell.vue b/app/bibleview-js/src/components/OSIS/Cell.vue
index 906b9682fe..0ccb19f0ef 100644
--- a/app/bibleview-js/src/components/OSIS/Cell.vue
+++ b/app/bibleview-js/src/components/OSIS/Cell.vue
@@ -28,7 +28,7 @@ checkUnsupportedProps(props, "role")
 useCommon();
 </script>
 
-<style scoped>
+<style>
 td {
     padding: 5px;
 
diff --git a/app/bibleview-js/src/components/OSIS/Div.vue b/app/bibleview-js/src/components/OSIS/Div.vue
index 64275b41a9..958308f5be 100644
--- a/app/bibleview-js/src/components/OSIS/Div.vue
+++ b/app/bibleview-js/src/components/OSIS/Div.vue
@@ -77,6 +77,6 @@ const isPreVerse = computed(() => getIsPreVerse(props.type, props.subType));
 const verseNum = computed(() => verseInfo!.verse);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/DivineName.vue b/app/bibleview-js/src/components/OSIS/DivineName.vue
index 92e101ff52..fa7d63eaae 100644
--- a/app/bibleview-js/src/components/OSIS/DivineName.vue
+++ b/app/bibleview-js/src/components/OSIS/DivineName.vue
@@ -25,7 +25,7 @@ import {useCommon} from "@/composables";
 useCommon()
 </script>
 
-<style scoped>
+<style>
 .divineName {
     font-variant: small-caps;
 }
diff --git a/app/bibleview-js/src/components/OSIS/Figure.vue b/app/bibleview-js/src/components/OSIS/Figure.vue
index 0b51493a42..ffa46bdc45 100644
--- a/app/bibleview-js/src/components/OSIS/Figure.vue
+++ b/app/bibleview-js/src/components/OSIS/Figure.vue
@@ -31,7 +31,7 @@ const {bookInitials} = inject(osisFragmentKey)!;
 useCommon();
 </script>
 
-<style scoped>
+<style>
 .imageStyle {
     max-width: 100%;
 }
diff --git a/app/bibleview-js/src/components/OSIS/Foreign.vue b/app/bibleview-js/src/components/OSIS/Foreign.vue
index 558c762fa2..a61a35dc5b 100644
--- a/app/bibleview-js/src/components/OSIS/Foreign.vue
+++ b/app/bibleview-js/src/components/OSIS/Foreign.vue
@@ -27,7 +27,7 @@ checkUnsupportedProps(props, "type");
 useCommon();
 </script>
 
-<style scoped>
+<style>
 .foreign-style {
     font-style: italic;
 }
diff --git a/app/bibleview-js/src/components/OSIS/Hi.vue b/app/bibleview-js/src/components/OSIS/Hi.vue
index 3a657a1463..9f12606818 100644
--- a/app/bibleview-js/src/components/OSIS/Hi.vue
+++ b/app/bibleview-js/src/components/OSIS/Hi.vue
@@ -38,7 +38,7 @@ const hiStyle = computed(() => {
 useCommon();
 </script>
 
-<style scoped>
+<style>
 .hi-italic, .rend-italic {
     font-style: italic;
 }
diff --git a/app/bibleview-js/src/components/OSIS/Item.vue b/app/bibleview-js/src/components/OSIS/Item.vue
index e63e3976cc..74b6d205da 100644
--- a/app/bibleview-js/src/components/OSIS/Item.vue
+++ b/app/bibleview-js/src/components/OSIS/Item.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon()
 </script>
 
-<style scoped>
+<style>
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/L.vue b/app/bibleview-js/src/components/OSIS/L.vue
index b71873faf5..83b7854a00 100644
--- a/app/bibleview-js/src/components/OSIS/L.vue
+++ b/app/bibleview-js/src/components/OSIS/L.vue
@@ -67,5 +67,5 @@ const isIndent = computed(() => type.value === "x-indent");
 useCommon();
 </script>
 
-<style scoped>
+<style>
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/Lb.vue b/app/bibleview-js/src/components/OSIS/Lb.vue
index 2633d5f100..3c6aa4b07b 100644
--- a/app/bibleview-js/src/components/OSIS/Lb.vue
+++ b/app/bibleview-js/src/components/OSIS/Lb.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <span><br/><slot/></span>
+  <span class="lb"><br/><slot/></span>
 </template>
 
 <script setup lang="ts">
@@ -27,6 +27,6 @@ checkUnsupportedProps(props, "type");
 useCommon();
 </script>
 
-<style scoped>
+<style>
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/Lg.vue b/app/bibleview-js/src/components/OSIS/Lg.vue
index 17d8a44d74..59f836a81b 100644
--- a/app/bibleview-js/src/components/OSIS/Lg.vue
+++ b/app/bibleview-js/src/components/OSIS/Lg.vue
@@ -34,7 +34,7 @@ const show = computed(() => props.sID);
 useCommon();
 </script>
 
-<style scoped>
+<style>
 .lg {
     height: 0.3em;
     display: block;
diff --git a/app/bibleview-js/src/components/OSIS/List.vue b/app/bibleview-js/src/components/OSIS/List.vue
index 512f93ea8c..4dd6e8b47f 100644
--- a/app/bibleview-js/src/components/OSIS/List.vue
+++ b/app/bibleview-js/src/components/OSIS/List.vue
@@ -25,7 +25,7 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style scoped>
+<style>
 .list-style {
 
 }
diff --git a/app/bibleview-js/src/components/OSIS/Milestone.vue b/app/bibleview-js/src/components/OSIS/Milestone.vue
index 17baaf5c89..88b4d93883 100644
--- a/app/bibleview-js/src/components/OSIS/Milestone.vue
+++ b/app/bibleview-js/src/components/OSIS/Milestone.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <span :class="{paragraphBreak}">{{ marker }}<slot/></span>
+  <span class="milestone" :class="{paragraphBreak}">{{ marker }}<slot/></span>
 </template>
 
 <script setup lang="ts">
@@ -40,7 +40,7 @@ const paragraphBreak = computed(() => props.type === "line");
 useCommon();
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import "~@/common.scss";
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/NoOp.vue b/app/bibleview-js/src/components/OSIS/NoOp.vue
index bde3603458..306bd79132 100644
--- a/app/bibleview-js/src/components/OSIS/NoOp.vue
+++ b/app/bibleview-js/src/components/OSIS/NoOp.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <span/>
+  <span class="no-op"/>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables"
 useCommon();
 </script>
 
-<style scoped>
+<style>
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/P.vue b/app/bibleview-js/src/components/OSIS/P.vue
index 32c6edd3f0..c7a0b1f086 100644
--- a/app/bibleview-js/src/components/OSIS/P.vue
+++ b/app/bibleview-js/src/components/OSIS/P.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon();
 </script>
 
-<style scoped>
+<style>
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/Q.vue b/app/bibleview-js/src/components/OSIS/Q.vue
index ec5455a846..f763e55b60 100644
--- a/app/bibleview-js/src/components/OSIS/Q.vue
+++ b/app/bibleview-js/src/components/OSIS/Q.vue
@@ -15,7 +15,7 @@
   - If not, see http://www.gnu.org/licenses/.
   -->
 
-<template><span :class="{redLetters: config.showRedLetters && isJesus}">{{ displayMarker }}<slot/></span></template>
+<template><span class="q" :class="{redLetters: config.showRedLetters && isJesus}">{{ displayMarker }}<slot/></span></template>
 
 <script setup lang="ts">
 import {checkUnsupportedProps, useCommon} from "@/composables";
@@ -41,7 +41,7 @@ const displayMarker = computed(() => {
 const {config} = useCommon();
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 $redLetters: rgb(215, 13, 13);
 .redLetters {
   color: $redLetters !important;
diff --git a/app/bibleview-js/src/components/OSIS/Reference.vue b/app/bibleview-js/src/components/OSIS/Reference.vue
index 504664cd86..e6790ce144 100644
--- a/app/bibleview-js/src/components/OSIS/Reference.vue
+++ b/app/bibleview-js/src/components/OSIS/Reference.vue
@@ -90,7 +90,7 @@ function openLink(event: MouseEvent, url: string) {
 
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/common.scss";
 
 .reference {
diff --git a/app/bibleview-js/src/components/OSIS/Row.vue b/app/bibleview-js/src/components/OSIS/Row.vue
index c901f15764..c43720ef4b 100644
--- a/app/bibleview-js/src/components/OSIS/Row.vue
+++ b/app/bibleview-js/src/components/OSIS/Row.vue
@@ -25,6 +25,6 @@ import {useCommon} from "@/composables";
 useCommon()
 </script>
 
-<style scoped>
+<style>
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/Seg.vue b/app/bibleview-js/src/components/OSIS/Seg.vue
index 44bceae07d..2a962bab29 100644
--- a/app/bibleview-js/src/components/OSIS/Seg.vue
+++ b/app/bibleview-js/src/components/OSIS/Seg.vue
@@ -29,7 +29,7 @@ const isOtPassage = computed(() => props.type === "otPassage");
 useCommon();
 </script>
 
-<style scoped>
+<style>
 
 .otPassage {
     font-style: italic;
diff --git a/app/bibleview-js/src/components/OSIS/Table.vue b/app/bibleview-js/src/components/OSIS/Table.vue
index b6fe6b901e..861a5fb127 100644
--- a/app/bibleview-js/src/components/OSIS/Table.vue
+++ b/app/bibleview-js/src/components/OSIS/Table.vue
@@ -27,6 +27,6 @@ checkUnsupportedProps(props, "border", ["1", "0"])
 useCommon();
 </script>
 
-<style scoped>
+<style>
 
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/Title.vue b/app/bibleview-js/src/components/OSIS/Title.vue
index a43f7967f7..6761564dfb 100644
--- a/app/bibleview-js/src/components/OSIS/Title.vue
+++ b/app/bibleview-js/src/components/OSIS/Title.vue
@@ -56,7 +56,7 @@ const show = computed(() =>
 const isSubTitle = computed(() => props.type === "sub");
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .listStyle .titleStyle {
   margin-inline-start: -1em;
 }
diff --git a/app/bibleview-js/src/components/OSIS/TransChange.vue b/app/bibleview-js/src/components/OSIS/TransChange.vue
index fb6c92d3d5..cfa18dc4dc 100644
--- a/app/bibleview-js/src/components/OSIS/TransChange.vue
+++ b/app/bibleview-js/src/components/OSIS/TransChange.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <span v-if="show" :class="{nonCanonical: config.makeNonCanonicalItalic && isNonCanonical}"><slot/></span>
+  <span v-if="show" class="trans-change" :class="{nonCanonical: config.makeNonCanonicalItalic && isNonCanonical}"><slot/></span>
 </template>
 
 <script setup lang="ts">
@@ -31,7 +31,7 @@ const isNonCanonical = computed(() => props.type?.toLowerCase() === "added");
 const show = computed(() => (!isNonCanonical.value) || (isNonCanonical.value && config.showNonCanonical));
 </script>
 
-<style scoped>
+<style>
 .nonCanonical {
     font-style: italic;
 }
diff --git a/app/bibleview-js/src/components/OSIS/W.vue b/app/bibleview-js/src/components/OSIS/W.vue
index caf82dd9e2..6481ec7ac8 100644
--- a/app/bibleview-js/src/components/OSIS/W.vue
+++ b/app/bibleview-js/src/components/OSIS/W.vue
@@ -18,13 +18,13 @@
 <template>
   <template v-if="showStrongsSeparately">
     <template v-if="(showStrongs && lemma) && (config.showMorphology && morph)">
-      <slot/><span class="base skip-offset">&nbsp;<a :class="{isHighlighted}" class="strongs highlight-transition" :href="formatLink(lemma)" @click.prevent="goToLink($event, formatLink(lemma))">{{formatName(lemma)}}</a>/<a :class="{isHighlighted}" class="morph highlight-transition" :href="formatLink(morph)" @click.prevent="goToLink($event, formatLink(morph))">{{formatName(morph)}}</a></span>
+      <slot/><span class="w-base skip-offset">&nbsp;<a :class="{isHighlighted}" class="strongs highlight-transition" :href="formatLink(lemma)" @click.prevent="goToLink($event, formatLink(lemma))">{{formatName(lemma)}}</a>/<a :class="{isHighlighted}" class="morph highlight-transition" :href="formatLink(morph)" @click.prevent="goToLink($event, formatLink(morph))">{{formatName(morph)}}</a></span>
     </template>
     <template v-else-if="(showStrongs && lemma) && (!config.showMorphology || !morph)">
-      <slot/><span class="base skip-offset">&nbsp;<a class="strongs highlight-transition" :class="{isHighlighted}" :href="formatLink(lemma)" @click.prevent="goToLink($event, formatLink(lemma))">{{formatName(lemma)}}</a></span>
+      <slot/><span class="w-base skip-offset">&nbsp;<a class="strongs highlight-transition" :class="{isHighlighted}" :href="formatLink(lemma)" @click.prevent="goToLink($event, formatLink(lemma))">{{formatName(lemma)}}</a></span>
     </template>
     <template v-else-if="(!showStrongs || !lemma) && (config.showMorphology && morph)">
-      <slot/><span class="base skip-offset">&nbsp;<a class="morph highlight-transition" :href="formatLink(morph)" :class="{isHighlighted}" @click.prevent="goToLink($event, formatLink(morph))">{{formatName(morph)}}</a></span>
+      <slot/><span class="w-base skip-offset">&nbsp;<a class="morph highlight-transition" :href="formatLink(morph)" :class="{isHighlighted}" @click.prevent="goToLink($event, formatLink(morph))">{{formatName(morph)}}</a></span>
     </template>
     <template v-else><slot/></template>
   </template>
@@ -111,7 +111,7 @@ const showStrongsSeparately = computed(() => !exportMode.value && config.strongs
 
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import "~@/common.scss";
 
 .link-style {
@@ -123,7 +123,7 @@ const showStrongsSeparately = computed(() => !exportMode.value && config.strongs
   }
 }
 
-.base {
+.w-base {
   font-size: 0.6em;
   text-decoration: none;
   color: gray;
diff --git a/app/bibleview-js/src/components/OpenAllLink.vue b/app/bibleview-js/src/components/OpenAllLink.vue
index 519be171c4..2069c4bda6 100644
--- a/app/bibleview-js/src/components/OpenAllLink.vue
+++ b/app/bibleview-js/src/components/OpenAllLink.vue
@@ -39,7 +39,7 @@ const openAllLink = computed(() => {
 const {strings} = useCommon();
 </script>
 
-<style scoped>
+<style>
 .open-all {
     padding-top: 1em;
     text-align: right;
diff --git a/app/bibleview-js/src/components/VerseNumber.vue b/app/bibleview-js/src/components/VerseNumber.vue
index 8f8ff5b122..3269d670f5 100644
--- a/app/bibleview-js/src/components/VerseNumber.vue
+++ b/app/bibleview-js/src/components/VerseNumber.vue
@@ -32,7 +32,7 @@ const exportMode = inject(exportModeKey, ref(false));
 const {sprintf, strings} = useCommon();
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import "~@/common.scss";
 
 .verseNumber {