@import '_variables';
@import '_mixins';
-.no-result {
- height: 70vh;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 16px;
- font-weight: $font-semibold;
-}
-
.search-result {
- margin-left: 40px;
- margin-top: 40px;
+ padding: 40px;
- .results-counter {
- font-size: 15px;
+ .results-header {
+ font-size: 16px;
padding-bottom: 20px;
margin-bottom: 30px;
border-bottom: 1px solid #DADADA;
- .search-value {
- font-weight: $font-semibold;
+ .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);
+
+ position: relative;
+ top: -1px;
+ margin-right: 5px;
+ background-image: url('../../assets/images/search/filter.svg');
+ }
+ }
}
}
padding-bottom: 20px;
margin-bottom: 20px;
- &.video {
+ &.video-channel {
+ img {
+ $image-size: 130px;
+ $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
+
+ @include avatar($image-size);
- my-video-thumbnail {
- margin-right: 10px;
+ margin: 0 ($margin-size + 10) 0 $margin-size;
}
- .video-info {
+ .video-channel-info {
flex-grow: 1;
+ width: fit-content;
- .video-info-name {
+ .video-channel-names {
@include disable-default-a-behaviour;
- color: #000;
- display: block;
+ display: flex;
+ align-items: baseline;
+ color: var(--mainForegroundColor);
width: fit-content;
- font-size: 18px;
- font-weight: $font-semibold;
- }
- .video-info-date-views {
- font-size: 14px;
- }
-
- .video-info-account {
- @include disable-default-a-behaviour;
+ .video-channel-display-name {
+ font-weight: $font-semibold;
+ font-size: 18px;
+ }
- display: block;
- width: fit-content;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 14px;
- color: #585858;
-
- &:hover {
- color: #303030;
+ .video-channel-name {
+ font-size: 14px;
+ color: $grey-actor-name;
+ margin-left: 5px;
}
}
}
}
}
-@media screen and (max-width: 800px) {
- .entry {
- flex-direction: column;
- height: auto;
- text-align: center;
+@media screen and (max-width: $small-view) {
+ .video-channel-names {
+ flex-direction: column !important;
+
+ .video-channel-name {
+ margin-left: 0 !important;
+ }
+ }
+}
+
+@media screen and (max-width: $mobile-view) {
+ .search-result {
+ padding: 20px 10px;
+
+ .results-header {
+ font-size: 15px !important;
+ }
+
+ .entry {
+ flex-direction: column;
+ height: auto;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
- &.video {
- .video-info-name {
- margin: auto;
+ &.video {
+ .video-info-name,
+ .video-info-account {
+ margin: auto;
+ }
+
+ my-video-thumbnail {
+ margin-right: 0 !important;
+
+ ::ng-deep .video-thumbnail {
+ width: 100%;
+ height: auto;
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
+ }
}
- my-video-thumbnail {
- margin-right: 0;
+ &.video-channel {
+ .video-channel-info .video-channel-names {
+ align-items: center;
+ }
+
+ my-subscribe-button {
+ margin-top: 5px;
+ }
}
}
}