diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-01-02 13:07:18 +0100 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-01-02 14:50:14 +0100 |
commit | 29128b2f5ce00093ad81b4b72daae0e3444fd5a8 (patch) | |
tree | f1a90ead86c16892255e2c661da3eed5f302a260 /client/src/app/shared/video/video-thumbnail.component.scss | |
parent | cca1e13b96799377f19bcc95110fbf76ff741e20 (diff) | |
download | PeerTube-29128b2f5ce00093ad81b4b72daae0e3444fd5a8.tar.gz PeerTube-29128b2f5ce00093ad81b4b72daae0e3444fd5a8.tar.zst PeerTube-29128b2f5ce00093ad81b4b72daae0e3444fd5a8.zip |
Add miniature quick actions to add video to Watch later playlist
Diffstat (limited to 'client/src/app/shared/video/video-thumbnail.component.scss')
-rw-r--r-- | client/src/app/shared/video/video-thumbnail.component.scss | 42 |
1 files changed, 38 insertions, 4 deletions
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss index e48629778..aac50fd1b 100644 --- a/client/src/app/shared/video/video-thumbnail.component.scss +++ b/client/src/app/shared/video/video-thumbnail.component.scss | |||
@@ -18,16 +18,50 @@ | |||
18 | } | 18 | } |
19 | } | 19 | } |
20 | 20 | ||
21 | .video-thumbnail-watch-later-overlay, | ||
21 | .video-thumbnail-duration-overlay { | 22 | .video-thumbnail-duration-overlay { |
22 | @include static-thumbnail-overlay; | 23 | @include static-thumbnail-overlay; |
23 | 24 | ||
24 | position: absolute; | ||
25 | right: 5px; | ||
26 | bottom: 5px; | ||
27 | padding: 0 5px; | ||
28 | border-radius: 3px; | 25 | border-radius: 3px; |
29 | font-size: 12px; | 26 | font-size: 12px; |
30 | font-weight: $font-bold; | 27 | font-weight: $font-bold; |
31 | z-index: 1; | 28 | z-index: 1; |
32 | } | 29 | } |
30 | |||
31 | .video-thumbnail-duration-overlay { | ||
32 | position: absolute; | ||
33 | padding: 0 5px; | ||
34 | right: 5px; | ||
35 | bottom: 5px; | ||
36 | } | ||
37 | |||
38 | &:hover { | ||
39 | .video-thumbnail-actions-overlay { | ||
40 | opacity: 1; | ||
41 | } | ||
42 | } | ||
43 | |||
44 | .video-thumbnail-actions-overlay { | ||
45 | position: absolute; | ||
46 | display: flex; | ||
47 | flex-direction: column; | ||
48 | right: 5px; | ||
49 | top: 5px; | ||
50 | opacity: 0; | ||
51 | |||
52 | div:not(:first-child) { | ||
53 | margin-top: 2px; | ||
54 | } | ||
55 | |||
56 | .video-thumbnail-watch-later-overlay { | ||
57 | padding: 3px; | ||
58 | |||
59 | my-global-icon { | ||
60 | width: 22px; | ||
61 | height: 22px; | ||
62 | |||
63 | @include apply-svg-color(#fff); | ||
64 | } | ||
65 | } | ||
66 | } | ||
33 | } | 67 | } |