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