Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Difference From 5e03b32ccb388f86 To 96fce438341924e2
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 | ## Usage #### Synopsis ./inskinerator --base/-b BASE [--override/-o OVERRIDE] | | < | < < < < < | | | 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 | ## Usage #### Synopsis ./inskinerator --base/-b BASE [--override/-o OVERRIDE] [--output/-f OUTPUT] [--define/-D 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. #### <a id="ex-simple"></a> Simple Examples: Adjusting the Default Skin Rebuild the Fossil default skin’s CSS: |
︙ | ︙ | |||
72 73 74 75 76 77 78 | 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 \ | < < < < < < < < < < < < < | < | | < < | < | 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 | 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 background-color=black \ -D pri-accent-color=red \ -D sec-accent-color=darkorange Or, you can use HTML RGB specs to create this [“PDP-11/70” theme][d3]: ./inskinerator -b default \ -D text-color=\#000 \ -D pri-accent-color=\#B3003B \ -D sec-accent-color=\#AE98CD 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: ./inskinerator -b default \ -D text-color=\#003300 \ -D background-color=mintcream \ -D pri-accent-color=lightseagreen \ -D sec-accent-color=\#CCFFE6 [Fizzbuck Light][d5]: ./inskinerator -b default \ -D text-color=black \ -D pri-accent-color=\#3B579A \ -D sec-accent-color=lightgray |
︙ | ︙ | |||
138 139 140 141 142 143 144 | [d2]: /draft2/timeline [d3]: /draft3/timeline [d4]: /draft4/timeline [d5]: /draft5/timeline [d6]: /draft6/timeline [d7]: /draft7/timeline [d8]: /draft8/timeline | < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | | | > > | | | | > > > > > > | | < < > | < | < | < | | > | | | | | | | | | | < < < < < < < < < < < < < < < < < < < | 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 | [d2]: /draft2/timeline [d3]: /draft3/timeline [d4]: /draft4/timeline [d5]: /draft5/timeline [d6]: /draft6/timeline [d7]: /draft7/timeline [d8]: /draft8/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 [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" arrow 50% box "base vars" arrow same box dotted "override vars" "(if available)" arrow same DV: box dotted "--define vars" "(if any)" 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 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 \ 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. 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. |
Changes to inskinerator.
︙ | ︙ | |||
46 47 48 49 50 51 52 | # 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] \ | | < < < < | < < | < < < < < < < < | < < < | < | | | < | | < | | < | | | | | | | | | | | < | < < | | | < < | | < < < < < < | | | | | | < < < < < < < < < < | < < | | | | 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 | # 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] All skins allow overriding at least these variables: -D text-color=COLOR -D background-color=COLOR -D pri-accent-color=COLOR -D sec-accent-color=COLOR 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. USAGE exit 1; } #### main ############################################################## # Parse the command line my ($base, $override, $output_file, %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, ) 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 $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); 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'); } # 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 $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"; 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 | /*********************************************************************** 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 ****/ | > > > | | > | > > > > > > > > > > > > > | < | 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 | /*********************************************************************** 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: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; } img { border: 1px solid #8d5403; border-radius: 16px; } 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, |
︙ | ︙ | |||
47 48 49 50 51 52 53 | .content { font-size: 1em; padding: 0ex 1ex 1ex 1ex; } .debug { | | | > > > > > > | > > > | > | | | | | < < < | < < < < < > | | | < | < < < < < < | < < < < < < < < < < < < < < < < > | < < < | | | < < | | | < | | | < < < < | | | > > > > > > > > > > > > > > > > | > | > > > > | > > > > > | | > | | | > | | | | | < < < | | | | < | | | | | | < | < | | | | | < | | | | | | | | | | | | | | | < < < | < < < < | > > | > > | | | < < | | | | | | | < < < < | | | | | | | | | | | | | | | | < | > < < < < < < < < < < < < < | | | | | < < < < < < < < < < | | < < | | | | | | | < | | | | | > > | | > | > > > > > > > > > > > > > > | 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 | .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); 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; } .title { font-size: 2.00em; } .section { background: #4d2210 linear-gradient(#7d3a1f, #5a280d) repeat-x; border: 2px solid #5d2608; color: #cdc2b4; white-space: nowrap; } .sectionmenu { border-color: #9C5B2C; } .mainmenu { background: #4d2210 linear-gradient(#7d3a1f, #5a280d) repeat-x; border: 4px solid #5d2608; 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; } div#hbdrop { background-color: #f6dfcb; border-top: #f6dfcb; } .submenu { border-bottom-color: #f5d6ba; } .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 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); } /**** 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; } /**** Timeline ****/ td.timelineColumnarCell[id], td.timelineDetailCell[id], td.timelineModernCell[id], td.tktDspValue { background-color: rgba(0, 0, 0, 0.03); border-color: #446979; text-align: left; vertical-align: top; } tr.timelineSelected { 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; } /**** 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; } |
Deleted skins/amber-vt/early-vars.scss.
|
| < < < < < < < < < < |
Deleted skins/amber-vt/late-vars.scss.
|
| < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < |
Changes to skins/amber-vt/media.scss.
︙ | ︙ | |||
10 11 12 13 14 15 16 | pre[class*="language-"] { text-shadow: none; } } /* Smartphone size devices only */ @media screen and (max-width: 600px) { | < | < < < < < < < < < | < < < < < < < | 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | pre[class*="language-"] { text-shadow: none; } } /* Smartphone size devices only */ @media screen and (max-width: 600px) { div.markdown p, div.markdown table { margin: 0; } } /* Tablet-sized mobile devices & desktops only */ @media screen and (min-width: 600px) { .mainmenu { letter-spacing: 1px; |
︙ | ︙ | |||
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; } } | > | 39 40 41 42 43 44 45 46 | } @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 | } .token.entity { cursor: help; } .token.deleted { font-style: strikethrough; } | > | 54 55 56 57 58 59 60 61 | } .token.entity { cursor: help; } .token.deleted { font-style: strikethrough; } |
Changes to skins/common/css.scss.
1 | /*********************************************************************** | | < < | 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 | /*********************************************************************** base/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 { border-color: #446979; } .timelineSelected { border-color: $sec-accent-color; background-color: $light-sec-accent-color; } .timelineSecondary { |
︙ | ︙ |
Deleted skins/common/early-vars.scss.
|
| < < < < < < < |
Deleted skins/common/late-vars.scss.
|
| < < < < < < < |
Added skins/common/vars.scss.
> > | 1 2 | $error-color: red; $dark-error-color: adjust-color($error-color, $lightness: -30); |
Added 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 | for authorship information. **********************************************************************/ /* Overall page style */ body { margin: 0 auto; | < < < | < < | | | | 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 | for authorship information. **********************************************************************/ /* Overall page style */ body { margin: 0 auto; background-color: $background-color; font-family: sans-serif; font-size: 14pt; -moz-text-size-adjust: none; -mx-text-size-adjust: none; -webkit-text-size-adjust: none; } a { color: $pri-accent-color; text-decoration: none; } a:hover { color: $pri-accent-color; text-decoration: underline; } /* Page title, above menu bars */ .title { color: $pri-accent-color; float: left; } .title h1 { display: inline; } .title h1:after { content: " / "; |
︙ | ︙ | |||
57 58 59 60 61 62 63 | /* Main menu and optional sub-menu */ .mainmenu { font-size: 0.8em; clear: both; | < | < | | | < < < < | | | | | | 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 | /* 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; 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; } 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; } .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-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; } .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-radius: 3px 3px 0 0; padding: 9px 10px 10px; margin: 10px 0; } .sectionmenu { border: 1px solid $dark-sec-accent-color1; 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; padding: 10px; font-size: 0.7em; margin-top: 10px; color: $dark-sec-accent-color2; } /* Exceptions for /info diff views */ .udiff, .sbsdiff { font-size: .85em !important; overflow: auto; border: 1px solid $dark-sec-accent-color2; border-radius: 5px; } /* Forum */ .forum a:visited { |
︙ | ︙ | |||
208 209 210 211 212 213 214 | /* Tickets */ table.report { cursor: auto; border-radius: 5px; | | | 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 | /* Tickets */ table.report { cursor: auto; border-radius: 5px; border: 1px solid $dark-sec-accent-color2; margin: 1em 0; } .report td, .report th { border: 0; font-size: .8em; padding: 10px; } |
︙ | ︙ | |||
236 237 238 239 240 241 242 | .report tbody tr:last-child td:last-child { border-bottom-right-radius: 5px; } .report th { cursor: pointer; } .report thead+tbody tr:hover { | | | | 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 | .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; } 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; } td.tktDspValue pre { white-space: pre-wrap; } /* Timeline */ |
︙ | ︙ |
Deleted skins/default/early-vars.scss.
|
| < < < < < < < < < < |
Deleted skins/default/late-vars.scss.
|
| < < < < < < < < < < < < < < < < < < < < < < < < < < |
Changes to skins/default/media.scss.
︙ | ︙ | |||
50 51 52 53 54 55 56 | } @media screen and (max-width: 1200px) { /* Special declarations for narrow desktop or wide mobile */ .wideonly { display: none; } } | > > > > > | 50 51 52 53 54 55 56 57 58 59 60 61 | } @media screen and (max-width: 1200px) { /* Special declarations for narrow desktop or wide mobile */ .wideonly { display: none; } } |
Added 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 */ |