Sakurai/poke
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update css/player-base.js

Browse Source
This commit is contained in:
ashley 2025-08-26 18:12:24 +02:00
parent 986c068c42
commit d0c829360e
1 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/player-base.js
View File

@ -732,7 +732,6 @@ function validatePlayerObject(player) {
const extractedData = extractPlayerData(base_player); const extractedData = extractPlayerData(base_player);
const initializedPlayer = initializePlayer(extractedData); const initializedPlayer = initializePlayer(extractedData);
const saa = document.createElement('style'); const saa = document.createElement('style');
saa.innerHTML = ` saa.innerHTML = `
.vjs-play-progress { .vjs-play-progress {
@ -743,29 +742,27 @@ saa.innerHTML = `
); );
} }
/* control bar container */
.vjs-control-bar { .vjs-control-bar {
border-radius: 16px; border-radius: 16px;
background-color: #0007 !important; background-color: #0007 !important;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
display: flex; display: flex !important;
gap: 10px; align-items: flex-end !important;
padding: 8px 12px; gap: 12px;
padding: 10px 14px;
} }
/* keep these transparent like you had */
.vjs-remaining-time, .vjs-remaining-time,
.vjs-fullscreen-control { .vjs-fullscreen-control {
background-color: transparent !important; background-color: transparent !important;
} }
/* circular frosted-glass buttons (play/pause, mute, fs, pip, etc.) */
.vjs-control-bar .vjs-button, .vjs-control-bar .vjs-button,
.vjs-play-control, .vjs-play-control,
.vjs-mute-control, .vjs-mute-control,
.vjs-fullscreen-control, .vjs-fullscreen-control,
.vjs-picture-in-picture-control, .vjs-picture-in-picture-control {
.vjs-remaining-time .vjs-control-text { /* harmless noop for consistency */ } }
.vjs-control-bar .vjs-button { .vjs-control-bar .vjs-button {
width: 38px; width: 38px;
@ -778,8 +775,9 @@ saa.innerHTML = `
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 4px; margin: 2px 6px 0 6px;
transition: transform .12s ease, box-shadow .2s ease, background .2s ease; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
vertical-align: bottom;
} }
.vjs-control-bar .vjs-button:hover { .vjs-control-bar .vjs-button:hover {
@ -797,18 +795,17 @@ saa.innerHTML = `
box-shadow: 0 0 0 3px rgba(255,0,90,0.35), inset 0 0 0 1px rgba(255,255,255,0.2); box-shadow: 0 0 0 3px rgba(255,0,90,0.35), inset 0 0 0 1px rgba(255,255,255,0.2);
} }
/* icon sizing inside circular buttons */
.vjs-control-bar .vjs-icon-placeholder:before { .vjs-control-bar .vjs-icon-placeholder:before {
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
} }
/* progress (seek) bar: frosted track + rounded ends */
.vjs-progress-control { .vjs-progress-control {
flex: 1 1 auto; flex: 1 1 auto;
display: flex !important; display: flex !important;
align-items: center; align-items: center !important;
margin: 0 4px; margin: 0 6px;
padding-bottom: 2px;
} }
.vjs-progress-control .vjs-progress-holder { .vjs-progress-control .vjs-progress-holder {
@ -834,13 +831,13 @@ saa.innerHTML = `
border-radius: 50% !important; border-radius: 50% !important;
background: #fff !important; background: #fff !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,0,90,0.20); box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,0,90,0.20);
top: -4px !important; /* center on 8px track */ top: -4px !important;
} }
/* volume panel spacing and circular handle too */
.vjs-volume-panel { .vjs-volume-panel {
gap: 8px; gap: 8px;
align-items: center; align-items: flex-end !important;
padding-bottom: 2px;
} }
.vjs-volume-bar { .vjs-volume-bar {
@ -864,7 +861,6 @@ saa.innerHTML = `
box-shadow: 0 3px 12px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,0,90,0.18); box-shadow: 0 3px 12px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,0,90,0.18);
} }
/* give text timers a small chip look (optional), but keep transparent base */
.vjs-current-time, .vjs-current-time,
.vjs-time-divider, .vjs-time-divider,
.vjs-duration { .vjs-duration {
@ -872,9 +868,10 @@ saa.innerHTML = `
border-radius: 999px; border-radius: 999px;
background: rgba(255,255,255,0.06); background: rgba(255,255,255,0.06);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
align-self: flex-end;
margin-bottom: 2px;
} }
/* tighter layout on small screens */
@media (max-width: 640px) { @media (max-width: 640px) {
.vjs-control-bar { gap: 8px; padding: 6px 8px; } .vjs-control-bar { gap: 8px; padding: 6px 8px; }
.vjs-control-bar .vjs-button { width: 34px; height: 34px; min-width: 34px; } .vjs-control-bar .vjs-button { width: 34px; height: 34px; min-width: 34px; }
@ -886,7 +883,6 @@ saa.innerHTML = `
document.head.appendChild(saa); document.head.appendChild(saa);
window.pokePlayer = { window.pokePlayer = {
ver:`20-a87a9450-vjs-${videojs.VERSION}`, ver:`20-a87a9450-vjs-${videojs.VERSION}`,
canHasAmbientMode:true, canHasAmbientMode:true,