/* * Outlook Relook — Swiss / Helvetica Theme * Monochrome, tight grid, no decoration. Content density is king. */ /* ============================================================ LIGHT VARIANT ============================================================ */ html[data-outlook-relook-scheme="light"] { --or-bg-primary: #ffffff; --or-bg-secondary: #fafafa; --or-bg-tertiary: #f0f0f0; --or-bg-hover: #e8e8e8; --or-bg-selected: #e0e0e0; --or-text-primary: #000000; --or-text-secondary: #333333; --or-text-tertiary: #666666; --or-text-disabled: #999999; --or-border: #d0d0d0; --or-border-light: #e5e5e5; --or-accent: var(--or-accent-override, #000000); --or-accent-hover: var(--or-accent-override, #333333); --or-shadow: none; } /* ============================================================ DARK VARIANT ============================================================ */ html[data-outlook-relook-scheme="dark"] { --or-bg-primary: #1a1a1a; --or-bg-secondary: #222222; --or-bg-tertiary: #2a2a2a; --or-bg-hover: #333333; --or-bg-selected: #3a3a3a; --or-text-primary: #e8e8e8; --or-text-secondary: #cccccc; --or-text-tertiary: #999999; --or-text-disabled: #666666; --or-border: #3a3a3a; --or-border-light: #2f2f2f; --or-accent: var(--or-accent-override, #e8e8e8); --or-accent-hover: var(--or-accent-override, #ffffff); --or-shadow: none; } /* ============================================================ TYPOGRAPHY ============================================================ */ html[data-outlook-relook-scheme] body, html[data-outlook-relook-scheme] [role="main"], html[data-outlook-relook-scheme] [role="navigation"], html[data-outlook-relook-scheme] [role="complementary"], html[data-outlook-relook-scheme] [role="banner"], html[data-outlook-relook-scheme] input, html[data-outlook-relook-scheme] button, html[data-outlook-relook-scheme] select, html[data-outlook-relook-scheme] textarea { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; letter-spacing: -0.01em !important; } /* ============================================================ SURFACES & BACKGROUNDS ============================================================ */ html[data-outlook-relook-scheme] body { background-color: var(--or-bg-primary) !important; color: var(--or-text-primary) !important; } /* Top bar */ html[data-outlook-relook-scheme] [role="banner"], html[data-outlook-relook-scheme] header { background-color: var(--or-bg-primary) !important; border-bottom: 1px solid var(--or-border) !important; box-shadow: var(--or-shadow) !important; } /* Folder pane */ html[data-outlook-relook-scheme] [role="navigation"], html[data-outlook-relook-scheme] [role="complementary"] { background-color: var(--or-bg-secondary) !important; border-right: 1px solid var(--or-border-light) !important; } /* Message list */ html[data-outlook-relook-scheme] [role="listbox"], html[data-outlook-relook-scheme] [role="list"] { background-color: var(--or-bg-primary) !important; } /* Message list items */ html[data-outlook-relook-scheme] [role="option"], html[data-outlook-relook-scheme] [role="listitem"] { background-color: var(--or-bg-primary) !important; border-bottom: 1px solid var(--or-border-light) !important; color: var(--or-text-primary) !important; } html[data-outlook-relook-scheme] [role="option"]:hover, html[data-outlook-relook-scheme] [role="listitem"]:hover { background-color: var(--or-bg-hover) !important; } html[data-outlook-relook-scheme] [role="option"][aria-selected="true"], html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] { background-color: var(--or-bg-selected) !important; } /* Reading pane */ html[data-outlook-relook-scheme] [role="main"] { background-color: var(--or-bg-primary) !important; } /* ============================================================ DECORATIVE REMOVAL ============================================================ */ html[data-outlook-relook-scheme] * { border-radius: 0 !important; text-shadow: none !important; } html[data-outlook-relook-scheme] button, html[data-outlook-relook-scheme] [role="button"], html[data-outlook-relook-scheme] [role="tab"], html[data-outlook-relook-scheme] [role="menuitem"] { box-shadow: none !important; background-image: none !important; } /* ============================================================ BUTTONS & INTERACTIVE ============================================================ */ html[data-outlook-relook-scheme] button:hover, html[data-outlook-relook-scheme] [role="button"]:hover { background-color: var(--or-bg-hover) !important; } html[data-outlook-relook-scheme] a { color: var(--or-accent) !important; } html[data-outlook-relook-scheme] a:hover { color: var(--or-accent-hover) !important; } /* ============================================================ TOOLBAR / COMMAND BAR ============================================================ */ html[data-outlook-relook-scheme] [role="toolbar"] { background-color: var(--or-bg-primary) !important; border-bottom: 1px solid var(--or-border-light) !important; box-shadow: none !important; } /* ============================================================ FOLDER PANE TREE ITEMS ============================================================ */ html[data-outlook-relook-scheme] [role="treeitem"] { color: var(--or-text-secondary) !important; } html[data-outlook-relook-scheme] [role="treeitem"]:hover { background-color: var(--or-bg-hover) !important; color: var(--or-text-primary) !important; } html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"] { background-color: var(--or-bg-selected) !important; color: var(--or-text-primary) !important; font-weight: 600 !important; } /* ============================================================ SECONDARY TEXT ============================================================ */ html[data-outlook-relook-scheme] [role="option"] span, html[data-outlook-relook-scheme] [role="listitem"] span { color: var(--or-text-secondary) !important; } html[data-outlook-relook-scheme] time { color: var(--or-text-tertiary) !important; }