designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: readable Brutalist font, override OWA purple selection colors, add unified header toggle

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 10:03:08 -07:00
parent 41f39fd539
commit 30437df288
6 changed files with 124 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
themes/base.css
View File

@@ -247,6 +247,118 @@ html[data-or-fontsize="large"] [role="list"] {
}
/* ============================================================
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"
============================================================ */
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;
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;
min-height: 22px !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;
}
/* 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 {
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
============================================================ */

9
themes/brutalist.css
View File

@@ -73,13 +73,14 @@ html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] select,
html[data-outlook-relook-scheme] textarea {
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace !important;
-webkit-font-smoothing: none !important;
letter-spacing: -0.02em !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
letter-spacing: 0 !important;
}
/* Smaller base size for density */
html[data-outlook-relook-scheme] body {
font-size: 12px !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
/* ============================================================