CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 15:38: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; outline: none !important;
} }
.video-js .vjs-poster { .video-js .vjs-poster {
border-radius: 12px !important; border-radius: 0 !important;
} }
.video-js video { .video-js video {
border-radius: 12px !important; border-radius: 0 !important;
} }
/* Fullscreen video styles for embedded video player */ /* Fullscreen video styles for embedded video player */
@ -833,14 +833,14 @@ button {
.video-js { .video-js {
padding: 0; padding: 0;
height: 100% !important; height: 100% !important;
border-radius: 12px; border-radius: 0;
outline: none; /* Remove default browser focus outline */ outline: none; /* Remove default browser focus outline */
} }
/* Custom focus styles for video player */ /* Custom focus styles for video player */
.video-js:focus { .video-js:focus {
box-shadow: 0 0 0 3px rgba(25, 153, 50, 0.5); box-shadow: 0 0 0 3px rgba(25, 153, 50, 0.5);
border-radius: 12px; border-radius: 0;
} }
/* Ensure video player is focusable */ /* Ensure video player is focusable */
@ -959,7 +959,7 @@ button {
bottom: 60px; bottom: 60px;
width: min(360px, calc(100% - 20px)); width: min(360px, calc(100% - 20px));
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px; border-radius: 8px;
height: calc(100% - 80px); height: calc(100% - 80px);
background: rgba(18, 18, 18, 0.96); background: rgba(18, 18, 18, 0.96);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);

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

@ -1,7 +1,7 @@
@use 'sass:math'; @use "sass:math";
@use './includes/mixins' as *; @use "./includes/mixins" as *;
@use './includes/theme_variables' as *; @use "./includes/theme_variables" as *;
@import 'video.js/dist/video-js.css'; @import "video.js/dist/video-js.css";
@keyframes up-next-circle-countdown { @keyframes up-next-circle-countdown {
from { from {
@ -66,29 +66,30 @@
.video-js.vjs-mediacms { .video-js.vjs-mediacms {
// Enhanced styling for video player // Enhanced styling for video player
border-radius: 12px !important; border-radius: 0 !important;
overflow: hidden !important; overflow: hidden !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
outline: none !important; /* Remove default focus outline */ outline: none !important; /* Remove default focus outline */
// Focus styles for keyboard controls // Focus styles for keyboard controls
&:focus { &: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; 0 0 0 3px rgba(0, 122, 204, 0.3) !important;
} }
video { video {
outline: none !important; outline: none !important;
border-radius: 12px !important; border-radius: 0 !important;
} }
.vjs-poster { .vjs-poster {
border-radius: 12px !important; border-radius: 0 !important;
} }
.vjs-control-bar { .vjs-control-bar {
border-bottom-left-radius: 12px !important; border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 12px !important; border-bottom-right-radius: 0 !important;
} }
.vjs-corner-layer.vjs-corner-top-left { .vjs-corner-layer.vjs-corner-top-left {
@ -420,8 +421,8 @@
> * ~ * { > * ~ * {
&:before { &:before {
content: '•'; content: "•";
content: '\2022'; content: "\2022";
margin: 0 4px; margin: 0 4px;
} }
} }
@ -451,7 +452,7 @@
} }
&:before { &:before {
content: ''; content: "";
position: absolute; position: absolute;
top: -100%; top: -100%;
left: -100%; left: -100%;
@ -670,31 +671,11 @@
.more-media-item-content { .more-media-item-content {
height: 100%; height: 100%;
padding: 10px; padding: 10px;
background-image: -moz-linear-gradient( background-image: -moz-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px);
top, background-image: -ms-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px);
rgba(#0c0c0c, 0.8) 0, background-image: -o-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px);
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: -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, .more-media-item-content,
@ -820,10 +801,7 @@
.vjs-progress-control { .vjs-progress-control {
.vjs-progress-holder { .vjs-progress-holder {
.vjs-play-progress { .vjs-play-progress {
background-color: var( background-color: var(--brand-color, var(--default-brand-color));
--brand-color,
var(--default-brand-color)
);
&:before { &:before {
color: var(--brand-color, var(--default-brand-color)); color: var(--brand-color, var(--default-brand-color));
@ -1031,7 +1009,7 @@ button.share-video-btn {
button { button {
> *:first-child { > *:first-child {
background-color: rgb(59, 89, 152); 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 { button {
> *:first-child { > *:first-child {
background-color: rgb(29, 161, 242); 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 { button {
> *:first-child { > *:first-child {
background-color: rgb(255, 69, 0); 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 { button {
> *:first-child { > *:first-child {
background-color: rgb(53, 70, 92); 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 { button {
> *:first-child { > *:first-child {
background-color: rgb(189, 8, 28); 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 { button {
> *:first-child { > *:first-child {
background-color: rgb(70, 128, 194); 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 { button {
> *:first-child { > *:first-child {
background-color: rgb(0, 119, 181); 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 { button {
> *:first-child { > *:first-child {
background-color: rgb(255, 130, 38); 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 { button {
> *:first-child { > *:first-child {
background-color: rgb(37, 211, 102); 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 { > *:first-child {
background-color: rgb(0, 136, 204); background-color: rgb(0, 136, 204);
background-position: 11px; background-position: 11px;
background-image: url('../../../images/social-media-icons/telegram-logo.png'); background-image: url("../../../images/social-media-icons/telegram-logo.png");
} }
} }
} }