Fossil SCM
diff CSS: more fine-tuning of line-height and INS/DEL padding to account for another browser and fill in the gaps of color caused by the inflated line-height. Work around a "slight wiggle" problem on some FF versions. Minor simplification of some nearby CSS.
Commit
1e28e74720547d0a7b3881b9a62ece14940800d140f350b480a2e8a30c6ef5a3
Parent
9386c4c0697dea9…
1 file changed
+22
-4
+22
-4
| --- src/default.css | ||
| +++ src/default.css | ||
| @@ -553,19 +553,37 @@ | ||
| 553 | 553 | overflow: hidden /*work around inner PRE slight overflow/overlap*/; |
| 554 | 554 | } |
| 555 | 555 | table.diff pre { |
| 556 | 556 | margin: 0 0 0 0; |
| 557 | 557 | padding: 0 0.5em; |
| 558 | - line-height: 1.20 /* important for mobile: | |
| 559 | - see forum post e6f4ee7de98b55c0 */; | |
| 558 | + line-height: 1.225/*for mobile: forum post e6f4ee7de98b55c0*/; | |
| 559 | +} | |
| 560 | +table.diff pre > ins, | |
| 561 | +table.diff pre > del { | |
| 562 | + /* Fill platform-dependent color gaps caused by | |
| 563 | + inflated line-height */; | |
| 564 | + padding: 0.062em 0 0.062em 0; | |
| 565 | +} | |
| 566 | +table.diff pre > ins > *, | |
| 567 | +table.diff pre > del > *{ | |
| 568 | + /* Avoid odd-looking color swatches in conjunction with | |
| 569 | + (table.diff pre > ins/del) padding */ | |
| 570 | + padding: inherit; | |
| 560 | 571 | } |
| 561 | 572 | table.diff td.diffln > pre { |
| 562 | 573 | padding: 0 0.35em 0 0.5em; |
| 563 | 574 | } |
| 564 | 575 | table.diff td.difftxt > pre { |
| 565 | 576 | min-width: 100%; |
| 566 | 577 | max-width: 100%; |
| 578 | +} | |
| 579 | +table.diff td > pre { | |
| 580 | + /* Workaround for "slight wiggle" when using mouse-wheel in some FF | |
| 581 | + versions, apparently caused by the increased line-height forcing | |
| 582 | + these elements to be a *tick* larger than they should be but not | |
| 583 | + large enough to force a scroll bar to show up. */ | |
| 584 | + overflow-y: hidden; | |
| 567 | 585 | } |
| 568 | 586 | tr.diffskip.jchunk { |
| 569 | 587 | /* jchunk gets added from JS to diffskip rows when they are |
| 570 | 588 | plugged into the /jchunk route. */ |
| 571 | 589 | background-color: aliceblue; |
| @@ -612,14 +630,14 @@ | ||
| 612 | 630 | /* In order to increase the glyph size w/o increasing the em-based |
| 613 | 631 | button size or border-radius, we need an extra layer of DOM |
| 614 | 632 | element for the glyph. */ |
| 615 | 633 | font-size: 150%; |
| 616 | 634 | } |
| 617 | -tr.diffskip > td.chunkctrl .jcbutton.up:not(.down) > span::before { | |
| 635 | +tr.diffskip > td.chunkctrl .jcbutton.up > span::before { | |
| 618 | 636 | content: '⇡'; |
| 619 | 637 | } |
| 620 | -tr.diffskip > td.chunkctrl .jcbutton.down:not(.up) > span::before { | |
| 638 | +tr.diffskip > td.chunkctrl .jcbutton.down > span::before { | |
| 621 | 639 | content: '⇣'; |
| 622 | 640 | } |
| 623 | 641 | tr.diffskip > td.chunkctrl .jcbutton.up.down > span::before { |
| 624 | 642 | content: '⇡⇣'; |
| 625 | 643 | } |
| 626 | 644 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -553,19 +553,37 @@ | |
| 553 | overflow: hidden /*work around inner PRE slight overflow/overlap*/; |
| 554 | } |
| 555 | table.diff pre { |
| 556 | margin: 0 0 0 0; |
| 557 | padding: 0 0.5em; |
| 558 | line-height: 1.20 /* important for mobile: |
| 559 | see forum post e6f4ee7de98b55c0 */; |
| 560 | } |
| 561 | table.diff td.diffln > pre { |
| 562 | padding: 0 0.35em 0 0.5em; |
| 563 | } |
| 564 | table.diff td.difftxt > pre { |
| 565 | min-width: 100%; |
| 566 | max-width: 100%; |
| 567 | } |
| 568 | tr.diffskip.jchunk { |
| 569 | /* jchunk gets added from JS to diffskip rows when they are |
| 570 | plugged into the /jchunk route. */ |
| 571 | background-color: aliceblue; |
| @@ -612,14 +630,14 @@ | |
| 612 | /* In order to increase the glyph size w/o increasing the em-based |
| 613 | button size or border-radius, we need an extra layer of DOM |
| 614 | element for the glyph. */ |
| 615 | font-size: 150%; |
| 616 | } |
| 617 | tr.diffskip > td.chunkctrl .jcbutton.up:not(.down) > span::before { |
| 618 | content: '⇡'; |
| 619 | } |
| 620 | tr.diffskip > td.chunkctrl .jcbutton.down:not(.up) > span::before { |
| 621 | content: '⇣'; |
| 622 | } |
| 623 | tr.diffskip > td.chunkctrl .jcbutton.up.down > span::before { |
| 624 | content: '⇡⇣'; |
| 625 | } |
| 626 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -553,19 +553,37 @@ | |
| 553 | overflow: hidden /*work around inner PRE slight overflow/overlap*/; |
| 554 | } |
| 555 | table.diff pre { |
| 556 | margin: 0 0 0 0; |
| 557 | padding: 0 0.5em; |
| 558 | line-height: 1.225/*for mobile: forum post e6f4ee7de98b55c0*/; |
| 559 | } |
| 560 | table.diff pre > ins, |
| 561 | table.diff pre > del { |
| 562 | /* Fill platform-dependent color gaps caused by |
| 563 | inflated line-height */; |
| 564 | padding: 0.062em 0 0.062em 0; |
| 565 | } |
| 566 | table.diff pre > ins > *, |
| 567 | table.diff pre > del > *{ |
| 568 | /* Avoid odd-looking color swatches in conjunction with |
| 569 | (table.diff pre > ins/del) padding */ |
| 570 | padding: inherit; |
| 571 | } |
| 572 | table.diff td.diffln > pre { |
| 573 | padding: 0 0.35em 0 0.5em; |
| 574 | } |
| 575 | table.diff td.difftxt > pre { |
| 576 | min-width: 100%; |
| 577 | max-width: 100%; |
| 578 | } |
| 579 | table.diff td > pre { |
| 580 | /* Workaround for "slight wiggle" when using mouse-wheel in some FF |
| 581 | versions, apparently caused by the increased line-height forcing |
| 582 | these elements to be a *tick* larger than they should be but not |
| 583 | large enough to force a scroll bar to show up. */ |
| 584 | overflow-y: hidden; |
| 585 | } |
| 586 | tr.diffskip.jchunk { |
| 587 | /* jchunk gets added from JS to diffskip rows when they are |
| 588 | plugged into the /jchunk route. */ |
| 589 | background-color: aliceblue; |
| @@ -612,14 +630,14 @@ | |
| 630 | /* In order to increase the glyph size w/o increasing the em-based |
| 631 | button size or border-radius, we need an extra layer of DOM |
| 632 | element for the glyph. */ |
| 633 | font-size: 150%; |
| 634 | } |
| 635 | tr.diffskip > td.chunkctrl .jcbutton.up > span::before { |
| 636 | content: '⇡'; |
| 637 | } |
| 638 | tr.diffskip > td.chunkctrl .jcbutton.down > span::before { |
| 639 | content: '⇣'; |
| 640 | } |
| 641 | tr.diffskip > td.chunkctrl .jcbutton.up.down > span::before { |
| 642 | content: '⇡⇣'; |
| 643 | } |
| 644 |