Files: 13043b66c007b7b9381f9c550aa436fee2fe490f / styles / light / message.mcss
4891 bytesRaw
1 | Message { |
2 | display: flex |
3 | flex-direction: column |
4 | background: white |
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 | margin-bottom: 15px |
51 | div.main { |
52 | a.avatar { |
53 | img { |
54 | width: 40px |
55 | height: 40px |
56 | } |
57 | } |
58 | } |
59 | } |
60 | } |
61 | |
62 | -compact { |
63 | section { |
64 | max-height: 300px |
65 | } |
66 | } |
67 | |
68 | -reply { |
69 | header { |
70 | font-size: 100% |
71 | div.meta { |
72 | a.channel { |
73 | display: none; |
74 | } |
75 | span.private { |
76 | (img) { |
77 | width: 40px |
78 | height: 40px |
79 | } |
80 | } |
81 | } |
82 | div.main { |
83 | a.avatar { |
84 | img { |
85 | width: 40px |
86 | height: 40px |
87 | } |
88 | } |
89 | } |
90 | } |
91 | } |
92 | |
93 | -missing { |
94 | header { |
95 | div.main { |
96 | div.main { |
97 | margin-left: 0 |
98 | } |
99 | } |
100 | } |
101 | section { |
102 | font-size: 90% |
103 | font-style: italic |
104 | color: #777 |
105 | } |
106 | } |
107 | |
108 | -new, -unread { |
109 | box-shadow: 0 0 1px #ffc600; |
110 | z-index: 1; |
111 | } |
112 | |
113 | header { |
114 | font-size: 120% |
115 | margin: 15px 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 | width: 50px |
129 | height: 50px |
130 | } |
131 | } |
132 | |
133 | div.main { |
134 | div.name { |
135 | a { |
136 | color: #444 |
137 | font-weight: bold |
138 | } |
139 | } |
140 | div.meta { |
141 | font-size: 90% |
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 | margin-top: -3px; |
162 | |
163 | -unread { |
164 | :after { |
165 | content: ' unread' |
166 | font-size: 75% |
167 | color: #b7b7b7 |
168 | } |
169 | } |
170 | |
171 | -new { |
172 | :after { |
173 | content: ' new' |
174 | font-size: 75% |
175 | color: #b7b7b7 |
176 | } |
177 | } |
178 | |
179 | -new, -unread { |
180 | width: auto |
181 | height: auto |
182 | color: #ffcf04 |
183 | |
184 | :before { |
185 | content: '✸' |
186 | } |
187 | |
188 | :first-letter { |
189 | font-size: 100% |
190 | } |
191 | } |
192 | } |
193 | |
194 | em { |
195 | display: inline-block |
196 | padding: 4px |
197 | } |
198 | |
199 | a.channel { |
200 | font-weight: bold; |
201 | } |
202 | |
203 | a.likes { |
204 | color: #286bc3; |
205 | font-size:90%; |
206 | } |
207 | |
208 | span.private { |
209 | display: inline-block; |
210 | margin: -3px -3px 3px 4px; |
211 | border: 4px solid #525050; |
212 | position: relative; |
213 | |
214 | a { |
215 | display: inline-block |
216 | |
217 | img { |
218 | margin: 0 |
219 | vertical-align: bottom |
220 | border: none |
221 | } |
222 | } |
223 | |
224 | :after { |
225 | content: 'private'; |
226 | position: absolute; |
227 | background: #525050; |
228 | bottom: 0; |
229 | left: -1px; |
230 | font-size: 10px; |
231 | padding: 2px 4px 0 2px; |
232 | border-top-right-radius: 5px; |
233 | color: white; |
234 | font-weight: bold; |
235 | pointer-events: none; |
236 | white-space: nowrap |
237 | } |
238 | } |
239 | } |
240 | } |
241 | |
242 | section { |
243 | margin: 0 |
244 | padding: 0 20px |
245 | max-height: 1500px |
246 | overflow: hidden |
247 | |
248 | (img) { |
249 | max-width: 100% |
250 | } |
251 | |
252 | -expanded { |
253 | max-height: none |
254 | } |
255 | } |
256 | |
257 | a.backlink { |
258 | display: block; |
259 | border-top: 1px solid #EEE; |
260 | padding: 10px 15px; |
261 | background: #ffffff; |
262 | color: #8f8f8f; |
263 | margin-top: -1px; |
264 | font-size: 9pt; |
265 | |
266 | :hover { |
267 | text-decoration: none |
268 | color: #777 |
269 | } |
270 | } |
271 | |
272 | footer { |
273 | margin: 5px 0 20px; |
274 | padding: 0 20px |
275 | |
276 | div.expander { |
277 | text-align: center; |
278 | background-color: white; |
279 | |
280 | -truncated { |
281 | padding-top: 50px; |
282 | margin-top: -50px; |
283 | -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0)); |
284 | a { |
285 | :before { content: '▼ '; font-size: 80% } |
286 | } |
287 | } |
288 | } |
289 | |
290 | div.actions { |
291 | a { |
292 | opacity: 0.4 |
293 | transition: opacity 0.2s |
294 | font-weight: bold |
295 | color: #333 |
296 | |
297 | :hover { |
298 | opacity: 1 |
299 | text-decoration: none; |
300 | } |
301 | } |
302 | a + a { |
303 | margin-left: 25px; |
304 | } |
305 | } |
306 | } |
307 | } |
308 |
Built with git-ssb-web