@import '../variables.scss';
@import '../mixins.scss';

div.retro {
  position:relative;
  width: 100%;
  height: 100%;

  div.blur {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    z-index: 0;
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */
    transform: scale(5);
    transform-origin: top left;
    -webkit-filter: blur(10px);
    @include fade-in(background-image);
  }

  div.content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    .playlist {
      max-width: 600px;
      background-color: $transparent-bar-dark-background;
    }
  }

  .current-artwork {
    position: absolute;
    top: 0px;
    right: 100px;

    img {
      border: 10px solid rgba(17, 17, 17, 0.2);
      max-height: 600px;
      margin-right: 30px;

    }
  }
}

@import '../variables.scss';
@import '../mixins.scss';

div.retro {
  position:relative;
  width: 100%;
  height: 100%;

  div.blur {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    z-index: 0;
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */
    transform: scale(5);
    transform-origin: top left;
    -webkit-filter: blur(10px);
    @include fade-in(background-image);
  }

  div.content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    .playlist {
      max-width: 600px;
      background-color: $transparent-bar-dark-background;
    }
  }

  .current-artwork {
    position: fixed;
    top: 100px;
    right: 100px;

    img {
      border: 10px solid rgba(17, 17, 17, 0.2);
      max-height: 600px;
      margin-right: 30px;

    }
  }
}

Fix the current playing artwork to the top right
[Retro] Fix the current playing artwork to the top right
