ProfileList { a.profile { display: flex; padding: 4px; font-size: 110%; margin: 4px 0; background: #2d2c2c; border-radius: 3px; position: relative text-decoration: none transition: background-color 0.25s 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: " " } :hover { background-color: #434141; } div.avatar { img { width: 40px height: 40px display: block border-radius: 3px } } div.main { display: flex flex-direction: column flex: 1 margin-left: 10px justify-content: center min-width: 0px div.name { white-space: nowrap color: #ccc -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 } } } }