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