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

344
themes/brutalist.css
View File

@@ -1,8 +1,11 @@
/*
* Outlook Relook — Brutalist Theme
* Stark minimalism. Monospace. Borders only, almost no fills.
* High contrast. Maximum information density. No comfort.
* Inspired by terminal UIs, tax forms, and concrete architecture.
*
* Stark. Monospace. High contrast. Maximum information density.
* Borders and text, almost no fills. Inverted hover states.
* Inspired by terminal UIs, Craigslist, and concrete architecture.
*
* Scoped to specific elements — never uses `*` selectors.
*/
/* ============================================================
@@ -12,14 +15,15 @@ html[data-outlook-relook-scheme="light"] {
--or-bg-primary: #ffffff;
--or-bg-secondary: #ffffff;
--or-bg-tertiary: #ffffff;
--or-bg-hover: transparent;
--or-bg-selected: transparent;
--or-bg-hover: #000000;
--or-bg-selected: #000000;
--or-text-primary: #000000;
--or-text-secondary: #000000;
--or-text-tertiary: #555555;
--or-text-secondary: #333333;
--or-text-tertiary: #666666;
--or-text-disabled: #999999;
--or-text-inverted: #ffffff;
--or-border: #000000;
--or-border-light: #000000;
--or-border-light: #cccccc;
--or-accent: var(--or-accent-override, #000000);
--or-accent-hover: var(--or-accent-override, #333333);
--or-shadow: none;
@@ -31,185 +35,213 @@ html[data-outlook-relook-scheme="light"] {
html[data-outlook-relook-scheme="dark"] {
--or-bg-primary: #000000;
--or-bg-secondary: #000000;
--or-bg-tertiary: #000000;
--or-bg-hover: transparent;
--or-bg-selected: transparent;
--or-bg-tertiary: #0a0a0a;
--or-bg-hover: #ffffff;
--or-bg-selected: #ffffff;
--or-text-primary: #ffffff;
--or-text-secondary: #ffffff;
--or-text-tertiary: #aaaaaa;
--or-text-secondary: #cccccc;
--or-text-tertiary: #888888;
--or-text-disabled: #555555;
--or-text-inverted: #000000;
--or-border: #ffffff;
--or-border-light: #ffffff;
--or-border-light: #333333;
--or-accent: var(--or-accent-override, #ffffff);
--or-accent-hover: var(--or-accent-override, #cccccc);
--or-shadow: none;
}
/* ============================================================
TYPOGRAPHY — Monospace, tight, utilitarian
TYPOGRAPHY — Monospace on text elements only (not icons)
============================================================ */
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: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace !important;
letter-spacing: -0.03em !important;
-webkit-font-smoothing: none !important;
font-smooth: never !important;
letter-spacing: -0.02em !important;
}
/* Smaller base size for density */
html[data-outlook-relook-scheme] body {
font-size: 12px !important;
}
/* ============================================================
STRIP EVERYTHING — more aggressive than Swiss
============================================================ */
html[data-outlook-relook-scheme] * {
border-radius: 0 !important;
text-shadow: none !important;
box-shadow: none !important;
background-image: none !important;
transition: none !important;
animation: none !important;
}
/* ============================================================
SURFACES — pure white/black, no distinction between panes
BODY
============================================================ */
html[data-outlook-relook-scheme] body {
background-color: var(--or-bg-primary) !important;
color: var(--or-text-primary) !important;
}
/* Top bar — just a bottom border */
/* ============================================================
TOP BAR — Heavy bottom border
============================================================ */
html[data-outlook-relook-scheme] [role="banner"],
html[data-outlook-relook-scheme] header {
background-color: var(--or-bg-primary) !important;
border-bottom: 2px solid var(--or-border) !important;
box-shadow: none !important;
}
/* Folder pane — border only, no background change */
html[data-outlook-relook-scheme] [role="navigation"],
html[data-outlook-relook-scheme] [role="complementary"] {
/* ============================================================
NAVIGATION / FOLDER PANE — Heavy right border
============================================================ */
html[data-outlook-relook-scheme] [role="navigation"] {
background-color: var(--or-bg-primary) !important;
border-right: 2px solid var(--or-border) !important;
}
/* Message list — no background */
html[data-outlook-relook-scheme] [role="listbox"],
html[data-outlook-relook-scheme] [role="list"] {
background-color: var(--or-bg-primary) !important;
}
/* Message list items — borders only, no fills */
html[data-outlook-relook-scheme] [role="option"],
html[data-outlook-relook-scheme] [role="listitem"] {
background-color: transparent !important;
border-bottom: 1px solid var(--or-border) !important;
color: var(--or-text-primary) !important;
padding: 3px 8px !important;
}
/* Hover: invert colors instead of fill */
html[data-outlook-relook-scheme="light"] [role="option"]:hover,
html[data-outlook-relook-scheme="light"] [role="listitem"]:hover {
background-color: #000000 !important;
color: #ffffff !important;
}
html[data-outlook-relook-scheme="dark"] [role="option"]:hover,
html[data-outlook-relook-scheme="dark"] [role="listitem"]:hover {
background-color: #ffffff !important;
color: #000000 !important;
}
/* Selected: invert */
html[data-outlook-relook-scheme="light"] [role="option"][aria-selected="true"],
html[data-outlook-relook-scheme="light"] [role="listitem"][aria-selected="true"] {
background-color: #000000 !important;
color: #ffffff !important;
}
html[data-outlook-relook-scheme="dark"] [role="option"][aria-selected="true"],
html[data-outlook-relook-scheme="dark"] [role="listitem"][aria-selected="true"] {
background-color: #ffffff !important;
color: #000000 !important;
}
/* Reading pane */
html[data-outlook-relook-scheme] [role="main"] {
html[data-outlook-relook-scheme] [role="complementary"] {
background-color: var(--or-bg-primary) !important;
}
/* ============================================================
TOOLBAR — stark, no visual weight
============================================================ */
html[data-outlook-relook-scheme] [role="toolbar"] {
background-color: var(--or-bg-primary) !important;
border-bottom: 1px solid var(--or-border) !important;
}
html[data-outlook-relook-scheme] [role="toolbar"] button,
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
background-color: transparent !important;
border: 1px solid transparent !important;
color: var(--or-text-primary) !important;
text-transform: uppercase !important;
font-size: 10px !important;
letter-spacing: 0.05em !important;
}
html[data-outlook-relook-scheme] [role="toolbar"] button:hover,
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"]:hover {
border-color: var(--or-border) !important;
background-color: transparent !important;
}
/* ============================================================
BUTTONS — outlined only, never filled
============================================================ */
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] [role="button"] {
background-color: transparent !important;
color: var(--or-text-primary) !important;
border: 1px solid transparent !important;
}
html[data-outlook-relook-scheme] button:hover,
html[data-outlook-relook-scheme] [role="button"]:hover {
border-color: var(--or-border) !important;
}
/* Links: same color as text, underlined */
html[data-outlook-relook-scheme] a {
color: var(--or-text-primary) !important;
text-decoration: underline !important;
}
html[data-outlook-relook-scheme] a:hover {
text-decoration: none !important;
}
/* ============================================================
FOLDER PANE — all caps, no fills
FOLDER TREE — Uppercase, dense, no fills
============================================================ */
html[data-outlook-relook-scheme] [role="treeitem"] {
color: var(--or-text-primary) !important;
background-color: transparent !important;
text-transform: uppercase !important;
font-size: 10px !important;
letter-spacing: 0.06em !important;
border-bottom: 1px solid var(--or-border-light) !important;
letter-spacing: 0.04em !important;
border-radius: 0 !important;
}
html[data-outlook-relook-scheme] [role="treeitem"]:hover {
text-decoration: underline !important;
background-color: transparent !important;
background-color: var(--or-bg-hover) !important;
color: var(--or-text-inverted) !important;
}
html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"] {
html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"],
html[data-outlook-relook-scheme] [role="treeitem"][aria-current="true"] {
font-weight: 900 !important;
background-color: transparent !important;
border-left: 3px solid var(--or-border) !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 — borders, no fills */
html[data-outlook-relook-scheme] [role="option"],
html[data-outlook-relook-scheme] [role="listitem"] {
background-color: transparent !important;
border-bottom: 1px solid var(--or-border-light) !important;
color: var(--or-text-primary) !important;
border-radius: 0 !important;
}
/* Hover: INVERT — the brutalist signature move */
html[data-outlook-relook-scheme] [role="option"]:hover,
html[data-outlook-relook-scheme] [role="listitem"]:hover {
background-color: var(--or-bg-hover) !important;
color: var(--or-text-inverted) !important;
}
/* Also invert child spans on hover */
html[data-outlook-relook-scheme] [role="option"]:hover span,
html[data-outlook-relook-scheme] [role="listitem"]:hover span,
html[data-outlook-relook-scheme] [role="option"]:hover time,
html[data-outlook-relook-scheme] [role="listitem"]:hover time {
color: var(--or-text-inverted) !important;
}
/* Selected: inverted */
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;
color: var(--or-text-inverted) !important;
}
html[data-outlook-relook-scheme] [role="option"][aria-selected="true"] span,
html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] span,
html[data-outlook-relook-scheme] [role="option"][aria-selected="true"] time,
html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] time {
color: var(--or-text-inverted) !important;
}
/* ============================================================
READING PANE
============================================================ */
html[data-outlook-relook-scheme] [role="main"] {
background-color: var(--or-bg-primary) !important;
}
/* ============================================================
TOOLBAR — Understated, uppercase buttons
============================================================ */
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;
}
html[data-outlook-relook-scheme] [role="toolbar"] button,
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
background-color: transparent !important;
box-shadow: none !important;
background-image: none !important;
border-radius: 0 !important;
text-transform: uppercase !important;
font-size: 10px !important;
letter-spacing: 0.03em !important;
}
html[data-outlook-relook-scheme] [role="toolbar"] button:hover,
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"]:hover {
background-color: var(--or-bg-hover) !important;
color: var(--or-text-inverted) !important;
}
/* ============================================================
BUTTONS — Outlined, never filled
============================================================ */
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] [role="button"] {
box-shadow: none !important;
background-image: none !important;
}
html[data-outlook-relook-scheme] button:hover,
html[data-outlook-relook-scheme] [role="button"]:hover {
background-color: var(--or-bg-hover) !important;
color: var(--or-text-inverted) !important;
}
/* ============================================================
LINKS — Same as text, underlined
============================================================ */
html[data-outlook-relook-scheme] a {
color: var(--or-text-primary) !important;
text-decoration: underline !important;
}
html[data-outlook-relook-scheme] a:hover {
color: var(--or-text-inverted) !important;
background-color: var(--or-bg-hover) !important;
text-decoration: none !important;
}
/* ============================================================
@@ -228,20 +260,54 @@ html[data-outlook-relook-scheme] time {
}
/* ============================================================
DIALOGS — bordered box, no fill
TABS
============================================================ */
html[data-outlook-relook-scheme] [role="tab"] {
border-radius: 0 !important;
box-shadow: none !important;
background-image: none !important;
text-transform: uppercase !important;
font-size: 10px !important;
letter-spacing: 0.04em !important;
}
html[data-outlook-relook-scheme] [role="tab"][aria-selected="true"] {
border-bottom: 2px solid var(--or-border) !important;
font-weight: 900 !important;
}
/* ============================================================
DIALOGS — Bordered, no fill, no rounding
============================================================ */
html[data-outlook-relook-scheme] [role="dialog"],
html[data-outlook-relook-scheme] [role="alertdialog"] {
background-color: var(--or-bg-primary) !important;
border: 2px solid var(--or-border) !important;
border-radius: 0 !important;
box-shadow: 8px 8px 0 var(--or-border) !important;
}
html[data-outlook-relook-scheme] [role="menu"] {
border-radius: 0 !important;
border: 1px solid var(--or-border) !important;
box-shadow: 4px 4px 0 var(--or-border) !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;
color: var(--or-text-inverted) !important;
}
/* ============================================================
SCROLLBARS — hairline
SCROLLBARS — Hairline
============================================================ */
html[data-outlook-relook-scheme] ::-webkit-scrollbar {
width: 2px !important;
height: 2px !important;
width: 3px !important;
height: 3px !important;
}
html[data-outlook-relook-scheme] ::-webkit-scrollbar-track {