Files: a53c6472f98dde7e9f3dffd4a725765e4ffba799 / styles / dark / message.mcss
5987 bytesRaw
1 | Message { |
2 | display: flex |
3 | flex-direction: column |
4 | background: #383736 |
5 | position: relative |
6 | font-size: 120% |
7 | line-height: 1.4 |
8 | flex-shrink: 0 |
9 | |
10 | (highlight) { |
11 | background-color: rgb(255, 255, 86); |
12 | color: #674e00; |
13 | border-radius: 3px |
14 | padding: 0 2px |
15 | } |
16 | |
17 | :focus { |
18 | z-index: 1 |
19 | } |
20 | |
21 | -following { |
22 | header { |
23 | div.main { |
24 | div.main { |
25 | div.name { |
26 | $following |
27 | } |
28 | } |
29 | } |
30 | } |
31 | } |
32 | |
33 | -data { |
34 | header { |
35 | div.main { |
36 | font-size: 80% |
37 | a.avatar { |
38 | img { |
39 | width: 25px |
40 | } |
41 | } |
42 | } |
43 | } |
44 | (pre) { |
45 | overflow: auto |
46 | max-height: 200px |
47 | } |
48 | } |
49 | |
50 | -mini { |
51 | header { |
52 | font-size: 100% |
53 | |
54 | div.main { |
55 | a.avatar { |
56 | img { |
57 | width: 40px |
58 | height: 40px |
59 | } |
60 | } |
61 | } |
62 | } |
63 | } |
64 | |
65 | -missing { |
66 | header { |
67 | div.main { |
68 | div.main { |
69 | margin-left: 0 |
70 | } |
71 | } |
72 | } |
73 | section { |
74 | font-size: 90% |
75 | font-style: italic |
76 | color: #777 |
77 | } |
78 | } |
79 | |
80 | -compact { |
81 | section { |
82 | max-height: 300px |
83 | } |
84 | } |
85 | |
86 | -reply { |
87 | header { |
88 | font-size: 100% |
89 | div.meta { |
90 | a.channel { |
91 | display: none; |
92 | } |
93 | span.private { |
94 | (img) { |
95 | width: 40px |
96 | height: 40px |
97 | } |
98 | } |
99 | } |
100 | div.main { |
101 | a.avatar { |
102 | img { |
103 | width: 40px |
104 | height: 40px |
105 | } |
106 | } |
107 | } |
108 | } |
109 | } |
110 | |
111 | -new, -unread { |
112 | box-shadow: 0 0 1px #efef00; |
113 | z-index: 1; |
114 | } |
115 | |
116 | header { |
117 | font-size: 120% |
118 | margin: 20px 20px 0 |
119 | display: flex |
120 | |
121 | div.mini { |
122 | flex: 1 |
123 | } |
124 | |
125 | div.main { |
126 | display: flex |
127 | flex: 1 |
128 | |
129 | a.avatar { |
130 | img { |
131 | width: 50px |
132 | height: 50px |
133 | } |
134 | } |
135 | |
136 | div.main { |
137 | div.name { |
138 | a { |
139 | color: #c3c3c3 |
140 | font-weight: bold |
141 | |
142 | :hover { |
143 | color: #ddd |
144 | } |
145 | } |
146 | } |
147 | div.meta { |
148 | font-size: 75% |
149 | color: #8a8a8a; |
150 | (a) { |
151 | color: #b3b8e0 |
152 | :hover { |
153 | color: #dfdfe2 |
154 | } |
155 | } |
156 | } |
157 | margin-left: 10px |
158 | } |
159 | } |
160 | |
161 | div.meta { |
162 | display: flex; |
163 | flex-direction: column-reverse; |
164 | align-items: flex-end; |
165 | justify-content: flex-end; |
166 | |
167 | span.flag { |
168 | width: 12px |
169 | height: 12px |
170 | |
171 | background-repeat: no-repeat |
172 | background-position: center |
173 | display: inline-block |
174 | vertical-align: middle; |
175 | |
176 | -unread { |
177 | :after { |
178 | content: ' unread' |
179 | color: #757474 |
180 | } |
181 | } |
182 | |
183 | -new { |
184 | :after { |
185 | content: ' new' |
186 | color: #757474 |
187 | } |
188 | } |
189 | |
190 | -new, -unread { |
191 | width: auto |
192 | height: auto |
193 | color: #757474 |
194 | font-size: 75% |
195 | |
196 | :before { |
197 | color: #efef00 |
198 | content: '✸' |
199 | } |
200 | } |
201 | } |
202 | |
203 | em { |
204 | display: inline-block |
205 | padding: 4px |
206 | } |
207 | |
208 | a.channel { |
209 | font-size: 75%; |
210 | |
211 | :hover { |
212 | color: #c1cdf0 |
213 | } |
214 | } |
215 | |
216 | a.likes { |
217 | font-size: 75%; |
218 | |
219 | ::before { |
220 | content: '❤ ' |
221 | color: #ff2f92 |
222 | } |
223 | :hover { |
224 | color: #ff2f92 |
225 | } |
226 | } |
227 | |
228 | (a.Timestamp) { |
229 | font-size: 75% |
230 | font-weight: normal |
231 | } |
232 | |
233 | span.private { |
234 | display: inline-block; |
235 | margin: -3px -3px 3px 4px; |
236 | position: relative; |
237 | |
238 | a { |
239 | display: inline-block |
240 | |
241 | :first-child { |
242 | img { |
243 | border-top-left-radius: 3px |
244 | border-bottom-left-radius: 3px |
245 | } |
246 | } |
247 | |
248 | :last-child { |
249 | img { |
250 | border-top-right-radius: 3px |
251 | border-bottom-right-radius: 3px |
252 | } |
253 | } |
254 | |
255 | img { |
256 | margin: 0 |
257 | vertical-align: bottom |
258 | border: none |
259 | } |
260 | } |
261 | |
262 | :after { |
263 | content: 'private'; |
264 | position: absolute; |
265 | background: rgba(0,0,0,0.75); |
266 | bottom: 0; |
267 | left: -1px; |
268 | font-size: 10px; |
269 | padding: 1px 4px; |
270 | border-top-right-radius: 3px; |
271 | color: #ccc; |
272 | pointer-events: none; |
273 | white-space: nowrap |
274 | } |
275 | } |
276 | } |
277 | } |
278 | |
279 | section { |
280 | margin: 0 |
281 | padding: 0 20px |
282 | max-height: 1500px |
283 | overflow: hidden |
284 | |
285 | -expanded { |
286 | max-height: none |
287 | } |
288 | |
289 | (img) { |
290 | max-width: 100% |
291 | } |
292 | } |
293 | |
294 | a.backlink { |
295 | display: block; |
296 | padding: 10px 20px |
297 | background: #2d2c2c |
298 | color: #757474; |
299 | margin-top: -1px; |
300 | font-size: 9pt; |
301 | |
302 | :hover { |
303 | text-decoration: none |
304 | color: #aaa |
305 | } |
306 | } |
307 | |
308 | footer { |
309 | margin: 5px 0 20px; |
310 | padding: 0 20px |
311 | |
312 | div.expander { |
313 | text-align: center; |
314 | background-color: #383736; |
315 | |
316 | -truncated { |
317 | padding-top: 50px; |
318 | margin-top: -50px; |
319 | -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0)); |
320 | a { |
321 | :before { content: '▼ '; font-size: 80% } |
322 | } |
323 | } |
324 | } |
325 | |
326 | div.actions { |
327 | a.like { |
328 | :before { |
329 | content: "❤ " |
330 | } |
331 | :hover { |
332 | background: #ff2f92 |
333 | } |
334 | } |
335 | a.unlike { |
336 | :before { |
337 | content: "" |
338 | } |
339 | :hover { |
340 | background: #434141 |
341 | } |
342 | } |
343 | a { |
344 | font-size: 13px |
345 | background: #2d2c2c |
346 | padding: 6px 10px |
347 | border-radius: 3px |
348 | color: #ccc |
349 | display: inline-block |
350 | text-align: center |
351 | transition: background-color 0.25s ease, color 0.25s ease |
352 | |
353 | :before { |
354 | content: "↩ " |
355 | } |
356 | :hover { |
357 | background: #45b754 |
358 | color: white |
359 | } |
360 | } |
361 | a + a { |
362 | margin-left: 10px; |
363 | } |
364 | } |
365 | } |
366 | } |
367 |
Built with git-ssb-web