Inskinerator

## Usage

#### Synopsis

     ./inskinerator --base/-b BASE [--override/-o OVERRIDE]
        [--output/-f OUTPUT] [--define/-D VAR=VALUE]
        [--define/-D VAR=VALUE] [--output/-f OUTPUT] \
        [--late-define/-L VAR=VALUE]


#### Options

* **<tt>--base/-b:</tt>** Give the base skin to generate the output
  from.  Can be anything in the `skins/` subdirectory except for:

  * “`common`”, which sits above all skins, containing all of the color
    definitions from Fossil’s `src/default.css` file.

  * “`amber-vt`”, which is an example of an override skin meant to sit
    atop “`default`”; see `--override/o` examples below.

* **<tt>--override/-o</tt>:** Override elements of the `--base` skin
  with files from `skins/OVERRIDE/*.scss`.

* **<tt>--output/-f</tt>:** Write output to the named `OUTPUT` file
  rather than to stdout, as is the default.

* **<tt>--define/-D</tt>:** Define SCSS variables, primarily intended to
  override values given in `skins/*/vars.scss`, but may also be used for
  special purposes with custom `--override` skins.
* **<tt>--define/-D</tt>:** Define SCSS variables before all
  late-defined variables.  Most useful with values that are used as
  inputs to the definitions in `skins/*/late-vars.scss`.

* **<tt>--late-define/-L</tt>:** Override SCSS variables after
  everything else is computed.  Primarily intended to override single
  skin variables, but may also be used for special purposes with custom
  `--override` skins.



#### <a id="ex-simple"></a> Simple Examples: Adjusting the Default Skin

Rebuild the Fossil default skin’s CSS:

This tool is more useful for creating new variations on the default skin.
For example, you can use `-D` to pass HTML color names to create a
[“fire” themed variant][d2]:

    ./inskinerator -b default \
        -D text-color=lightyellow \
        -D header-color=yellow \
        -D background-color=black \
        -D pri-accent-color=red \
        -D sec-accent-color=darkorange

Note that we don’t necessarily have to override any of the late-defined
colors, as they get the following defaults if not overridden:

| Variable         | Late-Defined Value           |
|------------------|------------------------------|
| title-color      | $pri-accent-color            |
| header-color     | $text-color                  |
| footer-color     | $text-color + 40% lightness  |
| ter-accent-color | inverse of $pri-accent-color |

Or, you can use HTML RGB specs to create this [“PDP-11/70” theme][d3]:

    ./inskinerator -b default \
        -D text-color=\#000 \
        -D header-color=\#B3003B \
        -D title-color=\#622A5A \
        -D pri-accent-color=\#B3003B \
        -D sec-accent-color=\#AE98CD
        -D sec-accent-color=\#AE98CD \
        -D ter-accent-color=\#B3003B

Note that `background-color` isn’t needed: we got that from the default
skin.  We can’t do without “black” for the text color, since the default
uses [a very dark gray](/file/skins/default/vars.scss), not black.  But
note also that we pass such strings through as-is, so that HTML’s
allowance for the #000 shortcut works.

You may also mix HTML color names and RGB specs to create this [mint
green variant][d4] of the default skin:
You may also mix HTML color names and RGB specs to create this
[mint green variant][d4] of the default skin:

     ./inskinerator -b default \
        -D text-color=\#003300 \
        -D header-color=darkgreen \
        -D title-color=green \
        -D background-color=mintcream \
        -D pri-accent-color=lightseagreen \
        -D sec-accent-color=\#CCFFE6
        -D sec-accent-color=\#CCFFE6 \
        -D ter-accent-color=darkgreen

[Fizzbuck Light][d5]:

    ./inskinerator -b default \
        -D text-color=black \
        -D pri-accent-color=\#3B579A \
        -D sec-accent-color=lightgray

[d2]: /draft2/timeline
[d3]: /draft3/timeline
[d4]: /draft4/timeline
[d5]: /draft5/timeline
[d6]: /draft6/timeline
[d7]: /draft7/timeline
[d8]: /draft8/timeline
[d9]: /draft9/timeline


#### <a id="ex-advanced"></a> Advanced Examples: Applying Skin Overrides

Rather than simply supply overrides for the four key colors as in the
prior section, you can apply entire SCSS files atop the default skin to
provide more drastic adjustments.  This project ships with one such
override: the Amber VT skin from [the PiDP-8/I project][pidp8i].
[Rebuild it][d7] atop the default skin like so:

     ./inskinerator -b default -o amber-vt

You can define `background-pattern` as any CSS color function to
override the default solid background set via via `background-color`,
producing the [Green Bar VT][d8] skin:

     ./inskinerator -b default -o amber-vt \
        -D background-color=\#B8F0A8 \
        -D background-pattern='repeating-linear-gradient(#EEFAEB, #EEFAEB 50px, white 0px, white 100px)' \
        -D vt-text-color=lime

The key color in the Amber VT skins is `background-color`: from that is
derived the color of the page title, the color of the body headers, the
color of the main menu bar, and even the color of the body text.  The
only way to override them is with `-L`, because of the way this skin
overrides the Fossil default skin it’s based on.

You must not only provide `--background-color` for that reason but also
because SCSS isn’t smart enough to derive solid colors from a gradient:
providing `background-pattern` isn’t enough.

We can now come full circle and create a [Paper White VT][d9] skin with
a color scheme reminiscent of the default Fossil skin but with all the
features of the Amber VT skin:

    ./inskinerator -b default -o amber-vt \
        -D background-color=white \
        -D vt-background-color=#333 \
        -D vt-bezel-color=darkgray \
        -D vt-text-color=#EEE \
        -L header-color=#444 \
        -L pri-accent-color=#4082C4 \
        -L ter-accent-color=#4082C4 \
        -L text-color=#444 \
        -L title-color=#4082C4

[pidp8i]: https://tangentsoft.com/pidp8i/


#### <a id="pmodel"></a> Processing Model

The tool combines files from `skins/*` indirectly named on the command
line with the `--base` and `--override` options with files from
`skins/common/*.scss` and variable overrides via `--define` options to
produce its output. The order of operations is fixed so that the
resulting CSS rules cascade as expected:

``` pikchr indent
CV: box "common vars"
CV: box "common vars" "(early)"
    arrow 50%
    box "base vars"
    box dotted "base vars" "(early)"
    arrow same
    box dotted "override vars" "(if available)"
    arrow same
DV: box dotted "--define vars" "(if any)"
    box dotted "--define vars" "(if any)"

BA: box dotted "base" "adjustments" at 0.8 below CV
    arrow 50%
OA: box dotted "override" "adjustments"
    arrow same
LV: box dotted "late vars"

CC: box "common" "CSS" at 0.8 below BA
CC: box "common" "CSS" at 0.8 below CV
    arrow 50%
    box "base" "CSS"
    arrow same
    box dotted "override" "CSS"
    arrow same
OP: box dotted "override" "Prism.js"

BM: box dotted "base" "@media" at 0.8 below CC
    arrow 50%
OM: box dotted "override" "@media"

arrow right 0.2 from DV.e \
arrow right 0.2 from LV.e \
    then down 0.4 \
    then left to BA.w-(0.2,-0.4) \
    then down to 0.2 left of BA.w \
    then to BA.w radius 0.1

arrow right 0.2 from OA.e \
    then down 0.4 \
    then left to CC.w-(0.2,-0.4) \
    then down to 0.2 left of CC.w \
    then to CC.w radius 0.1

arrow right 0.2 from OP.e \
    then down 0.4 \
    then left to BM.w-(0.2,-0.4) \
    then down to 0.2 left of BM.w \
    then to BM.w radius 0.1
```

That is, Inskinerator:

1. Concatenates SCSS variables from up to 4 different sources in order
   of most generic to most specific to the output skin.
1.  Concatenates the “early” SCSS variables from up to 4 different
    sources in order of most generic to most specific to the output skin,
    then it appends the “late” variables in the same order: common + base
    \+ override + `--define-late`.

2. Applies SCSS variable calculations to adjust those defaults in some
   specific way. This ordering allows you to define colors in your
   override skin or in `-D` options that later get adjusted by the stock
   rules from the base skin before you have a chance to override them in
   your override skin. This is how we get a linear gradient based on the
   primary highlight color in all of the [simple examples](#ex-simple):
    This ordering allows the base and override skins’ late-defined
    variables to use your early-defined variables (`--define/-D`) in
    functions that derive other variables, so you only have to provide a
    small number of inputs to drive an entire skin’s definition.

    You will usually not need `-L` at all; prefer `-D`.  The primary use
    for `-L` is when you wish to override a single variable’s value at
    the end of the process, rather than override inputs to the
   each output generates the gradient range using the same
   [stock adjustment calculations](/file/skins/default/adjust.scss).
    calculations that produce *other* variables.

3. Concatenates the specified `css.scss` files in a predictable order.
   If you’re using an `--override` skin, you have the option to include
   a `prism.scss` file to add output from Prism.js’s skin generator from
   a separate file, which can therefore be more easily maintained than
   if you mixed it with your main rules in `skins/OVERRIDE/css.scss`.
2.  Concatenates the specified `css.scss` files in a predictable order.
    If you’re using an `--override` skin, you have the option to include
    a `prism.scss` file to add output from Prism.js’s skin generator from
    a separate file, which can therefore be more easily maintained than
    if you mixed it with your main rules in `skins/OVERRIDE/css.scss`.

4. Appends the specified `media.scss` files in a predictable order. This
   split of main CSS from `@media` CSS allows the latter to override all
   prior main CSS rules by collecting all `@media` rules near the end of
   the file.
3.  Appends the specified `media.scss` files in a predictable order. This
    split of main CSS from `@media` CSS allows the latter to override all
    prior main CSS rules by collecting all `@media` rules near the end of
    the file.


## <a id="making"></a> Making New Skins

The core rule is to apply either `--define` rules via the command line
or to write your changes into an `--override` skin file.  Do not
modify anything in the stock files shipped in `skins/*`, particularly
under the `common` or `default` subdirectories.

The file `skins/default/css.scss` is purposefully written in a CSS-ish
form of SCSS, using only variable substitutions, no other SCSS features.
This facilitates merging upstream diffs from `skins/default/css.txt`
into our version of the file.  Similarly, our `skins/common/css.scss` is
largely just a subset of the upstream `src/default.css` file containing
the base skin color rules.

We point this out because there is no especially good reason to do this
in an override skin.  See `skins/amber-vt/css.scss` for ideas of SCSS
features you can take advantage of to simplify the file.

# message, then die.

sub usage {
    my ($error) = @_;
    print "ERROR: $error!\n\n" if defined $error;
    print <<USAGE;
usage: inskinerator --base/-b BASE [--override/-o OVERRIDE] \
        [--output/-f OUTPUT] [--define/-D VAR=VALUE]
        [--define/-D VAR=VALUE] [--late-define/-L VAR=VALUE] \
        [--output-css OUTPUT] [--output-scss OUTPUT] 

    All skins allow overriding at least these variables:

        -D text-color=COLOR
        -D pri-accent-color=COLOR
        -D sec-accent-color=COLOR
        -D background-color=COLOR

        -D pri-accent-color=COLOR
        -D sec-accent-color=COLOR
        -D title-color=COLOR
        -D header-color=COLOR
        -D footer-color=COLOR
        -D ter-accent-color=COLOR
        -D background-color-solid=COLOR
        -D background-color-pattern=COLOR

    The final group are late-defined variables, defined by default in
    terms of the first group.  If you don't override them, you get the
    default definitions without duplicating their late definitions.
    Thus, a "complete" variables-only override can be done by redefining
    only variables in the first group.

    VALUEs for COLOR variables are any legal CSS color: 'white',
    '#abcdef', '#888', etc.

    Output goes to stdout if you don't give a file name via --output/-f.
    Output goes to stdout unless you give a file name via --output-css.

    The intermediate SCSS may be saved (as for debugging) with
    --output-scss.

USAGE
    exit 1;
}


#### main ##############################################################

# Parse the command line
my ($base, $override, $output_file, %vars);
my ($base, $override, $output_css_file, $output_scss_file,
        %early_vars, %late_vars);
my $output_style_name = 'nested';
my $cmd = $0 . ' ' . join(' ', @ARGV);
$cmd =~ s{\s+}{ }g;
GetOptions( 
    'base|b=s'     => \$base,
    'override|o=s' => \$override,
    'output|f=s'   => \$output_file,
    'style=s'      => \$output_style_name,
    'define|D=s%'  => \%vars,
    'base|b=s'         => \$base,
    'override|o=s'     => \$override,
    'output-css=s'     => \$output_css_file,
    'output-scss=s'    => \$output_scss_file,
    'style=s'          => \$output_style_name,
    'define|D=s%'      => \%early_vars,
    'late-define|L=s%' => \%late_vars,
) or usage('failed to parse command line');
usage('--base/b is required') unless defined $base;

# Interpret the output style option, if given
my %output_style_names = (
    'nested'     => SASS_STYLE_NESTED,
    'compact'    => SASS_STYLE_COMPACT,
    'expanded'   => SASS_STYLE_EXPANDED,
    'compressed' => SASS_STYLE_COMPRESSED
);
my $output_style = $output_style_names{$output_style_name};
usage("output style '$output_style_name' is not one of\n\t(",
        join(', ', keys(%output_style_names)), ")\n")
        unless defined $output_style;

# Slurp the SCSS input files
my $common_css  = slurp('common', 'css',  { must_exist => 1 });
my $common_vars = slurp('common', 'vars', { must_exist => 1 });
my $common_css        = slurp('common', 'css',        { must_exist => 1 });
my $common_early_vars = slurp('common', 'early-vars', { must_exist => 1 });
my $common_late_vars  = slurp('common',  'late-vars', { must_exist => 1 });
my $base_css = slurp($base, 'css', {
    must_exist     => 1,
    alternate_file => 'css.txt',
});
my $base_media  = slurp($base, 'media');
my $base_vars   = slurp($base, 'vars');
my $base_adjust = slurp($base, 'adjust');
my ($override_css, $override_media, $override_prism, $override_vars,
        $override_adjust);
my $base_media      = slurp($base, 'media');
my $base_early_vars = slurp($base, 'early-vars');
my $base_late_vars  = slurp($base,  'late-vars');
my ($override_css, $override_media, $override_prism,
        $override_early_vars, $override_late_vars);
if (defined $override) {
    $override_css    = slurp($override, 'css', { must_exist => 1 });
    $override_media  = slurp($override, 'media');
    $override_prism  = slurp($override, 'prism');
    $override_vars   = slurp($override, 'vars');
    $override_adjust = slurp($override, 'adjust');
    $override_css        = slurp($override, 'css', { must_exist => 1 });
    $override_media      = slurp($override, 'media');
    $override_prism      = slurp($override, 'prism');
    $override_early_vars = slurp($override, 'early-vars');
    $override_late_vars  = slurp($override,  'late-vars');
}

# Build SCSS to compile
my $scss = $common_vars . $base_vars;
$scss .= $override_vars if defined $override_vars;
for my $vname (keys %vars) {
    $scss .= "\$$vname: $vars{$vname};\n";
}
$scss .= $base_adjust     if defined $base_adjust;
$scss .= $override_adjust if defined $override_adjust;
$scss .= $common_css;
$scss .= $base_css;
$scss .= $override_css    if defined $override_css;
$scss .= $override_prism  if defined $override_prism;
$scss .= $base_media      if defined $base_media;
$scss .= $override_media  if defined $override_media;
my $scss = $common_early_vars;
$scss .= "\n" . $base_early_vars     if defined $base_early_vars;
$scss .= "\n" . $override_early_vars if defined $override_early_vars;
if (keys(%early_vars) > 0) {
    $scss .= "\n/* Early (--define) command line variables: */\n";
    for my $vname (keys %early_vars) {
        $scss .= "\$$vname: $early_vars{$vname};\n";
    }
}
$scss .= "\n" . $common_late_vars;
$scss .= "\n" .     $base_late_vars if defined $base_late_vars;
$scss .= "\n" . $override_late_vars if defined $override_late_vars;
if (keys(%late_vars) > 0) {
    $scss .= "\n/* Late (--define-late) command line variables: */\n";
    for my $vname (keys %late_vars) {
        $scss .= "\$$vname: $late_vars{$vname};\n";
    }
}
$scss .= "\n" . $common_css;
$scss .= "\n" . $base_css;
$scss .= "\n" . $override_css    if defined $override_css;
$scss .= "\n" . $override_prism  if defined $override_prism;
$scss .= "\n" . $base_media      if defined $base_media;
$scss .= "\n" . $override_media  if defined $override_media;

# Save SCSS if requested by --output-scss before compiling it in case we
# get an error, without which libsass's line numbers are often hard to
# interpret.
if ($output_scss_file) {
    open my $output, '>:utf8:', $output_scss_file
            or die "Cannot write SCSS to $output_scss_file: $!\n";
    print $output $scss;
    close $output;
}

# Compile and strip it
# Compile and strip it.  TODO: Replace C comment squisher with call to
# external CSS optimizer to consolidate redundant rules.  libsass
# doesn't do that.
my $compiler = CSS::Sass->new(
    output_style    => $output_style,
);
my $css = $compiler->compile($scss);
$css =~ s{\@charset "UTF-8";\n}{};
$css =~ s{/\*.*?\*/\s*}{}gs;

# Output
my $header = <<HEADER;
/* DO NOT EDIT: Generated by $cmd */
/* ------------------------------------------------------------------ */
HEADER
if ($output_file) {
    open my $output, '>:utf8:', $output_file
            or die "Cannot write CSS to $output_file: $!\n";
if ($output_css_file) {
    open my $output, '>:utf8:', $output_css_file
            or die "Cannot write CSS to $output_css_file: $!\n";
    print $output $header, $css;
    close $output;
}
else {
    binmode STDOUT, ':utf8';
    print $header, $css;
}

/***********************************************************************
 amber-vt/css.scss - SCSS form of core CSS rules for the Amber VT skin.
    These are overrides for base skin, designed to be Fossil's default.

 Copyright © 2017-2020 by Warren Young; offered under ../../LICENSE.md.
***********************************************************************/

/**** Whole-document elements ****/

a, a.active {
  color: #98510b;
}
a:visited, .forum a:visited {
  color: #7a4919;
a:visited {
  color: dark-pri-accent-color;
}
a:hover, div.forumPosts a:visited {
  div.forumPosts { color: $sec-accent-color; }
  color: #643c14;
}

body {
  background-color: #f5d6ba;
}
body, .content, .footer {
  color: #5d4734;
}

hr {
  /* Commonly for separating footer elements */
  border: 1px solid #7b3e00;
}

img {
  border: 1px solid #8d5403;
  border-color: $header-color;
  border-radius: 16px;
  border-width: 1px;
}

pre, code {
  /* All monospaced text */
  font-family: Source Code Pro, Menlo, Monaco,
               Andale Mono, Ubuntu Mono, Deja Vu Sans Mono, 
               Letter Gothic, Letter Gothic Std, Prestige Elite Std,

.content {
  font-size: 1em;
  padding: 0ex 1ex 1ex 1ex;
}

.debug {
  background-color: rgba(0, 0, 0, 0.05);
  border: 2px solid rgba(0, 0, 0, 0.15);
  background-color: $tint-color-05pct;
  border: 2px solid $tint-color-15pct;
  border-radius: 3px;
  padding: 2px;
}


/**** Headers, footers, menus, and titles ****/

h1, h2, h3, h4, h5,
    .header .status,
    .header .title,
    .header .pagetitle {
  color: #8d5403;
}
h1      { font-size: 2.00em; margin-left: 10pt; }
h2      { font-size: 1.50em; margin-left: 20pt; }
h3      { font-size: 1.15em; margin-left: 30pt; }
h4      { font-size: 1.05em; margin-left: 50pt; }
h5, pre {                    margin-left: 50pt; }

.header .pagetitle {
.header {
  font-size: 60%;   /* subtitle decreased from "h1" title size */
}
.header .status, .header .title {
  font-weight: bold;
  .status, .title { font-weight: bold; }
}
.header .status {
  color: #8d5403;
  text-align: right;
  white-space: nowrap;
}
  .status {
    color: $header-color;
    text-align: right;
    white-space: nowrap;
  }
}
.title {
  h1 {
    color: $title-color;
  font-size: 2.00em;
    font-size: 2.00em;
    &:after { color: $header-color; }
  }
}
.submenu {
    a, label { color: $header-color; }
}

.section {
  background: #4d2210 linear-gradient(#7d3a1f, #5a280d) repeat-x;
  border: 2px solid #5d2608;
  color: #cdc2b4;
  white-space: nowrap;
  border-width: 2px;
  color: adjust-color($background-color,
    $saturation: -54,
     $lightness: -10);
}
.sectionmenu {
  border-color: #9C5B2C;
  border-color: adjust-color($background-color,
    $saturation: -18,
     $lightness: -37);
}
.divider, .mainmenu, .section {
  background: linear-gradient(
      $sec-accent-color,
      $dark-sec-accent-color) repeat-x;

}
div.divider {
  /* The "Date" that occurs on the left hand side of timelines */
  border: 2px solid adjust-color($background-color,
    $saturation: -10,
     $lightness: -65);
  border-radius: 3px;
  clear: left;
  color: adjust-color($pri-accent-color, $saturation: -67, $lightness: +43);
  float: left;
  font-size: 1em;
  font-weight: normal;
  margin: 0.2em 0 0.2em 0;
  padding: 0.25em;
  white-space: nowrap;
}

.mainmenu {
  background: #4d2210 linear-gradient(#7d3a1f, #5a280d) repeat-x;
  border: 4px solid #5d2608;
  border-width: 4px;
  border-color: adjust-color($sec-accent-color,
      $saturation: +25,
       $lightness: -11);
  text-align: left;
}
.mainmenu a {
  border-right-color: #9C5B2C;
  color: #cdc2b4;
  padding: 10px 20px;
}
.mainmenu a.active, .mainmenu a:hover {
color: #fea204;
border-bottom: 2px solid #D26911;

  a {
    border-right-color: adjust-color($background-color,
        $saturation: -18,
         $lightness: -47);
    color: $mainmenu-text-color;
    padding: 10px 20px;
  }

  a.active, a:hover {
    color: $ter-accent-color;
    border-bottom-width: 2px;
  }
}
div#hbdrop {
  $hb-background-color: adjust-color($background-color,
      $saturation: -6,
       $lightness: +3);
    background-color: #f6dfcb;
    border-top: #f6dfcb;
  background-color: $hb-background-color;
  border-top:       $hb-background-color;
}

.submenu {
  border-bottom-color: #f5d6ba;
  border-bottom-color: $background-color;
}
.submenu a, .submenu label {
  color: #8d5403;
}

.footer {
  border-top: 1px solid #7b3e00;
  clear: both;
  font-size: 0.8em;
  margin-top: 10px;
  padding: 10px;
  text-align: right;
}


/**** Forum ****/

.forum div.markdown p,
    .forum div.markdown ol,
    .forum div.markdown ul,
    .forum h1,
    .forum h2,
    .forum h3,
    .forum h4,
    .forum h5,
    .forum p,
.forum {
    .forum pre,
    .tkt div.markdown p,
  div.markdown {
    .tkt div.markdown pre,
    .tkt div.markdown ol,
    .tkt div.markdown ul,
    .tkt h1,
    .tkt h2,
    h1, h2, h3, h4, h5, p, pre, ol, ul {
    .tkt h3,
    .tkt h4,
    .tkt h5,
    .tkt p,
    .tkt pre {
  /* Cancel the indents for Markdown on the forum and ticket pages: the default
   * view has the same basic effect of breaking sections up.
      /* Cancel the indents for Markdown on the forum pages: the default
         view has the same basic effect of breaking sections up. */
   */
  margin-left:  0;
  margin-right: 0;
}
      margin-left:  0;
      margin-right: 0;
    }

.forum div.markdown pre,
    .tkt div.markdown pre {
  /* Can't dial this back quite to 0 because of the VT bezel. */
  margin-left:  1em;
  margin-right: 1em;
}
    pre {
      /* Can't dial this back quite to 0 because of the VT bezel. */
      margin-left:  1em;
      margin-right: 1em;
    }

    $blockquote-color: adjust-color($background-color, 
      $saturation: -6,
       $lightness: -67);
.forum blockquote {
  background-color: rgba(77, 34, 16, 0.1);
  border-left: 3px solid rgb(77, 34, 16);
  padding: .1em 1em;
}
    blockquote {
      background-color: adjust-color($blockquote-color, $alpha: -0.9);
      border-left: 3px solid $blockquote-color;
      padding: .1em 1em;
    }
  }

div.forumSel {
  /* 5% black overlay, darkening the selected post's BG a bit,
   * overriding default skin's color tint: we get our tint from
   * the background instead. */
  background-color: rgba(0, 0, 0, 0.05);
  div.forumSel {
    /* 5% black overlay, darkening the selected post's BG a bit,
    * overriding default skin's color tint: we get our tint from
    * the background instead. */
    background-color: $tint-color-05pct;
  }
}


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

div.markdown p, div.markdown table { 
  margin-left: 50pt; 
  margin-right: 50pt; 
  line-height: 140%;
}
div.markdown pre, pre[class*="language-"] {
  background-color: #211d15;         /* phosphor glow in "black" areas */
  border: 0.25em solid #b38860;      /* faux CRT bezel, inner drop-off */
  border-radius: 1.2em;              /* big 1980s rounded corners */
  box-shadow: 0 0 0.1em 1em #ecb480; /* outer bezel */
  color: #e69b05;                    /* amber text; thus the skin's name! */
  hyphens: none;
  line-height: 1.25;
  margin: 2em 0 2em 1em;   /* compensate for outer bezel thickness */
  padding: 1em;                      /* text inset within CRT and bezel */
  tab-size: 8;                       /* PDP-8 era ASM requires it */
  text-shadow:                       /* text phosphor glow */
     .1em  .1em .15em #483204,
    -.1em -.1em .15em #483204;
}
div.markdown pre {
  margin-right: 5em;
}
div.markdown {
  p, table { 
    margin-left:  50pt; 
    margin-right: 50pt; 
    line-height: 140%;
  }

  pre {
    background-color: $vt-background-color; 
    border: 0.25em solid $vt-bezel-inner-color;
    border-radius: 1.2em;     /* big 1980s rounded corners */
    box-shadow: 0 0 0.1em 1em $vt-bezel-color;
    color: $vt-text-color;
    hyphens: none;
    line-height: 1.25;
    margin: 2em 5em 2em 5em;  /* compensate for outer bezel thickness */
    padding: 1em;             /* text inset within CRT and bezel */
    tab-size: 8;              /* PDP-8 era ASM requires it */
    text-shadow:                   
       0.1em  0.1em 0.15em $vt-text-shadow-color,
      -0.1em -0.1em 0.15em $vt-text-shadow-color;
  }

  .pikchr-wrapper {
    /* Back .content text size increase out to avoid blowing bounds
       of Pikchr objects, which are based on an assumed font size. */
    font-size: 0.9em; 
    &.indent { padding-left: 2em; }
    svg {
      path { stroke: $text-color !important; }
      text { fill: $text-color !important; }
    }
div.markdown > pre, div.markdown ul, div.markdown ol {
  margin-left: 5em;
}
  }
div.markdown ul ul, div.markdown ol ol {
  margin-left: 10pt;      /* extra indent at first level only */
}
ul li {
  list-style-type: disc;   /* normal bullets at all levels */
}
div.markdown ul {
  list-style-type: disc;
}
div.markdown li p, li pre {
  margin-left: 0;
}
div.markdown table {
  background-color: #f7e2cf;
  border: 1px solid #ecb480;
  border-radius: 6px;
  padding: 6px;
}
div.markdown th {
  border-bottom: 1px solid #df8a3e;
  padding-bottom: 4px;
  padding-right: 6px;
  text-align: left;
}
div.markdown td {
  padding-bottom: 4px;
  padding-right: 6px;
  text-align: left;

  ol, ul {
    /* Indent lists, but only at the first level */
    margin-left: 5em;
    ol, ul { margin-left: 10pt; }
  }
  ul li {
    list-style-type: disc;   /* normal bullets at all levels */
  }
  li p, li pre {
    margin-left: 0;
  }

  $md-table-color: adjust-color($background-color,
    $saturation: -3,
     $lightness: +4);
  table {
    background-color: $md-table-color;
    border: 1px solid adjust-color($md-table-color, $lightness: -20);
    border-radius: 6px;
    padding: 6px;
  }
  th {
    border-bottom: 1px solid adjust-color($md-table-color, $lightness: -5);
    padding-bottom: 4px;
    padding-right: 6px;
    text-align: left;
  }
  td {
    padding-bottom: 4px;
    padding-right: 6px;
    text-align: left;
  }
}


/**** Timeline ****/

td.timelineColumnarCell[id],
    td.timelineDetailCell[id],
    td.timelineModernCell[id],
    td.tktDspValue {
  background-color: rgba(0, 0, 0, 0.03);
  background-color: $tint-color-03pct;
  border-color: #446979;
  text-align: left;
  vertical-align: top;
}
tr.timelineCurrent {
  box-shadow: none;
  td.timelineModernCell {
    background-color: adjust-color($background-color,
        $saturation: -10,
        $lightness: +8);
    border-radius: 1em;
    box-shadow: 1px 1px 4px $tint-color-50pct;
   }
}
tr.timelineSelected {
  /* default.css 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.timelineSelected td.timelineModernCell,
    tr.timelineSelected td.timelineColumnarCell {
  background-color: #ffc;
  border: 2px solid #eed;
  border-radius: 1em;
tr.timelineSelected {
  td.timelineModernCell, td.timelineColumnarCell {
    background-color: #ffc;
    border: 2px solid #eed;
    border-radius: 1em;
  }
}


/**** Tickets ****/

.tkt {
  div.markdown {
    h1, h2, h3, h4, h5, p, pre, ol, ul {
      /* Same as the .forum markdown indent overrides */
      margin-left:  0;
      margin-right: 0;
    }
  }

table.report {
  border: 1px solid #e4c4a7;
  border-radius: 1em;
  margin: 1em 0;
}
table.report tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.7) !important;
}
table.report td, table.report th {
  border: 0;
  font-size: .8em;
  padding: 10px;
}
  table.report {
    border: 1px solid adjust-color($background-color,
      $saturation: -21,
       $lightness: -8);
    border-radius: 1em;
    margin: 1em 0;

    tbody tr:hover {
      background-color: $tint-alt-color-70pct !important;
    }

    td, th {
      border: 0;
      font-size: .8em;
      padding: 10px;
    }

td.tktTlClosed {
    td.tktTlClosed {
  color: #a07c5d;
}


      color: adjust-color($background-color, $lightness: -24);
    }
/**** Miscellaneous ****/

  }
/* The "Date" that occurs on the left hand side of timelines */
div.divider {
  background: #4d2210 linear-gradient(#7d3a1f, #5a280d) repeat-x;
  border: 2px solid #5d2608;
  border-radius: 3px;
  clear: left;
  color: #cdc2b4;
  float: left;
  font-size: 1em;
  font-weight: normal;
  margin: .2em 0 .2em 0;
  padding: .25em;
  white-space: nowrap;
}

/***********************************************************************
 amber-vt/early-vars.scss - Early variables used within ./css.scss.

 Copyright © 2020 by Warren Young.  Offered under ../../LICENSE.md.
***********************************************************************/

$background-color: hsl(28, 74, 85);
$vt-text-color:    hsl(40, 96, 46);
$tint-color:       black;
$tint-alt-color:   white;

/***********************************************************************
 amber-vt/late-vars.scss - Early variables used within ./css.scss.

 Copyright © 2020 by Warren Young.  Offered under ../../LICENSE.md.
***********************************************************************/

$text-color: adjust-color($background-color,
    $saturation: -46,
     $lightness: -57);

$pri-accent-color: adjust-color($background-color,
    $saturation: +22,
     $lightness: -57);
$sec-accent-color: adjust-color($background-color,
           $hue: -10,
    $saturation: -14,
     $lightness: -54);
$dark-sec-accent-color: adjust-color($sec-accent-color,
    $saturation: +15,
     $lightness: -11);
$ter-accent-color: adjust-color($pri-accent-color,
   $saturation: +13,
    $lightness: +20);

$header-color: adjust-color($background-color,
    $saturation: +21,
     $lightness: -57);
$footer-color: adjust-color($background-color,
    $saturation: +26,
     $lightness: -57);
$title-color: $header-color;

$mainmenu-text-color: adjust-color($pri-accent-color,
    $saturation: -70,
     $lightness: +42);

$tint-color-03pct:     adjust-color($tint-color,     $alpha: -0.97) !default;
$tint-color-05pct:     adjust-color($tint-color,     $alpha: -0.95) !default;
$tint-color-15pct:     adjust-color($tint-color,     $alpha: -0.85) !default;
$tint-color-50pct:     adjust-color($tint-color,     $alpha: -0.50) !default;
$tint-alt-color-70pct: adjust-color($tint-alt-color, $alpha: -0.30) !default;

$vt-background-color:   /* phosphor glow in "black" areas */
        adjust-color($vt-text-color, $saturation: -74, $lightness: -40)
        !default;
$vt-text-shadow-color:  /* text phosphor glow */
        adjust-color($vt-text-color, $saturation: -7, $lightness: -31)
        !default;
$vt-bezel-color: /* faux CRT outer bezel */
        adjust-color($background-color, $lightness: -14)
        !default;
$vt-bezel-inner-color: /* inner bezel drop-off */
        adjust-color($vt-bezel-color,
            $saturation: -39, $lightness: -17) !default;

  pre[class*="language-"] {
    text-shadow: none;
  }
}

/* Smartphone size devices only */
@media screen and (max-width: 600px) {
  /* Can't have indents and nice right margins on such small screens. */
  div.markdown p, div.markdown table { 
    margin: 0;
  div.markdown p,
      div.markdown pre,
      div.markdown h1,
      div.markdown h2,
      div.markdown h3,
      div.markdown h4,
      div.markdown h5,
      div.markdown ol,
      div.markdown ul,
      div.markdown table { 
    margin-left:  0;
    margin-right: 0;
  }

  /* Can't go to 0 for literal text blocks due to VT bezel */
  div.markdown pre {
    margin-left:  1em;
    margin-right: 1em;
  }
}

/* Tablet-sized mobile devices & desktops only */
@media screen and (min-width: 600px) {
  .mainmenu {
    letter-spacing: 1px;

}
@media screen and (max-width: 1000px) {
  /* Can't afford title + pagetitle + status on narrow screens. */
  .login-pfx, .status #clock {
    display: none;
  }
}

}
.token.entity {
  cursor: help;
}
.token.deleted {
  font-style: strikethrough;
}

/***********************************************************************
 base/css.scss - The "color" styles from Fossil's src/default.css with
 common/css.scss - The "color" styles from Fossil's src/default.css with
    the values replaced by SCSS variables.

 Copyright © by the Fossil authors.  Offered under license:
 https://www.fossil-scm.org/home/doc/trunk/COPYRIGHT-BSD2.txt

 See https://www.fossil-scm.org/home/finfo?name=src/default.css
 for authorship information.
***********************************************************************/

div.sidebox {
  background-color: $background-color;
}
span.disabled {
  color: $error-color;
}
tr.timelineCurrent {
  /* TODO: continue converting these colors to vars.scss so they can be
   * overridden with --define flags. */
  border-color: #446979;
}
.timelineSelected {
  border-color: $sec-accent-color;
  background-color: $light-sec-accent-color;
}
.timelineSecondary {

/***********************************************************************
 common/early-vars.scss - Early variables used within ./css.scss.

 Copyright © 2020 by Warren Young.  Offered under ../../LICENSE.md.
***********************************************************************/

$error-color: red;

/***********************************************************************
 common/late-vars.scss - Late variables used within ./css.scss.

 Copyright © 2020 by Warren Young.  Offered under ../../LICENSE.md.
***********************************************************************/

$dark-error-color: adjust-color($error-color, $lightness: -30) !default;

$error-color: red;
$dark-error-color: adjust-color($error-color, $lightness: -30);

$dark-text-color:          adjust-color($text-color,       $lightness: -27);
$light-text-color:         adjust-color($text-color,       $lightness: +20);
$dark-pri-accent-color:    adjust-color($pri-accent-color, $lightness: -46);
$light-sec-accent-color:   adjust-color($sec-accent-color, $lightness: +6);
$dark-sec-accent-color1:   adjust-color($sec-accent-color, $lightness: -6);
$dark-sec-accent-color2:   adjust-color($sec-accent-color, $lightness: -12);
$tooltip-background-color: adjust-color($pri-accent-color,
    $hue: if(hue($pri-accent-color) < 180deg, +180deg, -180deg),
    $saturation: +50,
    $lightness: +45);

 for authorship information.
 **********************************************************************/

/* Overall page style */

body {
  margin: 0 auto;
  @if $background-pattern != null {
    background: $background-pattern;
  } @else {
  background-color: $background-color;
    background-color: $background-color;
  }
  color: $text-color;
  font-family: sans-serif;
  font-size: 14pt;
     -moz-text-size-adjust: none;
      -mx-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

a {
a, a.active {
  color: $pri-accent-color;
  text-decoration: none;
}
a:hover {
  color: $pri-accent-color;
  color: $sec-accent-color;
  text-decoration: underline;
}


/* Page title, above menu bars */

.title {
  color: $pri-accent-color;
  color: $title-color;
  float: left;
}
.title h1 {
  display: inline;
}
.title h1:after {
  content: " / ";

/* Main menu and optional sub-menu */

.mainmenu {
  font-size: 0.8em;
  clear: both;
  background: linear-gradient(
      $light-sec-accent-color,
  background: $sec-accent-color linear-gradient($light-sec-accent-color, $sec-accent-color) repeat-x;
      $sec-accent-color) repeat-x;
  border: 1px solid $sec-accent-color;
  border-radius: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  z-index: 21;  /* just above hbdrop */
}
.mainmenu a {
  text-decoration: none;
  color: $light-text-color;
  border-right: 1px solid $sec-accent-color;
}
.mainmenu a.active,
.mainmenu a:hover {
  color: $dark-text-color;
  border-bottom: 2px solid $pri-accent-color;
  border-bottom: 2px solid $ter-accent-color;
}
div#hbdrop {
  background-color: $background-color;
  border: 1px solid $dark-text-color;
  border-top: $background-color;
  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: .7em;
  padding: 10px;
  border-bottom: 1px solid $dark-sec-accent-color2;
  border-bottom: 1px solid $dark-sec-accent-color;
}
.submenu a, .submenu label {
  padding: 10px 11px;
  text-decoration: none;
  color: $light-text-color;
}
.submenu label {
  white-space: nowrap;
}
.submenu a:hover, .submenu label:hover {
  padding: 6px 10px;
  border: 1px solid $dark-sec-accent-color2;
  border: 1px solid $dark-sec-accent-color;
  border-radius: 5px;
  color: $dark-text-color;
}
span.submenuctrl, span.submenuctrl input, select.submenuctrl {
  color: $light-text-color;
}
span.submenuctrl {
  white-space: nowrap;
}


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

.content {
  padding-top: 10px;
  font-size: 0.8em;
  color: $text-color;

  h1, h2, h3, h4, h5 {
    color: $header-color;
  }
}
.content blockquote {
  padding: 0 15px;
}
.content h1 {
  font-size: 1.25em;
}
.content h2 {
  font-size: 1.15em;
}
.content h3 {
  font-size: 1.05em;
}

.section {
  font-size: 1em;
  font-weight: bold;
  background-color: $light-sec-accent-color;
  border: 1px solid $dark-sec-accent-color1;
  border: 1px solid $dark-sec-accent-color;
  border-radius: 3px 3px 0 0;
  padding: 9px 10px 10px;
  margin: 10px 0;
}
.sectionmenu {
  border: 1px solid $dark-sec-accent-color1;
  border: 1px solid $dark-sec-accent-color;
  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: $sec-accent-color;
}


/* Page footer */

.footer {
  border-top: 1px solid $dark-sec-accent-color2;
  border-top: 1px solid $footer-color;
  padding: 10px;
  font-size: 0.7em;
  margin-top: 10px;
  color: $dark-sec-accent-color2;
  color: $footer-color;
}


/* Exceptions for /info diff views */

.udiff, .sbsdiff {
  font-size: .85em !important;
  overflow: auto;
  border: 1px solid $dark-sec-accent-color2;
  border: 1px solid $dark-sec-accent-color;
  border-radius: 5px;
}


/* Forum */

.forum a:visited {

/* Tickets */

table.report {
  cursor: auto;
  border-radius: 5px;
  border: 1px solid $dark-sec-accent-color2;
  border: 1px solid $dark-sec-accent-color;
  margin: 1em 0;
}
.report td, .report th {
 border: 0;
 font-size: .8em;
 padding: 10px;
}

.report tbody tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}
.report th {
  cursor: pointer;
}
.report thead+tbody tr:hover {
  background-color: $dark-pri-accent-color !important;
  background-color: $darker-pri-accent-color !important;
}

td.tktDspLabel {
  width: 70px;
  text-align: right;
  overflow: hidden;
}
td.tktDspValue {
  text-align: left;
  vertical-align: top;
  background-color: $light-sec-accent-color;
  border: 1px solid $dark-sec-accent-color2;
  border: 1px solid $dark-sec-accent-color;
}
td.tktDspValue pre {
  white-space: pre-wrap;
}


/* Timeline */

/***********************************************************************
 default/early-vars.scss - Early variables used within ./css.scss.

 Copyright © 2020 by Warren Young.  Offered under ../../LICENSE.md.
***********************************************************************/

$text-color:       hsl(0, 0, 27);       /* #454545 */
$pri-accent-color: hsl(210, 53, 51);    /* #4082C4 */
$sec-accent-color: hsl(0, 0, 92);       /* #EBEBEB */
$background-color: white;               /* #FFFFFF */

/***********************************************************************
 default/late-vars.scss - Late variables used within ./css.scss.

 Copyright © 2020 by Warren Young.  Offered under ../../LICENSE.md.
***********************************************************************/

$header-color: $text-color !default;
$footer-color: adjust-color($text-color, $lightness: +40) !default;
$title-color:  $pri-accent-color !default;

$background-pattern: null !default;

$dark-pri-accent-color:    adjust-color($pri-accent-color, $lightness: -12) !default;
$dark-sec-accent-color:    adjust-color($sec-accent-color, $lightness: -12) !default;
$dark-text-color:          adjust-color($text-color,       $lightness: -27) !default;
$darker-pri-accent-color:  adjust-color($pri-accent-color, $lightness: -46) !default;

$light-pri-accent-color:   adjust-color($pri-accent-color, $lightness: +6)  !default;
$light-sec-accent-color:   adjust-color($sec-accent-color, $lightness: +6)  !default;
$light-text-color:         adjust-color($text-color,       $lightness: +20) !default;

$ter-accent-color:         invert($pri-accent-color) !default;

$tooltip-background-color: adjust-color($pri-accent-color,
    $hue: if(hue($pri-accent-color) < 180deg, +180deg, -180deg),
    $saturation: +50, $lightness: +45) !default;

}
@media screen and (max-width: 1200px) {
  /* Special declarations for narrow desktop or wide mobile */
  .wideonly {
    display: none;
  }
}

$text-color:       #444;        /* 27% lightness */
$background-color: white;
$pri-accent-color: #4183C4;     /* hsl(210, 53, 51) */
$sec-accent-color: #EAEAEA;     /* 92% lightness */