diff options
Diffstat (limited to 'client/src/app/videos/video-list/shared/video-miniature.component.scss')
-rw-r--r-- | client/src/app/videos/video-list/shared/video-miniature.component.scss | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss new file mode 100644 index 000000000..066792d10 --- /dev/null +++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss | |||
@@ -0,0 +1,102 @@ | |||
1 | .video-miniature { | ||
2 | margin-top: 30px; | ||
3 | display: inline-block; | ||
4 | position: relative; | ||
5 | height: 190px; | ||
6 | width: 220px; | ||
7 | vertical-align: top; | ||
8 | |||
9 | .video-miniature-thumbnail { | ||
10 | display: inline-block; | ||
11 | position: relative; | ||
12 | border-radius: 3px; | ||
13 | overflow: hidden; | ||
14 | |||
15 | &:hover { | ||
16 | text-decoration: none !important; | ||
17 | } | ||
18 | |||
19 | img.blur-filter { | ||
20 | filter: blur(5px); | ||
21 | transform : scale(1.03); | ||
22 | } | ||
23 | |||
24 | .video-miniature-thumbnail-overlay { | ||
25 | position: absolute; | ||
26 | right: 0px; | ||
27 | bottom: 0px; | ||
28 | display: inline-block; | ||
29 | background-color: rgba(0, 0, 0, 0.7); | ||
30 | color: #fff; | ||
31 | padding: 3px 5px; | ||
32 | font-size: 11px; | ||
33 | font-weight: bold; | ||
34 | width: 100%; | ||
35 | |||
36 | .video-miniature-thumbnail-overlay-views { | ||
37 | |||
38 | } | ||
39 | |||
40 | .video-miniature-thumbnail-overlay-duration { | ||
41 | float: right; | ||
42 | } | ||
43 | } | ||
44 | } | ||
45 | |||
46 | .video-miniature-information { | ||
47 | width: 200px; | ||
48 | |||
49 | .video-miniature-name { | ||
50 | height: 23px; | ||
51 | display: block; | ||
52 | overflow: hidden; | ||
53 | text-overflow: ellipsis; | ||
54 | white-space: nowrap; | ||
55 | font-weight: bold; | ||
56 | transition: color 0.2s; | ||
57 | font-size: 15px; | ||
58 | |||
59 | &:hover { | ||
60 | text-decoration: none; | ||
61 | } | ||
62 | |||
63 | &.blur-filter { | ||
64 | filter: blur(3px); | ||
65 | padding-left: 4px; | ||
66 | } | ||
67 | |||
68 | .video-miniature-tags { | ||
69 | // Fix for chrome when tags are long | ||
70 | width: 201px; | ||
71 | |||
72 | .video-miniature-tag { | ||
73 | font-size: 13px; | ||
74 | cursor: pointer; | ||
75 | position: relative; | ||
76 | top: -2px; | ||
77 | |||
78 | .label { | ||
79 | transition: background-color 0.2s; | ||
80 | } | ||
81 | } | ||
82 | } | ||
83 | } | ||
84 | |||
85 | .video-miniature-author, .video-miniature-created-at { | ||
86 | display: block; | ||
87 | margin-left: 1px; | ||
88 | font-size: 11px; | ||
89 | color: $video-miniature-other-infos; | ||
90 | opacity: 0.9; | ||
91 | } | ||
92 | |||
93 | .video-miniature-author { | ||
94 | transition: color 0.2s; | ||
95 | |||
96 | &:hover { | ||
97 | color: #23527c; | ||
98 | text-decoration: none; | ||
99 | } | ||
100 | } | ||
101 | } | ||
102 | } | ||