diff options
| -rw-r--r-- | ext/css/settings.css | 23 | ||||
| -rw-r--r-- | ext/settings.html | 25 |
2 files changed, 42 insertions, 6 deletions
diff --git a/ext/css/settings.css b/ext/css/settings.css index 6d986c0b..19f587e9 100644 --- a/ext/css/settings.css +++ b/ext/css/settings.css @@ -2349,6 +2349,29 @@ input[type=number].dictionary-priority { word-break: break-all; } +.input-prevention-option-list { + margin-top: 0.375em; + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + width: 100%; + padding-left: 0.5em; + box-sizing: border-box; +} +.input-prevention-option-list-item { + display: flex; + flex-flow: row nowrap; + align-items: center; + width: 100%; +} +.input-prevention-option-list-item>:first-child { + flex: 0 0 auto; +} +.input-prevention-option-list-item>:not(:first-child) { + margin-left: 0.375em; + flex: 1 1 auto; +} + /* Environment-specific display */ :root[data-browser=unknown] [data-show-for-browser], diff --git a/ext/settings.html b/ext/settings.html index 0a5b633e..6c218bb5 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -2819,21 +2819,34 @@ <div id="input-action-prevention-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Input Action Prevention</div></div> <div class="modal-body"> - <strong>Prevent middle mouse button actions on:</strong> - <div class="flex-column-nowrap flex-column-nowrap-spaced margin-left"> - <label class="flex-label"> + <div> + Prevent middle mouse button actions on: + <a tabindex="0" class="more-toggle more-only" data-parent-distance="2">(?)</a> + </div> + <div class="more" hidden> + <p> + This option is used to disable the default action of the middle mouse button in different contexts. + This can be useful for preventing the scroll action that the middle mouse button is typically mapped to, + which is otherwise difficult to disable inside extension pages via other means. + </p> + <p> + <a tabindex="0" class="more-toggle" data-parent-distance="3">Less…</a> + </p> + </div> + <div class="input-prevention-option-list"> + <label class="input-prevention-option-list-item"> <label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onWebPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label> <span>Webpages</span> </label> - <label class="flex-label"> + <label class="input-prevention-option-list-item"> <label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onPopupPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label> <span>Popups</span> </label> - <label class="flex-label"> + <label class="input-prevention-option-list-item"> <label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onSearchPages"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label> <span>Search page</span> </label> - <label class="flex-label"> + <label class="input-prevention-option-list-item"> <label class="checkbox"><input type="checkbox" data-setting="scanning.preventMiddleMouse.onSearchQuery"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></label> <span>Search query</span> </label> |