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
  padding-left: 0;
274
  background: #eee;
275
  border: 1px solid #eee;
276
  border-radius: 2px;
277
}
278
279
.suggest-box .selected {
280
  background: white;
281
}
282
283
.suggest-box {
284
  width: max-content;
285
  background: #white;
286
  border-radius: 1em;
287
}
288
289
/* avatar */
290
291
.avatar--large, 
292
.avatar--thumbnail, 
293
.avatar--fullsize {
294
  border: 1px solid #eee;
295
}
296
297
.avatar--large {
298
  width: 10em;
299
  height: 10em;
300
}
301
302
.avatar--thumbnail {
303
  width: 2.5em;
304
  height: 2.5em;
305
  float: left;
306
  margin-right: .5ex;
307
}
308
309
.avatar--fullsize {
310
  width: 50%;
311
}
312
313
.profile {
314
  padding: .5ex;
315
  overflow: auto;
316
}
317
318
.profile input {
319
  width: 100%;
320
}
321
322
.profile__info {
323
  margin-left: .5em;
324
}
325
326
/* lightbox - used in message-confirm */
327
328
.lightbox {
329
  overflow: auto;
330
  padding: 1.5em;
331
  margin-top: 3em;
332
  margin-bottom: 3em;
333
  width: 600px;
334
  background: #f5f5f5;
335
  margin-left: auto;
336
  margin-right: auto;
337
  border: 1px solid #eee;
338
  border-radius: .2em;
339
  z-index: 2;
340
}
341
342
/* searchprompt */
343
344
.searchprompt {
345
  float: left;
346
  width: 85%;
347
  height: 2em;
348
  margin-top: .3em;
349
  border-radius: 1em;
350
  padding-left: .2em;
351
  margin-left: 1em;
352
  margin-right: 1em;
353
}
354
355
/* TextNodeSearcher highlights */
356
357
.highlight {
358
  background: #f5f5f5;
359
}
360
361
/* avatar editor */
362
363
.hypercrop__canvas {
364
  width: 100%;
365
}
366
367
/* gitssb */
368
369
.git-table-wrapper {
370
  max-height: 12em;
371
  overflow: auto;
372
  word-break: break-all;
373
  margin: 1em 0;
374
}
375
376
.git-table-wrapper table {
377
  width: 100%;
378
}
379
380
/* --- network status --- */
381
382
.status {
383
  width: .7em;
384
  height: .7em;
385
  margin: .7em;
386
  border-radius: 100%;
387
  background: #08c;
388
}
389
390
.error {
391
  background: red;
392
}
393
394
/* tabs */
395
396
.header {
397
  background: #f5f5f5;
398
  border-bottom: 1px inset;
399
  flex-shrink: 0;
400
}
401
402
.header__tabs {
403
  width: 100%; 
404
  min-width: 0px;
405
}
406
407
/* --- hypertabs ------- */
408
409
.hypertabs__tabs {
410
  min-width: 0px;
411
  width: 100%;
412
}
413
414
.hypertabs__tab {
415
  overflow-x: hidden;
416
  min-width: 0px;
417
  width: 100%;
418
}
419
420
.hypertabs__button {
421
  overflow-x: hidden;
422
  min-width: 0px;
423
  width: 100%;
424
}
425
426
.hypertabs__tab {
427
  color: black;
428
  background: #f5f5f5;
429
  border-top-left-radius: 5px;
430
  margin-left: -3px;
431
  border-bottom: none;
432
  padding-top: .56em;
433
  padding-left: 1em;
434
  border-left: 1px solid #ddd;
435
  width: 100%; 
436
}
437
438
.hypertabs__tab > a {
439
  color: #666;
440
  text-decoration: none;
441
  white-space: nowrap;
442
  font-size: .9em;
443
}
444
445
.hypertabs--selected {
446
  font-weight: bold;
447
  background: #eee;
448
  border-top-right-radius: 5px;
449
  z-index: 1;
450
}
451
452
.hypertabs__x  {
453
  display: none; 
454
  transform: translate(-4px, -3px);
455
}
456
457
.hypertabs--selected .hypertabs__x {
458
  display: block;
459
}
460
461
/* progress bar */
462
463
.hyperprogress__bar {
464
  background: darkgrey;
465
}
466
.hyperprogress__liquid {
467
  background: lightblue;
468
}
469
470
471