git ssb

1
body {
2
  font-family: "Source Sans Pro", sans-serif;
3
}
4
5
p { margin-top: .35ex;}
6
7
.screen {
8
  position: absolute;
9
  top: 0px; bottom: 0px;
10
  left: 0px; right: 0px;
11
  overflow-y: hidden;
12
}
13
14
.column {
15
  display: flex;
16
  flex-direction: column;
17
  background: #f5f5f5;
18
  min-height: 0px;
19
}
20
21
.row {
22
  display: flex;
23
  flex-direction: row;
24
}
25
26
.wrap {
27
  display: flex;
28
  flex-direction: row;
29
  flex-wrap: wrap;
30
}
31
32
.stretch {
33
  flex-basis: 0;
34
}
35
36
.fixed {
37
  flex-grow: 1;
38
  flex-shrink: 1;
39
}
40
41
.scroll-y {
42
  overflow-y: auto;
43
}
44
45
.scroll-x {
46
  overflow-x: auto;
47
}
48
49
.button {
50
  border: 2px; margin: 3px;
51
  max-width: 50px;
52
  overflow-x: hidden;
53
}
54
55
56
.message img {
57
  max-width: 100%;
58
  display: block;
59
}
60
61
pre {
62
  max-width: 650px;
63
  white-space: pre-wrap;
64
}
65
66
/* scrolling feeds, threads */
67
68
.scroller {
69
  width: 100%;
70
}
71
72
.scroller > * {
73
  margin-left: auto;
74
  margin-right: auto;
75
}
76
77
.scroller__wrapper {
78
  width: 100%;
79
}
80
81
@media (min-width: 600px) {
82
  .scroller__wrapper {
83
    width: 600px;
84
  }
85
}
86
87
/* --- hypertabs ------- */
88
89
.hypertabs__tabs {
90
  overflow-y: hide;
91
}
92
93
.hypertabs > .row {
94
  flex-grow: 0; flex-shrink: 0;
95
  margin: 10px;
96
}
97
98
.hypertabs__tabs > * {
99
  max-width: 50px;
100
  overflow-x: hidden;
101
  margin-right: 5px;
102
  padding-top: 1px;
103
}
104
105
.hypertabs--selected {
106
  background: white;
107
  border: 1px solid #ccc;
108
  padding-top: 0;
109
  padding-left: 5px;
110
  padding-right: 5px;
111
  max-width: 200px;
112
}
113
114
/* message id */
115
116
input {
117
  margin-left: 3px;
118
  margin-right: 3px;
119
  border: 1px solid #eee;
120
}
121
122
textarea {
123
  border: 1px solid #eee;
124
}
125
126
/* compose */
127
128
.compose {
129
  width: 100%;
130
}
131
132
/* messages */
133
134
.message {
135
  border: 1px solid #eee;
136
  padding: 7px;
137
  margin-top: .5em;
138
  background: white;
139
  display: block;
140
  flex-basis: 0;
141
  max-width: 100%;
142
  min-width: 300px;
143
  word-wrap:break-word; 
144
  display:inline-block;
145
}
146
147
.message_meta input {
148
  border: none;
149
  font-size: .8em;
150
  color: #666;
151
  background: #ddd;
152
}
153
154
.message_meta {
155
  margin-left: auto;
156
}
157
.message_meta > * {
158
  margin-left: 5px;
159
}
160
.message_actions {
161
  float: right;
162
}
163
164
.actions > * {
165
  padding-left: 5px;
166
  margin-left: 1px;
167
}
168
.actions > :not(:last-child) {
169
  border-right: 2px solid #eee;
170
  padding-right: 5px;
171
}
172
173
.message > .title > .avatar {
174
  margin-left: 0;
175
}
176
177
.message_content {
178
  margin-top: 5px;
179
  border-top: 1px solid #eee;
180
  padding-top: 3px;
181
}
182
183
/* -- suggest box */
184
185
186
.suggest-box > * {
187
  background: #f5f5f5;
188
  border: 1px solid #ccc;
189
  margin: 3px;
190
}
191
192
.suggest-box {
193
  width: 200px;
194
}
195
196
.suggest-box ul {
197
  list-style-type: none;
198
  padding-left: -20px;
199
}
200
201
.suggest-box .selected {
202
  background: #ccc;
203
}
204
205
.suggest-box img {
206
  width: 40px;
207
}
208
.suggest-box,.selected img {
209
  width: 200px;
210
}
211
/* avatar */
212
213
.avatar {
214
  display: flex;
215
  flex-direction: row;
216
}
217
218
.avatar--large {
219
  width: 256px;
220
  height: 256px;
221
  border: 1px solid #eee;
222
}
223
224
.avatar--thumbnail {
225
  width: 40px;
226
  height: 40px;
227
  margin-right: 3px;
228
  border: 1px solid #ccc;
229
}
230
231
.avatar--fullsize {
232
  width: 100%;
233
}
234
235
.profile {
236
  background: #fff;
237
  padding: .5em;
238
  border: 1px solid #eee;
239
}
240
241
.profile__info {
242
  margin-left: .5em;
243
}
244
245
/* lightbox - used in message-confirm */
246
247
.lightbox__content {
248
  overflow: auto;
249
  background: #fff;
250
  width: 100%;
251
  margin-left: auto;
252
  margin-right: auto;
253
  border: 1px solid #eee;
254
  top: 2em;
255
  bottom: 2em;
256
  left: 2em;
257
  right: 2em;
258
  padding: 1em;
259
}
260
261
@media (min-width: 600px) {
262
  .lightbox__content {
263
    width: 600px;
264
  }
265
}
266
267
.message-confirm {
268
  background: #fff;
269
} 
270
271
/* searchprompt */
272
273
.searchprompt {
274
  width: 250px;
275
  margin-left: 10px;
276
  margin-bottom: 5px;
277
}
278
279
a {
280
  color: #333;
281
}
282
283
a:hover {
284
  color: #000;
285
}
286
287
/* TextNodeSearcher highlights */
288
289
highlight {
290
  background: yellow;
291
}
292
293
/* --- network status --- */
294
295
.status {
296
  width: 20px;
297
  height: 20px;
298
  background: green;
299
}
300
301
.menu {
302
  position: fixed;
303
  right: 10px;
304
  top: 10px;
305
}
306
307
.error {
308
  background: red;
309
}
310
311
/* avatar editor */
312
313
.hypercrop__canvas {
314
  width: 100%;
315
}
316
317
/* gitssb */
318
319
.git-table-wrapper {
320
  max-height: 12em;
321
  overflow: auto;
322
  word-break: break-all;
323
  margin: 1em 0;
324
}
325
326
.git-table-wrapper table {
327
  width: 100%;
328
}
329
330
/* invite codes */
331
332
.hyperprogress__liquid {
333
  height: 1px;
334
  background: blue;
335
}
336
337
338
339
340
341