git ssb

10+

Matt McKegg / patchwork



Tree: 1af1f98a554f13bde7ab27e8c5b0da089272ab19

Files: 1af1f98a554f13bde7ab27e8c5b0da089272ab19 / styles / light / profile-list.mcss

2463 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 -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='green' 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 }
53 }
54
55 div.main {
56 display: flex
57 flex-direction: column
58 flex: 1
59 margin-left: 10px
60 justify-content: center
61 min-width: 0px
62 div.name {
63 white-space: nowrap
64 font-weight: bold
65 font-size: 110%
66 color: #636363
67 -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0))
68 }
69 }
70
71 div.progress {
72 display: flex
73 flex-direction: column
74 svg {
75 transition: opacity 0.2s
76 opacity: 0
77 -pending {
78 opacity: 1
79 }
80 width: 20px
81 flex: 1
82 }
83 }
84
85 div.controls {
86 opacity: 0
87 position: absolute
88 right: 7px
89 top: 0
90 bottom: 0
91 display: flex;
92 justify-content: center;
93 flex-direction: column;
94 width: 15px;
95 transition: opacity 0.2s
96 a.disconnect {
97 color: white;
98 border-radius: 10px;
99 height: 16px;
100 width: 16px;
101 background-color: #777
102 text-align: center
103 vertical-align: middle
104 font-size: 14px;
105 overflow: hidden;
106 :hover {
107 text-decoration: none
108 background-color: #F77
109 }
110 }
111 }
112
113 div.buttons {
114 display: flex;
115 align-items: center;
116 padding-right: 10px;
117 }
118
119 :hover {
120 background-color: rgba(255, 255, 255, 0.4);
121 div.controls {
122 opacity: 1
123 }
124 }
125 }
126}
127

Built with git-ssb-web