ProfileList { a.profile { display: flex; padding: 4px; font-size: 110%; margin: 4px 0; background: rgba(255, 255, 255, 0.74); border-radius: 5px; position: relative text-decoration: none transition: background-color 0.2s background-repeat: no-repeat background-position: right -following { background-image: svg(following) } -connected { background-image: svg(connected) } @svg connected { width: 20px height: 12px content: "" } @svg following { width: 20px height: 12px content: " " } div.avatar { img { width: 40px height: 40px display: block } } div.main { display: flex flex-direction: column flex: 1 margin-left: 10px justify-content: center min-width: 0px div.name { white-space: nowrap font-weight: bold font-size: 110% color: #636363 -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0)) } } div.progress { display: flex flex-direction: column svg { transition: opacity 0.2s opacity: 0 -pending { opacity: 1 } width: 20px flex: 1 } } div.controls { opacity: 0 position: absolute right: 7px top: 0 bottom: 0 display: flex; justify-content: center; flex-direction: column; width: 15px; transition: opacity 0.2s a.disconnect { color: white; border-radius: 10px; height: 16px; width: 16px; background-color: #777 text-align: center vertical-align: middle font-size: 14px; overflow: hidden; :hover { text-decoration: none background-color: #F77 } } } :hover { background-color: rgba(255, 255, 255, 0.4); div.controls { opacity: 1 } } } }