300 lines
9.4 KiB
CSS
300 lines
9.4 KiB
CSS
/*
|
|
* 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
|
|
============================================================ */
|
|
|
|
/* 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;
|
|
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"] {
|
|
padding: 2px 4px !important;
|
|
min-height: unset !important;
|
|
gap: 2px !important;
|
|
}
|
|
|
|
html[data-or-compact-commandbar="true"] [role="toolbar"] button {
|
|
padding: 2px 6px !important;
|
|
min-height: 28px !important;
|
|
font-size: 12px !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;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
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;
|
|
}
|