Fossil SCM

Another attempt to make the CSS for the focus indicator work with any skin foreground and background colors and branch colors: instead of changing just the background color, the foreground color is also adjusted, so the indicator can still be recognized even if similar to a branch color. Besides, no more editing of SVG code is necessary to make adjustments.

florian 2022-08-11 06:42 timeline-keyboard-navigation
Commit a8d306bec698896f08a4ed4f728b9b3f35c95067007241762e556cd0431a8efb
Parent 13e0f32e3b6e5ed…
5 files changed -9 -9 -9 -10 +13 -8
~ skins/ardoise/css.txt ~ skins/darkmode/css.txt ~ skins/eagle/css.txt ~ skins/xekri/css.txt ~ src/default.css
M skins/ardoise/css.txt
-9
--- skins/ardoise/css.txt
+++ skins/ardoise/css.txt
@@ -997,19 +997,10 @@
997997
 text-align: left;
998998
 padding: .75em;
999999
 border-radius: 5px;
10001000
 border: dashed #ff8000
10011001
 }
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
-}
10111002
 .timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
10121003
 background-color: #000
10131004
 }
10141005
 .tl-canvas {
10151006
 margin: 0 6px 0 10px
10161007
--- skins/ardoise/css.txt
+++ skins/ardoise/css.txt
@@ -997,19 +997,10 @@
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/ardoise/css.txt
+++ skins/ardoise/css.txt
@@ -997,19 +997,10 @@
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
M skins/darkmode/css.txt
-9
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -353,19 +353,10 @@
353353
 text-align: left;*/
354354
 padding: .75em;
355355
 border-radius: 5px;
356356
 border: dashed #ff8000
357357
 }
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
-}
367358
 .timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
368359
 background-color: inherit;/*#000*/
369360
 }
370361
 .tl-canvas {
371362
 margin: 0 6px 0 10px
372363
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -353,19 +353,10 @@
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
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -353,19 +353,10 @@
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
M skins/eagle/css.txt
-9
--- skins/eagle/css.txt
+++ skins/eagle/css.txt
@@ -189,19 +189,10 @@
189189
 background-color: #7EA2D9;
190190
 }
191191
 .timelineSecondary {
192192
 background-color: #7EA27E;
193193
 }
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
-}
203194
204195
 /* commit node */
205196
 .tl-node {
206197
 width: 10px;
207198
 height: 10px;
208199
--- skins/eagle/css.txt
+++ skins/eagle/css.txt
@@ -189,19 +189,10 @@
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
--- skins/eagle/css.txt
+++ skins/eagle/css.txt
@@ -189,19 +189,10 @@
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
M skins/xekri/css.txt
-10
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -843,20 +843,10 @@
843843
 border-radius: 1rem;
844844
 background: #333;
845845
 box-shadow: 2px 2px 1px #000;
846846
 }
847847
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
-
858848
 .timelineTable .timelineModernCell .timelineModernComment ,
859849
 .timelineTable .timelineModernCell .timelineModernDetail ,
860850
 .timelineTable .timelineCompactCell .timelineCompactComment ,
861851
 .timelineTable .timelineCompactCell .timelineCompactDetail ,
862852
 .timelineTable .timelineVerboseCell .timelineVerboseComment ,
863853
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -843,20 +843,10 @@
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 .timelineTable .timelineVerboseCell .timelineVerboseComment ,
863
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -843,20 +843,10 @@
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 .timelineTable .timelineVerboseCell .timelineVerboseComment ,
853
M src/default.css
+13 -8
--- src/default.css
+++ src/default.css
@@ -51,18 +51,23 @@
5151
 }
5252
 tr.timelineCurrent td {
5353
 border-radius: 0;
5454
 border-width: 0;
5555
 }
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;
56
+.timelineFocused,
57
+.timelineFocused a {
58
+ color: #fff1a8 !important;
59
+ background-color: #3a6ea5 !important;
60
+}
61
+.timelineFocused a:link,
62
+.timelineFocused a:focus,
63
+.timelineFocused a:active,
64
+.timelineFocused a:visited {
65
+ text-decoration: underline;
66
+}
67
+.timelineFocused a:hover {
68
+ text-decoration: none;
6469
 }
6570
 span.timelineLeaf {
6671
 font-weight: bold;
6772
 }
6873
 span.timelineHistDsp {
6974
--- src/default.css
+++ src/default.css
@@ -51,18 +51,23 @@
51 }
52 tr.timelineCurrent td {
53 border-radius: 0;
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 span.timelineLeaf {
66 font-weight: bold;
67 }
68 span.timelineHistDsp {
69
--- src/default.css
+++ src/default.css
@@ -51,18 +51,23 @@
51 }
52 tr.timelineCurrent td {
53 border-radius: 0;
54 border-width: 0;
55 }
56 .timelineFocused,
57 .timelineFocused a {
58 color: #fff1a8 !important;
59 background-color: #3a6ea5 !important;
60 }
61 .timelineFocused a:link,
62 .timelineFocused a:focus,
63 .timelineFocused a:active,
64 .timelineFocused a:visited {
65 text-decoration: underline;
66 }
67 .timelineFocused a:hover {
68 text-decoration: none;
69 }
70 span.timelineLeaf {
71 font-weight: bold;
72 }
73 span.timelineHistDsp {
74

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button