designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8fe0808bbdbf93bfa45b8fb1dc94fa9c9cfba7ef
Outcut/themes/base.css

452 lines
15 KiB
CSS
Raw Blame History

/*
* 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 */
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 */
.or-kb-focused {
outline: 2px solid var(--or-accent, #0078d4) !important;
outline-offset: -2px;
position: relative;
z-index: 1;
}
/* Selected/checked messages */
.or-kb-selected {
background-color: rgba(0, 120, 212, 0.08) !important;
}
html[data-outlook-relook-scheme="dark"] .or-kb-selected {
background-color: rgba(100, 181, 246, 0.12) !important;
}
/* Selection indicator — small left bar */
.or-kb-selected::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--or-accent, #0078d4);
}
/* 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;
}
Reference in New Issue View Git Blame Copy Permalink