Inskinerator

Check-in Differences
Log In

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Difference From 96fce438341924e2 To 5e03b32ccb388f86

2020-11-10
11:03
Many improvements to the docs. check-in: d8fb3c6a2c user: tangent tags: trunk
2020-11-09
14:06
Rebuilt the Amber VT skin override so that it derives most other colors from the background color rather than the text-color, which in turn allows the new "Paperwhite VT" skin to be derived, completing the initial demo skin set. check-in: 5e03b32ccb user: tangent tags: trunk
11:13
Reworked the "adjust" and "late-vars" features to allow for the first Amber VT derivative: "green bar". check-in: 6b73476a58 user: tangent tags: trunk
01:11
Adjustments to @media for Amber VT for the smartphone case. check-in: 1f0899542c user: tangent tags: trunk
00:27
Documented the Inskinerator processing model check-in: 96fce43834 user: tangent tags: trunk
00:23
Moved the prism.js CSS up to before @media. Should have zero practical effect, but makes the processing model easier to think about. check-in: 06a64102ed user: tangent tags: trunk

Changes to README.md.

18
19
20
21
22
23
24
25


26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47








48
49
50
51
52
53
54
18
19
20
21
22
23
24

25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45



46
47
48
49
50
51
52
53
54
55
56
57
58
59
60







-
+
+



















-
-
-
+
+
+
+
+
+
+
+









## 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:

66
67
68
69
70
71
72

73
74
75










76
77
78
79
80


81
82


83
84
85
86
87
88
89
90
91


92
93
94


95
96
97


98
99
100
101
102
103
104
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

101
102
103
104
105
106
107
108
109


110
111
112
113
114
115
116
117
118

119
120
121
122
123
124
125
126
127







+



+
+
+
+
+
+
+
+
+
+





+
+

-
+
+







-
-
+
+



+
+


-
+
+








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
115
116
117
118
119
120
121

122
123
124
125
126
127
128
129
130
131
132


































133
134
135
136
137
138
139
140
141
142
143
144
145
146

147
148

149
150
151
152

153
154
155
156


157
158

159
160
161
162
163
164
165
166
167
168
169
170

171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192




193
194
195
196
197
198
199








200
201

202
203
204
205
206
207





208
209
210
211
212























138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203

204
205

206
207
208
209

210




211
212
213

214
215
216
217
218
219
220
221
222
223
224
225

226






227
228
229
230
231
232
233
234
235
236
237
238
239
240


241
242
243
244
245






246
247
248
249
250
251
252
253


254
255





256
257
258
259
260
261




262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284







+











+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+













-
+

-
+



-
+
-
-
-
-
+
+

-
+











-
+
-
-
-
-
-
-














-
-
+
+
+
+

-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
+

-
-
-
-
-
+
+
+
+
+

-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
[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.

Changes to inskinerator.

46
47
48
49
50
51
52
53


54
55
56
57


58

59
60












61
62
63
64
65




66
67
68
69
70
71
72
73
74
75


76
77
78
79
80
81
82
83
84







85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102



103
104
105
106
107
108
109
110
111





112
113
114
115
116
117





118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
























134










135



136
137
138
139
140
141
142
143
144
145
146
147
148
149
150



151
152
153
154
155
156
157
46
47
48
49
50
51
52

53
54
55
56
57
58
59
60
61
62


63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

79
80
81
82
83
84
85
86
87
88
89
90
91

92
93
94
95
96
97





98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120


121
122
123
124
125
126
127





128
129
130
131
132
133





134
135
136
137
138
139
140
141













142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

177
178
179
180
181
182
183
184
185
186
187
188
189
190
191



192
193
194
195
196
197
198
199
200
201







-
+
+




+
+

+
-
-
+
+
+
+
+
+
+
+
+
+
+
+




-
+
+
+
+









-
+
+




-
-
-
-
-
+
+
+
+
+
+
+
















-
-
+
+
+




-
-
-
-
-
+
+
+
+
+

-
-
-
-
-
+
+
+
+
+



-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+
+
+
-
+
+
+












-
-
-
+
+
+







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

Changes to skins/amber-vt/css.scss.

1
2
3
4
5
6
7
8
9
10
11
12
13
14


15
16

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

34

35
36
37
38
39
40
41
1
2
3
4
5
6
7
8
9





10
11


12

13
14












15

16
17
18
19
20
21
22
23
24
25









-
-
-
-
-
+
+
-
-
+
-


-
-
-
-
-
-
-
-
-
-
-
-

-
+

+







/***********************************************************************
 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,
63
64
65
66
67
68
69
70
71


72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

92
93
94
95

96
97
98
99
100
101






102


103






104
105
106
107
108
109
110




111
112
113



114




115

















116
117
118




119
120
121
122
123
124
125
126
127
128













129
130



131
132


133
134
135
136

137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

163
164

165
166
167
168
169

170
171
172
173
174
175
176


177
178
179
180



181
182
183
184
185
186
187





188



189
190
191
192
193






194
195
196
197
198
199






200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
































228
229
230

231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258

































259
260
261
262
263
264
265
266
267
268

269
270
271
272










273



274
275
276
277
278
279
280
281
282






283
284
285
286
287









288
289
290
291
292
293
294
295
296
297
298
299
300
















301
302

303
304
305
306


307
308

309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
47
48
49
50
51
52
53


54
55
56
57
58
59
60
61
62






63
64
65
66
67
68

69




70






71
72
73
74
75
76
77
78
79

80
81
82
83
84
85
86
87
88




89
90
91
92
93
94

95
96
97
98
99
100
101
102

103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120


121
122
123
124
125









126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143


144
145
146
147
148

149



150
151
152





153
154
155
156
157
158









159


160





161







162
163




164
165
166
167






168
169
170
171
172
173
174
175
176





177
178
179
180
181
182
183





184
185
186
187
188
189
190
191
192
193
194























195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226



227




























228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269

270

271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291





292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311













312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328

329




330
331


332













333








-
-
+
+







-
-
-
-
-
-






-
+
-
-
-
-
+
-
-
-
-
-
-
+
+
+
+
+
+

+
+
-
+
+
+
+
+
+



-
-
-
-
+
+
+
+


-
+
+
+

+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

-
-
+
+
+
+

-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+


+
+
+
-
-
+
+



-
+
-
-
-



-
-
-
-
-






-
-
-
-
-
-
-
-
-
+
-
-
+
-
-
-
-
-
+
-
-
-
-
-
-
-
+
+
-
-
-
-
+
+
+

-
-
-
-
-
-
+
+
+
+
+

+
+
+
-
-
-
-
-
+
+
+
+
+
+

-
-
-
-
-
+
+
+
+
+
+





-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+









-
+
-



+
+
+
+
+
+
+
+
+
+

+
+
+




-
-
-
-
-
+
+
+
+
+
+





+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

-
+
-
-
-
-
+
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-

-

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

Added skins/amber-vt/early-vars.scss.











1
2
3
4
5
6
7
8
9
10
+
+
+
+
+
+
+
+
+
+
/***********************************************************************
 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;

Added skins/amber-vt/late-vars.scss.























































1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/***********************************************************************
 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;

Changes to skins/amber-vt/media.scss.

10
11
12
13
14
15
16

17
18


















19
20
21
22
23
24
25
10
11
12
13
14
15
16
17


18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42







+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+







  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;
39
40
41
42
43
44
45
46
56
57
58
59
60
61
62








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

Changes to skins/amber-vt/prism.scss.

54
55
56
57
58
59
60
61
54
55
56
57
58
59
60








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

Changes to skins/common/css.scss.

1
2

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


19
20
21
22
23
24
25
1

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

-
+
















+
+







/***********************************************************************
 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 {

Added skins/common/early-vars.scss.








1
2
3
4
5
6
7
+
+
+
+
+
+
+
/***********************************************************************
 common/early-vars.scss - Early variables used within ./css.scss.

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

$error-color: red;

Added skins/common/late-vars.scss.








1
2
3
4
5
6
7
+
+
+
+
+
+
+
/***********************************************************************
 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;

Deleted skins/common/vars.scss.

1
2


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

Deleted skins/default/adjust.scss.

1
2
3
4
5
6
7
8
9
10
11











-
-
-
-
-
-
-
-
-
-
-
$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);

Changes to skins/default/css.scss.

9
10
11
12
13
14
15



16



17
18
19
20
21
22
23
24

25
26
27
28
29

30
31
32
33
34
35
36
37

38
39
40
41
42
43
44
9
10
11
12
13
14
15
16
17
18

19
20
21
22
23
24
25
26
27
28

29
30
31
32
33

34
35
36
37
38
39
40
41

42
43
44
45
46
47
48
49







+
+
+
-
+
+
+







-
+




-
+







-
+







 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: " / ";
52
53
54
55
56
57
58


59

60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

95
96
97
98
99
100
101
102
103
104
105
106

107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123




124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

143
144
145
146
147
148

149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

169
170
171
172

173
174
175
176
177
178
179
180
181

182
183
184
185
186
187
188
57
58
59
60
61
62
63
64
65

66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

101
102
103
104
105
106
107
108
109
110
111
112

113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

153
154
155
156
157
158

159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

179
180
181
182

183
184
185
186
187
188
189
190
191

192
193
194
195
196
197
198
199







+
+
-
+















-
+


















-
+











-
+

















+
+
+
+


















-
+





-
+



















-
+



-
+








-
+









/* 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 {
197
198
199
200
201
202
203
204

205
206
207
208
209
210
211
208
209
210
211
212
213
214

215
216
217
218
219
220
221
222







-
+









/* 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;
}
225
226
227
228
229
230
231
232

233
234
235
236
237
238
239
240
241
242
243
244

245
246
247
248
249
250
251
236
237
238
239
240
241
242

243
244
245
246
247
248
249
250
251
252
253
254

255
256
257
258
259
260
261
262







-
+











-
+







.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 */

Added skins/default/early-vars.scss.











1
2
3
4
5
6
7
8
9
10
+
+
+
+
+
+
+
+
+
+
/***********************************************************************
 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 */

Added skins/default/late-vars.scss.



























1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/***********************************************************************
 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;

Changes to skins/default/media.scss.

50
51
52
53
54
55
56
57
58
59
60
61
50
51
52
53
54
55
56












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





Deleted skins/default/vars.scss.

1
2
3
4




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