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