designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rewrite Swiss and Brutalist themes with surgical selectors, no more broken icons

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 09:49:57 -07:00
parent 6a6f9ba4f7
commit 41f39fd539
2 changed files with 358 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
themes/swiss.css
View File

@@ -1,8 +1,12 @@
/*
* Outlook Relook — Swiss / Helvetica Theme
* Ruthlessly minimal. Black, white, grey, accent. Nothing else.
* Helvetica Neue everywhere. Zero decoration. Grid discipline.
* If an element doesn't serve the content, it should be invisible.
*
* Inspired by the International Typographic Style.
* Helvetica Neue. Black, white, grey, and one accent color.
* Grid discipline. Content-first. Zero ornament.
*
* IMPORTANT: We scope surgical resets to specific OWA containers.
* Never use `*` selectors — they break SVG icons, checkboxes, etc.
*/
/* ============================================================
@@ -10,18 +14,19 @@
============================================================ */
html[data-outlook-relook-scheme="light"] {
--or-bg-primary: #ffffff;
--or-bg-secondary: #ffffff;
--or-bg-tertiary: #f7f7f7;
--or-bg-secondary: #fafafa;
--or-bg-tertiary: #f5f5f5;
--or-bg-hover: #f0f0f0;
--or-bg-selected: #f0f0f0;
--or-text-primary: #000000;
--or-text-primary: #111111;
--or-text-secondary: #555555;
--or-text-tertiary: #888888;
--or-text-disabled: #bbbbbb;
--or-border: #000000;
--or-border-light: #e0e0e0;
--or-accent: var(--or-accent-override, #ff0000);
--or-border: #d4d4d4;
--or-border-light: #ebebeb;
--or-accent: var(--or-accent-override, #e60000);
--or-accent-hover: var(--or-accent-override, #cc0000);
--or-accent-subtle: var(--or-accent-override, rgba(230, 0, 0, 0.06));
--or-shadow: none;
}
@@ -29,88 +34,129 @@ html[data-outlook-relook-scheme="light"] {
DARK VARIANT
============================================================ */
html[data-outlook-relook-scheme="dark"] {
--or-bg-primary: #0a0a0a;
--or-bg-secondary: #0a0a0a;
--or-bg-tertiary: #141414;
--or-bg-hover: #1a1a1a;
--or-bg-selected: #1a1a1a;
--or-text-primary: #ffffff;
--or-bg-primary: #111111;
--or-bg-secondary: #161616;
--or-bg-tertiary: #1a1a1a;
--or-bg-hover: #222222;
--or-bg-selected: #222222;
--or-text-primary: #ededed;
--or-text-secondary: #aaaaaa;
--or-text-tertiary: #666666;
--or-text-disabled: #444444;
--or-border: #ffffff;
--or-border-light: #222222;
--or-accent: var(--or-accent-override, #ff3333);
--or-accent-hover: var(--or-accent-override, #ff6666);
--or-border: #333333;
--or-border-light: #232323;
--or-accent: var(--or-accent-override, #ff3b3b);
--or-accent-hover: var(--or-accent-override, #ff6b6b);
--or-accent-subtle: var(--or-accent-override, rgba(255, 59, 59, 0.1));
--or-shadow: none;
}
/* ============================================================
TYPOGRAPHY — Helvetica Neue, aggressively applied
TYPOGRAPHY
Applied broadly but NOT with *, which breaks icon fonts/SVGs
============================================================ */
html[data-outlook-relook-scheme] *,
html[data-outlook-relook-scheme] *::before,
html[data-outlook-relook-scheme] *::after {
html[data-outlook-relook-scheme] body,
html[data-outlook-relook-scheme] div,
html[data-outlook-relook-scheme] span,
html[data-outlook-relook-scheme] p,
html[data-outlook-relook-scheme] h1,
html[data-outlook-relook-scheme] h2,
html[data-outlook-relook-scheme] h3,
html[data-outlook-relook-scheme] h4,
html[data-outlook-relook-scheme] h5,
html[data-outlook-relook-scheme] h6,
html[data-outlook-relook-scheme] a,
html[data-outlook-relook-scheme] li,
html[data-outlook-relook-scheme] td,
html[data-outlook-relook-scheme] th,
html[data-outlook-relook-scheme] label,
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.02em !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* ============================================================
STRIP ALL DECORATION — the core Swiss principle
============================================================ */
html[data-outlook-relook-scheme] * {
border-radius: 0 !important;
text-shadow: none !important;
box-shadow: none !important;
background-image: none !important;
text-decoration-color: var(--or-text-primary) !important;
outline-color: var(--or-accent) !important;
}
/* Remove ALL gradients, transitions, and transforms from non-essential elements */
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"],
html[data-outlook-relook-scheme] [role="option"],
html[data-outlook-relook-scheme] [role="listitem"],
html[data-outlook-relook-scheme] [role="treeitem"] {
transition: none !important;
animation: none !important;
/* Tighten letter-spacing on headings and UI text */
html[data-outlook-relook-scheme] [role="banner"],
html[data-outlook-relook-scheme] [role="toolbar"],
html[data-outlook-relook-scheme] [role="navigation"],
html[data-outlook-relook-scheme] [role="listbox"],
html[data-outlook-relook-scheme] [role="list"] {
letter-spacing: -0.01em !important;
}
/* ============================================================
SURFACES — flatten everything to white (or black in dark)
BODY & MAIN SURFACES
============================================================ */
html[data-outlook-relook-scheme] body {
background-color: var(--or-bg-primary) !important;
color: var(--or-text-primary) !important;
}
/* ============================================================
TOP BAR / HEADER
Clean bottom edge, no shadow, no background noise
============================================================ */
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: none !important;
}
html[data-outlook-relook-scheme] [role="navigation"],
/* ============================================================
NAVIGATION / FOLDER PANE
Subtle background, clean right edge
============================================================ */
html[data-outlook-relook-scheme] [role="navigation"] {
background-color: var(--or-bg-secondary) !important;
border-right: 1px solid var(--or-border) !important;
}
/* Complementary panels (right side panels) */
html[data-outlook-relook-scheme] [role="complementary"] {
background-color: var(--or-bg-primary) !important;
border-right: 1px solid var(--or-border-light) !important;
background-color: var(--or-bg-secondary) !important;
}
/* ============================================================
FOLDER TREE — Clean text hierarchy
============================================================ */
html[data-outlook-relook-scheme] [role="treeitem"] {
color: var(--or-text-secondary) !important;
border-radius: 0 !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"],
html[data-outlook-relook-scheme] [role="treeitem"][aria-current="true"] {
color: var(--or-text-primary) !important;
font-weight: 600 !important;
background-color: var(--or-bg-selected) !important;
border-left: 2px solid var(--or-accent) !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 rows */
html[data-outlook-relook-scheme] [role="option"],
html[data-outlook-relook-scheme] [role="listitem"] {
background-color: transparent !important;
background-color: var(--or-bg-primary) !important;
border-bottom: 1px solid var(--or-border-light) !important;
color: var(--or-text-primary) !important;
border-radius: 0 !important;
}
html[data-outlook-relook-scheme] [role="option"]:hover,
@@ -118,30 +164,35 @@ html[data-outlook-relook-scheme] [role="listitem"]:hover {
background-color: var(--or-bg-hover) !important;
}
/* Selected message — accent bar */
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;
background-color: var(--or-accent-subtle) !important;
border-left: 3px solid var(--or-accent) !important;
}
/* ============================================================
READING PANE
============================================================ */
html[data-outlook-relook-scheme] [role="main"] {
background-color: var(--or-bg-primary) !important;
}
/* ============================================================
TOOLBAR — minimal, no background distinction
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;
}
/* Toolbar buttons: text only, no background */
/* Toolbar buttons — muted, text-forward */
html[data-outlook-relook-scheme] [role="toolbar"] button,
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
background-color: transparent !important;
border: none !important;
color: var(--or-text-primary) !important;
border-radius: 2px !important;
box-shadow: none !important;
background-image: none !important;
}
html[data-outlook-relook-scheme] [role="toolbar"] button:hover,
@@ -150,12 +201,12 @@ html[data-outlook-relook-scheme] [role="toolbar"] [role="button"]:hover {
}
/* ============================================================
BUTTONS — understate everything
BUTTONS — Minimal, no heavy fills
============================================================ */
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] [role="button"] {
background-color: transparent !important;
color: var(--or-text-primary) !important;
box-shadow: none !important;
background-image: none !important;
}
html[data-outlook-relook-scheme] button:hover,
@@ -163,39 +214,19 @@ html[data-outlook-relook-scheme] [role="button"]:hover {
background-color: var(--or-bg-hover) !important;
}
/* Links: accent color, no underline by default */
/* ============================================================
LINKS — Accent color
============================================================ */
html[data-outlook-relook-scheme] a {
color: var(--or-accent) !important;
text-decoration: none !important;
}
html[data-outlook-relook-scheme] a:hover {
text-decoration: underline !important;
color: var(--or-accent-hover) !important;
}
/* ============================================================
FOLDER PANE — text hierarchy only, no visual chrome
============================================================ */
html[data-outlook-relook-scheme] [role="treeitem"] {
color: var(--or-text-secondary) !important;
background-color: transparent !important;
}
html[data-outlook-relook-scheme] [role="treeitem"]:hover {
color: var(--or-text-primary) !important;
background-color: transparent !important;
text-decoration: underline !important;
}
html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"] {
color: var(--or-text-primary) !important;
font-weight: 700 !important;
background-color: transparent !important;
}
/* ============================================================
SECONDARY TEXT — clear hierarchy
SECONDARY TEXT — Clear typographic hierarchy
============================================================ */
html[data-outlook-relook-scheme] [role="option"] span,
html[data-outlook-relook-scheme] [role="listitem"] span {
@@ -205,25 +236,52 @@ html[data-outlook-relook-scheme] [role="listitem"] span {
html[data-outlook-relook-scheme] time {
color: var(--or-text-tertiary) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
}
/* ============================================================
DIALOGS & OVERLAYS
TABS — Flat, no pill shapes
============================================================ */
html[data-outlook-relook-scheme] [role="tab"] {
border-radius: 0 !important;
box-shadow: none !important;
background-image: none !important;
}
html[data-outlook-relook-scheme] [role="tab"][aria-selected="true"] {
border-bottom: 2px solid var(--or-accent) !important;
}
/* ============================================================
DIALOGS & MENUS
============================================================ */
html[data-outlook-relook-scheme] [role="dialog"],
html[data-outlook-relook-scheme] [role="alertdialog"] {
background-color: var(--or-bg-primary) !important;
border: 1px solid var(--or-border) !important;
border-radius: 2px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
html[data-outlook-relook-scheme] [role="menu"],
html[data-outlook-relook-scheme] [role="listbox"][aria-expanded] {
border-radius: 2px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
html[data-outlook-relook-scheme] [role="menuitem"] {
border-radius: 0 !important;
}
html[data-outlook-relook-scheme] [role="menuitem"]:hover {
background-color: var(--or-bg-hover) !important;
}
/* ============================================================
SCROLLBARS — thin, monochrome
SCROLLBARS — Thin, monochrome
============================================================ */
html[data-outlook-relook-scheme] ::-webkit-scrollbar {
width: 4px !important;
height: 4px !important;
width: 6px !important;
height: 6px !important;
}
html[data-outlook-relook-scheme] ::-webkit-scrollbar-track {
@@ -231,5 +289,10 @@ html[data-outlook-relook-scheme] ::-webkit-scrollbar-track {
}
html[data-outlook-relook-scheme] ::-webkit-scrollbar-thumb {
background: var(--or-border) !important;
border-radius: 3px !important;
}
html[data-outlook-relook-scheme] ::-webkit-scrollbar-thumb:hover {
background: var(--or-text-tertiary) !important;
}