]>
Commit | Line | Data |
---|---|---|
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 | } |