diff --git a/content/content.js b/content/content.js index 6192352..6fb66ef 100644 --- a/content/content.js +++ b/content/content.js @@ -5,24 +5,38 @@ const OR = window.OutlookRelook; - async function init() { - const settings = await OR.loadSettings(); - console.log('[Outlook Relook] Loaded settings:', settings); + // Map setting keys to data attributes on + const SETTING_TO_ATTR = { + 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 - applyColorScheme(settings.colorScheme); - - // 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); - } - }); - } + // Non-boolean attributes + const SETTING_TO_ATTR_VALUE = { + messageListFontSize: 'data-or-fontsize', + }; function applyColorScheme(scheme) { let resolved = scheme; @@ -30,10 +44,68 @@ resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } 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 () => { const settings = await OR.loadSettings(); if (settings.colorScheme === 'system') { diff --git a/themes/base.css b/themes/base.css index a689561..b7ad9cc 100644 --- a/themes/base.css +++ b/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 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; +}