Merge pull request #6284 from BabylonJS/maintenance

Maintenance

Playground/css/index.css

@@ -1,5 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
-@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
+@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
 html,
 body {
     width: 100%;
@@ -7,7 +6,7 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    font-family: sans-serif;
+    font-family: "acumin-pro";
 }
 #waitDiv {
     position: absolute;
@@ -24,12 +23,27 @@ body {
     flex-direction: column;
 }
 
+#logo-part {
+    width: 20vw;
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 100%;
+}
+
 #waitLogo {
-    -webkit-animation: spin1 2s infinite ease-in-out;
-    -moz-animation: spin1 2s infinite ease-in-out;
-    -o-animation: spin1 2s infinite ease-in-out;
-    -ms-animation: spin1 2s infinite ease-in-out;
-    animation: spin1 2s infinite ease-in-out;
+    grid-column: 1;
+    grid-row: 1;
+    margin: 25%;
+}
+
+#waitSpinner {
+    grid-column: 1;
+    grid-row: 1;
+    -webkit-animation: spin1 0.5s infinite linear;
+    -moz-animation: spin1 0.5s infinite linear;
+    -o-animation: spin1 0.5s infinite linear;
+    -ms-animation: spin1 0.5s infinite linear;
+    animation: spin1 0.5s infinite linear;
     -webkit-transform-origin: 50% 50%;
     -moz-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
@@ -60,7 +74,7 @@ body {
 #waitTitle {
     text-align: center;
     font-size: 38px;
-    color: #15A4FA;
+    color: #BB464B;
 }
 .wrapper {
     height: calc(100% - 40px - 30px); /* nvabar top and bottom*/
@@ -132,8 +146,7 @@ body {
     border-right: 1px solid #efefef;
 }
 #exampleList #exampleBanner {
-    background-image: url("../css/pattern_ban_1.png");
-    background-repeat: repeat;
+    background-color: #E0684B;
     text-align: center;
     padding: 10px 0;
     margin-left: 2px;
@@ -141,7 +154,7 @@ body {
 #exampleList #exampleBanner h1 {
     text-align: center;
     font-weight: 700;
-    color: #00aeef;
+    color: #BB464B;
     font-size: 2em;
     margin: .67em 0;
 }
@@ -149,7 +162,6 @@ body {
     width: 80%;
     height: 0;
     display: block;
-    border-top: 1px solid #00aeef;
     margin: 0 auto 20px auto;
 }
 #exampleList #filterBar {
@@ -215,7 +227,7 @@ body {
     bottom: 20px;
     font-size: 15px;
     text-decoration: underline;
-    color: #00aeef;
+    color: #BB464B;
 }
 #exampleList .categoryContainer .itemLine .itemContent .itemLinePGLink {
     display: none;
@@ -225,7 +237,7 @@ body {
     text-align: right;
     font-size: 15px;
     text-decoration: underline;
-    color: #00aeef;
+    color: #BB464B;
 }
 
 .wrapper #jsEditor {
@@ -255,18 +267,16 @@ body {
     top: 50px;
     cursor: default;
     z-index:10;
-    background-color: #7283a0;
+    background-color: #E0684B;
     color:white;
     padding:5px;
     border-radius: 3px;
-    font-family: 'Montserrat';
     pointer-events: none;
     user-select: none;
 }
 .navbar {
     height: 40px;
     width: 100%;
-    font-family: "Montserrat";
     font-weight: 400;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -287,13 +297,13 @@ body {
 .navbar .title {
     height: 40px;
     padding-left: 10px;
-    color: #15A4FA;
+    color: #BB464B;
     display: inline-block;
 }
 .navbar .version {
     height: 40px;
     display: inline-block;
-    color: #7283a0;
+    color: #E0684B;
     margin-right: 20px;
 }
 .navbar .category {
@@ -309,9 +319,9 @@ body {
 .button {
     display: inline-block;
     height: 25px;
-    line-height: 25px;
+    line-height: 23px;
     color: white;
-    background-color: #7283a0;
+    background-color: #E0684B;
     margin: 0 2px 0 2px;
     padding: 0 10px 0 10px;
     font-size: 0.85em;
@@ -323,12 +333,12 @@ body {
 }
 .button:hover {
     cursor: pointer;
-    background-color: #15A4FA;
+    background-color: #BB464B;
 }
 .navbar .button.run {
     height: 30px;
-    line-height: 30px;
-    background-color: #15A4FA;
+    line-height: 28px;
+    background-color: #BB464B;
     font-size: 1.0em;
 }
 .navbar .select {
@@ -343,7 +353,7 @@ body {
     content: "\00a0 \00a0 \00a0 \f078";
 }
 .navbar .select .toDisplay {
-    border: 1px solid #7283a0;
+    border: 1px solid #E0684B;
     position: absolute;
     z-index: 10;
     left: 0;
@@ -354,7 +364,7 @@ body {
 }
 
 .navbar .select .subSelect .toDisplaySub {
-    border: 1px solid #7283a0;
+    border: 1px solid #E0684B;
     position: absolute;
     z-index: 10;
     left: 100%;
@@ -384,7 +394,7 @@ body {
 }
 .navbar .select .toDisplay .option.light {
     background-color: white;
-    color: #7283a0;
+    color: #E0684B;
 }
 .navbar .select .toDisplay .option.dark:hover {
     cursor: pointer;
@@ -392,7 +402,7 @@ body {
 }
 
 .navbar .select .toDisplayBig {
-    border: 1px solid #7283a0;
+    border: 1px solid #E0684B;
     border-radius: 5px;
     position: absolute;
     z-index: 10;
@@ -409,7 +419,7 @@ body {
 
 .navbar .select .toDisplayBig.light {
     background-color: white;    
-    color: #15A4FA;
+    color: #BB464B;
 }
 
 .navbar .select .toDisplayBig.dark {
@@ -448,7 +458,7 @@ body {
 }
 
 .navbar .select .toDisplayBig a.light {
-    color: #7283a0;
+    color: #E0684B;
 }
 
 
@@ -497,7 +507,6 @@ body {
     width:100%;
     line-height:30px;
     position:relative;
-    font-family: 'Montserrat';
 }
 .navbarBottom.dark {
     background-color: #333;
@@ -567,7 +576,6 @@ body {
     background-color: rgba(27, 27, 27, 0.75);
     border-color: #252525;
     color: white;
-    font-family: "Montserrat";
     font-size: 14px;
 }
 .save-layer .save-form .separator {
@@ -582,7 +590,6 @@ body {
     width: 350px;
     margin:auto;
     margin-bottom: 20px;
-    font-family: "Montserrat";
     padding:5px;
 }
 

Playground/index-local.html

@@ -7,6 +7,8 @@
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+
     <!--For canvas/code separator-->
     <script src="js/libs/split.js"></script>
 
@@ -376,7 +378,8 @@
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <span class="label" id="fpsLabel">FPS</span>
@@ -433,7 +436,10 @@
             <BR>
             <BR>
         </span>
-        <img src="waitlogo.png" id="waitLogo" />
+        <div id="logo-part">
+            <img src="v4.svg" id="waitLogo" />
+            <img src="spinner.svg" id="waitSpinner" />
+        </div>
     </div>
 
     <script src="https://code.jquery.com/jquery.js"></script>
@@ -454,4 +460,4 @@
     </script>
 </body>
 
-</html>
+</html>

Playground/index.html

@@ -5,25 +5,9 @@
     <title>Babylon.js Playground</title>
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
-    <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
-    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
 
     <script src="js/libs/pep.min.js"></script>
     <!--For canvas/code separator-->
@@ -54,7 +38,8 @@
 
     <!-- Extensions -->
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js" async></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"
+        async></script>
 
     <!-- Scene Manager -->
     <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
@@ -411,7 +396,8 @@
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <span class="label" id="fpsLabel">FPS</span>
@@ -468,7 +454,10 @@
             <BR>
             <BR>
         </span>
-        <img src="waitlogo.png" id="waitLogo" />
+        <div id="logo-part">
+            <img src="v4.svg" id="waitLogo" />
+            <img src="spinner.svg" id="waitSpinner" />
+        </div>
     </div>
 
     <script src="js/libs/jquery.min.js"></script>

Playground/indexStable.html

@@ -15,7 +15,8 @@
     <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
     <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
     <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="192x192"
+        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
     <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
@@ -24,6 +25,7 @@
     <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
     <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
 
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!--For canvas/code separator-->
@@ -401,7 +403,8 @@
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <span class="label" id="fpsLabel">FPS</span>
@@ -473,4 +476,4 @@
     </script>
 </body>
 
-</html>
+</html>

Viewer/assets/templates/default/loadingScreen.html

@@ -16,8 +16,8 @@
     }
 
     img.loading-image {
-        -webkit-animation: spin 2s linear infinite;
-        animation: spin 2s linear infinite;
+        -webkit-animation: spin 0.75s linear infinite;
+        animation: spin 0.75s linear infinite;
     }
 
     @-webkit-keyframes spin {
@@ -39,4 +39,5 @@
     }
 </style>
 
-<img class="loading-image" src="{{loadingImage}}">
+<img class="loading-image" style="position:absolute" src="{{loadingImage}}">
+<img class="static-loading-image" style="position:absolute" src="{{staticLoadingImage}}">

Viewer/assets/templates/default/navbar.html

@@ -85,6 +85,7 @@
     .logo-button img {
         height: 20px;
         width: 20px;
+        padding-top: 5px;
     }
 
     .types {

Viewer/src/assets/img.ts

@@ -2,4 +2,5 @@ export const babylonLogo = require('../../assets/img/BabylonJS_Logo_Small.png');
 export const close = require('../../assets/img/close.png');
 export const fullscreen = require('../../assets/img/fullscreen.png');
 export const helpCircle = require('../../assets/img/help-circle.png');
-export const loading = require('../../assets/img/loading.png');
+export const loading = require('../../assets/img/spinner.png');
+export const staticLoading = require('../../assets/img/loading.png');

Viewer/src/configuration/types/default.ts

@@ -28,7 +28,8 @@ export let defaultConfiguration: ViewerConfiguration = deepmerge(renderOnlyDefau
             html: loadingScreen,
             params: {
                 backgroundColor: "#000000",
-                loadingImage: images.loading
+                loadingImage: images.loading,
+                staticLoadingImage: images.staticLoading
             }
         },
         viewer: {

sandbox/Assets/Icon_Down.svg

@@ -1,35 +1 @@
-<?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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style></defs><title>DownArrowIcon</title><g id="Layer_2" data-name="Layer 2"><g id="Redlines"><path class="cls-1" d="M23.14,30.07l1.42-1.42L34.85,38.94,45.14,28.65l1.41,1.42L34.85,41.78Z"/><rect class="cls-2" width="70" height="70"/></g></g></svg>

sandbox/Assets/Icon_OpenFile.svg

@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Icon_OpenFile</title><path class="cls-1" d="M49.45,113H96.53v4.7H44.74V42.34h41L106,62.53V80h-4.71V65.88H82.41V47h-33ZM87.12,61.17H97.89L87.12,50.39Zm24.82,37.55-6-6v24.9h-4.71V92.76l-6,6-3.31-3.31L103.6,83.75l11.66,11.66Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style></defs><title>Asset 11</title><g id="Layer_2" data-name="Layer 2"><g id="Page_Elements" data-name="Page Elements"><path class="cls-1" d="M26.67,44.77H41.88v1.52H25.15V22H38.4l6.52,6.52v5.64H43.4V29.56H37.31V23.48H26.67ZM38.83,28h3.49l-3.49-3.48Zm8,12.13-1.93-1.92v8H43.4v-8l-1.94,1.92L40.39,39.1l3.77-3.77,3.76,3.77Z"/><rect class="cls-2" width="70" height="70"/></g></g></svg>

sandbox/Assets/Icon_Pause.svg

@@ -1,35 +1 @@
-<?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="M314.1,228.3h28.6v343.5h-28.6V228.3z M485.9,228.3v343.5h-28.6V228.3H485.9z"/>
-	</g>
-</g>
-<g id="Redliner:_Redlines">
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><title>PauseIcon</title><g id="Layer_2" data-name="Layer 2"><g id="Redlines"><rect class="cls-1" width="70" height="70"/><path class="cls-2" d="M28.83,44.37v-20h2v20Zm10-20h2v20h-2Z"/></g></g></svg>

sandbox/Assets/Icon_Play.svg

@@ -1,35 +1 @@
-<?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="M569.5,404.1L288.3,601V207.2L569.5,404.1z M316.4,546.9l204.1-142.8L316.4,261.3V546.9z"/>
-	</g>
-</g>
-<g id="Redliner:_Redlines">
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><title>PlayIcon</title><g id="Layer_2" data-name="Layer 2"><g id="Redlines"><rect class="cls-1" width="70" height="70"/><path class="cls-2" d="M28.83,25.13l16,10-16,10Zm2,3.61V41.52l10.22-6.39Z"/></g></g></svg>

sandbox/Assets/Icon_Up.svg

@@ -1,35 +1 @@
-<?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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style></defs><title>UpArrowIcon</title><g id="Layer_2" data-name="Layer 2"><g id="Redlines"><path class="cls-1" d="M34.85,29.78,24.56,40.06l-1.42-1.41L34.85,26.94l11.7,11.71-1.42,1.41Z"/><rect class="cls-2" width="70" height="70"/></g></g></svg>

sandbox/animation.js

@@ -7,6 +7,12 @@ var dropdownLabel = document.getElementById("dropdownLabel");
 var dropdownContent = document.getElementById("dropdownContent");
 var playBtn = document.getElementById("playBtn");
 var slider = document.getElementById("slider");
+var clickInterceptor = document.getElementById("click-interceptor");
+
+clickInterceptor.addEventListener("mousedown", function() {
+    displayDropdownContent(false);
+    displayDropdownContentEnv(false);
+});
 
 // event on the dropdown
 function formatId(name) {
@@ -18,11 +24,15 @@ function displayDropdownContent(display) {
         dropdownContent.style.display = "flex";
         chevronDown.style.display = "inline";
         chevronUp.style.display = "none";
+        dropdownBtn.classList.add("open");
+        clickInterceptor.classList.remove("hidden");
     }
     else {
         dropdownContent.style.display = "none";
         chevronDown.style.display = "none";
         chevronUp.style.display = "inline";
+        dropdownBtn.classList.remove("open");
+        clickInterceptor.classList.add("hidden");
     }
 }
 dropdownBtn.addEventListener("click", function() {

sandbox/environment.js

@@ -25,15 +25,19 @@ var defaultSkyboxIndex = readLocaStorageValue("defaultSkyboxId", 0);
 
 function displayDropdownContentEnv(display) {
     if (display) {
-        dropdownContentEnv.style.display = "block";
+        dropdownContentEnv.classList.remove("hidden");
+        btnEnvironment.classList.add("open");
+        clickInterceptor.classList.remove("hidden");
     }
     else {
-        dropdownContentEnv.style.display = "none";
+        dropdownContentEnv.classList.add("hidden");
+        btnEnvironment.classList.remove("open");
+        clickInterceptor.classList.add("hidden");
     }
 }
 
 btnEnvironment.addEventListener('click', function() {
-    displayDropdownContentEnv(dropdownContentEnv.style.display !== "block");
+    displayDropdownContentEnv(dropdownContentEnv.classList.contains("hidden"));
 }, false);
 
 addEnvironmentLoader = function(index) {

sandbox/index-local.html

@@ -4,7 +4,9 @@
 <head>
     <title>BabylonJS - Sandbox</title>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
     <link href="index.css" rel="stylesheet" />
+    <link href="index-media.css" rel="stylesheet" />
     <script src="../dist/preview%20release/ammo.js"></script>
     <script src="../dist/preview%20release/cannon.js"></script>
     <script src="../dist/preview%20release/Oimo.js"></script>
@@ -18,43 +20,47 @@
         <div id="canvasZone">
             <canvas id="renderCanvas" touch-action="none"></canvas>
         </div>
+        <div id="click-interceptor" class="hidden">
+        </div>
         <div id="footer" class="footer">
+            <div class="footerLeft">
+                <img id="logoImg" src="Assets/BabylonIdentity.svg">
+            </div>
             <div id="animationBar">
+                <div class="row">
+                    <button id="playBtn" class="pause">
+                        <img id="playImg" src="Assets/Icon_Play.svg">
+                        <img id="pauseImg" src="Assets/Icon_Pause.svg">
+                    </button>
+                    <input id="slider" type="range" min="0" max="100" value="0" step="any">
+                </div>
                 <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>
+                        <div id="dropdownLabel"></div>
                     </div>
                     <div id="dropdownContent">
                     </div>
                 </div>
-                <div class="row">
-                    <button id="playBtn" class="pause">
-                        <img id="playImg" src="Assets/Icon_Play.svg">
-                        <img id="pauseImg" src="Assets/Icon_Pause.svg">
-                    </button>
-                    <input id="slider" type="range" min="0" max="100" value="0" step="any">
-                </div>
             </div>
             <div class="footerRight">
-                <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
-                        alt="Display inspector" title="Display inspector" /></a>
-                <a href="javascript:void(null);" id="btnEnvironment" class="hidden"><img src="./Assets/IBLicon.svg"
-                        alt="Select environment" title="Select environment" />
-                </a>
-                <div id="dropdownContent-env" class="hidden">
-                </div>
                 <a href="javascript:void(null);">
                     <div class="custom-upload"
                         title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
                         <input type="file" id="files" multiple />
                     </div>
                 </a>
+                <a href="javascript:void(null);" id="btnEnvironment" class="hidden"><img src="./Assets/IBLicon.svg"
+                        alt="Select environment" title="Select environment" />
+                </a>
+                <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
+                        alt="Display inspector" title="Display inspector" /></a>
+                <div id="dropdownContent-env" class="hidden">
+                </div>
             </div>
         </div>
-        <div id="logo">
-        </div>
+        <img id="logo" src='./Assets/Logo_Fullscreen.svg' />
         <div id="errorZone"></div>
     </div>
     <script>

sandbox/index-media.css

@@ -0,0 +1,19 @@
+
+@media (max-width: 768px) {
+    html {
+        --footer-height: 50px;
+        --font-size: 16px;
+    }
+
+    .footer {       
+        grid-template-columns: 0px 1fr 150px
+    }
+
+    .dropdown {        
+        width: 100px;
+    }
+
+    #dropdownBtn {
+        width: 100px;
+    }
+}

sandbox/index.css

@@ -1,15 +1,36 @@
-html, body, #root {
+html {
+    --background: #2A2342;
+    --footer-background: #201936;
+    --footer-height: 70px;
+    --button-hover-color: #BB464B;
+    --button-hover-hover: #e0684b;
+    --button-hover-background:  #162D3A;
+    --font-size: 20px;
+}
+
+html, body, #root {
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     overflow: hidden;
-    font-family: "Segoe WP", "Segoe UI", "Verdana", "Arial";
-    background: #a9b5bc;
+    font-size: var(--font-size);
+    background: var(--background);
+    font-family: "acumin-pro-condensed";
+    font-weight: normal;
 }
 
 .hidden {
-    display: none;
+    display: none !important;
+}
+
+#click-interceptor {
+    position: absolute;
+    width: 100%;
+    height: 100%;    
+    z-index: 99;
+    top:0;
+    left:0;
 }
 
 #canvasZone {
@@ -18,7 +39,7 @@
     margin: 0;
     overflow: hidden;
     width: 100%;
-    height: calc(100% - 56px);   
+    height: calc(100% - var(--footer-height));   
 }
 
 #renderCanvas {
@@ -37,58 +58,75 @@ a {
     color: white;
 }
 
-    a:visited {
-        color: white;
-    }
-
+a:visited {
+    color: white;
+}
 
 .footer {
     position: relative;
     width: 100%;
-    height: 56px;
+    height: var(--footer-height);
     margin: 0;
     padding: 0;
-    background-color: #3B789A;
+    background-color:var(--footer-background);
     font-size: 0;
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 201px 1fr 210px
+}
+
+#logoImg {
+    height: var(--footer-height);
+    width: 161px;
+}
+
+.footerLeft {
+    display: grid;
+    grid-column: 1;
+    grid-row: 1;
+    padding-left: 40px;
+    align-content: center; 
+    overflow: hidden;
 }
 
 .footerRight {
-    display: block;
-    float: right;
-    bottom: 0;
-    right: 0px;
-    top: 0px;
+    display: flex;
+    flex-direction: row-reverse;
+    grid-column: 3;
+    grid-row: 1;
 }
 
 .footerRight a {
     float: left; /* Float links side by side */
-    width: 56px; 
-    height: 56px;
+    width: var(--footer-height);
+    height: var(--footer-height);
     margin: 0px;
     padding: 0;
     transition: all 0.3s ease; /* Add transition for hover effects */
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    cursor: pointer;
 }
 
 .footerRight a img {
-    width: 36px; 
-    height: 36px;
-    margin: 10px;
+    width: var(--footer-height);
+    height: var(--footer-height);
 }
 
 .footerRight a:hover {
-    background-color: #2c5a74; /* Add a hover color */    
+    background-color: var(--button-hover-color);
 }
 
 .footerRight a:active {
-    background-color: #162D3A; /* Add a hover color */
+    background-color: var(--button-hover-background);
 }
 
 .custom-upload {
     position: relative;
     background:url(./Assets/Icon_OpenFile.svg) center right no-repeat;
-    width: 36px; 
-    height: 36px;
-    margin: 10px;
+    width: var(--footer-height);
+    height: var(--footer-height);
 }
 
 .custom-upload input[type=file]
@@ -107,11 +145,10 @@ a {
 #logo {
     position: absolute;
     top:0;
-    width: 100%;
-    height: 100%;
-    background: url('./Assets/Logo_Fullscreen.svg') no-repeat 0 0;
-    background-position: center;
-    background-size: 50%;
+    width: 20%;
+    height: 20%;
+    top: 30%;
+    left: 40%;
     pointer-events: none;
 }
 
@@ -121,7 +158,7 @@ a {
     color: #fff;
     height: 50px;
     width: 100%;
-    bottom: 5%;    
+    bottom: 50px;    
 }
 #btnDownArrow {
     position: absolute;
@@ -144,7 +181,7 @@ a {
     -webkit-transition: -webkit-transform 0.25s ease-in-out;
     z-index: 3;
     cursor: default;
-    background-color: #3B789A;
+    background-color: var(--footer-background);
 }
 
 .loadingText {
@@ -182,14 +219,15 @@ a {
 
 /* animation bar */
 #animationBar {
-    position: absolute;
-    bottom: 0px;
+    margin-left: 10px;
     display: none;
     align-items: center;
     color: white;
-    width: calc(100% - 168px);
     min-height: 30px;
-    font-size: 14px;
+    height: var(--footer-height);
+    background-color: var(--footer-background);    
+    grid-column: 2;
+    grid-row: 1;
 }
 
 .row {
@@ -205,14 +243,9 @@ a {
     margin: 0px;
 }
 
-#animationBar {
-    background-color: #3B789A;
-}
-
-#animationBar img {
-    width: 36px;
-    height: 36px;
-    margin: 10px;
+#playBtn img {
+    width: var(--footer-height);
+    height: var(--footer-height);
 }
 
 .dropdown {
@@ -221,10 +254,18 @@ a {
     width: 200px;
 }
 
-#dropdownBtn,
 #playBtn {
     display: flex;
     align-items: center;
+    height: var(--footer-height);
+    width: var(--footer-height);
+}
+
+#dropdownBtn {
+    display: flex;
+    height: var(--footer-height);
+    width: 200px;
+    font-size: var(--font-size);
 }
 
 #playBtn {
@@ -233,11 +274,11 @@ a {
 }
 
     #playBtn:hover {
-        background-color: #2c5a74; /* Add a hover color */    
+        background-color: var(--button-hover-color);   
     }
 
     #playBtn:active {
-        background-color: #162D3A; /* Add a hover color */
+        background-color: var(--button-hover-background);
     }
 
     #playBtn:focus {
@@ -247,71 +288,94 @@ a {
 
 #dropdownContent-env {
     position: absolute;
-    bottom: 56px;
-    right: 0px;
-    border-bottom: 1px solid white; 
+    bottom: var(--footer-height);
+    right: 0px;     
+    z-index: 100;
 }
 
 #dropdownContent-env div  {
-    background-color: #3B789A;
+    background-color: var(--button-hover-color);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding: 10px 15px;
-    font-size: 16px;
-    width: 100px;
+    font-size: var(--font-size);
+    width: calc(2 * var(--footer-height));
     color: white;
     cursor: pointer;
+    height: 40px;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    align-content: center;
+    justify-content: center;
 }
 
 #dropdownContent-env div:hover {
-    background-color: #2c5a74;
+    background-color: var(--button-hover-hover); 
     transition: all 0.3s ease;
 }
 #dropdownContent-env div:active {
-    background-color: #162D3A;
+    background-color: var(--button-hover-background);
     transition: all 0.3s ease;
 }
 
-#dropdownLabel,
+#btnEnvironment.open {
+    background-color:var(--button-hover-color); 
+}
+
+#dropdownLabel {
+    align-self: center;
+    justify-self: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 #dropdownContent a  {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     padding: 10px 15px 10px 46px;
 }
-#dropdownLabel {
-    cursor: pointer;
-    width: 200px;
-    padding: 0px 15px 2px 5px;
-}
 
 #dropdownBtn:hover {
     cursor: pointer;
-    background-color: #2c5a74;
+    background-color:var(--button-hover-color); 
     transition: all 0.3s ease;
 }
 
+#dropdownBtn.open {
+    background-color:var(--button-hover-color); 
+}
+
 #dropdownContent a {
     max-width: 1000px;
     transition: color 0.5s;
+    height: 40px;
+    font-size: var(--font-size);
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    align-content: center;
+    justify-content: center;
 }
 #dropdownContent a:hover {
-    background-color: #2c5a74;
+    background-color: var(--button-hover-hover); 
     transition: all 0.3s ease;
 }
 #dropdownContent a:active {
-    background-color: #162D3A;
+    background-color: var(--button-hover-background);
     transition: all 0.3s ease;
 }
 
-#dropdownContent {
-    background-color: #3B789A;
+#dropdownContent {    
+    background-color: var(--button-hover-color);
     display: none;
-    position: absolute;
-    bottom: 56px;
-    border-bottom: 1px solid white; 
-    z-index: 1;
+    position: absolute;      
+    z-index: 100;
+    bottom: var(--footer-height);
     min-width: 135px;
     width: 200px;
     flex-direction: column;
@@ -324,16 +388,26 @@ a {
 }
 
 #chevronUp {
-    display: inline;
     margin-right: 0px;
     margin-left: 0px;
+    height: var(--footer-height);
+    width: var(--footer-height);
 }
 #chevronDown {
     display: none;
     margin-right: 0px;
     margin-left: 0px;
+    height: var(--footer-height);
+    width: var(--footer-height);
+}
+
+#dropdownLabel {
+    cursor: pointer;
+    width: 200px;
+    padding: 0px 15px 2px 5px;
 }
 
+
 #playBtn.play #pauseImg,
 #playBtn.pause #playImg{
     display: none;
@@ -342,10 +416,12 @@ a {
 #slider {
     -webkit-appearance: none;
     cursor: pointer;
-    width: 1000px;
-    height: 50px;
+    width: 100%;
+    max-width: 820px;
+    height: var(--footer-height);
     outline: none;
     margin-left: 20px;
+    margin-right: 10px;
     background-color: transparent;
 }
 
@@ -356,7 +432,7 @@ a {
     height: 20px;
     border: 2px solid white;
     border-radius: 50%;
-    background: #3B789A;
+    background: var(--footer-background);
     margin-top: -10px;
 }
 #slider::-webkit-slider-runnable-track {
@@ -376,7 +452,7 @@ a {
     height: 20px;
     border: 2px solid white;
     border-radius: 50%;
-    background: #3B789A;
+    background: var(--footer-background);
 }
 #slider::-moz-range-track {
     background: white;
@@ -410,83 +486,6 @@ a {
     height: 16px;
     border: 2px solid white;
     border-radius: 50%;
-    background: #3B789A;
+    background: var(--footer-background);
     margin-top: 0px;
 }
-
-@media (min-width: 0px) {
-    #slider {
-        display: none;
-    }
-
-    .dropdown {        
-        width: 56px;
-    }    
-
-    #dropdownLabel {
-        display: none;
-    }   
-    #dropdownContent a {
-        max-width: 200px;
-    }
-}
-
-@media (min-width: 480px) {
-    #slider,
-    #dropdownLabel {
-        display: initial;
-    }
-    
-    #slider {
-        width: 100px;
-    }
-
-    .dropdown {        
-        width: 150px;
-    }
-
-    #dropdownContent {
-        width: 150px;
-    }
-}
-
-@media (min-width: 768px) {
-    #slider,
-    #dropdownLabel {
-        display: initial;
-    }
-    
-    #slider {
-        width: 300px;
-    }
-
-    .dropdown {        
-        width: 200px;
-    }
-
-    #dropdownContent {
-        width: 200px;
-    }
-}
-
-@media (min-width: 992px) {
-    #slider,
-    #dropdownLabel {
-        display: initial;
-    }
-    
-    #slider {
-        width: 400px;
-    }
-}
-
-@media (min-width: 1200px) {
-    #slider,
-    #dropdownLabel {
-        display: initial;
-    }
-    
-    #slider {
-        width: 700px;
-    }
-}

sandbox/index.html

@@ -7,29 +7,11 @@
     <meta name="keywords"
         content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
-
-    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
-    <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"
-        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
-    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
 
     <link href="index.css" rel="stylesheet" />
+    <link href="index-media.css" rel="stylesheet" />
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <script src="https://playground.babylonjs.com/js/libs/split.js"></script>
 
@@ -51,43 +33,47 @@
         <div id="canvasZone">
             <canvas id="renderCanvas" touch-action="none"></canvas>
         </div>
+        <div id="click-interceptor" class="hidden">
+        </div>
         <div id="footer" class="footer">
+            <div class="footerLeft">
+                <img id="logoImg" src="Assets/BabylonIdentity.svg">
+            </div>
             <div id="animationBar">
+                <div class="row">
+                    <button id="playBtn" class="pause">
+                        <img id="playImg" src="Assets/Icon_Play.svg">
+                        <img id="pauseImg" src="Assets/Icon_Pause.svg">
+                    </button>
+                    <input id="slider" type="range" min="0" max="100" value="0" step="any">
+                </div>
                 <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>
+                        <div id="dropdownLabel"></div>
                     </div>
                     <div id="dropdownContent">
                     </div>
                 </div>
-                <div class="row">
-                    <button id="playBtn" class="pause">
-                        <img id="playImg" src="Assets/Icon_Play.svg">
-                        <img id="pauseImg" src="Assets/Icon_Pause.svg">
-                    </button>
-                    <input id="slider" type="range" min="0" max="100" value="0" step="any">
-                </div>
             </div>
             <div class="footerRight">
-                <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
-                        alt="Display inspector" title="Display inspector" /></a>
-                <a href="javascript:void(null);" id="btnEnvironment" class="hidden"><img src="./Assets/IBLicon.svg"
-                        alt="Select environment" title="Select environment" />
-                </a>
-                <div id="dropdownContent-env" class="hidden">
-                </div>
                 <a href="javascript:void(null);">
                     <div class="custom-upload"
                         title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
                         <input type="file" id="files" multiple />
                     </div>
                 </a>
+                <a href="javascript:void(null);" id="btnEnvironment" class="hidden"><img src="./Assets/IBLicon.svg"
+                        alt="Select environment" title="Select environment" />
+                </a>
+                <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
+                        alt="Display inspector" title="Display inspector" /></a>
+                <div id="dropdownContent-env" class="hidden">
+                </div>
             </div>
         </div>
-        <div id="logo">
-        </div>
+        <img id="logo" src='./Assets/Logo_Fullscreen.svg' />
         <div id="errorZone"></div>
     </div>
     <script src="environment.js"></script>

sandbox/index.js

@@ -54,7 +54,7 @@ if (BABYLON.Engine.isSupported()) {
     var skyboxPath = skyboxes[defaultSkyboxIndex];
     var debugLayerEnabled = false;
 
-    engine.loadingUIBackgroundColor = "#a9b5bc";
+    engine.loadingUIBackgroundColor = "#2A2342";
 
     btnInspector.classList.add("hidden");
     btnEnvironment.classList.add("hidden");