designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: boost keyboard selection CSS specificity, add debug logging for visual state

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 10:43:47 -07:00
parent c66265e48f
commit 7f0a88b131
2 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
content/keyboard.js
View File

@@ -87,6 +87,9 @@ window.OutlookRelook.Keyboard = (function () {
var idx = findItemById(items, id);
if (idx >= 0) {
items[idx].classList.add('or-kb-selected');
console.log('[Outlook Relook] Applied or-kb-selected to', id.substring(0, 20), 'hasClass:', items[idx].classList.contains('or-kb-selected'));
} else {
console.log('[Outlook Relook] Could not find item for selected id:', id.substring(0, 20));
}
});

36
themes/base.css
View File

@@ -403,32 +403,32 @@ html[data-or-unified-header="true"] .fui-Toolbar ~ div {
KEYBOARD NAVIGATION
============================================================ */
/* Focus cursor — the message the keyboard is currently pointing at */
.or-kb-focused {
/* Focus cursor — the message the keyboard is currently pointing at.
High specificity to beat theme selectors. */
html[data-outlook-relook-scheme] [role="option"].or-kb-focused,
html[data-outlook-relook-scheme] [role="listitem"].or-kb-focused,
html .or-kb-focused {
outline: 2px solid var(--or-accent, #0078d4) !important;
outline-offset: -2px;
position: relative;
z-index: 1;
}
/* Selected/checked messages */
.or-kb-selected {
background-color: rgba(0, 120, 212, 0.08) !important;
/* Selected/checked messages — high specificity + strong visual */
html[data-outlook-relook-scheme] [role="option"].or-kb-selected,
html[data-outlook-relook-scheme] [role="listitem"].or-kb-selected,
html[data-outlook-relook-scheme="light"] [role="option"].or-kb-selected,
html[data-outlook-relook-scheme="light"] [role="listitem"].or-kb-selected,
html .or-kb-selected {
background-color: rgba(0, 120, 212, 0.12) !important;
border-left: 3px solid var(--or-accent, #0078d4) !important;
position: relative;
}
html[data-outlook-relook-scheme="dark"] .or-kb-selected {
background-color: rgba(100, 181, 246, 0.12) !important;
}
/* Selection indicator — small left bar */
.or-kb-selected::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--or-accent, #0078d4);
html[data-outlook-relook-scheme="dark"] [role="option"].or-kb-selected,
html[data-outlook-relook-scheme="dark"] [role="listitem"].or-kb-selected {
background-color: rgba(100, 181, 246, 0.18) !important;
border-left: 3px solid var(--or-accent, #64b5f6) !important;
}
/* Selection count badge (injected by keyboard.js) */