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