AllChannels { display: flex; flex-wrap: wrap; justify-content: center; overflow-y: auto padding: 10px; a.channel { display: flex; padding: 8px 10px; font-size: 110%; margin: 4px; background: #2d2c2c; color: #ccc; border-radius: 3px; position: relative transition: background-color 0.25s width: 200px; background-repeat: no-repeat background-position: right -more { background-color: transparent color: #6e6d6d :hover { background-color: transparent color: #ccc } } -subscribed { background-image: svg(subscribed) border-left: 2px solid #51c067; border-top-left-radius: 0; border-bottom-left-radius: 0; span.name { font-weight: bold } } @svg subscribed { width: 20px height: 12px content: " " } :hover { background: #383736; text-decoration: none; a { transition: opacity 0.05s opacity: 1 } } span.name { flex: 1 white-space: nowrap; min-width: 0; } 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: 3px; 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: #51c067; } } -unsubscribe { :hover { background: rgb(212, 112, 112); } } } } }