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
.stretch {
27
  flex-basis: 0;
28
}
29
30
.fixed {
31
  flex-grow: 1;
32
  flex-shrink: 1;
33
}
34
35
.scroll-y {
36
  overflow-y: auto;
37
}
38
39
.scroll-x {
40
  overflow-x: auto;
41
}
42
43
.button {
44
  border: 2px; margin: 3px;
45
  max-width: 50px;
46
  overflow-x: hidden;
47
}
48
49
50
img {
51
  max-width: 100%;
52
  display: block;
53
}
54
55
pre {
56
  max-width: 650px;
57
  white-space: pre-wrap;
58
}
59
60
/* scrolling feeds, threads */
61
62
.scroller {
63
  width: 100%;
64
}
65
66
.scroller > * {
67
  margin-left: auto;
68
  margin-right: auto;
69
}
70
71
.scroller__wrapper {
72
  width: 100%;
73
}
74
75
@media (min-width: 600px) {
76
  .scroller__wrapper {
77
    width: 600px;
78
  }
79
}
80
81
82
/* --- hypertabs ------- */
83
84
.hypertabs__tabs {
85
  overflow-y: hide;
86
}
87
88
.hypertabs > .row {
89
  flex-grow: 0; flex-shrink: 0;
90
  margin: 10px;
91
}
92
93
.hypertabs__tabs > * {
94
  max-width: 50px;
95
  overflow-x: hidden;
96
  margin-right: 5px;
97
  padding-top: 1px;
98
}
99
100
.hypertabs--selected {
101
  background: white;
102
  border: 1px solid #ccc;
103
  padding-top: 0;
104
  padding-left: 5px;
105
  padding-right: 5px;
106
  max-width: 200px;
107
}
108
109
/* message id */
110
111
input {
112
  margin-left: 3px;
113
  margin-right: 3px;
114
  border: 1px solid #eee;
115
}
116
117
textarea {
118
  border: 1px solid #eee;
119
}
120
121
/* compose */
122
123
.compose {
124
  width: 100%;
125
}
126
127
/* messages */
128
129
.message {
130
  border: 1px solid #eee;
131
  padding: 7px;
132
  margin-top: .5em;
133
  background: white;
134
  display: block;
135
  flex-basis: 0;
136
  max-width: 100%;
137
  min-width: 300px;
138
  word-wrap:break-word; 
139
  display:inline-block;
140
}
141
142
.message_meta input {
143
  border: none;
144
  font-size: .8em;
145
  color: #666;
146
  background: #ddd;
147
}
148
149
.message_meta {
150
  margin-left: auto;
151
}
152
.message_meta > * {
153
  margin-left: 5px;
154
}
155
.message_actions {
156
  float: right;
157
}
158
159
.dig {
160
  border-right: 2px solid #eee;
161
  padding-right: .6ex;
162
  margin-right: .1ex;
163
}
164
165
.message > .title > .avatar {
166
  margin-left: 0;
167
}
168
169
.message_content {
170
  margin-top: 5px;
171
  border-top: 1px solid #eee;
172
  padding-top: 3px;
173
}
174
175
/* -- suggest box */
176
177
178
.suggest-box > * {
179
  background: #f5f5f5;
180
  border: 1px solid #ccc;
181
  margin: 3px;
182
}
183
184
.suggest-box {
185
  width: 200px;
186
}
187
188
.suggest-box ul {
189
  list-style-type: none;
190
  padding-left: -20px;
191
}
192
193
.suggest-box .selected {
194
  background: #ccc;
195
}
196
197
.suggest-box img {
198
  width: 40px;
199
}
200
.suggest-box,.selected img {
201
  width: 200px;
202
}
203
/* avatar */
204
205
.avatar {
206
  display: flex;
207
  flex-direction: row;
208
}
209
.avatar img {
210
  width: 40px;
211
  height: 40px;
212
  margin-right: 3px;
213
  border: 1px solid #ccc;
214
}
215
216
.profile {
217
  background: #fff;
218
  padding: .5em;
219
  border: 1px solid #eee;
220
}
221
222
.profile img {
223
  width: 256px;
224
  height: 256px;
225
  border: 1px solid #eee;
226
}
227
228
.profile__info {
229
  margin-left: .5em;
230
}
231
232
/* lightbox - used in message-confirm */
233
234
.lightbox {
235
  overflow: auto;
236
  background: #fff;
237
  width: 600px;
238
  border: 1px solid #eee;
239
  top: 2em;
240
  bottom: 2em;
241
  left: 2em;
242
  right: 2em;
243
  padding: 1em;
244
}
245
246
.message-confirm {
247
  background: #fff;
248
} 
249
250
/* searchprompt */
251
252
.searchprompt {
253
  width: 250px;
254
  margin-left: 10px;
255
  margin-bottom: 5px;
256
}
257
258
a {
259
  color: #333;
260
}
261
262
a:hover {
263
  color: #000;
264
}
265
266
/* TextNodeSearcher highlights */
267
268
highlight {
269
  background: yellow;
270
}
271
272
/* avatar editor */
273
274
.hypercrop__canvas {
275
  width: 100%;
276
}
277