diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-01 14:46:22 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-01 14:46:22 +0100 |
commit | 9bf9d2a5c223bf006496ae7adf0c0bd7a7975108 (patch) | |
tree | 7e72814af43176ad96841046a9310af001d23a14 /client/src/app/videos/video-list/shared/video-miniature.component.scss | |
parent | 26c6ee80d0fecfce595e8970f15717560b4f4ceb (diff) | |
download | PeerTube-9bf9d2a5c223bf006496ae7adf0c0bd7a7975108.tar.gz PeerTube-9bf9d2a5c223bf006496ae7adf0c0bd7a7975108.tar.zst PeerTube-9bf9d2a5c223bf006496ae7adf0c0bd7a7975108.zip |
Begin videos list new design
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.scss | 66 |
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 | } |