feat: Material flat theme with light and dark variants
This commit is contained in:
Joel Brock
192
themes/material.css
Normal file
192
themes/material.css
Normal file
@@ -0,0 +1,192 @@
|
||||
/*
|
||||
* Outlook Relook — Material Flat Theme
|
||||
* Clean, subtle elevation, comfortable density.
|
||||
*/
|
||||
|
||||
/* ============================================================
|
||||
LIGHT VARIANT
|
||||
============================================================ */
|
||||
html[data-outlook-relook-scheme="light"] {
|
||||
--or-bg-primary: #ffffff;
|
||||
--or-bg-secondary: #f5f5f5;
|
||||
--or-bg-tertiary: #eeeeee;
|
||||
--or-bg-hover: #e0e0e0;
|
||||
--or-bg-selected: #e3f2fd;
|
||||
--or-text-primary: #212121;
|
||||
--or-text-secondary: #424242;
|
||||
--or-text-tertiary: #757575;
|
||||
--or-text-disabled: #9e9e9e;
|
||||
--or-border: #e0e0e0;
|
||||
--or-border-light: #eeeeee;
|
||||
--or-accent: var(--or-accent-override, #1976d2);
|
||||
--or-accent-hover: var(--or-accent-override, #1565c0);
|
||||
--or-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
--or-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
DARK VARIANT
|
||||
============================================================ */
|
||||
html[data-outlook-relook-scheme="dark"] {
|
||||
--or-bg-primary: #121212;
|
||||
--or-bg-secondary: #1e1e1e;
|
||||
--or-bg-tertiary: #252525;
|
||||
--or-bg-hover: #333333;
|
||||
--or-bg-selected: #1a3a5c;
|
||||
--or-text-primary: #e0e0e0;
|
||||
--or-text-secondary: #b0b0b0;
|
||||
--or-text-tertiary: #808080;
|
||||
--or-text-disabled: #5a5a5a;
|
||||
--or-border: #333333;
|
||||
--or-border-light: #2a2a2a;
|
||||
--or-accent: var(--or-accent-override, #64b5f6);
|
||||
--or-accent-hover: var(--or-accent-override, #90caf9);
|
||||
--or-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--or-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
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: 'Roboto', system-ui, -apple-system, 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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
html[data-outlook-relook-scheme] [role="listbox"],
|
||||
html[data-outlook-relook-scheme] [role="list"] {
|
||||
background-color: var(--or-bg-primary) !important;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
html[data-outlook-relook-scheme] [role="main"] {
|
||||
background-color: var(--or-bg-primary) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MATERIAL ROUNDING (4px on interactive elements only)
|
||||
============================================================ */
|
||||
html[data-outlook-relook-scheme] button,
|
||||
html[data-outlook-relook-scheme] [role="button"],
|
||||
html[data-outlook-relook-scheme] input,
|
||||
html[data-outlook-relook-scheme] select,
|
||||
html[data-outlook-relook-scheme] [role="tab"],
|
||||
html[data-outlook-relook-scheme] [role="menuitem"] {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
/* Cards / elevated surfaces */
|
||||
html[data-outlook-relook-scheme] [role="dialog"],
|
||||
html[data-outlook-relook-scheme] [role="alertdialog"] {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: var(--or-shadow-elevated) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
BUTTONS & INTERACTIVE
|
||||
============================================================ */
|
||||
html[data-outlook-relook-scheme] button,
|
||||
html[data-outlook-relook-scheme] [role="button"] {
|
||||
box-shadow: none !important;
|
||||
background-image: none !important;
|
||||
transition: background-color 0.15s ease !important;
|
||||
}
|
||||
|
||||
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
|
||||
============================================================ */
|
||||
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: var(--or-shadow) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
FOLDER PANE
|
||||
============================================================ */
|
||||
html[data-outlook-relook-scheme] [role="treeitem"] {
|
||||
color: var(--or-text-secondary) !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 1px 4px !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-accent) !important;
|
||||
font-weight: 500 !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