Merge pull request #2428 from dannycolin/radio-hover-css

Fix broken radio focus styling in light mode
This commit is contained in:
Danny Colin 2022-11-29 12:05:10 -05:00 committed by GitHub
commit 65a36ee5be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 8 deletions

View file

@ -2,7 +2,7 @@
"name": "testpilot-containers", "name": "testpilot-containers",
"title": "Multi-Account Containers", "title": "Multi-Account Containers",
"description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.", "description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
"version": "8.1.0", "version": "8.1.1",
"author": "Andrea Marchesini, Luke Crouch, Lesley Norton, Kendall Werts, Maxx Crawford, Jonathan Kingston", "author": "Andrea Marchesini, Luke Crouch, Lesley Norton, Kendall Werts, Maxx Crawford, Jonathan Kingston",
"bugs": { "bugs": {
"url": "https://github.com/mozilla/multi-account-containers/issues" "url": "https://github.com/mozilla/multi-account-containers/issues"

View file

@ -107,8 +107,9 @@
--toggle-on-bg-focus-color: #0060df; --toggle-on-bg-focus-color: #0060df;
--toggle-on-border-color: #0060df; --toggle-on-border-color: #0060df;
--toggle-on-handle-bg-color: #fff; --toggle-on-handle-bg-color: #fff;
--usercontext-bg-hover-color: #e0e0e6; --usercontext-bg-hover-color: #f0f0fa;
--usercontext-bg-active-color: #e0e0e6; --usercontext-bg-focus-color: #e0e0e6;
--usercontext-bg-active-color: #cfcfd8;
--moz-vpn-tout-shadow: 0 0 7px 0 #9498a25e; --moz-vpn-tout-shadow: 0 0 7px 0 #9498a25e;
} }
@ -1884,15 +1885,25 @@ manage things like container crud */
margin-inline: auto; margin-inline: auto;
} }
/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */
.radio-choice > .radio-container > [type="radio"]:focus + label {
outline: solid 1px var(--input-border-focus-color);
-moz-outline-radius: 100%;
}
.radio-choice > .radio-container > [type="radio"]:checked + label { .radio-choice > .radio-container > [type="radio"]:checked + label {
background-color: var(--usercontext-bg-focus-color); background-color: var(--usercontext-bg-focus-color);
border-radius: 100%; border-radius: 100%;
} }
/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */ .radio-choice > .radio-container > [type="radio"]:checked + label:hover {
.radio-choice > .radio-container > [type="radio"]:focus + label { background-color: var(--usercontext-bg-hover-color);
outline: solid 1px var(--input-border-focus-color); border-radius: 100%;
-moz-outline-radius: 100%; }
.radio-choice > .radio-container > [type="radio"]:checked + label:active {
background-color: var(--usercontext-bg-active-color);
border-radius: 100%;
} }
.edit-container-panel fieldset { .edit-container-panel fieldset {

View file

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Firefox Multi-Account Containers", "name": "Firefox Multi-Account Containers",
"version": "8.1.0", "version": "8.1.1",
"incognito": "not_allowed", "incognito": "not_allowed",
"description": "__MSG_extensionDescription__", "description": "__MSG_extensionDescription__",
"icons": { "icons": {