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