From 8fe0808bbdbf93bfa45b8fb1dc94fa9c9cfba7ef Mon Sep 17 00:00:00 2001 From: Joel Brock Date: Thu, 23 Apr 2026 10:19:44 -0700 Subject: [PATCH] fix: target OWA's actual Fluent UI DOM for density and unified header --- themes/base.css | 188 +++++++++++++++++++++++++++++------------------- 1 file changed, 114 insertions(+), 74 deletions(-) diff --git a/themes/base.css b/themes/base.css index 3a74686..432689f 100644 --- a/themes/base.css +++ b/themes/base.css @@ -33,42 +33,63 @@ /* ============================================================ 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 */ -html[data-or-compact-topbar="true"] [role="banner"], -html[data-or-compact-topbar="true"] header { - max-height: 36px !important; - min-height: 36px !important; +/* 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; } -html[data-or-compact-topbar="true"] [role="banner"] *, -html[data-or-compact-topbar="true"] header * { - font-size: 13px !important; -} - -/* Compact search bar inside top bar */ -html[data-or-compact-topbar="true"] [role="search"], -html[data-or-compact-topbar="true"] [role="search"] input { - height: 28px !important; - min-height: 28px !important; -} - -/* Compact command bar / ribbon */ -html[data-or-compact-commandbar="true"] [role="toolbar"] { +/* 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"] 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: 28px !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"] { @@ -286,78 +307,97 @@ html[data-outlook-relook-scheme] [role="treeitem"][aria-current="true"]::before /* ============================================================ 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 ============================================================ */ -html[data-or-unified-header="true"] [role="banner"], -html[data-or-unified-header="true"] header { - max-height: 32px !important; - min-height: 32px !important; - padding: 0 8px !important; - overflow: hidden !important; -} -/* Collapse the ribbon/menu bar */ -html[data-or-unified-header="true"] [role="toolbar"] { - max-height: 28px !important; - min-height: 28px !important; - padding: 0 4px !important; - overflow: hidden !important; -} - -html[data-or-unified-header="true"] [role="toolbar"] button, -html[data-or-unified-header="true"] [role="toolbar"] [role="button"] { - padding: 2px 6px !important; +/* Search bar — shrink to minimum */ +html[data-or-unified-header="true"] [role="search"] { + height: 24px !important; min-height: 24px !important; max-height: 24px !important; - font-size: 11px !important; -} - -/* Collapse tab bars (Focused/Other) */ -html[data-or-unified-header="true"] [role="tablist"] { - max-height: 24px !important; - min-height: 24px !important; padding: 0 !important; } -html[data-or-unified-header="true"] [role="tab"] { - padding: 2px 8px !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; } -/* Shrink the search bar */ -html[data-or-unified-header="true"] [role="search"], -html[data-or-unified-header="true"] [role="search"] input { - height: 24px !important; - min-height: 24px !important; - font-size: 12px !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; } -/* Remove any extra spacing/margins between header rows */ -html[data-or-unified-header="true"] [role="banner"] > div, -html[data-or-unified-header="true"] header > div { +/* 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; } -/* Hide ribbon labels — keep icons only for space saving */ -html[data-or-unified-header="true"] [role="toolbar"] [role="button"] > span:not(:only-child), -html[data-or-unified-header="true"] [role="toolbar"] button > span:not(:only-child) { - font-size: 0 !important; - width: 0 !important; - overflow: hidden !important; -} - -/* Keep icons visible at normal size */ -html[data-or-unified-header="true"] [role="toolbar"] [role="img"], -html[data-or-unified-header="true"] [role="toolbar"] svg, -html[data-or-unified-header="true"] [role="toolbar"] img, -html[data-or-unified-header="true"] [role="toolbar"] i { - font-size: 14px !important; - width: auto !important; -} - /* ============================================================ KEYBOARD NAVIGATION