[matrix] Add sans-serif font toggle to settings modal

* Add sans serif font toggle

* remove unnecessary boolean comparison from setFont

Co-authored-by: slice <[email protected]>

* Update checkbox title

Co-authored-by: slice <[email protected]>

* General cleanup of settings system

* Apply overflow hidden to modal

Co-authored-by: slice <[email protected]>

1 files changed, 52 insertions, 1 deletions

diff --git a/docs/_static/style.css b/docs/_static/style.css
index 3cd20d06..f3449dd7 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -15,6 +15,10 @@ body {
   padding: 0;
 }
 
+body.sans {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 p {
   margin-bottom: 8px;
 }
@@ -63,7 +67,7 @@ div.modal {
   top: 0;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   background-color: rgba(0,0,0,0.4);
   cursor: pointer;
 }
@@ -93,6 +97,53 @@ div.modal-content > span.close:focus {
   color: #444;
 }
 
+label.toggle {
+  position: relative;
+  float: right;
+  width: 42px;
+  height: 24px;
+}
+
+label.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+span.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 12px;
+  transition: .4s;
+}
+
+span.toggle-slider:before {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  transition: .4s;
+  background-color: #fff;
+  box-shadow: 0px 2px 4px rgba(0,0,0,0.54);
+}
+
+label.toggle input:checked + span.toggle-slider {
+  background-color: #2591c4;
+}
+
+label.toggle input:checked + span.toggle-slider:before {
+  transform: translateX(18px);
+}
+
+ 
 div.related {
   padding: 10px 10px;
   width: 100%;