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