/* * Outlook Relook — Base Theme * Always loaded. Controls density, spacing, and element hiding. * * Toggle classes are set on by content.js: * data-outlook-relook-scheme="light|dark" * data-or-compact-topbar="true" * data-or-compact-commandbar="true" * data-or-compact-messagelist="true" * data-or-compact-readingpane="true" * data-or-compact-folderpane="true" * data-or-narrow-datecol="true" * data-or-compact-compose="true" * data-or-reading-maxwidth="true" * data-or-hide-copilot="true" * data-or-hide-suggestedreplies="true" * data-or-hide-promos="true" * data-or-hide-focusedtabs="true" * data-or-hide-sidebaricons="true" * data-or-hide-groups="true" * data-or-hide-myday="true" * data-or-hide-avatars="true" * data-or-hide-discovery="true" * data-or-hide-viva="true" * data-or-hide-unreadother="true" * data-or-hide-activity="true" * data-or-unread-distinction="true" * data-or-preview-own-line="true" * data-or-normalize-font="true" * data-or-darkmode-fix="true" * data-or-fontsize="small|medium|large" */ /* ============================================================ DENSITY & SPACING Selectors based on OWA's actual Fluent UI DOM structure: - Search bar: [role="search"] - Toolbars: [role="toolbar"], .fui-Toolbar - Tab lists: [role="tablist"], .fui-TabList - Ribbon buttons: .ms-Button, .ms-OverflowSet - Ribbon groups: [role="group"] ============================================================ */ /* Compact top bar — target the search container and its ancestors */ html[data-or-compact-topbar="true"] [role="search"] { height: 28px !important; min-height: 28px !important; max-height: 28px !important; } html[data-or-compact-topbar="true"] [role="search"] input { height: 24px !important; min-height: 24px !important; padding-top: 2px !important; padding-bottom: 2px !important; } /* Compact the search bar's parent containers */ html[data-or-compact-topbar="true"] [role="search"], html[data-or-compact-topbar="true"] [role="search"] ~ *, html[data-or-compact-topbar="true"] [role="search"] > * { padding-top: 0 !important; padding-bottom: 0 !important; } /* Compact command bar / ribbon — target Fluent UI toolbars */ html[data-or-compact-commandbar="true"] [role="toolbar"], html[data-or-compact-commandbar="true"] .fui-Toolbar { padding: 2px 4px !important; min-height: unset !important; gap: 2px !important; } html[data-or-compact-commandbar="true"] [role="toolbar"] button, html[data-or-compact-commandbar="true"] [role="toolbar"] .ms-Button, html[data-or-compact-commandbar="true"] .fui-Toolbar button { padding: 2px 6px !important; min-height: 26px !important; max-height: 26px !important; font-size: 12px !important; } /* Compact the ribbon overflow/groups */ html[data-or-compact-commandbar="true"] .ms-OverflowSet { min-height: unset !important; } html[data-or-compact-commandbar="true"] [role="group"] { padding: 0 2px !important; gap: 1px !important; } /* Compact message list */ html[data-or-compact-messagelist="true"] [role="listbox"] [role="option"], html[data-or-compact-messagelist="true"] [role="list"] [role="listitem"] { padding: 4px 8px !important; min-height: unset !important; } /* Compact reading pane header */ html[data-or-compact-readingpane="true"] [role="main"] header, html[data-or-compact-readingpane="true"] [aria-label*="Reading" i] > div:first-child { padding: 8px 12px !important; } /* Compact folder pane */ html[data-or-compact-folderpane="true"] [role="tree"] [role="treeitem"] { padding: 2px 8px !important; min-height: 24px !important; line-height: 24px !important; } /* Narrow date column */ html[data-or-narrow-datecol="true"] [role="listbox"] [role="option"] time, html[data-or-narrow-datecol="true"] [role="list"] [role="listitem"] time { font-size: 11px !important; min-width: unset !important; white-space: nowrap !important; } /* Compact compose toolbar */ html[data-or-compact-compose="true"] [role="toolbar"][aria-label*="Format" i] { padding: 2px 4px !important; min-height: unset !important; } html[data-or-compact-compose="true"] [role="toolbar"][aria-label*="Format" i] button { padding: 2px 4px !important; min-height: 24px !important; } /* Reading pane max-width */ html[data-or-reading-maxwidth="true"] [aria-label*="Message body" i], html[data-or-reading-maxwidth="true"] [role="main"] [dir="ltr"], html[data-or-reading-maxwidth="true"] [role="main"] [dir="rtl"] { max-width: 72ch !important; } /* ============================================================ HIDE ELEMENTS ============================================================ */ /* Copilot */ html[data-or-hide-copilot="true"] [aria-label*="Copilot" i], html[data-or-hide-copilot="true"] [data-app-section="Copilot"], html[data-or-hide-copilot="true"] [title*="Copilot" i], html[data-or-hide-copilot="true"] [aria-label*="writing suggestion" i] { display: none !important; } /* Suggested replies */ html[data-or-hide-suggestedreplies="true"] [aria-label*="Suggested repl" i], html[data-or-hide-suggestedreplies="true"] [aria-label*="Reply suggestion" i] { display: none !important; } /* Promotional banners */ html[data-or-hide-promos="true"] [aria-label*="Try the new" i], html[data-or-hide-promos="true"] [aria-label*="Upgrade" i], html[data-or-hide-promos="true"] [aria-label*="Get the app" i], html[data-or-hide-promos="true"] [aria-label*="premium" i], html[data-or-hide-promos="true"] [aria-label*="Get the Outlook" i] { display: none !important; } /* Focused / Other tabs */ html[data-or-hide-focusedtabs="true"] [role="tablist"][aria-label*="Focused" i], html[data-or-hide-focusedtabs="true"] [aria-label*="Focused Inbox" i] { display: none !important; } /* Left sidebar app icons */ html[data-or-hide-sidebaricons="true"] nav[aria-label*="App" i], html[data-or-hide-sidebaricons="true"] [role="navigation"][aria-label*="Module" i] { display: none !important; } /* Groups section */ html[data-or-hide-groups="true"] [aria-label*="Groups" i][role="tree"], html[data-or-hide-groups="true"] [aria-label*="Groups" i][role="treeitem"] { display: none !important; } /* My Day / right-side panel buttons */ html[data-or-hide-myday="true"] [aria-label*="My Day" i], html[data-or-hide-myday="true"] [aria-label*="To Do" i][role="button"] { display: none !important; } /* Sender avatars */ html[data-or-hide-avatars="true"] [role="listbox"] [role="img"][aria-label*="profile" i], html[data-or-hide-avatars="true"] [role="listbox"] img[src*="profile"] { display: none !important; } /* Feature discovery / what's new */ html[data-or-hide-discovery="true"] [role="dialog"][aria-label*="new feature" i], html[data-or-hide-discovery="true"] [role="dialog"][aria-label*="what's new" i], html[data-or-hide-discovery="true"] [aria-label*="teaching" i] { display: none !important; } /* Viva Insights */ html[data-or-hide-viva="true"] [aria-label*="Viva" i], html[data-or-hide-viva="true"] [aria-label*="Daily Briefing" i], html[data-or-hide-viva="true"] [aria-label*="Briefing" i] { display: none !important; } /* Unread in Other banner */ html[data-or-hide-unreadother="true"] [aria-label*="unread in Other" i] { display: none !important; } /* Activity feed */ html[data-or-hide-activity="true"] [aria-label*="Activity" i][role="complementary"], html[data-or-hide-activity="true"] [aria-label*="mentioned you" i] { display: none !important; } /* ============================================================ READABILITY ============================================================ */ /* Unread distinction: bold + left border */ html[data-or-unread-distinction="true"] [role="option"][aria-label*="Unread" i], html[data-or-unread-distinction="true"] [role="listitem"][aria-label*="Unread" i] { border-left: 3px solid var(--or-accent, #0078d4) !important; font-weight: 600 !important; } /* Preview text on its own line */ html[data-or-preview-own-line="true"] [role="option"] [aria-hidden="true"], html[data-or-preview-own-line="true"] [role="listitem"] span[title] { display: block !important; } /* Normalize font weight */ html[data-or-normalize-font="true"] [role="listbox"], html[data-or-normalize-font="true"] [role="list"] { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; font-weight: 400 !important; } /* Dark mode email body fix */ html[data-outlook-relook-scheme="dark"][data-or-darkmode-fix="true"] [aria-label*="Message body" i], html[data-outlook-relook-scheme="dark"][data-or-darkmode-fix="true"] [role="main"] iframe { background-color: #1e1e1e !important; color: #e0e0e0 !important; color-scheme: dark !important; } /* Font size: small */ html[data-or-fontsize="small"] [role="listbox"], html[data-or-fontsize="small"] [role="list"] { font-size: 12px !important; } /* Font size: medium (default, no override needed) */ /* Font size: large */ html[data-or-fontsize="large"] [role="listbox"], html[data-or-fontsize="large"] [role="list"] { font-size: 15px !important; } /* ============================================================ OWA NATIVE SELECTION COLOR OVERRIDE Replace Microsoft's purple/blue highlights with our accent color. These target OWA's internal selection classes and states. ============================================================ */ html[data-outlook-relook-scheme] [role="option"][aria-selected="true"], html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"], html[data-outlook-relook-scheme] [role="option"].is-selected, html[data-outlook-relook-scheme] [role="listitem"].is-selected { background-color: var(--or-accent-subtle, rgba(0, 120, 212, 0.06)) !important; border-left: 3px solid var(--or-accent, #0078d4) !important; } /* Override OWA's ::before/::after selection indicators */ html[data-outlook-relook-scheme] [role="option"][aria-selected="true"]::before, html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"]::before { background-color: var(--or-accent, #0078d4) !important; } /* Override OWA focus/hover highlight colors */ html[data-outlook-relook-scheme] [role="option"]:focus-visible, html[data-outlook-relook-scheme] [role="listitem"]:focus-visible { outline-color: var(--or-accent, #0078d4) !important; } /* Override the focused inbox tab active indicator */ html[data-outlook-relook-scheme] [role="tab"][aria-selected="true"]::after { background-color: var(--or-accent, #0078d4) !important; } /* Override treeitem selection indicators */ html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"]::before, html[data-outlook-relook-scheme] [role="treeitem"][aria-current="true"]::before { background-color: var(--or-accent, #0078d4) !important; } /* ============================================================ UNIFIED HEADER — Collapse all top bars into one compact surface data-or-unified-header="true" OWA header structure (outlook.cloud.microsoft): - Search bar: [role="search"] - Ribbon: [role="toolbar"], .fui-Toolbar, .ms-OverflowSet - Tabs: [role="tablist"], .fui-TabList - Buttons: .ms-Button ============================================================ */ /* Search bar — shrink to minimum */ html[data-or-unified-header="true"] [role="search"] { height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 0 !important; } html[data-or-unified-header="true"] [role="search"] input { height: 22px !important; min-height: 22px !important; font-size: 12px !important; padding: 1px 8px !important; } /* Toolbars — compress to single row, minimal height */ html[data-or-unified-header="true"] [role="toolbar"], html[data-or-unified-header="true"] .fui-Toolbar { max-height: 28px !important; min-height: 24px !important; padding: 0 4px !important; overflow: hidden !important; gap: 0 !important; } /* Toolbar buttons — icons only, minimal size */ html[data-or-unified-header="true"] [role="toolbar"] button, html[data-or-unified-header="true"] [role="toolbar"] .ms-Button, html[data-or-unified-header="true"] .fui-Toolbar button { padding: 1px 4px !important; min-height: 22px !important; max-height: 22px !important; min-width: unset !important; font-size: 11px !important; } /* Hide button labels — keep icons only */ html[data-or-unified-header="true"] [role="toolbar"] .ms-Button-label, html[data-or-unified-header="true"] [role="toolbar"] .ms-Button-textContainer, html[data-or-unified-header="true"] .fui-Toolbar .ms-Button-label, html[data-or-unified-header="true"] .fui-Toolbar .ms-Button-textContainer { display: none !important; } /* Ribbon groups and overflow — compress */ html[data-or-unified-header="true"] .ms-OverflowSet { min-height: unset !important; gap: 0 !important; } html[data-or-unified-header="true"] [role="group"] { padding: 0 !important; gap: 0 !important; min-height: unset !important; } /* Tab lists (Focused/Other) — minimal */ html[data-or-unified-header="true"] [role="tablist"], html[data-or-unified-header="true"] .fui-TabList { max-height: 24px !important; min-height: 22px !important; padding: 0 !important; gap: 0 !important; } html[data-or-unified-header="true"] [role="tab"] { padding: 1px 8px !important; min-height: 20px !important; font-size: 11px !important; } /* Aggressively strip vertical padding from ALL divs in the header region. We identify the header region as everything above the message list. Target parent containers of search/toolbar/tablist. */ html[data-or-unified-header="true"] [role="search"] ~ div, html[data-or-unified-header="true"] [role="toolbar"] ~ div, html[data-or-unified-header="true"] .fui-Toolbar ~ div { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ============================================================ KEYBOARD NAVIGATION ============================================================ */ /* 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 — 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"] [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) */ .or-kb-selection-count { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--or-bg-primary, #333); color: var(--or-text-primary, #fff); border: 1px solid var(--or-border, #555); padding: 6px 16px; border-radius: 20px; font-size: 13px; font-family: system-ui, sans-serif; z-index: 999998; box-shadow: 0 4px 12px rgba(0,0,0,0.2); pointer-events: none; transition: opacity 0.15s; }