diff --git a/themes/base.css b/themes/base.css index 053e8e6..00bc55e 100644 --- a/themes/base.css +++ b/themes/base.css @@ -164,9 +164,8 @@ 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] { +/* Focused / Other tabs — OWA uses .fui-TabList with .fui-Tab buttons */ +html[data-or-hide-focusedtabs="true"] .fui-TabList { display: none !important; } @@ -308,14 +307,17 @@ 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 + 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 ============================================================ */ -/* Search bar — shrink to minimum */ +/* --- Row 1: Top bar container (48px → 28px) --- */ html[data-or-unified-header="true"] [role="search"] { height: 24px !important; min-height: 24px !important; @@ -330,28 +332,52 @@ html[data-or-unified-header="true"] [role="search"] input { padding: 1px 8px !important; } -/* Toolbars — compress to single row, minimal height */ +/* 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: 28px !important; + max-height: 26px !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; + padding: 1px 3px !important; min-height: 22px !important; max-height: 22px !important; min-width: unset !important; font-size: 11px !important; } -/* Hide button labels — keep icons only */ +/* 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, @@ -360,7 +386,7 @@ html[data-or-unified-header="true"] .fui-Toolbar .ms-Button-textContainer { } /* Ribbon groups and overflow — compress */ -html[data-or-unified-header="true"] .ms-OverflowSet { +html[data-or-unified-header="true"] .ms-OverflowSet:not([role="tablist"]) { min-height: unset !important; gap: 0 !important; } @@ -371,27 +397,36 @@ html[data-or-unified-header="true"] [role="group"] { min-height: unset !important; } -/* Tab lists (Focused/Other) — minimal */ -html[data-or-unified-header="true"] [role="tablist"], +/* --- Row 4: Focused/Other tabs (fui-TabList) --- */ html[data-or-unified-header="true"] .fui-TabList { - max-height: 24px !important; - min-height: 22px !important; + max-height: 22px !important; + min-height: 20px !important; padding: 0 !important; gap: 0 !important; } -html[data-or-unified-header="true"] [role="tab"] { - padding: 1px 8px !important; +html[data-or-unified-header="true"] .fui-TabList .fui-Tab { + padding: 0 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 { +/* --- 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;