[matrix] Create settings modal

* Create settings modal

* Fix issue with spacing after settings button

* Fix issue with modal background on mobile devices

* Add close button to modal

* Add tooltip to close button

* Support closing modal with escape key

* Add missing semicolon to keydown event listener
This commit is contained in:
Josh
2020-05-27 16:22:21 +10:00
committed by Rapptz
parent 70c73084b3
commit 8be9ef38db
3 changed files with 84 additions and 7 deletions

View File

@ -1,7 +1,5 @@
/* this stuff uses a couple of themes as a base with some custom stuff added
In particular thanks to:
- Alabaster for being a good base
- Which thanks Flask + KR theme
- Sphinx Readable Theme
@ -58,6 +56,43 @@ div.footer a {
text-decoration: underline;
}
div.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
cursor: pointer;
}
div.modal-content {
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,0.54);
padding: 24px;
border-radius: 4px;
margin: 20% auto;
width: 40%;
cursor: initial;
}
div.modal-content > span.close {
color: #888;
float: right;
font-size: 24px;
font-weight: bold;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
}
div.modal-content > span.close:hover,
div.modal-content > span.close:focus {
color: #444;
}
div.related {
padding: 10px 10px;
width: 100%;
@ -617,4 +652,4 @@ div.code-block-caption {
background-color: transparent;
border-left: none;
}
}
}