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