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
.dig {
165
  border-right: 2px solid #eee;
166
  padding-right: .6ex;
167
  margin-right: .1ex;
168
}
169
170
.message > .title > .avatar {
171
  margin-left: 0;
172
}
173
174
.message_content {
175
  margin-top: 5px;
176
  border-top: 1px solid #eee;
177
  padding-top: 3px;
178
}
179
180
/* -- suggest box */
181
182
183
.suggest-box > * {
184
  background: #f5f5f5;
185
  border: 1px solid #ccc;
186
  margin: 3px;
187
}
188
189
.suggest-box {
190
  width: 200px;
191
}
192
193
.suggest-box ul {
194
  list-style-type: none;
195
  padding-left: -20px;
196
}
197
198
.suggest-box .selected {
199
  background: #ccc;
200
}
201
202
.suggest-box img {
203
  width: 40px;
204
}
205
.suggest-box,.selected img {
206
  width: 200px;
207
}
208
/* avatar */
209
210
.avatar {
211
  display: flex;
212
  flex-direction: row;
213
}
214
215
.avatar--large {
216
  width: 256px;
217
  height: 256px;
218
  border: 1px solid #eee;
219
}
220
221
.avatar--thumbnail {
222
  width: 40px;
223
  height: 40px;
224
  margin-right: 3px;
225
  border: 1px solid #ccc;
226
}
227
228
.avatar--fullsize {
229
  width: 100%;
230
}
231
232
.profile {
233
  background: #fff;
234
  padding: .5em;
235
  border: 1px solid #eee;
236
}
237
238
.profile__info {
239
  margin-left: .5em;
240
}
241
242
/* lightbox - used in message-confirm */
243
244
.lightbox__content {
245
  overflow: auto;
246
  background: #fff;
247
  width: 100%;
248
  margin-left: auto;
249
  margin-right: auto;
250
  border: 1px solid #eee;
251
  top: 2em;
252
  bottom: 2em;
253
  left: 2em;
254
  right: 2em;
255
  padding: 1em;
256
}
257
258
@media (min-width: 600px) {
259
  .lightbox__content {
260
    width: 600px;
261
  }
262
}
263
264
.message-confirm {
265
  background: #fff;
266
} 
267
268
/* searchprompt */
269
270
.searchprompt {
271
  width: 250px;
272
  margin-left: 10px;
273
  margin-bottom: 5px;
274
}
275
276
a {
277
  color: #333;
278
}
279
280
a:hover {
281
  color: #000;
282
}
283
284
/* TextNodeSearcher highlights */
285
286
highlight {
287
  background: yellow;
288
}
289
290
/* --- network status --- */
291
292
.status {
293
  width: 20px;
294
  height: 20px;
295
  position: fixed;
296
  right: 10px;
297
  top: 10px;
298
  background: green;
299
}
300
301
.error {
302
  background: red;
303
}
304
305
/* avatar editor */
306
307
.hypercrop__canvas {
308
  width: 100%;
309
}
310
311
/* gitssb */
312
313
.git-table-wrapper {
314
  max-height: 12em;
315
  overflow: auto;
316
  word-break: break-all;
317
  margin: 1em 0;
318
}
319
320
.git-table-wrapper table {
321
  width: 100%;
322
}
323
324
/* invite codes */
325
326
.hyperprogress__liquid {
327
  height: 1px;
328
  background: blue;
329
}
330
331