diff --git a/content/keyboard.js b/content/keyboard.js index b3f3fa3..9728c11 100644 --- a/content/keyboard.js +++ b/content/keyboard.js @@ -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)); } }); diff --git a/themes/base.css b/themes/base.css index 432689f..053e8e6 100644 --- a/themes/base.css +++ b/themes/base.css @@ -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) */