feat: Swiss/Helvetica theme with light and dark variants
This commit is contained in:
Joel Brock
183
themes/swiss.css
Normal file
183
themes/swiss.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user