git ssb

10+

Matt McKegg / patchwork



Tree: 931f9ae90cf4da8951bc4688eb35db9c60c22ac7

Files: 931f9ae90cf4da8951bc4688eb35db9c60c22ac7 / styles / dark / message.mcss

5942 bytesRaw
1Message {
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