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:17:41 +02:00
parent 110db2970f
commit b0407a6bbd
1 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
css/player-base.js
View File

@ -732,29 +732,34 @@ 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 {
background-image: linear-gradient(to right, background-image: linear-gradient(to right, #ff0045, #ff0e55, #ff1d79);
#ff0045,
#ff0e55,
#ff1d79
);
} }
.vjs-control-bar { .vjs-control-bar {
border-radius: 16px; border-radius: 16px;
background-color: #0007 !important; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)) !important;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
display: flex !important; display: flex !important;
align-items: flex-end !important; align-items: flex-end !important;
gap: 12px; gap: 12px;
padding: 10px 14px; padding: 10px 14px;
} }
.vjs-remaining-time, .vjs-remaining-time,
.vjs-fullscreen-control { .vjs-fullscreen-control {
background-color: transparent !important; background-color: transparent !important;
} }
.vjs-control-bar .vjs-button, .vjs-control-bar .vjs-button,
@ -769,20 +774,22 @@ saa.innerHTML = `
height: 38px; height: 38px;
min-width: 38px; min-width: 38px;
border-radius: 50%; border-radius: 50%;
background: rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(12px) saturate(160%);
box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.12); backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.10);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 2px 6px 0 6px; margin: 0 6px 2px 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; vertical-align: bottom;
} }
.vjs-control-bar .vjs-button:hover { .vjs-control-bar .vjs-button:hover {
background: rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.12));
box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.18); box-shadow: 0 10px 28px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.16);
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -803,7 +810,7 @@ saa.innerHTML = `
.vjs-progress-control { .vjs-progress-control {
flex: 1 1 auto; flex: 1 1 auto;
display: flex !important; display: flex !important;
align-items: center !important; align-items: flex-end !important;
margin: 0 6px; margin: 0 6px;
padding-bottom: 2px; padding-bottom: 2px;
} }
@ -811,9 +818,13 @@ saa.innerHTML = `
.vjs-progress-control .vjs-progress-holder { .vjs-progress-control .vjs-progress-holder {
height: 8px !important; height: 8px !important;
border-radius: 999px !important; border-radius: 999px !important;
background: rgba(255,255,255,0.08) !important; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)) !important;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(10px) saturate(160%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 4px 12px rgba(0,0,0,0.25); backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 6px 18px rgba(0,0,0,0.28);
position: relative;
margin-bottom: 2px;
} }
.vjs-progress-control .vjs-load-progress, .vjs-progress-control .vjs-load-progress,
@ -830,7 +841,8 @@ saa.innerHTML = `
height: 16px !important; height: 16px !important;
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); border: 1px solid rgba(255,255,255,0.9);
box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,0,90,0.20);
top: -4px !important; top: -4px !important;
} }
@ -843,7 +855,10 @@ saa.innerHTML = `
.vjs-volume-bar { .vjs-volume-bar {
height: 6px !important; height: 6px !important;
border-radius: 999px !important; border-radius: 999px !important;
background: rgba(255,255,255,0.10) !important; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)) !important;
-webkit-backdrop-filter: blur(10px) saturate(160%);
backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255,255,255,0.12);
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);
} }
@ -857,8 +872,9 @@ saa.innerHTML = `
height: 14px !important; height: 14px !important;
border-radius: 50% !important; border-radius: 50% !important;
background: #fff !important; background: #fff !important;
border: 1px solid rgba(255,255,255,0.9);
top: -4px !important; top: -4px !important;
box-shadow: 0 3px 12px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,0,90,0.18); box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,0,90,0.18);
} }
.vjs-current-time, .vjs-current-time,
@ -866,7 +882,10 @@ saa.innerHTML = `
.vjs-duration { .vjs-duration {
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
-webkit-backdrop-filter: blur(10px) saturate(160%);
backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255,255,255,0.10);
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; align-self: flex-end;
margin-bottom: 2px; margin-bottom: 2px;
@ -883,6 +902,10 @@ 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,