MLS-navbar-left.css

/*
 * CSS for left navigation bar.
 * Developed from LaTeXML-navbar-left.css as starting point.
 */

body {
  margin: 0px;
  background: #F6F6F6;
}

nav > div.ltx_TOC {
  margin-left: 1em;
}

.ltx_page_navbar {
  display: block!important;
  position: fixed;
  z-index: 2;
  top: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 14px; /* Less than what is inherited from .body, to reduce need for scrolling. */
  line-height: 1.3; /* Less than what is inherited from .body, to reduce need for scrolling. */
  color: black;
  border-style: solid;
  border-color: #707A85; /* "Bouncing ball trace gray" */
  border-width: 0px;
  border-right-width: 8px;
  background: #F6F6F6;
  height: 100%; /* Provide fixed height for .ltx_TOC to refer to. */
}

.ltx_page_navbar:before {
  position: fixed;
  z-index: 4;
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 25px;
  color: #DE1D31; /* "Bouncing ball red" */
  height: 30px;
  width: calc(3rem - 8px);
  background: #F6F6F6;
  text-align: center;
  content: "☰"; /* Chinese character that looks like hamburger. */
}

.ltx_page_navbar a[rel=start] {
  display: none; /* Don't show sidebar title, as it is too long to look good, and seem to lack structure for adequate layout. */
}

.ltx_page_navbar .ltx_tocentry_document > .ltx_ref_self {
  display: none; /* Similar to sidebar title, but for the top page. */
}

.ltx_page_header a[rel=prev] {
  display: none; /* Don't show link to previous chapter. */
}

.ltx_page_header a[rel=next] {
  display: none; /* Don't show link to previous chapter. */
}

.ltx_page_footer a[rel=bibliography] {
  display: none; /* Don't show link to bibliography. */
}

.ltx_page_footer a[rel=index]:before {
  display: inline-block;
  content: "";
  height: 1.5rem; /* Same as .ltx_page_header. */
  width: 1.5rem;
  padding: 0.5rem; /* Same as y-direction in .ltx_page_header. */
  margin: 0px;
  border-style: solid;
  border-color: #707A85; /* "Bouncing ball trace gray" */
  border-width: 0px;
  border-left-width: 8px;
  background-image: url("Magnifying_glass_icon.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 25px;
}

.ltx_page_footer a[rel=index] {
  position: fixed;
  z-index: 4;
  top: 0px;
  right: 0px;
}

.ltx_page_footer a[rel=index] span {
  display: none; /* Don't display the "Index" text; we have added a magnifying glass instead. */
}

.ltx_TOC {
  padding-right: 1em;
  overflow-y: auto;
}

.ltx_TOC > ul.ltx_toclist {
  padding: 0em;
}

.ltx_tocentry_document > ul.ltx_toclist {
  padding: 0em;
}

.ltx_toclist ul {
  padding-left: 1em; /* Indentation of each table of contents level below the top. */
}

/* How to deal with the long section titles in the table of contents (overriding styling from LaTeXML.css).
 * The right boundary for these titles is the .ltx_page_navbar padding-right.
 */
.ltx_page_navbar li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ltx_ref_title .ltx_tag_ref {
  font-size: 75%; /* Compress navbar even more by shrinking the numbering. */
}

.ltx_page_main {
  position: absolute;
  z-index: 1;
  margin-top: 0px;
  margin-bottom: 0px;
  border-width: 0px;
  max-width: 80em;
  padding: 0px;
}

.ltx_page_header {
  position: fixed;
  z-index: 3;
  top: 0px;
  height: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0rem;
  /* Add right padding corresponding to part being covered by magnifying glass.
   */
  padding-right: calc(1.5rem + 2 * 0.5rem + 8px);
  background: #F6F6F6; /* Same as body. */
  color: black; /* Same as side bar. */
  border-bottom-color: #DE1D31; /* "Bouncing ball red" */
  border-bottom-width: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Make current jump target appear below the page header instead of behind it.
 */
:target:before {
  visibility: hidden;
  content: "X"; /* Hidden, but needs to be non-empty to work in Chrome. */
  display: block;
  position: relative;
  top: calc(-(2.5rem + 2px)); /* Offset by total height of .ltx_page_header. */
}

.ltx_item :target:before {
  display: inline-block;
  padding-top: calc((2.5rem + 2px)); /* Pad with total height of .ltx_page_header. */
}

.ltx_page_content {
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background: white;
}

.ltx_page_footer {
  padding: 1rem;
  background: white;
}

/* Layout for wide screens, with navbar always expanded.
 * The threshold for being considered wide is set so that it should be possible to get a collapsable
 * navbar at the same time as extending .ltx_page_main to its max-width (currently 80em).
 * This max-width is added to the .ltx_page_main margin-left in the collapsable layout, currently
 * resulting in 1306px if 1em is converted to 16px:
 *   80em * 16px/em + 2px + 16px + 8px = 1306px
 * Add 4px of slack, and the threshold becomes 1310.
 */
@media screen and (min-width: 1310px) {
  .ltx_page_main {
    margin-left: 350px;
  }
  .ltx_page_navbar {
    left: 0px;
    width: calc(350px - 8px); /* Width of .ltx_page_main, minus .ltx_page_navbar border-right-width. */
  }
  .ltx_TOC {
    height: 100%;
  }
  .ltx_page_header {
    width: calc(100% - 350px - (1.5rem + 2 * 0.5rem + 8px)); /* Subtract total horizontal padding on this element. */
  }
  .ltx_page_navbar:before {
    display: none;
  }
}

/* Layout for smaller screens or other media where navbar is only expanded when hovered.
 */
@media screen and (max-width: 1310px) {
  .ltx_page_main {
    /* Leave just enough space to fit the hamburger plus the right border of the .ltx_page_navbar.
     * Don't define this in em units, since the em is not the same below in .ltx_page_navbar.
     */
    margin-left: 0px;
  }
  .ltx_page_navbar {
    width: 500px;
    height: 2.5rem;
    left: calc(3rem - (500px + 8px));
    transition: 0.3s;
  }
  .ltx_TOC {
    margin-top: 20px; /* Reserve space for hamburger. */
    height: calc(100% - 20px);
  }
  .ltx_page_header {
    padding-left: 3rem;
    width: calc(100% - 3rem - (1.5rem + 2 * 0.5rem + 8px)); /* Subtract horizontal padding on this element. */
  }
  .ltx_page_navbar:hover {
    left: 0px;
    height: 100%;
  }
  .ltx_page_navbar:before {
    display: block;
  }
}