CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 07:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Do not use rounded corners by default in video-js

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-23 09:29:43 +03:00
parent d3b58bf27b
commit ae24bcab02
2 changed files with 35 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend-tools/video-js/src/VideoJS.css
View File

@ -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);

82
frontend-tools/video-js/src/assets/css/VideoPlayer.scss
View File

@ -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");
}
}
}