diff --git a/themes/swiss.css b/themes/swiss.css new file mode 100644 index 0000000..71b58ea --- /dev/null +++ b/themes/swiss.css @@ -0,0 +1,183 @@ +/* + * 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; +}