Index: README.md ================================================================== --- README.md +++ README.md @@ -20,11 +20,12 @@ ## 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 * **--base/-b:** Give the base skin to generate the output @@ -40,13 +41,18 @@ with files from `skins/OVERRIDE/*.scss`. * **--output/-f:** Write output to the named `OUTPUT` file rather than to stdout, as is the default. -* **--define/-D:** 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. +* **--define/-D:** 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`. + +* **--late-define/-L:** 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. #### Simple Examples: Adjusting the Default Skin @@ -68,35 +74,52 @@ 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 \ @@ -117,10 +140,11 @@ [d4]: /draft4/timeline [d5]: /draft5/timeline [d6]: /draft6/timeline [d7]: /draft7/timeline [d8]: /draft8/timeline +[d9]: /draft9/timeline #### Advanced Examples: Applying Skin Overrides Rather than simply supply overrides for the four key colors as in the @@ -128,10 +152,44 @@ 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/ #### Processing Model @@ -141,23 +199,21 @@ `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)" + arrow same +LV: box dotted "late vars" -BA: box dotted "base" "adjustments" at 0.8 below CV - arrow 50% -OA: box dotted "override" "adjustments" - -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 @@ -165,17 +221,11 @@ BM: box dotted "base" "@media" at 0.8 below CC arrow 50% OM: box dotted "override" "@media" -arrow right 0.2 from DV.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 \ +arrow right 0.2 from LV.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 @@ -186,27 +236,49 @@ 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. - -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): - each output generates the gradient range using the same - [stock adjustment calculations](/file/skins/default/adjust.scss). - -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`. - -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. +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`. + + 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 + calculations that produce *other* variables. + +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`. + +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. + + +## 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. Index: inskinerator ================================================================== --- inskinerator +++ inskinerator @@ -48,42 +48,62 @@ sub usage { my ($error) = @_; print "ERROR: $error!\n\n" if defined $error; print < \$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 = ( @@ -96,45 +116,69 @@ 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; - -# Compile and strip it +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. 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}{}; @@ -143,15 +187,15 @@ # Output my $header = <: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; } Index: skins/amber-vt/css.scss ================================================================== --- skins/amber-vt/css.scss +++ skins/amber-vt/css.scss @@ -5,35 +5,19 @@ 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:hover, div.forumPosts a:visited { - color: #643c14; -} - -body { - background-color: #f5d6ba; -} -body, .content, .footer { - color: #5d4734; -} - -hr { - /* Commonly for separating footer elements */ - border: 1px solid #7b3e00; +a:visited { + color: dark-pri-accent-color; + div.forumPosts { color: $sec-accent-color; } } 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, @@ -65,259 +49,285 @@ 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 { - font-size: 60%; /* subtitle decreased from "h1" title size */ -} -.header .status, .header .title { - font-weight: bold; -} -.header .status { - color: #8d5403; - text-align: right; - white-space: nowrap; +.header { + .status, .title { font-weight: bold; } + .status { + color: $header-color; + text-align: right; + white-space: nowrap; + } } .title { - font-size: 2.00em; + h1 { + color: $title-color; + 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 { - background-color: #f6dfcb; - border-top: #f6dfcb; + $hb-background-color: adjust-color($background-color, + $saturation: -6, + $lightness: +3); + background-color: $hb-background-color; + border-top: $hb-background-color; } .submenu { - border-bottom-color: #f5d6ba; -} -.submenu a, .submenu label { - color: #8d5403; + border-bottom-color: $background-color; } .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 pre, - .tkt div.markdown p, - .tkt div.markdown pre, - .tkt div.markdown ol, - .tkt div.markdown ul, - .tkt h1, - .tkt h2, - .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. - */ - 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; -} - -.forum blockquote { - background-color: rgba(77, 34, 16, 0.1); - border-left: 3px solid rgb(77, 34, 16); - 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); +.forum { + div.markdown { + h1, h2, h3, h4, h5, p, pre, ol, ul { + /* 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; + } + + 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); + 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: $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 > 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; +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; } + } + } + + 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); - border-color: #446979; + background-color: $tint-color-03pct; 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 ****/ -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; -} - -td.tktTlClosed { - color: #a07c5d; -} - - -/**** 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; -} - +.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 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 { + color: adjust-color($background-color, $lightness: -24); + } + } +} ADDED skins/amber-vt/early-vars.scss Index: skins/amber-vt/early-vars.scss ================================================================== --- /dev/null +++ skins/amber-vt/early-vars.scss @@ -0,0 +1,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 Index: skins/amber-vt/late-vars.scss ================================================================== --- /dev/null +++ skins/amber-vt/late-vars.scss @@ -0,0 +1,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; Index: skins/amber-vt/media.scss ================================================================== --- skins/amber-vt/media.scss +++ skins/amber-vt/media.scss @@ -12,12 +12,29 @@ } } /* Smartphone size devices only */ @media screen and (max-width: 600px) { - div.markdown p, div.markdown table { - margin: 0; + /* Can't have indents and nice right margins on such small screens. */ + 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) { @@ -41,6 +58,5 @@ /* Can't afford title + pagetitle + status on narrow screens. */ .login-pfx, .status #clock { display: none; } } - Index: skins/amber-vt/prism.scss ================================================================== --- skins/amber-vt/prism.scss +++ skins/amber-vt/prism.scss @@ -56,6 +56,5 @@ cursor: help; } .token.deleted { font-style: strikethrough; } - Index: skins/common/css.scss ================================================================== --- skins/common/css.scss +++ skins/common/css.scss @@ -1,7 +1,7 @@ /*********************************************************************** - 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 @@ -14,10 +14,12 @@ } 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; ADDED skins/common/early-vars.scss Index: skins/common/early-vars.scss ================================================================== --- /dev/null +++ skins/common/early-vars.scss @@ -0,0 +1,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 Index: skins/common/late-vars.scss ================================================================== --- /dev/null +++ skins/common/late-vars.scss @@ -0,0 +1,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 Index: skins/common/vars.scss ================================================================== --- skins/common/vars.scss +++ /dev/null @@ -1,2 +0,0 @@ -$error-color: red; -$dark-error-color: adjust-color($error-color, $lightness: -30); DELETED skins/default/adjust.scss Index: skins/default/adjust.scss ================================================================== --- skins/default/adjust.scss +++ /dev/null @@ -1,11 +0,0 @@ -$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); - Index: skins/default/css.scss ================================================================== --- skins/default/css.scss +++ skins/default/css.scss @@ -11,32 +11,37 @@ /* Overall page style */ body { margin: 0 auto; - background-color: $background-color; + @if $background-pattern != null { + background: $background-pattern; + } @else { + 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; } @@ -54,11 +59,13 @@ /* Main menu and optional sub-menu */ .mainmenu { font-size: 0.8em; clear: both; - background: $sec-accent-color linear-gradient($light-sec-accent-color, $sec-accent-color) repeat-x; + background: linear-gradient( + $light-sec-accent-color, + $sec-accent-color) repeat-x; border: 1px solid $sec-accent-color; border-radius: 5px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; @@ -70,11 +77,11 @@ 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; @@ -89,11 +96,11 @@ } .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; @@ -101,11 +108,11 @@ .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; @@ -119,10 +126,14 @@ .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 { @@ -137,17 +148,17 @@ .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; @@ -163,24 +174,24 @@ /* 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 */ @@ -199,11 +210,11 @@ /* 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; @@ -227,11 +238,11 @@ } .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; @@ -239,11 +250,11 @@ } 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; } ADDED skins/default/early-vars.scss Index: skins/default/early-vars.scss ================================================================== --- /dev/null +++ skins/default/early-vars.scss @@ -0,0 +1,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 Index: skins/default/late-vars.scss ================================================================== --- /dev/null +++ skins/default/late-vars.scss @@ -0,0 +1,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; Index: skins/default/media.scss ================================================================== --- skins/default/media.scss +++ skins/default/media.scss @@ -52,10 +52,5 @@ /* Special declarations for narrow desktop or wide mobile */ .wideonly { display: none; } } - - - - - DELETED skins/default/vars.scss Index: skins/default/vars.scss ================================================================== --- skins/default/vars.scss +++ /dev/null @@ -1,4 +0,0 @@ -$text-color: #444; /* 27% lightness */ -$background-color: white; -$pri-accent-color: #4183C4; /* hsl(210, 53, 51) */ -$sec-accent-color: #EAEAEA; /* 92% lightness */