aboutsummaryrefslogblamecommitdiffhomepage
path: root/client/src/app/+search/search.component.scss
blob: 2a19e369a2cd3cd6d8c7d99292353358ea50afca (plain) (tree)
1
2
3
4
5
6
7
8


                     



                                                                                                           
                                          



                                        
                
                
 
 




                                   
 


                        
 

                      
 

                                    
       
     
 

                            
 

                            
                                   
 

                           
                                                                        

       
   
 
 


                      
                   
 
 

                                                          
 
 




                     
 

                                       
 



                                     

 



                                                 
 
                     

                            

                                                 
 
 





                                                   
 


                                                                     

                       
     
   
 


                       

   



                       


   
                             
                                  
                                                                  
   
 
 


                                             
 


                                 
   
 





                                                          

   
@import '_variables';
@import '_mixins';

@mixin build-channel-img-size ($video-img-width) {
  $image-size: min(130px, $video-img-width);
  $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature

  @include actor-avatar-size($image-size);

  margin: 0 $margin-size 0 $margin-size;
}

.search-result {
  padding: 40px;
}

.results-header {
  font-size: 16px;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #DADADA;

  .first-line {
    display: flex;
    flex-direction: row;

    .results-counter {
      flex-grow: 1;

      .search-value {
        font-weight: $font-semibold;
      }
    }

    .results-filter-button {
      cursor: pointer;

      .icon.icon-filter {
        @include icon(20px);
        @include margin-right(5px);

        position: relative;
        top: -1px;
        background-image: url('../../assets/images/feather/filter.svg');
      }
    }
  }
}

.entry {
  display: flex;
  margin-bottom: 40px;
  max-width: 800px;
}

.video-channel my-actor-avatar {
  @include build-channel-img-size($video-thumbnail-width);
}

.video-channel-info {
  flex-grow: 1;
  margin: 0 10px;
  width: fit-content;
}

.video-channel-names {
  @include disable-default-a-behaviour;

  display: flex;
  align-items: baseline;
  color: pvar(--mainForegroundColor);
  width: fit-content;
}

.video-channel-display-name {
  font-weight: $font-semibold;
  font-size: $video-miniature-row-name-font-size;
}

.video-channel-name {
  @include margin-left(5px);

  font-size: $video-miniature-row-info-font-size;
  color: pvar(--greyForegroundColor);
}

// Use the same breakpoints than in video-miniature
@include on-small-main-col {
  .video-channel {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;

    my-actor-avatar {
      @include build-channel-img-size($video-thumbnail-medium-width);

      grid-column: 1;
      grid-row: 1 / -1;
    }
  }

  .video-channel-info {
    grid-column: 2;
    grid-row: 1;
  }

  my-subscribe-button {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }
}

@include on-mobile-main-col {
  .video-channel my-actor-avatar {
    @include build-channel-img-size($video-thumbnail-small-width);
  }
}

@media screen and (max-width: $mobile-view) {
  .search-result {
    padding: 20px 10px;

    .results-header {
      font-size: 15px !important;
    }
  }

  .video-channel-display-name {
    font-size: $video-miniature-row-mobile-name-font-size;
  }

  .video-channel-name {
    font-size: $video-miniature-row-mobile-info-font-size;
  }
}