Fossil SCM
Reworked the handling of the three "selected" row cases in /timeline (current, first-in-range and last-in-range) so the borders and highlighting extend to the left margin. The "current" case (seen under "fossil ui" only, to indicate the ckout version) wasn't a problem, but the other two use background colors potentially confusable with branch colors. This makes the timelines more like that of the Fossil 2.23 and prior default skin (now called Étienne) but with rounded corners in the modern modes, matching the rest of the timeline. This occurs in all timeline modes, including the classic, compact, and verbose views. The result is that the corners for these selected row types are rounded, but because they tend to be compact, it gives a full-round look on the ends. Avoiding this would require considerably more verbose CSS, and it's plenty intricate as it is.
Commit
9568091a9beee72fae8fd189f09bcf6da7cb3f1fc71de3129b03ddb4bce3fd55
Parent
1975bfd27975947…
1 file changed
+39
-53
+39
-53
| --- skins/default/css.txt | ||
| +++ skins/default/css.txt | ||
| @@ -470,63 +470,49 @@ | ||
| 470 | 470 | div.timelineDate { |
| 471 | 471 | font-weight: bold; |
| 472 | 472 | white-space: nowrap; |
| 473 | 473 | } |
| 474 | 474 | |
| 475 | -tr.timelineSelected, tr.timelineCurrent { | |
| 476 | - /* etienne/css.txt puts these styles on the whole row. We want them only | |
| 477 | - * on the comment/details cell within the table, not over the time | |
| 478 | - * and graph columns as well. */ | |
| 479 | - background-color: unset; | |
| 480 | - border: unset; | |
| 481 | - box-shadow: unset; | |
| 482 | -} | |
| 483 | -tr.timelineCurrent td.timelineClassicCell, | |
| 484 | -tr.timelineCurrent td.timelineColumnarCell, | |
| 485 | -tr.timelineCurrent td.timelineCompactCell, | |
| 486 | -tr.timelineCurrent td.timelineModernCell, | |
| 487 | -tr.timelineCurrent td.timelineVerboseCell { | |
| 488 | - border: 1px dashed #446979; | |
| 489 | - border-radius: 1em; | |
| 490 | -} | |
| 491 | -tr.timelineSelected td.timelineClassicCell, | |
| 492 | -tr.timelineSelected td.timelineColumnarCell, | |
| 493 | -tr.timelineSelected td.timelineCompactCell, | |
| 494 | -tr.timelineSelected td.timelineModernCell, | |
| 495 | -tr.timelineSelected td.timelineVerboseCell { | |
| 496 | - background-color: #fbe8d5; | |
| 497 | -} | |
| 498 | -tr.timelineSecondary td.timelineClassicCell, | |
| 499 | -tr.timelineSecondary td.timelineColumnarCell, | |
| 500 | -tr.timelineSecondary td.timelineCompactCell, | |
| 501 | -tr.timelineSecondary td.timelineModernCell, | |
| 502 | -tr.timelineSecondary td.timelineVerboseCell { | |
| 503 | - background-color: #d5e8fb; | |
| 504 | -} | |
| 505 | -tr.timelineCurrent td, | |
| 506 | -tr.timelineSecondary td, | |
| 507 | -tr.timelineSelected td { | |
| 508 | - border-radius: 1em; /* Full-rounding default for modes that have room. */ | |
| 509 | -} | |
| 510 | -tr.timelineCurrent td.timelineClassicCell, | |
| 511 | -tr.timelineSecondary td.timelineClassicCell, | |
| 512 | -tr.timelineSelected td.timelineClassicCell, | |
| 513 | -tr.timelineCurrent td.timelineCompactCell, | |
| 514 | -tr.timelineSecondary td.timelineCompactCell, | |
| 515 | -tr.timelineSelected td.timelineCompactCell, | |
| 516 | -tr.timelineCurrent td.timelineVerboseCell, | |
| 517 | -tr.timelineSecondary td.timelineVerboseCell, | |
| 518 | -tr.timelineSelected td.timelineVerboseCell { | |
| 519 | - border-radius: 0.5em; /* Exception: compact modes require half-rounding, */ | |
| 520 | - padding-left: 0.5em; /* and even then needs help to avoid clipping the */ | |
| 521 | - padding-right: 0.5em; /* text near these rounded corners. */ | |
| 522 | -} | |
| 523 | -span.timelineSelected { | |
| 524 | - background-color: #fbe8d5; | |
| 525 | -} | |
| 526 | -span.timelineSecondary { | |
| 527 | - background-color: #d5e8fb; | |
| 475 | +/* Extend default.css comment cell rounding to the whole row for the | |
| 476 | + * various types of "selected" rows, making them "hang" into the left | |
| 477 | + * margin, distinguishing them from the coloring used for branch cells. | |
| 478 | + * Care must be taken to avoid having the box-shadow rounded but the | |
| 479 | + * background squared-off. */ | |
| 480 | +table.timelineTable { | |
| 481 | + padding: 0 3px; /* leave space to sides for box shadow; can clip otherwise */ | |
| 482 | +} | |
| 483 | +table.timelineTable tr { | |
| 484 | + border-radius: 1em; | |
| 485 | +} | |
| 486 | +tr.timelineSelected, tr.timelineSecondary { background-color: unset; } | |
| 487 | +tr.timelineSelected td, span.timelineSelected { | |
| 488 | + background-color: #fbe8d5; | |
| 489 | +} | |
| 490 | +tr.timelineSecondary td, span.timelineSecondary { | |
| 491 | + background-color: #d5e8fb; | |
| 492 | +} | |
| 493 | +tr.timelineCurrent td:first-child, | |
| 494 | +tr.timelineSecondary td:first-child, | |
| 495 | +tr.timelineSelected td:first-child { | |
| 496 | + border-top-left-radius: 1em; | |
| 497 | + border-bottom-left-radius: 1em; | |
| 498 | +} | |
| 499 | +tr.timelineCurrent td:last-child, | |
| 500 | +tr.timelineSecondary td:last-child, | |
| 501 | +tr.timelineSelected td:last-child { | |
| 502 | + border-top-right-radius: 1em; | |
| 503 | + border-bottom-right-radius: 1em; | |
| 504 | +} | |
| 505 | +tr.timelineCurrent td { | |
| 506 | + border-top: 1px dashed #446979; | |
| 507 | + border-bottom: 1px dashed #446979; | |
| 508 | +} | |
| 509 | +tr.timelineCurrent td:first-child { | |
| 510 | + border-left: 1px dashed #446979; | |
| 511 | +} | |
| 512 | +tr.timelineCurrent td:last-child { | |
| 513 | + border-right: 1px dashed #446979; | |
| 528 | 514 | } |
| 529 | 515 | |
| 530 | 516 | |
| 531 | 517 | /* Miscellaneous UI elements */ |
| 532 | 518 | |
| 533 | 519 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -470,63 +470,49 @@ | |
| 470 | div.timelineDate { |
| 471 | font-weight: bold; |
| 472 | white-space: nowrap; |
| 473 | } |
| 474 | |
| 475 | tr.timelineSelected, tr.timelineCurrent { |
| 476 | /* etienne/css.txt puts these styles on the whole row. We want them only |
| 477 | * on the comment/details cell within the table, not over the time |
| 478 | * and graph columns as well. */ |
| 479 | background-color: unset; |
| 480 | border: unset; |
| 481 | box-shadow: unset; |
| 482 | } |
| 483 | tr.timelineCurrent td.timelineClassicCell, |
| 484 | tr.timelineCurrent td.timelineColumnarCell, |
| 485 | tr.timelineCurrent td.timelineCompactCell, |
| 486 | tr.timelineCurrent td.timelineModernCell, |
| 487 | tr.timelineCurrent td.timelineVerboseCell { |
| 488 | border: 1px dashed #446979; |
| 489 | border-radius: 1em; |
| 490 | } |
| 491 | tr.timelineSelected td.timelineClassicCell, |
| 492 | tr.timelineSelected td.timelineColumnarCell, |
| 493 | tr.timelineSelected td.timelineCompactCell, |
| 494 | tr.timelineSelected td.timelineModernCell, |
| 495 | tr.timelineSelected td.timelineVerboseCell { |
| 496 | background-color: #fbe8d5; |
| 497 | } |
| 498 | tr.timelineSecondary td.timelineClassicCell, |
| 499 | tr.timelineSecondary td.timelineColumnarCell, |
| 500 | tr.timelineSecondary td.timelineCompactCell, |
| 501 | tr.timelineSecondary td.timelineModernCell, |
| 502 | tr.timelineSecondary td.timelineVerboseCell { |
| 503 | background-color: #d5e8fb; |
| 504 | } |
| 505 | tr.timelineCurrent td, |
| 506 | tr.timelineSecondary td, |
| 507 | tr.timelineSelected td { |
| 508 | border-radius: 1em; /* Full-rounding default for modes that have room. */ |
| 509 | } |
| 510 | tr.timelineCurrent td.timelineClassicCell, |
| 511 | tr.timelineSecondary td.timelineClassicCell, |
| 512 | tr.timelineSelected td.timelineClassicCell, |
| 513 | tr.timelineCurrent td.timelineCompactCell, |
| 514 | tr.timelineSecondary td.timelineCompactCell, |
| 515 | tr.timelineSelected td.timelineCompactCell, |
| 516 | tr.timelineCurrent td.timelineVerboseCell, |
| 517 | tr.timelineSecondary td.timelineVerboseCell, |
| 518 | tr.timelineSelected td.timelineVerboseCell { |
| 519 | border-radius: 0.5em; /* Exception: compact modes require half-rounding, */ |
| 520 | padding-left: 0.5em; /* and even then needs help to avoid clipping the */ |
| 521 | padding-right: 0.5em; /* text near these rounded corners. */ |
| 522 | } |
| 523 | span.timelineSelected { |
| 524 | background-color: #fbe8d5; |
| 525 | } |
| 526 | span.timelineSecondary { |
| 527 | background-color: #d5e8fb; |
| 528 | } |
| 529 | |
| 530 | |
| 531 | /* Miscellaneous UI elements */ |
| 532 | |
| 533 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -470,63 +470,49 @@ | |
| 470 | div.timelineDate { |
| 471 | font-weight: bold; |
| 472 | white-space: nowrap; |
| 473 | } |
| 474 | |
| 475 | /* Extend default.css comment cell rounding to the whole row for the |
| 476 | * various types of "selected" rows, making them "hang" into the left |
| 477 | * margin, distinguishing them from the coloring used for branch cells. |
| 478 | * Care must be taken to avoid having the box-shadow rounded but the |
| 479 | * background squared-off. */ |
| 480 | table.timelineTable { |
| 481 | padding: 0 3px; /* leave space to sides for box shadow; can clip otherwise */ |
| 482 | } |
| 483 | table.timelineTable tr { |
| 484 | border-radius: 1em; |
| 485 | } |
| 486 | tr.timelineSelected, tr.timelineSecondary { background-color: unset; } |
| 487 | tr.timelineSelected td, span.timelineSelected { |
| 488 | background-color: #fbe8d5; |
| 489 | } |
| 490 | tr.timelineSecondary td, span.timelineSecondary { |
| 491 | background-color: #d5e8fb; |
| 492 | } |
| 493 | tr.timelineCurrent td:first-child, |
| 494 | tr.timelineSecondary td:first-child, |
| 495 | tr.timelineSelected td:first-child { |
| 496 | border-top-left-radius: 1em; |
| 497 | border-bottom-left-radius: 1em; |
| 498 | } |
| 499 | tr.timelineCurrent td:last-child, |
| 500 | tr.timelineSecondary td:last-child, |
| 501 | tr.timelineSelected td:last-child { |
| 502 | border-top-right-radius: 1em; |
| 503 | border-bottom-right-radius: 1em; |
| 504 | } |
| 505 | tr.timelineCurrent td { |
| 506 | border-top: 1px dashed #446979; |
| 507 | border-bottom: 1px dashed #446979; |
| 508 | } |
| 509 | tr.timelineCurrent td:first-child { |
| 510 | border-left: 1px dashed #446979; |
| 511 | } |
| 512 | tr.timelineCurrent td:last-child { |
| 513 | border-right: 1px dashed #446979; |
| 514 | } |
| 515 | |
| 516 | |
| 517 | /* Miscellaneous UI elements */ |
| 518 | |
| 519 |