client/src/app/search/search.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .search-result {
   5   padding: 40px;
   6
   7   .results-header {
   8     font-size: 16px;
   9     padding-bottom: 20px;
  10     margin-bottom: 30px;
  11     border-bottom: 1px solid #DADADA;
  12
  13     .first-line {
  14       display: flex;
  15       flex-direction: row;
  16
  17       .results-counter {
  18         flex-grow: 1;
  19
  20         .search-value {
  21           font-weight: $font-semibold;
  22         }
  23       }
  24
  25       .results-filter-button {
  26         cursor: pointer;
  27
  28         .icon.icon-filter {
  29           @include icon(20px);
  30
  31           position: relative;
  32           top: -1px;
  33           margin-right: 5px;
  34           background-image: url('../../assets/images/search/filter.svg');
  35         }
  36       }
  37     }
  38
  39     .results-filter {
  40       // Animation when we show/hide the filters
  41       transition: max-height 0.3s;
  42       display: block !important;
  43       overflow: hidden !important;
  44       max-height: 0;
  45
  46       &.show {
  47         max-height: 1500px;
  48       }
  49     }
  50   }
  51
  52   .entry {
  53     display: flex;
  54     min-height: 130px;
  55     padding-bottom: 20px;
  56     margin-bottom: 20px;
  57
  58     &.video-channel {
  59       img {
  60         $image-size: 130px;
  61         $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
  62
  63         @include avatar($image-size);
  64
  65         margin: 0 ($margin-size + 10) 0 $margin-size;
  66       }
  67
  68       .video-channel-info {
  69         flex-grow: 1;
  70         width: fit-content;
  71
  72         .video-channel-names {
  73           @include disable-default-a-behaviour;
  74
  75           display: flex;
  76           align-items: baseline;
  77           color: var(--mainForegroundColor);
  78           width: fit-content;
  79
  80           .video-channel-display-name {
  81             font-weight: $font-semibold;
  82             font-size: 18px;
  83           }
  84
  85           .video-channel-name {
  86             font-size: 14px;
  87             color: $grey-actor-name;
  88             margin-left: 5px;
  89           }
  90         }
  91       }
  92     }
  93   }
  94 }
  95
  96 @media screen and (max-width: $small-view) {
  97   .video-channel-names {
  98     flex-direction: column !important;
  99
 100     .video-channel-name {
 101       margin-left: 0 !important;
 102     }
 103   }
 104 }
 105
 106 @media screen and (max-width: $mobile-view) {
 107   .search-result {
 108     padding: 20px 10px;
 109
 110     .results-header {
 111       font-size: 15px !important;
 112     }
 113
 114     .entry {
 115       flex-direction: column;
 116       height: auto;
 117       justify-content: center;
 118       align-items: center;
 119       text-align: center;
 120
 121       &.video {
 122         .video-info-name,
 123         .video-info-account {
 124           margin: auto;
 125         }
 126
 127         my-video-thumbnail {
 128           margin-right: 0 !important;
 129
 130           /deep/ .video-thumbnail {
 131             width: 100%;
 132             height: auto;
 133
 134             img {
 135               width: 100%;
 136               height: auto;
 137             }
 138           }
 139         }
 140       }
 141
 142       &.video-channel {
 143         .video-channel-info .video-channel-names {
 144           align-items: center;
 145         }
 146
 147         my-subscribe-button {
 148           margin-top: 5px;
 149         }
 150       }
 151     }
 152   }
 153 }