Hide highlighting option fix

simjanos-dev · Dec 23, 2024 · a7f72b8 · a7f72b8
1 parent cd2172f
commit a7f72b8
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 66 deletions.
diff --git a/resources/sass/Text/InteractiveTextStyling.scss b/resources/sass/Text/InteractiveTextStyling.scss
@@ -9,6 +9,9 @@
         height: auto;
         line-height: 100%;
 
+        .rubyword {
+            pointer-events: none;
+        }
 
         &.space-after {
             margin-right: 4px;
@@ -40,7 +43,6 @@
                 font-weight: var(--interactive-text-wordLevel#{$wordLevel}-weight);
                 font-style: var(--interactive-text-wordLevel#{$wordLevel}-style);
 
-                // wavy underline
                 // wavy underline
                 text-decoration: var(--interactive-text-wordLevel#{$wordLevel}-text-decoration) var(--interactive-text-wordLevel#{$wordLevel}-border-color) wavy var(--interactive-text-wordLevel#{$wordLevel}-wave-width);
                 text-decoration-skip-ink: none;
@@ -50,11 +52,18 @@
                 background-color: var(--v-readerWordSelection-base);
                 color: var(--v-highlightedWordText-base);
             }
+
+            &.no-highlight:not([stage="0"]):not([stage="1"]):not(.highlighted):not(:hover) {
+                background-color: unset;
+                color: unset;
+                border: unset;
+                text-decoration: none;
+            }
         }
 
         // phrases
         @for $phraseLevel from -7 through 0 {
-            &[phrasestage="#{$phraseLevel}"] {
+            &.phrase[phrasestage="#{$phraseLevel}"] {
                 // text color
                 color: var(--interactive-text-phraseLevel#{$phraseLevel}-color);
                 background-color: color-mix(in srgb, var(--interactive-text-phraseLevel#{$phraseLevel}-background-color), transparent var(--interactive-text-phraseLevel#{$phraseLevel}-background-transparency));
@@ -96,8 +105,17 @@
                     margin-right: 0px;
                     padding-right: 4px;
                 }
+
+                &.no-highlight:not([phrasestage="0"]):not(.highlighted):not(:hover) {
+                    background-color: unset;
+                    color: unset;
+                    border: unset;
+                    text-decoration: none;
+                }
             }
 
+            &.phrase.highlighted,
+            &.phrase:hover,
             &.highlighted, &:hover{
                 background-color: var(--v-readerWordSelection-base);
                 border-color: var(--v-readerWordSelection-base);
@@ -129,7 +147,7 @@
             }
 
             @for $phraseLevel from -7 through 0 {
-                &[phrase-stage="#{$phraseLevel}"] {
+                &.phrase[phrasestage="#{$phraseLevel}"] {
                     &.phrase-start {
                         padding-left: var(--interactive-text-phraseLevel#{$phraseLevel}-spaceless-language-padding-left) !important;
                     }
@@ -141,4 +159,50 @@
             }
         }
     }
+
+    @for $wordLevel from -7 through 2 {
+        &[stage="#{$wordLevel}"] {
+            padding-left: var(--interactive-text-wordLevel#{$wordLevel}-spaceless-language-padding-left) !important;
+            padding-right: var(--interactive-text-wordLevel#{$wordLevel}-spaceless-language-padding-right) !important;
+        }
+    }
+
+    @for $phraseLevel from -7 through 0 {
+        &.phrase[phrasestage="#{$phraseLevel}"] {
+            &.phrase-start {
+                padding-left: var(--interactive-text-phraseLevel#{$phraseLevel}-spaceless-language-padding-left) !important;
+            }
+
+            &.phrase-end {
+                padding-right: var(--interactive-text-phraseLevel#{$phraseLevel}-spaceless-language-padding-right) !important;
+            }
+        }
+    }
+
+    &.plain-text-mode .word, &.plain-text-mode .word:hover {
+        margin-left: none !important;
+        margin-right: none !important;
+        padding-left: none !important;
+        padding-right: none !important;
+        background-color: rgba(0, 0, 0, 0) !important;
+        color: var(--v-text-base) !important;
+        border: none !important;
+        cursor: default !important;
+        user-select: text !important;
+
+        &[stage="-7"], &[stage="-6"], &[stage="-5"], &[stage="-4"], 
+        &[stage="-3"], &[stage="-2"], &[stage="-1"], &[stage="2"], 
+        &.phrase, &.phrase-start, &.phrase-end, &.highlighted, &:hover, 
+        &.space-after, &.space-after.highlighted, &.space-after.phrase {
+            margin-left: 0px !important;
+            margin-right: 0px !important;
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+            background-color: rgba(0, 0, 0, 0) !important;
+            color: var(--v-text-base) !important;
+            border: none !important;
+            cursor: default !important;
+            user-select: text !important;
+        }
+    }
 }
diff --git a/resources/sass/Text/TextBlockGroup.scss b/resources/sass/Text/TextBlockGroup.scss
@@ -1,47 +1,47 @@
-// .anki-snackbar {
-//     width: 320px;
+.anki-snackbar {
+    width: 320px;
 
-//     .v-snack__wrapper {
-//         align-items: flex-start;
-//         min-width: 320px;
-//         margin: 0px;
+    .v-snack__wrapper {
+        align-items: flex-start;
+        min-width: 320px;
+        margin: 0px;
 
-//         .v-snack__content {
-//             min-width: 320px;
-//             padding: 0px;
-//             color: var(--v-text-base);
+        .v-snack__content {
+            min-width: 320px;
+            padding: 0px;
+            color: var(--v-text-base);
 
-//             .v-btn span {
-//                 color: var(--v-text-base);
-//             }
-//         }
-
-//         .snackbar-title {
-//             line-height: 36px;
-//         }
-//     }
-// }
+            .v-btn span {
+                color: var(--v-text-base);
+            }
+        }
+
+        .snackbar-title {
+            line-height: 36px;
+        }
+    }
+}
 
 .text-block-group {
     overflow-y: hidden !important;
     overflow-x: visible !important;
 
-//     .subtitle-timestamp {
-//         background-color: var(--v-primary-base);
-//         color: white;
-//         border-radius: 30px;
-//         width: 72px;
-//         text-align: center;
-//         font-size: 15px;
-//         font-weight: bold;
-
-//         &.hidden {
-//             opacity: 0;
-//             height: 0px;
-//             padding: 0px !important;
-//             pointer-events: none;
-//         }
-//     }
+    .subtitle-timestamp {
+        background-color: var(--v-primary-base);
+        color: white;
+        border-radius: 30px;
+        width: 72px;
+        text-align: center;
+        font-size: 15px;
+        font-weight: bold;
+
+        &.hidden {
+            opacity: 0;
+            height: 0px;
+            padding: 0px !important;
+            pointer-events: none;
+        }
+    }
 
     .text-block {
         background-color: var(--v-foreground-base);
@@ -318,31 +318,4 @@
 //             }
 //         }
 //     }
-
-//     &.plain-text-mode .word, &.plain-text-mode .word:hover {
-//         margin-left: none !important;
-//         margin-right: none !important;
-//         padding-left: none !important;
-//         padding-right: none !important;
-//         background-color: rgba(0, 0, 0, 0) !important;
-//         color: var(--v-text-base) !important;
-//         border: none !important;
-//         cursor: default !important;
-//         user-select: text !important;
-
-//         &[stage="-7"], &[stage="-6"], &[stage="-5"], &[stage="-4"], 
-//         &[stage="-3"], &[stage="-2"], &[stage="-1"], &[stage="2"], 
-//         &.phrase, &.phrase-start, &.phrase-end, &.highlighted, &:hover, 
-//         &.space-after, &.space-after.highlighted, &.space-after.phrase {
-//             margin-left: 0px !important;
-//             margin-right: 0px !important;
-//             padding-left: 0px !important;
-//             padding-right: 0px !important;
-//             background-color: rgba(0, 0, 0, 0) !important;
-//             color: var(--v-text-base) !important;
-//             border: none !important;
-//             cursor: default !important;
-//             user-select: text !important;
-//         }
-//     }
 }