From d0408812dfb19b3e122b8c3364933ded7e21cee0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <34163393+amtins@users.noreply.github.com> Date: Thu, 17 Aug 2023 21:30:23 +0200 Subject: [PATCH] fix(svg-icons): icon size consistency (#8380) * fix(svg-icons): icon size consistency The icons have been regenerated from the svg files in `videojs/font` to ensure consistency in size. - update icons.svg file * fix(svg-icons): default height and width in css Uses the same reference value from the font size of `font icons` to define the default height and width of `svg icons` * fix(big-play-button): default height and width of svg icon Uses the same size as the big-play-button font size and centers the svg icon * fix(volume-control): default height and width of svg icon Uses the same size as the `volume-level` font size and centers the svg icon for both horizontal and vertical display * fix(volume-control): mouse-display overlaps the volume-level svg icon * fix(play-progress): default height and width of svg icon Uses the same size as the `play-progress` font size and removes the hover effect * fix(subtitles-button): default height and width of svg icon Uses the same size as the `subtitles button` font size --- src/css/_icons.scss | 4 +- src/css/components/_big-play.scss | 9 +- src/css/components/_progress.scss | 13 +-- src/css/components/_subs-caps.scss | 3 +- src/css/components/_volume.scss | 20 +--- src/images/icons.svg | 169 +++++++++++++++-------------- 6 files changed, 104 insertions(+), 114 deletions(-) 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 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - + - + - + - + - + - + - - + + - - + + - - + + - - + + - - + + - - + + - + + - - + + - - + + - - + + - - + + - - + +