Improve css scoping so that it is easier to make css customization vi…

…a modules
AndBible · Aug 29, 2024 · 0c5bfb7 · 0c5bfb7
1 parent bbeaca1
commit 0c5bfb7
Show file tree

Hide file tree

Showing 39 changed files with 48 additions and 52 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;