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