]>
Commit | Line | Data |
---|---|---|
0629423c C |
1 | @import "../../../sass/pre-customizations.scss"; |
2 | ||
501bc6c2 | 3 | .video-miniature { |
00a44645 | 4 | margin-top: 30px; |
501bc6c2 | 5 | display: inline-block; |
501bc6c2 | 6 | position: relative; |
e54163c2 | 7 | height: 190px; |
383bfc83 | 8 | width: 220px; |
0d7d2ad9 | 9 | vertical-align: top; |
501bc6c2 C |
10 | |
11 | .video-miniature-thumbnail { | |
af14488f | 12 | display: inline-block; |
501bc6c2 C |
13 | position: relative; |
14 | ||
92fb909c C |
15 | &:hover { |
16 | text-decoration: none !important; | |
17 | } | |
18 | ||
19 | .thumbnail-nsfw { | |
20 | background-color: #000; | |
21 | color: #fff; | |
22 | text-align: center; | |
23 | font-size: 30px; | |
24 | line-height: 110px; | |
25 | ||
26 | width: 200px; | |
27 | height: 110px; | |
28 | } | |
29 | ||
383bfc83 C |
30 | img, .thumbnail-nsfw { |
31 | border-radius: 3px; | |
32 | } | |
33 | ||
34 | .video-miniature-thumbnail-overlay { | |
501bc6c2 | 35 | position: absolute; |
383bfc83 C |
36 | right: 0px; |
37 | bottom: 0px; | |
501bc6c2 | 38 | display: inline-block; |
383bfc83 C |
39 | background-color: rgba(0, 0, 0, 0.7); |
40 | color: #fff; | |
41 | padding: 3px 5px; | |
501bc6c2 | 42 | font-size: 11px; |
383bfc83 C |
43 | font-weight: bold; |
44 | width: 100%; | |
45 | ||
46 | .video-miniature-thumbnail-overlay-views { | |
47 | ||
48 | } | |
49 | ||
50 | .video-miniature-thumbnail-overlay-duration { | |
51 | float: right; | |
52 | } | |
501bc6c2 C |
53 | } |
54 | } | |
55 | ||
501bc6c2 | 56 | .video-miniature-informations { |
00a44645 | 57 | width: 200px; |
501bc6c2 | 58 | |
383bfc83 C |
59 | .video-miniature-name { |
60 | height: 23px; | |
501bc6c2 | 61 | display: block; |
383bfc83 C |
62 | overflow: hidden; |
63 | text-overflow: ellipsis; | |
64 | white-space: nowrap; | |
65 | font-weight: bold; | |
66 | transition: color 0.2s; | |
67 | font-size: 15px; | |
501bc6c2 | 68 | |
383bfc83 C |
69 | &:hover { |
70 | text-decoration: none; | |
00a44645 C |
71 | } |
72 | ||
0629423c C |
73 | .video-miniature-tags { |
74 | // Fix for chrome when tags a long | |
75 | width: 201px; | |
00a44645 | 76 | |
0629423c C |
77 | .video-miniature-tag { |
78 | font-size: 13px; | |
79 | cursor: pointer; | |
80 | position: relative; | |
81 | top: -2px; | |
82 | ||
83 | .label { | |
84 | line-height: $line-height-base; | |
85 | transition: background-color 0.2s; | |
86 | } | |
00a44645 | 87 | } |
501bc6c2 C |
88 | } |
89 | } | |
90 | ||
897ec54d | 91 | .video-miniature-author, .video-miniature-created-at { |
501bc6c2 C |
92 | display: block; |
93 | margin-left: 1px; | |
383bfc83 C |
94 | font-size: 11px; |
95 | color: $video-miniature-other-infos; | |
0629423c | 96 | opacity: 0.9; |
00a44645 C |
97 | } |
98 | ||
99 | .video-miniature-author { | |
0629423c | 100 | transition: color 0.2s; |
00a44645 C |
101 | |
102 | &:hover { | |
0629423c | 103 | color: #23527c; |
00a44645 | 104 | text-decoration: none; |
00a44645 | 105 | } |
501bc6c2 C |
106 | } |
107 | } | |
108 | } |