diff options
author | Chocobozzz <me@florianbigard.com> | 2019-04-03 16:17:41 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-04-03 16:17:41 +0200 |
commit | e2409062dedf8856c56ef1bdc98ca623e21c4f3b (patch) | |
tree | c86f7fcbffdaa610bbadb5a4f9abf28d2acd0cdc /client/src/app/shared/video/video-miniature.component.scss | |
parent | 8fc02e476869276d35759d19248ddfe7f84ec09c (diff) | |
download | PeerTube-e2409062dedf8856c56ef1bdc98ca623e21c4f3b.tar.gz PeerTube-e2409062dedf8856c56ef1bdc98ca623e21c4f3b.tar.zst PeerTube-e2409062dedf8856c56ef1bdc98ca623e21c4f3b.zip |
Refactor video miniatures
Diffstat (limited to 'client/src/app/shared/video/video-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/video/video-miniature.component.scss | 68 |
1 files changed, 65 insertions, 3 deletions
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index 4799e00c2..fdc3dc033 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss | |||
@@ -4,15 +4,14 @@ | |||
4 | 4 | ||
5 | .video-miniature { | 5 | .video-miniature { |
6 | width: $video-miniature-width; | 6 | width: $video-miniature-width; |
7 | 7 | display: inline-flex; | |
8 | display: inline-block; | 8 | flex-direction: column; |
9 | margin-bottom: 30px; | 9 | margin-bottom: 30px; |
10 | height: 195px; | 10 | height: 195px; |
11 | vertical-align: top; | 11 | vertical-align: top; |
12 | 12 | ||
13 | .video-miniature-information { | 13 | .video-miniature-information { |
14 | width: 200px; | 14 | width: 200px; |
15 | margin-top: 2px; | ||
16 | line-height: normal; | 15 | line-height: normal; |
17 | 16 | ||
18 | .video-miniature-name { | 17 | .video-miniature-name { |
@@ -37,5 +36,68 @@ | |||
37 | color: $grey-foreground-hover-color; | 36 | color: $grey-foreground-hover-color; |
38 | } | 37 | } |
39 | } | 38 | } |
39 | |||
40 | .video-info-privacy, | ||
41 | .video-info-blacklisted .blacklisted-label, | ||
42 | .video-info-nsfw { | ||
43 | font-weight: $font-semibold; | ||
44 | } | ||
45 | |||
46 | .video-info-blacklisted { | ||
47 | color: red; | ||
48 | |||
49 | .blacklisted-reason::before { | ||
50 | content: ' - '; | ||
51 | } | ||
52 | } | ||
53 | |||
54 | .video-info-nsfw { | ||
55 | color: red; | ||
56 | } | ||
57 | } | ||
58 | |||
59 | &.display-as-row { | ||
60 | flex-direction: row; | ||
61 | margin-bottom: 0; | ||
62 | height: auto; | ||
63 | width: 100%; | ||
64 | |||
65 | my-video-thumbnail { | ||
66 | margin-right: 10px; | ||
67 | } | ||
68 | |||
69 | .video-miniature-information { | ||
70 | width: auto; | ||
71 | |||
72 | .video-miniature-name { | ||
73 | @include ellipsis-multiline(1.3em, 2); | ||
74 | |||
75 | margin-top: 2px; | ||
76 | margin-bottom: 5px; | ||
77 | } | ||
78 | |||
79 | .video-miniature-created-at-views, | ||
80 | .video-miniature-account, | ||
81 | .video-miniature-channel { | ||
82 | font-size: 14px; | ||
83 | } | ||
84 | |||
85 | .video-info-privacy { | ||
86 | margin-top: 5px; | ||
87 | } | ||
88 | |||
89 | .video-info-blacklisted { | ||
90 | margin-top: 3px; | ||
91 | } | ||
92 | } | ||
93 | |||
94 | @media screen and (max-width: $small-view) { | ||
95 | flex-direction: column; | ||
96 | height: auto; | ||
97 | |||
98 | my-video-thumbnail { | ||
99 | margin-right: 0; | ||
100 | } | ||
101 | } | ||
40 | } | 102 | } |
41 | } | 103 | } |