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
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
.avatar img {
216
  width: 40px;
217
  height: 40px;
218
  margin-right: 3px;
219
  border: 1px solid #ccc;
220
}
221
222
.profile {
223
  background: #fff;
224
  padding: .5em;
225
  border: 1px solid #eee;
226
}
227
228
.profile img {
229
  width: 256px;
230
  height: 256px;
231
  border: 1px solid #eee;
232
}
233
234
.profile__info {
235
  margin-left: .5em;
236
}
237
238
/* lightbox - used in message-confirm */
239
240
.lightbox {
241
  overflow: auto;
242
  background: #fff;
243
  width: 600px;
244
  border: 1px solid #eee;
245
  top: 2em;
246
  bottom: 2em;
247
  left: 2em;
248
  right: 2em;
249
  padding: 1em;
250
}
251
252
.message-confirm {
253
  background: #fff;
254
} 
255
256
/* searchprompt */
257
258
.searchprompt {
259
  width: 250px;
260
  margin-left: 10px;
261
  margin-bottom: 5px;
262
}
263
264
a {
265
  color: #333;
266
}
267
268
a:hover {
269
  color: #000;
270
}
271
272
/* TextNodeSearcher highlights */
273
274
highlight {
275
  background: yellow;
276
}
277
278
/* avatar editor */
279
280
.hypercrop__canvas {
281
  width: 100%;
282
}
283
284
.profile__follows img, .profile__followers img {
285
  width: 40px;
286
  height: 40px;
287
  margin-right: 3px;
288
  border: 1px solid #ccc;
289
}
290
291
292