git ssb

10+

Matt McKegg / patchwork



Tree: 477c9853277d89b00196c453547b293ae7ef6c0d

Files: 477c9853277d89b00196c453547b293ae7ef6c0d / styles / light / profile-list.mcss

1557 bytesRaw
1ProfileList {
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