From ae24bcab022a0629ebe4d0882d4a3f14a32c9175 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Tue, 23 Sep 2025 09:29:43 +0300 Subject: [PATCH] fix: Do not use rounded corners by default in video-js --- frontend-tools/video-js/src/VideoJS.css | 10 +-- .../video-js/src/assets/css/VideoPlayer.scss | 82 +++++++------------ 2 files changed, 35 insertions(+), 57 deletions(-) diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css index f873ef06..59f85545 100644 --- a/frontend-tools/video-js/src/VideoJS.css +++ b/frontend-tools/video-js/src/VideoJS.css @@ -16,10 +16,10 @@ html { outline: none !important; } .video-js .vjs-poster { - border-radius: 12px !important; + border-radius: 0 !important; } .video-js video { - border-radius: 12px !important; + border-radius: 0 !important; } /* Fullscreen video styles for embedded video player */ @@ -833,14 +833,14 @@ button { .video-js { padding: 0; height: 100% !important; - border-radius: 12px; + border-radius: 0; outline: none; /* Remove default browser focus outline */ } /* Custom focus styles for video player */ .video-js:focus { box-shadow: 0 0 0 3px rgba(25, 153, 50, 0.5); - border-radius: 12px; + border-radius: 0; } /* Ensure video player is focusable */ @@ -959,7 +959,7 @@ button { bottom: 60px; width: min(360px, calc(100% - 20px)); border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 12px; + border-radius: 8px; height: calc(100% - 80px); background: rgba(18, 18, 18, 0.96); backdrop-filter: blur(6px); diff --git a/frontend-tools/video-js/src/assets/css/VideoPlayer.scss b/frontend-tools/video-js/src/assets/css/VideoPlayer.scss index b7c9c53b..825c0e06 100755 --- a/frontend-tools/video-js/src/assets/css/VideoPlayer.scss +++ b/frontend-tools/video-js/src/assets/css/VideoPlayer.scss @@ -1,7 +1,7 @@ -@use 'sass:math'; -@use './includes/mixins' as *; -@use './includes/theme_variables' as *; -@import 'video.js/dist/video-js.css'; +@use "sass:math"; +@use "./includes/mixins" as *; +@use "./includes/theme_variables" as *; +@import "video.js/dist/video-js.css"; @keyframes up-next-circle-countdown { from { @@ -66,29 +66,30 @@ .video-js.vjs-mediacms { // Enhanced styling for video player - border-radius: 12px !important; + border-radius: 0 !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; outline: none !important; /* Remove default focus outline */ // Focus styles for keyboard controls &:focus { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(0, 122, 204, 0.3) !important; } video { outline: none !important; - border-radius: 12px !important; + border-radius: 0 !important; } .vjs-poster { - border-radius: 12px !important; + border-radius: 0 !important; } .vjs-control-bar { - border-bottom-left-radius: 12px !important; - border-bottom-right-radius: 12px !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; } .vjs-corner-layer.vjs-corner-top-left { @@ -420,8 +421,8 @@ > * ~ * { &:before { - content: '•'; - content: '\2022'; + content: "•"; + content: "\2022"; margin: 0 4px; } } @@ -451,7 +452,7 @@ } &:before { - content: ''; + content: ""; position: absolute; top: -100%; left: -100%; @@ -670,31 +671,11 @@ .more-media-item-content { height: 100%; padding: 10px; - background-image: -moz-linear-gradient( - top, - rgba(#0c0c0c, 0.8) 0, - transparent 100px - ); - background-image: -ms-linear-gradient( - top, - rgba(#0c0c0c, 0.8) 0, - transparent 100px - ); - background-image: -o-linear-gradient( - top, - rgba(#0c0c0c, 0.8) 0, - transparent 100px - ); - background-image: -webkit-linear-gradient( - top, - rgba(#0c0c0c, 0.8) 0, - transparent 100px - ); - background-image: linear-gradient( - to bottom, - rgba(#0c0c0c, 0.8) 0, - transparent 100px - ); + background-image: -moz-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px); + background-image: -ms-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px); + background-image: -o-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px); + background-image: -webkit-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px); + background-image: linear-gradient(to bottom, rgba(#0c0c0c, 0.8) 0, transparent 100px); } .more-media-item-content, @@ -820,10 +801,7 @@ .vjs-progress-control { .vjs-progress-holder { .vjs-play-progress { - background-color: var( - --brand-color, - var(--default-brand-color) - ); + background-color: var(--brand-color, var(--default-brand-color)); &:before { color: var(--brand-color, var(--default-brand-color)); @@ -1031,7 +1009,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(59, 89, 152); - background-image: url('../../../images/social-media-icons/fb-logo.png'); + background-image: url("../../../images/social-media-icons/fb-logo.png"); } } } @@ -1041,7 +1019,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(29, 161, 242); - background-image: url('../../../images/social-media-icons/twitter-logo.png'); + background-image: url("../../../images/social-media-icons/twitter-logo.png"); } } } @@ -1051,7 +1029,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(255, 69, 0); - background-image: url('../../../images/social-media-icons/reddit-logo.png'); + background-image: url("../../../images/social-media-icons/reddit-logo.png"); } } } @@ -1061,7 +1039,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(53, 70, 92); - background-image: url('../../../images/social-media-icons/tumblr-logo.png'); + background-image: url("../../../images/social-media-icons/tumblr-logo.png"); } } } @@ -1071,7 +1049,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(189, 8, 28); - background-image: url('../../../images/social-media-icons/pinterest-logo.png'); + background-image: url("../../../images/social-media-icons/pinterest-logo.png"); } } } @@ -1081,7 +1059,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(70, 128, 194); - background-image: url('../../../images/social-media-icons/vk-logo.png'); + background-image: url("../../../images/social-media-icons/vk-logo.png"); } } } @@ -1091,7 +1069,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(0, 119, 181); - background-image: url('../../../images/social-media-icons/linkedin-logo.png'); + background-image: url("../../../images/social-media-icons/linkedin-logo.png"); } } } @@ -1101,7 +1079,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(255, 130, 38); - background-image: url('../../../images/social-media-icons/mix-logo.png'); + background-image: url("../../../images/social-media-icons/mix-logo.png"); } } } @@ -1120,7 +1098,7 @@ button.share-video-btn { button { > *:first-child { background-color: rgb(37, 211, 102); - background-image: url('../../../images/social-media-icons/whatsapp-logo.png'); + background-image: url("../../../images/social-media-icons/whatsapp-logo.png"); } } } @@ -1131,7 +1109,7 @@ button.share-video-btn { > *:first-child { background-color: rgb(0, 136, 204); background-position: 11px; - background-image: url('../../../images/social-media-icons/telegram-logo.png'); + background-image: url("../../../images/social-media-icons/telegram-logo.png"); } } }