Files: 309e74ff2caff03527d5f5bc77a2e35d3330ddcf / styles / dark / profile-list.mcss
2148 bytesRaw
1 | ProfileList { |
2 | a.profile { |
3 | display: flex; |
4 | padding: 4px; |
5 | font-size: 110%; |
6 | margin: 4px 0; |
7 | background: #2d2c2c; |
8 | border-radius: 3px; |
9 | position: relative |
10 | text-decoration: none |
11 | transition: background-color 0.25s |
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='#45b754' 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 | div.avatar { |
37 | img { |
38 | width: 40px |
39 | height: 40px |
40 | display: block |
41 | border-radius: 3px |
42 | } |
43 | } |
44 | |
45 | div.main { |
46 | display: flex |
47 | flex-direction: column |
48 | flex: 1 |
49 | margin-left: 10px |
50 | justify-content: center |
51 | min-width: 0px |
52 | div.name { |
53 | white-space: nowrap |
54 | color: #ccc |
55 | -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0)) |
56 | } |
57 | } |
58 | |
59 | div.progress { |
60 | display: flex |
61 | flex-direction: column |
62 | svg { |
63 | transition: opacity 0.2s |
64 | opacity: 0 |
65 | -pending { |
66 | opacity: 1 |
67 | } |
68 | width: 20px |
69 | flex: 1 |
70 | } |
71 | } |
72 | |
73 | div.controls { |
74 | opacity: 0 |
75 | position: absolute |
76 | right: 7px |
77 | top: 0 |
78 | bottom: 0 |
79 | display: flex; |
80 | justify-content: center; |
81 | flex-direction: column; |
82 | width: 15px; |
83 | transition: opacity 0.2s |
84 | a.disconnect { |
85 | color: white; |
86 | border-radius: 10px; |
87 | height: 16px; |
88 | width: 16px; |
89 | background-color: #777 |
90 | text-align: center |
91 | vertical-align: middle |
92 | font-size: 14px; |
93 | overflow: hidden; |
94 | :hover { |
95 | text-decoration: none |
96 | background-color: #F77 |
97 | } |
98 | } |
99 | } |
100 | |
101 | :hover { |
102 | background-color: #434141; |
103 | div.controls { |
104 | opacity: 1 |
105 | } |
106 | } |
107 | } |
108 | } |
109 |
Built with git-ssb-web