[matrix] Modal cleanup

* General modal cleanup

* Remove second scrollbar caused by modal

3 files changed, 40 insertions, 29 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index 3f0e50d1..94de08a0 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -9,7 +9,7 @@ let sidebar;
 
 function closeModal(modal) {
   activeModal = null;
-  modal.style.display = 'none';
+  modal.hidden = true;
 }
 
 function openModal(modal) {
@@ -18,7 +18,7 @@ function openModal(modal) {
   }
 
   activeModal = modal;
-  modal.style.removeProperty('display');
+  modal.hidden = false;
 }
 
 function updateSetting(element) {
@@ -30,7 +30,11 @@ function updateSetting(element) {
 
 function getRootAttributeToggle(attributeName, valueName) {
   function toggleRootAttribute(set) {
-    document.documentElement.setAttribute(`data-${attributeName}`, set ? valueName : null);
+    if (set) {
+      document.documentElement.setAttribute(`data-${attributeName}`, valueName);
+    } else {
+      document.documentElement.removeAttribute(`data-${attributeName}`);
+    }
   }
   return toggleRootAttribute;
 }
diff --git a/docs/_static/style.css b/docs/_static/style.css
index d8b6a2cb..c06d7cdb 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -303,7 +303,7 @@ div.modal {
   top: 0;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   background-color: rgba(0,0,0,0.4);
   cursor: pointer;
 }
@@ -334,6 +334,10 @@ div.modal-content > span.close:focus {
   color: #444;
 }
 
+div.modal input {
+  cursor: pointer;
+}
+
 /* copy button */
 
 .relative-copy {
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index f12cdab3..6f2fb3b7 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -77,31 +77,6 @@
     </aside>
     {#- The actual body of the contents #}
     <main class="grid-item">
-      <div id="settings" class="modal" style="display: none;" onclick="if (event.target == this){ closeModal(settingsModal); }">
-        <div class="modal-content">
-          <span class="close" onclick="closeModal(settingsModal);" title="Close">&times;</span>
-          <h1>Settings</h1>
-
-          <div class='setting'>
-            <h3>Use a sans-serif font:
-              <label class="toggle" title="Use a sans serif font? Your system font will be used, falling back to `sans-serif`.">
-                <input type="checkbox" name="useSansFont" onclick="updateSetting(this);">
-                <span class="toggle-slider"></span>
-              </label>
-            </h3>
-          </div>
-
-          <div class='setting'>
-            <h3>Enable dark theme:
-              <label class="toggle" title="Enable the dark theme.">
-                <input type="checkbox" name="useDarkTheme" onclick="updateSetting(this);">
-                <span class="toggle-slider"></span>
-              </label>
-            </h3>
-          </div>
-
-        </div>
-      </div>
       {% block body %} {% endblock %}
     </main>
 {%- block footer %}
@@ -132,5 +107,33 @@
       }
   </script>
   {%- endif %}
+
+  <div id="settings" class="modal" onclick="if (event.target == this){ closeModal(settingsModal); }" hidden>
+    <div class="modal-content">
+      <span class="close" onclick="closeModal(settingsModal);" title="Close">&times;</span>
+      <h1>Settings</h1>
+
+      <div class='setting'>
+        <h3>Use a sans-serif font:
+          <label class="toggle"
+            title="Use a sans serif font? Your system font will be used, falling back to `sans-serif`.">
+            <input type="checkbox" name="useSansFont" onclick="updateSetting(this);">
+            <span class="toggle-slider"></span>
+          </label>
+        </h3>
+      </div>
+
+      <div class='setting'>
+        <h3>Enable dark theme:
+          <label class="toggle" title="Enable the dark theme.">
+            <input type="checkbox" name="useDarkTheme" onclick="updateSetting(this);">
+            <span class="toggle-slider"></span>
+          </label>
+        </h3>
+      </div>
+
+    </div>
+  </div>
+
 </body>
 </html>