second and final part of syncing both themes with toolkit windows theme changes in...

[themes.git] / EarlyBlue / global / narrate.css

diff --git a/EarlyBlue/global/narrate.css b/EarlyBlue/global/narrate.css
index 3aa8a8a6e315d27664e113dea1d42eadf9cd7a72..4514eff35e2df55b771fe21aede0b30e7a621a0c 100644 (file)
--- 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;
+}