wabbajack/Wabbajack.App.Blazor/Pages/Configure.razor.scss

@import "../Shared/Globals.scss";

#content {
  display: flex;
  height: 100%;
  align-content: center;
  justify-content: space-around;
  align-items: center;
  color: white;
  
  .image {
    position: absolute;
    background-image: url("images/modlist-image.png");
    width: calc(100% - #{$sidebar-width});
    height: calc(100% - #{$header-height});
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(50%);
    z-index: -1;
  }
  .info {
    width: fit-content;
    height: fit-content;
    
    .step {
      margin-left: -20px;
      font-size: 5rem;
      font-weight: 100;
    }
    
    .description {
      margin-left: -10px;
      font-size: 2rem;
      font-weight: 100;
    }
    
    .number {
      color: rgba(255, 255, 255, 0.75);
    }
    .log {
      margin-top: 20px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .preview {
    width: 800px;
    height: 450px;
    margin-top: -150px;
    .mod-feature {
      margin-left: -10px;
      font-size: 2rem;
      font-weight: 100;
    }
    .mod-image {
      background-image: url("https://staticdelivery.nexusmods.com/mods/1704/images/44746/44746-1611463256-105629958.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
    }
    .mod-name {
      font-size: 2rem;
      font-weight: 100;
    } 
    .mod-author {
      font-size: 1.1rem;
      font-weight: 100;
    }
    .mod-info {
      margin-top: 20px;
      margin-left: 10px;
      color: rgba(255, 255, 255, 0.75);
    }
  }
}