git ssb

1
body {
2
  font-family: sans-serif;
3
}
4
5
* {
6
  word-break: break-word;
7
}
8
9
.screen {
10
  position: absolute;
11
  top: 0px; bottom: 0px;
12
  left: 0px; right: 0px;
13
  overflow-y: hidden;
14
}
15
16
.column {
17
  display: flex;
18
  flex-direction: column;
19
  min-height:0px;
20
}
21
22
.row {
23
  display: flex;
24
  flex-direction: row;
25
  min-height:0px;
26
}
27
28
.end {
29
  justify-content: flex-end;
30
}
31
32
.wrap {
33
  display: flex;
34
  flex-direction: row;
35
  flex-wrap: wrap;
36
}
37
38
.no-shrink {
39
  flex-shrink: 0;
40
}
41
42
.expand {
43
  justify-content: space-between;
44
}
45
46
.scroll-y {
47
  overflow-y: auto;
48
  min-height: 0px;
49
}
50
51
.scroll-x {
52
  overflow-x: auto;
53
  min-width: 0px;
54
}
55
56
pre {
57
  white-space: pre-wrap;
58
  word-wrap: break-word;
59
}
60
61
p {
62
  margin-top: .35ex;
63
}
64
65
hr {
66
  border: solid #eee;
67
  clear: both;
68
  border-width: 1px 0 0;
69
  height: 0;
70
  margin-bottom: .9em;
71
}
72
73
input, textarea {
74
  border: 1px solid #eee;
75
}
76
77
/* scrolling feeds, threads */
78
79
.scroller {
80
  width: 100%;
81
}
82
83
.scroller__wrapper {
84
  flex: 1;
85
  max-width: 600px;
86
  margin-left: auto;
87
  margin-right: auto;
88
}
89
90
/* compose */
91
92
.compose {
93
  width: 100%;
94
}
95
96
/* messages */
97
98
.message {
99
  display: block;
100
  flex-basis: 0;
101
  word-wrap: break-word; 
102
  display: inline-block;
103
  border: 1px solid #eee;
104
}
105
106
.message_meta input {
107
  font-size: .8em;
108
}
109
110
.message_meta {
111
  margin-left: auto;
112
}
113
114
.message_meta > * {
115
  margin-left: .5ex;
116
}
117
118
.message_actions {
119
  float: right;
120
  margin-right: .5ex;
121
  margin-bottom: .5ex;
122
}
123
124
.title {
125
  padding: .5ex;
126
}
127
128
.message img {
129
  max-width: 100%;
130
}
131
132
.actions > * {
133
  padding-left: 5px;
134
  margin-left: 1px;
135
}
136
137
.actions > :not(:last-child) {
138
  border-right: 2px solid #eee;
139
  padding-right: 5px;
140
}
141
142
.message > .title > .avatar {
143
  margin-left: 0;
144
}
145
146
.message_content {
147
  padding: .5ex;
148
}
149
150
/* -- suggest box */
151
152
.suggest-box > * {
153
  display: block;
154
}
155
156
.suggest-box ul {
157
  list-style-type: none;
158
  padding-left: -2em;
159
}
160
161
.suggest-box .selected {
162
  background: yellow;
163
}
164
165
.suggest-box {
166
  width: max-content;
167
  background: white;
168
}
169
170
/* avatar */
171
172
.avatar {
173
  display: flex;
174
  flex-direction: row;
175
}
176
177
.avatar--large {
178
  width: 10em;
179
  height: 10em;
180
}
181
182
.avatar--thumbnail {
183
  width: 2.5em;
184
  height: 2.5em;
185
  margin-right: .5ex;
186
}
187
188
.avatar--fullsize {
189
  width: 100%;
190
}
191
192
.profile {
193
  padding: .5ex;
194
  overflow: auto;
195
}
196
197
.profile input {
198
  width: 100%;
199
}
200
201
.profile__info {
202
  margin-left: .5em;
203
}
204
205
/* lightbox - used in message-confirm */
206
207
.lightbox {
208
  overflow: auto;
209
  padding: 1em;
210
  background: white;
211
}
212
213
/* searchprompt */
214
215
.searchprompt {
216
  width: 100%;
217
  height: 2.55em;
218
}
219
220
/* TextNodeSearcher highlights */
221
222
.highlight {
223
  background: yellow;
224
}
225
226
/* avatar editor */
227
228
.hypercrop__canvas {
229
  width: 100%;
230
}
231
232
/* gitssb */
233
234
.git-table-wrapper {
235
  max-height: 12em;
236
  overflow: auto;
237
  word-break: break-all;
238
  margin: 1em 0;
239
}
240
241
.git-table-wrapper table {
242
  width: 100%;
243
}
244
245
/* --- network status --- */
246
247
.status {
248
  width: .7em;
249
  height: .7em;
250
  margin: .7em;
251
  border-radius: 100%;
252
  background: green;
253
}
254
255
.error {
256
  background: red;
257
}
258
259
/* invite codes */
260
261
.hyperprogress__liquid {
262
  height: 1ex;
263
  background: blue;
264
}
265
266
/* themes */
267
268
.theme {
269
  margin-left: 1ex;
270
}
271
272
.themes__form {
273
  margin: 1ex;
274
}
275
276
277
/* tabs */
278
279
.header {
280
  background: lightgray;
281
  border-bottom: 2px inset;
282
  flex-shrink: 0;
283
}
284
285
.header__tabs {
286
  width: 100%; 
287
  min-width: 0px;
288
}
289
290
/* --- hypertabs ------- */
291
292
.hypertabs__tabs {
293
  min-width: 0px;
294
  width: 100%;
295
}
296
297
.hypertabs__tab {
298
  overflow-x: hidden;
299
  min-width: 0px;
300
  width: 100%;
301
}
302
303
.hypertabs__button {
304
  overflow-x: hidden;
305
  min-width: 0px;
306
  width: 100%;
307
}
308
309
.hypertabs__tab {
310
  color: black;
311
  background: lightgray;
312
  border-right: 1px solid #ccc;
313
  border-top-left-radius: 5px;
314
  margin-left: -3px;
315
  border-bottom: none;
316
  padding-top: .35em;
317
  padding-left: .5em;
318
  width: 100%; 
319
}
320
321
.hypertabs__tab > a {
322
  color: black;
323
  text-decoration: none;
324
  white-space: nowrap;
325
}
326
327
.hypertabs--selected {
328
  background: #E7E7E7;
329
  border-top-right-radius: 3px;
330
  z-index: 1;
331
}
332
333
.hypertabs__x  {
334
  display: none; 
335
  transform: translate(-5px, -3px);
336
}
337
338
.hypertabs--selected .hypertabs__x {
339
  display: block;
340
}
341
342