Fossil

Check-in [a8d306bec6]
Login

Check-in [a8d306bec6]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment: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.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | timeline-keyboard-navigation
Files: files | file ages | folders
SHA3-256: a8d306bec698896f08a4ed4f728b9b3f35c95067007241762e556cd0431a8efb
User & Date: florian 2022-08-11 06:42:00.000
Context
2022-08-14
07:56
Remap keyboard shortcuts, and ensure only letter keys are combined with SHIFT, as non-letter keys may produce different key code pairs with and without SHIFT depending on the keyboard layout. ... (check-in: 33f9315d44 user: florian tags: timeline-keyboard-navigation)
2022-08-11
06:42
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. ... (check-in: a8d306bec6 user: florian tags: timeline-keyboard-navigation)
06:17
Mention in the help text that ticking the second entry node opens the diff page. Again, thanks @rouilj! ... (check-in: 13e0f32e3b user: florian tags: timeline-keyboard-navigation)
Changes
Unified Diff Ignore Whitespace Patch
Changes to skins/ardoise/css.txt.
︙︙
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017

.timelineCurrent > .timelineVerboseCell {
  vertical-align: top;
  text-align: left;
  padding: .75em;
  border-radius: 5px;
  border: dashed #ff8000
}
.timelineFocused {
  background-image: url("data:image/svg+xml,%3Csvg \
xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \
style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important;
/*Note: IE requires explicit declarations for the next three properties.*/
  background-position: top left;
  background-repeat: repeat repeat;
  background-size: 64px 64px;
}
.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
  background-color: #000
}
.tl-canvas {
  margin: 0 6px 0 10px
}
.tl-rail {








<
<
<
<
<
<
<
<
<








995
996
997
998
999
1000
1001









1002
1003
1004
1005
1006
1007
1008

.timelineCurrent > .timelineVerboseCell {
  vertical-align: top;
  text-align: left;
  padding: .75em;
  border-radius: 5px;
  border: dashed #ff8000
}









.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
  background-color: #000
}
.tl-canvas {
  margin: 0 6px 0 10px
}
.tl-rail {
︙︙
Changes to skins/darkmode/css.txt.
︙︙
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373

.timelineCurrent > .timelineVerboseCell {
  /*vertical-align: top;
  text-align: left;*/
  padding: .75em;
  border-radius: 5px;
  border: dashed #ff8000
}
.timelineFocused {
  background-image: url("data:image/svg+xml,%3Csvg \
xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \
style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important;
/*Note: IE requires explicit declarations for the next three properties.*/
  background-position: top left;
  background-repeat: repeat repeat;
  background-size: 64px 64px;
}
.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
  background-color: inherit;/*#000*/
}
.tl-canvas {
  margin: 0 6px 0 10px
}
.tl-rail {








<
<
<
<
<
<
<
<
<








351
352
353
354
355
356
357









358
359
360
361
362
363
364

.timelineCurrent > .timelineVerboseCell {
  /*vertical-align: top;
  text-align: left;*/
  padding: .75em;
  border-radius: 5px;
  border: dashed #ff8000
}









.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
  background-color: inherit;/*#000*/
}
.tl-canvas {
  margin: 0 6px 0 10px
}
.tl-rail {
︙︙
Changes to skins/eagle/css.txt.
︙︙
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209


.timelineSelected {
  background-color: #7EA2D9;
}
.timelineSecondary {
  background-color: #7EA27E;
}
.timelineFocused {
  background-image: url("data:image/svg+xml,%3Csvg \
xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \
style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E");
/*Note: IE requires explicit declarations for the next three properties.*/
  background-position: top left;
  background-repeat: repeat repeat;
  background-size: 64px 64px;
}

/* commit node */
.tl-node {
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  background: #485D7B;








<
<
<
<
<
<
<
<
<








187
188
189
190
191
192
193









194
195
196
197
198
199
200


.timelineSelected {
  background-color: #7EA2D9;
}
.timelineSecondary {
  background-color: #7EA27E;
}










/* commit node */
.tl-node {
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  background: #485D7B;
︙︙
Changes to skins/xekri/css.txt.
︙︙
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864

span.timelineSelected {
  padding: 0 1em 0 1em;
  border-radius: 1rem;
  background: #333;
  box-shadow:    2px 2px 1px #000;
}

.timelineFocused {
  background-image: url("data:image/svg+xml,%3Csvg \
xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \
style='fill:white;opacity:0.2' d='M0,0h1v1h-1z'/%3E%3C/svg%3E") !important;
/*Note: IE requires explicit declarations for the next three properties.*/
  background-position: top left;
  background-repeat: repeat repeat;
  background-size: 64px 64px;
}

.timelineTable .timelineModernCell  .timelineModernComment  ,
.timelineTable .timelineModernCell  .timelineModernDetail   ,
.timelineTable .timelineCompactCell .timelineCompactComment ,
.timelineTable .timelineCompactCell .timelineCompactDetail  ,
.timelineTable .timelineVerboseCell .timelineVerboseComment ,
.timelineTable .timelineVerboseCell .timelineVerboseDetail  {
}








<
<
<
<
<
<
<
<
<
<








841
842
843
844
845
846
847










848
849
850
851
852
853
854

span.timelineSelected {
  padding: 0 1em 0 1em;
  border-radius: 1rem;
  background: #333;
  box-shadow:    2px 2px 1px #000;
}











.timelineTable .timelineModernCell  .timelineModernComment  ,
.timelineTable .timelineModernCell  .timelineModernDetail   ,
.timelineTable .timelineCompactCell .timelineCompactComment ,
.timelineTable .timelineCompactCell .timelineCompactDetail  ,
.timelineTable .timelineVerboseCell .timelineVerboseComment ,
.timelineTable .timelineVerboseCell .timelineVerboseDetail  {
}
︙︙
Changes to src/default.css.
︙︙
49
50
51
52
53
54
55
56


57
58
59





60


61
62
63
64
65
66
67
68
69
70

  border-radius: 0;
  border-width: 0;
}
tr.timelineCurrent td {
  border-radius: 0;
  border-width: 0;
}
.timelineFocused {


  background-image: url("data:image/svg+xml,%3Csvg \
xmlns='http://www.w3.org/2000/svg' viewBox='0,0,1,1'%3E%3Cpath \
style='fill:black;opacity:0.1' d='M0,0h1v1h-1z'/%3E%3C/svg%3E");





/*Note: IE requires explicit declarations for the next three properties.*/


  background-position: top left;
  background-repeat: repeat repeat;
  background-size: 64px 64px;
}
span.timelineLeaf {
  font-weight: bold;
}
span.timelineHistDsp {
  font-weight: bold;
}








|
>
>
|
<
<
>
>
>
>
>
|
>
>
|
<
<








49
50
51
52
53
54
55
56
57
58
59


60
61
62
63
64
65
66
67
68


69
70
71
72
73
74
75

  border-radius: 0;
  border-width: 0;
}
tr.timelineCurrent td {
  border-radius: 0;
  border-width: 0;
}
.timelineFocused,
.timelineFocused a {
  color: #fff1a8 !important;
  background-color: #3a6ea5 !important;


}
.timelineFocused a:link,
.timelineFocused a:focus,
.timelineFocused a:active,
.timelineFocused a:visited {
  text-decoration: underline;
}
.timelineFocused a:hover {
  text-decoration: none;


}
span.timelineLeaf {
  font-weight: bold;
}
span.timelineHistDsp {
  font-weight: bold;
}
︙︙