X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=EarlyBlue%2Fglobal%2Fnarrate.css;h=4514eff35e2df55b771fe21aede0b30e7a621a0c;hp=3aa8a8a6e315d27664e113dea1d42eadf9cd7a72;hb=a9f6369d5cebd3c329b993d57e73bcf30fffd2cd;hpb=7729765cff651b4f095a18d7b76fa5b112150216

diff --git a/EarlyBlue/global/narrate.css b/EarlyBlue/global/narrate.css
index 3aa8a8a6..4514eff3 100644
--- a/EarlyBlue/global/narrate.css
+++ b/EarlyBlue/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, width 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;
+}