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