feat: base CSS theme with density, hiding, and readability overrides
This commit is contained in:
Joel Brock
@@ -5,24 +5,38 @@
|
|||||||
|
|
||||||
const OR = window.OutlookRelook;
|
const OR = window.OutlookRelook;
|
||||||
|
|
||||||
async function init() {
|
// Map setting keys to data attributes on <html>
|
||||||
const settings = await OR.loadSettings();
|
const SETTING_TO_ATTR = {
|
||||||
console.log('[Outlook Relook] Loaded settings:', settings);
|
compactTopBar: 'data-or-compact-topbar',
|
||||||
|
compactCommandBar: 'data-or-compact-commandbar',
|
||||||
|
compactMessageList: 'data-or-compact-messagelist',
|
||||||
|
compactReadingPane: 'data-or-compact-readingpane',
|
||||||
|
compactFolderPane: 'data-or-compact-folderpane',
|
||||||
|
narrowDateColumn: 'data-or-narrow-datecol',
|
||||||
|
compressComposeToolbar:'data-or-compact-compose',
|
||||||
|
readingPaneMaxWidth: 'data-or-reading-maxwidth',
|
||||||
|
hideCopilot: 'data-or-hide-copilot',
|
||||||
|
hideSuggestedReplies: 'data-or-hide-suggestedreplies',
|
||||||
|
hidePromoBanners: 'data-or-hide-promos',
|
||||||
|
hideFocusedOtherTabs: 'data-or-hide-focusedtabs',
|
||||||
|
hideSidebarAppIcons: 'data-or-hide-sidebaricons',
|
||||||
|
hideGroupsSection: 'data-or-hide-groups',
|
||||||
|
hideMyDayButtons: 'data-or-hide-myday',
|
||||||
|
hideSenderAvatars: 'data-or-hide-avatars',
|
||||||
|
hideFeatureDiscovery: 'data-or-hide-discovery',
|
||||||
|
hideVivaInsights: 'data-or-hide-viva',
|
||||||
|
hideUnreadOtherBanner: 'data-or-hide-unreadother',
|
||||||
|
hideActivityFeed: 'data-or-hide-activity',
|
||||||
|
unreadDistinction: 'data-or-unread-distinction',
|
||||||
|
previewOwnLine: 'data-or-preview-own-line',
|
||||||
|
normalizeFontWeight: 'data-or-normalize-font',
|
||||||
|
darkModeEmailFix: 'data-or-darkmode-fix',
|
||||||
|
};
|
||||||
|
|
||||||
// Apply color scheme attribute
|
// Non-boolean attributes
|
||||||
applyColorScheme(settings.colorScheme);
|
const SETTING_TO_ATTR_VALUE = {
|
||||||
|
messageListFontSize: 'data-or-fontsize',
|
||||||
// Listen for setting changes from popup
|
};
|
||||||
chrome.storage.onChanged.addListener((changes, area) => {
|
|
||||||
if (area !== 'sync') return;
|
|
||||||
console.log('[Outlook Relook] Settings changed:', changes);
|
|
||||||
|
|
||||||
// Re-apply color scheme if it changed
|
|
||||||
if (changes.colorScheme) {
|
|
||||||
applyColorScheme(changes.colorScheme.newValue);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyColorScheme(scheme) {
|
function applyColorScheme(scheme) {
|
||||||
let resolved = scheme;
|
let resolved = scheme;
|
||||||
@@ -30,10 +44,68 @@
|
|||||||
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
}
|
}
|
||||||
document.documentElement.setAttribute('data-outlook-relook-scheme', resolved);
|
document.documentElement.setAttribute('data-outlook-relook-scheme', resolved);
|
||||||
console.log('[Outlook Relook] Color scheme:', resolved);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Listen for system theme changes when scheme is 'system'
|
function applySettingsToDOM(settings) {
|
||||||
|
// Boolean toggles -> data attributes
|
||||||
|
for (const [key, attr] of Object.entries(SETTING_TO_ATTR)) {
|
||||||
|
document.documentElement.setAttribute(attr, String(!!settings[key]));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Value-based attributes
|
||||||
|
for (const [key, attr] of Object.entries(SETTING_TO_ATTR_VALUE)) {
|
||||||
|
document.documentElement.setAttribute(attr, settings[key] || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Color scheme
|
||||||
|
applyColorScheme(settings.colorScheme);
|
||||||
|
|
||||||
|
// Accent color
|
||||||
|
if (settings.accentColor) {
|
||||||
|
document.documentElement.style.setProperty('--or-accent', settings.accentColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[Outlook Relook] Settings applied to DOM');
|
||||||
|
}
|
||||||
|
|
||||||
|
function injectThemeCSS(theme) {
|
||||||
|
// Remove existing theme stylesheet
|
||||||
|
const existing = document.getElementById('outlook-relook-theme');
|
||||||
|
if (existing) existing.remove();
|
||||||
|
|
||||||
|
// Inject the theme CSS
|
||||||
|
const link = document.createElement('link');
|
||||||
|
link.id = 'outlook-relook-theme';
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.href = chrome.runtime.getURL('themes/' + theme + '.css');
|
||||||
|
document.head.appendChild(link);
|
||||||
|
console.log('[Outlook Relook] Theme loaded: ' + theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
const settings = await OR.loadSettings();
|
||||||
|
console.log('[Outlook Relook] Loaded settings:', settings);
|
||||||
|
|
||||||
|
applySettingsToDOM(settings);
|
||||||
|
injectThemeCSS(settings.theme);
|
||||||
|
|
||||||
|
// Listen for setting changes from popup
|
||||||
|
chrome.storage.onChanged.addListener((changes, area) => {
|
||||||
|
if (area !== 'sync') return;
|
||||||
|
|
||||||
|
// Build updated settings object
|
||||||
|
OR.loadSettings().then((updated) => {
|
||||||
|
applySettingsToDOM(updated);
|
||||||
|
|
||||||
|
// Swap theme CSS if theme changed
|
||||||
|
if (changes.theme) {
|
||||||
|
injectThemeCSS(changes.theme.newValue);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for system theme changes
|
||||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => {
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => {
|
||||||
const settings = await OR.loadSettings();
|
const settings = await OR.loadSettings();
|
||||||
if (settings.colorScheme === 'system') {
|
if (settings.colorScheme === 'system') {
|
||||||
|
|||||||
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