299 lines
10 KiB
CSS
299 lines
10 KiB
CSS
/*
|
|
* Outlook Relook — Swiss / Helvetica Theme
|
|
*
|
|
* 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.
|
|
*/
|
|
|
|
/* ============================================================
|
|
LIGHT VARIANT
|
|
============================================================ */
|
|
html[data-outlook-relook-scheme="light"] {
|
|
--or-bg-primary: #ffffff;
|
|
--or-bg-secondary: #fafafa;
|
|
--or-bg-tertiary: #f5f5f5;
|
|
--or-bg-hover: #f0f0f0;
|
|
--or-bg-selected: #f0f0f0;
|
|
--or-text-primary: #111111;
|
|
--or-text-secondary: #555555;
|
|
--or-text-tertiary: #888888;
|
|
--or-text-disabled: #bbbbbb;
|
|
--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;
|
|
}
|
|
|
|
/* ============================================================
|
|
DARK VARIANT
|
|
============================================================ */
|
|
html[data-outlook-relook-scheme="dark"] {
|
|
--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: #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
|
|
Applied broadly but NOT with *, which breaks icon fonts/SVGs
|
|
============================================================ */
|
|
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;
|
|
-webkit-font-smoothing: antialiased !important;
|
|
-moz-osx-font-smoothing: grayscale !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;
|
|
}
|
|
|
|
/* ============================================================
|
|
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;
|
|
}
|
|
|
|
/* ============================================================
|
|
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-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: 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,
|
|
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-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 / 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 — muted, text-forward */
|
|
html[data-outlook-relook-scheme] [role="toolbar"] button,
|
|
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
|
|
border-radius: 2px !important;
|
|
box-shadow: none !important;
|
|
background-image: none !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;
|
|
}
|
|
|
|
/* ============================================================
|
|
BUTTONS — Minimal, no heavy fills
|
|
============================================================ */
|
|
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;
|
|
}
|
|
|
|
/* ============================================================
|
|
LINKS — Accent color
|
|
============================================================ */
|
|
html[data-outlook-relook-scheme] a {
|
|
color: var(--or-accent) !important;
|
|
}
|
|
|
|
html[data-outlook-relook-scheme] a:hover {
|
|
color: var(--or-accent-hover) !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
SECONDARY TEXT — Clear typographic hierarchy
|
|
============================================================ */
|
|
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;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
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
|
|
============================================================ */
|
|
html[data-outlook-relook-scheme] ::-webkit-scrollbar {
|
|
width: 6px !important;
|
|
height: 6px !important;
|
|
}
|
|
|
|
html[data-outlook-relook-scheme] ::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
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;
|
|
}
|