web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-07-01 00:54:52 +02:00
Code Releases Activity

fix(big-play-button): component customization

Browse Source 
Allows to easily change the visual aspect of the component without having to adjust the positioning.

- remove `margin` top/left used to center the component
- add `translate` x/y to center the component regardless of its size
- remove the `line-height` used to center the play `icon`
- add display `flex` to center of pseudo-elements
- keep `height` at 100% to fill the parent as before
This commit is contained in:
amtins
2023-08-12 19:57:01 +02:00
parent 3e9ef0ace2
commit bc034bb9f3
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/css/components/_big-play.scss
View File

@ -1,8 +1,5 @@
@use "sass:math";
.video-js .vjs-big-play-button { .video-js .vjs-big-play-button {
font-size: 3em; font-size: 3em;
line-height: $big-play-button--line-height;
height: $big-play-button--height; height: $big-play-button--height;
width: $big-play-button--width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding. width: $big-play-button--width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding.
display: block; display: block;
@ -10,11 +7,10 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
padding: 0; padding: 0;
margin-top: -(math.div($big-play-button--height, 2));
margin-left: -(math.div($big-play-button--width, 2));
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
border: $big-play-button--border-size solid $primary-foreground-color; border: $big-play-button--border-size solid $primary-foreground-color;
transform: translate(-50%, -50%);
// Need a slightly gray bg so it can be seen on black backgrounds // Need a slightly gray bg so it can be seen on black backgrounds
@include background-color-with-alpha($primary-background-color, $primary-background-transparency); @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
@ -26,7 +22,10 @@
& .vjs-icon-placeholder:before { & .vjs-icon-placeholder:before {
@extend .vjs-icon-play; @extend .vjs-icon-play;
@extend %icon-default; height: 100%;
display: flex;
justify-content: center;
align-items: center;
} }
} }