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