Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 3527756943)
This commit is contained in:
Hugo Locurcio 2021-02-24 22:46:43 +01:00 committed by Rémi Verschelde
parent 8190305075
commit 3b4dd88e56

View file

@ -5,8 +5,7 @@
<meta name='viewport' content='width=device-width, user-scalable=no' /> <meta name='viewport' content='width=device-width, user-scalable=no' />
<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' /> <link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
<title>Godot Engine Web Editor ($GODOT_VERSION)</title> <title>Godot Engine Web Editor ($GODOT_VERSION)</title>
<style type='text/css'> <style>
*:focus { *:focus {
/* More visible outline for better keyboard navigation. */ /* More visible outline for better keyboard navigation. */
outline: 0.125rem solid hsl(220, 100%, 62.5%); outline: 0.125rem solid hsl(220, 100%, 62.5%);
@ -40,13 +39,30 @@
filter: brightness(82.5%); filter: brightness(82.5%);
} }
#tabs-buttons {
/* Match the default background color of the editor window for a seamless appearance. */
background-color: #202531;
}
#tab-game {
/* Use a pure black background to better distinguish the running project */
/* from the editor window, and to use a more neutral background color (no tint). */
background-color: black;
/* Make the background span the entire page height. */
min-height: 100vh;
}
#canvas, #gameCanvas { #canvas, #gameCanvas {
display: block; display: block;
margin: 0; margin: 0;
color: white; color: white;
} }
#canvas:focus, #gameCanvas:focus { /* Don't show distracting focus outlines for the main tabs' contents. */
#tab-editor canvas:focus,
#tab-game canvas:focus,
#canvas:focus,
#gameCanvas:focus {
outline: none; outline: none;
} }
@ -200,9 +216,11 @@
<a href="demo.zip">(Try this for example)</a> <a href="demo.zip">(Try this for example)</a>
<br /> <br />
<br /> <br />
<button id="startButton" class="btn" style="margin-bottom: 4rem">Start Godot editor</button> <button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
<br /> <br />
<button class="btn" onclick="clearPersistence()">Clear persistent data</button> <button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
<br />
<a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
</div> </div>
</div> </div>
<div id='tab-editor' style="display: none;"> <div id='tab-editor' style="display: none;">
@ -233,8 +251,8 @@
</div> </div>
</div> </div>
<script type='text/javascript' src='godot.tools.js'></script> <script src='godot.tools.js'></script>
<script type='text/javascript'>//<![CDATA[ <script>//<![CDATA[
var editor = null; var editor = null;
var game = null; var game = null;
@ -258,7 +276,7 @@
}); });
} }
if (!window.confirm("Are you sure you want to delete all the locally stored files?")) { if (!window.confirm("Are you sure you want to delete all the locally stored files?\nClicking \"OK\" will permanently remove your projects and editor settings!")) {
return; return;
} }
Promise.all([ Promise.all([