@internetarchive/bookreader 5.0.0-5-multiple-files → 5.0.0-50

package/src/assets/icons/close-circle-dark.svg

@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6 0c3.3137085 0 6 2.6862915 6 6s-2.6862915 6-6 6-6-2.6862915-6-6 2.6862915-6 6-6zm-2.3406945 2.96359116c-.19486814-.13499605-.46429254-.1157109-.63785889.05785545-.19526215.19526215-.19526215.51184463 0 .70710678l2.27155339 2.27144661-2.20567981 2.20557302-.05785545.06924789c-.13499605.19486814-.1157109.46429254.05785545.6378589.19526215.19526214.51184464.19526214.70710679 0l2.20557302-2.20567981 2.20557302 2.20567981.06924789.05785545c.19486814.13499605.46429254.1157109.6378589-.05785545.19526214-.19526215.19526214-.51184464 0-.70710679l-2.20567981-2.20557302 2.27155339-2.27144661.05785545-.06924789c.13499605-.19486814.1157109-.46429254-.05785545-.63785889-.19526215-.19526215-.51184463-.19526215-.70710678 0l-2.27144661 2.27155339-2.27144661-2.27155339z" fill="#222" fill-rule="evenodd"/></svg>

package/src/assets/icons/magnify-minus.svg

@@ -1,16 +1,12 @@
 <svg
-  width="18"
-  height="18"
-  viewBox="0 0 18 18"
+  viewBox="0 0 100 100"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   aria-labelledby="magnify-minusTitleID magnify-minusDescID"
 >
   <title id="magnify-minusTitleID">Zoom out</title>
   <desc id="magnify-minusDescID">An icon of a minus symbol</desc>
-  <g fill="none" fill-rule="evenodd">
-    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
-    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
-    <path d="m10 7.75v-1.5h-6v1.5z" fill="#fff" fill-rule="nonzero" />
+  <g fill="#fff" fill-rule="evenodd">
+    <path d="m2.3239824 87.3815869 25.8938394-23.8143095c-4.5929593-6.6937643-6.889439-14.1059452-6.889439-22.2365428 0-7.1360431 1.7567382-13.7186647 5.2702146-19.7478649 3.5134763-6.0292002 8.2852035-10.8003118 14.3151815-14.31333499 6.029978-3.51302314 12.6134488-5.26953471 19.7504125-5.26953471s13.7204346 1.75651157 19.7504126 5.26953471c6.029978 3.51302319 10.8017051 8.28413479 14.3151815 14.31333499 3.5134763 6.0292002 5.2702145 12.6118218 5.2702145 19.7478649s-1.7567382 13.7324143-5.2702145 19.7891137c-3.5134764 6.0566994-8.2852035 10.8415607-14.3151815 14.3545838-6.029978 3.5130232-12.6134489 5.2695347-19.7504126 5.2695347-8.5762743 0-16.3217363-2.5723212-23.2363861-7.7169637l-26.3063807 24.2302349c-1.27200216 1.1618413-2.76631826 1.742762-4.48294825 1.742762-1.826641 0-3.38971397-.6496687-4.68921892-1.949006s-1.94925743-2.8622087-1.94925743-4.688614c0-1.9364022.7746608-3.5955208 2.3239824-4.9773557zm58.3436469-19.9162976c7.1919692 0 13.3331041-2.5585716 18.4234048-7.6757149s7.635451-11.2712357 7.635451-18.4622772-2.5451503-13.3313843-7.635451-18.4210284-11.2314356-7.6344661-18.4234048-7.6344661-13.3331042 2.544822-18.4234049 7.6344661-7.635451 11.2299869-7.635451 18.4210284 2.5451503 13.3451339 7.635451 18.4622772 11.2314357 7.6757149 18.4234049 7.6757149zm-14.9374313-21.3256316h31.2878163v-9.5422233h-31.2878163z"/>
   </g>
 </svg>

package/src/assets/icons/magnify-plus.svg

@@ -1,17 +1,13 @@
 <svg
-  width="18"
-  height="18"
-  viewBox="0 0 18 18"
+  viewBox="0 0 100 100"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   aria-labelledby="magnify-plusTitleID magnify-plusDescID"
 >
   <title id="magnify-plusTitleID">Zoom in</title>
   <desc id="magnify-plusDescID">An icon of a plus symbol</desc>
-  <g fill="none" fill-rule="evenodd">
-    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
-    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
-    <path d="m7.75 4v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25v-2.25z" fill="#fff" fill-rule="nonzero" />
+  <g fill="#fff" fill-rule="evenodd">
+    <path d="m2.40305276 87.4017263 25.81133064-23.7730295c-4.5356618-6.5723551-6.8034928-14.000283-6.8034928-22.2837838 0-7.1236734 1.7429868-13.6948847 5.2289603-19.7136338 3.4859736-6.0187491 8.2577006-10.7953163 14.3151813-14.32970144 6.0574806-3.53438517 12.6547027-5.30157776 19.7916662-5.30157776 10.8429591 0 20.0964884 3.85236545 27.760588 11.5570964 7.6640996 7.7047309 11.4950036 16.9684802 11.4927136 27.791248 0 10.8799585-3.8309059 20.1574336-11.4927136 27.8324254-7.6618077 7.6749917-16.915337 11.5124876-27.760588 11.5124876-8.6312796 0-16.431747-2.5678624-23.4014021-7.7035871l-26.1413636 24.188234c-1.21699671 1.2147305-2.73881553 1.8220957-4.56545649 1.8220957s-3.3897139-.6485425-4.68921882-1.9456276c-1.29950493-1.297085-1.94925739-2.8572473-1.94925739-4.6804867 0-1.8781426.80216353-3.5343852 2.4064906-4.9687279zm58.34020784-19.878343c7.1369635 0 13.264347-2.5678623 18.3821503-7.7035871 5.1178034-5.1357247 7.676705-11.2928753 7.676705-18.4714518s-2.5589016-13.3082755-7.676705-18.3890972c-5.1178033-5.0808217-11.2451868-7.6212325-18.3821503-7.6212325-7.2469746 0-13.4156121 2.5404108-18.5059127 7.6212325s-7.6354509 11.2105207-7.6354509 18.3890972 2.5589016 13.3357271 7.676705 18.4714518c5.1178033 5.1357248 11.2726895 7.7035871 18.4646586 7.7035871zm-13.3594607-21.8685793h10.206958v10.1879511h7.2194718v-10.1879511h10.206958v-7.206028h-10.206958v-10.187951h-7.2194718v10.187951h-10.206958z"/>
   </g>
 
 </svg>

package/src/assets/icons/voice.svg

@@ -0,0 +1 @@
+<svg height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="nonzero"><path d="m38.1709541 1.16927276c-19.3063792 2.35749181-30.77194642 17.49896974-28.52613175 35.69759164l.13778264.9919913c1.32289251 8.56612 5.97731071 16.3013047 12.66398421 21.5397034l.4377858.3337777-.8258922.2818912c-14.58776328 5.1516606-22.0584828 17.3847028-22.0584828 36.1118649 0 1.7258899 1.39911016 3.125 3.125 3.125h75c1.7258898 0 3.125-1.3991101 3.125-3.125l-.0091512-1.1274701c-.2805982-17.166151-7.012296-28.729242-19.9504605-34.1742942l-.7528883-.3076168.3448755-.2543479c4.6971412-3.6170055 8.2730972-8.807671 10.7017508-15.494037l.1033476-.3442854c.358088-1.4990563-.4382762-3.0639387-1.9085796-3.6353549l-12.6163943-2.9594748 15.5382502-5.2151308c1.4455508-.7155993 2.1089731-2.4138059 1.5313094-3.9197953l-.4286041-1.1171368c-7.4117992-18.89492742-19.4315183-27.95356137-35.6325014-26.40787614zm29.1727959 27.11931404-14.3051523 7.0850707-.3458164.1975825c-2.0674045 1.3537943-1.8055096 4.5808459.6002149 5.5158026l11.2601288 4.3765442-.0446544.1053935c-2.9998765 6.5205267-7.382434 10.7639749-13.2036694 12.8974938-2.9669838 1.087418-2.6299355 5.3880614.4702287 5.9999873l.9102021.1897523c14.1147108 3.1023497 21.4110943 12.2993394 22.233518 28.3448731h-68.59375l.06180046-.9883469c1.14099717-16.5385163 9.43185134-25.5919672 25.33818054-27.9334892 3.1343099-.4613921 3.6716909-4.7565726.7476649-5.9759387-8.9190789-3.7193999-15.42583-12.285691-16.6248777-22.0019293-1.8277808-14.8111472 7.2466638-26.79489813 22.9989376-28.71929813 12.5036466-1.191884 21.828781 5.37445053 28.2768952 20.37896473z"/><path d="m76.5037126 22.4247766c.9396111-1.4476971 2.8749067-1.8595821 4.3226037-.9199711 6.1870578 4.0156385 9.4236837 9.4774446 9.4236837 16.1212874s-3.2366259 12.105649-9.4236837 16.1212875c-1.447697.939611-3.3829926.527726-4.3226037-.9199711s-.527726-3.3829927.9199711-4.3226038c4.4796088-2.9074384 6.5763163-6.4456323 6.5763163-10.8787126 0-4.4330802-2.0967075-7.9712741-6.5763163-10.8787125-1.4476971-.9396111-1.8595822-2.8749067-.9199711-4.3226038z"/><path d="m86.6767674 19.1839853c1.0725964-1.3521215 3.0382187-1.5787214 4.3903402-.506125 6.0793735 4.82258 9.1828924 11.2235876 9.1828924 18.9482326 0 7.7246451-3.1035189 14.1256527-9.1828924 18.9482327-1.3521215 1.0725964-3.3177438.8459965-4.3903402-.506125-1.0725964-1.3521216-.8459966-3.3177439.506125-4.3903403 4.5872931-3.6389585 6.8171076-8.2379508 6.8171076-14.0517674 0-5.8138165-2.2298145-10.4128088-6.8171076-14.0517673-1.3521216-1.0725964-1.5787214-3.0382187-.506125-4.3903403z"/></g></svg>

package/src/css/BookReader.scss

@@ -9,7 +9,6 @@ $brColorThemeBlue2: #4990E2;
 $brColorThemeBlue3: rgb(74,144,226);
 $brColorThemeBlueDarker: rgb(36,94,131);
 $brColorDarkGreyBg: #333;
-// $brColorMainBg: #3a3b3b;
 $brColorMainBg: black;
 
 $brColorBirdBook: #FEFDEB;
@@ -17,18 +16,10 @@ $brColorPlaceholderBg: $brColorBirdBook;
 
 // "Controls" are the navbar and toolbar
 
-$brColorControlsLightFont: black;
-$brColorControlsDarkFont: white;
-$brColorControlsDarkBg: $brColorDarkGreyBg; // TODO
 $brColorControlsLightBg: white;
 $brColorLightBorder: #979797;
 $brColorDarkBorder: #4D4D4D;
 
-$brColorMobileMenuBg: rgb(247,247,247);
-$brColorMobileMenuBg: white;
-$brColorMobileMenuTitle: black;
-$brColorMobileMenuLink: black;
-
 $brNavHeightDesktop: 34px; //40px; //34px;
 $brNavHeightMobile: $brNavHeightDesktop;
 
@@ -53,10 +44,7 @@ $mediumBlue: #428bca;
 $lightBlue: #adaedc;
 $controlsText: $white;
 $controlsBG: $gray20;
-$iconFill: $white;
-$iconActiveFill: $gray20;
 $iconStroke: $white;
-$iconActiveStroke: $gray20;
 $tooltipBG: $gray20;
 $activeButtonBG: $white;
 $controlsBorder: $gray13;

package/src/css/_BRComponent.scss

@@ -2,7 +2,7 @@
  * Hide modal-manager that loads item-navigator-modal 
  * loading bookmarks related alert messages 
  */
-#item-navigator-modal {
+modal-manager[mode="closed"] {
   display: none
 }
 

package/src/css/_BRmain.scss

@@ -7,37 +7,13 @@
 
 
   /* Some helper functional css utilities  */
-  .tl { text-align: left; }
-  .tc, .BRtc { text-align: center; }
-  .tr { text-align: right; }
-  .ph10 { padding-left: 10px; padding-right: 10px; }
-  .mv20 { margin-top: 20px; margin-bottom: 20px; }
-  .mt20 { margin-top: 20px; }
-  .b { font-weight: bold; }
-  .i { font-style: italic; }
-  .smaller { font-size: .8em; }
   .larger { font-size: 1.2em; }
-  .loader {
-    background: url(images/loading.gif) no-repeat 50%;
-    height: 16px;
-    min-width: 16px;
-  }
 
   /* Desktop-only */
   @media (min-width: ($brBreakPointMobile + 1)) {
-    .mobile-only { display: none; }
-    .pv20-lg { padding-top: 20px; padding-bottom: 20px; }
-    .pv50-lg { padding-top: 50px; padding-bottom: 50px; }
     .mv20-lg { margin-top: 20px; margin-bottom: 20px; }
   }
 
-  @media (max-width: $brBreakPointMobile) {
-    .desktop-only { display: none; }
-  }
-  @media (min-width: $brBreakPointMobile) and (max-width: $brBreakPointMid) {
-    .hide-md { display: none; }
-  }
-
   /* Element-level rules */
   h3 {
     font-size: 20px;
@@ -67,6 +43,8 @@
   position: relative;
   overflow: hidden;
   background-color: $brColorMainBg;
+
+  contain: strict;
 }
 
 .BRcontainer {
@@ -90,6 +68,23 @@
   border: 2px solid #999;
   z-index: $brZindexPopup;
   color: $gray13;
+
+  .close-popup {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30px;
+    width: 30px;
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+
+    .icon.icon-close-dark {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+    }
+  }
 }
 
 .BRprogressbar {

package/src/css/_BRnav.scss

@@ -1,6 +1,7 @@
 /**
  * BRnav is the bottom control bar (eg footer)
  */
+@use "sass:math";
 
 @mixin pseudoElementLayer {
   content: "";
@@ -117,7 +118,7 @@
   display: flex;
   justify-content: center;
   margin: 5px;
-  padding: 0 ($brNavHeightMobile / 4);
+  padding: 0 math.div($brNavHeightMobile, 4);
   border-radius: 4px;
   align-self: center;
   height: $toolbarHeight;
@@ -126,10 +127,6 @@
   // Default
   @include brNavDark;
 
-  &.BRnavEmbed {
-    @include brNavLight;
-  }
-
   /* Full mobile styles */
   @media (max-width: $brBreakPointMobile) {
     .BRbodyMobileNavEnabled &,
@@ -222,25 +219,6 @@
   flex-direction: row;
   border-top: 1px solid $controlsBorder;
 
-  &.BRnavEmbed {
-    padding-top: 0;
-    height: auto;
-    align-items: center;
-
-    .BRembedreturn {
-      flex: 1 auto;
-      overflow-x: hidden;
-    }
-    .logo {
-      display: inline-block;
-      width: 25px;
-      height: 25px;
-      margin: 0 10px;
-      background: transparent url(images/icon_home.svg) no-repeat center center;
-      background-size: contain;
-    }
-  }
-
   /* Theming */
 
   // Default
@@ -263,7 +241,7 @@
 .BRpager.ui-slider  {
   position: relative;
   height: 8px;
-  top: ($brNavHeightDesktop / 2) - 4px;
+  top: math.div($brNavHeightDesktop, 2) - 4px;
   box-sizing: content-box;
   border-radius: 10px;
   cursor: pointer;
@@ -365,7 +343,7 @@
   }
   .BRpager.ui-slider {
     height: 10px;
-    top: ($brNavHeightMobile / 2) - 5px;
+    top: math.div($brNavHeightMobile, 2) - 5px;
   }
 }
 

package/src/css/_BRpages.scss

@@ -17,6 +17,28 @@
   cursor: unset;
 }
 
+.br-mode-1up__root {
+  display: block;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  // This is a performance optimization that basically tells the browser "the size
+  // of this element doesn't depend on the size of its children".
+  contain: strict;
+
+  .br-mode-1up__world {
+    position: absolute;
+    transform-origin: 0 0;
+  }
+  
+  .br-mode-1up__visible-world {
+    position: absolute;
+    transform-origin: 0 0;
+  }
+}
+
 .BRpagecontainer {
   position: relative;
   overflow: hidden;
@@ -48,6 +70,19 @@
   }
 }
 
+svg.BRPageLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+// Hides page layers during page flip animation
+.BRpageFlipping .BRPageLayer {
+  display: none;
+}
+
 .BRbookcover {
   position: absolute;
   background-image: none;

package/src/css/_BRsearch.scss

@@ -25,16 +25,31 @@
 }
 
 #{$brScope} {
-  .BookReaderSearchHilite {
-    opacity: 0.20;
-    filter: alpha(opacity = 20);
-    background-color: #0000ff;
-    position: absolute;
-    /* z-index is important */
-    z-index: $brZindexBase + 3;
+  // FIXME: .ttsHiliteLayer should probably not be in this file,
+  // but they appear the same in the UI.
+  .searchHiliteLayer, .ttsHiliteLayer {
+    pointer-events: none;
+
+    rect {
+      // Note: Can't use fill-opacity ; safari inexplicably applies that to
+      // the outline as well
+      fill: rgba(0, 0, 255, 0.2);
+    }
+  }
+
+  .searchHiliteLayer rect {
+    animation: highlightFocus 600ms 1 reverse;
+    stroke: blue;
+    stroke-width: 4px;
 
-    animation: hiliteFadeIn .2s;
+    // Sass for loop for nth-child animation delay
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 50}ms;
+      }
+    }
   }
+
   .BRchapter, .BRsearch {
     position: absolute;
     bottom: 0;  /* Relative to nav line */
@@ -145,211 +160,6 @@
     }
   }
 
-  .BRbooksearch.mobile {
-    position: relative;
-    top: 0;
-    display: flex;
-    flex-direction: row;
-
-    .BRsearchInput {
-      -webkit-appearance: none;
-      position: relative;
-      min-width: 100px;
-      float: left;
-      font-size: $brFontSizeBase;
-      width: 150px;
-      height: 30px;
-      border: 1px solid $brColorLightBorder;
-      flex: 1;
-      border-radius: 0;
-    }
-    .BRsearchSubmit {
-      width: 30px;
-      height: 30px;
-      border: none;
-      background-color: $brColorThemeblue;
-      background-image: url("images/icon_search_button.svg");
-      background-repeat: no-repeat;
-      background-position: center center;
-
-      text-align: center;
-      color: white;
-      overflow: hidden;
-      box-sizing: border-box;
-      display: inline-block;
-    }
-  }
-
-  #BRsearch_tray {
-    --menuSliderBg: #151515;
-    --primaryTextColor: #fff;
-    --activeButtonBg: #282828;
-    --searchResultText: #adaedc;
-    --searchResultBg: #272958;
-    --searchResultBorder: #fff;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: 15px 10px;
-    overflow-y: auto;
-    font-size: 14px;
-    color: var(--primaryTextColor);
-    background: var(--menuSliderBg);
-
-    header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    h3 {
-      padding: 0;
-      margin: 0 10px 0 0;
-      font-size: 20px;
-    }
-
-    header p {
-      display: none;
-      padding: 0;
-      margin: 0;
-      font-size: 12px;
-      font-weight: bold;
-      font-style: italic;
-    }
-    header p.visible {
-      display: block;
-    }
-
-    header div {
-      display: flex;
-      align-items: baseline;
-    }
-
-    a.close {
-      justify-self: end;
-    }
-
-    fieldset {
-      padding: 20px 0 10px 0;
-      border: none;
-    }
-
-    [type="checkbox"] {
-      display: none;
-    }
-
-    #all_files {
-      display: none;
-      + label {
-        display: none;
-      }
-    }
-
-    label {
-      display: block;
-      text-align: center;
-    }
-
-    label.checkbox {
-      padding-bottom: 5px;
-      font-size: 16px;
-      line-height: 150%;
-      vertical-align: middle;
-    }
-
-    label.checkbox:after {
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      margin-left: 7px;
-      content: "";
-      color: var(--primaryTextColor);
-      border: 1px solid var(--primaryTextColor);
-      border-radius: 2px;
-      background: var(--activeButtonBg) 50% 50% no-repeat;
-    }
-      :checked + label.checkbox:after {
-      background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMTMgMTAiIHdpZHRoPSIxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC4zMzMzMzMzMyAxMC00LjMzMzMzMzMzLTQuMTY2NjY2NjcgMS43MzMzMzMzMy0xLjY2NjY2NjY2IDIuNiAyLjUgNi45MzMzMzMzNy02LjY2NjY2NjY3IDEuNzMzMzMzMyAxLjY2NjY2NjY3eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
-    }
-
-    [type="search"] {
-      -webkit-appearance: textfield;
-      width: 100%;
-      height: 22px;
-      padding: 0 15px;
-      box-sizing: border-box;
-      font: normal 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
-      color: var(--primaryTextColor);
-      border: 1px solid var(--primaryTextColor);
-      border-radius: 15px;
-      background: transparent;
-    }
-    [type="search"]:focus {
-      outline: none;
-    }
-    [type="search"]::-webkit-search-cancel-button {
-      width: 18px;
-      height: 18px;
-      -webkit-appearance: none;
-      appearance: none;
-      /* Uses an X SVG shape as a mask */
-      -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') 0 0 no-repeat;
-      mask: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') 0 0 no-repeat;
-      -webkit-mask-size: 100%;
-      mask-size: 100%;
-      background: #fff;
-    }
-
-    ul {
-      padding: 0;
-      margin: 0;
-      list-style: none;
-    }
-
-    li {
-      margin-bottom: 20px;
-      border-bottom: 1px solid $white;
-      &:after {
-        display: none;
-      }
-    }
-
-    li img {
-      display: block;
-      width: 100%;
-    }
-
-    li h4 {
-      padding: 0 0 20px 0;
-      margin: 0;
-      font-size: 14px;
-      font-weight: normal;
-    }
-
-    li p {
-      padding: 0 0 15px 0;
-      margin: 0;
-      font-size: 12px;
-    }
-
-    mark {
-      padding: 0 2px;
-      color: var(--searchResultText);
-      background: var(--searchResultBg);
-      border: 1px solid var(--searchResultBorder);
-      border-radius: 2px;
-    }
-
-    #search_pending {
-      display: none;
-    }
-    #search_pending.visible {
-      display: block;
-    }
-  }
-
   .BRsearch-navigation {
     position: relative;
     z-index: 1;
@@ -410,9 +220,8 @@
   }
 }
 
-@keyframes hiliteFadeIn {
-  from { opacity: 0; }
-  to { opacity: 0.2; }
+@keyframes highlightFocus {
+  to { stroke-width: 20px; }
 }
 
 /* Mid size breakpoint */

package/src/css/_TextSelection.scss

@@ -1,9 +1,4 @@
 .textSelectionSVG {
-    width: 100%;
-    position: absolute;
-    height: 100%;
-    top: 0;
-    left: 0;
     // Make it so right-clicking on "blank" part of svg sends events to the image (for saving)
     pointer-events: none;
     .BRwordElement { pointer-events: all; }
@@ -22,27 +17,29 @@
     }
 
     .BRparagElement {
-        fill: red;
+        fill: transparent;
         cursor: text;
         white-space: pre;
-        fill-opacity: 0;
         font-family: Georgia, serif;
     }
 }
 
+// Hide text layer for performance during zooming & scrolling
+.BRsmooth-zooming, .BRscrolling-active {
+    .textSelectionSVG {
+        display: none;
+    }
+}
+
+// Hide text selection layers of off-screen pages, and only display
+// 2 text layers regardless of zoom level
+.BRmode1up .BRpagecontainer:not(.BRpage-visible) .textSelectionSVG {
+    display: none;
+}
+
 // Makes page image unselectable
 .BRpagecontainer img {
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
 }
-
-// Hides svg text layer when page animation is running
-.BRpageFlipping .textSelectionSVG {
-    display: none;
-}
-
-// Hide phantom page when last page is selected
-.BRpagecontainer.BRemptypage .textSelectionSVG{
-    display: none;
-}

package/src/css/_colorbox.scss

@@ -46,7 +46,7 @@
         }
         #cboxLoadingOverlay{background:transparent;}
 
-.shift{
+.br-colorbox-shift {
     position: absolute !important;
     left: -10000px !important;
-}
+}

package/src/css/_controls.scss

@@ -28,24 +28,32 @@
     }
   }
 
-  select.playback-speed {
-    width: 24px;
+  select.playback-speed, select.playback-voices {
     padding-top: 18px;
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
     font-size: 10px;
-    text-align: center;
     text-align-last: center;
     color: $controlsText;
     border: none;
     cursor: pointer;
-    background: transparent url("icons/playback-speed.svg") 50% 0 no-repeat;
-    option {
+    option, optgroup {
       background: $controlsBG;
     }
   }
 
+  select.playback-speed {
+      width: 30px;
+      background: transparent url("icons/playback-speed.svg") 50% 0 no-repeat;
+  }
+
+  select.playback-voices {
+      width: 30px;
+      background: transparent url("icons/voice.svg") 50% 0 no-repeat;
+      background-size: 18px;
+  }
+
   .active {
     background: $activeButtonBG;
   }
@@ -100,6 +108,10 @@
     &.visible {
       display: flex;
       animation: slideUp 0.2s;
+      button {
+        width: unset;
+        height: unset;
+      }
     }
 
     li {

package/src/css/_icons.scss

@@ -113,3 +113,9 @@
   height: 12px;
   background-image: url("icons/close-circle.svg");
 }
+
+.icon-close-dark {
+  width: 12px;
+  height: 12px;
+  background-image: url("icons/close-circle-dark.svg");
+}