diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 10:02:01 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 10:02:01 +0100 |
commit | 7b272fd73f1ea67e83c1924f2cc33503b8759811 (patch) | |
tree | 5c171a051c25878bd8010eab0f3ed503efe0da1c /client/src/app/videos/+video-watch/video-watch.component.scss | |
parent | 41c3dfac99c41d2daec2a55554bb517ed5d59fc4 (diff) | |
download | PeerTube-7b272fd73f1ea67e83c1924f2cc33503b8759811.tar.gz PeerTube-7b272fd73f1ea67e83c1924f2cc33503b8759811.tar.zst PeerTube-7b272fd73f1ea67e83c1924f2cc33503b8759811.zip |
Fix dropdown menu in video watch
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.scss | 92 |
1 files changed, 64 insertions, 28 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index d7f47ed75..3f36410f4 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -6,6 +6,11 @@ | |||
6 | #video-element { | 6 | #video-element { |
7 | width: 888px; | 7 | width: 888px; |
8 | height: 500px; | 8 | height: 500px; |
9 | |||
10 | // VideoJS create an inner video player | ||
11 | video { | ||
12 | outline: 0; | ||
13 | } | ||
9 | } | 14 | } |
10 | } | 15 | } |
11 | 16 | ||
@@ -38,47 +43,78 @@ | |||
38 | .video-info-actions { | 43 | .video-info-actions { |
39 | .action-button { | 44 | .action-button { |
40 | @include peertube-button; | 45 | @include peertube-button; |
46 | @include grey-button; | ||
41 | 47 | ||
42 | font-size: 15px; | 48 | font-size: 15px; |
43 | font-weight: $font-semibold; | 49 | font-weight: $font-semibold; |
44 | color: #585858; | ||
45 | background-color: #E5E5E5; | ||
46 | display: inline-block; | 50 | display: inline-block; |
47 | padding: 0 10px 0 10px; | 51 | padding: 0 10px 0 10px; |
48 | 52 | ||
49 | &:hover { | 53 | .icon { |
50 | background-color: #EFEFEF; | 54 | display: inline-block; |
55 | background-repeat: no-repeat; | ||
56 | background-size: contain; | ||
57 | width: 21px; | ||
58 | height: 21px; | ||
59 | vertical-align: middle; | ||
60 | position: relative; | ||
61 | top: -2px; | ||
62 | |||
63 | &.icon-like { | ||
64 | background-image: url('../../../assets/images/video/like-grey.svg'); | ||
65 | } | ||
66 | |||
67 | &.icon-dislike { | ||
68 | background-image: url('../../../assets/images/video/dislike-grey.svg'); | ||
69 | } | ||
70 | |||
71 | &.icon-share { | ||
72 | background-image: url('../../../assets/images/video/share.svg'); | ||
73 | } | ||
74 | |||
75 | &.icon-more { | ||
76 | background-image: url('../../../assets/images/video/more.svg'); | ||
77 | } | ||
51 | } | 78 | } |
52 | } | ||
53 | 79 | ||
54 | .action-more { | 80 | &.activated { |
55 | display: inline-block; | 81 | @include orange-button; |
56 | } | ||
57 | 82 | ||
58 | .icon { | 83 | .icon-like { |
59 | display: inline-block; | 84 | background-image: url('../../../assets/images/video/like-white.svg'); |
60 | background-repeat: no-repeat; | 85 | } |
61 | background-size: contain; | ||
62 | width: 21px; | ||
63 | height: 21px; | ||
64 | vertical-align: middle; | ||
65 | position: relative; | ||
66 | top: -2px; | ||
67 | |||
68 | &.icon-like { | ||
69 | background-image: url('../../../assets/images/video/like.svg'); | ||
70 | } | ||
71 | 86 | ||
72 | &.icon-dislike { | 87 | .icon-dislike { |
73 | background-image: url('../../../assets/images/video/dislike.svg'); | 88 | background-image: url('../../../assets/images/video/dislike-white.svg'); |
89 | } | ||
74 | } | 90 | } |
91 | } | ||
75 | 92 | ||
76 | &.icon-share { | 93 | .action-more { |
77 | background-image: url('../../../assets/images/video/share.svg'); | 94 | display: inline-block; |
78 | } | ||
79 | 95 | ||
80 | &.icon-more { | 96 | .dropdown-menu .icon { |
81 | background-image: url('../../../assets/images/video/more.svg'); | 97 | display: inline-block; |
98 | background-repeat: no-repeat; | ||
99 | background-size: contain; | ||
100 | width: 21px; | ||
101 | height: 21px; | ||
102 | vertical-align: middle; | ||
103 | margin-right: 5px; | ||
104 | position: relative; | ||
105 | top: -1px; | ||
106 | |||
107 | &.icon-download { | ||
108 | background-image: url('../../../assets/images/video/download.svg'); | ||
109 | } | ||
110 | |||
111 | &.icon-alert { | ||
112 | background-image: url('../../../assets/images/video/alert.svg'); | ||
113 | } | ||
114 | |||
115 | &.icon-blacklist { | ||
116 | background-image: url('../../../assets/images/video/eye-closed.svg'); | ||
117 | } | ||
82 | } | 118 | } |
83 | } | 119 | } |
84 | } | 120 | } |