diff --git a/src/css/_icons.scss b/src/css/_icons.scss index 4a106b78af..e242ac1a42 100644 --- a/src/css/_icons.scss +++ b/src/css/_icons.scss @@ -12,8 +12,8 @@ background-position: center; fill: #FFFFFF; - height: 1.5em; - width: 1.5em; + height: 1.8em; + width: 1.8em; // Overwrite any font content &:before { diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss index 4e81900932..4818bca573 100644 --- a/src/css/components/_big-play.scss +++ b/src/css/components/_big-play.scss @@ -31,8 +31,13 @@ } .vjs-big-play-button .vjs-svg-icon { - width: 0.75em; - height: 0.75em; + width: 1em; + height: 1em; + position: absolute; + top: 50%; + left: 50%; + line-height: 1; + transform: translate(-50%, -50%); } .video-js:hover .vjs-big-play-button, diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss index abc54329ad..e1c1851009 100644 --- a/src/css/components/_progress.scss +++ b/src/css/components/_progress.scss @@ -91,8 +91,8 @@ position: absolute; top: -0.35em; right: -0.4em; - width: 1em; - height: 1em; + width: 0.9em; + height: 0.9em; pointer-events: none; line-height: 0.15em; z-index: 1; @@ -138,15 +138,6 @@ z-index: 1; } -// Update the size of the progress circle when using SVG icons -.vjs-progress-control:hover .vjs-progress-holder .vjs-play-progress .vjs-svg-icon { - width: 0.8em; - height: 0.8em; - top: -0.25em; - right: -0.5em; - line-height: 0.35em; -} - .video-js .vjs-progress-holder:focus .vjs-time-tooltip { display: none; } diff --git a/src/css/components/_subs-caps.scss b/src/css/components/_subs-caps.scss index 878ed8af27..e22a59d2de 100644 --- a/src/css/components/_subs-caps.scss +++ b/src/css/components/_subs-caps.scss @@ -15,7 +15,8 @@ } .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon { - margin-left: 0.3em; + width: 1.5em; + height: 1.5em; } .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder { diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss index da3019c0ab..904ec90a07 100644 --- a/src/css/components/_volume.scss +++ b/src/css/components/_volume.scss @@ -143,17 +143,10 @@ .vjs-volume-level .vjs-svg-icon { position: absolute; - width: 0.6em; - height: 0.6em; - top: -0.55em; + width: 0.9em; + height: 0.9em; pointer-events: none; -} - -// Due to this icon from Material UI being a bit smaller than the others, -// we will adjust the height and width -.vjs-mute-control .vjs-svg-icon { - width: 1.75em; - height: 1.75em; + z-index: 1; } .vjs-slider-horizontal .vjs-volume-level { @@ -169,13 +162,12 @@ // here // Update placement of circle icon when using SVG icons .vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon { - top: -0.15em; right: -0.3em; - line-height: 0.05em; + transform: translateY(-50%); } .vjs-slider-vertical .vjs-volume-level .vjs-svg-icon { - top: -0.9em; - right: -0.15em; + top: -0.55em; + transform: translateX(-50%); } .video-js .vjs-volume-panel.vjs-volume-panel-vertical { diff --git a/src/images/icons.svg b/src/images/icons.svg index 8587c6f5f4..88eed01996 100644 --- a/src/images/icons.svg +++ b/src/images/icons.svg @@ -1,142 +1,143 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - + - + - + - + - + - + - - + + - - + + - - + + - - + + - - + + - - + + - + + - - + + - - + + - - + + - - + + - - + +