X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fglobal%2Fnarrate.css;h=8a44e78e2507881f9c306cc58e00374d64419eca;hp=3aa8a8a6e315d27664e113dea1d42eadf9cd7a72;hb=987dae1b58dde80be3e64488d7da121274fa8592;hpb=c81788079a875cdd28e8eb8b1f0711a3b00d69dd

diff --git a/LCARStrek/global/narrate.css b/LCARStrek/global/narrate.css
index 3aa8a8a6..8a44e78e 100644
--- a/LCARStrek/global/narrate.css
+++ b/LCARStrek/global/narrate.css
@@ -1,3 +1,8 @@
+.narrating {
+  position: relative;
+  z-index: 1;
+}
+
 body.light .narrating {
   background-color: #ffc;
 }
@@ -9,3 +14,33 @@ body.sepia .narrating {
 body.dark .narrating {
   background-color: #242424;
 }
+
+.narrate-word-highlight {
+  position: absolute;
+  display: none;
+  transform: translate(-50%, calc(-50% - 2px));
+  z-index: -1;
+  border-bottom-style: solid;
+  border-bottom-width: 7px;
+  transition: left 0.1s ease;
+}
+
+.narrating > .narrate-word-highlight {
+  display: inline-block;
+}
+
+.narrate-word-highlight.newline {
+  transition: none;
+}
+
+body.light .narrate-word-highlight {
+  border-bottom-color: #ffe087;
+}
+
+body.sepia .narrate-word-highlight {
+  border-bottom-color: #bdb5a5;
+}
+
+body.dark .narrate-word-highlight {
+  border-bottom-color: #6f6f6f;
+}