Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-26 22:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1928678 - Update color swatch selection and focus styles to match spec. r=dwalker,tabbrowser-reviewers

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D229636
This commit is contained in:
Dão Gottwald 2024-11-21 19:17:22 +00:00
parent e5203a0cc4
commit ec4cf16719
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
browser/themes/shared/tabbrowser/tabs.css
View File

@ -899,18 +899,19 @@ tab-group {
.tab-group-editor-swatch {
width: 16px;
height: 16px;
border-radius: var(--border-radius-small);
padding: var(--focus-outline-offset);
border: var(--focus-outline-width) solid transparent;
border-radius: var(--border-radius-medium);
background-clip: content-box;
background-color: light-dark(var(--tabgroup-swatch-color), var(--tabgroup-swatch-color-invert));
input:checked + & {
outline: var(--focus-outline);
outline-color: currentColor;
outline-offset: var(--focus-outline-offset);
border-color: var(--focus-outline-color);
}
input:focus-visible + & {
outline-color: var(--focus-outline-color);
box-shadow: 0 0 0 calc(var(--focus-outline-width) * 3) color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
outline: 1px solid var(--focus-outline-color);
outline-offset: 1px;
}
}