diff options
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.scss | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 11518633c..9fd89508a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -254,6 +254,59 @@ | |||
254 | } | 254 | } |
255 | } | 255 | } |
256 | 256 | ||
257 | // If the view is not expanded, take into account the menu | ||
258 | .privacy-concerns { | ||
259 | width: calc(100% - #{$menu-width}); | ||
260 | } | ||
261 | |||
262 | :host-context(.expanded) { | ||
263 | .privacy-concerns { | ||
264 | width: 100%; | ||
265 | } | ||
266 | } | ||
267 | |||
268 | .privacy-concerns { | ||
269 | position: fixed; | ||
270 | bottom: 0; | ||
271 | |||
272 | padding: 5px 15px; | ||
273 | |||
274 | display: flex; | ||
275 | align-items: center; | ||
276 | justify-content: flex-start; | ||
277 | background-color: rgba(0, 0, 0, 0.9); | ||
278 | color: #fff; | ||
279 | |||
280 | .privacy-concerns-text { | ||
281 | margin: 0 5px; | ||
282 | } | ||
283 | |||
284 | a { | ||
285 | @include disable-default-a-behaviour; | ||
286 | |||
287 | color: $orange-color; | ||
288 | transition: color 0.3s; | ||
289 | |||
290 | &:hover { | ||
291 | color: #fff; | ||
292 | } | ||
293 | } | ||
294 | |||
295 | .privacy-concerns-okay { | ||
296 | background-color: $orange-color; | ||
297 | padding: 5px 8px 5px 7px; | ||
298 | margin-left: auto; | ||
299 | border-radius: 3px; | ||
300 | cursor: pointer; | ||
301 | transition: background-color 0.3s; | ||
302 | font-weight: $font-semibold; | ||
303 | |||
304 | &:hover { | ||
305 | background-color: #000; | ||
306 | } | ||
307 | } | ||
308 | } | ||
309 | |||
257 | 310 | ||
258 | @media screen and (max-width: 1600px) { | 311 | @media screen and (max-width: 1600px) { |
259 | .video-bottom { | 312 | .video-bottom { |
@@ -294,6 +347,15 @@ | |||
294 | .other-videos { | 347 | .other-videos { |
295 | display: none; | 348 | display: none; |
296 | } | 349 | } |
350 | |||
351 | .privacy-concerns { | ||
352 | font-size: 12px; | ||
353 | padding: 2px 5px; | ||
354 | |||
355 | .privacy-concerns-text { | ||
356 | margin: 0; | ||
357 | } | ||
358 | } | ||
297 | } | 359 | } |
298 | 360 | ||
299 | @media screen and (max-width: 600px) { | 361 | @media screen and (max-width: 600px) { |
@@ -311,6 +373,14 @@ | |||
311 | } | 373 | } |
312 | } | 374 | } |
313 | } | 375 | } |
376 | |||
377 | .privacy-concerns { | ||
378 | width: 100%; | ||
379 | |||
380 | strong { | ||
381 | display: none; | ||
382 | } | ||
383 | } | ||
314 | } | 384 | } |
315 | 385 | ||
316 | @media screen and (max-width: 450px) { | 386 | @media screen and (max-width: 450px) { |