52 lines
		
	
	
		
			877 B
		
	
	
	
		
			SCSS
		
	
	
	
			
		
		
	
	
			52 lines
		
	
	
		
			877 B
		
	
	
	
		
			SCSS
		
	
	
	
.streams-container {
 | 
						|
  #empty-message {
 | 
						|
    display: none;
 | 
						|
  }
 | 
						|
 | 
						|
  .streams {
 | 
						|
    &:empty {
 | 
						|
      display: none;
 | 
						|
 | 
						|
      + #empty-message {
 | 
						|
        display: block;
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  .stream {
 | 
						|
    .live {
 | 
						|
      position: absolute;
 | 
						|
      left: $spacing-small;
 | 
						|
      top: $spacing-small;
 | 
						|
      color: white;
 | 
						|
      background-color: #e91916;
 | 
						|
      font-weight: bold;
 | 
						|
    }
 | 
						|
 | 
						|
    .viewers {
 | 
						|
      position: absolute;
 | 
						|
      left: $spacing-small;
 | 
						|
      bottom: $spacing-small;
 | 
						|
      color: white;
 | 
						|
      background-color: rgba(0, 0, 0, 0.7);
 | 
						|
    }
 | 
						|
 | 
						|
    .avatar {
 | 
						|
      padding: 1.5rem;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  .twitch-embed-container {
 | 
						|
    padding-bottom: 0%;
 | 
						|
    transition: padding-bottom 400ms ease-in-out;
 | 
						|
 | 
						|
    &.open {
 | 
						|
      padding-bottom: 150%;
 | 
						|
 | 
						|
      @media screen and (min-width: 713px) { // magic numbers, Twitch has weird breakpoints
 | 
						|
        padding-bottom: 40.6%;
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 |