diff options
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 | 255 |
1 files changed, 141 insertions, 114 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 7ebdfc0c4..d963f713d 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -39,149 +39,156 @@ | |||
39 | flex-grow: 1; | 39 | flex-grow: 1; |
40 | margin-right: 28px; | 40 | margin-right: 28px; |
41 | 41 | ||
42 | .video-info-name-actions { | 42 | .video-info-first-row { |
43 | display: flex; | 43 | display: flex; |
44 | align-items: center; | 44 | |
45 | & > div { | ||
46 | flex-grow: 1; | ||
47 | } | ||
45 | 48 | ||
46 | .video-info-name { | 49 | .video-info-name { |
47 | margin-right: 30px; | 50 | margin-right: 30px; |
51 | height: 40px; // Align with the action buttons | ||
48 | font-size: 27px; | 52 | font-size: 27px; |
49 | font-weight: $font-semibold; | 53 | font-weight: $font-semibold; |
50 | flex-grow: 1; | 54 | flex-grow: 1; |
51 | } | 55 | } |
52 | 56 | ||
53 | .video-info-actions { | 57 | .video-info-date-views { |
54 | min-width: 215px; | 58 | font-size: 16px; |
59 | margin-bottom: 10px; | ||
60 | flex-grow: 1; | ||
61 | } | ||
62 | |||
63 | .video-info-channel { | ||
64 | font-weight: $font-semibold; | ||
65 | font-size: 15px; | ||
66 | } | ||
67 | |||
68 | .video-info-by { | ||
55 | display: flex; | 69 | display: flex; |
56 | justify-content: end; | 70 | align-items: center; |
71 | font-size: 13px; | ||
72 | |||
73 | img { | ||
74 | @include avatar(18px); | ||
57 | 75 | ||
58 | .action-button:not(:first-child), .action-more { | 76 | margin-left: 7px; |
59 | margin-left: 10px; | ||
60 | } | 77 | } |
78 | } | ||
61 | 79 | ||
62 | .action-button { | 80 | .video-actions-rates { |
63 | @include peertube-button; | 81 | display: flex; |
64 | @include grey-button; | 82 | flex-direction: column; |
83 | align-items: end; | ||
65 | 84 | ||
66 | font-size: 15px; | 85 | .video-actions { |
67 | font-weight: $font-semibold; | 86 | height: 40px; // Align with the title |
68 | display: inline-block; | 87 | min-width: 215px; |
69 | padding: 0 10px 0 10px; | 88 | display: flex; |
89 | align-items: center; | ||
70 | 90 | ||
71 | .icon { | 91 | .action-button:not(:first-child), .action-more { |
72 | @include icon(21px); | 92 | margin-left: 10px; |
93 | } | ||
73 | 94 | ||
74 | position: relative; | 95 | .action-button { |
75 | top: -2px; | 96 | @include peertube-button; |
97 | @include grey-button; | ||
76 | 98 | ||
77 | &.icon-like { | 99 | font-size: 15px; |
78 | background-image: url('../../../assets/images/video/like-grey.svg'); | 100 | font-weight: $font-semibold; |
79 | } | 101 | display: inline-block; |
102 | padding: 0 10px 0 10px; | ||
80 | 103 | ||
81 | &.icon-dislike { | 104 | .icon { |
82 | background-image: url('../../../assets/images/video/dislike-grey.svg'); | 105 | @include icon(21px); |
83 | } | ||
84 | 106 | ||
85 | &.icon-share { | 107 | position: relative; |
86 | background-image: url('../../../assets/images/video/share.svg'); | 108 | top: -2px; |
87 | } | 109 | |
110 | &.icon-like { | ||
111 | background-image: url('../../../assets/images/video/like-grey.svg'); | ||
112 | } | ||
113 | |||
114 | &.icon-dislike { | ||
115 | background-image: url('../../../assets/images/video/dislike-grey.svg'); | ||
116 | } | ||
88 | 117 | ||
89 | &.icon-more { | 118 | &.icon-share { |
90 | background-image: url('../../../assets/images/video/more.svg'); | 119 | background-image: url('../../../assets/images/video/share.svg'); |
91 | top: -1px; | 120 | } |
121 | |||
122 | &.icon-more { | ||
123 | background-image: url('../../../assets/images/video/more.svg'); | ||
124 | top: -1px; | ||
125 | } | ||
92 | } | 126 | } |
93 | } | ||
94 | 127 | ||
95 | &.action-button-like.activated { | 128 | &.action-button-like.activated { |
96 | background-color: #39CC0B; | 129 | background-color: #39CC0B; |
97 | 130 | ||
98 | .icon-like { | 131 | .icon-like { |
99 | background-image: url('../../../assets/images/video/like-white.svg'); | 132 | background-image: url('../../../assets/images/video/like-white.svg'); |
133 | } | ||
100 | } | 134 | } |
101 | } | ||
102 | 135 | ||
103 | &.action-button-dislike.activated { | 136 | &.action-button-dislike.activated { |
104 | background-color: #FF0000; | 137 | background-color: #FF0000; |
105 | 138 | ||
106 | .icon-dislike { | 139 | .icon-dislike { |
107 | background-image: url('../../../assets/images/video/dislike-white.svg'); | 140 | background-image: url('../../../assets/images/video/dislike-white.svg'); |
141 | } | ||
108 | } | 142 | } |
109 | } | 143 | } |
110 | } | ||
111 | 144 | ||
112 | .action-more { | 145 | .action-more { |
113 | display: inline-block; | 146 | display: inline-block; |
114 | 147 | ||
115 | .dropdown-menu .dropdown-item { | 148 | .dropdown-menu .dropdown-item { |
116 | padding: 6px 24px; | 149 | padding: 6px 24px; |
117 | 150 | ||
118 | .icon { | 151 | .icon { |
119 | @include icon(24px); | 152 | @include icon(24px); |
120 | 153 | ||
121 | margin-right: 10px; | 154 | margin-right: 10px; |
122 | position: relative; | 155 | position: relative; |
123 | top: -1px; | 156 | top: -1px; |
124 | 157 | ||
125 | &.icon-download { | 158 | &.icon-download { |
126 | background-image: url('../../../assets/images/video/download-black.svg'); | 159 | background-image: url('../../../assets/images/video/download-black.svg'); |
127 | } | 160 | } |
128 | 161 | ||
129 | &.icon-edit { | 162 | &.icon-edit { |
130 | background-image: url('../../../assets/images/global/edit-black.svg'); | 163 | background-image: url('../../../assets/images/global/edit-black.svg'); |
131 | } | 164 | } |
132 | 165 | ||
133 | &.icon-alert { | 166 | &.icon-alert { |
134 | background-image: url('../../../assets/images/video/alert.svg'); | 167 | background-image: url('../../../assets/images/video/alert.svg'); |
135 | } | 168 | } |
136 | 169 | ||
137 | &.icon-blacklist { | 170 | &.icon-blacklist { |
138 | background-image: url('../../../assets/images/video/blacklist.svg'); | 171 | background-image: url('../../../assets/images/video/blacklist.svg'); |
172 | } | ||
139 | } | 173 | } |
140 | } | 174 | } |
141 | } | 175 | } |
142 | } | 176 | } |
143 | } | ||
144 | } | ||
145 | |||
146 | .video-info-date-views-bar { | ||
147 | display: flex; | ||
148 | 177 | ||
149 | .video-info-date-views { | 178 | .video-info-likes-dislikes-bar { |
150 | font-size: 16px; | 179 | height: 5px; |
151 | margin-bottom: 10px; | 180 | width: 186px; |
152 | flex-grow: 1; | 181 | background-color: #E5E5E5; |
153 | } | 182 | margin-top: 25px; |
154 | |||
155 | .video-info-likes-dislikes-bar { | ||
156 | height: 5px; | ||
157 | width: 186px; | ||
158 | background-color: #E5E5E5; | ||
159 | margin-top: 25px; | ||
160 | 183 | ||
161 | .likes-bar { | 184 | .likes-bar { |
162 | height: 100%; | 185 | height: 100%; |
163 | background-color: #39CC0B; | 186 | background-color: #39CC0B; |
187 | } | ||
164 | } | 188 | } |
165 | } | 189 | } |
166 | } | 190 | } |
167 | 191 | ||
168 | .video-info-channel { | ||
169 | font-weight: $font-semibold; | ||
170 | font-size: 15px; | ||
171 | } | ||
172 | |||
173 | .video-info-by { | ||
174 | display: flex; | ||
175 | align-items: center; | ||
176 | font-size: 13px; | ||
177 | |||
178 | img { | ||
179 | @include avatar(18px); | ||
180 | |||
181 | margin-left: 7px; | ||
182 | } | ||
183 | } | ||
184 | |||
185 | .video-info-description { | 192 | .video-info-description { |
186 | margin: 20px 0; | 193 | margin: 20px 0; |
187 | font-size: 15px; | 194 | font-size: 15px; |
@@ -203,18 +210,16 @@ | |||
203 | } | 210 | } |
204 | } | 211 | } |
205 | 212 | ||
206 | .video-attributes { | 213 | .video-attributes .video-attribute { |
207 | .video-attribute { | 214 | font-size: 13px; |
208 | font-size: 13px; | 215 | display: block; |
209 | display: block; | 216 | margin-bottom: 12px; |
210 | margin-bottom: 12px; | 217 | |
211 | 218 | .video-attribute-label { | |
212 | .video-attribute-label { | 219 | width: 86px; |
213 | width: 86px; | 220 | display: inline-block; |
214 | display: inline-block; | 221 | color: #585858; |
215 | color: #585858; | 222 | font-weight: $font-bold; |
216 | font-weight: $font-bold; | ||
217 | } | ||
218 | } | 223 | } |
219 | } | 224 | } |
220 | } | 225 | } |
@@ -246,14 +251,21 @@ | |||
246 | .video-info { | 251 | .video-info { |
247 | margin-right: 0; | 252 | margin-right: 0; |
248 | 253 | ||
249 | .video-info-name-actions { | 254 | .video-info-first-row { |
250 | align-items: left; | ||
251 | flex-direction: column; | 255 | flex-direction: column; |
252 | margin-bottom: 30px; | 256 | margin-bottom: 30px; |
257 | |||
258 | .video-actions-rates { | ||
259 | margin-top: 20px; | ||
260 | align-items: left; | ||
261 | |||
262 | .video-info-likes-dislikes-bar { | ||
263 | margin-top: 10px; | ||
264 | } | ||
265 | } | ||
253 | } | 266 | } |
254 | 267 | ||
255 | .video-info-date-views-bar { | 268 | .video-info-date-views { |
256 | align-items: left; | ||
257 | flex-direction: column; | 269 | flex-direction: column; |
258 | margin-bottom: 30px; | 270 | margin-bottom: 30px; |
259 | 271 | ||
@@ -261,12 +273,27 @@ | |||
261 | margin-top: 0; | 273 | margin-top: 0; |
262 | } | 274 | } |
263 | } | 275 | } |
276 | |||
277 | .video-attributes .video-attribute { | ||
278 | margin-bottom: 5px; | ||
279 | } | ||
264 | } | 280 | } |
265 | } | 281 | } |
266 | } | 282 | } |
267 | 283 | ||
268 | @media screen and (max-width: 800px) { | 284 | @media screen and (max-width: 600px) { |
269 | .video-bottom { | 285 | .video-bottom { |
270 | margin: 20px 0 0 0; | 286 | margin: 20px 0 0 0; |
287 | |||
288 | .video-info { | ||
289 | |||
290 | .video-info-first-row { | ||
291 | |||
292 | .video-info-name { | ||
293 | font-size: 20px; | ||
294 | height: auto; | ||
295 | } | ||
296 | } | ||
297 | } | ||
271 | } | 298 | } |
272 | } | 299 | } |