aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-list/shared/video-miniature.component.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/video-list/shared/video-miniature.component.scss')
-rw-r--r--client/src/app/videos/video-list/shared/video-miniature.component.scss66
1 files changed, 19 insertions, 47 deletions
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss
index 507ace098..ed15864d9 100644
--- a/client/src/app/videos/video-list/shared/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss
@@ -1,14 +1,14 @@
1.video-miniature { 1.video-miniature {
2 margin: 15px 10px;
3 display: inline-block; 2 display: inline-block;
4 position: relative; 3 padding-right: 15px;
5 height: 190px; 4 margin-bottom: 30px;
5 height: 175px;
6 vertical-align: top; 6 vertical-align: top;
7 7
8 .video-miniature-thumbnail { 8 .video-miniature-thumbnail {
9 display: inline-block; 9 display: inline-block;
10 position: relative; 10 position: relative;
11 border-radius: 3px; 11 border-radius: 4px;
12 overflow: hidden; 12 overflow: hidden;
13 13
14 &:hover { 14 &:hover {
@@ -22,38 +22,33 @@
22 22
23 .video-miniature-thumbnail-overlay { 23 .video-miniature-thumbnail-overlay {
24 position: absolute; 24 position: absolute;
25 right: 0px; 25 right: 5px;
26 bottom: 0px; 26 bottom: 5px;
27 display: inline-block; 27 display: inline-block;
28 background-color: rgba(0, 0, 0, 0.7); 28 background-color: rgba(0, 0, 0, 0.7);
29 color: #fff; 29 color: #fff;
30 padding: 3px 5px; 30 font-size: 12px;
31 font-size: 11px; 31 font-weight: $font-bold;
32 font-weight: bold; 32 border-radius: 3px;
33 width: 100%; 33 padding: 0 5px;
34
35 .video-miniature-thumbnail-overlay-views {
36
37 }
38
39 .video-miniature-thumbnail-overlay-duration {
40 float: right;
41 }
42 } 34 }
43 } 35 }
44 36
45 .video-miniature-information { 37 .video-miniature-information {
46 width: 200px; 38 width: 200px;
39 margin-top: 2px;
40 line-height: normal;
47 41
48 .video-miniature-name { 42 .video-miniature-name {
49 height: 23px;
50 display: block; 43 display: block;
51 overflow: hidden; 44 overflow: hidden;
52 text-overflow: ellipsis; 45 text-overflow: ellipsis;
53 white-space: nowrap; 46 white-space: nowrap;
54 font-weight: bold; 47 font-weight: bold;
55 transition: color 0.2s; 48 transition: color 0.2s;
56 font-size: 15px; 49 font-size: 16px;
50 font-weight: $font-semibold;
51 color: #000;
57 52
58 &:hover { 53 &:hover {
59 text-decoration: none; 54 text-decoration: none;
@@ -63,39 +58,16 @@
63 filter: blur(3px); 58 filter: blur(3px);
64 padding-left: 4px; 59 padding-left: 4px;
65 } 60 }
66
67 .video-miniature-tags {
68 // Fix for chrome when tags are long
69 width: 201px;
70
71 .video-miniature-tag {
72 font-size: 13px;
73 cursor: pointer;
74 position: relative;
75 top: -2px;
76
77 .label {
78 transition: background-color 0.2s;
79 }
80 }
81 }
82 } 61 }
83 62
84 .video-miniature-account, .video-miniature-created-at { 63 .video-miniature-created-at-views {
85 display: block; 64 display: block;
86 margin-left: 1px; 65 font-size: 13px;
87 font-size: 11px;
88 color: $video-miniature-other-infos;
89 opacity: 0.9;
90 } 66 }
91 67
92 .video-miniature-account { 68 .video-miniature-account {
93 transition: color 0.2s; 69 font-size: 12px;
94 70 color: #585858;
95 &:hover {
96 color: #23527c;
97 text-decoration: none;
98 }
99 } 71 }
100 } 72 }
101} 73}