/* ==UserStyle==
@name           Eye-Friendly Night Dark for O'Reilly online books
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Non-vivid, more eye-friendly night dark theme colors for O'Reilly online book site (formerly Safari Books Online). When using this style, make sure to turn the night reading mode on. (Click the "change font size" button on the right hand side and select the crescent icon.)
@author         Minoru Mizutani
@license        CC-BY-SA-4.0
==/UserStyle== */

@-moz-document domain("learning.oreilly.com") {

  body.night-mode {
      color: #ABABAB !important;
      border-color: #444 !important;
      outline-color: #444 !important;
      text-shadow: none !important;
  }

  /*
body.night-mode [class*="content"],
body.night-mode [class*="container"] {
background-color: #1C1C1C !important;
}
*/
  body.night-mode #sbo-rt-content code {
      color: #cacaca !important;
  }

  body.night-mode,
  body.night-mode .nav-link,
  body.night-mode .sbo-menu-top,
  body.night-mode #container,
  body.night-mode.video {
      background-color: #181818 !important;
  }

  body.night-mode .sbo-title h1,
  body.night-mode .pagination-title {
      color: #CCC !important;
  }

  body.night-mode .sbo-book-meta,
  body.night-mode .pagefoot,
  body.night-mode .topbar {
      background-color: #181818 !important;
  }

  body.night-mode .topbar .topnav > li a:hover,
  body.night-mode .topbar .topnav > li a:focus {
      background-color: #333 !important;
  }

  body.night-mode .topnav > li a,
  body.night-mode .pagefoot,
  body.night-mode .pagefoot a,
  body.night-mode .drop-content a.nav-icn.l0 span,
  body.night-mode .drop-content a.nav-icn.l1 span {
      color: #999 !important;
      background-color: #181818 !important;
  }

  body.night-mode .topnav .usermenu a.l1 svg,
  body.night-mode .topbar svg {
      stroke: #999 !important;
      fill: #999 !important;
  }

  body.night-mode .interface-control-btns,
  body.night-mode .interface-controls .search-in-archive,
  body.night-mode .interface-controls .search-in-archive .search-archive-bar input,
  body.night-mode .interface-controls .query-control,
  body.night-mode .interface-controls .font-control-activator,
  body.night-mode .interface-controls .sharing-controls,
  body.night-mode .interface-controls button,
  body.night-mode .pagefoot .icon-up {
      color: #999 !important;
      background-color: #181818 !important;
      border-color: #444 !important;
  }

  body.night-mode .interface-controls,
  body.night-mode .interface-controls a,
  body.night-mode .interface-controls button,
  body.night-mode #sbo-rt-content,
  body.night-mode #sbo-rt-content a,
  body.night-mode #sbo-rt-content div,
  body.night-mode #sbo-rt-content dt,
  body.night-mode #sbo-rt-content em,
  body.night-mode #sbo-rt-content li,
  body.night-mode #sbo-rt-content p,
  body.night-mode #sbo-rt-content strong,
  body.night-mode #sbo-rt-content .box_title,
  body.night-mode #sbo-rt-content .chaptertitle,
  body.night-mode #sbo-rt-content .cn-chapter-number,
  body.night-mode #sbo-rt-content .figure-title,
  body.night-mode #sbo-rt-content .fm_title_document,
  body.night-mode #sbo-rt-content .h1,
  body.night-mode #sbo-rt-content .heading-1,
  body.night-mode #sbo-rt-content .heading-3,
  body.night-mode #sbo-rt-content .paragraph-head,
  body.night-mode #sbo-rt-content .title,
  body.night-mode #sbo-rt-content .title_document,
  body.night-mode #sbo-rt-content h1,
  body.night-mode #sbo-rt-content h2,
  body.night-mode #sbo-rt-content h3,
  body.night-mode #sbo-rt-content h4,
  body.night-mode #sbo-rt-content h5,
  body.night-mode #sbo-rt-content h6,
  body.night-mode #sbo-rt-content hr,
  body.night-mode #sbo-rt-content div.informaltable,
  body.night-mode #sbo-rt-content div.informaltable table,
  body.night-mode #sbo-rt-content div.informaltable table td {
      color: #ABABAB !important;
      background-color: #181818 !important;
      /*text-align: justify !important;*/
  }

  body.night-mode #sbo-rt-content strong,
  body.night-mode #sbo-rt-content .box_title,
  body.night-mode #sbo-rt-content .chaptertitle,
  body.night-mode #sbo-rt-content .cn-chapter-number,
  body.night-mode #sbo-rt-content .figure-title,
  body.night-mode #sbo-rt-content .fm_title_document,
  body.night-mode #sbo-rt-content .h1,
  body.night-mode #sbo-rt-content .heading-1,
  body.night-mode #sbo-rt-content .heading-3,
  body.night-mode #sbo-rt-content .paragraph-head,
  body.night-mode #sbo-rt-content .title,
  body.night-mode #sbo-rt-content .title_document,
  body.night-mode #sbo-rt-content h1,
  body.night-mode #sbo-rt-content h2,
  body.night-mode #sbo-rt-content h3,
  body.night-mode #sbo-rt-content h4,
  body.night-mode #sbo-rt-content h5,
  body.night-mode #sbo-rt-content h6 {
      color: #CCC !important;
  }

  body.night-mode #lesson-fragment,
  body.night-mode #lesson-fragment .pre,
  body.night-mode #lesson-fragment .pre-ex,
  body.night-mode #lesson-fragment .pre1,
  body.night-mode #lesson-fragment .pre_w,
  body.night-mode #lesson-fragment p.pre,
  body.night-mode #lesson-fragment pre,
  body.night-mode #sbo-rt-content .pre,
  body.night-mode #sbo-rt-content .pre-ex,
  body.night-mode #sbo-rt-content .pre1,
  body.night-mode #sbo-rt-content .pre_w,
  body.night-mode #sbo-rt-content p.pre,
  body.night-mode #sbo-rt-content pre,
  body.night-mode #sbo-rt-content div,
  body.night-mode #sbo-rt-content table,
  body.night-mode #sbo-rt-content table th,
  body.night-mode #sbo-rt-content table thead,
  body.night-mode #sbo-rt-content table tr,
  body.night-mode #sbo-rt-content table td,
  body.night-mode #sbo-rt-content thead,
  body.night-mode #sbo-rt-content tbody {
      color: #ABABAB !important;
      /*background-color: transparent !important;*/
      background-color: #181818 !important;
      border-color: #1C1C1C !important;
  }

  body.night-mode #sbo-rt-content .cf {
      color: #6377e6;
  }

  body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea {
      background-color: #111 !important;
  }

  body.night-mode #sbo-rt-content td,
  body.night-mode #sbo-rt-content td a,
  body.night-mode #sbo-rt-content td li,
  body.night-mode #sbo-rt-content td p,
  body.night-mode #sbo-rt-content td p a,
  body.night-mode #sbo-rt-content th,
  body.night-mode #sbo-rt-content th p {
      color: #ABABAB !important;
  }

  body.night-mode #sbo-rt-content div.note h3,
  body.night-mode #sbo-rt-content div.note p.title,
  body.night-mode #sbo-rt-content div.sidebar h5,
  body.night-mode #sbo-rt-content div.sidebar p.title,
  body.night-mode #sbo-rt-content div.sidebar-title,
  body.night-mode #sbo-rt-content div.tip h3,
  body.night-mode #sbo-rt-content div.warning h3,
  body.night-mode #sbo-rt-content p.box_title {
      color: #ABABAB !important;
      text-shadow: none !important;
  }

  body.night-mode img,
  body.night-mode .logo,
  body.night-mode .interface-controls .search-in-archive.active .search-controls::before {
      opacity: 0.65;
  }

  body.night-mode.video .sbo-inpage-toc .tocList li a {
      border: none;
  }
  body.night-mode.video .sbo-inpage-toc .section-title {
      border-color: #1C1C1C !important;
  }

  body.night-mode::-webkit-scrollbar {
      width: 10px !important;
      height: 10px !important;
  }
  body.night-mode::-webkit-scrollbar,
  body.night-mode::-webkit-scrollbar-track,
  body.night-mode::-webkit-scrollbar-corner,
  body.night-mode *::-webkit-scrollbar,
  body.night-mode *::-webkit-scrollbar-track,
  body.night-mode *::-webkit-scrollbar-corner {
      background: #181818 !important;
  }
  body.night-mode::-webkit-scrollbar-thumb,
  body.night-mode *::-webkit-scrollbar-thumb {
      background: #3a3a3a !important;
  }
  body.night-mode::-webkit-scrollbar-thumb:hover,
  body.night-mode *::-webkit-scrollbar-thumb:hover {
      background: #585858 !important;
  }

  /* Distraction free mode */
  body.night-mode .sbo-menu-top .sbo-toc-container,
  body.night-mode.nav-collapsed header.topbar .topnav,
  body.night-mode .interface-controls .interface-control-btns,
  body.night-mode .interface-controls .sharing-controls .trigger .fa {
      visibility: hidden;
  }
  body.night-mode .sbo-menu-top:hover .sbo-toc-container,
  body.night-mode.nav-collapsed header.topbar:hover .topnav,
  body.night-mode .interface-controls:hover .interface-control-btns,
  body.night-mode .interface-controls:hover .sharing-controls .trigger .fa {
      visibility: visible;
  }
  body.night-mode .sbo-menu-top,
  body.night-mode .sbo-nav-top a.nav-link {
      border: none;
      background: none !important;
  }
  body.night-mode .sbo-nav-top a.nav-link,
  body.night-mode .pagefoot {
      opacity: 0;
  }
  body.night-mode .sbo-nav-top a.nav-link:hover,
  body.night-mode .pagefoot:hover {
      opacity: 1;
  }

  /*
 Darken Firefox scrollbars
 Borrowed from https://userstyles.org/styles/88202/ibaked-v-for-firefox-scrollbar-darkstate
*/
  scrollbar {
      -moz-appearance: none !important;
      background: #181818 !important;
      border-left: 1px solid #161616 !important;
  }
  scrollbar thumb {
      -moz-appearance: none !important;
      background: #636363 !important;
      background-clip: padding-box !important;
      border: none !important;
  }
  scrollbar thumb:not(:active):hover,
  scrollbar thumb:hover:active {
      background: #0f80fd !important;
      background-clip: padding-box !important;
      transition: background 1s !important;
      -webkit-transition: background 1s !important;
  }
  scrollbar thumb:active,
  scrollbar thumb[active="true"] {
      background: #363636 !important;
      background-clip: padding-box !important;
      border: none !important;
      transition: background 1s !important;
      -webkit-transition: background 1s !important;
  }
  scrollbar scrollbarbutton,
  scrollbar gripper,
  scrollcorner {
      -moz-appearance: none !important;
      background: #181818 !important;
      border: none !important;
      transition: background 2s !important;
      transition-timing-function: ease !important;
      -webkit-transition: background 2s !important;
      -webkit-transition-timing-function: ease !important;
  }
  scrollbar[orient="vertical"] > scrollbarbutton {
      min-height: 17px !important;
      max-height: 17px !important;
      min-width: 7px !important;
      max-width: 7px !important;
  }
  scrollbar[orient="horizontal"] > scrollbarbutton {
      min-height: 15px !important;
      max-height: 15px !important;
      min-width: 7px !important;
      max-width: 7px !important;
  }
  scrollbar > scrollbarbutton[disabled="true"] {
      opacity: 0.8 !important;
  }
  scrollbar > scrollbarbutton:not([disabled="true"]):hover {
      background: #0f80fd !important;
      background-clip: padding-box !important;
      border: none !important;
      transition: background 1s !important;
      transition-timing-function: ease !important;
      -webkit-transition: background 1s !important;
      -webkit-transition-timing-function: ease !important;
  }
  scrollbar > scrollbarbutton:not([disabled="true"]):hover:active,
  scrollbar > scrollbarbutton:not([disabled="true"])[active="true"] {
      -moz-appearance: none !important;
      background: #0f80fd !important;
      background-clip: padding-box !important;
      border: none !important;
      transition: background 1s !important;
      transition-timing-function: ease !important;
      -webkit-transition: background 1s !important;
      -webkit-transition-timing-function: ease !important;
  }
}