From b9600fcbd6382f392578a38422ebf63a74d240dd Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Wed, 29 May 2024 10:43:10 +0200 Subject: feat: make videojs progress bar rounded and add padding --- resources/src/styles/videojs.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'resources') diff --git a/resources/src/styles/videojs.scss b/resources/src/styles/videojs.scss index d4c0020..10f9f43 100644 --- a/resources/src/styles/videojs.scss +++ b/resources/src/styles/videojs.scss @@ -27,9 +27,11 @@ .vjs-tubo .vjs-progress-control { position: absolute; - width: 100%; + width: calc(100% - 4em); top: -.5em; height: 0.5em; + margin-left: 2em; + margin-right: 2em; } .vjs-tubo .vjs-progress-control .vjs-progress-holder { @@ -48,12 +50,18 @@ width: 100%; height: 5px; background: rgba(115, 133, 159, 0.3); + border-radius: 20px; } .vjs-tubo .vjs-progress-control .vjs-load-progress, .vjs-tubo .vjs-progress-control .vjs-play-progress { height: 5px; top: 8px; + border-radius: 20px; +} + +.vjs-tubo .vjs-progress-control .vjs-load-progress > div:first-of-type { + border-radius: 20px; } .vjs-tubo .vjs-progress-control .vjs-mouse-display { -- cgit v1.2.3