secure-scuttlebot classic
evbogue.com
1* {
2 box-sizing: border-box;
3 word-break: break-word;
4}
5
6body {
7 margin: 0;
8}
9
10body.lightbox-open {
11 overflow: hidden;
12}
13
14textarea {
15 width: 100%;
16 box-sizing: border-box;
17}
18
19.screen {
20 position: absolute;
21 top: 0; bottom: 0;
22 left: 0; right: 0;
23 display: flex;
24 flex-direction: column;
25 overflow: hidden;
26}
27
28.screen__content {
29 flex: 1;
30 min-height: 0px;
31 overflow: hidden;
32}
33
34.lightbox {
35 background: rgba(0, 0, 0, 0.4);
36 z-index: 1000;
37 backdrop-filter: blur(6px);
38 -webkit-backdrop-filter: blur(6px);
39}
40
41.lightbox__content {
42 max-width: 680px;
43 margin: 40px auto;
44 padding: 0 20px;
45}
46
47.compose-modal {
48 background: #fff;
49 border-radius: 8px;
50 box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
51 padding: 12px;
52 transition: opacity 160ms ease;
53 opacity: 0;
54}
55
56.compose-modal--animate {
57 opacity: 1;
58}
59
60.compose-modal__header {
61 display: flex;
62 align-items: center;
63 justify-content: space-between;
64 gap: 8px;
65 margin-bottom: 8px;
66}
67
68.compose-modal__title {
69 font-weight: 600;
70}
71
72.compose-modal__hint {
73 margin-bottom: 8px;
74}
75
76.compose-reply-hint {
77 margin-bottom: 8px;
78}
79
80.compose-modal__close {
81 font-size: 0.9em;
82}
83
84.compose-trigger {
85 position: fixed;
86 right: 16px;
87 bottom: 16px;
88 z-index: 1001;
89 margin: 0;
90}
91
92.compose-trigger__button {
93 width: 48px;
94 height: 48px;
95 padding: 0;
96 border-radius: 50%;
97 display: inline-flex;
98 align-items: center;
99 justify-content: center;
100}
101
102.compose-trigger__icon {
103 line-height: 1;
104 display: block;
105}
106
107.message-confirm {
108 gap: 12px;
109}
110
111.message-confirm__controls {
112 justify-content: flex-end;
113 gap: 8px;
114}
115
116.column {
117 display: flex;
118 flex-direction: column;
119 min-height: 0px;
120}
121
122.row {
123 display: flex;
124 flex-direction: row;
125 min-height: 0px;
126 margin: 0;
127 padding: 0;
128}
129
130.scroll-y {
131 overflow-y: auto;
132 min-height: 0px;
133}
134
135.scroll-x {
136 overflow-x: auto;
137 min-width: 0px;
138}
139
140.scroller {
141 width: 100%;
142}
143
144.scroller__wrapper {
145 flex: 1;
146 width: 100%;
147 max-width: 680px;
148 margin-left: auto;
149 margin-right: auto;
150 padding: 0 0 20px;
151}
152
153.message img {
154 max-width: 100%;
155}
156
157.message-card {
158 margin: 5px 0 0 0;
159 padding: 12px;
160 background-color: #f5f5f5;
161 border: 1px solid #e3e3e3;
162 border-radius: 4px;
163 box-shadow: none;
164 display: flex;
165 flex-direction: column;
166}
167
168.message--mini.message-card {
169 padding: 8px 12px 8px 12px;
170}
171
172.message .title {
173 margin-bottom: 6px;
174}
175
176.message_actions {
177 margin-top: 8px;
178}
179
180.avatar {
181 display: inline-flex;
182 align-items: flex-start;
183 gap: 8px;
184}
185
186.avatar .avatar_name {
187 display: inline-block;
188 line-height: 1.2;
189}
190
191.message-card .avatar img,
192.message-card .avatar canvas,
193.message-card .avatar svg {
194 display: block;
195}
196
197.message-card .title.row {
198 display: flex;
199 align-items: flex-start;
200 gap: 0;
201 padding-right: 12px;
202}
203
204.message-card .avatar {
205 flex: 0 0 auto;
206}
207
208.message-card .message_meta.row {
209 display: flex;
210 align-items: flex-start;
211 gap: 4px;
212 margin-left: auto;
213 align-self: flex-start;
214 margin-top: -4px;
215 justify-content: flex-end;
216 margin-right: -18px;
217}
218
219.message-card .message_content {
220 margin-top: 6px;
221 padding-left: 0;
222}
223
224.message-card .message_actions.row {
225 display: flex;
226 justify-content: flex-end;
227 margin-top: 8px;
228 padding-left: 0;
229}
230
231.message--mini.message-card.row {
232 display: flex;
233 flex-direction: row;
234 align-items: baseline;
235 gap: 0;
236 flex-wrap: wrap;
237 white-space: nowrap;
238}
239
240.message--mini.message-card .message_content {
241 margin-top: 0;
242 padding-left: 0;
243 display: inline;
244 margin-left: 6px;
245 min-width: 0;
246 overflow: hidden;
247 text-overflow: ellipsis;
248 white-space: nowrap;
249}
250
251.message--mini.message-card .message_content > div,
252.message--mini.message-card .message_content > span,
253.message--mini.message-card .message_content *,
254.message--mini.message-card .message_content.markdown,
255.message--mini.message-card .message_content.markdown * {
256 display: inline;
257 margin: 0;
258 padding: 0;
259}
260
261.message--mini.message-card .message_content br {
262 display: none;
263}
264
265.message--mini.message-card .avatar {
266 display: inline-flex;
267 align-items: flex-start;
268 gap: 0;
269 white-space: nowrap;
270}
271
272.message--mini.message-card .message_meta.row {
273 margin-left: auto;
274 white-space: nowrap;
275 margin-right: -4px;
276 gap: 4px;
277}
278
279.message--mini.message-card .message_raw {
280 flex: 1 0 100%;
281 width: 100%;
282 margin-top: 8px;
283 white-space: normal;
284}
285
286.message-card .actions > * {
287 margin-left: 8px;
288}
289
290.avatar--thumbnail {
291 width: 36px;
292 height: 36px;
293 border-radius: 4px;
294}
295
296.avatar--large {
297 width: 120px;
298 height: 120px;
299 border-radius: 6px;
300}
301
302.avatar--fullsize {
303 width: 50%;
304 height: auto;
305 border-radius: 6px;
306}
307
308.status {
309 display: block;
310 width: 10px;
311 height: 10px;
312 margin-top: 0px;
313 border-radius: 100%;
314 background: #08c;
315}
316
317.error {
318 background: #bd362f;
319}
320
321.navbar .menu {
322 display: inline-flex;
323 align-items: center;
324 height: 100%;
325}
326
327.navbar {
328 margin-bottom: 0;
329}
330
331.navbar .brand {
332 padding-left: 0;
333 margin-left: 0;
334 padding-right: 10px;
335}
336
337.navbar .container-fluid {
338 display: flex;
339 align-items: center;
340 gap: 8px;
341 padding-left: 0;
342 padding-right: 0;
343}
344
345.navbar .nav.pull-left {
346 float: none;
347 display: flex;
348 gap: 6px;
349 margin: 0;
350 padding: 0;
351 list-style: none;
352}
353
354.navbar .pull-right {
355 float: none;
356 margin-left: auto;
357 order: 3;
358}
359
360.material-symbols-outlined {
361 font-family: 'Material Symbols Outlined';
362 font-weight: normal;
363 font-style: normal;
364 font-size: 1em;
365 line-height: 1;
366 letter-spacing: normal;
367 text-transform: none;
368 display: inline-block;
369 white-space: nowrap;
370 word-wrap: normal;
371 direction: ltr;
372 -webkit-font-feature-settings: 'liga';
373 -webkit-font-smoothing: antialiased;
374}
375
376.compose-trigger__icon.material-symbols-outlined {
377 font-size: 21px;
378}
379
380.nav__icon {
381 margin-right: 4px;
382}
383
384@media (max-width: 640px) {
385 .navbar .container-fluid {
386 flex-wrap: wrap;
387 }
388
389 .navbar .nav.pull-left {
390 gap: 0;
391 }
392
393 .navbar .nav.pull-left li a span:not(.nav__icon) {
394 display: none;
395 }
396
397 .navbar .nav.pull-left li a {
398 display: inline-flex;
399 align-items: center;
400 padding: 8px 6px;
401 }
402}