Fossil

Check-in [7d02688690]
Login

Check-in [7d02688690]

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

Overview
Comment: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.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | timeline-keyboard-navigation
Files: files | file ages | folders
SHA3-256: 7d026886906dbaa3f082ba7cef4cae60eb2f00dcd2c5446420256e9697e6d1a6
User & Date: florian 2022-08-04 11:42:00.000
Context
2022-08-04
11:46
Docs v0.1, with upper-/lower-case letter notation, instead of SHIFT+LETTER (which may be somewhat confusing for the "," and ";" case). ... (check-in: b02508d358 user: florian tags: timeline-keyboard-navigation)
11:42
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. ... (check-in: 7d02688690 user: florian tags: timeline-keyboard-navigation)
06:57
Experimental change to scroll the focused entry into view with a Fossil-style scrolling function to keep the entry centered vertically. This is much better than `Element.scrollIntoView()' for FF (but maybe a matter of tweaking the function arguments). Kudos to the wiz who programmed the `scrollToSelected()' function! ... (check-in: ad3a8e0b87 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

.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 {








>
>
>
>
>
>
>
>
>








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 {
︙︙
Changes to skins/darkmode/css.txt.
︙︙
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 {








>
>
>
>
>
>
>
>
>








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 {
︙︙
Changes to skins/eagle/css.txt.
︙︙
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;








>
>
>
>
>
>
>
>
>








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;
︙︙
Changes to skins/xekri/css.txt.
︙︙
840
841
842
843
844
845
846










847
848
849
850
851
852
853


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  {








>
>
>
>
>
>
>
>
>
>








840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863


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  {
︙︙
Changes to src/default.css.
︙︙
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

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:orange;opacity:0.5' 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;








|








52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

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;
︙︙