}
}
}
-
- .results-filter {
- // Animation when we show/hide the filters
- transition: max-height 0.3s;
- display: block !important;
- overflow: hidden !important;
- max-height: 0;
-
- &.show {
- max-height: 1500px;
- }
- }
}
.entry {
padding-bottom: 20px;
margin-bottom: 20px;
- &.video {
-
- my-video-thumbnail {
- margin-right: 10px;
- }
-
- .video-info {
- flex-grow: 1;
-
- .video-info-name {
- @include disable-default-a-behaviour;
-
- color: #000;
- display: block;
- 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;
-
- display: block;
- width: fit-content;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 14px;
- color: #585858;
-
- &:hover {
- color: #303030;
- }
- }
- }
- }
-
&.video-channel {
-
img {
- @include avatar(120px);
+ $image-size: 130px;
+ $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
- margin: 0 50px 0 40px;
+ @include avatar($image-size);
+
+ margin: 0 ($margin-size + 10) 0 $margin-size;
}
.video-channel-info {
display: flex;
align-items: baseline;
- color: #000;
+ color: var(--mainForegroundColor);
width: fit-content;
.video-channel-display-name {
}
}
-@media screen and (max-width: 800px) {
+@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;
- }
+ .results-header {
+ font-size: 15px !important;
+ }
- .entry {
- flex-direction: column;
- height: auto;
- text-align: center;
-
- &.video {
- .video-info-name,
- .video-info-account {
- margin: auto;
- }
+ .entry {
+ flex-direction: column;
+ height: auto;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
- my-video-thumbnail {
- margin-right: 0 !important;
+ &.video {
+ .video-info-name,
+ .video-info-account {
+ margin: auto;
+ }
- /deep/ .video-thumbnail {
- width: 100%;
- height: auto;
+ my-video-thumbnail {
+ margin-right: 0 !important;
- img {
+ ::ng-deep .video-thumbnail {
width: 100%;
height: auto;
+
+ img {
+ width: 100%;
+ height: auto;
+ }
}
}
}
+
+ &.video-channel {
+ .video-channel-info .video-channel-names {
+ align-items: center;
+ }
+
+ my-subscribe-button {
+ margin-top: 5px;
+ }
+ }
}
}
}