Fossil SCM
The /fileedit and /wikiedit preview areas now show the skin's @media screen indent levels properly. The nine selectors we previously had per top-level tag had to become _sixteen_ (!) owing to Fossil's historical lack of consistency in applying parent classes. We could clean it all up on this branch, but then who knows how many custom skins that would break…
Commit
0d7cdbb0e398c395ed9420d288766f662dceccfc39ed29c51f81bb0139eb52c0
Parent
f5a80cad6c9d3e5…
1 file changed
+67
-16
+67
-16
| --- skins/default/css.txt | ||
| +++ skins/default/css.txt | ||
| @@ -462,56 +462,103 @@ | ||
| 462 | 462 | .doc > .content > .markdown > ol, .doc > .content > .markdown > ul, |
| 463 | 463 | .doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul, |
| 464 | 464 | .doc > .content > table, |
| 465 | 465 | .doc > .content > .markdown > table, |
| 466 | 466 | .doc > .content > .fossil-doc > table, |
| 467 | + .fileedit div#fileedit-tab-preview-wrapper > p, | |
| 468 | + .fileedit div#fileedit-tab-preview-wrapper > ol, | |
| 469 | + .fileedit div#fileedit-tab-preview-wrapper > ul, | |
| 470 | + .fileedit div#fileedit-tab-preview-wrapper > table, | |
| 471 | + .fileedit div#fileedit-tab-preview-wrapper > .markdown > p, | |
| 472 | + .fileedit div#fileedit-tab-preview-wrapper > .markdown > ol, | |
| 473 | + .fileedit div#fileedit-tab-preview-wrapper > .markdown > ul, | |
| 474 | + .fileedit div#fileedit-tab-preview-wrapper > .markdown > table, | |
| 467 | 475 | .wiki > .content > p, |
| 468 | 476 | .wiki > .content > .markdown > p, |
| 469 | 477 | .wiki > .content > .fossil-doc > p, |
| 470 | 478 | .wiki > .content > ol, .wiki > .content > ul, |
| 471 | 479 | .wiki > .content > .markdown > ol, .wiki > .content > .markdown > ul, |
| 472 | 480 | .wiki > .content > .fossil-doc > ol, .wiki > .content > .fossil-doc > ul, |
| 473 | 481 | .wiki > .content > table, |
| 474 | 482 | .wiki > .content > .markdown > table, |
| 475 | - .wiki > .content > .fossil-doc > table { | |
| 483 | + .wiki > .content > .fossil-doc > table, | |
| 484 | + .wikiedit div#wikiedit-tab-preview-wrapper > p, | |
| 485 | + .wikiedit div#wikiedit-tab-preview-wrapper > ol, | |
| 486 | + .wikiedit div#wikiedit-tab-preview-wrapper > ul, | |
| 487 | + .wikiedit div#wikiedit-tab-preview-wrapper > table, | |
| 488 | + .wikiedit div#wikiedit-tab-preview-wrapper > .markdown > p, | |
| 489 | + .wikiedit div#wikiedit-tab-preview-wrapper > .markdown > ol, | |
| 490 | + .wikiedit div#wikiedit-tab-preview-wrapper > .markdown > ul, | |
| 491 | + .wikiedit div#wikiedit-tab-preview-wrapper > .markdown > table { | |
| 476 | 492 | margin-left: 50pt; |
| 477 | 493 | margin-right: 50pt; |
| 478 | 494 | } |
| 479 | 495 | |
| 480 | 496 | /* Code blocks and such get extra indent. We need a selector explosion |
| 481 | 497 | * equally powerful to the above because Fossil UI *does* use <pre>, |
| 482 | 498 | * and we want this to apply to user content only. |
| 483 | 499 | * |
| 484 | - * It's easier to see what's going on here: three types of top-level | |
| 485 | - * body class for /file, /dir and /doc times three flavors of embedded | |
| 486 | - * doc type (plain HTML, wiki, and MD) require nine total selectors. */ | |
| 500 | + * It's easier to see what's going on here: four types of top-level | |
| 501 | + * body class for /file, /dir, /doc and /wiki times three flavors of | |
| 502 | + * embedded doc type (plain HTML, wiki, and MD) equals 12 selectors, | |
| 503 | + * plus another 4 to account for the two supported types of markup | |
| 504 | + * preview in /fileedit and /wikiedit. In SCSS form, this is simply: | |
| 505 | + * | |
| 506 | + * .artifact, .dir, .doc, .wiki { | |
| 507 | + * > .content, > .content > .markdown, > .content > .fossil-doc { | |
| 508 | + * > pre { | |
| 509 | + * @import 'margins.scss'; | |
| 510 | + * } | |
| 511 | + * } | |
| 512 | + * } | |
| 513 | + * .fileedit div#fileedit-tab-preview-wrapper, | |
| 514 | + * .wiki div#wikiedit-tab-preview-wrapper { | |
| 515 | + * > .content, > .content > .markdown { | |
| 516 | + * > pre { | |
| 517 | + * @import 'margins.scss'; | |
| 518 | + * } | |
| 519 | + * } | |
| 520 | + * } | |
| 521 | + * | |
| 522 | + * …where margins.scss contains the common definitions for both blocks. | |
| 523 | + */ | |
| 487 | 524 | .artifact > .content > pre, |
| 488 | 525 | .artifact > .content > .markdown > pre, |
| 489 | 526 | .artifact > .content > .fossil-doc > pre, |
| 490 | 527 | .dir > .content > pre, |
| 491 | 528 | .dir > .content > .markdown > pre, |
| 492 | 529 | .dir > .content > .fossil-doc > pre, |
| 493 | 530 | .doc > .content > pre, |
| 494 | 531 | .doc > .content > .markdown > pre, |
| 495 | - .doc > .content > .fossil-doc > pre { | |
| 532 | + .doc > .content > .fossil-doc > pre, | |
| 533 | + .wiki > .content > pre, | |
| 534 | + .wiki > .content > .markdown > pre, | |
| 535 | + .wiki > .content > .fossil-doc > pre { | |
| 536 | + margin-left: 70pt; | |
| 537 | + margin-right: 50pt; | |
| 538 | + } | |
| 539 | + .fileedit div#fileedit-tab-preview-wrapper > .content > pre, | |
| 540 | + .fileedit div#fileedit-tab-preview-wrapper > .content > .markdown > pre, | |
| 541 | + .wikiedit div#wikiedit-tab-preview-wrapper > .content > pre, | |
| 542 | + .wikiedit div#wikiedit-tab-preview-wrapper > .content > .markdown > pre { | |
| 496 | 543 | margin-left: 70pt; |
| 497 | 544 | margin-right: 50pt; |
| 498 | 545 | } |
| 499 | 546 | |
| 500 | 547 | /* Fossil UI uses these, but in sufficiently constrained ways that we |
| 501 | 548 | * don't have to be nearly as careful to avoid an overreach. */ |
| 502 | - .doc > .content h1, .artifact h1, .dir h1 { margin-left: 10pt; } | |
| 503 | - .doc > .content h2, .artifact h2, .dir h2 { margin-left: 20pt; } | |
| 504 | - .doc > .content h3, .artifact h3, .dir h3 { margin-left: 30pt; } | |
| 505 | - .doc > .content h4, .artifact h4, .dir h4 { margin-left: 40pt; } | |
| 506 | - .doc > .content h5, .artifact h5, .dir h5 { margin-left: 50pt; } | |
| 507 | - .doc > .content hr, .artifact hr, .dir hr { margin-left: 10pt; } | |
| 549 | + .doc > .content h1, .artifact h1, .dir h1, .fileedit h1, .wiki h1 { margin-left: 10pt; } | |
| 550 | + .doc > .content h2, .artifact h2, .dir h2, .fileedit h2, .wiki h2 { margin-left: 20pt; } | |
| 551 | + .doc > .content h3, .artifact h3, .dir h3, .fileedit h3, .wiki h3 { margin-left: 30pt; } | |
| 552 | + .doc > .content h4, .artifact h4, .dir h4, .fileedit h4, .wiki h4 { margin-left: 40pt; } | |
| 553 | + .doc > .content h5, .artifact h5, .dir h5, .fileedit h5, .wiki h5 { margin-left: 50pt; } | |
| 554 | + .doc > .content hr, .artifact hr, .dir hr, .fileedit hr, .wiki hr { margin-left: 10pt; } | |
| 508 | 555 | |
| 509 | 556 | /* Don't need to be nearly as careful with tags Fossil UI doesn't use. */ |
| 510 | - .doc dd, .artifact dd, .dir dd { margin-left: 30pt; margin-bottom: 1em; } | |
| 511 | - .doc dl, .artifact dl, .dir dl { margin-left: 60pt; } | |
| 512 | - .doc dt, .artifact dt, .dir dt { margin-left: 10pt; } | |
| 557 | + .doc dd, .artifact dd, .dir dd, .fileedit dd, .wikiedit dd { margin-left: 30pt; margin-bottom: 1em; } | |
| 558 | + .doc dl, .artifact dl, .dir dl, .fileedit dl, .wikiedit dl { margin-left: 60pt; } | |
| 559 | + .doc dt, .artifact dt, .dir dt, .fileedit dt, .wikiedit dt { margin-left: 10pt; } | |
| 513 | 560 | |
| 514 | 561 | /* Fossil UI doesn't use Pikchr at all (yet?) so we can be quite loose |
| 515 | 562 | * with these selectors. */ |
| 516 | 563 | .content .pikchr-wrapper { margin-left: 70pt; } |
| 517 | 564 | div.pikchr-wrapper.indent:not(.source) { |
| @@ -526,20 +573,24 @@ | ||
| 526 | 573 | |
| 527 | 574 | /* Special treatment for backward compatibility. */ |
| 528 | 575 | .indent, /* clean alternative to misusing <blockquote> */ |
| 529 | 576 | .artifact > .content > blockquote:not(.file-content), |
| 530 | 577 | .dir > .content > blockquote, |
| 531 | - .doc > .content > blockquote { | |
| 578 | + .doc > .content > blockquote, | |
| 579 | + .fileedit > .content > blockquote, | |
| 580 | + .wiki > .content > blockquote { | |
| 532 | 581 | /* We must apply extra indent relative to "p" since Fossil's wiki |
| 533 | 582 | * generator misuses the blockquote tag against HTML and MD norms |
| 534 | 583 | * to mean "indented paragraph." Skip it for file content retrieved |
| 535 | 584 | * by /dir URLs. */ |
| 536 | 585 | margin-left: 80pt; |
| 537 | 586 | } |
| 538 | 587 | .artifact > .content > .markdown > blockquote, |
| 539 | 588 | .dir > .content > .markdown > blockquote, |
| 540 | - .doc > .content > .markdown > blockquote { | |
| 589 | + .doc > .content > .markdown > blockquote, | |
| 590 | + .fileedit > .content > .markdown > blockquote, | |
| 591 | + .wiki > .content > .markdown > blockquote { | |
| 541 | 592 | /* Fossil MD didn't inherit that bug; its HTML generator emits |
| 542 | 593 | * blockquote tags only for _block quotes_! A moderate indent |
| 543 | 594 | * suffices due to the visual styling applied above. */ |
| 544 | 595 | margin-left: 60pt; |
| 545 | 596 | } |
| 546 | 597 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -462,56 +462,103 @@ | |
| 462 | .doc > .content > .markdown > ol, .doc > .content > .markdown > ul, |
| 463 | .doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul, |
| 464 | .doc > .content > table, |
| 465 | .doc > .content > .markdown > table, |
| 466 | .doc > .content > .fossil-doc > table, |
| 467 | .wiki > .content > p, |
| 468 | .wiki > .content > .markdown > p, |
| 469 | .wiki > .content > .fossil-doc > p, |
| 470 | .wiki > .content > ol, .wiki > .content > ul, |
| 471 | .wiki > .content > .markdown > ol, .wiki > .content > .markdown > ul, |
| 472 | .wiki > .content > .fossil-doc > ol, .wiki > .content > .fossil-doc > ul, |
| 473 | .wiki > .content > table, |
| 474 | .wiki > .content > .markdown > table, |
| 475 | .wiki > .content > .fossil-doc > table { |
| 476 | margin-left: 50pt; |
| 477 | margin-right: 50pt; |
| 478 | } |
| 479 | |
| 480 | /* Code blocks and such get extra indent. We need a selector explosion |
| 481 | * equally powerful to the above because Fossil UI *does* use <pre>, |
| 482 | * and we want this to apply to user content only. |
| 483 | * |
| 484 | * It's easier to see what's going on here: three types of top-level |
| 485 | * body class for /file, /dir and /doc times three flavors of embedded |
| 486 | * doc type (plain HTML, wiki, and MD) require nine total selectors. */ |
| 487 | .artifact > .content > pre, |
| 488 | .artifact > .content > .markdown > pre, |
| 489 | .artifact > .content > .fossil-doc > pre, |
| 490 | .dir > .content > pre, |
| 491 | .dir > .content > .markdown > pre, |
| 492 | .dir > .content > .fossil-doc > pre, |
| 493 | .doc > .content > pre, |
| 494 | .doc > .content > .markdown > pre, |
| 495 | .doc > .content > .fossil-doc > pre { |
| 496 | margin-left: 70pt; |
| 497 | margin-right: 50pt; |
| 498 | } |
| 499 | |
| 500 | /* Fossil UI uses these, but in sufficiently constrained ways that we |
| 501 | * don't have to be nearly as careful to avoid an overreach. */ |
| 502 | .doc > .content h1, .artifact h1, .dir h1 { margin-left: 10pt; } |
| 503 | .doc > .content h2, .artifact h2, .dir h2 { margin-left: 20pt; } |
| 504 | .doc > .content h3, .artifact h3, .dir h3 { margin-left: 30pt; } |
| 505 | .doc > .content h4, .artifact h4, .dir h4 { margin-left: 40pt; } |
| 506 | .doc > .content h5, .artifact h5, .dir h5 { margin-left: 50pt; } |
| 507 | .doc > .content hr, .artifact hr, .dir hr { margin-left: 10pt; } |
| 508 | |
| 509 | /* Don't need to be nearly as careful with tags Fossil UI doesn't use. */ |
| 510 | .doc dd, .artifact dd, .dir dd { margin-left: 30pt; margin-bottom: 1em; } |
| 511 | .doc dl, .artifact dl, .dir dl { margin-left: 60pt; } |
| 512 | .doc dt, .artifact dt, .dir dt { margin-left: 10pt; } |
| 513 | |
| 514 | /* Fossil UI doesn't use Pikchr at all (yet?) so we can be quite loose |
| 515 | * with these selectors. */ |
| 516 | .content .pikchr-wrapper { margin-left: 70pt; } |
| 517 | div.pikchr-wrapper.indent:not(.source) { |
| @@ -526,20 +573,24 @@ | |
| 526 | |
| 527 | /* Special treatment for backward compatibility. */ |
| 528 | .indent, /* clean alternative to misusing <blockquote> */ |
| 529 | .artifact > .content > blockquote:not(.file-content), |
| 530 | .dir > .content > blockquote, |
| 531 | .doc > .content > blockquote { |
| 532 | /* We must apply extra indent relative to "p" since Fossil's wiki |
| 533 | * generator misuses the blockquote tag against HTML and MD norms |
| 534 | * to mean "indented paragraph." Skip it for file content retrieved |
| 535 | * by /dir URLs. */ |
| 536 | margin-left: 80pt; |
| 537 | } |
| 538 | .artifact > .content > .markdown > blockquote, |
| 539 | .dir > .content > .markdown > blockquote, |
| 540 | .doc > .content > .markdown > blockquote { |
| 541 | /* Fossil MD didn't inherit that bug; its HTML generator emits |
| 542 | * blockquote tags only for _block quotes_! A moderate indent |
| 543 | * suffices due to the visual styling applied above. */ |
| 544 | margin-left: 60pt; |
| 545 | } |
| 546 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -462,56 +462,103 @@ | |
| 462 | .doc > .content > .markdown > ol, .doc > .content > .markdown > ul, |
| 463 | .doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul, |
| 464 | .doc > .content > table, |
| 465 | .doc > .content > .markdown > table, |
| 466 | .doc > .content > .fossil-doc > table, |
| 467 | .fileedit div#fileedit-tab-preview-wrapper > p, |
| 468 | .fileedit div#fileedit-tab-preview-wrapper > ol, |
| 469 | .fileedit div#fileedit-tab-preview-wrapper > ul, |
| 470 | .fileedit div#fileedit-tab-preview-wrapper > table, |
| 471 | .fileedit div#fileedit-tab-preview-wrapper > .markdown > p, |
| 472 | .fileedit div#fileedit-tab-preview-wrapper > .markdown > ol, |
| 473 | .fileedit div#fileedit-tab-preview-wrapper > .markdown > ul, |
| 474 | .fileedit div#fileedit-tab-preview-wrapper > .markdown > table, |
| 475 | .wiki > .content > p, |
| 476 | .wiki > .content > .markdown > p, |
| 477 | .wiki > .content > .fossil-doc > p, |
| 478 | .wiki > .content > ol, .wiki > .content > ul, |
| 479 | .wiki > .content > .markdown > ol, .wiki > .content > .markdown > ul, |
| 480 | .wiki > .content > .fossil-doc > ol, .wiki > .content > .fossil-doc > ul, |
| 481 | .wiki > .content > table, |
| 482 | .wiki > .content > .markdown > table, |
| 483 | .wiki > .content > .fossil-doc > table, |
| 484 | .wikiedit div#wikiedit-tab-preview-wrapper > p, |
| 485 | .wikiedit div#wikiedit-tab-preview-wrapper > ol, |
| 486 | .wikiedit div#wikiedit-tab-preview-wrapper > ul, |
| 487 | .wikiedit div#wikiedit-tab-preview-wrapper > table, |
| 488 | .wikiedit div#wikiedit-tab-preview-wrapper > .markdown > p, |
| 489 | .wikiedit div#wikiedit-tab-preview-wrapper > .markdown > ol, |
| 490 | .wikiedit div#wikiedit-tab-preview-wrapper > .markdown > ul, |
| 491 | .wikiedit div#wikiedit-tab-preview-wrapper > .markdown > table { |
| 492 | margin-left: 50pt; |
| 493 | margin-right: 50pt; |
| 494 | } |
| 495 | |
| 496 | /* Code blocks and such get extra indent. We need a selector explosion |
| 497 | * equally powerful to the above because Fossil UI *does* use <pre>, |
| 498 | * and we want this to apply to user content only. |
| 499 | * |
| 500 | * It's easier to see what's going on here: four types of top-level |
| 501 | * body class for /file, /dir, /doc and /wiki times three flavors of |
| 502 | * embedded doc type (plain HTML, wiki, and MD) equals 12 selectors, |
| 503 | * plus another 4 to account for the two supported types of markup |
| 504 | * preview in /fileedit and /wikiedit. In SCSS form, this is simply: |
| 505 | * |
| 506 | * .artifact, .dir, .doc, .wiki { |
| 507 | * > .content, > .content > .markdown, > .content > .fossil-doc { |
| 508 | * > pre { |
| 509 | * @import 'margins.scss'; |
| 510 | * } |
| 511 | * } |
| 512 | * } |
| 513 | * .fileedit div#fileedit-tab-preview-wrapper, |
| 514 | * .wiki div#wikiedit-tab-preview-wrapper { |
| 515 | * > .content, > .content > .markdown { |
| 516 | * > pre { |
| 517 | * @import 'margins.scss'; |
| 518 | * } |
| 519 | * } |
| 520 | * } |
| 521 | * |
| 522 | * …where margins.scss contains the common definitions for both blocks. |
| 523 | */ |
| 524 | .artifact > .content > pre, |
| 525 | .artifact > .content > .markdown > pre, |
| 526 | .artifact > .content > .fossil-doc > pre, |
| 527 | .dir > .content > pre, |
| 528 | .dir > .content > .markdown > pre, |
| 529 | .dir > .content > .fossil-doc > pre, |
| 530 | .doc > .content > pre, |
| 531 | .doc > .content > .markdown > pre, |
| 532 | .doc > .content > .fossil-doc > pre, |
| 533 | .wiki > .content > pre, |
| 534 | .wiki > .content > .markdown > pre, |
| 535 | .wiki > .content > .fossil-doc > pre { |
| 536 | margin-left: 70pt; |
| 537 | margin-right: 50pt; |
| 538 | } |
| 539 | .fileedit div#fileedit-tab-preview-wrapper > .content > pre, |
| 540 | .fileedit div#fileedit-tab-preview-wrapper > .content > .markdown > pre, |
| 541 | .wikiedit div#wikiedit-tab-preview-wrapper > .content > pre, |
| 542 | .wikiedit div#wikiedit-tab-preview-wrapper > .content > .markdown > pre { |
| 543 | margin-left: 70pt; |
| 544 | margin-right: 50pt; |
| 545 | } |
| 546 | |
| 547 | /* Fossil UI uses these, but in sufficiently constrained ways that we |
| 548 | * don't have to be nearly as careful to avoid an overreach. */ |
| 549 | .doc > .content h1, .artifact h1, .dir h1, .fileedit h1, .wiki h1 { margin-left: 10pt; } |
| 550 | .doc > .content h2, .artifact h2, .dir h2, .fileedit h2, .wiki h2 { margin-left: 20pt; } |
| 551 | .doc > .content h3, .artifact h3, .dir h3, .fileedit h3, .wiki h3 { margin-left: 30pt; } |
| 552 | .doc > .content h4, .artifact h4, .dir h4, .fileedit h4, .wiki h4 { margin-left: 40pt; } |
| 553 | .doc > .content h5, .artifact h5, .dir h5, .fileedit h5, .wiki h5 { margin-left: 50pt; } |
| 554 | .doc > .content hr, .artifact hr, .dir hr, .fileedit hr, .wiki hr { margin-left: 10pt; } |
| 555 | |
| 556 | /* Don't need to be nearly as careful with tags Fossil UI doesn't use. */ |
| 557 | .doc dd, .artifact dd, .dir dd, .fileedit dd, .wikiedit dd { margin-left: 30pt; margin-bottom: 1em; } |
| 558 | .doc dl, .artifact dl, .dir dl, .fileedit dl, .wikiedit dl { margin-left: 60pt; } |
| 559 | .doc dt, .artifact dt, .dir dt, .fileedit dt, .wikiedit dt { margin-left: 10pt; } |
| 560 | |
| 561 | /* Fossil UI doesn't use Pikchr at all (yet?) so we can be quite loose |
| 562 | * with these selectors. */ |
| 563 | .content .pikchr-wrapper { margin-left: 70pt; } |
| 564 | div.pikchr-wrapper.indent:not(.source) { |
| @@ -526,20 +573,24 @@ | |
| 573 | |
| 574 | /* Special treatment for backward compatibility. */ |
| 575 | .indent, /* clean alternative to misusing <blockquote> */ |
| 576 | .artifact > .content > blockquote:not(.file-content), |
| 577 | .dir > .content > blockquote, |
| 578 | .doc > .content > blockquote, |
| 579 | .fileedit > .content > blockquote, |
| 580 | .wiki > .content > blockquote { |
| 581 | /* We must apply extra indent relative to "p" since Fossil's wiki |
| 582 | * generator misuses the blockquote tag against HTML and MD norms |
| 583 | * to mean "indented paragraph." Skip it for file content retrieved |
| 584 | * by /dir URLs. */ |
| 585 | margin-left: 80pt; |
| 586 | } |
| 587 | .artifact > .content > .markdown > blockquote, |
| 588 | .dir > .content > .markdown > blockquote, |
| 589 | .doc > .content > .markdown > blockquote, |
| 590 | .fileedit > .content > .markdown > blockquote, |
| 591 | .wiki > .content > .markdown > blockquote { |
| 592 | /* Fossil MD didn't inherit that bug; its HTML generator emits |
| 593 | * blockquote tags only for _block quotes_! A moderate indent |
| 594 | * suffices due to the visual styling applied above. */ |
| 595 | margin-left: 60pt; |
| 596 | } |
| 597 |