git ssb

1
body {
2
  font-family: sans-serif;
3
}
4
5
h1, h2, h3, h4, h5, h6, p, ul, ol {
6
  margin-top: .35em;
7
}
8
9
h1 { font-size: 1.2em; }
10
h2 { font-size: 1.18em; }
11
h3 { font-size: 1.15em; }
12
h4 { font-size: 1.12em; }
13
h5 { font-size: 1.1em; }
14
h6 { font-size: 1em; }
15
16
* {
17
  word-break: break-word;
18
}
19
20
a:link, a:visited, a:active {
21
  color: #0088cc;
22
  text-decoration: none;
23
}
24
25
a:hover,
26
a:focus {
27
  color: #005580;
28
  text-decoration: underline;
29
}
30
31
.screen {
32
  position: absolute;
33
  top: 0; bottom: 0;
34
  left: 0; right: 0;
35
  overflow-y: hidden;
36
}
37
38
.column {
39
  display: flex;
40
  flex-direction: column;
41
  min-height:0px;
42
}
43
44
.row {
45
  display: flex;
46
  flex-direction: row;
47
  min-height:0px;
48
}
49
50
.end {
51
  justify-content: flex-end;
52
}
53
54
.wrap {
55
  display: flex;
56
  flex-direction: row;
57
  flex-wrap: wrap;
58
}
59
60
.no-shrink {
61
  flex-shrink: 0;
62
}
63
64
.expand {
65
  justify-content: space-between;
66
}
67
68
.scroll-y {
69
  overflow-y: auto;
70
  min-height: 0px;
71
}
72
73
.scroll-x {
74
  overflow-x: auto;
75
  min-width: 0px;
76
}
77
78
pre {
79
  white-space: pre-wrap;
80
  word-wrap: break-word;
81
}
82
83
.wide {
84
  width: 100%;
85
}
86
87
p {
88
  margin-top: .35ex;
89
}
90
91
hr {
92
  border: solid #eee;
93
  clear: both;
94
  border-width: 1px 0 0;
95
  height: 0;
96
  margin-bottom: .9em;
97
}
98
99
input, textarea {
100
  border: none;
101
  border-radius: .2em;
102
  font-family: sans-serif;
103
}
104
105
input:focus, .compose:focus, .message:focus, button:focus {
106
  outline: none;
107
  border-color: #0088cc; 
108
  box-shadow: 0 0 4px #0088cc;
109
}
110
111
textarea {
112
  padding: .5em;
113
  font-size: 1em;
114
}
115
116
textarea:focus {
117
  outline: none;
118
  border-color: none;
119
}
120
121
button {
122
  background: #fff;
123
  color: #666;
124
  border: 1px solid #bbb;
125
  border-radius: .5em;
126
  padding: .7em;
127
  margin: .5em;
128
  cursor: pointer;
129
  text-transform: uppercase;
130
  font-weight: bold;
131
  font-size: .7em;
132
}
133
134
button:hover {
135
  background: #ccc;
136
  border: 1px solid #bbb;
137
}
138
139
.menu {
140
  position: absolute;
141
  top: .5em;
142
  right: .5em;
143
  padding-top: .5em;
144
  padding-bottom: .5em;
145
  padding-right: 1em;
146
  padding-left: 1em;
147
  background: #f5f5f5;
148
  border: 1px solid #eee;
149
  border-radius: .2em;
150
  z-index: 5;
151
}
152
153
/* scrolling feeds, threads */
154
155
.scroller {
156
  width: 100%;
157
}
158
159
.scroller__wrapper {
160
  flex: 1;
161
  max-width: 600px;
162
  margin-left: auto;
163
  margin-right: auto;
164
}
165
166
/* compose */
167
168
.compose {
169
  width: 100%;
170
  margin-top: .5em;
171
  margin-bottom: .5em;
172
  border: 1px solid #f5f5f5;
173
}
174
175
.compose button {
176
  float: right;
177
}
178
179
/* messages */
180
/*to be deprecated once message preview is converted to modular style*/
181
182
.message {
183
  position: relative;
184
  flex-basis: 0;
185
  margin-top: .25em; 
186
  margin-bottom: .25em;
187
  padding: .2em;
188
  border-top: 1px solid #f5f5f5;
189
  // border-bottom: 1px solid #f5f5f5;
190
  background: white;
191
}
192
193
.message:hover {
194
  background: #f9f9f9;
195
}
196
197
198
.message_content div > span {
199
  font-size: 0.9em;
200
  margin-bottom: 0.7em;
201
  display: block;
202
  color: #888;
203
}
204
205
.message_content--mini div > span {
206
  display: inline-block;
207
}
208
209
.message_content div > span a {
210
  color: #005d8c;
211
}
212
213
.message_meta input {
214
  font-size: .8em;
215
}
216
217
.message_meta {
218
  margin-left: auto;
219
}
220
221
.message_meta > * {
222
  margin-left: .5ex;
223
}
224
225
.message_actions {
226
  position: absolute;
227
  bottom: 0; right: 0;
228
  margin-right: .5ex;
229
  margin-bottom: .5ex;
230
}
231
232
.title {
233
  padding: .5ex;
234
}
235
236
.message img {
237
  max-width: 100%;
238
}
239
240
.message > .title > .avatar {
241
  margin-left: 0;
242
}
243
244
.message_content {
245
  padding: .5ex;
246
}
247
248
.actions > * {
249
  padding-left: 5px;
250
  margin-left: 1px;
251
}
252
253
.actions > :not(:last-child) {
254
  border-right: 2px solid #eee;
255
  padding-right: 5px;
256
}
257
258
.emoji {
259
  height: 1em;
260
  width: 1em;
261
  vertical-align: top;
262
}
263
264
265
/* -- suggest box */
266
267
.suggest-box > * {
268
  display: block;
269
}
270
271
.suggest-box ul {
272
  padding: 0;
273
  list-style-type: none;
274
  padding-left: 0;
275
  background: #eee;
276
  border: 1px solid #eee;
277
  border-radius: 2px;
278
}
279
280
.suggest-box .selected {
281
  background: white;
282
}
283
284
.suggest-box {
285
  width: max-content;
286
  background: #white;
287
  border-radius: 1em;
288
}
289
290
/* emoji */
291
.suggest-box img {
292
  height: 20px;
293
  width: 20px;
294
}
295
296
/* avatar */
297
298
.avatar--large, 
299
.avatar--thumbnail, 
300
.avatar--fullsize {
301
  border: 1px solid #eee;
302
}
303
304
.avatar--large {
305
  width: 10em;
306
  height: 10em;
307
}
308
309
.avatar--thumbnail {
310
  width: 2.5em;
311
  height: 2.5em;
312
  float: left;
313
  margin-right: .5ex;
314
}
315
316
.avatar--fullsize {
317
  width: 50%;
318
}
319
320
.profile {
321
  padding: .5ex;
322
  overflow: auto;
323
}
324
325
.profile input {
326
  width: 100%;
327
}
328
329
.profile__info {
330
  margin-left: .5em;
331
}
332
333
/* lightbox - used in message-confirm */
334
335
.lightbox {
336
  overflow: auto;
337
  padding: 1.5em;
338
  margin-top: 3em;
339
  margin-bottom: 3em;
340
  width: 600px;
341
  background: #f5f5f5;
342
  margin-left: auto;
343
  margin-right: auto;
344
  border: 1px solid #eee;
345
  border-radius: .2em;
346
  z-index: 2;
347
}
348
349
/* searchprompt */
350
351
.searchprompt {
352
  float: left;
353
  width: 85%;
354
  height: 2em;
355
  margin-top: .3em;
356
  border-radius: 1em;
357
  padding-left: .2em;
358
  margin-left: 1em;
359
  margin-right: 1em;
360
}
361
362
/* TextNodeSearcher highlights */
363
364
.highlight {
365
  background: #f5f5f5;
366
}
367
368
/* avatar editor */
369
370
.hypercrop__canvas {
371
  width: 100%;
372
}
373
374
/* gitssb */
375
376
.git-table-wrapper {
377
  max-height: 12em;
378
  overflow: auto;
379
  word-break: break-all;
380
  margin: 1em 0;
381
}
382
383
.git-table-wrapper table {
384
  width: 100%;
385
}
386
387
/* --- network status --- */
388
389
.status {
390
  width: .7em;
391
  height: .7em;
392
  margin: .7em;
393
  border-radius: 100%;
394
  background: #08c;
395
}
396
397
.error {
398
  background: red;
399
}
400
401
/* tabs */
402
403
.header {
404
  background: #f5f5f5;
405
  border-bottom: 1px inset;
406
  flex-shrink: 0;
407
}
408
409
.header__tabs {
410
  width: 100%; 
411
  min-width: 0px;
412
}
413
414
/* --- hypertabs ------- */
415
416
.hypertabs__tabs {
417
  min-width: 0px;
418
  width: 100%;
419
}
420
421
.hypertabs__tab {
422
  overflow-x: hidden;
423
  min-width: 0px;
424
  width: 100%;
425
}
426
427
.hypertabs__button {
428
  overflow-x: hidden;
429
  min-width: 0px;
430
  width: 100%;
431
}
432
433
.hypertabs__tab {
434
  color: black;
435
  background: #f5f5f5;
436
  border-top-left-radius: 5px;
437
  margin-left: -3px;
438
  border-bottom: none;
439
  padding-top: .56em;
440
  padding-left: 1em;
441
  border-left: 1px solid #ddd;
442
  width: 100%; 
443
}
444
445
.hypertabs__tab > a {
446
  color: #666;
447
  text-decoration: none;
448
  white-space: nowrap;
449
  font-size: .9em;
450
}
451
452
.hypertabs--selected {
453
  font-weight: bold;
454
  background: #eee;
455
  border-top-right-radius: 5px;
456
  z-index: 1;
457
}
458
459
.hypertabs__x  {
460
  display: none; 
461
  transform: translate(-4px, -3px);
462
}
463
464
.hypertabs--selected .hypertabs__x {
465
  display: block;
466
}
467
468
/* progress bar */
469
470
.hyperprogress__bar {
471
  background: darkgrey;
472
}
473
.hyperprogress__liquid {
474
  background: lightblue;
475
}
476
477
478