fix: target OWA's actual Fluent UI DOM for density and unified header
This commit is contained in:
Joel Brock
188
themes/base.css
188
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
|
||||
|
||||
Reference in New Issue
Block a user