Files: d3516ed7e732fa6234093e1b15a55b982a89c652 / styles / light / profile-list.mcss
1557 bytesRaw
1 | ProfileList { |
2 | a.profile { |
3 | display: flex; |
4 | padding: 4px; |
5 | font-size: 110%; |
6 | margin: 4px 0; |
7 | background: rgba(255, 255, 255, 0.74); |
8 | border-radius: 5px; |
9 | position: relative |
10 | text-decoration: none |
11 | transition: background-color 0.2s |
12 | |
13 | background-repeat: no-repeat |
14 | background-position: right |
15 | |
16 | -following { |
17 | background-image: svg(following) |
18 | } |
19 | |
20 | -connected { |
21 | background-image: svg(connected) |
22 | } |
23 | |
24 | @svg connected { |
25 | width: 20px |
26 | height: 12px |
27 | content: "<circle cx='6' stroke='none' fill='green' cy='6' r='5' />" |
28 | } |
29 | |
30 | @svg following { |
31 | width: 20px |
32 | height: 12px |
33 | content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>" |
34 | } |
35 | |
36 | :hover { |
37 | background-color: rgba(255, 255, 255, 0.4); |
38 | } |
39 | |
40 | div.avatar { |
41 | img { |
42 | width: 40px |
43 | height: 40px |
44 | display: block |
45 | } |
46 | } |
47 | |
48 | div.main { |
49 | display: flex |
50 | flex-direction: column |
51 | flex: 1 |
52 | margin-left: 10px |
53 | justify-content: center |
54 | min-width: 0px |
55 | div.name { |
56 | white-space: nowrap |
57 | font-weight: bold |
58 | font-size: 110% |
59 | color: #636363 |
60 | -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0)) |
61 | } |
62 | } |
63 | |
64 | div.progress { |
65 | display: flex |
66 | flex-direction: column |
67 | svg { |
68 | transition: opacity 0.2s |
69 | opacity: 0 |
70 | -pending { |
71 | opacity: 1 |
72 | } |
73 | width: 20px |
74 | flex: 1 |
75 | } |
76 | } |
77 | } |
78 | } |
79 |
Built with git-ssb-web