arsam
8d6f3be87a
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
115 lines
3.1 KiB
CSS
115 lines
3.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
Notara design tokens — matched to Notion's light/dark palette (PLAN.md
|
|
"Visual Fidelity"). All UI colors must come from these variables.
|
|
--------------------------------------------------------------------------- */
|
|
:root {
|
|
/* surfaces */
|
|
--bg: #ffffff;
|
|
--bg-sidebar: #f7f7f5;
|
|
--bg-hover: rgba(55, 53, 47, 0.06);
|
|
--bg-active: rgba(55, 53, 47, 0.1);
|
|
--bg-modal: #ffffff;
|
|
|
|
/* text */
|
|
--text: #37352f;
|
|
--text-secondary: rgba(55, 53, 47, 0.65);
|
|
--text-tertiary: rgba(55, 53, 47, 0.45);
|
|
|
|
/* lines & accents */
|
|
--border: rgba(55, 53, 47, 0.09);
|
|
--divider: rgba(55, 53, 47, 0.06);
|
|
--accent: #2383e2;
|
|
--accent-bg: rgba(35, 131, 226, 0.14);
|
|
--selection: rgba(35, 131, 226, 0.28);
|
|
--danger: #eb5757;
|
|
|
|
/* shadows */
|
|
--shadow-popover: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
|
|
rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
|
|
}
|
|
|
|
.dark {
|
|
--bg: #191919;
|
|
--bg-sidebar: #202020;
|
|
--bg-hover: rgba(255, 255, 255, 0.055);
|
|
--bg-active: rgba(255, 255, 255, 0.09);
|
|
--bg-modal: #252525;
|
|
|
|
--text: rgba(255, 255, 255, 0.81);
|
|
--text-secondary: rgba(255, 255, 255, 0.46);
|
|
--text-tertiary: rgba(255, 255, 255, 0.3);
|
|
|
|
--border: rgba(255, 255, 255, 0.094);
|
|
--divider: rgba(255, 255, 255, 0.06);
|
|
--accent: #2383e2;
|
|
--accent-bg: rgba(35, 131, 226, 0.2);
|
|
--selection: rgba(35, 131, 226, 0.35);
|
|
--danger: #eb5757;
|
|
|
|
--shadow-popover: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px,
|
|
rgba(15, 15, 15, 0.4) 0px 3px 6px, rgba(15, 15, 15, 0.6) 0px 9px 24px;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-bg: var(--bg);
|
|
--color-bg-sidebar: var(--bg-sidebar);
|
|
--color-bg-hover: var(--bg-hover);
|
|
--color-bg-active: var(--bg-active);
|
|
--color-bg-modal: var(--bg-modal);
|
|
--color-text: var(--text);
|
|
--color-text-secondary: var(--text-secondary);
|
|
--color-text-tertiary: var(--text-tertiary);
|
|
--color-border: var(--border);
|
|
--color-divider: var(--divider);
|
|
--color-accent: var(--accent);
|
|
--color-accent-bg: var(--accent-bg);
|
|
--color-danger: var(--danger);
|
|
--font-sans: "Inter Variable", ui-sans-serif, -apple-system,
|
|
BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica,
|
|
"Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
user-select: none; /* app chrome is not selectable; editor opts back in */
|
|
}
|
|
|
|
::selection {
|
|
background: var(--selection);
|
|
}
|
|
|
|
/* Notion-style thin scrollbars */
|
|
*::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background: rgba(55, 53, 47, 0.2);
|
|
border-radius: 5px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
.dark *::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.18);
|
|
background-clip: content-box;
|
|
border: 2px solid transparent;
|
|
border-radius: 5px;
|
|
}
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|