skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(live): subtle focus ring on global-bar icon buttons

Browse Source 
Default browser focus-visible ring was a heavy blue outline that
clashed with the dark capsule. Inject a palette-aware inner box-shadow
ring (accentSoft + accent) scoped to the global bar buttons via a
one-time <style> tag. Keeps keyboard focus visible without the
visual noise.
This commit is contained in:
Paul Bakaus
2026-04-22 13:19:08 -07:00
parent 37c1a364a4
commit d7f7df1b80
12 changed files with 180 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.claude/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.cursor/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.gemini/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.github/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.kiro/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.opencode/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.pi/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.rovodev/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.trae-cn/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
.trae/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',
source/skills/impeccable/scripts/live-browser.js
+15
View File
@@ -2575,6 +2575,21 @@ void main() {
const theme = detectPageTheme();
const P = barPaletteForTheme(theme);
// Custom focus-visible for bar buttons. Browser default is a heavy
// blue ring that looks jarring on the dark capsule. Replace with a
// soft accent-tinted inner ring that respects the bar's palette.
if (!document.getElementById(PREFIX + '-bar-focus-style')) {
const s = document.createElement('style');
s.id = PREFIX + '-bar-focus-style';
s.textContent =
'#' + PREFIX + '-global-bar button:focus { outline: none; }' +
'#' + PREFIX + '-global-bar button:focus-visible {' +
' outline: none;' +
' box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
'}';
document.head.appendChild(s);
}
globalBarEl = el('div', {
position: 'fixed', bottom: '14px', left: '50%',
transform: 'translateX(-50%) translateY(20px)',