diff options
Diffstat (limited to 'client/src/sass')
-rw-r--r-- | client/src/sass/player/peertube-skin.scss | 41 |
1 files changed, 31 insertions, 10 deletions
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index 8230681f6..e80853861 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss | |||
@@ -223,7 +223,8 @@ body { | |||
223 | 223 | ||
224 | cursor: pointer; | 224 | cursor: pointer; |
225 | font-size: $font-size; | 225 | font-size: $font-size; |
226 | margin-right: 5px; | 226 | margin-left: 1em; |
227 | width: 3em; | ||
227 | } | 228 | } |
228 | 229 | ||
229 | .vjs-time-control { | 230 | .vjs-time-control { |
@@ -233,6 +234,7 @@ body { | |||
233 | font-size: $font-size; | 234 | font-size: $font-size; |
234 | display: inline-block; | 235 | display: inline-block; |
235 | padding: 0; | 236 | padding: 0; |
237 | margin-left: .5em; | ||
236 | 238 | ||
237 | .vjs-current-time-display { | 239 | .vjs-current-time-display { |
238 | line-height: calc(#{$control-bar-height} + 1px); | 240 | line-height: calc(#{$control-bar-height} + 1px); |
@@ -262,6 +264,7 @@ body { | |||
262 | width: 100%; | 264 | width: 100%; |
263 | line-height: $control-bar-height; | 265 | line-height: $control-bar-height; |
264 | text-align: right; | 266 | text-align: right; |
267 | margin-right: 6px; | ||
265 | 268 | ||
266 | .vjs-peertube-displayed { | 269 | .vjs-peertube-displayed { |
267 | display: block; | 270 | display: block; |
@@ -280,23 +283,41 @@ body { | |||
280 | } | 283 | } |
281 | 284 | ||
282 | .icon { | 285 | .icon { |
286 | &.icon-download { | ||
287 | background-image: url('#{$assets-path}/player/images/arrow-down.svg'); | ||
288 | } | ||
289 | |||
290 | &.icon-upload { | ||
291 | background-image: url('#{$assets-path}/player/images/arrow-up.svg'); | ||
292 | } | ||
293 | } | ||
294 | } | ||
295 | |||
296 | .vjs-next-video { | ||
297 | line-height: $control-bar-height; | ||
298 | text-align: right; | ||
299 | |||
300 | .icon { | ||
301 | &.icon-next { | ||
302 | mask-image: url('#{$assets-path}/player/images/next.svg'); | ||
303 | background-color: white; | ||
304 | mask-size: cover; | ||
305 | transform: scale(2.2); | ||
306 | } | ||
307 | } | ||
308 | } | ||
309 | |||
310 | .vjs-peertube, | ||
311 | .vjs-next-video { | ||
312 | .icon { | ||
283 | display: inline-block; | 313 | display: inline-block; |
284 | width: 15px; | 314 | width: 15px; |
285 | height: 15px; | 315 | height: 15px; |
286 | background-size: contain; | 316 | background-size: contain; |
287 | vertical-align: middle; | 317 | vertical-align: middle; |
288 | background-repeat: no-repeat; | 318 | background-repeat: no-repeat; |
289 | margin-right: 6px; | ||
290 | position: relative; | 319 | position: relative; |
291 | top: -1px; | 320 | top: -1px; |
292 | |||
293 | &.icon-download { | ||
294 | background-image: url('#{$assets-path}/player/images/arrow-down.svg'); | ||
295 | } | ||
296 | |||
297 | &.icon-upload { | ||
298 | background-image: url('#{$assets-path}/player/images/arrow-up.svg'); | ||
299 | } | ||
300 | } | 321 | } |
301 | } | 322 | } |
302 | 323 | ||