git ssb

10+

Matt McKegg / patchwork



Tree: b3f30e77ec80d5b6c95a62f90c993744941e908d

Files: b3f30e77ec80d5b6c95a62f90c993744941e908d / styles / dark / profile-list.mcss

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