diff options
Diffstat (limited to 'client/src/app/videos/video-list/video-miniature.component.scss')
-rw-r--r-- | client/src/app/videos/video-list/video-miniature.component.scss | 61 |
1 files changed, 34 insertions, 27 deletions
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss index f88ced819..1a73648c4 100644 --- a/client/src/app/videos/video-list/video-miniature.component.scss +++ b/client/src/app/videos/video-list/video-miniature.component.scss | |||
@@ -1,15 +1,11 @@ | |||
1 | @import "../../../sass/pre-customizations.scss"; | 1 | @import "../../../sass/pre-customizations.scss"; |
2 | 2 | ||
3 | .video-miniature { | 3 | .video-miniature { |
4 | @media screen and (max-width: 400px) { | ||
5 | padding: 0; | ||
6 | } | ||
7 | |||
8 | margin-top: 30px; | 4 | margin-top: 30px; |
9 | display: inline-block; | 5 | display: inline-block; |
10 | position: relative; | 6 | position: relative; |
11 | min-width: 220px; | ||
12 | height: 190px; | 7 | height: 190px; |
8 | width: 220px; | ||
13 | 9 | ||
14 | .video-miniature-thumbnail { | 10 | .video-miniature-thumbnail { |
15 | display: inline-block; | 11 | display: inline-block; |
@@ -30,37 +26,48 @@ | |||
30 | height: 110px; | 26 | height: 110px; |
31 | } | 27 | } |
32 | 28 | ||
33 | .video-miniature-duration { | 29 | img, .thumbnail-nsfw { |
30 | border-radius: 3px; | ||
31 | } | ||
32 | |||
33 | .video-miniature-thumbnail-overlay { | ||
34 | position: absolute; | 34 | position: absolute; |
35 | right: 5px; | 35 | right: 0px; |
36 | bottom: 2px; | 36 | bottom: 0px; |
37 | display: inline-block; | 37 | display: inline-block; |
38 | background-color: rgba(0, 0, 0, 0.8); | 38 | background-color: rgba(0, 0, 0, 0.7); |
39 | color: rgba(255, 255, 255, 0.8); | 39 | color: #fff; |
40 | padding: 2px; | 40 | padding: 3px 5px; |
41 | font-size: 11px; | 41 | font-size: 11px; |
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 | } | ||
42 | } | 52 | } |
43 | } | 53 | } |
44 | 54 | ||
45 | .video-miniature-informations { | 55 | .video-miniature-informations { |
46 | width: 200px; | 56 | width: 200px; |
47 | 57 | ||
48 | .video-miniature-name-tags { | 58 | .video-miniature-name { |
59 | height: 23px; | ||
49 | display: block; | 60 | display: block; |
61 | overflow: hidden; | ||
62 | text-overflow: ellipsis; | ||
63 | white-space: nowrap; | ||
64 | font-weight: bold; | ||
65 | transition: color 0.2s; | ||
66 | font-size: 15px; | ||
67 | color: $video-miniature-title-color; | ||
50 | 68 | ||
51 | .video-miniature-name { | 69 | &:hover { |
52 | height: 23px; | 70 | text-decoration: none; |
53 | display: block; | ||
54 | overflow: hidden; | ||
55 | text-overflow: ellipsis; | ||
56 | white-space: nowrap; | ||
57 | font-weight: bold; | ||
58 | transition: color 0.2s; | ||
59 | font-size: 15px; | ||
60 | |||
61 | &:hover { | ||
62 | text-decoration: none; | ||
63 | } | ||
64 | } | 71 | } |
65 | 72 | ||
66 | .video-miniature-tags { | 73 | .video-miniature-tags { |
@@ -84,8 +91,8 @@ | |||
84 | .video-miniature-author, .video-miniature-views-created-at { | 91 | .video-miniature-author, .video-miniature-views-created-at { |
85 | display: block; | 92 | display: block; |
86 | margin-left: 1px; | 93 | margin-left: 1px; |
87 | font-size: 12px; | 94 | font-size: 11px; |
88 | color: #337ab7; | 95 | color: $video-miniature-other-infos; |
89 | opacity: 0.9; | 96 | opacity: 0.9; |
90 | 97 | ||
91 | .video-miniature-created-at::before { | 98 | .video-miniature-created-at::before { |