miller/docs6/docs/extra.css

/* General pattern/branding for Miller docs:
 * o The first color is white; the second color is black; the third color is maroon. Code snippets have
 *   output in manila, with dark-manila command-lines.
 * o As much as I love serif fonts like Palatino for their beauty (especially their artful italics),
 *   I use sans-serif for pragmatic visual throughput. (If this were a sales sheet rather than a tech
 *   guide, I'd use serifs.)
 * o Corners on code blocks, images, etc. are all rounded.
 * o Hovering over hyperlinks makes their background light grey for pre-click visual feedback.
 */

/* Top-of-page banner */
.md-header {
  background-color: #800000;
}
.md-footer {
  background-color: #e0e0e0;
}

.md-nav--primary .md-nav__title[for="__drawer"] {
  color: #ffffff;
  background-color: #800000;
  padding: 3px;
  border-radius: 6px;
}

/* Section headings in the navbar: bold them and stand them out a little */
.md-nav__item--nested > .md-nav__link {
  color: inherit;
  font-weight: bold;
  margin: 3px;
  padding: 3px;
  /*border: 1px solid white;*/
}
.md-nav__link:hover {
  /*border: 1px solid gray;*/
  background-color: #e0e0e0;
}

/* Centered quicklinks for Introduction page */
div.quicklinks {
  text-align: center;
  overflow: hidden;
}
span.quicklinks {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  display:table;
  margin:0 auto;
}

/* Code samples using <pre> (which is currently in use) */
/* For command-and-output situations (the most common) -- zero margin between.
 * Example:
 *   mlr cat foo.csv <---- command line
 *   a,b,c           <---- output line
 *   1,2,3           <---- output line
 *   4,5,6           <---- output line
 * Command lines have bold font weight and darker background.
 *
 * Note the .pre-highlight-in-pair etc classes are written by the
 * docs/genmd-filter script when it produces the docs/*.md files from their
 * respective docs/*.md.in files.
 */

.md-typeset code {
  font-size: 12px;
}

pre {
  font-size: 12px;
  padding: 10px;

  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
}

.md-typeset code, .md-typeset kbd, .md-typeset pre {
  color: #000000;
  background-color: #eae2cb;
  font-size: 12px;
  direction: ltr;
  border-radius: 3px;
}

pre.pre-highlight-in-pair {
  background-color: #c5b690;
  font-weight: bold;
  margin-bottom: 0px;

  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
pre.pre-non-highlight-in-pair {
  background-color: #eae2cb;
  margin-top: 0px;

  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* For command-only or output-only situations (less common) -- normal margins.
 * Example:
 *   mlr cat foo.csv <---- command line
 */
pre.pre-highlight-non-pair {
  background-color: #c5b690;
  font-weight: bold;
  margin-top: 2px;
  margin-bottom: 16px;

  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* Example:
 *   a,b,c           <---- output line
 *   1,2,3           <---- output line
 *   4,5,6           <---- output line
 */
pre.pre-non-highlight-non-pair {
  background-color: #eae2cb;
  margin-top: 2px;
  margin-bottom: 15px;

  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

pre.pre-no-wrap {
  font-size: 12px;
  padding: 10px;

  white-space: nowrap;       /* css-3 */
  white-space: -moz-nowrap;  /* Mozilla, since 1999 */
  white-space: -no-wrap;      /* Opera 4-6 */
  white-space: -o-nowrap;    /* Opera 7 */
}

/* Section titles in content pages */
.md-typeset h1 {
  font-weight: bold;
}
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  color: #800000;
  font-weight: bold;
  border-radius: 6px;
  padding: 6px;
  background-color: #e0e0e0;
}

/* Hyperlinks in content pages */
a, a:before, a:focus, a:hover, a:link, a:visited {
  color: #800000;
}

.md-typeset a {
  color: #800000;
}
.md-typeset a:link {
  color: #800000;
}
.md-typeset a:visited {
  color: #800000;
}
.md-typeset a:hover {
  background-color: #e0e0e0;
  color: #800000;
}

/* Hyperlinks in navbar */
.md-nav__item,
.md-nav__item:focus,
.md-nav__item:hover,
.md-nav__link--active,
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover
{
  color: #800000;
}
.md-nav__item .md-nav__link--active {
  color: #800000;
}
.md-nav--primary .md-nav__item--active > .md-nav__link {
  color: #800000;
}
.md-nav__link[data-md-state="blur"] {
  color: #800000;
}

nav a:hover {
  border-radius: 3px;
  background-color: #e0e0e0;
}

/* Rounded corners for screenshots/images */
img {
  border-radius: 6px;
}

.md-footer__link:hover {
  background-color: #f0f0f0;
}

:root > * {
  --md-code-fg-color: #000000;
  --md-code-bg-color: #eae2cb;

  --md-typeset-color: #000000;
  --md-typeset-a-color: #800000;

  --md-footer-fg-color: #800000;
  --md-footer-fg-color: #eae2cb;
}