Better accessibility and styling for popup global buttons.

This commit is contained in:
hackademix 2022-02-25 09:42:12 +01:00
parent 0b8fdd7b47
commit 6ed38920bd
2 changed files with 11 additions and 10 deletions

View File

@ -175,8 +175,9 @@ body {
padding: 0;
}
#top > .icon:hover, #top > #top > .icon:active {
#top > .icon:hover:not(:disabled), #top > #top > .icon:active:not(:disabled) {
outline: 0;
filter: none;
transform: scale(1.2);
}
@ -238,7 +239,7 @@ body {
}
.disabled .toggle.icon, .toggle.icon:disabled {
opacity: .2;
opacity: .4;
pointer-events: none;
}

View File

@ -23,19 +23,19 @@ SPDX-License-Identifier: GPL-3.0-or-later
<body tabindex="-1" id="noscript-popup">
<div tabindex="-1" id="main">
<div id="top">
<a aria-role="a" id="close" class="close icon" title="__MSG_Close__"></a>
<a aria-role="a" id="reload" class="reload icon" title="__MSG_Reload__"></a>
<a aria-role="a" id="options" class="options icon" title="__MSG_Options__"></a>
<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="options" class="options icon" title="__MSG_Options__"></button>
<div class="hider">
<a aria-role="a" class="reveal" title="__MSG_Reveal__"></a>
<button aria-role="button" class="reveal" title="__MSG_Reveal__"></button>
<div class="hider-label">__MSG_Hider__</div>
<a class="hider-close">×</a>
</div>
<div class="spacer"></div>
<a aria-role="a" id="enforce" class="toggle icon"></a>
<a aria-role="a" id="enforce-tab" class="toggle icon"></a>
<a aria-role="a" id="temp-trust-page" class="toggle icon" title="__MSG_TempTrustPage__"></a>
<a aria-role="a" id="revoke-temp" class="toggle icon" title="__MSG_RevokeTemp__"></a>
<button aria-role="button" id="enforce" class="toggle icon"></button>
<button aria-role="button" id="enforce-tab" class="toggle icon"></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>
</div>
<div id="message" class="hidden"></div>
<div id="high-contrast-chooser" class="opt-group">