487 lines
17 KiB
CSS
487 lines
17 KiB
CSS
/*
|
|
* Outlook Relook — Base Theme
|
|
* Always loaded. Controls density, spacing, and element hiding.
|
|
*
|
|
* Toggle classes are set on <html> 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 — OWA uses .fui-TabList with .fui-Tab buttons */
|
|
html[data-or-hide-focusedtabs="true"] .fui-TabList {
|
|
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 TOGGLE BUTTONS only (not the panel itself) */
|
|
html[data-or-hide-myday="true"] button[aria-label*="My Day" i],
|
|
html[data-or-hide-myday="true"] button[aria-label*="To Do" i] {
|
|
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, measured):
|
|
Row 1: div.Rn_96 — 48px — top bar (logo + search)
|
|
Row 2: div.root-109 — 36px — ribbon tabs (Home/View/Help)
|
|
Row 3: toolbar buttons — 40px — ribbon content
|
|
Row 4: Focused/Other + filters — starts at y=124
|
|
Total: ~124px of header before email content
|
|
|
|
Goal: compress to ~60px total
|
|
============================================================ */
|
|
|
|
/* --- Row 1: Top bar container (48px → 28px) --- */
|
|
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;
|
|
}
|
|
|
|
/* Crush the top bar container's height and padding */
|
|
html[data-or-unified-header="true"] [role="search"],
|
|
html[data-or-unified-header="true"] [role="search"] ~ *,
|
|
html[data-or-unified-header="true"] [role="search"] > * {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* --- Row 2: Ribbon tabs (Home/View/Help) (36px → hide or minimize) --- */
|
|
/* The ribbon tab bar uses .ms-OverflowSet as a tablist */
|
|
html[data-or-unified-header="true"] .ms-OverflowSet[role="tablist"] {
|
|
max-height: 24px !important;
|
|
min-height: 20px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
html[data-or-unified-header="true"] .ms-OverflowSet[role="tablist"] [role="tab"] {
|
|
padding: 0 6px !important;
|
|
min-height: 20px !important;
|
|
max-height: 20px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* --- Row 3: Ribbon toolbar content (40px → 26px) --- */
|
|
html[data-or-unified-header="true"] [role="toolbar"],
|
|
html[data-or-unified-header="true"] .fui-Toolbar {
|
|
max-height: 26px !important;
|
|
min-height: 24px !important;
|
|
padding: 0 4px !important;
|
|
overflow: hidden !important;
|
|
gap: 0 !important;
|
|
}
|
|
|
|
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 3px !important;
|
|
min-height: 22px !important;
|
|
max-height: 22px !important;
|
|
min-width: unset !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* Hide button text labels — 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:not([role="tablist"]) {
|
|
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;
|
|
}
|
|
|
|
/* --- Row 4: Focused/Other tabs (fui-TabList) --- */
|
|
html[data-or-unified-header="true"] .fui-TabList {
|
|
max-height: 22px !important;
|
|
min-height: 20px !important;
|
|
padding: 0 !important;
|
|
gap: 0 !important;
|
|
}
|
|
|
|
html[data-or-unified-header="true"] .fui-TabList .fui-Tab {
|
|
padding: 0 8px !important;
|
|
min-height: 20px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* --- Strip ALL vertical space from container divs in the header --- */
|
|
/* Target every ancestor div between the top of the page and content.
|
|
We use the known parent container selectors + general approach. */
|
|
html[data-or-unified-header="true"] [role="search"],
|
|
html[data-or-unified-header="true"] [role="toolbar"],
|
|
html[data-or-unified-header="true"] .fui-Toolbar,
|
|
html[data-or-unified-header="true"] .ms-OverflowSet,
|
|
html[data-or-unified-header="true"] .fui-TabList {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* Reduce height on the wrapping containers */
|
|
html[data-or-unified-header="true"] [role="search"] ~ *,
|
|
html[data-or-unified-header="true"] [role="toolbar"] ~ *,
|
|
html[data-or-unified-header="true"] .fui-Toolbar ~ * {
|
|
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;
|
|
}
|