diff --git a/demo/client/css/pathfinder.css b/demo/client/css/pathfinder.css index 7411127d..ea2f4ba8 100644 --- a/demo/client/css/pathfinder.css +++ b/demo/client/css/pathfinder.css @@ -1,12 +1,33 @@ -.pf-bottom-control { - position: fixed; - bottom: 1em; -} #pf-load-font-button-label, #pf-load-svg-button-label { left: 1em; margin: 0; } +#pf-settings { + user-select: none; + -moz-user-select: none; + opacity: 1.0; + transition: opacity 300ms, transform 300ms; + transform: translateY(0); +} +#pf-settings-button:not(:hover) { + background: rgba(255, 255, 255, 0.75); +} +#pf-file-select { + position: absolute; + visibility: hidden; +} +#pf-settings.pf-invisible { + opacity: 0.0; + transform: translateY(1em); +} +button > svg { + width: 1.25em; + display: block; +} +button > svg path { + fill: currentColor; +} #pf-rendering-options-group { right: 1em; } @@ -16,12 +37,32 @@ touch-action: none; } #pf-fps-label { - position: absolute; - right: 1em; - margin-top: 1em; color: white; background: rgba(0, 0, 0, 0.75); } #pf-svg { visibility: hidden; } + +.pf-arrow-box:after, .pf-arrow-box:before { + top: 100%; + left: 22px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.pf-arrow-box:after { + border-color: rgba(0, 0, 0, 0); + border-top-color: white; + border-width: 14px; + margin-left: -14px; +} +.pf-arrow-box:before { + border-color: rgba(0, 0, 0, 0); + border-top-color: rgba(0, 0, 0, 0.125); + border-width: 15px; + margin-left: -15px; +} \ No newline at end of file diff --git a/demo/client/html/3d-demo.html b/demo/client/html/3d-demo.html index 4b6f3d83..330c27b9 100644 --- a/demo/client/html/3d-demo.html +++ b/demo/client/html/3d-demo.html @@ -8,15 +8,36 @@
${require('./include/navbar.html')} -