Soundcloud Minimal by stephenpontes

/* ==UserStyle==
@name           Soundcloud Minimal
@namespace      USO Archive
@author         stephenpontes
@description    `Declutter your SoundCloud stream.Tired of high CPU usage, comments, and clutter in general?  Keep the same look and feel of SoundCloud while improving performance.`
@version        20200922.0.0
@license        CC-BY-SA-4.0
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("soundcloud.com") {
  /* ////////////////// */
  /* Hide these things: */
  /* ////////////////// */

  /* tag container */
  .stream .soundTitle__additionalContainer,
  /* Sidebar */
  #content:has(.stream) .l-fluid-fixed .l-sidebar-right,
  /* Comments */
  .stream .sound.streamContext .commentForm.visible.m-small,
  /* Sidebar */
  .stream .commentForm.commentForm__transition.m-small,
  /* Repost arrow */
  .stream .soundContext__repost:before,
  /* Playlist count */
  .stream .coverArt__infoItem,
  /* Tracklist itself */
  .stream .compactTrackList,
  /* Upsell */
  .stream .streamHTUpsell
  {
    display: none;
  }

  /* Clean up alignment of "XX posted a track y days ago" text */
  .soundContext__line.sc-font-body {
    display: flex;
    align-items: center;
  }

  .soundContext__line.sc-font-body > * {
    margin: 0 3px;
  }

  /* Style a new default list item style with support for custom repost animations */
  .stream .soundList__item {
    background: #fff;
    border: 1px solid #c6c6c6;
    margin: 1%;
    padding: 12px 12px 48px !important;
    border-radius: 4px;
    display: block;
    float: left;
    width: 48%;
    clear: none;
    box-sizing: border-box;
    transition: opacity 500ms ease 1750ms;
  }
  
  /* Make reposts more visible */
  .soundList__item:has(.soundContext__repost) {
    opacity: 0.4;
    transition-delay: 1000ms;
  }

  /* But let's restore normal look on hover */
  .soundList__item:has(.soundContext__repost):hover {
    opacity: 1;
    transition-delay: 0ms;
  }
  .stream .soundContext__repost {
    background: #999999;
    padding: 2px 5px;
    margin-right: 6px;
    color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 0.03em;
  }

  /* Always set playing item to highest z-index and default state */
  .soundList__item:has(.playing) {
    z-index: 5;
    opacity: 1;
  }
  
  /* Resize main container */
  #content:has(.stream) .l-fluid-fixed .l-main:not(.l-user-main) {
    margin-right: 0;
    padding-right: 0;
    border: 0;
  }

  /* set background to neutral */
  body.sc-classic:has(.stream)  {
    background: #f1f1f1;
  }

  /* Resize and align cover art and title */
  .sound__body { align-items: center; }

  .sc-classic .sound__header {
    margin: 0;
    min-height: 0;
  }
  
  .stream .sound__coverArt {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    overflow: hidden;
  }

  /* Special "visual style" items */
  /* These are weird wave-forms that soundcloud treats differently... */
  /* They're like "promo" tracks with full artwork */
  .stream .visualSound.streamContext .visualSound__wrapper {
    position: static;
    min-height: 0;
    margin: 0;
    padding: 0;
    width: calc(100% - 60px);
  }

  
  .stream .visuals__transition,
  .stream .visuals.streamContext {
    display: none;
  }
  .stream .g-type-shrinkwrap-block {
    background: none;
  }


  .stream .visualSound .sound__header {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 2;
  }

  .stream .soundTitle.m-visualSound.streamContext .soundTitle__username {
    padding: 0;
  }

  .stream .visualSound .soundTitle__usernameText {
    color: #999;
  }

  
  /* Visual style height fixes */
  .stream .visualSound.streamContext.playing .visualSound__wrapper {
    padding: 0;
  }

  .stream .sound:not(.focused) .soundTitle.m-visualSound.m-playing .soundTitle__title,
  .stream .sound:not(.focused) .soundTitle.m-visualSound.m-playing .soundTitle__username,
  .stream .sound:not(.focused) .soundTitle.m-visualSound.m-playing .soundTitle__playButton {
    opacity: 1;
  }

  /* No black background hover state on visual style special */
  .stream .g-type-shrinkwrap-inline,
  .stream .g-type-shrinkwrap-inline:hover,
  .stream .g-type-shrinkwrap-inline:visited,
  .stream .g-type-shrinkwrap-block,
  .stream .g-type-shrinkwrap-block:hover,
  .stream .g-type-shrinkwrap-block:visited {
    background: none;
  }

  .stream a.g-type-shrinkwrap-primary:hover,
  .stream a.g-type-shrinkwrap-primary:visited:hover,
  .stream a.g-type-shrinkwrap-large-primary:hover,
  .stream a.g-type-shrinkwrap-large-primary:visited:hover {
    color: #333;
  }

  .stream .visualSound .soundTitle__title {
    color: #333;
    padding: 0;
  }

  .stream .visualSound:not(.listenContext) .sound__footer {
    top: auto;
    right: auto;
    bottom: -4em;
    left: -1em;
  }

  /* Custom styles for each item and vertical shortening */
  #content:has(.stream) .sc-list-nostyle {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1%;
  }

  /* Hide captions and secondary button groups ("subscribe now") */
  .soundContext__caption,
  .sc-button-group + .sc-button-group {
    display: none;
  }


  .stream .sound__soundActions {
    background: none;
  }

  .stream .sound__header {
    padding-top: 0;
  }

  /* Make those promoted tracks more obvious */
  .stream .sc-promoted-icon {
    background-color: yellow;
    padding: 0.5em;
    color: #000;
    text-transform: uppercase;
    font-weight: bold;
  }

  .stream .sc-promoted-icon-small.sc-promoted-icon,
  .stream .sc-promoted-icon-medium.sc-promoted-icon {
    background-image: none;
  }

  /* Darker search bar */
  .g-dark input[type="search"].headerSearch__input {
    background: #000;
  }

  /* Item footer */
  .stream .sound__footer.g-all-transitions-300 {
    background: #fbfbfb;
    border-top: 1px solid #e8e8e8;
    position: absolute;
    bottom: -4em;
    left: -12px;
    width: calc(100% + 24px);
    box-sizing: border-box;
    padding: 6px 12px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Align plays/comment counts in footer */
  .stream .sound__footerRight {
    right: 1.5em;
    top: 0.55em;
  }

  /* More obvious play states */
  .stream .sound:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    width: 0%;
    height: 5px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #f50;
    transition: width 750ms ease;
  }

  .stream .sound.playing:before {
    left: 0;
    right: auto;
    width: 100%;
  }

  .stream .sound.playing > * {
    position: relative;
    z-index: 1;
  }

  .stream .playlist .sound__soundActions {
    margin-top: 0;
  }

  .stream .sound__trackList {
    margin: 0;
  }

  /* Warning button that playlists are now hidden in view */
  .stream .sound__trackList:before {
    position: absolute;
    right: 1em;
    top: 0.6em;
    content: "Playlist";
    text-transform: uppercase;
    background: #f2f2f2;
    border: 1px solid #E1E5E8;
    padding: 0.4em 1em;
    font-weight: bold;
    border-radius: 3px;
    font-size: 0.8em;
    color: #999;
    z-index: 9;
  }

  .stream .sound__trackList:hover:before {
    right: 0.5em;
    top: 0.6em;
    content: "Open this track in a new window to view";
    width: calc(100% - 3.35em);
    text-align: center;
  }

  /* Unify buy button */
  .stream .stream__list .sc-buylink {
    float: left;
    text-transform: uppercase;
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 0.3em 0.75em;
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: bold;
  }

  .stream .sc-buylink:hover {
    border-color: #ccc;
  }

  /* keep titles on one line */
  .stream .stream__list .soundTitle__title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* On profile page, break out recent section */
  .spotlight__recent {
    clear: both;
  }


  /* Waveform experiment */
  .stream .sound__waveform {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-top: 0;
    padding: 10px 15px 23px;
    width: calc(100% - 30px);
    height: 40px;
    transform: translateY(0);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transition: opacity 0ms ease 750ms, transform 750ms ease;
  }

  .stream .soundList__item .playing .sound__waveform {
    transform: translateY(122px);
    opacity: 1;
    pointer-events: all;
    transition: opacity 200ms ease 200ms, transform 450ms ease;
  }
}