Fossil SCM
Try to fix the focus indicator CSS to work for all skins: alpha-blending "10% black" with light-mode background colors, or "20% white" with dark-mode background colors, looks surprisingly well and conflicts less with branch colors (which can be orange-ish, but never black or white). Note that the dark-mode skins Ardoise, Dark Mode and Xekri (but not Eagle) require the previously removed !important directive. It\'s still possible for skins to overwrite the focus indicator CSS when duplicating the !important directive.
Commit
7d026886906dbaa3f082ba7cef4cae60eb2f00dcd2c5446420256e9697e6d1a6
Parent
ad3a8e0b87ea716…
5 files changed
+9
+9
+9
+10
+1
-1
| --- skins/ardoise/css.txt | ||
| +++ skins/ardoise/css.txt | ||
| @@ -997,10 +997,19 @@ | ||
| 997 | 997 | text-align: left; |
| 998 | 998 | padding: .75em; |
| 999 | 999 | border-radius: 5px; |
| 1000 | 1000 | border: dashed #ff8000 |
| 1001 | 1001 | } |
| 1002 | +.timelineFocused { | |
| 1003 | + background-image: url("data:image/svg+xml,%3Csvg \ | |
| 1004 | +xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ | |
| 1005 | +style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important; | |
| 1006 | +/*Note: IE requires explicit declarations for the next three properties.*/ | |
| 1007 | + background-position: top left; | |
| 1008 | + background-repeat: repeat repeat; | |
| 1009 | + background-size: 64px 64px; | |
| 1010 | +} | |
| 1002 | 1011 | .timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] { |
| 1003 | 1012 | background-color: #000 |
| 1004 | 1013 | } |
| 1005 | 1014 | .tl-canvas { |
| 1006 | 1015 | margin: 0 6px 0 10px |
| 1007 | 1016 |
| --- skins/ardoise/css.txt | |
| +++ skins/ardoise/css.txt | |
| @@ -997,10 +997,19 @@ | |
| 997 | text-align: left; |
| 998 | padding: .75em; |
| 999 | border-radius: 5px; |
| 1000 | border: dashed #ff8000 |
| 1001 | } |
| 1002 | .timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] { |
| 1003 | background-color: #000 |
| 1004 | } |
| 1005 | .tl-canvas { |
| 1006 | margin: 0 6px 0 10px |
| 1007 |
| --- skins/ardoise/css.txt | |
| +++ skins/ardoise/css.txt | |
| @@ -997,10 +997,19 @@ | |
| 997 | text-align: left; |
| 998 | padding: .75em; |
| 999 | border-radius: 5px; |
| 1000 | border: dashed #ff8000 |
| 1001 | } |
| 1002 | .timelineFocused { |
| 1003 | background-image: url("data:image/svg+xml,%3Csvg \ |
| 1004 | xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ |
| 1005 | style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important; |
| 1006 | /*Note: IE requires explicit declarations for the next three properties.*/ |
| 1007 | background-position: top left; |
| 1008 | background-repeat: repeat repeat; |
| 1009 | background-size: 64px 64px; |
| 1010 | } |
| 1011 | .timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] { |
| 1012 | background-color: #000 |
| 1013 | } |
| 1014 | .tl-canvas { |
| 1015 | margin: 0 6px 0 10px |
| 1016 |
| --- skins/darkmode/css.txt | ||
| +++ skins/darkmode/css.txt | ||
| @@ -353,10 +353,19 @@ | ||
| 353 | 353 | text-align: left;*/ |
| 354 | 354 | padding: .75em; |
| 355 | 355 | border-radius: 5px; |
| 356 | 356 | border: dashed #ff8000 |
| 357 | 357 | } |
| 358 | +.timelineFocused { | |
| 359 | + background-image: url("data:image/svg+xml,%3Csvg \ | |
| 360 | +xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ | |
| 361 | +style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important; | |
| 362 | +/*Note: IE requires explicit declarations for the next three properties.*/ | |
| 363 | + background-position: top left; | |
| 364 | + background-repeat: repeat repeat; | |
| 365 | + background-size: 64px 64px; | |
| 366 | +} | |
| 358 | 367 | .timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] { |
| 359 | 368 | background-color: inherit;/*#000*/ |
| 360 | 369 | } |
| 361 | 370 | .tl-canvas { |
| 362 | 371 | margin: 0 6px 0 10px |
| 363 | 372 |
| --- skins/darkmode/css.txt | |
| +++ skins/darkmode/css.txt | |
| @@ -353,10 +353,19 @@ | |
| 353 | text-align: left;*/ |
| 354 | padding: .75em; |
| 355 | border-radius: 5px; |
| 356 | border: dashed #ff8000 |
| 357 | } |
| 358 | .timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] { |
| 359 | background-color: inherit;/*#000*/ |
| 360 | } |
| 361 | .tl-canvas { |
| 362 | margin: 0 6px 0 10px |
| 363 |
| --- skins/darkmode/css.txt | |
| +++ skins/darkmode/css.txt | |
| @@ -353,10 +353,19 @@ | |
| 353 | text-align: left;*/ |
| 354 | padding: .75em; |
| 355 | border-radius: 5px; |
| 356 | border: dashed #ff8000 |
| 357 | } |
| 358 | .timelineFocused { |
| 359 | background-image: url("data:image/svg+xml,%3Csvg \ |
| 360 | xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ |
| 361 | style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important; |
| 362 | /*Note: IE requires explicit declarations for the next three properties.*/ |
| 363 | background-position: top left; |
| 364 | background-repeat: repeat repeat; |
| 365 | background-size: 64px 64px; |
| 366 | } |
| 367 | .timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] { |
| 368 | background-color: inherit;/*#000*/ |
| 369 | } |
| 370 | .tl-canvas { |
| 371 | margin: 0 6px 0 10px |
| 372 |
+9
| --- skins/eagle/css.txt | ||
| +++ skins/eagle/css.txt | ||
| @@ -189,10 +189,19 @@ | ||
| 189 | 189 | background-color: #7EA2D9; |
| 190 | 190 | } |
| 191 | 191 | .timelineSecondary { |
| 192 | 192 | background-color: #7EA27E; |
| 193 | 193 | } |
| 194 | +.timelineFocused { | |
| 195 | + background-image: url("data:image/svg+xml,%3Csvg \ | |
| 196 | +xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ | |
| 197 | +style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E"); | |
| 198 | +/*Note: IE requires explicit declarations for the next three properties.*/ | |
| 199 | + background-position: top left; | |
| 200 | + background-repeat: repeat repeat; | |
| 201 | + background-size: 64px 64px; | |
| 202 | +} | |
| 194 | 203 | |
| 195 | 204 | /* commit node */ |
| 196 | 205 | .tl-node { |
| 197 | 206 | width: 10px; |
| 198 | 207 | height: 10px; |
| 199 | 208 |
| --- skins/eagle/css.txt | |
| +++ skins/eagle/css.txt | |
| @@ -189,10 +189,19 @@ | |
| 189 | background-color: #7EA2D9; |
| 190 | } |
| 191 | .timelineSecondary { |
| 192 | background-color: #7EA27E; |
| 193 | } |
| 194 | |
| 195 | /* commit node */ |
| 196 | .tl-node { |
| 197 | width: 10px; |
| 198 | height: 10px; |
| 199 |
| --- skins/eagle/css.txt | |
| +++ skins/eagle/css.txt | |
| @@ -189,10 +189,19 @@ | |
| 189 | background-color: #7EA2D9; |
| 190 | } |
| 191 | .timelineSecondary { |
| 192 | background-color: #7EA27E; |
| 193 | } |
| 194 | .timelineFocused { |
| 195 | background-image: url("data:image/svg+xml,%3Csvg \ |
| 196 | xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ |
| 197 | style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E"); |
| 198 | /*Note: IE requires explicit declarations for the next three properties.*/ |
| 199 | background-position: top left; |
| 200 | background-repeat: repeat repeat; |
| 201 | background-size: 64px 64px; |
| 202 | } |
| 203 | |
| 204 | /* commit node */ |
| 205 | .tl-node { |
| 206 | width: 10px; |
| 207 | height: 10px; |
| 208 |
+10
| --- skins/xekri/css.txt | ||
| +++ skins/xekri/css.txt | ||
| @@ -842,10 +842,20 @@ | ||
| 842 | 842 | padding: 0 1em 0 1em; |
| 843 | 843 | border-radius: 1rem; |
| 844 | 844 | background: #333; |
| 845 | 845 | box-shadow: 2px 2px 1px #000; |
| 846 | 846 | } |
| 847 | + | |
| 848 | +.timelineFocused { | |
| 849 | + background-image: url("data:image/svg+xml,%3Csvg \ | |
| 850 | +xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ | |
| 851 | +style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important; | |
| 852 | +/*Note: IE requires explicit declarations for the next three properties.*/ | |
| 853 | + background-position: top left; | |
| 854 | + background-repeat: repeat repeat; | |
| 855 | + background-size: 64px 64px; | |
| 856 | +} | |
| 847 | 857 | |
| 848 | 858 | .timelineTable .timelineModernCell .timelineModernComment , |
| 849 | 859 | .timelineTable .timelineModernCell .timelineModernDetail , |
| 850 | 860 | .timelineTable .timelineCompactCell .timelineCompactComment , |
| 851 | 861 | .timelineTable .timelineCompactCell .timelineCompactDetail , |
| 852 | 862 |
| --- skins/xekri/css.txt | |
| +++ skins/xekri/css.txt | |
| @@ -842,10 +842,20 @@ | |
| 842 | padding: 0 1em 0 1em; |
| 843 | border-radius: 1rem; |
| 844 | background: #333; |
| 845 | box-shadow: 2px 2px 1px #000; |
| 846 | } |
| 847 | |
| 848 | .timelineTable .timelineModernCell .timelineModernComment , |
| 849 | .timelineTable .timelineModernCell .timelineModernDetail , |
| 850 | .timelineTable .timelineCompactCell .timelineCompactComment , |
| 851 | .timelineTable .timelineCompactCell .timelineCompactDetail , |
| 852 |
| --- skins/xekri/css.txt | |
| +++ skins/xekri/css.txt | |
| @@ -842,10 +842,20 @@ | |
| 842 | padding: 0 1em 0 1em; |
| 843 | border-radius: 1rem; |
| 844 | background: #333; |
| 845 | box-shadow: 2px 2px 1px #000; |
| 846 | } |
| 847 | |
| 848 | .timelineFocused { |
| 849 | background-image: url("data:image/svg+xml,%3Csvg \ |
| 850 | xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ |
| 851 | style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important; |
| 852 | /*Note: IE requires explicit declarations for the next three properties.*/ |
| 853 | background-position: top left; |
| 854 | background-repeat: repeat repeat; |
| 855 | background-size: 64px 64px; |
| 856 | } |
| 857 | |
| 858 | .timelineTable .timelineModernCell .timelineModernComment , |
| 859 | .timelineTable .timelineModernCell .timelineModernDetail , |
| 860 | .timelineTable .timelineCompactCell .timelineCompactComment , |
| 861 | .timelineTable .timelineCompactCell .timelineCompactDetail , |
| 862 |
+1
-1
| --- src/default.css | ||
| +++ src/default.css | ||
| @@ -54,11 +54,11 @@ | ||
| 54 | 54 | border-width: 0; |
| 55 | 55 | } |
| 56 | 56 | .timelineFocused { |
| 57 | 57 | background-image: url("data:image/svg+xml,%3Csvg \ |
| 58 | 58 | xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ |
| 59 | -style='fill:orange;opacity:0.5' d='M0,0h1v1h-1z'/%3E%3C/svg%3E"); | |
| 59 | +style='fill:black;opacity:0.1' d='M0,0h1v1h-1z'/%3E%3C/svg%3E"); | |
| 60 | 60 | /*Note: IE requires explicit declarations for the next three properties.*/ |
| 61 | 61 | background-position: top left; |
| 62 | 62 | background-repeat: repeat repeat; |
| 63 | 63 | background-size: 64px 64px; |
| 64 | 64 | } |
| 65 | 65 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -54,11 +54,11 @@ | |
| 54 | border-width: 0; |
| 55 | } |
| 56 | .timelineFocused { |
| 57 | background-image: url("data:image/svg+xml,%3Csvg \ |
| 58 | xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ |
| 59 | style='fill:orange;opacity:0.5' d='M0,0h1v1h-1z'/%3E%3C/svg%3E"); |
| 60 | /*Note: IE requires explicit declarations for the next three properties.*/ |
| 61 | background-position: top left; |
| 62 | background-repeat: repeat repeat; |
| 63 | background-size: 64px 64px; |
| 64 | } |
| 65 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -54,11 +54,11 @@ | |
| 54 | border-width: 0; |
| 55 | } |
| 56 | .timelineFocused { |
| 57 | background-image: url("data:image/svg+xml,%3Csvg \ |
| 58 | xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \ |
| 59 | style='fill:black;opacity:0.1' d='M0,0h1v1h-1z'/%3E%3C/svg%3E"); |
| 60 | /*Note: IE requires explicit declarations for the next three properties.*/ |
| 61 | background-position: top left; |
| 62 | background-repeat: repeat repeat; |
| 63 | background-size: 64px 64px; |
| 64 | } |
| 65 |