@internetarchive/bookreader 5.0.0-18

package/src/css/_BRmain.scss

@@ -0,0 +1,251 @@
+#{$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;
+  }
+  a {
+    outline: none;
+  }
+  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; }  
+}

package/src/css/_BRnav.scss

@@ -0,0 +1,382 @@
+/**
+ * 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; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(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;
+    outline: none;
+    &:hover .tooltip {
+      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;
+
+  &.BRnavEmbed {
+    @include brNavLight;
+  }
+
+  /* Full mobile styles */
+  @media (max-width: $brBreakPointMobile) {
+    .BRbodyMobileNavEnabled &,
+    .BRbodyMobileNavEnabledFullscreen.BRfullscreenActive & {
+      @include brNavLight;
+    }
+  }
+
+  &--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;
+
+  &.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
+  @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;
+}