git ssb

1
FriendHops {
2
  display: grid
3
  grid-gap: 1rem
4
5
  div.description {}
6
7
  --range-options: 4
8
  --cols: calc(2 * var(--range-options))
9
10
  div.slider {
11
    display: grid
12
    grid-template-columns: repeat(var(--cols), 1fr)
13
14
    datalist {
15
      grid-row: 1
16
      grid-column: 1 / calc(var(--cols) + 1)
17
18
      display: grid
19
      grid-template-columns: 1fr 1fr 1fr 1fr
20
      justify-items: center
21
    }
22
23
    input[type=range] {
24
      grid-row: 2
25
      grid-column: 2 / var(--cols)
26
27
      margin-left: 0
28
    }
29
  }
30
31
  div.alert {
32
    padding: .5rem
33
    background: #fdbdfd
34
  }
35
}
36
37
FollowGraph {
38
  --out-node-fill: #e4e4e4;
39
  --out-node-stroke: #808080;
40
  --out-edge-stroke: rgba(143, 143, 143, 0.3);
41
  --out-edge-marker: var(--out-edge-stroke);
42
  --out-circle-fill: rgba(0, 0, 0, 0);
43
  --out-circle-stroke: rgba(0, 0, 0, 0.2);
44
  --in-node-fill: rgba(255, 49, 221, 0.65);
45
  --in-node-stroke: #ff0000;
46
  --in-edge-stroke: rgba(255, 0, 115, 0.28);
47
  --in-edge-marker: var(--in-edge-stroke);
48
  --in-circle-fill: rgba(161, 120, 255, 0.3);
49
  --in-circle-stroke: rgba(211, 14, 241, 0.17);
50
51
  --font-size: 15px
52
53
  svg {
54
    width: 100%
55
    min-width: 900px
56
  }
57
58
  /* DEFAULTS */
59
  (circle[data-type="circle"]) {
60
    fill: var(--out-circle-fill)
61
    stroke: var(--out-circle-stroke)
62
  }
63
  (g[data-type="nodes"]) {
64
    fill: var(--out-node-fill)
65
    stroke: var(--out-node-stroke)
66
  }
67
  (g[data-type="edges"]) {
68
    stroke: var(--out-edge-stroke)
69
  }
70
  (marker) {
71
    fill: var(--out-edge-marker)
72
    stroke: var(--out-edge-marker)
73
  }
74
75
  (g[data-type="note"]) { font-size: var(--font-size) }
76
  (text[data-type="note"]) { font-size: var(--font-size) }
77
  (g[data-type="note"][data-hop="2"]) { opacity: 0 }
78
  (g[data-type="note"][data-hop="3"]) { opacity: 0 }
79
  /* DEFAULTS */
80
81
82
  -zero {
83
    $zero-on
84
  }
85
86
  -one {
87
    $zero-on
88
    $one-on
89
90
  }
91
92
  -two {
93
    $zero-on
94
    $one-on
95
    $two-on
96
97
    (g[data-type="note"][data-hop="2"]) { opacity: 1 }
98
  }
99
100
  -three {
101
    $zero-on
102
    $one-on
103
    $two-on
104
    $three-on
105
106
    (g[data-type="note"][data-hop="3"]) { opacity: 1 }
107
  }
108
109
  $zero-on {
110
    (circle[data-type="circle"][data-hop="0"]) {
111
      fill: var(--in-circle-fill)
112
      stroke: var(--in-circle-stroke)
113
    }
114
  }
115
116
  /* PARTIALS */
117
  $one-on {
118
    (circle[data-type="circle"][data-hop="1"]) {
119
      fill: var(--in-circle-fill)
120
      stroke: var(--in-circle-stroke)
121
    }
122
    (g[data-type="nodes"][data-hop="1"]) {
123
      fill: var(--in-node-fill)
124
      stroke: var(--in-node-stroke)
125
    }
126
    (g[data-type="edges"][data-hop="1"]) {
127
      stroke: var(--in-edge-stroke)
128
    }
129
    (marker[data-hop="1"]) {
130
      fill: var(--in-edge-marker)
131
      stroke: var(--in-edge-marker)
132
    }
133
  }
134
135
  $two-on {
136
    (circle[data-type="circle"][data-hop="2"]) {
137
      fill: var(--in-circle-fill)
138
      stroke: var(--in-circle-stroke)
139
    }
140
    (g[data-type="nodes"][data-hop="2"]) {
141
      fill: var(--in-node-fill)
142
      stroke: var(--in-node-stroke)
143
    }
144
    (g[data-type="edges"][data-hop="2"]) {
145
      stroke: var(--in-edge-stroke)
146
    }
147
    (marker[data-hop="2"]) {
148
      fill: var(--in-edge-marker)
149
      stroke: var(--in-edge-marker)
150
    }
151
  }
152
153
  $three-on {
154
    (circle[data-type="circle"][data-hop="3"]) {
155
      fill: var(--in-circle-fill)
156
      stroke: var(--in-circle-stroke)
157
    }
158
    (g[data-type="nodes"][data-hop="3"]) {
159
      fill: var(--in-node-fill)
160
      stroke: var(--in-node-stroke)
161
    }
162
    (g[data-type="edges"][data-hop="3"]) {
163
      stroke: var(--in-edge-stroke)
164
    }
165
    (marker[data-hop="3"]) {
166
      fill: var(--in-edge-marker)
167
      stroke: var(--in-edge-marker)
168
    }
169
  }
170
}
171