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

* Add sans serif font toggle

* remove unnecessary boolean comparison from setFont

Co-authored-by: slice <ryaneft@gmail.com>

* Update checkbox title

Co-authored-by: slice <ryaneft@gmail.com>

* General cleanup of settings system

* Apply overflow hidden to modal

Co-authored-by: slice <ryaneft@gmail.com>
This commit is contained in:
Josh
2020-05-28 00:05:40 +10:00
committed by Rapptz
parent 8be9ef38db
commit c21919cee5
3 changed files with 102 additions and 8 deletions

View File

@ -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%;