]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use 'sass:math'; |
2 | @use '_variables' as *; | |
3 | @use '_mixins' as *; | |
57c36b27 | 4 | |
4429a4a6 C |
5 | @mixin build-channel-img-size ($video-img-width) { |
6 | $image-size: min(130px, $video-img-width); | |
8cbc40b2 | 7 | $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature |
4429a4a6 | 8 | |
746018f6 | 9 | @include actor-avatar-size($image-size); |
4429a4a6 C |
10 | |
11 | margin: 0 $margin-size 0 $margin-size; | |
12 | } | |
13 | ||
57c36b27 | 14 | .search-result { |
b34a444e | 15 | padding: 40px; |
4429a4a6 | 16 | } |
57c36b27 | 17 | |
af7fd04a C |
18 | .alert-danger { |
19 | margin-top: 10px; | |
20 | } | |
21 | ||
4429a4a6 | 22 | .results-header { |
4429a4a6 C |
23 | padding-bottom: 20px; |
24 | margin-bottom: 30px; | |
25 | border-bottom: 1px solid #DADADA; | |
57c36b27 | 26 | |
4429a4a6 C |
27 | .first-line { |
28 | display: flex; | |
29 | flex-direction: row; | |
0b18f4aa | 30 | |
4429a4a6 C |
31 | .results-counter { |
32 | flex-grow: 1; | |
0b18f4aa | 33 | |
4429a4a6 C |
34 | .search-value { |
35 | font-weight: $font-semibold; | |
0b18f4aa | 36 | } |
4429a4a6 | 37 | } |
0b18f4aa | 38 | |
4429a4a6 C |
39 | .results-filter-button { |
40 | cursor: pointer; | |
0b18f4aa | 41 | |
4429a4a6 C |
42 | .icon.icon-filter { |
43 | @include icon(20px); | |
27bc9586 | 44 | @include margin-right(5px); |
0b18f4aa | 45 | |
4429a4a6 C |
46 | position: relative; |
47 | top: -1px; | |
4429a4a6 | 48 | background-image: url('../../assets/images/feather/filter.svg'); |
0b18f4aa C |
49 | } |
50 | } | |
57c36b27 | 51 | } |
4429a4a6 | 52 | } |
57c36b27 | 53 | |
4429a4a6 C |
54 | .entry { |
55 | display: flex; | |
56 | margin-bottom: 40px; | |
038907bc | 57 | max-width: 800px; |
4429a4a6 | 58 | } |
57c36b27 | 59 | |
4429a4a6 C |
60 | .video-channel-info { |
61 | flex-grow: 1; | |
62 | margin: 0 10px; | |
63 | width: fit-content; | |
64 | } | |
f37dc0dd | 65 | |
4429a4a6 C |
66 | .video-channel-names { |
67 | @include disable-default-a-behaviour; | |
f37dc0dd | 68 | |
4429a4a6 C |
69 | display: flex; |
70 | align-items: baseline; | |
71 | color: pvar(--mainForegroundColor); | |
72 | width: fit-content; | |
57c36b27 C |
73 | } |
74 | ||
4429a4a6 C |
75 | .video-channel-display-name { |
76 | font-weight: $font-semibold; | |
77 | font-size: $video-miniature-row-name-font-size; | |
78 | } | |
8a3183e5 | 79 | |
4429a4a6 | 80 | .video-channel-name { |
27bc9586 C |
81 | @include margin-left(5px); |
82 | ||
4429a4a6 C |
83 | font-size: $video-miniature-row-info-font-size; |
84 | color: pvar(--greyForegroundColor); | |
4429a4a6 | 85 | } |
8a3183e5 | 86 | |
4429a4a6 C |
87 | // Use the same breakpoints than in video-miniature |
88 | @include on-small-main-col { | |
89 | .video-channel { | |
90 | display: grid; | |
91 | grid-template-columns: auto 1fr; | |
92 | grid-template-rows: auto auto; | |
8a3183e5 | 93 | |
746018f6 C |
94 | my-actor-avatar { |
95 | @include build-channel-img-size($video-thumbnail-medium-width); | |
96 | ||
4429a4a6 C |
97 | grid-column: 1; |
98 | grid-row: 1 / -1; | |
8a3183e5 | 99 | } |
4429a4a6 | 100 | } |
8a3183e5 | 101 | |
4429a4a6 C |
102 | .video-channel-info { |
103 | grid-column: 2; | |
104 | grid-row: 1; | |
8a3183e5 K |
105 | } |
106 | ||
4429a4a6 C |
107 | my-subscribe-button { |
108 | grid-column: 2; | |
109 | grid-row: 2; | |
110 | align-self: end; | |
8a3183e5 K |
111 | } |
112 | } | |
113 | ||
4429a4a6 | 114 | @include on-mobile-main-col { |
746018f6 | 115 | .video-channel my-actor-avatar { |
4429a4a6 | 116 | @include build-channel-img-size($video-thumbnail-small-width); |
6e930af9 | 117 | } |
c182527a | 118 | } |
6e930af9 | 119 | |
c182527a C |
120 | @media screen and (max-width: $mobile-view) { |
121 | .search-result { | |
122 | padding: 20px 10px; | |
57c36b27 | 123 | |
c182527a C |
124 | .results-header { |
125 | font-size: 15px !important; | |
126 | } | |
4429a4a6 | 127 | } |
57c36b27 | 128 | |
4429a4a6 C |
129 | .video-channel-display-name { |
130 | font-size: $video-miniature-row-mobile-name-font-size; | |
131 | } | |
132 | ||
133 | .video-channel-name { | |
134 | font-size: $video-miniature-row-mobile-info-font-size; | |
57c36b27 C |
135 | } |
136 | } |