feat: better modal

examples/web/index.css

@@ -263,6 +263,10 @@ p {
     padding: 4px 10px 4px 10px;
 }
 
+.tiny-button.padded-large {
+    padding: 4px 14px 4px 14px;
+}
+
 .tiny-button.rounded {
     padding: 4px 6px 4px 6px;
 }
@@ -346,6 +350,12 @@ p {
     height: 100%;
     justify-content: center;
     left: 0px;
+    opacity: 0;
+    -o-opacity: 0;
+    -ms-opacity: 0;
+    -moz-opacity: 0;
+    -khtml-opacity: 0;
+    -webkit-opacity: 0;
     pointer-events: none;
     position: fixed;
     text-align: center;
@@ -390,7 +400,15 @@ p {
 }
 
 .modal-container > .modal .modal-buttons {
-    font-size: 18px;
+    font-size: 20px;
     margin-top: 24px;
     text-align: center;
 }
+
+.modal-container > .modal .modal-buttons > .tiny-button {
+    margin-right: 12px;
+}
+
+.modal-container > .modal .modal-buttons > .tiny-button:last-child {
+    margin-right: 0px;
+}

examples/web/index.html

@@ -32,9 +32,9 @@
                         <dd><span id="rom-size">-</span> bytes</dd>
                         <dt>CPU Frequency</dt>
                         <dd>
-                            <span id="logic-frequency-minus" class="tiny-button tiny-button-left">-</span>
+                            <span id="logic-frequency-minus" class="tiny-button">-</span>
                             <span id="logic-frequency">-</span> Hz
-                            <span id="logic-frequency-plus" class="tiny-button tiny-button-right">+</span></dd>
+                            <span id="logic-frequency-plus" class="tiny-button">+</span></dd>
                         <dt>Framerate</dt>
                         <dd><span id="fps-count">-</span> fps</dd>
                     </dl>
@@ -42,25 +42,25 @@
                 <div id="separator-diag" class="separator"></div>
                 <div class="section">
                     <div class="button-area">
-                        <span id="button-pause" class="tiny-button tiny-button-left border padded">
+                        <span id="button-pause" class="tiny-button border padded">
                             <img src="res/pause.svg"/><span>Pause</span>
                         </span>
-                        <span id="button-reset" class="tiny-button tiny-button-left border padded">
+                        <span id="button-reset" class="tiny-button border padded">
                             <img src="res/reset.svg"/><span>Reset</span>
                         </span>
-                        <span id="button-benchmark" class="tiny-button tiny-button-left border padded">
+                        <span id="button-benchmark" class="tiny-button border padded">
                             <img src="res/bolt.svg"/><span>Benchmark</span>
                         </span>
-                        <span id="button-fullscreen" class="tiny-button tiny-button-left border padded">
+                        <span id="button-fullscreen" class="tiny-button border padded">
                             <img src="res/maximise.svg"/><span>Fullscreen</span>
                         </span>
-                        <span id="button-information" class="tiny-button tiny-button-left border padded enabled">
+                        <span id="button-information" class="tiny-button border padded enabled">
                             <img src="res/info.svg"/><span>Information</span>
                         </span>
-                        <span id="button-debug" class="tiny-button tiny-button-left border padded">
+                        <span id="button-debug" class="tiny-button border padded">
                             <img src="res/bug.svg"/><span>Debug</span>
                         </span>
-                        <span id="button-theme" class="tiny-button tiny-button-left border padded">
+                        <span id="button-theme" class="tiny-button border padded">
                             <img src="res/marker.svg"/><span>Theme</span>
                         </span>
                     </div>
@@ -78,11 +78,11 @@
                         <img class="large" src="res/close.svg"/>
                     </span>
                 </div>
-                <h2 class="modal-title">Title</h2>
+                <h2 class="modal-title">Alert</h2>
                 <p>Are you sure you want to cancel the operation?</p>
                 <div class="modal-buttons">
-                    <span class="tiny-button tiny-button-left  border padded">Cancel</span>
-                    <span class="tiny-button border padded">Confirm</span>
+                    <span class="tiny-button border padded-large">Cancel</span>
+                    <span class="tiny-button border padded-large">Confirm</span>
                 </div>
             </div>
         </div>