[ts][player] Better css, fixed showControls validation not working.

This commit is contained in:
badlogic 2018-11-19 15:12:31 +01:00
parent 896bdf913c
commit 0053a14965
5 changed files with 12016 additions and 11993 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -74,7 +74,14 @@
display: flex;
flex-direction: row;
margin: 0 !important;
padding: 4px 10px 4px 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 {
@ -97,10 +104,19 @@
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 {
@ -128,7 +144,7 @@
width: 14px;
height: 14px;
border-radius: 50%;
background: #6e6e6e;
background: #9e9e9e;
position: absolute;
left: 0px;
top: -2px;
@ -151,14 +167,15 @@
background: rgba(0, 0, 0, 0.75);
z-index: 1;
right: 2px;
bottom: 42px;
bottom: 47px;
border-radius: 4px;
max-height: 400%;
overflow: auto;
font-size: 85%;
}
.spine-player-popup-title {
margin: 4px 8px;
margin: 8px 15px 7px 15px;
text-align: center;
}
@ -204,7 +221,7 @@
background: rgba(0, 0, 0, 0.75);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 0 8px;
padding: 2px 8px 3px;
}
.spine-player-button {
@ -217,6 +234,7 @@
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
margin-right: 3px;
}
.spine-player-button-spacer {
@ -257,6 +275,8 @@
.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 {
@ -265,6 +285,7 @@
.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 {
@ -273,6 +294,7 @@
.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 {

View File

@ -304,7 +304,8 @@
if (!config.controlBones) config.controlBones = [];
if (!config.showControls) config.showControls = true;
if (typeof config.showControls === "undefined")
config.showControls = true;
return config;
}