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
88
/* --- hypertabs ------- */
89
90
.hypertabs__tabs {
91
  overflow-y: hide;
92
}
93
94
.hypertabs > .row {
95
  flex-grow: 0; flex-shrink: 0;
96
  margin: 10px;
97
}
98
99
.hypertabs__tabs > * {
100
  max-width: 50px;
101
  overflow-x: hidden;
102
  margin-right: 5px;
103
  padding-top: 1px;
104
}
105
106
.hypertabs--selected {
107
  background: white;
108
  border: 1px solid #ccc;
109
  padding-top: 0;
110
  padding-left: 5px;
111
  padding-right: 5px;
112
  max-width: 200px;
113
}
114
115
/* message id */
116
117
input {
118
  margin-left: 3px;
119
  margin-right: 3px;
120
  border: 1px solid #eee;
121
}
122
123
textarea {
124
  border: 1px solid #eee;
125
}
126
127
/* compose */
128
129
.compose {
130
  width: 100%;
131
}
132
133
/* messages */
134
135
.message {
136
  border: 1px solid #eee;
137
  padding: 7px;
138
  margin-top: .5em;
139
  background: white;
140
  display: block;
141
  flex-basis: 0;
142
  max-width: 100%;
143
  min-width: 300px;
144
  word-wrap:break-word; 
145
  display:inline-block;
146
}
147
148
.message_meta input {
149
  border: none;
150
  font-size: .8em;
151
  color: #666;
152
  background: #ddd;
153
}
154
155
.message_meta {
156
  margin-left: auto;
157
}
158
.message_meta > * {
159
  margin-left: 5px;
160
}
161
.message_actions {
162
  float: right;
163
}
164
165
.dig {
166
  border-right: 2px solid #eee;
167
  padding-right: .6ex;
168
  margin-right: .1ex;
169
}
170
171
.message > .title > .avatar {
172
  margin-left: 0;
173
}
174
175
.message_content {
176
  margin-top: 5px;
177
  border-top: 1px solid #eee;
178
  padding-top: 3px;
179
}
180
181
/* -- suggest box */
182
183
184
.suggest-box > * {
185
  background: #f5f5f5;
186
  border: 1px solid #ccc;
187
  margin: 3px;
188
}
189
190
.suggest-box {
191
  width: 200px;
192
}
193
194
.suggest-box ul {
195
  list-style-type: none;
196
  padding-left: -20px;
197
}
198
199
.suggest-box .selected {
200
  background: #ccc;
201
}
202
203
.suggest-box img {
204
  width: 40px;
205
}
206
.suggest-box,.selected img {
207
  width: 200px;
208
}
209
/* avatar */
210
211
.avatar {
212
  display: flex;
213
  flex-direction: row;
214
}
215
216
.avatar--large {
217
  width: 256px;
218
  height: 256px;
219
  border: 1px solid #eee;
220
}
221
222
.avatar--thumbnail {
223
  width: 40px;
224
  height: 40px;
225
  margin-right: 3px;
226
  border: 1px solid #ccc;
227
}
228
229
.avatar--fullsize {
230
  width: 100%;
231
}
232
233
.profile {
234
  background: #fff;
235
  padding: .5em;
236
  border: 1px solid #eee;
237
}
238
239
.profile__info {
240
  margin-left: .5em;
241
}
242
243
/* lightbox - used in message-confirm */
244
245
.lightbox {
246
  overflow: auto;
247
  background: #fff;
248
  width: 600px;
249
  border: 1px solid #eee;
250
  top: 2em;
251
  bottom: 2em;
252
  left: 2em;
253
  right: 2em;
254
  padding: 1em;
255
}
256
257
.message-confirm {
258
  background: #fff;
259
} 
260
261
/* searchprompt */
262
263
.searchprompt {
264
  width: 250px;
265
  margin-left: 10px;
266
  margin-bottom: 5px;
267
}
268
269
a {
270
  color: #333;
271
}
272
273
a:hover {
274
  color: #000;
275
}
276
277
/* TextNodeSearcher highlights */
278
279
highlight {
280
  background: yellow;
281
}
282
283
/* --- network status --- */
284
285
.status {
286
  width: 20px;
287
  height: 20px;
288
  position: fixed;
289
  right: 10px;
290
  top: 10px;
291
  background: green;
292
}
293
294
.error {
295
  background: red;
296
}
297
298
/* avatar editor */
299
300
.hypercrop__canvas {
301
  width: 100%;
302
}
303
304
/* gitssb */
305
306
.git-table-wrapper {
307
  max-height: 12em;
308
  overflow: auto;
309
  word-break: break-all;
310
  margin: 1em 0;
311
}
312
313
.git-table-wrapper table {
314
  width: 100%;
315
}
316
317
/* invite codes */
318
319
.hyperprogress__liquid {
320
  height: 1px;
321
  background: blue;
322
}
323
324
325
326
327
328
329