Files: 7a2806f51cfcc2a146b0f508dbfde798a1fa11c3 / styles / dark / profile-list.mcss
2409 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 | -more { |
17 | padding-top: 10px |
18 | padding-bottom: 10px |
19 | |
20 | div.main { |
21 | div.name { |
22 | font-weight: normal |
23 | } |
24 | } |
25 | } |
26 | |
27 | -following { |
28 | background-image: svg(following) |
29 | } |
30 | |
31 | -connected { |
32 | background-image: svg(connected) |
33 | } |
34 | |
35 | @svg connected { |
36 | width: 20px |
37 | height: 12px |
38 | content: "<circle cx='6' stroke='none' fill='#45b754' cy='6' r='5' />" |
39 | } |
40 | |
41 | @svg following { |
42 | width: 20px |
43 | height: 12px |
44 | content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>" |
45 | } |
46 | |
47 | div.avatar { |
48 | img { |
49 | width: 40px |
50 | height: 40px |
51 | display: block |
52 | border-radius: 3px |
53 | } |
54 | } |
55 | |
56 | div.main { |
57 | display: flex |
58 | flex-direction: column |
59 | flex: 1 |
60 | margin-left: 10px |
61 | justify-content: center |
62 | min-width: 0px |
63 | div.name { |
64 | white-space: nowrap |
65 | color: #ccc |
66 | -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0)) |
67 | } |
68 | } |
69 | |
70 | div.progress { |
71 | display: flex |
72 | flex-direction: column |
73 | svg { |
74 | transition: opacity 0.2s |
75 | opacity: 0 |
76 | -pending { |
77 | opacity: 1 |
78 | } |
79 | width: 20px |
80 | flex: 1 |
81 | } |
82 | } |
83 | |
84 | div.controls { |
85 | opacity: 0 |
86 | position: absolute |
87 | right: 7px |
88 | top: 0 |
89 | bottom: 0 |
90 | display: flex; |
91 | justify-content: center; |
92 | flex-direction: column; |
93 | width: 15px; |
94 | transition: opacity 0.2s |
95 | a.disconnect { |
96 | color: white; |
97 | border-radius: 10px; |
98 | height: 16px; |
99 | width: 16px; |
100 | background-color: #777 |
101 | text-align: center |
102 | vertical-align: middle |
103 | font-size: 14px; |
104 | overflow: hidden; |
105 | :hover { |
106 | text-decoration: none |
107 | background-color: #F77 |
108 | } |
109 | } |
110 | } |
111 | |
112 | div.buttons { |
113 | display: flex; |
114 | align-items: center; |
115 | padding-right: 10px; |
116 | } |
117 | |
118 | :hover { |
119 | background-color: #434141; |
120 | div.controls { |
121 | opacity: 1 |
122 | } |
123 | } |
124 | } |
125 | } |
126 |
Built with git-ssb-web