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