From 7ed5121bd5da8ef4455d2883387c8e7ec94469b0 Mon Sep 17 00:00:00 2001 From: jooemrp <75409382+jooemrp@users.noreply.github.com> Date: Wed, 21 Jan 2026 14:36:35 +0800 Subject: [PATCH] Enhance styles and scripts for improved UI/UX - Updated font-family in style.css for better system font support. - Adjusted dimensions and styles of #titleBar and related elements for a more modern look. - Enhanced button styles with hover effects and transitions for fullscreen and autorotate toggles. - Improved scrollbar styles for transition lists and info hotspots. - Refined layout and padding for scene lists and info hotspots to enhance readability. - Updated package.json to specify the correct script paths and updated dependencies. - Added new dev.bat and dev.js scripts for streamlined development server setup. - Introduced backdrop filters and gradients for a more visually appealing interface. --- .vscode/settings.json | 3 + demos/sample-tour/style.css | 476 ++++++++++++++++++++++++++---------- demos/transitions/style.css | 124 +++++++--- package.json | 10 +- scripts/dev.bat | 32 +++ scripts/dev.js | 75 ++++++ 6 files changed, 542 insertions(+), 178 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 scripts/dev.bat create mode 100644 scripts/dev.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..13ee2b041 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "nuxt.isNuxtApp": false +} \ No newline at end of file diff --git a/demos/sample-tour/style.css b/demos/sample-tour/style.css index 0cc961d9c..6bf5b8785 100644 --- a/demos/sample-tour/style.css +++ b/demos/sample-tour/style.css @@ -22,7 +22,7 @@ html, body { padding: 0; margin: 0; overflow: hidden; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; background-color: #000; color: #fff; @@ -45,45 +45,53 @@ a, a:hover, a:active, a:visited { #titleBar { position: absolute; top: 0; - left: 0; - right: 40px; - height: 40px; + left: 16px; + right: 64px; + height: 56px; text-align: center; } .mobile #titleBar { - height: 50px; - right: 50px; + height: 64px; + right: 72px; + left: 16px; } /* If there is a fullscreen button the title bar must make space for it */ body.fullscreen-enabled #titleBar { - right: 80px; + right: 112px; } body.fullscreen-enabled.mobile #titleBar { - right: 100px; + right: 128px; } /* If there are multiple scenes the title bar must make space for the scene list toggle */ body.multiple-scenes #titleBar { - left: 40px; + left: 64px; } body.multiple-scenes.mobile #titleBar { - left: 50px; + left: 72px; } #titleBar .sceneName { width: 100%; height: 100%; - line-height: 30px; - padding: 5px; - background-color: rgb(58,68,84); - background-color: rgba(58,68,84,0.8); + line-height: 56px; + padding: 0 24px; + background: linear-gradient(180deg, rgba(20, 20, 30, 0.5) 0%, rgba(15, 15, 25, 0.45) 100%); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 0 0 20px 20px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + font-weight: 600; + font-size: 17px; + letter-spacing: 0.6px; -moz-user-select: text; -webkit-user-select: text; @@ -92,24 +100,39 @@ body.multiple-scenes.mobile #titleBar { } .mobile #titleBar .sceneName { - line-height: 40px; + line-height: 64px; + font-size: 18px; } #fullscreenToggle { display: none; position: absolute; - top: 0; - right: 0; + top: 8px; + right: 8px; width: 40px; height: 40px; - padding: 5px; - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,0.8); + padding: 6px; + background: rgba(40, 40, 60, 0.4); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + cursor: pointer; + transition: all 0.3s ease; +} + +.no-touch #fullscreenToggle:hover { + background: rgba(60, 60, 90, 0.6); + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .mobile #fullscreenToggle { - width: 50px; - height: 50px; + width: 48px; + height: 48px; + top: 4px; + right: 4px; } body.fullscreen-enabled #fullscreenToggle { @@ -118,10 +141,15 @@ body.fullscreen-enabled #fullscreenToggle { #fullscreenToggle .icon { position: absolute; - top: 5px; - right: 5px; - width: 30px; - height: 30px; + top: 6px; + right: 6px; + width: 28px; + height: 28px; + transition: transform 0.2s ease; +} + +.no-touch #fullscreenToggle:hover .icon { + transform: scale(1.1); } .mobile #fullscreenToggle .icon { @@ -148,35 +176,63 @@ body.fullscreen-enabled #fullscreenToggle { #autorotateToggle { display: block; position: absolute; - top: 0; - right: 0; + top: 8px; + right: 8px; width: 40px; height: 40px; - padding: 5px; - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,0.8); + padding: 6px; + background: rgba(40, 40, 60, 0.4); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + cursor: pointer; + transition: all 0.3s ease; +} + +#autorotateToggle.enabled { + background: linear-gradient(135deg, rgba(60, 100, 200, 0.5) 0%, rgba(40, 80, 180, 0.5) 100%); + border-color: rgba(100, 150, 255, 0.3); +} + +.no-touch #autorotateToggle:hover { + background: rgba(60, 60, 90, 0.6); + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.no-touch #autorotateToggle.enabled:hover { + background: linear-gradient(135deg, rgba(80, 120, 220, 0.65) 0%, rgba(60, 100, 200, 0.65) 100%); } .mobile #autorotateToggle { - width: 50px; - height: 50px; + width: 48px; + height: 48px; + top: 4px; + right: 4px; } /* If there is a fullscreen button, autorotate must placed a bit to the left */ body.fullscreen-enabled #autorotateToggle { - right: 40px; + right: 56px; } body.fullscreen-enabled.mobile #autorotateToggle { - right: 50px; + right: 60px; } #autorotateToggle .icon { position: absolute; - top: 5px; - right: 5px; - width: 30px; - height: 30px; + top: 6px; + right: 6px; + width: 28px; + height: 28px; + transition: transform 0.2s ease; +} + +.no-touch #autorotateToggle:hover .icon { + transform: rotate(15deg) scale(1.1); } .mobile #autorotateToggle .icon { @@ -202,34 +258,62 @@ body.fullscreen-enabled.mobile #autorotateToggle { #sceneListToggle { position: absolute; - top: 0; - left: 0; + top: 8px; + left: 8px; width: 40px; height: 40px; - padding: 5px; - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,0.8); + padding: 6px; + background: rgba(40, 40, 60, 0.4); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + cursor: pointer; + transition: all 0.3s ease; +} + +#sceneListToggle.enabled { + background: linear-gradient(135deg, rgba(60, 100, 200, 0.5) 0%, rgba(40, 80, 180, 0.5) 100%); + border-color: rgba(100, 150, 255, 0.3); +} + +.no-touch #sceneListToggle:hover { + background: rgba(60, 60, 90, 0.6); + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.no-touch #sceneListToggle.enabled:hover { + background: linear-gradient(135deg, rgba(80, 120, 220, 0.65) 0%, rgba(60, 100, 200, 0.65) 100%); } .mobile #sceneListToggle { - width: 50px; - height: 50px; + width: 48px; + height: 48px; + top: 4px; + left: 4px; } #sceneListToggle .text { position: absolute; - top: 5px; - left: 15px; + top: 6px; + left: 16px; width: 100%; - line-height: 30px; + line-height: 28px; } #sceneListToggle .icon { position: absolute; - top: 5px; - right: 5px; - width: 30px; - height: 30px; + top: 6px; + right: 6px; + width: 28px; + height: 28px; + transition: transform 0.2s ease; +} + +.no-touch #sceneListToggle:hover .icon { + transform: scale(1.1); } .mobile #sceneListToggle .icon { @@ -257,7 +341,7 @@ body.fullscreen-enabled.mobile #autorotateToggle { position: absolute; top: 0; left: -220px; - padding-top: 40px; + padding-top: 56px; width: 220px; max-height: 100%; overflow-x: hidden; @@ -268,13 +352,16 @@ body.fullscreen-enabled.mobile #autorotateToggle { } .mobile #sceneList { - padding-top: 50px; + padding-top: 64px; } #sceneList .scenes { width: 100%; - background-color: rgb(58,68,84); - background-color: rgba(58,68,84,0.8); + background: rgba(20, 20, 30, 0.85); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-right: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3); } .mobile #sceneList { @@ -308,11 +395,13 @@ body.fullscreen-enabled.mobile #autorotateToggle { #sceneList .scene .text { width: 100%; height: 100%; - padding: 0 15px; + padding: 0 20px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + font-weight: 400; + letter-spacing: 0.3px; } .mobile #sceneList .scene .text { @@ -320,13 +409,16 @@ body.fullscreen-enabled.mobile #autorotateToggle { } .no-touch #sceneList .scene:hover { - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,0.8); + background: rgba(80, 80, 120, 0.4); + border-left: 3px solid rgba(100, 150, 255, 0.8); + padding-left: 17px; + transition: all 0.2s ease; } #sceneList .scene.current { - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,0.8); + background: linear-gradient(90deg, rgba(60, 100, 200, 0.3) 0%, rgba(40, 40, 60, 0.3) 100%); + border-left: 3px solid rgba(100, 150, 255, 1); + font-weight: 500; } /* Hide scene list when only a single scene exists */ @@ -366,18 +458,23 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { left: 100%; top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */ - margin-left: 3px; + margin-left: 8px; - font-size: 16px; + font-size: 15px; + font-weight: 500; + letter-spacing: 0.3px; max-width: 300px; - padding: 8px 10px; + padding: 10px 16px; - border-radius: 5px; + border-radius: 10px; - background-color: rgb(58,68,84); - background-color: rgba(58,68,84,0.8); + background: rgba(20, 20, 35, 0.9); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); color: #fff; @@ -450,53 +547,65 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { } .info-hotspot .info-hotspot-header { - width: 40px; - height: 40px; - border-radius: 20px; - background-color: rgb(103,115,131); + width: 36px; + height: 36px; + border-radius: 18px; + background: linear-gradient(135deg, rgba(60, 100, 200, 0.85) 0%, rgba(40, 80, 180, 0.85) 100%); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 2px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); cursor: pointer; -webkit-transition: width 0.3s ease-in-out 0.5s, - border-radius 0.3s ease-in-out 0.5s; + border-radius 0.3s ease-in-out 0.5s, + box-shadow 0.3s ease; transition: width 0.3s ease-in-out 0.5s, - border-radius 0.3s ease-in-out 0.5s; + border-radius 0.3s ease-in-out 0.5s, + box-shadow 0.3s ease; } .mobile .info-hotspot .info-hotspot-header { - width: 50px; - height: 50px; - border-radius: 25px; + width: 42px; + height: 42px; + border-radius: 21px; } .desktop.no-touch .info-hotspot .info-hotspot-header:hover { - width: 260px; - border-radius: 5px; + width: 220px; + border-radius: 10px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); -webkit-transition: width 0.3s ease-in-out, - border-radius 0.3s ease-in-out; + border-radius 0.3s ease-in-out, + box-shadow 0.3s ease; transition: width 0.3s ease-in-out, - border-radius 0.3s ease-in-out; + border-radius 0.3s ease-in-out, + box-shadow 0.3s ease; } .desktop .info-hotspot.visible .info-hotspot-header, .desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover { - width: 260px; - border-radius: 5px; + width: 220px; + border-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); -webkit-transition: width 0.3s ease-in-out, - border-radius 0.3s ease-in-out; + border-radius 0.3s ease-in-out, + box-shadow 0.3s ease; transition: width 0.3s ease-in-out, - border-radius 0.3s ease-in-out; + border-radius 0.3s ease-in-out, + box-shadow 0.3s ease; } .info-hotspot .info-hotspot-icon-wrapper { - width: 40px; - height: 40px; + width: 36px; + height: 36px; } .mobile .info-hotspot .info-hotspot-icon-wrapper { - width: 50px; - height: 50px; + width: 42px; + height: 42px; } .info-hotspot .info-hotspot-icon { @@ -507,10 +616,10 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .info-hotspot .info-hotspot-title-wrapper { position: absolute; - left: 40px; + left: 36px; top: 0; width: 0; - height: 40px; + height: 36px; padding: 0; overflow: hidden; -webkit-transition: width 0s 0.4s, @@ -521,8 +630,8 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .desktop .info-hotspot.visible .info-hotspot-title-wrapper, .desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper { - width: 220px; - padding: 0 5px; + width: 184px; + padding: 0 6px; -webkit-transition: width 0s 0.4s, padding 0s 0.4s; transition: width 0s 0.4s, @@ -539,6 +648,9 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .info-hotspot .info-hotspot-title { display: inline-block; vertical-align: middle; + font-weight: 500; + font-size: 14px; + letter-spacing: 0.3px; -moz-user-select: text; -webkit-user-select: text; @@ -548,12 +660,17 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .info-hotspot .info-hotspot-close-wrapper { position: absolute; - left: 260px; + left: 220px; top: 0; - height: 40px; - width: 40px; - border-top-right-radius: 5px; - background-color: rgb(78,88,104); + height: 36px; + width: 36px; + border-top-right-radius: 10px; + background: linear-gradient(135deg, rgba(200, 60, 80, 0.9) 0%, rgba(180, 40, 60, 0.9) 100%); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 2px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + cursor: pointer; visibility: hidden; -ms-transform: perspective(200px) rotateY(90deg); -webkit-transform: perspective(200px) rotateY(90deg); @@ -564,11 +681,17 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { -webkit-transition: -ms-transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s, transform 0.3s 0.3s, - visibility 0s 0.6s; + visibility 0s 0.6s, + background 0.3s ease; transition: -ms-transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s, transform 0.3s 0.3s, - visibility 0s 0.6s; + visibility 0s 0.6s, + background 0.3s ease; +} + +.info-hotspot .info-hotspot-close-wrapper:hover { + background: linear-gradient(135deg, rgba(220, 80, 100, 1) 0%, rgba(200, 60, 80, 1) 100%); } .desktop .info-hotspot.visible .info-hotspot-close-wrapper { @@ -594,15 +717,22 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .info-hotspot .info-hotspot-text { position: absolute; - width: 300px; + width: 256px; height: auto; - max-height: 200px; - top: 40px; + max-height: 180px; + top: 36px; left: 0; - padding: 10px; - background-color: rgb(58,68,84); - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; + padding: 12px; + font-size: 13px; + line-height: 1.5; + background: rgba(20, 20, 35, 0.95); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-top: none; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); overflow-y: auto; visibility: hidden; /* rotate(90deg) causes transition flicker on Firefox 58 */ @@ -627,6 +757,24 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { user-select: text; } +.info-hotspot .info-hotspot-text::-webkit-scrollbar { + width: 6px; +} + +.info-hotspot .info-hotspot-text::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 3px; +} + +.info-hotspot .info-hotspot-text::-webkit-scrollbar-thumb { + background: rgba(100, 150, 255, 0.4); + border-radius: 3px; +} + +.info-hotspot .info-hotspot-text::-webkit-scrollbar-thumb:hover { + background: rgba(100, 150, 255, 0.6); +} + .desktop .info-hotspot.visible .info-hotspot-text { visibility: visible; -ms-transform: perspective(200px) rotateX(0deg); @@ -681,9 +829,13 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { left: 10px; right: 10px; width: auto; - height: 50px; - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,0.8); + height: 48px; + background: linear-gradient(135deg, rgba(60, 100, 200, 0.85) 0%, rgba(40, 80, 180, 0.85) 100%); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 10px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: opacity 0.3s ease-in-out 0.2s; transition: opacity 0.3s ease-in-out 0.2s; @@ -696,8 +848,8 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { } .info-hotspot-modal .info-hotspot-icon-wrapper { - width: 50px; - height: 50px; + width: 48px; + height: 48px; } .info-hotspot-modal .info-hotspot-icon { @@ -709,11 +861,11 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .info-hotspot-modal .info-hotspot-title-wrapper { position: absolute; top: 0; - left: 50px; - right: 50px; + left: 48px; + right: 48px; width: auto; - height: 50px; - padding: 0 10px; + height: 48px; + padding: 0 12px; } .info-hotspot-modal .info-hotspot-title-wrapper:before { @@ -726,6 +878,9 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .info-hotspot-modal .info-hotspot-title { display: inline-block; vertical-align: middle; + font-weight: 600; + font-size: 16px; + letter-spacing: 0.3px; -moz-user-select: text; -webkit-user-select: text; @@ -737,11 +892,20 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { position: absolute; top: 0; right: 0; - width: 50px; - height: 50px; - background-color: rgb(78,88,104); - background-color: rgba(78,88,104,0.8); + width: 48px; + height: 48px; + background: linear-gradient(135deg, rgba(200, 60, 80, 0.9) 0%, rgba(180, 40, 60, 0.9) 100%); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 10px; cursor: pointer; + transition: all 0.3s ease; +} + +.info-hotspot-modal .info-hotspot-close-wrapper:hover { + background: linear-gradient(135deg, rgba(220, 80, 100, 1) 0%, rgba(200, 60, 80, 1) 100%); + transform: scale(1.05); } .info-hotspot-modal .info-hotspot-close-icon { @@ -752,13 +916,19 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .info-hotspot-modal .info-hotspot-text { position: absolute; - top: 110px; - bottom: 10px; + top: 118px; + bottom: 20px; left: 10px; right: 10px; - padding: 10px; - background-color: rgb(58,68,84); - background-color: rgba(58,68,84,0.8); + padding: 16px; + font-size: 14px; + line-height: 1.5; + background: rgba(20, 20, 35, 0.95); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); overflow-y: auto; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; @@ -770,6 +940,24 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { user-select: text; } +.info-hotspot-modal .info-hotspot-text::-webkit-scrollbar { + width: 8px; +} + +.info-hotspot-modal .info-hotspot-text::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 4px; +} + +.info-hotspot-modal .info-hotspot-text::-webkit-scrollbar-thumb { + background: rgba(100, 150, 255, 0.4); + border-radius: 4px; +} + +.info-hotspot-modal .info-hotspot-text::-webkit-scrollbar-thumb:hover { + background: rgba(100, 150, 255, 0.6); +} + .info-hotspot-modal.visible .info-hotspot-text { opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.4s; @@ -781,13 +969,19 @@ body.single-scene #sceneList, body.single-scene #sceneListToggle { .viewControlButton { display: none; position: absolute; - bottom: 0; + bottom: 20px; left: 50%; width: 40px; height: 40px; - padding: 5px; - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,0.8); + padding: 6px; + background: rgba(40, 40, 60, 0.4); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + cursor: pointer; + transition: all 0.3s ease; } body.view-control-buttons .viewControlButton { @@ -803,10 +997,26 @@ body.view-control-buttons .viewControlButton { .viewControlButton .icon { position: absolute; - top: 5px; - right: 5px; - width: 30px; - height: 30px; + top: 6px; + right: 6px; + width: 28px; + height: 28px; + transition: transform 0.2s ease; +} + +.no-touch .viewControlButton:hover { + background: rgba(60, 60, 90, 0.6); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.no-touch .viewControlButton:hover .icon { + transform: scale(1.1); +} + +.viewControlButton:active { + transform: translateY(0); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Center is at margin-left: -20px */ diff --git a/demos/transitions/style.css b/demos/transitions/style.css index 2609b2b9f..14289e38f 100644 --- a/demos/transitions/style.css +++ b/demos/transitions/style.css @@ -17,7 +17,7 @@ html, body { padding: 0; margin: 0; overflow: hidden; - font-family: Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; background-color: #000; color: #fff; @@ -38,20 +38,47 @@ a, a:hover, a:active, a:visited { #transitionList { position: absolute; - top: 0; - left: 0; - width: 220px; - max-height: 100%; + top: 20px; + left: 20px; + width: 240px; + max-height: calc(100% - 40px); overflow-x: hidden; overflow-y: auto; + background: rgba(20, 20, 30, 0.85); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); +} + +#transitionList::-webkit-scrollbar { + width: 8px; +} + +#transitionList::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 4px; +} + +#transitionList::-webkit-scrollbar-thumb { + background: rgba(100, 150, 255, 0.4); + border-radius: 4px; +} + +#transitionList::-webkit-scrollbar-thumb:hover { + background: rgba(100, 150, 255, 0.6); } .title{ width: 100%; - padding: .5em; - font-size: 1.2em; - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,.9); + padding: 1em 1.2em; + font-size: 1.3em; + font-weight: 600; + letter-spacing: 0.5px; + background: linear-gradient(135deg, rgba(60, 100, 200, 0.4) 0%, rgba(40, 60, 140, 0.3) 100%); + border-radius: 16px 16px 0 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); } #transitionList .transitions { @@ -62,69 +89,86 @@ a, a:hover, a:active, a:visited { display: block; width: 100%; cursor: pointer; - padding: 0.5em; - background-color: rgb(58,68,84); - background-color: rgba(58,68,84,0.8); - border-top: 1px solid rgb(103,115,131); - border-top: 1px solid rgba(103,115,131,.5); + padding: 0.85em 1.2em; + background: transparent; + border-top: 1px solid rgba(255, 255, 255, 0.08); + transition: all 0.2s ease; + font-weight: 400; + letter-spacing: 0.3px; } #transitionList li:hover { - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,0.8); + background: rgba(80, 80, 120, 0.4); + padding-left: 1.5em; + border-left: 3px solid rgba(100, 150, 255, 0.8); } #custom{ - background-color: rgb(38,48,64) !important; - background-color: rgba(38,48,64,0.9) !important; + background: rgba(30, 30, 50, 0.6) !important; + border-radius: 0 0 16px 16px; + padding-bottom: 1em; } #customForm > * { display: block; - margin-top: 0.5em; + margin-top: 0.75em; } #customForm #time { - width: 160px; + width: 180px; color: #FFF; - font-size: .8em; - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,.8); - border: none; - border-radius: 5px; - padding: .5em; + font-size: .9em; + background: rgba(60, 60, 90, 0.5); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + padding: .65em .85em; + transition: all 0.2s ease; } #customForm select { min-width: 200px; - height: 25px; + height: 38px; color: #FFF; - font-size: .8em; - background-color: rgb(103,115,131); - background-color: rgba(103,115,131,.8); - border: none; + font-size: .9em; + background: rgba(60, 60, 90, 0.5); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + padding: 0 .5em; + transition: all 0.2s ease; } #customForm select:focus, #customForm #time:focus { - background-color: rgb(133,145,161); + background: rgba(80, 80, 120, 0.6); + border-color: rgba(100, 150, 255, 0.6); outline: none; + box-shadow: 0 0 0 3px rgba(100, 150, 255, 0.15); } #customForm .submit { - margin-top: 10px; - font-size: .8em; - padding: .5em 7em; - background-color: #25aae1; - border: 2px solid #25aae1; + margin-top: 1.2em; + font-size: .9em; + font-weight: 500; + padding: .75em 2em; + background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); + border: none; color: #fff; - border-radius: 5px; + border-radius: 10px; cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); + letter-spacing: 0.5px; } #customForm .submit:hover { - background-color: #51BBE7; - border: 2px solid #51BBE7; + background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); +} + +#customForm .submit:active { + transform: translateY(0); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } diff --git a/package.json b/package.json index deca39c85..9b9ccc082 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "scripts": { "test": "testem ci", "livetest": "testem", - "dev": "scripts/dev", + "dev": "node scripts/dev.js", "release": "scripts/release", "deploy": "scripts/deploy", "prepublishOnly": "scripts/prepublish" @@ -30,12 +30,12 @@ "devDependencies": { "browserify": "^17.0.0", "chai": "^4.2.0", - "jsdoc": "^3.6.6", - "lr-http-server": "^0.1.5", + "jsdoc": "^4.0.5", + "lr-http-server": "^0.0.2", "mocha": "^8.2.1", "sinon": "^9.2.2", - "testem": "^3.2.0", + "testem": "^2.12.0", "uglify-js": "^3.12.3", - "watchify": "^3.11.1" + "watchify": "^4.0.0" } } diff --git a/scripts/dev.bat b/scripts/dev.bat new file mode 100644 index 000000000..29bbc9205 --- /dev/null +++ b/scripts/dev.bat @@ -0,0 +1,32 @@ +@echo off +REM Copyright 2016 Google Inc. All rights reserved. +REM +REM Licensed under the Apache License, Version 2.0 (the "License"); +REM you may not use this file except in compliance with the License. +REM You may obtain a copy of the License at +REM +REM http://www.apache.org/licenses/LICENSE-2.0 +REM +REM Unless required by applicable law or agreed to in writing, software +REM distributed under the License is distributed on an "AS IS" BASIS, +REM WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +REM See the License for the specific language governing permissions and +REM limitations under the License. + +cd /d "%~dp0\.." + +if exist build rmdir /s /q build +mkdir build + +echo Starting Marzipano development server... +echo. +echo Watchify will bundle the source files. +echo The live-reload server will start shortly. +echo Open http://localhost:8080 in your browser. +echo. + +start /b cmd /c "node_modules\.bin\watchify -v -d --noparse=node_modules/**/*.js -s Marzipano -o build/marzipano.js src/index.js" +start /b cmd /c "node_modules\.bin\lrhs -b -w src/**/*.js,demos/**/*.js,demos/**/*.css,demos/**/*.html,build/*" + +echo Press Ctrl+C to stop the development server. +pause diff --git a/scripts/dev.js b/scripts/dev.js new file mode 100644 index 000000000..a06cbf84e --- /dev/null +++ b/scripts/dev.js @@ -0,0 +1,75 @@ +#!/usr/bin/env node +/** + * Copyright 2016 Google Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +const { spawn } = require('child_process'); +const fs = require('fs'); +const path = require('path'); + +// Change to project root +process.chdir(path.join(__dirname, '..')); + +// Remove and recreate build directory +const buildDir = 'build'; +if (fs.existsSync(buildDir)) { + fs.rmSync(buildDir, { recursive: true, force: true }); +} +fs.mkdirSync(buildDir); + +console.log('Starting Marzipano development server...\n'); +console.log('Watchify will bundle the source files.'); +console.log('The live-reload server will start shortly.'); +console.log('Open http://localhost:8080 in your browser.\n'); + +// Start watchify +const watchify = spawn(process.platform === 'win32' ? 'node_modules\\.bin\\watchify.cmd' : 'node_modules/.bin/watchify', [ + '-v', + '-d', + '--noparse=node_modules/**/*.js', + '-s', 'Marzipano', + '-o', 'build/marzipano.js', + 'src/index.js' +], { stdio: 'inherit', shell: true }); + +// Start live-reload HTTP server +const lrhs = spawn(process.platform === 'win32' ? 'node_modules\\.bin\\lr-http-server.cmd' : 'node_modules/.bin/lr-http-server', [ + '-d', '.', + '-w', 'src/**/*.js,demos/**/*.js,demos/**/*.css,demos/**/*.html,build/*' +], { stdio: 'inherit', shell: true }); + +// Handle process termination +process.on('SIGINT', () => { + console.log('\nStopping development server...'); + watchify.kill(); + lrhs.kill(); + process.exit(0); +}); + +watchify.on('exit', (code) => { + if (code !== 0 && code !== null) { + console.error(`Watchify exited with code ${code}`); + lrhs.kill(); + process.exit(code); + } +}); + +lrhs.on('exit', (code) => { + if (code !== 0 && code !== null) { + console.error(`Live-reload server exited with code ${code}`); + watchify.kill(); + process.exit(code); + } +});