LCARStrek/global/narrate.css

   1 .narrating {
   2   position: relative;
   3   z-index: 1;
   4 }
   5
   6 body.light .narrating {
   7   background-color: #ffc;
   8 }
   9
  10 body.sepia .narrating {
  11   background-color: #e0d7c5;
  12 }
  13
  14 body.dark .narrating {
  15   background-color: #242424;
  16 }
  17
  18 .narrate-word-highlight {
  19   position: absolute;
  20   display: none;
  21   transform: translate(-50%, calc(-50% - 2px));
  22   z-index: -1;
  23   border-bottom-style: solid;
  24   border-bottom-width: 7px;
  25   transition: left 0.1s ease, width 0.1s ease;
  26 }
  27
  28 .narrating > .narrate-word-highlight {
  29   display: inline-block;
  30 }
  31
  32 .narrate-word-highlight.newline {
  33   transition: none;
  34 }
  35
  36 body.light .narrate-word-highlight {
  37   border-bottom-color: #ffe087;
  38 }
  39
  40 body.sepia .narrate-word-highlight {
  41   border-bottom-color: #bdb5a5;
  42 }
  43
  44 body.dark .narrate-word-highlight {
  45   border-bottom-color: #6f6f6f;
  46 }