]>
Commit | Line | Data |
---|---|---|
1 | @import "../../../sass/pre-customizations.scss"; | |
2 | ||
3 | .video-miniature { | |
4 | @media screen and (max-width: 400px) { | |
5 | padding: 0; | |
6 | } | |
7 | ||
8 | margin-top: 30px; | |
9 | display: inline-block; | |
10 | position: relative; | |
11 | min-width: 220px; | |
12 | ||
13 | .video-miniature-thumbnail { | |
14 | display: inline-block; | |
15 | position: relative; | |
16 | ||
17 | .video-miniature-duration { | |
18 | position: absolute; | |
19 | right: 5px; | |
20 | bottom: 2px; | |
21 | display: inline-block; | |
22 | background-color: rgba(0, 0, 0, 0.8); | |
23 | color: rgba(255, 255, 255, 0.8); | |
24 | padding: 2px; | |
25 | font-size: 11px; | |
26 | } | |
27 | } | |
28 | ||
29 | .video-miniature-remove { | |
30 | display: inline-block; | |
31 | position: absolute; | |
32 | left: 16px; | |
33 | background-color: rgba(0, 0, 0, 0.8); | |
34 | color: rgba(255, 255, 255, 0.8); | |
35 | padding: 2px; | |
36 | cursor: pointer; | |
37 | ||
38 | &:hover { | |
39 | color: rgba(255, 255, 255, 0.9); | |
40 | } | |
41 | } | |
42 | ||
43 | .video-miniature-informations { | |
44 | width: 200px; | |
45 | ||
46 | .video-miniature-name-tags { | |
47 | display: block; | |
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 | ||
64 | .video-miniature-tags { | |
65 | // Fix for chrome when tags a long | |
66 | width: 201px; | |
67 | ||
68 | .video-miniature-tag { | |
69 | font-size: 13px; | |
70 | cursor: pointer; | |
71 | position: relative; | |
72 | top: -2px; | |
73 | ||
74 | .label { | |
75 | line-height: $line-height-base; | |
76 | transition: background-color 0.2s; | |
77 | } | |
78 | } | |
79 | } | |
80 | } | |
81 | ||
82 | .video-miniature-author, .video-miniature-created-date { | |
83 | display: block; | |
84 | margin-left: 1px; | |
85 | font-size: 12px; | |
86 | color: #337ab7; | |
87 | opacity: 0.9; | |
88 | } | |
89 | ||
90 | .video-miniature-author { | |
91 | transition: color 0.2s; | |
92 | ||
93 | &:hover { | |
94 | color: #23527c; | |
95 | text-decoration: none; | |
96 | } | |
97 | } | |
98 | } | |
99 | } |