TuanTuan/BA-VitePress-Pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
游戏糕手爱丽丝
2025-11-26 15:17:27 +08:00
commit a8e4f56999
350 changed files with 25023 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

665
.vitepress/theme/components/Spine-Player/index.vue Normal file
View File

@@ -0,0 +1,665 @@
<!--
todo:
1. 优化暗色描边
2. 优化对话框三角布局
3. 整理代码结构
-->
<template>
<template v-if="state.SpinePlayerEnabled">
<div
ref="playerContainer"
class="playerContainer"
@click="handlePlayerClick"
@touchstart="handlePlayerClick"
></div>
<transition name="fade">
<div v-if="showDialog" class="chatdialog-container">
<div class="chatdialog-triangle"></div>
<div class="chatdialog">{{ currentDialog }}</div>
</div>
</transition>
</template>
</template>
<script setup lang="js">
import { onMounted, ref, watch, computed } from 'vue'
import { useStore } from '../../store'
const { state } = useStore()
import { useData } from 'vitepress'
const themeConfig = useData().theme.value
const spineVoiceLang = themeConfig.spineVoiceLang
import { spine } from './spine-player.js'
// 定义两套spine资产信息
const spineAssets = {
arona: {
skelUrl: "/spine_assets/arona/arona_spr.skel",
atlasUrl: "/spine_assets/arona/arona_spr.atlas",
idleAnimationName: "Idle_01",
eyeCloseAnimationName: "Eye_Close_01",
rightEyeBone: "R_Eye_01",
leftEyeBone: "L_Eye_01",
frontHeadBone: "Head_01",
backHeadBone: "Head_Back",
eyeRotationAngle: 76.307,
voiceConfig: [
{
audio: `/spine_assets/arona/audio/${spineVoiceLang}/arona_01.ogg`,
animation: '12',
text: '您回来了？我等您很久啦！'
},
{
audio: `/spine_assets/arona/audio/${spineVoiceLang}/arona_02.ogg`,
animation: '03',
text: '嗯，不错，今天也是个好天气。'
},
{
audio: `/spine_assets/arona/audio/${spineVoiceLang}/arona_03.ogg`,
animation: '02',
text: '天空真是广啊……\n另一边会有些什么呢？'
},
{
audio: `/spine_assets/arona/audio/${spineVoiceLang}/arona_04.ogg`,
animation: '18',
text: '偶尔也要为自己的健康着想啊，\n老师，我会很担心的。'
},
{
audio: `/spine_assets/arona/audio/${spineVoiceLang}/arona_05.ogg`,
animation: '25',
text: '来，加油吧，老师！'
},
{
audio: `/spine_assets/arona/audio/${spineVoiceLang}/arona_06.ogg`,
animation: '11',
text: '今天又会有什么事情在等着我呢？'
}
]
},
plana: {
skelUrl: "/spine_assets/plana/plana_spr.skel",
atlasUrl: "/spine_assets/plana/plana_spr.atlas",
idleAnimationName: "Idle_01",
eyeCloseAnimationName: "Eye_Close_01",
rightEyeBone: "R_Eye_01",
leftEyeBone: "L_Eye_01",
frontHeadBone: "Head_Rot",
backHeadBone: "Head_Back",
eyeRotationAngle: 97.331,
voiceConfig: [
{
audio: `/spine_assets/plana/audio/${spineVoiceLang}/plana_02.ogg`,
animation: '06',
text: '我明白了，\n老师现在无事可做，很无聊。'
},
{
audio: `/spine_assets/plana/audio/${spineVoiceLang}/plana_01.ogg`,
animation: '13',
text: '混乱，该行动无法理解。\n请不要戳我，会出现故障。'
},
{
audio: `/spine_assets/plana/audio/${spineVoiceLang}/plana_03.ogg`,
animation: '15',
text: '确认连接。'
},
{
audio: `/spine_assets/plana/audio/${spineVoiceLang}/plana_04.ogg`,
animation: '99',
text: '正在待命，\n需要解决的任务还有很多。'
},
{
audio: `/spine_assets/plana/audio/${spineVoiceLang}/plana_05.ogg`,
animation: '17',
text: '等您很久了。'
},
]
}
}
const playerContainer = ref(null)
let player = null
let blinkInterval = null
let isEyeControlDisabled = ref(false)
let eyeControlTimer = null
let currentAnimationState = null // 添加动画状态引用
let currentCharacter = ref('arona')
let audioPlayers = []
// 添加客户端就绪状态
const clientReady = ref(false)
// 添加音频上下文管理器
const AudioManager = {
context: null,
buffers: new Map(),
currentSource: null,
gainNode: null,
initialize() {
if (!clientReady.value) return
if (!this.context) {
this.context = new (window.AudioContext || window.webkitAudioContext)();
// 创建增益节点，设置音量为50%
this.gainNode = this.context.createGain();
this.gainNode.gain.value = 0.5;
this.gainNode.connect(this.context.destination);
}
},
async loadAudioFile(url) {
if (this.buffers.has(url)) {
const entry = this.buffers.get(url);
entry.lastUsed = Date.now();
return entry.buffer;
}
try {
const response = await fetch(url);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await this.context.decodeAudioData(arrayBuffer);
this.buffers.set(url, { buffer: audioBuffer, lastUsed: Date.now() });
return audioBuffer;
} catch (error) {
console.error('音频加载失败:', error);
return null;
}
},
async playAudio(buffer) {
if (this.currentSource) {
this.currentSource.stop();
}
return new Promise((resolve) => {
const source = this.context.createBufferSource();
source.buffer = buffer;
// 连接到增益节点而不是直接连接到目标
source.connect(this.gainNode);
source.onended = () => {
if (this.currentSource === source) {
this.currentSource = null;
}
resolve();
};
this.currentSource = source;
source.start();
});
},
clear() {
if (this.currentSource) {
this.currentSource.stop();
this.currentSource = null;
}
this.buffers.clear();
},
gc() {
// 清除超过5分钟未使用的音频缓存
const now = Date.now()
for (const [url, entry] of this.buffers.entries()) {
if (now - entry.lastUsed > 300000) { // 5分钟
this.buffers.delete(url)
}
}
}
}
// 修改预加载音频函数
const preloadAudio = async () => {
if (!currentAssets.value) return false
AudioManager.initialize()
AudioManager.gc() // 清理过期缓存
const loadPromises = currentAssets.value.voiceConfig.map(pair =>
AudioManager.loadAudioFile(pair.audio)
)
return Promise.all(loadPromises).catch(error => {
console.error('音频预加载失败:', error)
return false
})
}
const handleScroll = () => {
if (!clientReady.value || !playerContainer.value) return
const bottomReached = window.innerHeight + window.scrollY + 1 >= document.body.offsetHeight
const chatDialog = document.querySelector('.chatdialog')
if (isMobileDevice()) {
if (bottomReached) {
playerContainer.value.style.left = '-50%'
if (chatDialog) {
chatDialog.style.left = '-50%'
}
} else {
playerContainer.value.style.left = '0%'
}
}
}
const isMobileDevice = () => {
if (!clientReady.value) return false
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
let isPlaying = false // 添加播放状态标志
const showDialog = ref(false)
const currentDialog = ref('')
let lastPlayedIndex = -1 // 添加上一次播放的索引记录
// 添加防抖处理
const debounce = (fn, delay) => {
let timer = null
return function (...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
timer = null
}, delay)
}
}
// 在组件作用域添加重置状态引用
const resetBonesState = ref(null)
// 点击处理函数
const handlePlayerClick = debounce(async (event) => {
event.preventDefault();
event.stopPropagation();
// 检查是否正在播放
if (!isPlaying) {
isPlaying = true
isEyeControlDisabled.value = true
// 点击时重置眼睛位置
resetBonesState.value?.()
const currentConfig = spineAssets[currentCharacter.value].voiceConfig
let randomIndex
do {
randomIndex = Math.floor(Math.random() * currentConfig.length)
} while (randomIndex === lastPlayedIndex && currentConfig.length > 1)
lastPlayedIndex = randomIndex
const selectedPair = currentConfig[randomIndex]
try {
const buffer = await AudioManager.loadAudioFile(selectedPair.audio);
if (!buffer) throw new Error('音频加载失败');
currentDialog.value = selectedPair.text;
showDialog.value = true;
currentAnimationState.addAnimation(2, selectedPair.animation, false, 0);
// 播放音频并等待结束
await AudioManager.playAudio(buffer);
// 音频播放结束后清理状态
isPlaying = false;
isEyeControlDisabled.value = false;
currentAnimationState.setEmptyAnimation(2, 0);
showDialog.value = false;
} catch (error) {
console.error('音频播放失败:', error);
isPlaying = false;
isEyeControlDisabled.value = false;
showDialog.value = false;
}
}
}, 300)
// 提升 moveBones 函数到组件作用域以便在其他地方使用
let moveBonesHandler = null
const initializeSpinePlayer = async (assets) => {
try {
// 清理旧的实例
if (blinkInterval) {
clearTimeout(blinkInterval);
}
// 清理容器内容
if (playerContainer.value) {
playerContainer.value.innerHTML = '';
}
player = new spine.SpinePlayer(playerContainer.value, {
skelUrl: assets.skelUrl,
atlasUrl: assets.atlasUrl,
premultipliedAlpha: true,
backgroundColor: '#00000000',
alpha: true,
showControls: false,
success: function (playerInstance) {
playerInstance.setAnimation(assets.idleAnimationName, true)
const skeleton = playerInstance.skeleton
const animationState = playerInstance.animationState
currentAnimationState = animationState // 保存动画状态引用
const rightEyeBone = skeleton.findBone(assets.rightEyeBone)
const leftEyeBone = skeleton.findBone(assets.leftEyeBone)
const frontHeadBone = skeleton.findBone(assets.frontHeadBone)
const backHeadBone = skeleton.findBone(assets.backHeadBone)
const rightEyeCenterX = rightEyeBone ? rightEyeBone.data.x : 0
const rightEyeCenterY = rightEyeBone ? rightEyeBone.data.y : 0
const leftEyeCenterX = leftEyeBone ? leftEyeBone.data.x : 0
const leftEyeCenterY = leftEyeBone ? leftEyeBone.data.y : 0
const frontHeadCenterX = frontHeadBone ? frontHeadBone.data.x : 0
const frontHeadCenterY = frontHeadBone ? frontHeadBone.data.y : 0
const backHeadCenterX = backHeadBone ? backHeadBone.data.x : 0
const backHeadCenterY = backHeadBone ? backHeadBone.data.y : 0
// 骨骼移动限制
const maxRadius = 15
const frontHeadMaxRadius = 2
const backHeadMaxRadius = 1
function rotateVector(x, y, angle) {
const cos = Math.cos(angle)
const sin = Math.sin(angle)
return {
x: x * cos - y * sin,
y: x * sin + y * cos
}
}
function moveBones(event) {
// 如果眼睛控制被禁用，直接返回
if (isEyeControlDisabled.value) return
const containerRect = playerContainer.value.getBoundingClientRect()
const mouseX = event.clientX - (containerRect.right - containerRect.width / 2)
const mouseY = event.clientY - (containerRect.bottom - containerRect.height * 4 / 5)
// 将鼠标坐标偏移量进行逆旋转
const eyeRotation = assets.eyeRotationAngle * (Math.PI / 180) // 眼睛旋转角度
const rotatedMouse = rotateVector(mouseX, mouseY, -eyeRotation)
const offsetX = rotatedMouse.x
const offsetY = rotatedMouse.y
const distance = Math.sqrt(offsetX * offsetX + offsetY * offsetY)
const angle = Math.atan2(offsetY, offsetX)
const maxDistance = Math.min(distance, maxRadius)
const dx = -maxDistance * Math.cos(angle)
const dy = maxDistance * Math.sin(angle)
// 眼睛移动
if (rightEyeBone) {
rightEyeBone.x = rightEyeCenterX + dx
rightEyeBone.y = rightEyeCenterY + dy
}
if (leftEyeBone) {
leftEyeBone.x = leftEyeCenterX + dx
leftEyeBone.y = leftEyeCenterY + dy
}
// 头部轻微移动
const frontHeadDx = Math.min(distance, frontHeadMaxRadius) * Math.cos(angle)
const frontHeadDy = Math.min(distance, frontHeadMaxRadius) * Math.sin(angle)
const backHeadDx = Math.min(distance, backHeadMaxRadius) * Math.cos(angle)
const backHeadDy = Math.min(distance, backHeadMaxRadius) * Math.sin(angle)
if (frontHeadBone) {
frontHeadBone.x = frontHeadCenterX - frontHeadDx
frontHeadBone.y = frontHeadCenterY + frontHeadDy
}
if (backHeadBone) {
backHeadBone.x = backHeadCenterX + backHeadDx
backHeadBone.y = backHeadCenterY - backHeadDy
}
skeleton.updateWorldTransform()
}
function resetBones() {
if (rightEyeBone) {
rightEyeBone.x = rightEyeCenterX
rightEyeBone.y = rightEyeCenterY
}
if (leftEyeBone) {
leftEyeBone.x = leftEyeCenterX
leftEyeBone.y = leftEyeCenterY
}
if (frontHeadBone) {
frontHeadBone.x = frontHeadCenterX
frontHeadBone.y = frontHeadCenterY
}
if (backHeadBone) {
backHeadBone.x = backHeadCenterX
backHeadBone.y = backHeadCenterY
}
skeleton.updateWorldTransform()
}
// 保存重置函数引用
resetBonesState.value = resetBones
function playBlinkAnimation() {
const randomTime = Math.random() * 3 + 3 // 5-8秒的随机间隔
const shouldDoubleBlink = Math.random() > 0.5 // 随机决定是否连续播放两次
animationState.setAnimation(1, assets.eyeCloseAnimationName, false) // 在轨道1上播放眨眼动画
if (shouldDoubleBlink) {
animationState.addAnimation(1, assets.eyeCloseAnimationName, false, 0.1) // 短暂停留后再播放一次
}
// 随机时间后再调用眨眼动画
blinkInterval = setTimeout(playBlinkAnimation, randomTime * 1000)
}
// 修改鼠标移动监听器的添加逻辑
if (!isMobileDevice()) {
moveBonesHandler = moveBones
window.addEventListener('mousemove', moveBonesHandler)
}
playBlinkAnimation()
},
error: function (playerInstance, reason) {
console.error('Spine加载失败: ' + reason)
}
})
} catch(err) {
console.error('Failed to initialize spine player:', err);
}
}
// 将需要监听的状态提取为响应式引用
const isDarkMode = computed(() => state.darkMode === 'dark')
const isEnabled = computed(() => state.SpinePlayerEnabled)
const currentAssets = computed(() => spineAssets[currentCharacter.value])
// 事件委托
const handleEvents = (event) => {
if (event.type === 'scroll') {
handleScroll()
} else if (['mousemove', 'touchmove'].includes(event.type)) {
moveBonesHandler?.(event)
}
}
// 统一的清理函数
const cleanup = () => {
if (blinkInterval) clearTimeout(blinkInterval)
if (eyeControlTimer) clearTimeout(eyeControlTimer)
// 清理监听事件
window.removeEventListener('scroll', handleEvents)
if (moveBonesHandler && !isMobileDevice()) {
window.removeEventListener('mousemove', moveBonesHandler)
moveBonesHandler = null
}
if (playerContainer.value) {
playerContainer.value.innerHTML = ''
}
if (player) {
AudioManager.clear()
player = null
currentAnimationState = null
}
// 使用 WeakRef 来管理音频资源
if (clientReady.value && window.WeakRef) {
audioPlayers = audioPlayers.filter(player => {
const ref = new WeakRef(player)
return ref.deref() !== null
})
}
}
// 初始化函数
const initializeCharacter = async () => {
cleanup()
if (!isEnabled.value || !playerContainer.value) return
currentCharacter.value = isDarkMode.value ? 'plana' : 'arona'
try {
await Promise.all([
preloadAudio(),
initializeSpinePlayer(currentAssets.value)
])
} catch (err) {
console.error('初始化失败:', err)
}
}
const debouncedInitialize = debounce(initializeCharacter, 300)
// 监听主题切换和spine开关
watch([isDarkMode, isEnabled], async ([dark, enabled], [prevDark, prevEnabled]) => {
if (enabled !== prevEnabled) {
if (enabled) {
// 启用时初始化
debouncedInitialize()
} else {
// 禁用时清理资源
cleanup()
}
} else if (enabled && dark !== prevDark) {
// 主题变更且启用状态下重新初始化
debouncedInitialize()
}
}, { immediate: true })
onMounted(() => {
// 设置客户端就绪状态
clientReady.value = true
const options = { passive: true }
window.addEventListener('scroll', handleEvents, options)
if (!isMobileDevice()) {
window.addEventListener('mousemove', handleEvents, options)
}
// 如果启用了Spine播放器，初始化
if (state.SpinePlayerEnabled) {
debouncedInitialize()
}
})
</script>
<style scoped lang="less">
.playerContainer {
position: fixed;
bottom: 25px;
left: 0%;
z-index: 100;
width: 12vw;
height: 24vw;
filter: drop-shadow(0 0 3px rgba(40, 42, 44, 0.42));
transition: all 1s;
cursor: pointer;
}
.chatdialog-container {
position: fixed;
bottom: 10vw;
left: 2vw;
z-index: 101;
transition: all 1s;
pointer-events: none;
filter: drop-shadow(0 0 3px rgba(36, 36, 36, 0.6));
}
.chatdialog-triangle {
position: absolute;
left: 2vw;
top: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(255, 255, 255, 0.9);
z-index: 101;
}
.chatdialog {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 25px;
padding: 12px 24px;
word-wrap: break-word;
white-space: pre-wrap;
line-height: 1.4;
color: #000000;
font-size: 0.8vw;
user-select: none;
pointer-events: auto;
}
// 添加淡入淡出动画
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
@media (max-width: 768px) {
.chatdialog-container {
left: 2vh;
bottom: 10vh;
}
.chatdialog {
min-width: auto;
padding: 12px 20px;
font-size: 1vh;
border-radius: 20px;
}
.chatdialog-triangle {
left: 35px;
border-width: 8px;
top: -8px;
}
.playerContainer {
width: 15vh;
height: 30vh;
}
}
</style>

408
.vitepress/theme/components/Spine-Player/spine-player.css Normal file
View File

@@ -0,0 +1,408 @@
/** Player **/
.spine-player {
box-sizing: border-box;
width: 100%;
height: 100%;
background: none;
position: relative;
}
.spine-player * {
box-sizing: border-box;
font-family: "PT Sans",Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
color: #dddddd;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.spine-player-error {
font-size: 14px;
display: flex;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: 10;
border-radius: 4px;
overflow: auto;
}
.spine-player-hidden {
display: none;
}
/** Slider **/
.spine-player-slider {
width: 100%;
height: 16px;
position: relative;
cursor: pointer;
}
.spine-player-slider-value {
position: absolute;
bottom: 0;
height: 2px;
background: rgba(98, 176, 238, 0.6);
cursor: pointer;
}
.spine-player-slider:hover .spine-player-slider-value {
height: 4px;
background: rgba(98, 176, 238, 1);
transition: height 0.2s;
}
.spine-player-slider-value.hovering {
height: 4px;
background: rgba(98, 176, 238, 1);
transition: height 0.2s;
}
.spine-player-slider.big {
height: 12px;
background: rgb(0, 0, 0);
}
.spine-player-slider.big .spine-player-slider-value {
height: 12px;
background: rgba(98, 176, 238, 1);
}
/** Column and row layout elements **/
.spine-player-column {
display: flex;
flex-direction: column;
}
.spine-player-row {
display: flex;
flex-direction: row;
}
/** List **/
.spine-player-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.spine-player-list li {
cursor: pointer;
margin: 8px 8px;
}
.spine-player-list .selectable {
display: flex;
flex-direction: row;
margin: 0 !important;
padding: 2px 20px 2px 0 !important;
}
.spine-player-list li.selectable:first-child {
margin-top: 4px !important;
}
.spine-player-list li.selectable:last-child {
margin-bottom: 4px !important;
}
.spine-player-list li.selectable:hover {
background: #6e6e6e;
}
.spine-player-list li.selectable .selectable-circle {
display: flex;
flex-direction: row;
width: 6px;
min-width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
align-self: center;
opacity: 0;
margin: 5px 10px;
}
.spine-player-list li.selectable.selected .selectable-circle {
opacity: 1;
}
.spine-player-list li.selectable .selectable-text {
color: #aaa;
}
.spine-player-list li.selectable.selected .selectable-text, .spine-player-list li.selectable:hover .selectable-text {
color: #ddd;
}
/** Switch **/
.spine-player-switch {
display: flex;
flex-direction: row;
margin: 2px 10px;
}
.spine-player-switch-text {
flex: 1;
margin-right: 8px;
}
.spine-player-switch-knob-area {
width: 30px; /* width of the switch */
height: 10px;
display: block;
border-radius: 5px; /* must be half of height */
background: #6e6e6e;
position: relative;
align-self: center;
justify-self: flex-end;
}
.spine-player-switch.active .spine-player-switch-knob-area {
background: #5EAFF1;
}
.spine-player-switch-knob {
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background: #9e9e9e;
position: absolute;
left: 0px;
top: -2px;
filter: drop-shadow(0 0 1px #333);
transition: transform 0.2s;
}
.spine-player-switch.active .spine-player-switch-knob {
background: #fff;
transform: translateX(18px);
transition: transform 0.2s;
}
/** Popup **/
.spine-player-popup-parent {
position: relative;
}
.spine-player-popup {
user-select: none;
position: absolute;
background: rgba(0, 0, 0, 0.75);
z-index: 1;
right: 2px;
bottom: 40px;
border-radius: 4px;
max-height: 400%;
overflow: auto;
font-size: 85%;
}
.spine-player-popup-title {
margin: 4px 15px 2px 15px;
text-align: center;
}
.spine-player-popup hr {
margin: 0;
border: 0;
border-bottom: 1px solid #cccccc70;
}
/** Canvas **/
.spine-player canvas {
display: block;
width: 100%;
height: 100%;
border-radius: 4px;
}
/** Player controls **/
.spine-player-controls {
display: flex;
flex-direction: column;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transition: opacity 0.4s;
}
.spine-player-controls-hidden {
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
/** Player buttons **/
.spine-player-buttons {
display: flex;
flex-direction: row;
width: 100%;
background: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 2px 8px 3px;
}
.spine-player-button {
background: none;
outline: 0;
border: none;
width: 32px;
height: 32px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
margin-right: 3px;
padding-bottom: 3px;
filter: drop-shadow(0 0 1px #333);
}
.spine-player-button-spacer {
flex: 1;
}
.spine-player-button-icon-play {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-play:hover {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-play-selected {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-pause {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-pause:hover {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-pause-selected {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-speed {
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-speed:hover {
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-speed-selected {
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-animations {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
.spine-player-button-icon-animations:hover {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
.spine-player-button-icon-animations-selected {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
.spine-player-button-icon-skins {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
width: 31px;
height: 31px;
}
.spine-player-button-icon-skins:hover {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-skins-selected {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-settings {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
margin-top: 1px;
}
.spine-player-button-icon-settings:hover {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-settings-selected {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-fullscreen {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
margin-top: 1px;
}
.spine-player-button-icon-fullscreen:hover {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-fullscreen-selected {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.spine-player-button-icon-spine-logo {
height: 20px;
position: relative;
top: 1px;
margin: 0 8px !important;
align-self: center;
border: none !important;
width: auto !important;
cursor: pointer;
transition: transform 0.2s;
box-shadow: none !important;
filter: drop-shadow(0 0 1px #333);
}
.spine-player-button-icon-spine-logo:hover {
transform: scale(1.05);
transition: transform 0.2s;
}
/** Speed slider **/
.spine-player-speed-slider {
width: 150px;
}
/** Player editor **/
.spine-player-editor-container {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
.spine-player-editor-code {
flex: 1;
overflow: auto;
}
.CodeMirror {
height: 100%;
}
.spine-player-editor-player {
flex: 1;
border: none;
background: black;
}

13442
.vitepress/theme/components/Spine-Player/spine-player.js Normal file
View File

File diff suppressed because one or more lines are too long