Mirrors
/
noscript
mirror of https://github.com/hackademix/noscript.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/ui/popup.css
View File

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

16
src/ui/popup.html
View File

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