diff --git a/p/scripts/global_view.js b/p/scripts/global_view.js index bc4a48b91..e9515be6a 100644 --- a/p/scripts/global_view.js +++ b/p/scripts/global_view.js @@ -73,6 +73,13 @@ function init_close_panel() { document.getElementById('overlay').classList.remove('visible'); return false; }; + document.addEventListener('keydown', ev => { + const k = (ev.key.trim() || ev.code).toUpperCase(); + if (k === 'ESCAPE' || k === 'ESC') { + document.querySelector('#overlay .close').click(); + } + return false; + }); } function init_global_view() { diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index ccbb33d3b..2ec7dea34 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -1095,7 +1095,7 @@ br { } #global > #panel.visible { - bottom: 1em; + bottom: 2%; visibility: visible; } /*=== Panel */ @@ -1103,7 +1103,7 @@ br { position: fixed; top: 0; bottom: 0; left: 0; right: 0; - background: rgba(0, 0, 0, 0.9); + background: rgba(0, 0, 0, 0.5); opacity: 0; transition: visibility .3s, opacity .3s; visibility: hidden; @@ -1118,8 +1118,8 @@ br { background: #fff; display: none; position: fixed; - top: 1em; bottom: 1em; - left: 2em; right: 2em; + top: 2%; bottom: 2%; + left: 3%; right: 3%; overflow: auto; } diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css index 92de5c2d6..d6f0d0168 100644 --- a/p/themes/base-theme/template.rtl.css +++ b/p/themes/base-theme/template.rtl.css @@ -1090,7 +1090,7 @@ br { } #global > #panel.visible { - bottom: 1em; + bottom: 2%; visibility: visible; } /*=== Panel */ @@ -1098,7 +1098,7 @@ br { position: fixed; top: 0; bottom: 0; right: 0; left: 0; - background: rgba(0, 0, 0, 0.9); + background: rgba(0, 0, 0, 0.5); opacity: 0; transition: visibility .3s, opacity .3s; visibility: hidden; @@ -1113,8 +1113,8 @@ br { background: #fff; display: none; position: fixed; - top: 1em; bottom: 1em; - right: 2em; left: 2em; + top: 2%; bottom: 2%; + left: 3%; right: 3%; overflow: auto; }