Sticky toolbar and scrollable fixed-height content in browserAction popups.

This commit is contained in:
hackademix 2022-03-13 23:11:23 +01:00
parent e3d4b80492
commit 827de86f4d
3 changed files with 29 additions and 24 deletions

View File

@ -5,7 +5,7 @@
*/ */
html:not(.mobile) { html:not(.mobile) {
overflow-x: hidden; overflow: hidden;
} }
body { body {
@ -15,9 +15,15 @@ body {
html:not(.mobile) > body { html:not(.mobile) > body {
width: 600px; width: 600px;
padding: 0 .5em 0 0; padding: 0;
} }
html:not(.mobile) #scrollable {
overflow: auto;
max-height: 550px;
}
#top { #top {
font-size: 1em; font-size: 1em;
position: relative; position: relative;

View File

@ -21,7 +21,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
</head> </head>
<body tabindex="-1" id="noscript-popup"> <body tabindex="-1" id="noscript-popup">
<div tabindex="-1" id="main">
<div id="top"> <div id="top">
<button aria-role="button" id="close" class="close icon" title="__MSG_Close__"></button> <button aria-role="button" id="close" class="close icon" title="__MSG_Close__"></button>
<button aria-role="button" id="reload" class="reload icon" title="__MSG_Reload__"></button> <button aria-role="button" id="reload" class="reload icon" title="__MSG_Reload__"></button>
@ -37,28 +36,29 @@ SPDX-License-Identifier: GPL-3.0-or-later
<button aria-role="button" id="temp-trust-page" class="toggle icon" title="__MSG_TempTrustPage__"></button> <button aria-role="button" id="temp-trust-page" class="toggle icon" title="__MSG_TempTrustPage__"></button>
<button aria-role="button" id="revoke-temp" class="toggle icon" title="__MSG_RevokeTemp__"></button> <button aria-role="button" id="revoke-temp" class="toggle icon" title="__MSG_RevokeTemp__"></button>
</div> </div>
<div id="message" class="hidden"></div>
<div id="high-contrast-chooser" class="opt-group">
<span id="highContrast-opt">
<input type="checkbox" id="opt-highContrast">
<label for="opt-highContrast" id="lbl-highContrast">__MSG_HighContrast__</label>
</span>
</div>
<div id="incognito-ui-chooser" class="opt-group">
<span id="overrideTorBrowserPolicy-opt">
<input type="checkbox" id="opt-overrideTorBrowserPolicy">
<label for="opt-overrideTorBrowserPolicy" id="lbl-opt-overrideTorBrowserPolicy"
><span class="tor">__MSG_OptOverrideTorBrowserPolicy__</span><span class="not-tor">__MSG_OptIncognitoPerm__</span></label>
</span>
</div>
<div id="xssChoices">
</div>
<div id="content"></div>
<div id="sites"></div>
<div id="buttons">
<div id="scrollable">
<div id="message" class="hidden"></div>
<div id="high-contrast-chooser" class="opt-group">
<span id="highContrast-opt">
<input type="checkbox" id="opt-highContrast">
<label for="opt-highContrast" id="lbl-highContrast">__MSG_HighContrast__</label>
</span>
</div>
<div id="incognito-ui-chooser" class="opt-group">
<span id="overrideTorBrowserPolicy-opt">
<input type="checkbox" id="opt-overrideTorBrowserPolicy">
<label for="opt-overrideTorBrowserPolicy" id="lbl-opt-overrideTorBrowserPolicy"
><span class="tor">__MSG_OptOverrideTorBrowserPolicy__</span><span class="not-tor">__MSG_OptIncognitoPerm__</span></label>
</span>
</div>
<div id="xssChoices">
</div>
<div id="content"></div>
<div id="sites"></div>
<div id="buttons"></div>
</div> </div>
</div>
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>
</html> </html>

View File

@ -173,7 +173,6 @@ input[type="checkbox"] {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
width: 100%; width: 100%;
overflow-y: auto;
background: var(--bg-color2); background: var(--bg-color2);
} }
.sites tr, .sites td { .sites tr, .sites td {