css.txt

File assets/skin/css.txt from the latest check-in


/* Overall page style; vi: filetype=css
 */

body {
  margin: 0 auto;
  background-color: white;
  font-family: sans-serif;
}

a {
  /* Unvisited links are a lightness-adjusted version of this skin's
   * header blue, balancing contrast between the body text and the
   * background in order to meet the goals specified by the WCAG 2
   * accessbility standard, earning us an "AA" grade according to
   * the calculator result here:
   *
   *   https://webaim.org/resources/linkcontrastchecker/?fcolor=2E2E2E&bcolor=FFFFFF&lcolor=3779BF
   *
   * It is for this same reason that our not-quite-black body text
   * color is the shade of dark gray that it is.  It can't be any
   * lighter and still allow us to meet both targets. */
  color: #3779BF;
  text-decoration: none;
}
a:hover {
  color: #4183C4;
  text-decoration: underline;
}


/* Page title, above menu bars */

.title {
  color: #4183C4;
  float: left;
}
h1.page-title {
  font-size: 1.60em;  /* match content > h1 */
  margin-bottom: 0;   /* div.content top margin suffices */
  display: none;      /* don't use body-area h1 except… */
}
.artifact h1.page-title,
.dir      h1.page-title,
.doc      h1.page-title,
.wiki     h1.page-title {
  display: block;   /* …for potentially long doc titles… */
}
.artifact .title > .page-title,
.dir      .title > .page-title,
.doc      .title > .page-title,
.wiki     .title > .page-title {
  display: none;   /* …where we suppress the title area h1 instead */
}
.title h1 {
  display: inline;
  font-size: 2.20em;
}
.title h1:after {
  content: " / ";
  color: #777;
  font-weight: normal;
}
.artifact .title h1:after,
.dir      .title h1:after,
.doc      .title h1:after,
.wiki     .title h1:after {
  content: "";    /* hide solidus for docs along with title h1 */
}
.status {
  float: right;
  font-size: 0.8em;
}
div.logo {
  float: left;
  padding-right: 10px;
}
div.logo img {
  max-height: 2em;    /* smaller than title to keep it above the baseline */
}


/* Main menu and optional sub-menu */

.mainmenu {
  clear: both;
  background: #eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  z-index: 21;  /* just above hbdrop */
}
.mainmenu a {
  text-decoration: none;
  color: #777;
  border-right: 1px solid #eaeaea;
}
.mainmenu a.active,
.mainmenu a:hover {
  color: #000;
  border-bottom: 2px solid #D26911;
}
nav#hbdrop {
  background-color: white;
  border: 1px solid black;
  border-top: white;
  border-radius: 0 0 0.5em 0.5em;
  display: none;
  font-size: 80%;
  left: 2em;
  width: 90%;
  padding-right: 1em;
  position: absolute;
  z-index: 20;  /* just below mainmenu, but above timeline bubbles */
}

.submenu {
  font-size: 0.8em;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.submenu a, .submenu label {
  padding: 10px 11px;
  text-decoration: none;
  color: #777;
}
.submenu label {
  white-space: nowrap;
}
.submenu a:hover, .submenu label:hover {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #000;
}
span.submenuctrl, span.submenuctrl input, select.submenuctrl {
  color: #777;
}
span.submenuctrl {
  white-space: nowrap;
}


/* Main document area; elements common to most pages. */

.content {
  padding: 1ex;
  color: #2e2e2e;   /* justified above in "WCAG 2" comment */
}
.content h1 { font-size: 1.60em; color: #444; }
.content h2 { font-size: 1.45em; color: #444; }
.content h3 { font-size: 1.15em; color: #444; }
.content h4 { font-size: 1.05em; color: #444; }
.content h5 { font-size: 1.00em; color: #444; }

.section {
  font-size: 1em;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #d8d8d8;
  border-radius: 3px 3px 0 0;
  padding: 9px 10px 10px;
  margin: 10px 0;
}
.sectionmenu {
  border: 1px solid #d8d8d8;
  border-radius: 0 0 3px 3px;
  border-top: 0;
  margin-top: -10px;
  margin-bottom: 10px;
  padding: 10px;
}
.sectionmenu a {
  display: inline-block;
  margin-right: 1em;
}

hr {
  color: #eee;
}


/* Page footer */

footer {
  border-top: 1px solid #ccc;
  padding: 10px;
  font-size: 0.8em;
  margin-top: 10px;
  color: #ccc;
}

/* Forum */

.forum a:visited {
  color: #6A7F94;
}

div.forumSel {
  animation: 1s linear 0s sel-fade;
  background-color: white;      /* animation end state */
  border-left: 4px solid black; /* after-animation selection indicator */
}
@keyframes sel-fade {
  from { background-color: #cef;  }
    to { background-color: white; }
}

.forum form input {
  margin: 0.5em 0;
}


/* Markdown and Wiki-formatted pages: /wiki, /doc, /file... */

.markdown blockquote, p.blockquote, .sidebar {
  /* Override default.css version with our accent colors.  Background is
   * the solid version of rgba(65, 131, 196, 0.1) on white, needed to
   * avoid tinting pre block backgrounds going "under" them. */
  background-color: #ebf2f9;
  border-left-color: #4183c4;
}
div.sidebar {
  /* Add extra whitespace between sidebar and content, both for spacing
   * and to put a gap between it and any <pre> blocks that happen to run
   * up against it. */
  outline: 1em solid white;
  width: 70%;
  margin: auto;
  float: none;
  max-width: initial;
}

/* Mark inline code fragments in the near-universal manner pioneered by
 * Stack Overflow, then picked up by approximately everyone, including
 * us, now.
 *
 * This combinatorial selector explosion results from a need to apply
 * these stylings inside multiple page container types, multiplied by
 * the surprisingly large number of tags HTML defines for semantically
 * differentiated monospaced inline markup.  If we do not target the
 * elements we want to affect carefully, we'll end up overreaching,
 * styling Fossil UI elements that use these tags for local purposes.
 *
 * HTML generated and emitted by Fossil UI does not always fall under
 * the skin's generic rules; we must avoid intruding on its domain.
 * Our limited intent here is to style user content only, where it is
 * unreasonable to expect its author to take the time to hand-craft
 * per-document styling.  Contrast Fossil UI, which often does exactly
 * that in order to get particular results.
 *
 * Its rough equivalent in Sass syntax is far more compact, thus clearer:
 * 
 * .artifact, .dir, .doc, .forum, .wiki        // the page types we target
 *   > .content                                // hands off header & footer
 *     &, > .fossil-doc, > .markdown           // wiki, HTML & MD emb docs
 *       > p                                   // in top-level paras only
 *         > code, > kbd, > samp, > tt, > var  // monospaced tag types
 *           background-color: #f4f4f4         // pale gray box which…
 *           padding: 0 4px                    // …extends around the sides
 *
 * We then need something similar for the block-level pre elements.
 *
 * The CSS below is based on feeding that Sass code through this:
 *
 *   $ sassc code.sass | sed -e 's/, /,\n/g'
 *
 * …then hand-cleansing it to make it _somewhat_ more understandable.
 * That largely amounts to whitespace tweaks, but we've also done things
 * like trim back the forum-specific styling to apply to the default MD
 * markup only; direct HTML formatting isn't even an option there, and
 * while wiki markup _is_ supported, MD was the default from day 1.
 * Another quirk of the forum post handling is that the .markdown class
 * gets applied per-post, not up at the top level as with the wiki,
 * embedded docs, etc.
 */
.artifact > .content               > p > code,
.artifact > .content               > p > kbd,
.artifact > .content               > p > samp,
.artifact > .content               > p > tt,
.artifact > .content               > p > var,
.artifact > .content > .fossil-doc > p > code,
.artifact > .content > .fossil-doc > p > kbd,
.artifact > .content > .fossil-doc > p > samp,
.artifact > .content > .fossil-doc > p > tt,
.artifact > .content > .fossil-doc > p > var,
.artifact > .content > .markdown   > p > code,
.artifact > .content > .markdown   > p > kbd,
.artifact > .content > .markdown   > p > samp,
.artifact > .content > .markdown   > p > tt,
.artifact > .content > .markdown   > p > var,
.dir      > .content               > p > code,
.dir      > .content               > p > kbd,
.dir      > .content               > p > samp,
.dir      > .content               > p > tt,
.dir      > .content               > p > var,
.dir      > .content > .fossil-doc > p > code,
.dir      > .content > .fossil-doc > p > kbd,
.dir      > .content > .fossil-doc > p > samp,
.dir      > .content > .fossil-doc > p > tt,
.dir      > .content > .fossil-doc > p > var,
.dir      > .content > .markdown   > p > code,
.dir      > .content > .markdown   > p > kbd,
.dir      > .content > .markdown   > p > samp,
.dir      > .content > .markdown   > p > tt,
.dir      > .content > .markdown   > p > var,
.doc      > .content               > p > code,
.doc      > .content               > p > kbd,
.doc      > .content               > p > samp,
.doc      > .content               > p > tt,
.doc      > .content               > p > var,
.doc      > .content > .fossil-doc > p > code,
.doc      > .content > .fossil-doc > p > kbd,
.doc      > .content > .fossil-doc > p > samp,
.doc      > .content > .fossil-doc > p > tt,
.doc      > .content > .fossil-doc > p > var,
.doc      > .content > .markdown   > p > code,
.doc      > .content > .markdown   > p > kbd,
.doc      > .content > .markdown   > p > samp,
.doc      > .content > .markdown   > p > tt,
.doc      > .content > .markdown   > p > var,
.forum    > .content .markdown     > p > code,
.forum    > .content .markdown     > p > kbd,
.forum    > .content .markdown     > p > samp,
.forum    > .content .markdown     > p > tt,
.forum    > .content .markdown     > p > var,
.wiki     > .content               > p > code,
.wiki     > .content               > p > kbd,
.wiki     > .content               > p > samp,
.wiki     > .content               > p > tt,
.wiki     > .content               > p > var,
.wiki     > .content > .fossil-doc > p > code,
.wiki     > .content > .fossil-doc > p > kbd,
.wiki     > .content > .fossil-doc > p > samp,
.wiki     > .content > .fossil-doc > p > tt,
.wiki     > .content > .fossil-doc > p > var,
.wiki     > .content > .markdown   > p > code,
.wiki     > .content > .markdown   > p > kbd,
.wiki     > .content > .markdown   > p > samp,
.wiki     > .content > .markdown   > p > tt,
.wiki     > .content > .markdown   > p > var,
.artifact > .content               > pre,
.artifact > .content > .fossil-doc > pre,
.artifact > .content > .markdown   > pre,
.dir      > .content               > pre,
.dir      > .content > .fossil-doc > pre,
.dir      > .content > .markdown   > pre,
.doc      > .content               > pre,
.doc      > .content > .fossil-doc > pre,
.doc      > .content > .markdown   > pre,
.forum    > .content               > pre,
.forum    > .content > .fossil-doc > pre,
.forum    > .content > .markdown   > pre,
.wiki     > .content               > pre,
.wiki     > .content > .fossil-doc > pre,
.wiki     > .content > .markdown   > pre {
  /*background-color: #f4f4f4;*/
  padding: 0 4px;
}
.content pre, table.numbered-lines > tbody > tr {
  hyphens: none;
  line-height: 1.25;
}

.content ul li {
  list-style-type: disc;
}

.artifact > .content table,
.dir      > .content table,
.doc      > .content table {
  background-color: #f0f5f9;
  border: 1px solid #a7c2dc;
  border-radius: 0.5em;
  border-spacing: 0;
  padding: 6px;
}
.artifact > .content th,
.dir      > .content th,
.doc      > .content th {
  border-bottom: 1px solid #dee8f2;
  padding-bottom: 4px;
  padding-right: 6px;
  text-align: left;
}
.artifact > .content tr > th,
.dir      > .content tr > th,
.doc      > .content tr > th {
  background-color: #dee8f0;
}
.artifact > .content tr:nth-child(odd),
.dir      > .content tr:nth-child(odd),
.doc      > .content tr:nth-child(odd) {
  background-color: #e0e8ee;
}
.artifact > .content td,
.dir      > .content td,
.doc      > .content td {
  padding-bottom: 4px;
  padding-right: 6px;
  text-align: left;
}

/* Wiki adjustments */
pre.verbatim {
  /* keep code examples from crashing into sidebars, etc. */
  white-space: pre-wrap;  
}
textarea.wikiedit {
  /* Monospace fonts tend to have smaller x-heights; compensate.
   * Can't do this generally because not all fonts have this problem.
   * A textarea stands alone, whereas inline <code> has to work with
   * the browser's choice of sans-serif proportional font. */
  font-size: 1.1em;  
}


/* Tickets */

table.report {
  cursor: auto;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  margin: 1em 0;
}
.report td, .report th {
 border: 0;
 font-size: .8em;
 padding: 10px;
}
.report td:first-child {
  border-top-left-radius: 5px;
}
.report tbody tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
.report td:last-child {
  border-top-right-radius: 5px;
}
.report tbody tr:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.report tbody tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}
.report th {
  cursor: pointer;
}
.report thead+tbody tr:hover {
  background-color: #f5f9fc !important;
}

td.tktDspLabel {
  width: 70px;
  text-align: right;
  overflow: hidden;
}
td.tktDspValue {
  text-align: left;
  vertical-align: top;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}
td.tktDspValue pre {
  white-space: pre-wrap;
}


/* Timeline */

span.timelineDetail {
  font-size: 90%;
}
div.timelineDate {
  font-weight: bold;
  white-space: nowrap;
}

tr.timelineSelected, tr.timelineCurrent {
  /* etienne/css.txt puts these styles on the whole row. We want them only
   * on the comment/details cell within the table, not over the time
   * and graph columns as well. */
  background-color: unset;
  border: unset;
  box-shadow: unset;
}
tr.timelineCurrent td.timelineModernCell,
tr.timelineCurrent td.timelineColumnarCell {
  border: 1px dashed #446979;
  border-radius: 1em;
}
tr.timelineSelected td.timelineModernCell,
tr.timelineSelected td.timelineColumnarCell {
  background-color: #fbe8d5;
  border-radius: 1em;
}
tr.timelineSecondary td.timelineModernCell,
tr.timelineSecondary td.timelineColumnarCell {
  background-color: #d5e8fb;
}
span.timelineSelected {
  background-color: #fbe8d5;
}
span.timelineSecondary {
  background-color: #d5e8fb;
}


/* Miscellaneous UI elements */

.fossil-tooltip.help-buttonlet-content {
  background-color: lightyellow;
}


/* Exceptions for specific screen sizes */

@media screen and (max-width: 600px) {
  /* Spacing for mobile */
  body {
    padding-left: 4px;
    padding-right: 4px;
  }
  .content {
    font-size: 0.9em;
  }
  .title {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .title > .page-title {
    display: inline;    /* show page titles above menu bar… */
  }
  .artifact .title > .page-title,
  .dir      .title > .page-title,
  .doc      .title > .page-title,
  .wiki     .title > .page-title {
    display: none;     /* …except for docs, where it may force wrapping */
  }
  .status {padding-top: 0px;}
  .mainmenu a {
    padding: 8px 10px;
  }
  .mainmenu {
    padding: 10px;
  }
}
@media screen and (min-width: 600px) {
  /* Spacing for desktop */
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .title {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  span.page-title {
    font-size: 18px;
  }
  div.logo {
    padding-top: 10px;
  }
  .status {padding-top: 30px;}
  .mainmenu a {
    padding: 8px 20px;
  }
  .mainmenu {
    padding: 10px;
  }

  /* Wide screens mean long lines.  Add extra leading to give the eye a
   * "gutter" to follow from the end of one to the start of the next. */
  .content dd,
  .content dt,
  .content div,
  .content li,
  .content p,
  .content table {
    line-height: 1.4em;
  }

  /* This horror show has the same cause that informed our handling of
   * <code> and friends above; see "combinatorial selector explosion."
   * Without this careful targeting, we'd not only overreach into areas
   * of Fossil UI where our meddling is not wanted, we would mistakenly
   * apply double indents to nested formatting in MD forum posts, p
   * within td tags, and more.
   *
   * Rather than give the equivalent Sass code here, see the SCSS file
   * that the [Inskinerator](https://tangentsoft.com/inskinerator/)
   * project ships as override/modern/media.scss.  Rendering that
   * through sassc gives substantially identical output, modulo the
   * hand-polishing we've done here. */
  .artifact > .content               > p,
  .artifact > .content > .markdown   > p,
  .artifact > .content > .fossil-doc > p,
  .artifact > .content               > ol, .artifact > .content               > ul,
  .artifact > .content > .markdown   > ol, .artifact > .content > .markdown   > ul,
  .artifact > .content > .fossil-doc > ol, .artifact > .content > .fossil-doc > ul,
  .artifact > .content               > table,
  .artifact > .content > .markdown   > table,
  .artifact > .content > .fossil-doc > table,
  .dir      > .content               > p,
  .dir      > .content > .markdown   > p,
  .dir      > .content > .fossil-doc > p,
  .dir      > .content               > ol, .dir > .content               > ul,
  .dir      > .content > .markdown   > ol, .dir > .content > .markdown   > ul,
  .dir      > .content > .fossil-doc > ol, .dir > .content > .fossil-doc > ul,
  .dir      > .content               > table,
  .dir      > .content > .markdown   > table,
  .dir      > .content > .fossil-doc > table,
  .doc      > .content               > p,
  .doc      > .content > .markdown   > p,
  .doc      > .content > .fossil-doc > p,
  .doc      > .content               > ol, .doc > .content               > ul,
  .doc      > .content > .markdown   > ol, .doc > .content > .markdown   > ul,
  .doc      > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul,
  .doc      > .content               > table,
  .doc      > .content > .markdown   > table,
  .doc      > .content > .fossil-doc > table,
  .wiki     > .content               > p,
  .wiki     > .content > .markdown   > p,
  .wiki     > .content > .fossil-doc > p,
  .wiki     > .content               > ol, .wiki > .content               > ul,
  .wiki     > .content > .markdown   > ol, .wiki > .content > .markdown   > ul,
  .wiki     > .content > .fossil-doc > ol, .wiki > .content > .fossil-doc > ul,
  .wiki     > .content               > table,
  .wiki     > .content > .markdown   > table,
  .wiki     > .content > .fossil-doc > table,
  #fileedit-tab-preview-wrapper > p,
  #fileedit-tab-preview-wrapper > ol,
  #fileedit-tab-preview-wrapper > ul,
  #fileedit-tab-preview-wrapper > table,
  #fileedit-tab-preview-wrapper > .markdown > p,
  #fileedit-tab-preview-wrapper > .markdown > ol,
  #fileedit-tab-preview-wrapper > .markdown > ul,
  #fileedit-tab-preview-wrapper > .markdown > table,
  #wikiedit-tab-preview-wrapper > p,
  #wikiedit-tab-preview-wrapper > ol,
  #wikiedit-tab-preview-wrapper > ul,
  #wikiedit-tab-preview-wrapper > table,
  #wikiedit-tab-preview-wrapper > .markdown > p,
  #wikiedit-tab-preview-wrapper > .markdown > ol,
  #wikiedit-tab-preview-wrapper > .markdown > ul,
  #wikiedit-tab-preview-wrapper > .markdown > table {
    margin-left:  50pt;
    margin-right: 50pt;
  }

  /* Code blocks get extra indenting.  We need a selector explosion
   * equally powerful to the one above for inline <code> fragments and
   * similar elements, for essentially the same reason: Fossil UI also
   * uses <pre>, and we want to affect user content only.
   *
   * The equivalent Sass code is:
   *
   *   .artifact, .dir, .doc, .wiki       // doc types we target
   *     > .content                       // hands off header & footer
   *       @import 'pre-doc-margins.sass'
   *
   *   #fileedit-tab-preview-wrapper,     // include /fileedit previews
   *   #wikiedit-tab-preview-wrapper      // ditto /wikiedit
   *     @import 'pre-doc-margins.sass'
   * 
   * …where pre-doc-margins.sass contains the elements common to both:
   * 
   *   &, > .fossil-doc, > .markdown      // wiki, HTML & MD doc types
   *     > pre                            // direct pre descendants only
   *       margin-left: 70pt;
   *       margin-right: 50pt;
   *
   * This is a technical overreach since /wiki & /wikiedit lack support
   * for Fossil's HTML embedded doc markup capability, but we prefer to
   * draw the /fileedit parallel in our Sass example over the dubious
   * pleasure of being nit-picky on this point.  Instead, we've chosen
   * to back that overreach out by hand below.
   */
  .artifact > .content               > pre,
  .artifact > .content > .fossil-doc > pre,
  .artifact > .content > .markdown   > pre,
  .dir      > .content               > pre,
  .dir      > .content > .fossil-doc > pre,
  .dir      > .content > .markdown   > pre,
  .doc      > .content               > pre,
  .doc      > .content > .fossil-doc > pre,
  .doc      > .content > .markdown   > pre,
  .wiki     > .content               > pre,
  .wiki     > .content > .markdown   > pre {
    margin-left:  70pt;
    margin-right: 50pt;
  }
  #fileedit-tab-preview-wrapper               > pre,
  #wikiedit-tab-preview-wrapper               > pre,
  #fileedit-tab-preview-wrapper > .fossil-doc > pre,
  #fileedit-tab-preview-wrapper > .markdown   > pre,
  #wikiedit-tab-preview-wrapper > .markdown   > pre {
    margin-left:  70pt;
    margin-right: 50pt;
  }

  /* Fossil UI uses these, but in sufficiently constrained ways that we
   * don't have to be nearly as careful to avoid an overreach. */
  .doc > .content h1, .artifact h1, .dir h1, .fileedit h1, .wiki h1 { margin-left: 10pt; }
  .doc > .content h2, .artifact h2, .dir h2, .fileedit h2, .wiki h2 { margin-left: 20pt; }
  .doc > .content h3, .artifact h3, .dir h3, .fileedit h3, .wiki h3 { margin-left: 30pt; }
  .doc > .content h4, .artifact h4, .dir h4, .fileedit h4, .wiki h4 { margin-left: 40pt; }
  .doc > .content h5, .artifact h5, .dir h5, .fileedit h5, .wiki h5 { margin-left: 50pt; }
  .doc > .content hr, .artifact hr, .dir hr, .fileedit hr, .wiki hr { margin-left: 10pt; }

  /* Don't need to be nearly as careful with tags Fossil UI doesn't use. */
  .doc dd, .artifact dd, .dir dd, .fileedit dd, .wikiedit dd { margin-left: 30pt; margin-bottom: 1em; }
  .doc dl, .artifact dl, .dir dl, .fileedit dl, .wikiedit dl { margin-left: 60pt; }
  .doc dt, .artifact dt, .dir dt, .fileedit dt, .wikiedit dt { margin-left: 10pt; }

  /* Fossil UI doesn't use Pikchr at all (yet?) so we can be quite loose
   * with these selectors. */
  .content .pikchr-wrapper { margin-left: 70pt; }
  div.pikchr-wrapper.indent:not(.source) {
    /* Selector naming scheme mismatch is intentional: it must match the
     * way it's given in default.css exactly if it is to override it. */
    margin-left: 70pt;
    margin-right: 50pt;
  }
  div.pikchr-wrapper.center:not(.source),
  div.pikchr-wrapper.float-right:not(.source) {
    margin-left: 0;
  }

  /* Special treatment for backward compatibility. */
  .indent,                /* clean alternative to misusing <blockquote> */
  .artifact > .content > blockquote:not(.file-content),
  .dir      > .content > blockquote,
  .doc      > .content > blockquote,
  .fileedit > .content > blockquote,
  .wiki     > .content > blockquote {
    /* We must apply extra indent relative to "p" since Fossil's wiki
     * generator misuses the blockquote tag against HTML and MD norms
     * to mean "indented paragraph."  Skip it for file content retrieved
     * by /dir URLs. */
    margin-left: 80pt;
  }
  .artifact > .content > .markdown > blockquote,
  .dir      > .content > .markdown > blockquote,
  .doc      > .content > .markdown > blockquote,
  .fileedit > .content > .markdown > blockquote,
  .wiki     > .content > .markdown > blockquote {
    /* Fossil MD didn't inherit that bug; its HTML generator emits
     * blockquote tags only for _block quotes_!  A moderate indent
     * suffices due to the visual styling applied above. */
    margin-left: 60pt;
  }

  /* Alternative to BLOCK.indent when wrapped in something that is
   * itself indented.  The value is the delta between p and blockquote
   * above, expressed as padding instead of margin so it adds to the
   * outer margin instead of forcing the browser into picking one. */
  .local-indent {
    padding-left: 30pt;
  }
}



/* Changes specific to the sqlite.org/wasm site... */
code, .doc > .content > .markdown > p > code {
  background-color: inherit;
}
.content h1, .content h2, .content h3, .content h4, .content h4 {
  color: inherit;
}
div.sidebar {
  /* Add extra whitespace between sidebar and content, both for spacing
   * and to put a gap between it and any <pre> blocks that happen to run
   * up against it. */
  outline: 1em solid white;
  width: 70%;
  margin: auto;
  float: none;
  max-width: initial;
  background-color: initial;
  outline: 1em solid transparent;
  border-top-style: initial;
  border-right-style: initial;
  border-bottom-style: initial;
}
.markdown blockquote, p.blockquote {
  background-color: initial;
}

/* The following few rules get the h1/h2/etc elements back into
   alignment. */
body.doc > .content h1 {
  margin-left: initial;
}
body.doc > h1:first-of-type {
  margin-left: 10pt;
}

/* General settings for the entire page */
html.dark-mode body {
  background-color: #1f1f1f;
  color: #ffffffe0;
}
html.dark-mode body .content {
  color: revert;
}

/* The page title centered at the top of each page */
html.dark-mode div.title {
  width: 100%;
}

/* The login status message in the top right-hand corner */
html.dark-mode div.status {
  color: #ddddddc9;
}


/* The main menu bar that appears at the top of the page beneath

** the header */
html.dark-mode div.mainmenu {
  border-bottom: 1px dotted rgba(200,200,200,0.3);
}

html.dark-mode div#hbdrop {
  background-color: #1f1f1f;
}

html.dark-mode div.mainmenu, div.submenu, div.sectionmenu {
  color: #ffffffcc;
  background-color: #303536/*#0000ff60*/;
}

html.dark-mode a,
html.dark-mode
a:visited {
   color: rgba(127, 201, 255, 0.9);
}

html.dark-mode a:visited {opacity: 0.8}

html.dark-mode div.mainmenu a.active {
  border-bottom: 1px solid #FF4500ff;
}

html.dark-mode a:hover,
html.dark-mode a:visited:hover {
  background-color: #FF4500ff;
  color: rgba(24,24,24,0.8);
  border-radius: 0.1em;
}

html.dark-mode .fileage tr:hover,
html.dark-mode div.filetreeline:hover {
  background-color: #333;
}
html.dark-mode .button,

html.dark-mode button {
  color: #aaa;
  background-color: #444;
}

html.dark-mode .button:hover,
html.dark-mode button:hover {
  background-color: #FF4500ff;
  color: rgba(24,24,24,0.8);
}
html.dark-mode input[type=button],
html.dark-mode input[type=reset],
html.dark-mode input[type=submit] {
  color: #ddd;
  background-color: #446979;
}
html.dark-mode input[type=button]:hover,
html.dark-mode input[type=reset]:hover,
html.dark-mode input[type=submit]:hover {
  background-color: #FF4500ff;
  color: rgba(24,24,24,0.8);
}

html.dark-mode .button:focus,
html.dark-mode button:focus,
html.dark-mode input[type=button]:focus,
html.dark-mode input[type=reset]:focus,
html.dark-mode input[type=submit]:focus {
  outline-color: #333;
  border-color: #888;
}


/* Some pages have section dividers */
html.dark-mode div.section {
  background-color: #303536/*#0000ff60*/;
  border-bottom-color: rgba(200,200,200,0.3);
}


/* The "Date" that occurs on the left hand side of timelines */
html.dark-mode div.divider {
  background: #303536;
  border-color: #558195;
}

/* The footer at the very bottom of the page */
html.dark-mode div.footer {
  background-color: #303536/*#0000ff60*/;
  border-top-color: rgba(200,200,200,0.3);
}

/* Hyperlink colors in the footer */
html.dark-mode pre:not(.verbatim) {
  background-color: rgba(200,200,200, 0.1);
}

/* The label/value pairs on (for example) the ci page */


html.dark-mode .fossil-tooltip,
html.dark-mode .fossil-toast-message {
  background-color: rgba(251, 106, 0, 1);
  border-color: rgba(127, 201, 255, 0.9);
  color: black;
}





/************************************************************************
timeline...
************************************************************************/

html.dark-mode table.timelineTable tr:not(.timelineDateRow){
  background-color: #ffffff17;
}
html.dark-mode table.timelineTable tr:not(.timelineDateRow):hover{


  background-color: #FF450080;
}

html.dark-mode .timelineModernCell,
html.dark-mode .timelineColumnarCell,

html.dark-mode .timelineDetailCell,
html.dark-mode .timelineCompactCell,
html.dark-mode .timelineVerboseCell {
  background: inherit /*#000*/;
}
html.dark-mode .timelineSelected > .timelineColumnarCell,
html.dark-mode .timelineSelected > .timelineCompactCell,
html.dark-mode .timelineSelected > .timelineDetailCell,
html.dark-mode .timelineSelected > .timelineModernCell,
html.dark-mode .timelineSelected > .timelineVerboseCell {
  border-color: #ff8000;
  background: #442800
}

html.dark-mode span.timelineSelected {
  border-radius: 0.2em;
  border: 1px solid #ff8000;
  /*vertical-align: top;


  text-align: left;*/
  background: #442800
}


html.dark-mode .timelineSelected {




  background-color: #ffffff40;
}


html.dark-mode .timelineSecondary > .timelineColumnarCell,
html.dark-mode .timelineSecondary > .timelineCompactCell,
html.dark-mode .timelineSecondary > .timelineDetailCell,
html.dark-mode .timelineSecondary > .timelineModernCell,
html.dark-mode .timelineSecondary > .timelineVerboseCell {
  border-color: #0080ff;
  background: #002844
}

html.dark-mode span.timelineSecondary {
  border-color: #0080ff;
  background: #002844
}
html.dark-mode .timelineCurrent > .timelineColumnarCell,
html.dark-mode .timelineCurrent > .timelineCompactCell,

html.dark-mode .timelineCurrent > .timelineDetailCell,
html.dark-mode .timelineCurrent > .timelineModernCell,

html.dark-mode .timelineCurrent > .timelineVerboseCell {
  border-color: #ff8000
}
.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
  background-color: inherit;/*#000*/
}
html.dark-mode .tl-node {
  border-color: #bbb;
  background: #111;
}
html.dark-mode .tl-node.leaf:after {





  background: #bbb
}
html.dark-mode .tl-node.sel:after {
  background: #ff8000
}
html.dark-mode .tl-arrow.u.sm {
  border-bottom-color: #bbb
}
html.dark-mode .tl-line {
  background: #bbb;
}

html.dark-mode .tl-arrow.merge.l {
  border-right-color: #bbb
}

html.dark-mode .tl-arrow.merge.r {
  border-left-color: #bbb
}
html.dark-mode .tl-arrow.cherrypick.l {
  border-right-color: #bbb;
}
html.dark-mode .tl-arrow.cherrypick.r {
  border-left-color: #bbb;

}

html.dark-mode .tl-line.cherrypick.h {
  border-top-color: #bbb;
  border-left-color: #bbb;
  background: rgba(255,255,255,0);
}
html.dark-mode .tl-line.cherrypick.v {
  border-top-color: #bbb;

  border-left-color: #bbb;
  background: rgba(255,255,255,0);

}

/************************************************************************
diffs...
************************************************************************/
html.dark-mode td.diffln ins {
  background-color: #559855;

  color: #000;
}
html.dark-mode td.diffln del {
  background-color: #c55;
  color: #000;
}
html.dark-mode td.difftxt del {
  background-color: inherit;
}

html.dark-mode td.difftxt del > del {
  background-color: #c55;
  color: #000;
}

td.difftxt ins {
  background-color: inherit;
}

html.dark-mode td.difftxt ins > ins {
  background-color: #559855;

  color: #000;
}
html.dark-mode tr.diffskip.jchunk {
  background-color: black;
}

html.dark-mode tr.diffskip > td.chunkctrl .jcbutton {
  background-color: #303536;
}

html.dark-mode span.snippet>mark {
  color: white;
}
html.dark-mode button,
html.dark-mode input,
html.dark-mode optgroup,
html.dark-mode select,
html.dark-mode textarea {
  background: inherit;
  color: inherit;
  font: inherit;


  margin: 0
}
html.dark-mode button {
  background-color: rgba(45,45,45,0.75);
}
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  border-color: rgba(127, 201, 255, 0.9);
}


html.dark-mode select {

  color: #1f1f1f;
  background: #ffffffe0;
}
html.dark-mode .capsumOff {
  background-color: #222;
}
html.dark-mode .capsumRead {
  background-color: #262;
}
html.dark-mode .capsumWrite {
  background-color: #662;
}

html.dark-mode body.forum div.forumSel {
  background: inherit;

}

html.dark-mode body.forum .debug {
    background-color: #FF4500ff;
    color: rgba(24,24,24,0.8);
}


html.dark-mode body.forum .fileage tr:hover {
    background-color: #333;
    color: rgba(24,24,24,0.8);
}

html.dark-mode body.report table.report tr td { color: black }
html.dark-mode body.report table.report a { color: blue }
html.dark-mode body.tkt td.tktDspValue { color: black }
html.dark-mode body.tkt td.tktDspValue a { color: blue }

html.dark-mode body.branch .brlist > table > tbody > tr:hover:not(.selected),
html.dark-mode body.branch .brlist > table > tbody > tr.selected {
  background-color: #442800;
}