diff options
Diffstat (limited to 'client/src/app/+search/search.component.scss')
-rw-r--r-- | client/src/app/+search/search.component.scss | 191 |
1 files changed, 191 insertions, 0 deletions
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss new file mode 100644 index 000000000..6e59adb60 --- /dev/null +++ b/client/src/app/+search/search.component.scss | |||
@@ -0,0 +1,191 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .search-result { | ||
5 | padding: 40px; | ||
6 | |||
7 | .results-header { | ||
8 | font-size: 16px; | ||
9 | padding-bottom: 20px; | ||
10 | margin-bottom: 30px; | ||
11 | border-bottom: 1px solid #DADADA; | ||
12 | |||
13 | .first-line { | ||
14 | display: flex; | ||
15 | flex-direction: row; | ||
16 | |||
17 | .results-counter { | ||
18 | flex-grow: 1; | ||
19 | |||
20 | .search-value { | ||
21 | font-weight: $font-semibold; | ||
22 | } | ||
23 | } | ||
24 | |||
25 | .results-filter-button { | ||
26 | cursor: pointer; | ||
27 | |||
28 | .icon.icon-filter { | ||
29 | @include icon(20px); | ||
30 | |||
31 | position: relative; | ||
32 | top: -1px; | ||
33 | margin-right: 5px; | ||
34 | background-image: url('../../assets/images/search/filter.svg'); | ||
35 | } | ||
36 | } | ||
37 | } | ||
38 | } | ||
39 | |||
40 | .entry { | ||
41 | display: flex; | ||
42 | min-height: 130px; | ||
43 | padding-bottom: 20px; | ||
44 | margin-bottom: 20px; | ||
45 | |||
46 | &.video-channel { | ||
47 | img { | ||
48 | $image-size: 130px; | ||
49 | $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature | ||
50 | |||
51 | @include avatar($image-size); | ||
52 | |||
53 | margin: 0 ($margin-size + 10) 0 $margin-size; | ||
54 | } | ||
55 | |||
56 | .video-channel-info { | ||
57 | flex-grow: 1; | ||
58 | width: fit-content; | ||
59 | |||
60 | .video-channel-names { | ||
61 | @include disable-default-a-behaviour; | ||
62 | |||
63 | display: flex; | ||
64 | align-items: baseline; | ||
65 | color: pvar(--mainForegroundColor); | ||
66 | width: fit-content; | ||
67 | |||
68 | .video-channel-display-name { | ||
69 | font-weight: $font-semibold; | ||
70 | font-size: 18px; | ||
71 | } | ||
72 | |||
73 | .video-channel-name { | ||
74 | font-size: 14px; | ||
75 | color: $grey-actor-name; | ||
76 | margin-left: 5px; | ||
77 | } | ||
78 | } | ||
79 | } | ||
80 | } | ||
81 | } | ||
82 | } | ||
83 | |||
84 | @media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) { | ||
85 | .video-channel-info .video-channel-names { | ||
86 | flex-direction: column !important; | ||
87 | |||
88 | .video-channel-name { | ||
89 | @include ellipsis; // Ellipsis and max-width on channel-name to not break screen | ||
90 | |||
91 | max-width: 250px; | ||
92 | margin-left: 0 !important; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | :host-context(.main-col:not(.expanded)) { | ||
97 | // Override the min-width: 500px to not break screen | ||
98 | ::ng-deep .video-miniature-information { | ||
99 | min-width: 300px !important; | ||
100 | } | ||
101 | } | ||
102 | } | ||
103 | |||
104 | @media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) { | ||
105 | :host-context(.main-col:not(.expanded)) { | ||
106 | .video-channel-info .video-channel-names { | ||
107 | .video-channel-name { | ||
108 | max-width: 160px; | ||
109 | } | ||
110 | } | ||
111 | |||
112 | // Override the min-width: 500px to not break screen | ||
113 | ::ng-deep .video-miniature-information { | ||
114 | min-width: $video-thumbnail-width !important; | ||
115 | } | ||
116 | } | ||
117 | |||
118 | :host-context(.expanded) { | ||
119 | // Override the min-width: 500px to not break screen | ||
120 | ::ng-deep .video-miniature-information { | ||
121 | min-width: 300px !important; | ||
122 | } | ||
123 | } | ||
124 | } | ||
125 | |||
126 | @media screen and (max-width: $small-view) { | ||
127 | .search-result { | ||
128 | .entry.video-channel, | ||
129 | .entry.video { | ||
130 | flex-direction: column; | ||
131 | height: auto; | ||
132 | justify-content: center; | ||
133 | align-items: center; | ||
134 | text-align: center; | ||
135 | |||
136 | img { | ||
137 | margin: 0; | ||
138 | } | ||
139 | |||
140 | img { | ||
141 | margin: 0; | ||
142 | } | ||
143 | |||
144 | .video-channel-info .video-channel-names { | ||
145 | align-items: center; | ||
146 | flex-direction: column !important; | ||
147 | |||
148 | .video-channel-name { | ||
149 | margin-left: 0 !important; | ||
150 | } | ||
151 | } | ||
152 | |||
153 | my-subscribe-button { | ||
154 | margin-top: 5px; | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | } | ||
159 | |||
160 | @media screen and (max-width: $mobile-view) { | ||
161 | .search-result { | ||
162 | padding: 20px 10px; | ||
163 | |||
164 | .results-header { | ||
165 | font-size: 15px !important; | ||
166 | } | ||
167 | |||
168 | .entry { | ||
169 | &.video { | ||
170 | .video-info-name, | ||
171 | .video-info-account { | ||
172 | margin: auto; | ||
173 | } | ||
174 | |||
175 | my-video-thumbnail { | ||
176 | margin-right: 0 !important; | ||
177 | |||
178 | ::ng-deep .video-thumbnail { | ||
179 | width: 100%; | ||
180 | height: auto; | ||
181 | |||
182 | img { | ||
183 | width: 100%; | ||
184 | height: auto; | ||
185 | } | ||
186 | } | ||
187 | } | ||
188 | } | ||
189 | } | ||
190 | } | ||
191 | } | ||