Fossil SCM

Attempt to fix the graph CSS for the Xekri skin.

drh 2025-03-28 12:56 trunk
Commit d176fea43ef1b3fb15cb8716f8717f50d5d698b64d4722f0a4ecd471bb713cd7
Parent 9d2e0d0802ed7e1…
2 files changed +101 -1
~ skins/xekri/css.txt ~ src/graph.js
M skins/xekri/css.txt
+101
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -20,10 +20,11 @@
2020
 font-size: 1em;
2121
 min-height: 100%;
2222
 }
2323
2424
 body {
25
+ background-color: #333;
2526
 margin: 0;
2627
 padding: 0;
2728
 text-size-adjust: none;
2829
 }
2930
@@ -882,10 +883,110 @@
882883
883884
 /* the format for the timeline version links */
884885
 a.timelineHistLink {
885886
 }
886887
888
+/* Timeline graph style taken from Ardoise, with
889
+** minor adjustments (2025-03-28) */
890
+.tl-canvas {
891
+ margin: 0 6px 0 10px
892
+}
893
+.tl-rail {
894
+ width: 18px
895
+}
896
+.tl-mergeoffset {
897
+ width: 2px
898
+}
899
+.tl-nodemark {
900
+ margin-top: .8em
901
+}
902
+.tl-node {
903
+ width: 10px;
904
+ height: 10px;
905
+ border: 1px solid #bbb;
906
+ background: #111;
907
+ cursor: pointer
908
+}
909
+.tl-node.leaf:after {
910
+ content: '';
911
+ position: absolute;
912
+ top: 3px;
913
+ left: 3px;
914
+ width: 4px;
915
+ height: 4px;
916
+ background: #bbb
917
+}
918
+.tl-node.closed-leaf svg {
919
+ position: absolute;
920
+ top: 0px;
921
+ left: 0px;
922
+ width: 10px;
923
+ height: 10px;
924
+ color: #bbb;
925
+}
926
+.tl-node.sel:after {
927
+ content: '';
928
+ position: absolute;
929
+ top: 1px;
930
+ left: 1px;
931
+ width: 8px;
932
+ height: 8px;
933
+ background: #ff8000
934
+}
935
+.tl-arrow {
936
+ width: 0;
937
+ height: 0;
938
+ transform: scale(.999);
939
+ border: 0 solid transparent
940
+}
941
+.tl-arrow.u {
942
+ margin-top: -1px;
943
+ border-width: 0 3px;
944
+ border-bottom: 7px solid
945
+}
946
+.tl-arrow.u.sm {
947
+ border-bottom: 5px solid #bbb
948
+}
949
+.tl-line {
950
+ background: #bbb;
951
+ width: 2px
952
+}
953
+.tl-arrow.merge {
954
+ height: 1px;
955
+ border-width: 2px 0
956
+}
957
+.tl-arrow.merge.l {
958
+ border-right: 3px solid #bbb
959
+}
960
+.tl-arrow.merge.r {
961
+ border-left: 3px solid #bbb
962
+}
963
+.tl-line.merge {
964
+ width: 1px
965
+}
966
+.tl-arrow.cherrypick {
967
+ height: 1px;
968
+ border-width: 2px 0;
969
+}
970
+.tl-arrow.cherrypick.l {
971
+ border-right: 3px solid #bbb;
972
+}
973
+.tl-arrow.cherrypick.r {
974
+ border-left: 3px solid #bbb;
975
+}
976
+.tl-line.cherrypick.h {
977
+ width: 0px;
978
+ border-top: 1px dashed #bbb;
979
+ border-left: 0px dashed #bbb;
980
+ background: rgba(255,255,255,0);
981
+}
982
+.tl-line.cherrypick.v {
983
+ width: 0px;
984
+ border-top: 0px dashed #bbb;
985
+ border-left: 1px dashed #bbb;
986
+ background: rgba(255,255,255,0);
987
+}
887988
888989
 /**************************************
889990
 * User Edit
890991
 */
891992
892993
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -20,10 +20,11 @@
20 font-size: 1em;
21 min-height: 100%;
22 }
23
24 body {
 
25 margin: 0;
26 padding: 0;
27 text-size-adjust: none;
28 }
29
@@ -882,10 +883,110 @@
882
883 /* the format for the timeline version links */
884 a.timelineHistLink {
885 }
886
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
887
888 /**************************************
889 * User Edit
890 */
891
892
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -20,10 +20,11 @@
20 font-size: 1em;
21 min-height: 100%;
22 }
23
24 body {
25 background-color: #333;
26 margin: 0;
27 padding: 0;
28 text-size-adjust: none;
29 }
30
@@ -882,10 +883,110 @@
883
884 /* the format for the timeline version links */
885 a.timelineHistLink {
886 }
887
888 /* Timeline graph style taken from Ardoise, with
889 ** minor adjustments (2025-03-28) */
890 .tl-canvas {
891 margin: 0 6px 0 10px
892 }
893 .tl-rail {
894 width: 18px
895 }
896 .tl-mergeoffset {
897 width: 2px
898 }
899 .tl-nodemark {
900 margin-top: .8em
901 }
902 .tl-node {
903 width: 10px;
904 height: 10px;
905 border: 1px solid #bbb;
906 background: #111;
907 cursor: pointer
908 }
909 .tl-node.leaf:after {
910 content: '';
911 position: absolute;
912 top: 3px;
913 left: 3px;
914 width: 4px;
915 height: 4px;
916 background: #bbb
917 }
918 .tl-node.closed-leaf svg {
919 position: absolute;
920 top: 0px;
921 left: 0px;
922 width: 10px;
923 height: 10px;
924 color: #bbb;
925 }
926 .tl-node.sel:after {
927 content: '';
928 position: absolute;
929 top: 1px;
930 left: 1px;
931 width: 8px;
932 height: 8px;
933 background: #ff8000
934 }
935 .tl-arrow {
936 width: 0;
937 height: 0;
938 transform: scale(.999);
939 border: 0 solid transparent
940 }
941 .tl-arrow.u {
942 margin-top: -1px;
943 border-width: 0 3px;
944 border-bottom: 7px solid
945 }
946 .tl-arrow.u.sm {
947 border-bottom: 5px solid #bbb
948 }
949 .tl-line {
950 background: #bbb;
951 width: 2px
952 }
953 .tl-arrow.merge {
954 height: 1px;
955 border-width: 2px 0
956 }
957 .tl-arrow.merge.l {
958 border-right: 3px solid #bbb
959 }
960 .tl-arrow.merge.r {
961 border-left: 3px solid #bbb
962 }
963 .tl-line.merge {
964 width: 1px
965 }
966 .tl-arrow.cherrypick {
967 height: 1px;
968 border-width: 2px 0;
969 }
970 .tl-arrow.cherrypick.l {
971 border-right: 3px solid #bbb;
972 }
973 .tl-arrow.cherrypick.r {
974 border-left: 3px solid #bbb;
975 }
976 .tl-line.cherrypick.h {
977 width: 0px;
978 border-top: 1px dashed #bbb;
979 border-left: 0px dashed #bbb;
980 background: rgba(255,255,255,0);
981 }
982 .tl-line.cherrypick.v {
983 width: 0px;
984 border-top: 0px dashed #bbb;
985 border-left: 1px dashed #bbb;
986 background: rgba(255,255,255,0);
987 }
988
989 /**************************************
990 * User Edit
991 */
992
993
M src/graph.js
-1
--- src/graph.js
+++ src/graph.js
@@ -9,11 +9,10 @@
99
 **
1010
 ** { "iTableId": INTEGER, // Table sequence number (NN)
1111
 ** "circleNodes": BOOLEAN, // True for circle nodes. False for squares
1212
 ** "showArrowheads": BOOLEAN, // True for arrowheads. False to omit
1313
 ** "iRailPitch": INTEGER, // Spacing between vertical lines (px)
14
-** "colorGraph": BOOLEAN, // True to put color on graph lines
1514
 ** "nomo": BOOLEAN, // True to join merge lines with rails
1615
 ** "iTopRow": INTEGER, // Index of top-most row in the graph
1716
 ** "omitDescenders": BOOLEAN, // Omit ancestor lines off bottom of screen
1817
 ** "fileDiff": BOOLEAN, // True for file diff. False for check-in
1918
 ** "scrollToSelect": BOOLEAN, // Scroll to selection on first render
2019
--- src/graph.js
+++ src/graph.js
@@ -9,11 +9,10 @@
9 **
10 ** { "iTableId": INTEGER, // Table sequence number (NN)
11 ** "circleNodes": BOOLEAN, // True for circle nodes. False for squares
12 ** "showArrowheads": BOOLEAN, // True for arrowheads. False to omit
13 ** "iRailPitch": INTEGER, // Spacing between vertical lines (px)
14 ** "colorGraph": BOOLEAN, // True to put color on graph lines
15 ** "nomo": BOOLEAN, // True to join merge lines with rails
16 ** "iTopRow": INTEGER, // Index of top-most row in the graph
17 ** "omitDescenders": BOOLEAN, // Omit ancestor lines off bottom of screen
18 ** "fileDiff": BOOLEAN, // True for file diff. False for check-in
19 ** "scrollToSelect": BOOLEAN, // Scroll to selection on first render
20
--- src/graph.js
+++ src/graph.js
@@ -9,11 +9,10 @@
9 **
10 ** { "iTableId": INTEGER, // Table sequence number (NN)
11 ** "circleNodes": BOOLEAN, // True for circle nodes. False for squares
12 ** "showArrowheads": BOOLEAN, // True for arrowheads. False to omit
13 ** "iRailPitch": INTEGER, // Spacing between vertical lines (px)
 
14 ** "nomo": BOOLEAN, // True to join merge lines with rails
15 ** "iTopRow": INTEGER, // Index of top-most row in the graph
16 ** "omitDescenders": BOOLEAN, // Omit ancestor lines off bottom of screen
17 ** "fileDiff": BOOLEAN, // True for file diff. False for check-in
18 ** "scrollToSelect": BOOLEAN, // Scroll to selection on first render
19

Keyboard Shortcuts

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