Video previews take all the width on mobile
[oweals/peertube.git] / client / src / app / shared / video / video-thumbnail.component.scss
1 @import '_variables';
2 @import '_mixins';
3
4 .video-thumbnail {
5   display: inline-block;
6   position: relative;
7   border-radius: 4px;
8   overflow: hidden;
9
10   &:hover {
11     text-decoration: none !important;
12   }
13
14   img {
15     width: $video-thumbnail-width;
16     height: $video-thumbnail-height;
17
18     &.blur-filter {
19       filter: blur(5px);
20       transform : scale(1.03);
21     }
22   }
23
24   .video-thumbnail-overlay {
25     position: absolute;
26     right: 5px;
27     bottom: 5px;
28     display: inline-block;
29     background-color: rgba(0, 0, 0, 0.7);
30     color: #fff;
31     font-size: 12px;
32     font-weight: $font-bold;
33     border-radius: 3px;
34     padding: 0 5px;
35   }
36 }