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 {
  59
  60       my-video-thumbnail {
  61         margin-right: 10px;
  62       }
  63
  64       .video-info {
  65         flex-grow: 1;
  66
  67         .video-info-name {
  68           @include disable-default-a-behaviour;
  69
  70           color: var(--mainForegroundColor);
  71           display: block;
  72           width: fit-content;
  73           font-size: 18px;
  74           font-weight: $font-semibold;
  75         }
  76
  77         .video-info-date-views {
  78           font-size: 14px;
  79         }
  80
  81         .video-info-account {
  82           @include disable-default-a-behaviour;
  83           @include ellipsis;
  84
  85           display: block;
  86           width: fit-content;
  87           font-size: 14px;
  88           color: $grey-foreground-color;
  89
  90           &:hover {
  91             color: $grey-foreground-hover-color;
  92           }
  93         }
  94       }
  95     }
  96
  97     &.video-channel {
  98
  99       img {
 100         @include avatar(120px);
 101
 102         margin: 0 50px 0 40px;
 103       }
 104
 105       .video-channel-info {
 106         flex-grow: 1;
 107         width: fit-content;
 108
 109         .video-channel-names {
 110           @include disable-default-a-behaviour;
 111
 112           display: flex;
 113           align-items: baseline;
 114           color: var(--mainForegroundColor);
 115           width: fit-content;
 116
 117           .video-channel-display-name {
 118             font-weight: $font-semibold;
 119             font-size: 18px;
 120           }
 121
 122           .video-channel-name {
 123             font-size: 14px;
 124             color: $grey-actor-name;
 125             margin-left: 5px;
 126           }
 127         }
 128       }
 129     }
 130   }
 131 }
 132
 133 @media screen and (max-width: $small-view) {
 134   .video-channel-names {
 135     flex-direction: column !important;
 136
 137     .video-channel-name {
 138       margin-left: 0 !important;
 139     }
 140   }
 141 }
 142
 143 @media screen and (max-width: $mobile-view) {
 144   .search-result {
 145     padding: 20px 10px;
 146
 147     .results-header {
 148       font-size: 15px !important;
 149     }
 150
 151     .entry {
 152       flex-direction: column;
 153       height: auto;
 154       justify-content: center;
 155       align-items: center;
 156       text-align: center;
 157
 158       &.video {
 159         .video-info-name,
 160         .video-info-account {
 161           margin: auto;
 162         }
 163
 164         my-video-thumbnail {
 165           margin-right: 0 !important;
 166
 167           /deep/ .video-thumbnail {
 168             width: 100%;
 169             height: auto;
 170
 171             img {
 172               width: 100%;
 173               height: auto;
 174             }
 175           }
 176         }
 177       }
 178
 179       &.video-channel {
 180         .video-channel-info .video-channel-names {
 181           align-items: center;
 182         }
 183
 184         my-subscribe-button {
 185           margin-top: 5px;
 186         }
 187       }
 188     }
 189   }
 190 }