diff --git a/src/component/slider/SliderDOMRenderer.ts b/src/component/slider/SliderDOMRenderer.ts index 6b5266d8..40f63ef5 100644 --- a/src/component/slider/SliderDOMRenderer.ts +++ b/src/component/slider/SliderDOMRenderer.ts @@ -121,7 +121,7 @@ export class SliderDOMRenderer { }; const boundingRect: ClientRect = this._container.domContainer.getBoundingClientRect(); - const width: number = Math.max(276, Math.min(410, 5 + 0.8 * boundingRect.width)) - 58; + const width: number = Math.max(276, Math.min(410, 5 + 0.8 * boundingRect.width)) - 66; const positionInput: vd.VNode = vd.h( "input.SliderPosition", diff --git a/styles/SliderComponent.css b/styles/SliderComponent.css index ecc9ff2c..a6421016 100644 --- a/styles/SliderComponent.css +++ b/styles/SliderComponent.css @@ -15,7 +15,7 @@ .SliderModeButton, .SliderModeButtonPressed, .SliderModeButtonDisabled { - width: 36px; + width: 44px; height: 100%; display: inline-block; pointer-events: auto; @@ -41,12 +41,12 @@ background-size: contain; background-repeat: no-repeat; opacity: 1; - width: calc(100% * 16 / 36); - height: calc(100% * 16 / 30); + width: 24px; + height: 24px; } .SliderModeIcon { - background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDx0aXRsZT4KICAgICAgcGxheV9kaXJlY3Rpb24KICAgIDwvdGl0bGU+CiAgICA8cGF0aCBkPSJNNiA0aDhjLjU1MjMgMCAxIC40NDc3IDEgMXMtLjQ0NzcgMS0xIDFINnYyLjA1ODRjLS4wMDM0LjE2NjgtLjExMTguMzE4Mi0uMjgxNS4zOTM0LS4xNjk4LjA3NS0uMzczLjA2MTctLjUyOC0uMDM1TC4yMTQzIDUuMzU4NEMuMDggNS4yNzcgMCA1LjE0MyAwIDVjMC0uMTQzLjA4LS4yNzcuMjE0My0uMzU4NWw0Ljk3NjItMy4wNTgzYy4xNTUtLjA5NjcuMzU4My0uMTEuNTI4LS4wMzUuMTY5OC4wNzUyLjI3OC4yMjY2LjI4MTUuMzkzNFY0em00IDZWNy45NDE2Yy4wMDM0LS4xNjY4LjExMTctLjMxODIuMjgxNS0uMzkzNC4xNjk3LS4wNzUuMzczLS4wNjE3LjUyOC4wMzVsNC45NzYyIDMuMDU4M0MxNS45MiAxMC43MjMgMTYgMTAuODU3IDE2IDExYzAgLjE0My0uMDguMjc3LS4yMTQzLjM1ODRsLTQuOTc2MiAzLjA1ODRjLS4xNTUuMDk2Ny0uMzU4Mi4xMS0uNTI4LjAzNS0uMTY5Ny0uMDc1Mi0uMjc4LS4yMjY2LS4yODE1LS4zOTM0VjEySDJjLS41NTIzIDAtMS0uNDQ3Ny0xLTFzLjQ0NzctMSAxLTFoOHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDwvc3ZnPg=='); + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHBhdGggaWQ9IjNkLWEiIGQ9Ik01LjQ0MzI5ODMyLDE4LjM1MDAwMDQgQzQuMzk3ODExMTMsMTguMzUwMDAwNCAzLjUxMzE4MTQsMTguMTg1ODA3NyAyLjc4OTM4MjU4LDE3Ljg1NzQxNzUgQzIuMDY1NTgzNzYsMTcuNTI5MDI3MyAxLjQ2OTEyODg3LDE3LjA5MDA2MzMgMSwxNi41NDA1MTI0IEwyLjM2NzE2ODcxLDE0LjY3MDcwODEgQzIuNzU1ODc1NDksMTUuMDQ2MDExMiAzLjE4MTQzNiwxNS4zNTQyOTEzIDMuNjQzODYzMDMsMTUuNTk1NTU3NSBDNC4xMDYyOTAwNSwxNS44MzY4MjM4IDQuNjEyMjcxNDUsMTUuOTU3NDU1MSA1LjE2MTgyMjQxLDE1Ljk1NzQ1NTEgQzUuNzkxNzk1NDYsMTUuOTU3NDU1MSA2LjI5NDQyNTk5LDE1LjgyNjc3MTIgNi42Njk3MjkwOCwxNS41NjUzOTk0IEM3LjA0NTAzMjE3LDE1LjMwNDAyNzYgNy4yMzI2ODA5LDE0LjkzMjA4MSA3LjIzMjY4MDksMTQuNDQ5NTQ4NSBDNy4yMzI2ODA5LDE0LjE2ODA3MTEgNy4xODI0MTc4NSwxMy45MTM0MDUgNy4wODE4OTAyMywxMy42ODU1NDI0IEM2Ljk4MTM2MjYyLDEzLjQ1NzY3OTggNi44MDM3NjY1LDEzLjI2NjY4MDIgNi41NDkwOTY1NCwxMy4xMTI1Mzc5IEM2LjI5NDQyNjU5LDEyLjk1ODM5NTUgNS45NDU5MzYwOSwxMi44Mzc3NjQyIDUuNTAzNjE0NTksMTIuNzUwNjQwMyBDNS4wNjEyOTMwOSwxMi42NjM1MTYzIDQuNDkxNjQ1MTUsMTIuNjE5OTU1IDMuNzk0NjUzNjksMTIuNjE5OTU1IEwzLjc5NDY1MzY5LDEwLjUyODk5MTEgQzQuMzcxMDEyMDEsMTAuNTI4OTkxMSA0Ljg1MDE4NjQ1LDEwLjQ4ODc4MDcgNS4yMzIxOTEzOSwxMC40MDgzNTg2IEM1LjYxNDE5NjMyLDEwLjMyNzkzNjUgNS45MjI0NzYzOCwxMC4yMTA2NTYgNi4xNTcwNDA4MSwxMC4wNTY1MTM3IEM2LjM5MTYwNTI0LDkuOTAyMzcxMzYgNi41NTkxNDg3NSw5LjcyMTQyNDM3IDYuNjU5Njc2MzcsOS41MTM2NjczIEM2Ljc2MDIwMzk4LDkuMzA1OTEwMjMgNi44MTA0NjcwMyw5LjA3NDcwMDE4IDYuODEwNDY3MDMsOC44MjAwMzAyMyBDNi44MTA0NjcwMyw4LjM3NzcwODczIDYuNjc2NDMyMjMsOC4wMzI1NjkxIDYuNDA4MzU4NTksNy43ODQ2MDA5OCBDNi4xNDAyODQ5NSw3LjUzNjYzMjg3IDUuNzUxNTg0MDEsNy40MTI2NTA2NyA1LjI0MjI0NDEsNy40MTI2NTA2NyBDNC43ODY1MTg5MSw3LjQxMjY1MDY3IDQuMzc0MzYxODgsNy41MTMxNzY3OCA0LjAwNTc2MDYzLDcuNzE0MjMyMDEgQzMuNjM3MTU5MzgsNy45MTUyODcyMyAzLjI1MTgwOTMsOC4xOTAwNTg1OSAyLjg0OTY5ODg1LDguNTM4NTU0MzIgTDEuMzYxODk3Niw2LjcyOTA2NjMxIEMxLjk1MTY1OTYsNi4yMTk3MjY0IDIuNTcxNTcwNTksNS44MjA5NzI4NSAzLjIyMTY0OTE2LDUuNTMyNzkzNjkgQzMuODcxNzI3NzMsNS4yNDQ2MTQ1MyA0LjU5MjE2NDgyLDUuMTAwNTI3MTEgNS4zODI5ODIwNSw1LjEwMDUyNzExIEM2LjAzOTc2MjQ2LDUuMTAwNTI3MTEgNi42Mzk1NjgyMyw1LjE3NzU5NzEzIDcuMTgyNDE3MzUsNS4zMzE3Mzk0NyBDNy43MjUyNjY0Niw1LjQ4NTg4MTgxIDguMTg3Njg2NTUsNS43MTM3NDA5OCA4LjU2OTY5MTQ4LDYuMDE1MzIzODIgQzguOTUxNjk2NDEsNi4zMTY5MDY2NyA5LjI0OTkyMzg2LDYuNjgyMTUxNTIgOS40NjQzODI3Nyw3LjExMTA2OTM0IEM5LjY3ODg0MTY4LDcuNTM5OTg3MTYgOS43ODYwNjk1Myw4LjAzNTkxNTk1IDkuNzg2MDY5NTMsOC41OTg4NzA1OCBDOS43ODYwNjk1Myw5LjI2OTA1NDY4IDkuNjAxNzcxNjcsOS44MzUzNTE3NCA5LjIzMzE3MDQyLDEwLjI5Nzc3ODggQzguODY0NTY5MTYsMTAuNzYwMjA1OCA4LjMzODQ4MjU0LDExLjEzODg1NDEgNy42NTQ4OTQ3NywxMS40MzM3MzUxIEw3LjY1NDg5NDc3LDExLjUxNDE1NjggQzguMzkyMDk3MjcsMTEuNzI4NjE1NyA4Ljk5ODYwNDc4LDEyLjA5Mzg2MDYgOS40NzQ0MzU0OCwxMi42MDk5MDIzIEM5Ljk1MDI2NjE5LDEzLjEyNTk0NDEgMTAuMTg4MTc4LDEzLjc5OTQ2OSAxMC4xODgxNzgsMTQuNjMwNDk3MyBDMTAuMTg4MTc4LDE1LjIyMDI1OTMgMTAuMDYwODQ0OSwxNS43NDYzNDU5IDkuODA2MTc0OTUsMTYuMjA4NzcyOSBDOS41NTE1MDUsMTYuNjcxMTk5OSA5LjIwOTcxNjIzLDE3LjA1OTkwMDkgOC43ODA3OTg0MiwxNy4zNzQ4ODc0IEM4LjM1MTg4MDYsMTcuNjg5ODczOSA3Ljg0OTI1MDA3LDE3LjkzMTEzNjYgNy4yNzI4OTE3NSwxOC4wOTg2ODI2IEM2LjY5NjUzMzQzLDE4LjI2NjIyODYgNi4wODY2NzUwNSwxOC4zNTAwMDA0IDUuNDQzMjk4MzIsMTguMzUwMDAwNCBaIE0xMi43MjE0NjEyLDE4LjEwODczNTMgTDEyLjcyMTQ2MTIsNSBMMTYuNDIwODU4OSw1IEMxNy40MjYxMzUsNSAxOC4zMzA4Nyw1LjEyNzMzMzA3IDE5LjEzNTA5MDksNS4zODIwMDMwMiBDMTkuOTM5MzExOCw1LjYzNjY3Mjk4IDIwLjYyOTU5MTEsNi4wMjg3MjQ3OSAyMS4yMDU5NDk0LDYuNTU4MTcwMjMgQzIxLjc4MjMwNzcsNy4wODc2MTU2NiAyMi4yMjQ2MjI2LDcuNzYxMTQwNTcgMjIuNTMyOTA3Miw4LjU3ODc2NTE2IEMyMi44NDExOTE5LDkuMzk2Mzg5NzYgMjIuOTk1MzMyLDEwLjM2ODE0MjEgMjIuOTk1MzMyLDExLjQ5NDA1MTQgQzIyLjk5NTMzMiwxMi42MTk5NjA3IDIyLjg0MTE5MTksMTMuNTk4NDE0OCAyMi41MzI5MDcyLDE0LjQyOTQ0MyBDMjIuMjI0NjIyNiwxNS4yNjA0NzEzIDIxLjc4OTAwOTQsMTUuOTQ3Mzk5NyAyMS4yMjYwNTQ4LDE2LjQ5MDI0ODggQzIwLjY2MzEwMDIsMTcuMDMzMDk3OSAxOS45ODk1NzUyLDE3LjQzODU1MzIgMTkuMjA1NDU5OSwxNy43MDY2MjY5IEMxOC40MjEzNDQ1LDE3Ljk3NDcwMDUgMTcuNTQ2NzY3MywxOC4xMDg3MzUzIDE2LjU4MTcwMjMsMTguMTA4NzM1MyBMMTIuNzIxNDYxMiwxOC4xMDg3MzUzIFogTTE1LjY3Njk1ODMsMTUuNzE2MTkwMSBMMTYuMjM5OTEwMSwxNS43MTYxOTAxIEMxNi44MDI4NjQ3LDE1LjcxNjE5MDEgMTcuMzEyMTk3LDE1LjY0MjQ3MDkgMTcuNzY3OTIyMiwxNS40OTUwMzA0IEMxOC4yMjM2NDczLDE1LjM0NzU4OTkgMTguNjEyMzQ4MywxNS4xMDk2NzgxIDE4LjkzNDAzNjcsMTQuNzgxMjg3OSBDMTkuMjU1NzI1LDE0LjQ1Mjg5NzcgMTkuNTA3MDQwMywxNC4wMjA2MzU1IDE5LjY4Nzk5LDEzLjQ4NDQ4ODIgQzE5Ljg2ODkzOTcsMTIuOTQ4MzQwOSAxOS45NTk0MTMyLDEyLjI4NDg2ODYgMTkuOTU5NDEzMiwxMS40OTQwNTE0IEMxOS45NTk0MTMyLDEwLjcxNjYzNzggMTkuODY4OTM5NywxMC4wNjMyMTgyIDE5LjY4Nzk5LDkuNTMzNzcyNzIgQzE5LjUwNzA0MDMsOS4wMDQzMjcyOSAxOS4yNTU3MjUsOC41ODIxMTc2NCAxOC45MzQwMzY3LDguMjY3MTMxMTIgQzE4LjYxMjM0ODMsNy45NTIxNDQ1OSAxOC4yMjM2NDczLDcuNzI3NjM2MjkgMTcuNzY3OTIyMiw3LjU5MzU5OTQ3IEMxNy4zMTIxOTcsNy40NTk1NjI2NSAxNi44MDI4NjQ3LDcuMzkyNTQ1MjUgMTYuMjM5OTEwMSw3LjM5MjU0NTI1IEwxNS42NzY5NTgzLDcuMzkyNTQ1MjUgTDE1LjY3Njk1ODMsMTUuNzE2MTkwMSBaIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjRkZGRkZGIiB4bGluazpocmVmPSIjM2QtYSIvPjwvZz48L3N2Zz4='); } .SliderModeButtonPressed .SliderModeIcon {