mangadex/scripts/css/reader.css

/*
  Layout element sizes:
  navbar height         3.5rem
  sidebar handle width   34px
  sidebar total width    20vw
  page bar height        15px
*/

/* utility classes */

.cursor-pointer {
  cursor: pointer;
}
.arrow-link {
  font-size: 30px;
}
.lang-flag {
  display: inline-block;
  border-radius: 5px;
}
.noselect {
  -webkit-user-select: none;
  -epub-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.nodrag {
  -webkit-user-drag: none;
}
.noevents {
  -webkit-pointer-events: none;
  -epub-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
}
.loading-container.is-loading .d-not-loading,
.loading-container:not(.is-loading) .d-loading {
  display: none;
}

/* layout fixes */

body {
  padding-top: 3.5rem;
  padding-bottom: 0;
  margin-bottom: 0;
}

.reader.hide-header {
  margin-top: -3.5rem;
}

/* transitions */

/*.reader-main,*/
/*.reader-images,*/
/*.reader-image-wrapper,*/
/*.reader-images img,*/
/*.reader-controls-wrapper,*/
.reader-page-bar,
.reader-page-bar .trail,
.reader-page-bar .thumb,
.reader-page-bar .track,
.reader-controls-collapser:before,
.reader-controls-collapser span {
  transition-property: all;
  transition-duration: 0.2s;
}
#reader-controls-collapser-bar {
  transition-property: opacity;
  transition-duration: 0.4s;
}

/* borders */

nav.navbar {
  border-bottom: 1px solid rgba(128, 128, 128, 0.5);
}
.reader-controls > div:not(:first-child),
.footer {
  border-top: 1px solid rgba(128, 128, 128, 0.5);
}

/* settings and controls */

#modal-settings:not(.show-advanced) .advanced {
  display: none;
}
#modal-settings .advanced label:before {
  content: '* ';
}
.reader-controls-wrapper {
  /* sticky behaviour on mobile? */
  /*position: -webkit-sticky;
  position: sticky;*/
  left: 0;
  max-width: 100vw;
}
.reader-controls-collapser {
  display: none;
  color: #eee;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}
.reader-controls-collapser:hover {
  color: #fff;
}
#reader-controls-collapser-button {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
}
#reader-controls-collapser-button > span {
  position: absolute;
  z-index: 100;
  margin-right: 1rem;
  margin-bottom: 0.7rem;
}
#reader-controls-collapser-button:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.75rem 2.75rem 0 0;
  border-color: rgba(128, 128, 128, 0.2) transparent transparent transparent;
}
#reader-controls-collapser-button:hover:before {
  border-color: rgba(128, 128, 128, 0.4) transparent transparent transparent;
}
.reader.hide-sidebar #reader-controls-collapser-button {
  position: fixed;
  z-index: 99;
  top: 3.5rem;
  right: 0;
}
.reader.hide-sidebar.hide-header #reader-controls-collapser-button {
  top: 0;
}
.reader.hide-sidebar #reader-controls-collapser-button {
  transform: rotateY(180deg);
}
#reader-controls-collapser-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin-left: -40px;
  width: 40px;
  background: linear-gradient(to right, rgba(64, 64, 64, 0), rgba(64, 64, 64, 0.4));
  opacity: 0;
}
#reader-controls-collapser-bar:hover {
  opacity: 1;
}
.reader.hide-sidebar #reader-controls-collapser-bar span {
  transform: rotateY(180deg);
}
#reader-controls-collapser-bar span {
  font-size: 2.75rem;
  margin-left: 0.3rem;
}

.reader-controls-mode span:not(.fas) {
  display: none
}
.reader[data-display="no-resize"] .show-no-resize,
.reader[data-display="fit-both"] .show-fit-both,
.reader[data-display="fit-height"] .show-fit-height,
.reader[data-display="fit-width"] .show-fit-width,
.reader[data-direction="ltr"] .show-direction-ltr,
.reader[data-direction="rtl"] .show-direction-rtl,
.reader[data-renderer="single-page"] .show-single-page,
.reader[data-renderer="double-page"] .show-double-page,
.reader[data-renderer="alert"] .show-alert,
.reader[data-renderer="recommendations"] .show-recommendations,
.reader[data-renderer="long-strip"] .show-long-strip,
.reader[data-renderer="long-strip"].native-long-strip .show-native-long-strip {
  display: inline;
}
.reader[data-renderer="recommendations"] .reader-controls-page-text {
  display: none;
}
.reader:not([data-renderer="recommendations"]) .reader-controls-page-recommendations {
  display: none;
}

/* reader */

body {
  display: flex;
  min-height: 100vh;
}
.reader {
  flex: 1 0 0;
}
.reader-main {
  min-height: calc(100vh - 3.5rem);
  min-width: 100%;
}
.reader.hide-header .reader-main {
  min-height: 100vh;
}
.reader-images .alert {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -epub-user-select: text;
  -moz-user-select: text;
  -khtml-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.reader-images {
  /*flex-wrap: nowrap;*/
  min-height: auto;
  /*min-height: fit-content;*/
  /*min-height: 100%;*/
  width: auto;
  width: -webkit-fill-available;
  min-width: 100%;
}
.reader[data-direction="ltr"] .directional {
  flex-direction: row;
}
.reader[data-direction="rtl"] .directional {
  flex-direction: row-reverse;
}
.reader[data-renderer="long-strip"] .reader-images {
  flex-direction: column;
}
.reader:not([data-renderer="long-strip"]) .reader-images {
  justify-content: center;
}
.reader[data-display="no-resize"] .reader-images {
  box-sizing: content-box;
  min-width: auto;
}
.reader-images img {
  height: auto;
  width: auto;
  margin: auto;
  object-fit: scale-down;
}
.reader-images.constrained {
  box-sizing: content-box;
  min-width: auto;
  min-width: min-content;
}
.reader-image-wrapper {
  height: auto;
  flex: 0 1 auto;
}
.reader.fit-vertical .reader-image-wrapper {
  height: 100%;
}
.reader[data-renderer="long-strip"] .reader-image-wrapper {
  flex: 0 0 auto;
  display: block;
  height: auto !important;
}
.reader[data-renderer="long-strip"].fit-vertical .reader-image-wrapper {
  display: block;
  max-height: 100% !important;
}
.reader[data-renderer="long-strip"].fit-vertical .reader-image-wrapper img {
  object-fit: scale-down;
}
.reader-main,
.reader-images,
.reader-image-wrapper,
.reader-images img {
  max-width: none;
  max-height: none;
}
.reader.fit-vertical .reader-main {
  /* this height & .reader-images.col seem necessary */
  height: calc(100vh - 3.5rem);
  max-height: calc(100vh - 3.5rem);
}
.reader.fit-vertical.hide-header .reader-main {
  height: 100vh;
  max-height: 100vh;
}
.reader.fit-vertical .reader-images,
.reader.fit-vertical .reader-image-wrapper,
.reader.fit-vertical .reader-images img {
  max-height: 100%;
}
.reader.fit-vertical:not([data-renderer="long-strip"]) .reader-images,
.reader.fit-vertical:not([data-renderer="long-strip"]) .reader-image-wrapper,
.reader.fit-vertical:not([data-renderer="long-strip"]) .reader-images img {
  flex: 0 1 auto;
}
.reader.fit-vertical .reader-images {
  height: calc(100% - 15px);
  width: inherit;
}
.reader.fit-vertical.hide-page-bar .reader-images,
.reader.fit-vertical[data-renderer="long-strip"] .reader-images {
  height: 100%;
}
.reader.fit-horizontal .reader-main,
.reader.fit-horizontal .reader-images,
.reader.fit-horizontal .reader-image-wrapper,
.reader.fit-horizontal .reader-images img {
  max-width: 100%;
}
/*.reader.fit-horizontal.no-objectfit .reader-images img {
  width: 100%;
}*/
.reader:not(.native-long-strip) .reader-image-wrapper {
  /* don't use in .reader-image-wrapper img, would mess up object-fit */
  padding: 2px 0px;
}
.reader[data-renderer="single-page"] .reader-image-wrapper {
  margin: auto;
}
.reader[data-renderer="double-page"][data-rendered-pages="2"] .reader-image-wrapper {
  max-width: 50%;
  width: fit-content;
}

.reader-image-block {
  font-size: 1.75em;
  padding: 0.5em;
  margin: 0.5em auto 0;
  width: 100%;
  color: rgba(128,128,128,0.7);
  border-top: 5px dashed rgba(128,128,128,0.7);
}

/* page track */

.reader-page-bar {
  height: 100px;
  margin: 0 6px;
}
.reader-page-bar .track {
  height: 15px;
  width: 100%;
  border: 2px solid #aaa;
  border-bottom: 0 !important;
  position: absolute;
  left: 0;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.7);
  background: linear-gradient(to top, #aaa, #aaa 2px, rgba(0, 0, 0, 0.7) 2px, rgba(0, 0, 0, 0.7));
}

.reader.hide-page-bar .reader-page-bar,
.reader[data-renderer="long-strip"] .reader-page-bar,
.reader[data-renderer="recommendations"] .reader-page-bar {
  display: none !important;
}

.reader[data-direction="ltr"] .reader-page-bar .notch:not(:first-child),
.reader[data-direction="rtl"] .reader-page-bar .notch:not(:last-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.reader-page-bar .trail,
.reader-page-bar .thumb {
  margin-left: 0;
}
.reader-page-bar .thumb {
  background: #ccc;
  border: 0 !important;
  border-radius: 0.9em;
}
.reader-page-bar .trail {
  background: #444;
  background: rgba(255, 255, 255, 0.3);
}
.reader-page-bar .track,
.reader-page-bar .trail {
  border-radius: 1em;
}
.reader-page-bar:hover .thumb {
  background: #eee;
}
.reader-page-bar .notch:not(.loaded) {
  background: repeating-linear-gradient(
          -45deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.05) 5px,
          rgba(255, 255, 255, 0.15) 5px,
          rgba(255, 255, 255, 0.15) 10px
  );
}
.reader-page-bar .notch.failed {
  background: rgba(255, 0, 0, 0.2);
}

/*.reader-page-bar .notch {
  position: static;
}*/
.reader-page-bar .notch-display {
  opacity: 0;
  top: -7rem;
  font-size: 2em;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 0.4em;
  transition: opacity 0.1s;
}
.reader-page-bar .track:hover .notch-display {
  opacity: 1;
}

/* load icon */

.reader-load-icon {
  position: fixed;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  font-size: 100px;
  color: #fff;
  text-shadow: 0 0 7px rgba(0,0,0,0.5);
  transition: opacity 0.5s ease-in;
  opacity: 0;
  display: none;
  z-index: -1;
}
.reader.is-loading .reader-load-icon {
  z-index: 9;
}
.reader.is-loading .reader-load-icon {
  display: block;
}
.reader-images,
.reader.is-loading .reader-load-icon {
  opacity: 1;
}
.reader.is-loading .reader-images {
  opacity: 0.5;
}

/* goto top button */

.reader-goto-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  font-size: 40px;
  border-radius: 50%;
  z-index: 0;
  background: rgba(96, 96, 96, 0.2);
  color: #fff;
}
.reader[data-renderer="long-strip"] .reader-goto-top.show {
  z-index: 9;
}

/* alert */

.reader[data-renderer="alert"] .reader-images {
  flex-direction: column;
  height: auto !important;
}
.reader[data-renderer="alert"] .reader-images .alert {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

/* recommendations */

.reader[data-renderer="recommendations"] .reader-images {
  display: block;
  cursor: auto;
  padding: 0.5em 1em;
  min-height: 100%;
}

/* cursor hiding */
.hide-cursor .reader-images img {
  cursor: none;
}

/* Modernizr */

.no-localstorage #alert-storage-warning {
  display: block !important;
}


.reader-controls-wrapper {
  order: 1;
}
.reader-main {
  order: 2;
}


@media (max-width: 991.9px) {
  .reader-controls-container {
    max-width: 100%;
  }
}
/* desktop definitions */

@media (min-width: 992px) {
  .reader-controls {
    border-left: 1px solid rgba(128, 128, 128, 0.5);
  }
  .reader-controls-title {
    padding-left: 0 !important;
  }
  .reader-controls-title .manga-title-col {
    padding: 0 2.75rem;
  }

  .reader.layout-horizontal .reader-controls-wrapper {
    order: 2;
  }
  .reader.layout-horizontal .reader-main {
    order: 1;
  }

  #right_swipe_area {
    display: none;
  }

  /* controls */

  .reader:not(.layout-horizontal) .d-lg-none {
    display: inherit !important;
  }
  .reader:not(.layout-horizontal) .reader-controls-pages,
  .reader:not(.layout-horizontal) .reader-controls-footer,
  .reader:not(.layout-horizontal) .reader-controls-collapser
  {
    display: none !important;
  }

  .reader.layout-horizontal .reader-controls-wrapper {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    right: 0;
    left: auto;
    width: 20vw;
  }
  .reader.layout-horizontal.hide-header .reader-controls-wrapper {
    top: 0;
  }
  .reader.layout-horizontal.hide-sidebar .reader-controls-wrapper {
    width: 0;
  }
  .reader.layout-horizontal.hide-sidebar .reader-controls {
    overflow: hidden;
  }

  .reader[data-collapser="bar"] #reader-controls-collapser-bar,
  .reader[data-collapser="button"] #reader-controls-collapser-button {
    display: flex;
  }

  /* load icon */

  .reader.layout-horizontal .reader-load-icon {
    left: calc(50% - 10vw - 50px);
  }
  .reader.layout-horizontal.hide-sidebar .reader-load-icon {
    left: calc(50% - 17px - 50px);
  }

  /* page track */

  .reader.layout-horizontal .reader-page-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 20vw;
    width: auto;
  }
  .reader.layout-horizontal.hide-sidebar .reader-page-bar {
    right: 0;
  }
  .reader.layout-horizontal .reader-page-bar:hover .track {
    height: 50px;
  }

  /* reader */

  .reader.layout-horizontal {
    flex-flow: row;
  }
  .reader.layout-horizontal:not(.hide-page-bar):not([data-renderer="long-strip"]) .reader-image-wrapper {
    padding-bottom: 15px;
  }
  .reader.layout-horizontal:not(.hide-page-bar).fit-vertical .reader-images {
    height: 100%;
  }
  .reader.layout-horizontal .reader-images {
    padding-right: 20vw !important;
  }
  .reader.layout-horizontal.hide-sidebar .reader-images {
    padding-right: 0 !important;
  }


}