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
|
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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
|
-
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
|
hr {
color: #eee;
}
/* Page footer */
.footer {
footer {
border-top: 1px solid #ccc;
padding: 10px;
font-size: 0.7em;
font-size: 0.8em;
margin-top: 10px;
color: #ccc;
}
/* Forum */
.forum a:visited {
color: #6A7F94;
}
.forum blockquote {
div.forumSel {
animation: 1s linear 0s sel-fade;
background-color: white; /* animation end state */
border-left: 4px solid black; /* after-animation selection indicator */
}
@keyframes sel-fade {
from { background-color: #cef; }
to { background-color: white; }
}
.forum form input {
margin: 0.5em 0;
}
/* Markdown and Wiki-formatted pages: /wiki, /doc, /file... */
.markdown blockquote, p.blockquote, .sidebar {
/* Override default.css version with our accent colors. */
background-color: rgba(65, 131, 196, 0.1);
border-left: 3px solid #254769;
padding: .1em 1em;
border-left-color: #4183c4;
}
/* Mark inline code fragments in the near-universal manner pioneered by
* Stack Overflow, then picked up by approximately everyone, including
* us, now.
*
* This combinatoric selector explosion results from a need to apply
* these stylings inside multiple page container types, multiplied by
* the surprisingly large number of tags HTML defines for semantically
* differentiated monospaced inline markup. If we do not target the
* elements we want to affect carefully, we'll end up overreaching,
* styling Fossil UI elements that use these tags for local purposes.
*
* HTML generated and emitted by Fossil UI does not always fall under
* the skin's generic rules; we must avoid intruding on its domain.
* Our limited intent here is to style user content only, where it is
* unreasonable to expect its author to take the time to hand-craft
* per-document styling. Contrast Fossil UI, which often does exactly
* that in order to get particular results.
*
* The equivalent Sass syntax is far more compact, thus clearer:
*
* .artifact, .dir, .doc, .wiki // the page types we target
* > .content // hands off header & footer
* &, > .fossil-doc, > .markdown // wiki, HTML & MD emb docs
* > p // inline elements only
* > code, > kbd, > samp, > tt, > var // monospaced tag types
* background-color: #eee // pale gray box that…
* padding: 0 4px // …extends around the sides
*
* We generated the CSS below by:
*
* $ sassc code.sass | sed -e 's/, /,\n/g'
*
* …then hand-cleansed it to make it _somewhat_ more understandable.
*/
.artifact > .content > p > code,
.artifact > .content > p > kbd,
.artifact > .content > p > samp,
.artifact > .content > p > tt,
.artifact > .content > p > var,
.artifact > .content > .fossil-doc > p > code,
.artifact > .content > .fossil-doc > p > kbd,
.artifact > .content > .fossil-doc > p > samp,
.artifact > .content > .fossil-doc > p > tt,
.artifact > .content > .fossil-doc > p > var,
.artifact > .content > .markdown > p > code,
.artifact > .content > .markdown > p > kbd,
.artifact > .content > .markdown > p > samp,
.artifact > .content > .markdown > p > tt,
.artifact > .content > .markdown > p > var,
.dir > .content > p > code,
.dir > .content > p > kbd,
.dir > .content > p > samp,
.dir > .content > p > tt,
.dir > .content > p > var,
.dir > .content > .fossil-doc > p > code,
.dir > .content > .fossil-doc > p > kbd,
.dir > .content > .fossil-doc > p > samp,
.dir > .content > .fossil-doc > p > tt,
.dir > .content > .fossil-doc > p > var,
.dir > .content > .markdown > p > code,
.dir > .content > .markdown > p > kbd,
.dir > .content > .markdown > p > samp,
.dir > .content > .markdown > p > tt,
.dir > .content > .markdown > p > var,
.doc > .content > p > code,
.doc > .content > p > kbd,
.doc > .content > p > samp,
.doc > .content > p > tt,
.doc > .content > p > var,
.doc > .content > .fossil-doc > p > code,
.doc > .content > .fossil-doc > p > kbd,
.doc > .content > .fossil-doc > p > samp,
.doc > .content > .fossil-doc > p > tt,
.doc > .content > .fossil-doc > p > var,
.doc > .content > .markdown > p > code,
.doc > .content > .markdown > p > kbd,
.doc > .content > .markdown > p > samp,
.doc > .content > .markdown > p > tt,
.doc > .content > .markdown > p > var,
.wiki > .content > p > code,
.wiki > .content > p > kbd,
.wiki > .content > p > samp,
.wiki > .content > p > tt,
.wiki > .content > p > var,
.wiki > .content > .fossil-doc > p > code,
.wiki > .content > .fossil-doc > p > kbd,
.wiki > .content > .fossil-doc > p > samp,
.wiki > .content > .fossil-doc > p > tt,
.wiki > .content > .fossil-doc > p > var,
.wiki > .content > .markdown > p > code,
.wiki > .content > .markdown > p > kbd,
.wiki > .content > .markdown > p > samp,
.wiki > .content > .markdown > p > tt,
.wiki > .content > .markdown > p > var {
background-color: #eee;
padding: 0 4px;
}
.content pre {
hyphens: none;
line-height: 1.25;
}
.content .pikchr-wrapper {
/* Pikchr was developed with the assumption that it would be
* integrated into a Fossil repo using the old 0.9em body font
* size, which no longer obtians. This gives us a choice:
*
* 1. Change Pikchr to track this skin change, potentially breaking
* uses of alternate skins with differing default font sizes.
* 2. Restore the old default for Pikchr diagrams so the old
* assumptions continue to be valid.
* 3. Make everyone with custom skins set pikchr-scale=1.11 (1/0.9)
* in their skin's footer.txt to increase the diagram's relative
* size to compensate for the font size change.
*
* We choose #2 because it puts both adjustments in the same file. */
font-size: 0.9em;
}
.content ul li {
list-style-type: disc;
}
.doc > .content table {
background-color: #f0f5f9;
border: 1px solid #a7c2dc;
border-radius: 0.5em;
border-spacing: 0;
padding: 6px;
}
.doc > .content th {
border-bottom: 1px solid #dee8f2;
padding-bottom: 4px;
padding-right: 6px;
text-align: left;
}
.doc > .content tr > th {
background-color: #dee8f0;
}
.doc > .content tr:nth-child(odd) {
background-color: #e0e8ee;
}
.doc > .content td {
padding-bottom: 4px;
padding-right: 6px;
text-align: left;
}
/* Wiki adjustments */
pre.verbatim {
/* keep code examples from crashing into sidebars, etc. */
white-space: pre-wrap;
}
textarea.wikiedit {
/* Monospace fonts tend to have smaller x-heights; compensate.
* Can't do this generally because not all fonts have this problem.
* A textarea stands alone, whereas inline <code> has to work with
* the browser's choice of sans-serif proportional font. */
font-size: 1.1em;
}
/* Tickets */
table.report {
cursor: auto;
border-radius: 5px;
border: 1px solid #ccc;
border-radius: 0.5em;
margin: 1em 0;
}
.report td, .report th {
border: 0;
font-size: .8em;
padding: 10px;
}
|
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
|
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
|
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
|
white-space: pre-wrap;
}
/* Timeline */
span.timelineDetail {
font-size: 90%;
font-size: 90%;
}
div.timelineDate {
font-weight: bold;
white-space: nowrap;
font-weight: bold;
white-space: nowrap;
}
tr.timelineSelected, tr.timelineCurrent {
/* etienne/css.txt puts these styles on the whole row. We want them only
* on the comment/details cell within the table, not over the time
* and graph columns as well. */
background-color: unset;
border: unset;
box-shadow: unset;
}
tr.timelineCurrent td.timelineModernCell,
tr.timelineCurrent td.timelineColumnarCell {
border: 1px dashed #446979;
border-radius: 1em;
}
tr.timelineSelected td.timelineModernCell,
tr.timelineSelected td.timelineColumnarCell {
background-color: #fbe8d5;
border-radius: 1em;
}
tr.timelineSecondary td.timelineModernCell,
tr.timelineSecondary td.timelineColumnarCell {
background-color: #d5e8fb;
}
span.timelineSelected {
background-color: #fbe8d5;
}
span.timelineSecondary {
background-color: #d5e8fb;
}
/* Miscellaneous UI elements */
.fossil-tooltip.help-buttonlet-content {
background-color: lightyellow;
}
/* Exceptions for specific screen sizes */
@media screen and (max-width: 600px) {
/* Spacing for mobile */
body {
padding-left: 4px;
padding-right: 4px;
}
.content {
font-size: 0.9em;
}
.title {
padding-top: 0px;
padding-bottom: 0px;
}
.title > .page-title {
display: none; /* use h1 in body area, below menu bar */
}
h1.page-title {
font-size: 1.60em; /* match content > h1 */
margin-bottom: 0; /* div.content top margin suffices */
}
.status {padding-top: 0px;}
.mainmenu a {
padding: 8px 10px;
}
.mainmenu {
padding: 10px;
}
}
@media screen and (min-width: 600px) {
/* Spacing for desktop */
body {
padding-left: 20px;
padding-right: 20px;
}
.title {
padding-top: 10px;
padding-bottom: 10px;
}
.title h1:after {
content: " / ";
color: #777;
font-weight: normal;
}
h1.page-title {
display: none; /* use h1 in title area, above menu bar */
}
span.page-title {
font-size: 18px;
}
div.logo {
padding-top: 10px;
}
.status {padding-top: 30px;}
.mainmenu a {
padding: 8px 20px;
}
.mainmenu {
padding: 10px;
}
}
/* Wide screens mean long lines. Add extra leading to give the eye a
* "gutter" to follow from the end of one to the start of the next. */
.content dd,
.content dt,
.content div,
.content li,
.content p,
.content table {
line-height: 1.4em;
}
/* This horror show has the same cause that informed our handling of
* <code> and friends above; see "combinatorial selector explosion."
* Without this careful targeting, we'd not only overreach into areas
* of Fossil UI where our meddling is not wanted, we would mistakenly
* apply double indents to nested formatting in MD forum posts, p
* within td tags, and more.
*
* Rather than give the equivalent Sass code here, see the SCSS file
* that the [Inskinerator](https://tangentsoft.com/inskinerator/)
* project ships as override/modern/media.scss. Rendering that
* through sassc gives substantially identical output, modulo the
* hand-polishing we've done here. */
.artifact > .content > p,
.artifact > .content > .markdown > p,
.artifact > .content > .fossil-doc > p,
.artifact > .content > ol, .artifact > .content > ul,
.artifact > .content > .markdown > ol, .artifact > .content > .markdown > ul,
.artifact > .content > .fossil-doc > ol, .artifact > .content > .fossil-doc > ul,
.artifact > .content > table,
.artifact > .content > .markdown > table,
.artifact > .content > .fossil-doc > table,
.dir > .content > p,
.dir > .content > .markdown > p,
.dir > .content > .fossil-doc > p,
.dir > .content > ol, .dir > .content > ul,
.dir > .content > .markdown > ol, .dir > .content > .markdown > ul,
.dir > .content > .fossil-doc > ol, .dir > .content > .fossil-doc > ul,
.dir > .content > table,
.dir > .content > .markdown > table,
.dir > .content > .fossil-doc > table,
.doc > .content > p,
.doc > .content > .markdown > p,
.doc > .content > .fossil-doc > p,
.doc > .content > ol, .doc > .content > ul,
.doc > .content > .markdown > ol, .doc > .content > .markdown > ul,
.doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul,
.doc > .content > table,
.doc > .content > .markdown > table,
.doc > .content > .fossil-doc > table,
.wiki > .content > p,
.wiki > .content > .markdown > p,
.wiki > .content > .fossil-doc > p,
.wiki > .content > ol, .wiki > .content > ul,
.wiki > .content > .markdown > ol, .wiki > .content > .markdown > ul,
.wiki > .content > .fossil-doc > ol, .wiki > .content > .fossil-doc > ul,
.wiki > .content > table,
.wiki > .content > .markdown > table,
.wiki > .content > .fossil-doc > table,
#fileedit-tab-preview-wrapper > p,
#fileedit-tab-preview-wrapper > ol,
#fileedit-tab-preview-wrapper > ul,
#fileedit-tab-preview-wrapper > table,
#fileedit-tab-preview-wrapper > .markdown > p,
#fileedit-tab-preview-wrapper > .markdown > ol,
#fileedit-tab-preview-wrapper > .markdown > ul,
#fileedit-tab-preview-wrapper > .markdown > table,
#wikiedit-tab-preview-wrapper > p,
#wikiedit-tab-preview-wrapper > ol,
#wikiedit-tab-preview-wrapper > ul,
#wikiedit-tab-preview-wrapper > table,
#wikiedit-tab-preview-wrapper > .markdown > p,
#wikiedit-tab-preview-wrapper > .markdown > ol,
#wikiedit-tab-preview-wrapper > .markdown > ul,
#wikiedit-tab-preview-wrapper > .markdown > table {
margin-left: 50pt;
margin-right: 50pt;
}
/* Code blocks get extra indenting. We need a selector explosion
* equally powerful to the one above for inline <code> fragments and
* similar elements, for essentially the same reason: Fossil UI also
* uses <pre>, and we want to affect user content only.
*
* The equivalent Sass code is:
*
* .artifact, .dir, .doc, .wiki // doc types we target
* > .content // hands off header & footer
* @import 'pre-doc-margins.sass'
*
* #fileedit-tab-preview-wrapper, // include /fileedit previews
* #wikiedit-tab-preview-wrapper // ditto /wikiedit
* @import 'pre-doc-margins.sass'
*
* …where pre-doc-margins.sass contains the elements common to both:
*
* &, > .fossil-doc, > .markdown // wiki, HTML & MD doc types
* > pre // direct pre descendants only
* margin-left: 70pt;
* margin-right: 50pt;
*
* This is a technical overreach since /wiki & /wikiedit lack support
* for Fossil's HTML embedded doc markup capability, but we prefer to
* draw the /fileedit parallel in our Sass example over the dubious
* pleasure of being nit-picky on this point. Instead, we've chosen
* to back that overreach out by hand below.
*/
.artifact > .content > pre,
.artifact > .content > .fossil-doc > pre,
.artifact > .content > .markdown > pre,
.dir > .content > pre,
.dir > .content > .fossil-doc > pre,
.dir > .content > .markdown > pre,
.doc > .content > pre,
.doc > .content > .fossil-doc > pre,
.doc > .content > .markdown > pre,
.wiki > .content > pre,
.wiki > .content > .markdown > pre {
margin-left: 70pt;
margin-right: 50pt;
}
#fileedit-tab-preview-wrapper > pre,
#wikiedit-tab-preview-wrapper > pre,
#fileedit-tab-preview-wrapper > .fossil-doc > pre,
#fileedit-tab-preview-wrapper > .markdown > pre,
#wikiedit-tab-preview-wrapper > .markdown > pre {
margin-left: 70pt;
margin-right: 50pt;
}
/* Fossil UI uses these, but in sufficiently constrained ways that we
* don't have to be nearly as careful to avoid an overreach. */
.doc > .content h1, .artifact h1, .dir h1, .fileedit h1, .wiki h1 { margin-left: 10pt; }
.doc > .content h2, .artifact h2, .dir h2, .fileedit h2, .wiki h2 { margin-left: 20pt; }
.doc > .content h3, .artifact h3, .dir h3, .fileedit h3, .wiki h3 { margin-left: 30pt; }
.doc > .content h4, .artifact h4, .dir h4, .fileedit h4, .wiki h4 { margin-left: 40pt; }
.doc > .content h5, .artifact h5, .dir h5, .fileedit h5, .wiki h5 { margin-left: 50pt; }
.doc > .content hr, .artifact hr, .dir hr, .fileedit hr, .wiki hr { margin-left: 10pt; }
/* Don't need to be nearly as careful with tags Fossil UI doesn't use. */
.doc dd, .artifact dd, .dir dd, .fileedit dd, .wikiedit dd { margin-left: 30pt; margin-bottom: 1em; }
.doc dl, .artifact dl, .dir dl, .fileedit dl, .wikiedit dl { margin-left: 60pt; }
.doc dt, .artifact dt, .dir dt, .fileedit dt, .wikiedit dt { margin-left: 10pt; }
/* Fossil UI doesn't use Pikchr at all (yet?) so we can be quite loose
* with these selectors. */
.content .pikchr-wrapper { margin-left: 70pt; }
div.pikchr-wrapper.indent:not(.source) {
/* Selector naming scheme mismatch is intentional: it must match the
* way it's given in default.css exactly if it is to override it. */
margin-left: 70pt;
margin-right: 50pt;
}
div.pikchr-wrapper.center:not(.source) {
margin-left: 0;
}
/* Special treatment for backward compatibility. */
.indent, /* clean alternative to misusing <blockquote> */
.artifact > .content > blockquote:not(.file-content),
.dir > .content > blockquote,
.doc > .content > blockquote,
.fileedit > .content > blockquote,
.wiki > .content > blockquote {
/* We must apply extra indent relative to "p" since Fossil's wiki
* generator misuses the blockquote tag against HTML and MD norms
* to mean "indented paragraph." Skip it for file content retrieved
* by /dir URLs. */
margin-left: 80pt;
}
.artifact > .content > .markdown > blockquote,
.dir > .content > .markdown > blockquote,
.doc > .content > .markdown > blockquote,
.fileedit > .content > .markdown > blockquote,
.wiki > .content > .markdown > blockquote {
/* Fossil MD didn't inherit that bug; its HTML generator emits
* blockquote tags only for _block quotes_! A moderate indent
* suffices due to the visual styling applied above. */
margin-left: 60pt;
}
/* Alternative to BLOCK.indent when wrapped in something that is
* itself indented. The value is the delta between p and blockquote
* above, expressed as padding instead of margin so it adds to the
* outer margin instead of forcing the browser into picking one. */
.local-indent {
padding-left: 30pt;
}
}
|