@internetarchive/bookreader 5.0.0-88-alpha.11 → 5.0.0-89

package/dist/esm/css/_BRmain.scss

@@ -1,262 +0,0 @@
-#{$brScope} {
-  /* Shared root element rules */
-  font-family: $brFontFamily;
-  font-size: $brFontSizeBase;
-  line-height: 1.2;
-  -webkit-text-size-adjust: none;
-
-
-  /* Some helper functional css utilities  */
-  .larger { font-size: 1.2em; }
-
-  /* Desktop-only */
-  @media (min-width: ($brBreakPointMobile + 1)) {
-    .mv20-lg { margin-top: 20px; margin-bottom: 20px; }
-  }
-
-  /* Element-level rules */
-  h3 {
-    font-size: 20px;
-    font-weight: 700;
-    color: #dedede;
-  }
-  button {
-    cursor: pointer;
-  }
-
-  a.logo {
-    display: inline-block;
-    width: auto;
-    height: 100%;
-    margin: 0 10px;
-    background: transparent url(images/icon_home.svg) no-repeat center center;
-    background-size: contain;
-  }
-}
-
-.BookReader {
-  margin: 0;
-  padding: 0;
-  position: relative;
-  overflow: hidden;
-  background-color: $brColorMainBg;
-
-  contain: strict;
-}
-
-.BRcontainer {
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: scroll;
-  position: absolute;
-  -webkit-overflow-scrolling: touch;
-}
-
-.BRprogresspopup {
-  margin: 80px auto auto;
-  position: relative;
-  width: 320px;
-  background-color: white;
-  font-size: 1.5em;
-  padding: 20px;
-  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 {
-  background-image: url("images/progressbar.gif");
-  background-repeat:no-repeat;
-  background-position:center top;
-}
-
-/* Share dialog */
-.BRshare {
-  &.BRfloat { width: 600px; }
-
-  .share-title { margin: 15px 15px 0; font-weight: bold; font-size: 18px; line-height: 22px; }
-  .share-social { margin: 15px 15px 0;}
-  .share-social button {
-    padding: 0 5px;
-    height: 40px;
-    text-align: left;
-    color: white;
-  }
-  .share-social button > i { margin-right: 5px; }
-  .share-social > div { display: inline; }
-  .share-embed { margin-top: 20px; }
-
-  label.sub.open-to-this-page {
-    display: block;
-  }
-
-  button[type=button].share-finished {
-    background-color: rgb(74,144,226);
-    border: 0;
-    color: white;
-    border-radius: 3px;
-    padding: 10px 25px;
-    font-size: 15px;
-  }
-}
-
-/* Info dialog */
-.BRinfoValueWrapper { margin-bottom: 10px; }
-.BRinfoValue { font-size: $brFontSizeLarger; }
-.BRinfoLabel { font-size: $brFontSizeSmaller; color: #999; }
-.BRinfoMoreInfoWrapper {
-  background-color: $brColorThemeBlue3;
-  border-radius: 2px;
-  padding: 8px;
-  text-align: center;
-  &:active { background-color: rgb(80, 155, 242); }
-}
-.BRinfoOtherFormats { margin-bottom: 40px; }
-.BRinfoRightCol > div { margin-bottom: 15px; }
-.BRinfoFooter { text-align: right; }
-
-/* Fullscreen rules */
-.BookReader {
-  &.fullscreenActive {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    background-color: black;
-    top: 0;
-    left: 0;
-    margin: 0;
-    z-index: $brZindexFullscreen;
-
-    .BRmobileHamburgerWrapper {
-      z-index: $brZindexFullscreen + 2;
-    }
-  }
-}
-body.BRfullscreenActive {
-  overflow: hidden;
-
-  .mm-menu {
-    z-index: $brZindexFullscreen - 1;
-  }
-}
-
-.BRaction {
-  margin-left: 5px;
-  margin-right: 5px;
-  padding: 8px 30px;
-  font-size: $brFontSizeBase;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  min-width: 150px;
-  text-align: center;
-  line-height: 1;
-  &:active { background-color: rgb(171, 171, 171); }
-  &.default {
-    background-color: rgb(193,193,193);
-    color: white;
-  }
-  &.primary {
-    background-color: #4990E2;
-    &:active { background-color: #2a76cd; }
-  }
-  &.orangeButton {
-    background-color: transparent;
-    border: 2px solid orange;
-    color: orange;
-    &:active { border-color: rgb(249, 198, 19); }
-  }
-  &.skinny { min-width: 50px; }
-  &.facebook-share-button { background-color: #3a5998; }
-  &.twitter-share-button { background-color: #429aff; }
-  &.email-share-button { background-color: #c1c1c1; }
-}
-
-/* Mobile Only */
-@media (max-width: $brBreakPointMobile) {
-  .BRinfoLeftCol { font-size: $brFontSizeBase; }
-  .BRimageW {text-align: center; margin-bottom: 10px;}
-  .BRimageW img { height: 200px; width: auto;}
-  .BRinfoValue.larger { font-size: $brFontSizeLarger; }
-  .BRinfoMoreInfoWrapper a {
-    font-size: inherit;
-    color: white;
-    text-decoration: none;
-  }
-  .BRinfoOtherFormatsFormat { margin-bottom: 6px; }
-  .BRinfoFooter { margin-bottom: 10px; text-align: left; }
-  .BRinfoFooter a { display: block;}
-  .BRfloatFoot.BRinfoFooter {
-    margin: initial;
-    padding: initial;
-    border: initial;
-    font-size: inherit;
-  }
-
-  #{$brScope} {
-    .fieldset-embed { display: none; }
-    .BRaction {
-      padding: 8px 10px;
-      margin-left: 0; margin-bottom: 10px;
-    }
-  }
-}
-
-/* Desktop Only */
-@media (min-width: ($brBreakPointMobile + 1)) {
-  .BRinfoW { font-size: $brFontSizeBase; position: relative; padding: 15px; }
-  .BRinfoLeftCol { float: left; width: 40%; min-height: 1px; }
-  .BRinfoRightCol { float: left; width: 58%; }
-  .BRimageW {text-align: center; margin-bottom: 10px; margin-right: 26px;}
-  .BRimageW img { height:auto; width: 100%;}
-  .BRinfoValue.larger { font-size: 20px; line-height: 1.2; }
-  .BRinfoMoreInfoWrapper a { font-size: $brFontSizeBase; color: white; text-decoration: none; font-weight: bold; }
-  .BRinfoOtherFormatsFormat { display: inline; margin-right: 10px; }
-  .BRinfoFooter { font-size: 1em; clear:both; }
-  .BRinfoFooter a { display: inline; margin-right: 10px;}
-
-  #{$brScope} {
-    .BRaction { padding: 8px 16px; }
-  }
-}
-
-/* filters */
-.filter-applied {
-  .BRpagediv1up { background-color: white; }
-  .BRpagedivthumb { background-color: white; }  
-}
-
-.BRfullscreenAnimation .br-mode-2up__book {
-  transition: transform .2s ease-in-out;
-}
-
-.fullscreenActive.BRmodeThumb .BRcontainer,
-.fullscreenActive.BRmode1up .BRcontainer {
-  animation: flash 0.3s ease-in-out;
-}
-
-@keyframes flash {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}

package/dist/esm/css/_BRnav.scss

@@ -1,354 +0,0 @@
-/**
- * BRnav is the bottom control bar (eg footer)
- */
-@use "sass:math";
-
-@mixin pseudoElementLayer {
-  content: "";
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: block;
-}
-
-@mixin brNavDark {
-  @include brDarkControls;
-
-  .BRpager {
-    background-color: $brColorDarkBorder;
-    .ui-slider-handle {
-      background: white;
-      border: none;
-    }
-    .ui-slider-range {
-      background: rgba(255, 255, 255, 0.59);
-    }
-  }
-
-  .BRpage {
-    .BRicon { border-left: 1px solid $brColorDarkBorder; }
-    .BRicon.activated { background-color: rgba(255,255,255,0.4); }
-    .BRicon.activated:before {
-      @include pseudoElementLayer;
-      border: 3px solid rgba(255,255,255,0.3);
-    }
-  }
-
-  .BRnavCntl {
-    z-index: $brZindexBase + 5;
-    background-color: $brColorDarkBorder;
-  }
-  .BRnavCntlBtm:hover {
-    background-color: $brColorThemeblue;
-  }
-}
-
-@mixin brNavLight {
-  @include brLightControls;
-
-  .BRpager.ui-slider {
-    background: #B7B7B7;
-    .ui-slider-handle {
-      background: $brColorThemeblue;
-    }
-    .ui-slider-range {
-      background: rgba($brColorThemeblue, .25);
-    }
-  }
-
-  .BRpage {
-    .BRicon { border-left: 1px solid $brColorLightBorder; }
-    .BRicon.activated { background-color: rgba($brColorThemeblue,0.4); }
-    .BRicon.activated:before {
-      @include pseudoElementLayer;
-      border: 3px solid rgba($brColorThemeblue,0.3);
-    }
-  }
-
-  .BRnavCntl {
-    background-color: $brColorLightBorder;
-  }
-
-  .BRnavCntlBtm:hover {
-    background-color: $brColorThemeblue;
-  }
-}
-
-@keyframes fadeUp {
-  from { opacity: 0; translate: 0 10px; }
-  to { opacity: 1; translate: 0 0; }
-}
-
-.BRfooter {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  /* important so it overlays over the book pages when showing */
-  z-index: 3;
-
-  button {
-    width: 30px;
-    height: 30px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    padding: 0;
-    cursor: pointer;
-    border: none;
-    border-radius: 2px;
-    background: transparent;
-
-    @media (hover: hover) {
-      /* styles to apply on devices that support hover */
-      &:hover .BRtooltip {
-        display: block;
-      }
-    }
-    &.hide {
-      display: none;
-    }
-  }
-}
-
-.BRReadAloudToolbar {
-  $toolbarHeight: $brNavHeightMobile;
-  display: flex;
-  justify-content: center;
-  margin: 5px;
-  padding: 0 math.div($brNavHeightMobile, 4);
-  border-radius: 4px;
-  align-self: center;
-  height: $toolbarHeight;
-  animation: fadeUp .2s;
-
-  // Default
-  @include brNavDark;
-
-  &--controls {
-    display: flex;
-  }
-  &--controls > * {
-    height: 100%;
-  }
-
-
-  .BRToolbarButton {
-    .icon {
-      width: $toolbarHeight;
-      height: $toolbarHeight;
-      box-sizing: border-box;
-    }
-
-    &.jumpForward .icon, &.jumpBackward .icon { padding: 9px; }
-  }
-
-  button {
-    padding: 0;
-    margin: 0;
-    border: 0px none;
-    box-sizing: border-box;
-    background: transparent none repeat scroll 0% 0%;
-    display: block;
-  }
-
-  .playback-rate-container {
-    width: $toolbarHeight;
-    height: $toolbarHeight;
-    position: relative;
-
-    .icon {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      padding: 6px;
-      box-sizing: border-box;
-      padding-bottom: 1em;
-    }
-
-    select {
-      cursor: pointer;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      font-size: 0.8em;
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      appearance: none;
-      border: 0;
-      text-align: center;
-      text-align-last: center; /* Chrome */
-      padding-top: 60%;
-      padding-left: 10%;
-      padding-right: 10%;
-      color: #333;
-      background: transparent;
-
-      /* IE */
-      &::-ms-expand { display: none; }
-    }
-  }
-
-  button:hover, .playback-rate-container:hover {
-    background: rgba(50, 50, 50, 0.2);
-  }
-}
-
-.BRnav {
-  box-sizing: border-box;
-  height: $brNavHeightDesktop;
-  padding-top: 0;
-  overflow: visible;
-
-  display: block;
-  display: flex;
-  flex-direction: row;
-  border-top: 1px solid $controlsBorder;
-
-  /* Theming */
-
-  // Default
-  @include brNavDark;
-
-  /* Full mobile styles */
-  @media (max-width: $brBreakPointMobile) {
-    height: $brNavHeightMobile;
-    box-shadow: 0px -1px 3px 0px rgba(#666, .25);
-  }
-}
-
-.BRnavpos {
-  position: relative;
-  margin-right: 10px;
-  margin-left: 10px;
-  float: left;
-  flex: 1 auto;
-}
-.BRpager.ui-slider  {
-  position: relative;
-  height: 8px;
-  top: math.div($brNavHeightDesktop, 2) - 4px;
-  box-sizing: content-box;
-  border-radius: 10px;
-  cursor: pointer;
-
-  &.ui-widget.ui-widget-content {
-    border: none;
-  }
-
-  .ui-slider-horizontal .ui-slider-handle,
-  .ui-slider-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    border-radius:50%;
-    top: -5px;
-    margin-left: -9px; /* Center icon */
-    z-index: $brZindexBase + 5;
-    border: none;
-  }
-  .ui-slider-range {
-    height: 100%;
-    border-radius: 10px;
-  }
-
-  /* handle active state for touch */
-  .touch & .ui-slider-handle.ui-state-active {
-    width: 24px;
-    height: 24px;
-    top: -4px;
-    margin-left: -11px;
-  }
-}
-
-/* BRnavlin is where chapters/search are appended */
-.BRnavline {
-  position: relative;
-  height: 1px;
-  width: auto;
-  top: -1px;
-  margin: 0 10px;
-  width: 100%;
-}
-.BRcurrentpage {
-  display: inline-block;
-  text-align: center;
-  padding: 0 0 0 0;
-  font-size: $brFontSizeSmaller;
-  margin-left: 5px;
-  margin-right: 10px;
-  line-height: 1;
-}
-.BRnavTitle {
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  padding: 0 0 0 0;
-  font-size: $brFontSizeSmaller;
-  margin-left: 10px;
-  margin-right: 5px;
-  line-height: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  letter-spacing: 0.5px;
-  font-style: italic;
-}
-.BRpage {
-  height: 100%;
-  overflow: hidden;
-  padding-left: 0;
-  text-align: right;
-  white-space: nowrap;
-  float: left;
-  flex: none;
-}
-.BRpageLparan {
-  margin-right: 1px;
-  font-size: .8em;
-  vertical-align: top;
-}
-.BRpageRparan {
-  margin-left: 1px;
-  font-size: .8em;
-  vertical-align: top;
-}
-.BRup {
-  background-image: url("images/nav_control-up.png");
-  background-repeat: no-repeat;
-}
-
-
-/* Mobile Only */
-@media (max-width: $brBreakPointMobile) {
-  /* hide navline chapters and search in mobile */
-  .BRnavline .BRchapter { display: none; }
-
-  .BRnavCntlBtm {
-    bottom: $brNavHeightMobile;
-  }
-  .BRpager.ui-slider {
-    height: 10px;
-    top: math.div($brNavHeightMobile, 2) - 5px;
-  }
-}
-
-/* Mobile nav zoom buttons */
-.DrawerSettingsWrapper [class*="zoom"] {
-  width: 40px;
-  height: 40px;
-  background-position: -1224px center;
-  background-size: 3440px auto;
-}
-.DrawerSettingsWrapper .zoom_in {
-  background-position: -1384px center;
-}