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

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

a {
  color: #59C;
  text-decoration: none;
}
a:hover {
  color: #4183C4;
  text-decoration: underline;
}


/* Page title, above menu bars */

.title {
  color: #4183C4;
  float: left;
}
.title h1 {
  display: inline;
  font-size: 2.20em;
}
.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;
}
div#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: #444;
}
.content h1 { font-size: 1.60em; }
.content h2 { font-size: 1.45em; }
.content h3 { font-size: 1.15em; }
.content h4 { font-size: 1.05em; }
.content h5 { font-size: 1.00em; }

.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;
}

/* Wiki <verbatim> text block adjustments */
pre.verbatim {
  white-space: pre-wrap;
}


/* 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; }
}

textarea.wikiedit {
  font-size: 1em;  /* monospace fonts tend to be smaller; compensate */
}

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


/* Markdown and Wiki-formatted pages: /wiki, /doc, /file...
 *
 * The frequent use of the immediate-child selector (>) is done on
 * purpose to prevent these rules from affecting MD in forum posts,
 * ticket comments, etc.  Without this, we'd need a bunch of inverse
 * rules to back out the margins everywhere we don't want them.
 *
 * BEWARE: Fossil's MD and wiki to HTML processors wrap the content bodies
 * differently, and /doc on *.html files works yet a third way.  These
 * rules are carefully written to capture these docs and no other use of
 * MD/wiki/HTML.  Adjust with care!
 */

.markdown blockquote, .sidebar, p.blockquote {
  /* Style it as a proper blockquote for MD only.  Unlike the indent
   * rule, this applies everywhere, including the forum, tickets… */
  background-color: rgba(65, 131, 196, 0.1);
  border-left: 3px solid #4183c4;
  padding: 0.1em 1em;
}
.sidebar {
  float: right;
  font-size: 0.9em;
  max-width: 33%;
}
div.sidebar {
  margin-left: 1em; /* don't run wraparound text right up to our border */
  padding: 1em;     /* no p wrapper inside to get extra padding from */
}
div.sidebar:not(.no-label):before {
  content: "Sidebar: ";
  font-weight: bold;
}

.doc > .content dd, .content dt,
.doc > .content div,
.doc > .content li,
.doc > .content p,
.doc > .content table
{
  line-height: 1.4em;
}

.content pre {
  hyphens: none;
  line-height: 1.25;
}
.artifact > .content               > p > code,
.artifact > .content               > p > tt,
.artifact > .content > .fossil-doc > p > code,
.artifact > .content > .fossil-doc > p > tt,
.artifact > .content > .markdown   > p > code,
.artifact > .content > .markdown   > p > tt,
.dir      > .content               > p > code,
.dir      > .content               > p > tt,
.dir      > .content > .fossil-doc > p > code,
.dir      > .content > .fossil-doc > p > tt,
.dir      > .content > .markdown   > p > code,
.dir      > .content > .markdown   > p > tt,
.doc      > .content               > p > code,
.doc      > .content               > p > tt,
.doc      > .content > .fossil-doc > p > code,
.doc      > .content > .fossil-doc > p > tt,
.doc      > .content > .markdown   > p > code,
.doc      > .content > .markdown   > p > tt,
.wiki     > .content               > p > code,
.wiki     > .content               > p > tt,
.wiki     > .content > .fossil-doc > p > code,
.wiki     > .content > .fossil-doc > p > tt,
.wiki     > .content > .markdown   > p > code,
.wiki     > .content > .markdown   > p > tt {
  background-color: #eee;
  padding: 0 4px;
}

.content .pikchr-wrapper {
  /* Pikchr was developed with the assumption that it would be
   * integrated into a Fossil repo using the old 0.9em body font
   * size, which no longer obtians.  This gives us a choice:
   *
   * 1. Change Pikchr to track this skin change, potentially breaking
   *    uses of alternate skins with differing default font sizes.
   * 2. Restore the old default for Pikchr diagrams so the old
   *    assumptions continue to be valid.
   * 3. Make everyone with custom skins set pikchr-scale=1.11 (1/0.9)
   *    in their skin's footer.txt to increase the diagram's relative
   *    size to compensate for the font size change.
   *
   * We choose #2 because it puts both adjustments in the same file. */
  font-size: 0.9em;
}

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

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


/* 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 {
  /* default/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: none;      /* use h1 in body area, below menu bar */
  }
  h1.page-title {
    font-size: 1.60em;  /* match content > h1 */
    margin-bottom: 0;   /* div.content top margin suffices */
  }
  .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;
  }
  .title h1:after {
    content: " / ";
    color: #777;
    font-weight: normal;
  }
  h1.page-title {
    display: none;  /* use h1 in title area, above menu bar */
  }
  div.logo {
    padding-top: 10px;
  }
  .status {padding-top: 30px;}
  .mainmenu a {
    padding: 8px 20px;
  }
  .mainmenu {
    padding: 10px;
  }

  /* This horror-show selector explosion lets us avoid applying indents
   * to Fossil UI generated pages, nested formatting in forum posts, p
   * within td cells, etc.  It's easier to understand what this actually
   * *says* by studying the override/modern/media.scss input file from
   * the [Inskinerator](https://tangentsoft.com/inskinerator/) project.
   * We generated the mess below from that, then sent it through a hand
   * polishing pass.  The tool's _raw_ output is even worse. */
  .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 and such get extra indent.  We need a selector explosion
   * equally powerful to the above because Fossil UI *does* use <pre>,
   * and we want this to apply to user content only.
   *
   * It's easier to see what's going on here: four types of top-level
   * body class for /file, /dir, /doc and /wiki times three flavors of
   * embedded doc type (plain HTML, wiki, and MD) equals 12 selectors,
   * plus another 4 to account for the two supported types of markup
   * preview in /fileedit and /wikiedit.  In SCSS form, this is simply:
   *
   * .artifact, .dir, .doc, .wiki {
   *   > .content {
   *     &, > .markdown, > .fossil-doc {
   *       > pre {
   *         @import 'margins.scss';
   *       }
   *     }
   *   }
   * }
   * #fileedit-tab-preview-wrapper,
   * #wikiedit-tab-preview-wrapper {
   *   &, > .markdown {
   *     > pre {
   *       @import 'margins.scss';
   *     }
   *   }
   * }
   * 
   * …where margins.scss contains the common definitions for both blocks.
   */
  .artifact > .content > pre,
  .artifact > .content > .markdown > pre,
  .artifact > .content > .fossil-doc > pre,
  .dir > .content > pre,
  .dir > .content > .markdown > pre,
  .dir > .content > .fossil-doc > pre,
  .doc > .content > pre,
  .doc > .content > .markdown > pre,
  .doc > .content > .fossil-doc > pre,
  .wiki > .content > pre,
  .wiki > .content > .markdown > pre,
  .wiki > .content > .fossil-doc > pre {
    margin-left: 70pt;
    margin-right: 50pt;
  }
  #fileedit-tab-preview-wrapper > pre,
  #fileedit-tab-preview-wrapper > .markdown > pre,
  #wikiedit-tab-preview-wrapper > 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) {
    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;
  }
}