git ssb

1
body {
2
  font-family: 'Source Sans Pro', 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
}
114
115
textarea:focus {
116
  outline: none;
117
  border-color: none;
118
}
119
120
button {
121
  background: #fff;
122
  color: #666;
123
  border: 1px solid #bbb;
124
  border-radius: .5em;
125
  padding: .7em;
126
  margin: .5em;
127
  cursor: pointer;
128
  text-transform: uppercase;
129
  font-weight: bold;
130
  font-size: .7em;
131
}
132
133
button:hover {
134
  background: #ccc;
135
  border: 1px solid #bbb;
136
}
137
138
.menu {
139
  position: absolute;
140
  top: .5em;
141
  right: .5em;
142
  padding-top: .5em;
143
  padding-bottom: .5em;
144
  padding-right: 1em;
145
  padding-left: 1em;
146
  background: #f5f5f5;
147
  border: 1px solid #eee;
148
  border-radius: .2em;
149
  z-index: 5;
150
}
151
152
/* scrolling feeds, threads */
153
154
.scroller {
155
  width: 100%;
156
}
157
158
.scroller__wrapper {
159
  flex: 1;
160
  max-width: 600px;
161
  margin-left: auto;
162
  margin-right: auto;
163
}
164
165
/* compose */
166
167
.compose {
168
  width: 100%;
169
  margin-top: .5em;
170
  margin-bottom: .5em;
171
  border: 1px solid #f5f5f5;
172
}
173
174
.compose button {
175
  float: right;
176
}
177
178
/* messages */
179
180
.message {
181
  position: relative;
182
  flex-basis: 0;
183
  margin-top: .25em; 
184
  margin-bottom: .25em;
185
  padding: .2em;
186
  border-top: 1px solid #f5f5f5;
187
  // border-bottom: 1px solid #f5f5f5;
188
  background: white;
189
}
190
191
.message:hover {
192
  background: #f9f9f9;
193
}
194
195
.message--mini {
196
  font-size: 1em;
197
  margin: 0;
198
  padding: .2em;
199
  border: none;
200
  background: inherit;
201
}
202
203
.message_content div > span {
204
  font-size: 0.9em;
205
  margin-bottom: 0.7em;
206
  display: block;
207
  color: #888;
208
}
209
210
.message_content--mini div > span {
211
  display: inline-block;
212
}
213
214
.message_content div > span a {
215
  color: #005d8c;
216
}
217
218
.message_meta input {
219
  font-size: .8em;
220
}
221
222
.message_meta {
223
  margin-left: auto;
224
}
225
226
.message_meta > * {
227
  margin-left: .5ex;
228
}
229
230
.message_actions {
231
  position: absolute;
232
  bottom: 0; right: 0;
233
  margin-right: .5ex;
234
  margin-bottom: .5ex;
235
}
236
237
.title {
238
  padding: .5ex;
239
}
240
241
.message img {
242
  max-width: 100%;
243
}
244
245
.message > .title > .avatar {
246
  margin-left: 0;
247
}
248
249
.message_content {
250
  padding: .5ex;
251
}
252
253
.actions > * {
254
  padding-left: 5px;
255
  margin-left: 1px;
256
}
257
258
.actions > :not(:last-child) {
259
  border-right: 2px solid #eee;
260
  padding-right: 5px;
261
}
262
263
264
/* -- suggest box */
265
266
.suggest-box > * {
267
  display: block;
268
}
269
270
.suggest-box ul {
271
  padding: 0;
272
  list-style-type: none;
273
  margin-left: -2em;
274
  background: #f7f7f7;
275
  padding-top: .1em;
276
  padding-bottom: .1em;
277
  border-radius: .2em;
278
  border: 1px solid #eee;
279
}
280
281
.suggest-box .selected {
282
  background: white;
283
}
284
285
.suggest-box {
286
  width: max-content;
287
  background: #white;
288
  border-radius: 1em;
289
}
290
291
/* avatar */
292
293
.avatar--large, 
294
.avatar--thumbnail, 
295
.avatar--fullsize {
296
  border: 1px solid #eee;
297
}
298
299
.avatar--large {
300
  width: 10em;
301
  height: 10em;
302
}
303
304
.avatar--thumbnail {
305
  width: 2.5em;
306
  height: 2.5em;
307
  float: left;
308
  margin-right: .5ex;
309
}
310
311
.avatar--fullsize {
312
  width: 50%;
313
}
314
315
.profile {
316
  padding: .5ex;
317
  overflow: auto;
318
}
319
320
.profile input {
321
  width: 100%;
322
}
323
324
.profile__info {
325
  margin-left: .5em;
326
}
327
328
/* lightbox - used in message-confirm */
329
330
.lightbox {
331
  overflow: auto;
332
  padding: 1.5em;
333
  margin-top: 3em;
334
  margin-bottom: 3em;
335
  width: 600px;
336
  background: #f5f5f5;
337
  margin-left: auto;
338
  margin-right: auto;
339
  border: 1px solid #eee;
340
  border-radius: .2em;
341
  z-index: 2;
342
}
343
344
/* searchprompt */
345
346
.searchprompt {
347
  float: left;
348
  width: 85%;
349
  height: 2em;
350
  margin-top: .3em;
351
  border-radius: 1em;
352
  padding-left: .2em;
353
  margin-left: 1em;
354
  margin-right: 1em;
355
}
356
357
/* TextNodeSearcher highlights */
358
359
.highlight {
360
  background: #f5f5f5;
361
}
362
363
/* avatar editor */
364
365
.hypercrop__canvas {
366
  width: 100%;
367
}
368
369
/* gitssb */
370
371
.git-table-wrapper {
372
  max-height: 12em;
373
  overflow: auto;
374
  word-break: break-all;
375
  margin: 1em 0;
376
}
377
378
.git-table-wrapper table {
379
  width: 100%;
380
}
381
382
/* --- network status --- */
383
384
.status {
385
  width: .7em;
386
  height: .7em;
387
  margin: .7em;
388
  border-radius: 100%;
389
  background: #08c;
390
}
391
392
.error {
393
  background: red;
394
}
395
396
/* tabs */
397
398
.header {
399
  background: #f5f5f5;
400
  border-bottom: 1px inset;
401
  flex-shrink: 0;
402
}
403
404
.header__tabs {
405
  width: 100%; 
406
  min-width: 0px;
407
}
408
409
/* --- hypertabs ------- */
410
411
.hypertabs__tabs {
412
  min-width: 0px;
413
  width: 100%;
414
}
415
416
.hypertabs__tab {
417
  overflow-x: hidden;
418
  min-width: 0px;
419
  width: 100%;
420
}
421
422
.hypertabs__button {
423
  overflow-x: hidden;
424
  min-width: 0px;
425
  width: 100%;
426
}
427
428
.hypertabs__tab {
429
  color: black;
430
  background: #f5f5f5;
431
  border-top-left-radius: 5px;
432
  margin-left: -3px;
433
  border-bottom: none;
434
  padding-top: .56em;
435
  padding-left: 1em;
436
  border-left: 1px solid #ddd;
437
  width: 100%; 
438
}
439
440
.hypertabs__tab > a {
441
  color: #666;
442
  text-decoration: none;
443
  white-space: nowrap;
444
  font-size: .9em;
445
}
446
447
.hypertabs--selected {
448
  font-weight: bold;
449
  background: #eee;
450
  border-top-right-radius: 5px;
451
  z-index: 1;
452
}
453
454
.hypertabs__x  {
455
  display: none; 
456
  transform: translate(-4px, -3px);
457
}
458
459
.hypertabs--selected .hypertabs__x {
460
  display: block;
461
}
462
463
.instructions {
464
  position: absolute; 
465
  border: 1px solid #eee; 
466
  padding: 1em;
467
  bottom: 0;
468
  left: 0;
469
  z-index: 1;
470
}
471
472
/* progress bar */
473
474
.hyperprogress__bar {
475
  background: darkgrey;
476
}
477
.hyperprogress__liquid {
478
  background: lightblue;
479
}
480
481
482