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