aboutsummaryrefslogblamecommitdiffhomepage
path: root/client/src/app/shared/video/video-miniature.component.scss
blob: 6e173af997a66e4b5a66724e2c113d6f34c6389e (plain) (tree)
1
2
3
4
5
6
7
8
9

                     
                     
 
                  
                                

                         
                      
                
                      
 

                  
 


                                  
 


                                
 



                                         
 



                                             
 






                                              
       
 




                                                 
 

                               
 


                                     
       
 


                        
     



                         
 
                                        
                   
       
 
                                                                          
                   
       

     
                                                  
                 


                                                

                                                          

       






                                    



       









                         

























                                                

       


                      









                                                



                                    
     

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

.video-miniature {
  width: $video-miniature-width;
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 30px;
  height: 195px;
  vertical-align: top;

  .video-bottom {
    display: flex;

    .video-miniature-information {
      width: 200px;
      line-height: normal;

      .video-miniature-name {
        @include miniature-name;
      }

      .video-miniature-created-at-views {
        display: block;
        font-size: 13px;
      }

      .video-miniature-account,
      .video-miniature-channel {
        @include disable-default-a-behaviour;
        @include ellipsis;

        display: block;
        font-size: 13px;
        color: $grey-foreground-color;

        &:hover {
          color: $grey-foreground-hover-color;
        }
      }

      .video-info-privacy,
      .video-info-blacklisted .blacklisted-label,
      .video-info-nsfw {
        font-weight: $font-semibold;
      }

      .video-info-blacklisted {
        color: red;

        .blacklisted-reason::before {
          content: ' - ';
        }
      }

      .video-info-nsfw {
        color: red;
      }
    }

    .video-actions {
      margin-top: 3px;
      margin-right: 10px;

      /deep/ .dropdown-root:not(.show) {
        opacity: 0;
      }

      /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
        opacity: 1;
      }
    }

    &:hover .video-actions /deep/ .dropdown-root {
      opacity: 1;
    }

    @media screen and (max-width: $small-view) {
      .video-miniature-information .video-miniature-name {
        margin-top: 0;
      }

      .video-actions {
        margin: 0;
        top: -3px;

        /deep/ .dropdown-root {
          display: block !important;
        }
      }
    }
  }

  &.display-as-row {
    flex-direction: row;
    margin-bottom: 0;
    height: auto;
    width: 100%;

    my-video-thumbnail {
      margin-right: 10px;
    }

    .video-bottom {
      .video-miniature-information {
        width: auto;
        min-width: 500px;

        .video-miniature-name {
          @include ellipsis-multiline(1.3em, 2);

          margin-top: 2px;
          margin-bottom: 5px;
        }

        .video-miniature-created-at-views,
        .video-miniature-account,
        .video-miniature-channel {
          font-size: 14px;
          width: fit-content;
        }

        .video-info-privacy {
          margin-top: 5px;
        }

        .video-info-blacklisted {
          margin-top: 3px;
        }
      }

      .video-actions {
        margin: 0;
        top: -3px;
      }
    }

    @media screen and (max-width: $small-view) {
      flex-direction: column;
      height: auto;

      my-video-thumbnail {
        margin-right: 0;
      }

      .video-miniature-information {
        min-width: initial;
      }
    }
  }
}