AllChannels { display: flex; flex-wrap: wrap; justify-content: center; overflow: auto padding: 10px; a.channel { display: flex; padding: 8px 10px; font-size: 110%; margin: 4px; background: rgba(255, 255, 255, 0.66); color: #333; border-radius: 5px; position: relative transition: background-color 0.2s width: 200px; overflow: hidden; text-overflow: ellipsis; background-repeat: no-repeat background-position: right -subscribed { background-image: svg(subscribed) span.name { font-weight: bold } } @svg subscribed { width: 20px height: 12px content: " " } :hover { background: rgba(255, 255, 255, 0.4); text-decoration: none; a { transition: opacity 0.05s opacity: 1 } } span.name { flex: 1 white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } a { display: inline opacity: 0; font-size: 80%; background-color: rgb(112, 112, 112); transition: opacity 0.2s, background-color 0.4s padding: 9px 10px; color: white; border-radius: 4px; font-weight: bold; margin: -8px -10px -8px 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 2px solid rgba(255, 255, 255, 0.9); text-decoration: none -subscribe { :hover { background-color: rgb(112, 184, 212); } } -unsubscribe { :hover { background: rgb(212, 112, 112); } } } } } }