sandbox css

sandbox/Assets/Icon_Down.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#F2F2F2;}
+	.st2{fill:#3B789A;}
+	.st3{fill:none;}
+	.st4{opacity:0.5;fill:#2C5A74;}
+	.st5{clip-path:url(#SVGID_2_);}
+	.st6{clip-path:url(#SVGID_4_);}
+	.st7{fill:#2C5A74;}
+	.st8{clip-path:url(#SVGID_8_);}
+	.st9{clip-path:url(#SVGID_10_);}
+	.st10{clip-path:url(#SVGID_14_);}
+	.st11{clip-path:url(#SVGID_16_);}
+	.st12{clip-path:url(#SVGID_20_);}
+	.st13{clip-path:url(#SVGID_22_);}
+	.st14{opacity:0.3;fill:#00DC00;}
+	.st15{fill:#00DC00;}
+	.st16{opacity:0.3;fill:#FF0000;}
+	.st17{fill:#FF0000;}
+	.st18{fill:none;stroke:#FF0000;stroke-miterlimit:10;}
+</style>
+<g id="Layer_3">
+</g>
+<g id="Layer_1">
+	<g>
+		<path class="st0" d="M601,277.6l19.8,19.8L400,518.2L179.2,297.4l19.8-19.8l201,201L601,277.6z"/>
+	</g>
+</g>
+<g id="Redliner:_Redlines">
+</g>
+</svg>

sandbox/Assets/Icon_Up.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#F2F2F2;}
+	.st2{fill:#3B789A;}
+	.st3{fill:none;}
+	.st4{opacity:0.5;fill:#2C5A74;}
+	.st5{clip-path:url(#SVGID_2_);}
+	.st6{clip-path:url(#SVGID_4_);}
+	.st7{fill:#2C5A74;}
+	.st8{clip-path:url(#SVGID_8_);}
+	.st9{clip-path:url(#SVGID_10_);}
+	.st10{clip-path:url(#SVGID_14_);}
+	.st11{clip-path:url(#SVGID_16_);}
+	.st12{clip-path:url(#SVGID_20_);}
+	.st13{clip-path:url(#SVGID_22_);}
+	.st14{opacity:0.3;fill:#00DC00;}
+	.st15{fill:#00DC00;}
+	.st16{opacity:0.3;fill:#FF0000;}
+	.st17{fill:#FF0000;}
+	.st18{fill:none;stroke:#FF0000;stroke-miterlimit:10;}
+</style>
+<g id="Layer_3">
+</g>
+<g id="Layer_1">
+	<g>
+		<path class="st0" d="M604.6,511.8L400,307.5L195.4,511.8l-19.8-19.8L400,267.5l224.3,224.6L604.6,511.8z"/>
+	</g>
+</g>
+<g id="Redliner:_Redlines">
+</g>
+</svg>

sandbox/Assets/Logo_Fullscreen.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 750 250" style="enable-background:new 0 0 750 250;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="86.2,111 105.7,105.5 105.7,157.6 159.8,139.1 165.5,89.5 182.4,85.1 173.8,149.2 89.2,181 "/>
+<polygon class="st0" points="90.2,82.3 128.3,73.8 156.8,89.7 152.4,133.2 111.7,146.7 111.5,98.2 "/>
+<polygon class="st0" points="65.9,165.8 85.5,188.8 172.8,156 170.5,170.4 86.8,204.3 66.5,178.9 "/>
+<polygon class="st0" points="60,170.1 59,148.2 82.7,176.4 80.1,110.4 59.8,92.5 63.1,141.5 41.8,118.3 45.9,151.7 "/>
+<polyline class="st0" points="56.3,125.4 56.2,124.9 52.6,83.6 57.4,82.4 74.9,78.6 55.1,64 34.9,67.3 40.3,107.4 "/>
+<polygon class="st0" points="63.1,87.3 81.5,83.4 103.6,99.8 83.6,105.4 "/>
+<polygon class="st0" points="82.8,76.9 128.9,67 161.5,84.3 179.1,79.7 121.7,51 62.9,62.2 "/>
+<g>
+	<path class="st0" d="M220.3,161.5v9.3h-7.2V85.1h7.2V124h0.2c2.1-4,5-7.1,8.6-9.3c3.6-2.1,7.7-3.2,12.2-3.2c3.7,0,7,0.7,9.9,2
+		c2.9,1.3,5.4,3.3,7.4,5.7c2,2.5,3.6,5.5,4.6,9c1.1,3.5,1.6,7.4,1.6,11.7c0,4.8-0.6,9.2-1.8,13.1c-1.2,3.9-3,7.3-5.2,10.2
+		c-2.3,2.8-5,5-8.2,6.6s-6.8,2.3-10.8,2.3c-8.2,0-14.3-3.6-18.3-10.7L220.3,161.5L220.3,161.5z M220.3,146.8c0,2.6,0.4,5.1,1.3,7.4
+		c0.9,2.3,2.1,4.4,3.7,6.1c1.6,1.8,3.5,3.1,5.7,4.2c2.2,1,4.7,1.5,7.4,1.5c2.9,0,5.5-0.6,7.9-1.8c2.3-1.2,4.3-3,6-5.2s2.9-5,3.8-8.2
+		c0.9-3.2,1.3-6.8,1.3-10.8c0-3.4-0.4-6.5-1.2-9.2c-0.8-2.7-2-5.1-3.5-7c-1.5-1.9-3.4-3.4-5.5-4.4c-2.2-1-4.6-1.5-7.3-1.5
+		c-3,0-5.7,0.6-8.1,1.7c-2.4,1.1-4.5,2.6-6.2,4.6c-1.7,1.9-3,4.2-3.9,6.8c-0.9,2.6-1.4,5.3-1.4,8.2L220.3,146.8L220.3,146.8z"/>
+	<path class="st0" d="M305.6,170.9v-10.3h-0.2c-1.9,3.7-4.5,6.6-7.7,8.6c-3.3,2-7,3.1-11.1,3.1c-2.8,0-5.3-0.4-7.6-1.2
+		c-2.2-0.8-4.1-1.9-5.7-3.4c-1.6-1.5-2.8-3.2-3.6-5.2c-0.8-2-1.3-4.3-1.3-6.7c0-5.2,1.6-9.4,4.9-12.5c3.2-3.1,8.1-5.1,14.7-6.1
+		l17.6-2.5c0-11.1-4.3-16.7-13-16.7c-6.8,0-13,2.5-18.8,7.4v-7.9c1.2-0.9,2.6-1.7,4.1-2.3s3.1-1.3,4.8-1.8c1.7-0.5,3.4-0.9,5.2-1.2
+		c1.8-0.3,3.5-0.4,5.2-0.4c6.5,0,11.3,1.8,14.6,5.4c3.3,3.6,5,9,5,16.2v37.7L305.6,170.9L305.6,170.9z M290.7,142.7
+		c-2.6,0.4-4.8,0.9-6.7,1.4c-1.8,0.6-3.4,1.3-4.6,2.3c-1.2,1-2.1,2.1-2.7,3.6c-0.6,1.4-0.9,3.2-0.9,5.2c0,1.5,0.3,3,0.8,4.3
+		c0.5,1.3,1.3,2.5,2.4,3.4c1,1,2.3,1.7,3.8,2.2s3.2,0.8,5.1,0.8c2.6,0,4.9-0.5,7.1-1.5c2.1-1,4-2.3,5.6-4.1c1.6-1.7,2.8-3.8,3.7-6.2
+		c0.9-2.4,1.3-5,1.3-7.9v-5.7L290.7,142.7z"/>
+	<path class="st0" d="M331.8,161.5v9.3h-7.2V85.1h7.2V124h0.2c2.2-4,5-7.1,8.6-9.3c3.6-2.1,7.7-3.2,12.2-3.2c3.7,0,7,0.7,9.9,2
+		c2.9,1.3,5.4,3.3,7.4,5.7c2,2.5,3.6,5.5,4.6,9c1.1,3.5,1.6,7.4,1.6,11.7c0,4.8-0.6,9.2-1.8,13.1c-1.2,3.9-3,7.3-5.2,10.2
+		c-2.3,2.8-5,5-8.2,6.6c-3.2,1.6-6.8,2.3-10.8,2.3c-8.2,0-14.3-3.6-18.3-10.7L331.8,161.5L331.8,161.5z M331.8,146.8
+		c0,2.6,0.4,5.1,1.3,7.4c0.9,2.3,2.1,4.4,3.7,6.1c1.6,1.8,3.5,3.1,5.7,4.2c2.2,1,4.7,1.5,7.4,1.5c2.9,0,5.5-0.6,7.9-1.8s4.3-3,6-5.2
+		c1.6-2.3,2.9-5,3.8-8.2c0.9-3.2,1.3-6.8,1.3-10.8c0-3.4-0.4-6.5-1.2-9.2c-0.8-2.7-2-5.1-3.5-7c-1.5-1.9-3.4-3.4-5.5-4.4
+		c-2.2-1-4.6-1.5-7.3-1.5c-3,0-5.7,0.6-8.1,1.7c-2.4,1.1-4.5,2.6-6.2,4.6c-1.7,1.9-3,4.2-3.9,6.8c-0.9,2.6-1.4,5.3-1.4,8.2
+		L331.8,146.8L331.8,146.8z"/>
+	<path class="st0" d="M402,181.4c-2.3,5.7-4.9,9.9-7.8,12.6c-2.9,2.7-6.5,4.1-10.7,4.1c-2.1,0-3.8-0.2-5.3-0.7v-6.8
+		c0.8,0.3,1.7,0.5,2.5,0.7c0.9,0.1,1.7,0.2,2.6,0.2c2.4,0,4.4-0.7,6.2-2.2c1.8-1.5,3.3-3.7,4.6-6.8l5-11.9l-22.3-57.7h8l16.6,45.9
+		c0.2,0.6,0.4,1.3,0.6,2.1c0.2,0.8,0.4,1.5,0.6,2.3h0.3c0.2-0.6,0.4-1.3,0.5-2s0.4-1.4,0.7-2.2l17.6-46.1h7.6L402,181.4z"/>
+	<path class="st0" d="M433.7,170.9V85.1h7.2v85.8L433.7,170.9L433.7,170.9z"/>
+	<path class="st0" d="M477.5,172.2c-4.3,0-8.2-0.7-11.6-2.1c-3.4-1.4-6.3-3.5-8.7-6.1c-2.4-2.6-4.3-5.8-5.5-9.4
+		c-1.3-3.7-1.9-7.7-1.9-12.2c0-4.8,0.7-9.1,2-13c1.4-3.8,3.3-7,5.8-9.7c2.5-2.7,5.5-4.7,9.1-6.1c3.5-1.4,7.5-2.1,11.9-2.1
+		c4.2,0,8,0.7,11.3,2.1c3.4,1.4,6.2,3.4,8.5,6c2.3,2.6,4.1,5.8,5.4,9.5c1.2,3.7,1.9,8,1.9,12.7c0,4.5-0.6,8.6-2,12.4
+		c-1.3,3.7-3.2,6.9-5.6,9.6c-2.4,2.7-5.4,4.8-8.8,6.2C485.8,171.5,481.9,172.2,477.5,172.2z M478.1,117.8c-3.2,0-6,0.5-8.6,1.6
+		c-2.6,1.1-4.8,2.7-6.6,4.8c-1.8,2.1-3.2,4.7-4.2,7.7c-1,3-1.5,6.5-1.5,10.3c0,3.6,0.5,6.9,1.5,9.8s2.4,5.4,4.2,7.5
+		c1.8,2.1,4,3.7,6.5,4.8c2.6,1.1,5.4,1.7,8.6,1.7c3.2,0,6.1-0.5,8.6-1.6c2.5-1.1,4.6-2.6,6.3-4.7c1.7-2.1,3-4.6,3.9-7.6
+		c0.9-3,1.3-6.4,1.3-10.2c0-7.8-1.7-13.8-5.2-17.9C489.5,119.9,484.5,117.8,478.1,117.8z"/>
+	<path class="st0" d="M553.6,170.9v-33.4c0-13.1-4.8-19.6-14.3-19.6c-2.5,0-4.9,0.5-7,1.5c-2.2,1-4,2.4-5.6,4.2
+		c-1.6,1.8-2.8,3.9-3.7,6.3c-0.9,2.4-1.3,5.1-1.3,7.9v33.2h-7.2v-57.9h7.2V123h0.2c4.3-7.6,10.8-11.4,19.4-11.4
+		c6.3,0,11.2,2.1,14.5,6.2c3.3,4.1,5,10.1,5,17.8v35.3L553.6,170.9L553.6,170.9z"/>
+	<path class="st0" d="M639.2,138.7c0,10.9-2.5,19.2-7.6,25c-5,5.8-12.3,8.7-21.9,8.7c-4.3,0-8.2-0.7-11.8-2.2v-17.1
+		c3.1,2.4,6.6,3.6,10.5,3.6c8.3,0,12.5-6.2,12.5-18.6V89.7h18.2L639.2,138.7L639.2,138.7z"/>
+	<path class="st0" d="M647.4,167.8v-18.1c3.3,2.8,6.8,4.8,10.7,6.2s7.7,2.1,11.7,2.1c2.3,0,4.3-0.2,6-0.6c1.7-0.4,3.1-1,4.3-1.7
+		c1.2-0.7,2-1.6,2.6-2.6s0.8-2.1,0.8-3.3c0-1.6-0.5-3-1.4-4.2c-0.9-1.2-2.1-2.4-3.7-3.5c-1.6-1.1-3.4-2.1-5.6-3.1c-2.2-1-4.5-2-7-3
+		c-6.3-2.6-11.1-5.9-14.2-9.7c-3.1-3.8-4.7-8.4-4.7-13.8c0-4.2,0.8-7.9,2.5-10.9c1.7-3,4-5.5,6.9-7.5c2.9-2,6.3-3.4,10.2-4.3
+		c3.8-0.9,7.9-1.4,12.2-1.4c4.2,0,8,0.3,11.2,0.8c3.3,0.5,6.3,1.3,9,2.3v16.9c-1.4-0.9-2.8-1.8-4.4-2.5c-1.6-0.7-3.3-1.3-5-1.8
+		s-3.4-0.8-5.1-1c-1.7-0.2-3.3-0.3-4.8-0.3c-2.1,0-4,0.2-5.7,0.6c-1.7,0.4-3.1,1-4.3,1.7c-1.2,0.7-2.1,1.6-2.7,2.6
+		c-0.6,1-1,2.1-1,3.4c0,1.4,0.4,2.6,1.1,3.7c0.7,1.1,1.7,2.1,3.1,3.1s2.9,1.9,4.8,2.8c1.9,0.9,4,1.9,6.4,2.9
+		c3.2,1.4,6.2,2.8,8.7,4.3c2.6,1.5,4.8,3.3,6.7,5.2c1.8,1.9,3.3,4.1,4.2,6.6c1,2.5,1.5,5.3,1.5,8.6c0,4.5-0.9,8.3-2.6,11.4
+		c-1.7,3.1-4,5.6-7,7.5c-2.9,1.9-6.4,3.3-10.3,4.1s-8,1.2-12.4,1.2c-4.5,0-8.7-0.4-12.7-1.1C653.9,170.4,650.4,169.3,647.4,167.8z"
+		/>
+</g>
+<circle class="st0" cx="579.9" cy="160.8" r="13.2"/>
+</svg>

sandbox/index-local.html

@@ -15,8 +15,10 @@
         <div id="animationBar">
             <div class="dropdown">
                 <div id="dropdownBtn">
+                    
+                    <img src="Assets/Icon_Up.svg" id="chevronUp">
+                    <img src="Assets/Icon_Down.svg" id="chevronDown">
                     <span id="dropdownLabel"></span>
-                    <img src="Assets/arrowUp.png">
                 </div>
                 <div id="dropdownContent">
                 </div>

sandbox/index.css

@@ -5,6 +5,7 @@
     margin: 0;
     overflow: hidden;
     font-family: "Segoe WP", "Segoe UI", "Verdana", "Arial";
+    background: #80a8bf;
 }
 
 .hidden {
@@ -102,8 +103,9 @@ a {
 #logo {
     width: 100%;
     height: 100%;
-    background: url('./Assets/LogoSandbox.png') no-repeat 0 0;
+    background: url('./Assets/Logo_Fullscreen.svg') no-repeat 0 0;
     background-position: center;
+    background-size: 50%;
 }
 
 #btnDownArrow {
@@ -170,9 +172,7 @@ a {
     display: none;
     align-items: center;
     color: white;
-    font-weight: 500;
     width: calc(100% - 168px);
-    bottom: 10px;
     min-height: 30px;
 }
 
@@ -181,6 +181,7 @@ a {
     flex-direction: row;
     justify-content: center;
     flex-grow: 10;
+    align-items: center
 }
 
 #animationBar * {
@@ -188,19 +189,19 @@ a {
     margin: 0px;
 }
 
-#animationBar #dropdownContent {
+#animationBar {
     background-color: #3B789A;
 }
 
 #animationBar img {
     width: 36px;
-    height: 36px;
+    height: 56px;
 }
 
 .dropdown {
     position: relative;
     display: inline-block;
-    width: 150px;
+    width: 200px;
 }
 
 #dropdownBtn,
@@ -216,20 +217,27 @@ a {
     background-color: inherit;
 }
 
+#dropdownContent {
+    background-color: #3B789A;
+}
+
 #dropdownLabel,
 #dropdownContent a  {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding: 5px 15px 5px 15px;
+    padding: 10px 15px 10px 46px;
 }
 #dropdownLabel {
     cursor: default;
     width: 100px;
+    padding: 5px 15px 5px 5px;
 }
 
-#dropdownLabel:hover {
+#dropdownBtn:hover {
     cursor: pointer;
+    background-color: #2c5a74;
+    transition: all 0.3s ease;
 }
 
 #dropdownContent a {
@@ -237,16 +245,22 @@ a {
     transition: color 0.5s;
 }
 #dropdownContent a:hover {
-    color: #162D3A;
+    background-color: #2c5a74;
+    transition: all 0.3s ease;
+}
+#dropdownContent a:active {
+    background-color: #162D3A;
+    transition: all 0.3s ease;
 }
 
 #dropdownContent {
     display: none;
     position: absolute;
-    bottom: 44px;
+    bottom: 56px;
     border-bottom: 1px solid white; 
     z-index: 1;
     min-width: 135px;
+    width: 200px;
 }
 
 #dropdownContent a,
@@ -254,13 +268,32 @@ a {
     cursor: pointer;
 }
 
-#dropdownContent .active {
-    color: #2c5a74;
-}
-
 .dropdown:hover #dropdownContent {
     display: flex;
     flex-direction: column;
+    transition: all 0.3s ease; /* Add transition for hover effects */
+}
+
+#chevronUp {
+    display: inline;
+    margin-right: 0px;
+    margin-left: 0px;
+    padding-left: 15px;
+    max-width: 28px;
+}
+#chevronDown {
+    display: none;
+    margin-right: 0px;
+    margin-left: 0px;
+    padding-left: 15px;
+    max-width: 28px;
+}
+
+.dropdown:hover #chevronUp {
+    display: none;
+}
+.dropdown:hover #chevronDown {
+    display: inline;
 }
 
 #playBtn.play #pauseImg,
@@ -274,12 +307,9 @@ a {
     width: 1000px;
     outline: none;
     border-radius: 5px;
-    height: 2px; 
-    margin-top: 16px;   
+    height: 2px;
 }
 
-
-
 /*Chrome -webkit */
 #slider::-webkit-slider-thumb {
     -webkit-appearance: none;

sandbox/index.html

@@ -44,8 +44,10 @@
         <div id="animationBar">
             <div class="dropdown">
                 <div id="dropdownBtn">
+                    <img src="Assets/Icon_Animation.svg">
                     <span id="dropdownLabel"></span>
-                    <img src="Assets/arrowUp.png">
+                    <img src="Assets/Icon_Up.svg" id="chevronUp">
+                    <img src="Assets/Icon_Down.svg" id="chevronDown">
                 </div>
                 <div id="dropdownContent">
                 </div>

sandbox/index.js

@@ -53,6 +53,8 @@ if (BABYLON.Engine.isSupported()) {
     var currentPluginName;
     var skyboxPath = "Assets/environment.dds";
 
+    engine.loadingUIBackgroundColor = "#80a8bf";
+
     btnFullScreen.classList.add("hidden");
     btnInspector.classList.add("hidden");