feat: base CSS theme with density, hiding, and readability overrides
This commit is contained in:
Joel Brock
248
themes/base.css
248
themes/base.css
@@ -1 +1,247 @@
|
||||
/* Outlook Relook — base.css (stub, implemented in later task) */
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user