git ssb

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