filippodb/LocalCDN-Firefox-Chrome-Brave
1
0
Fork 0
mirror of https://codeberg.org/nobody/LocalCDN.git synced 2025-02-01 20:07:20 +01:00
Code Issues Projects Releases Wiki Activity

Popup accessibility improved (#1041)

Browse Source
This commit is contained in:
nobody 2022-07-04 06:37:46 +02:00
parent d23ab7b0e7
commit f8d57b47e2
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
5 changed files with 193 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
pages/popup/popup.css
View File

@ -55,7 +55,7 @@ header {
.subpanel:last-child {
border-bottom: solid #d3d3d3 1px;
padding-bottom: 4px;
padding-bottom: 8px;
}
.content {
@ -267,79 +267,6 @@ footer {
filter: contrast(0.5);
}
/**
* Toggles
*/
#protection-toggle, #manipulateDOM-toggle, #google-fonts-toggle {
cursor: pointer;
float: right;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.switch {
display: inline-block;
height: 18px;
position: relative;
width: 40px;
}
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.slider, .slider-disabled {
background-color: #b40000;
border-radius: 34px;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
}
.slider::before, .slider-disabled::before {
background-color: #f9f9fa;
border-radius: 50%;
bottom: 2px;
content: "";
height: 14px;
left: 2px;
position: absolute;
-webkit-transition: 0.3s;
transition: 0.3s;
width: 14px;
}
input:checked + .slider {
background-color: #6bb798;
}
input:checked + .slider::before {
-webkit-transform: translateX(22px);
-ms-transform: translateX(22px);
transform: translateX(22px);
}
.slider-disabled {
background-color: lightgray;
cursor: not-allowed;
}
.slider:hover {
background-color: #7e0000;
}
input:checked + .slider:hover {
background-color: #4b806a;
}
/**
* Miscellaneous
@ -384,7 +311,9 @@ input:checked + .slider:hover {
color: #555;
display: flex;
font-style: italic;
height: 24px;
overflow: hidden;
padding: 4px 0;
white-space: nowrap;
}
@ -405,6 +334,8 @@ input:checked + .slider:hover {
width: 100%;
}
/**
* Compatibility
*/
@ -497,27 +428,6 @@ input:checked + .slider:hover {
background-image: url("../../icons/logging-light.svg");
}
input:checked + .slider {
background-color: #6bb798;
}
.slider {
background-color: #b54b4b;
}
.slider::before {
background-color: #323232;
}
.slider-disabled {
background-color: #777;
cursor: not-allowed;
}
.slider-disabled::before {
background-color: #323232;
}
#label-donate {
background-color: #404040;
color: #bbb;

42
pages/popup/popup.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="popup.css">
<link rel="stylesheet" type="text/css" href="toggle.css">
<link rel="stylesheet" type="text/css" href="../base.css">
</head>
<body>
@ -27,10 +28,17 @@
<div id="website-context" class="panel hidden">
<div class="subpanel">
<div id="protection-toggle">
<label class="switch">
<input type="checkbox" id="protection-toggle-switch">
<span id="toggle-switch-domain" class="slider"></span>
</label>
<label class='toggle' for='protection-toggle-switch'>
<input type='checkbox' name='protection-toggle-switch' id='protection-toggle-switch' class="toggle__input">
<span class="toggle__display" hidden>
<svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
<path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
</svg>
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
<path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
</svg>
</span>
</label>
</div>
<div class="label-domain">
<span id="domain-indicator"></span>
@ -38,9 +46,16 @@
</div>
<div class="subpanel" id="div-manipulateDOM">
<div id="manipulateDOM-toggle">
<label class="switch">
<input type="checkbox" id="manipulateDOM-toggle-switch">
<span id="toggle-switch-manipulateDOM" class="slider"></span>
<label class='toggle' for='manipulateDOM-toggle-switch'>
<input type='checkbox' name='manipulateDOM-toggle-switch' id='manipulateDOM-toggle-switch' class="toggle__input">
<span class="toggle__display" hidden>
<svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
<path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
</svg>
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
<path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
</svg>
</span>
</label>
</div>
<div id="label-manipulateDOM" class="label-domain">
@ -49,9 +64,16 @@
</div>
<div class="subpanel" id="div-google-fonts">
<div id="google-fonts-toggle">
<label class="switch">
<input type="checkbox" id="google-fonts-toggle-switch">
<span id="toggle-switch-google-fonts" class="slider"></span>
<label class='toggle' for='google-fonts-toggle-switch'>
<input type='checkbox' name='google-fonts-toggle-switch' id='google-fonts-toggle-switch' class="toggle__input">
<span class="toggle__display" hidden>
<svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
<path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
</svg>
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
<path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
</svg>
</span>
</label>
</div>
<div class="label-domain">

12
pages/popup/popup.js
View File

@ -102,7 +102,7 @@ popup._renderContextualContents = function () {
popup._renderDomainAllowlistPanel = function () {
let websiteContextElement, protectionToggleElement, domainIndicatorElement,
manipulateDOMToggleElement, manipulateDOMToggleStyle, googleFontsToggleElement, googleFontsToggleStyle;
manipulateDOMToggleElement, googleFontsToggleElement;
websiteContextElement = document.getElementById('website-context');
websiteContextElement.setAttribute('class', 'panel');
@ -113,10 +113,8 @@ popup._renderDomainAllowlistPanel = function () {
protectionToggleElement.setAttribute('dir', popup._scriptDirection);
domainIndicatorElement.innerText = popup._domain;
manipulateDOMToggleElement = document.getElementById('manipulateDOM-toggle-switch');
manipulateDOMToggleStyle = document.getElementById('toggle-switch-manipulateDOM');
googleFontsToggleElement = document.getElementById('google-fonts-toggle-switch');
googleFontsToggleStyle = document.getElementById('toggle-switch-google-fonts');
if (popup._blockGoogleFonts === false) {
document.getElementById('div-google-fonts').hidden = true;
@ -124,17 +122,12 @@ popup._renderDomainAllowlistPanel = function () {
if (popup._domainIsAllowlisted === true) {
manipulateDOMToggleElement.disabled = true;
manipulateDOMToggleStyle.setAttribute('class', 'slider-disabled');
googleFontsToggleElement.disabled = true;
googleFontsToggleStyle.setAttribute('class', 'slider-disabled');
protectionToggleElement.checked = false;
protectionToggleElement.addEventListener('click', popup._enableProtection);
return;
}
googleFontsToggleStyle.setAttribute('class', 'slider');
googleFontsToggleElement.disabled = false;
if (popup._domainGoogleFonts) {
@ -146,7 +139,6 @@ popup._renderDomainAllowlistPanel = function () {
}
manipulateDOMToggleElement.disabled = false;
manipulateDOMToggleStyle.setAttribute('class', 'slider');
protectionToggleElement.checked = true;
protectionToggleElement.addEventListener('click', popup._disableProtection);
@ -164,6 +156,8 @@ popup._renderDomainAllowlistPanel = function () {
manipulateDOMToggleElement.checked = true;
manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
}
websiteContextElement.style.display = 'block';
};
popup._renderInjectionPanel = function (groupedInjections) {

151
pages/popup/toggle.css Normal file
View File

@ -0,0 +1,151 @@
/**
* Toggles
*/
#protection-toggle, #manipulateDOM-toggle, #google-fonts-toggle {
cursor: pointer;
float: right;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.toggle {
cursor: pointer;
}
button.toggle {
background-color: transparent;
border: 0;
font: inherit;
padding: 0;
}
.toggle__input {
opacity: 0;
position: absolute;
}
.toggle__display {
align-items: center;
background-color: #b54b4b;
border-radius: 100vw;
box-sizing: content-box;
display: inline-flex;
height: 24px;
justify-content: space-around;
position: relative;
transition: 0.1s;
width: 44px;
}
.toggle__display::before {
background-color: white;
border-radius: 50%;
box-sizing: border-box;
content: "";
height: 20px;
left: 2px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
transition: inherit;
width: 20px;
will-change: transform;
z-index: 2;
}
.toggle__display:hover {
background-color: #7e0000;
}
.toggle:focus .toggle__display,
.toggle__input:focus + .toggle__display {
outline: 1px dotted #212121;
outline: 1px auto -webkit-focus-ring-color;
outline-offset: 2px;
}
.toggle:focus,
.toggle:focus:not(:focus-visible) .toggle__display,
.toggle__input:focus:not(:focus-visible) + .toggle__display {
outline: 0;
}
.toggle[aria-pressed="true"] .toggle__display,
.toggle__input:checked + .toggle__display {
background-color: #6bb798;
}
.toggle__input:checked + .toggle__display:hover {
background-color: #4b806a;
}
.toggle[aria-pressed="true"] .toggle__display::before,
.toggle__input:checked + .toggle__display::before {
transform: translate(100%, -50%);
}
.toggle[disabled] .toggle__display,
.toggle__input:disabled + .toggle__display {
background-color: lightgray;
cursor: not-allowed;
}
[dir="rtl"] .toggle__display::before {
left: auto;
right: 2px;
}
[dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
[dir="rtl"] .toggle__input:checked + .toggle__display::before {
transform: translate(-100%, -50%);
}
.toggle__icon {
color: inherit;
display: inline-block;
fill: currentcolor;
height: 1em;
overflow: hidden;
vertical-align: middle;
width: 1em;
}
.toggle__icon--cross {
color: #f0f0f0;
font-size: 85%;
}
.toggle__icon--checkmark {
color: #f0f0f0;
}
*,
::before,
::after {
box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
.toggle__icon--checkmark,
.toggle__icon--cross {
color: #323232;
}
.toggle__display::before {
background-color: #323232;
}
.toggle[disabled] .toggle__display,
.toggle__input:disabled + .toggle__display {
background-color: #777;
cursor: not-allowed;
}
.slider-disabled::before {
background-color: #323232;
}
}

4
pages/updates/updates.html
View File

@ -25,9 +25,9 @@
<h2>New in LocalCDN:</h2>
</div>
<div class="release-notes-area">
<p></p>
<p>Improved</p>
<ul>
<li></li>
<li>Popup accessibility improved (<a href="https://codeberg.org/nobody/LocalCDN/issues/1041">#1041</a>)</li>
</ul>
</div>
<div id="generator-section">