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

content/content.js

@@ -15,6 +15,7 @@
     narrowDateColumn:      'data-or-narrow-datecol',
     compressComposeToolbar:'data-or-compact-compose',
     readingPaneMaxWidth:   'data-or-reading-maxwidth',
+    unifiedHeader:         'data-or-unified-header',
     hideCopilot:           'data-or-hide-copilot',
     hideSuggestedReplies:  'data-or-hide-suggestedreplies',
     hidePromoBanners:      'data-or-hide-promos',

content/settings-defaults.js

@@ -19,6 +19,7 @@ window.OutlookRelook.DEFAULTS = {
   narrowDateColumn: true,
   compressComposeToolbar: true,
   readingPaneMaxWidth: true,
+  unifiedHeader: false,
 
   // Hide Elements
   hideCopilot: true,

popup/popup.html

@@ -79,6 +79,10 @@
         <label for="readingPaneMaxWidth">Reading pane max-width</label>
         <div class="or-switch"><input type="checkbox" id="readingPaneMaxWidth" data-setting="readingPaneMaxWidth"><span class="slider"></span></div>
       </div>
+      <div class="or-toggle-row">
+        <label for="unifiedHeader">Unified header (collapse all bars)</label>
+        <div class="or-switch"><input type="checkbox" id="unifiedHeader" data-setting="unifiedHeader"><span class="slider"></span></div>
+      </div>
     </div>
   </div>
 

popup/popup.js

@@ -20,6 +20,7 @@
     narrowDateColumn: true,
     compressComposeToolbar: true,
     readingPaneMaxWidth: true,
+    unifiedHeader: false,
     hideCopilot: true,
     hideSuggestedReplies: true,
     hidePromoBanners: true,

themes/base.css

@@ -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
    ============================================================ */

themes/brutalist.css

@@ -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;
+  -webkit-font-smoothing: antialiased !important;
-  letter-spacing: -0.02em !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;
 }
 
 /* ============================================================