mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-05-20 00:56:41 +00:00
1706752668
Nova mobile pass - viewport: viewportFit cover for iOS safe-area-inset - safe-area utilities (pb-safe, pt-safe, bottom-safe-5, scroll-fade-x) in globals.css - chat FAB pinned above iPhone home indicator; chat sidebar widths responsive across sm/md/lg with min() clamps - chat input CoT panel max-h capped via min(60dvh, 420px) - header tab strip swapped from visible scrollbar to scroll-fade-x mask + snap-x - nova empty state uses svh on mobile, dvh from sm up Add-memory modal rebuilt for mobile - mobile shell switched from fullscreen Dialog to vaul Drawer at 85svh with swipe-down dismissal and scaled background - in-modal header removed; tabs moved to the bottom of the sheet for thumb reach - four tab compactLabels: Note, Links, Files, Connections - desktop tabs now render only when !isMobile (no DOM duplication) - note/link content state lifted to parent so switching tabs preserves typed input - NoteContent snapshots initialContent via lazy useState so the editor isn't reset on every keystroke - shared Drawer base uses rounded-t-xl - removed legacy pt-4 on tab content for mobile Connections — replace expiresAt with sync-run health - new useConnectionHealth hook reads the latest sync run and matches auth-failure patterns; backend errorKind field still needed (TODO) - regex tightened so 401/403 require co-occurring auth/token/grant context; refresh_token requires expired/revoked/invalid/missing qualifier - badge label changed Disconnected -> Needs reauth - Reconnect button replaces the sync action when needsReauth, kicks off the same OAuth flow - per-row reconnect tracking via mutation.variables instead of a single shared id (no race when multiple rows clicked) - fallback toast when authLink is missing so the spinner can't get stuck - sync history panel timeline capped at max-h-260 with internal scroll - useSyncRuns no longer refetches on mount; cache (30s) actually applies, cutting N requests per modal open
238 lines
4.8 KiB
CSS
238 lines
4.8 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
|
|
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@theme {
|
|
--color-onboarding: #525966;
|
|
|
|
--color-fg-primary: #fafafa;
|
|
--color-fg-secondary: #e2e8f0;
|
|
--color-fg-muted: #d0dae7;
|
|
--color-fg-subtle: #b5c2d3;
|
|
--color-fg-faint: #a0aec4;
|
|
|
|
--color-surface-base: #0b1119;
|
|
--color-surface-card: #101822;
|
|
--color-surface-hover: #131b28;
|
|
--color-surface-skeleton: #1a2030;
|
|
--color-surface-border: #263348;
|
|
|
|
--color-pill-bg: #0d121a;
|
|
--color-pill-bg-active: #00173c;
|
|
--color-pill-border: #161f2c;
|
|
--color-pill-border-active: #2261ca33;
|
|
|
|
--color-brand-accent: #4ba0fa;
|
|
|
|
--animate-file-upload-grow: file-upload-grow 6s cubic-bezier(0.22, 1, 0.36, 1)
|
|
forwards;
|
|
}
|
|
|
|
:root {
|
|
--color-placeholder-onboarding: #525966;
|
|
--sm-scrollbar-thumb: rgb(41 57 82 / 0.55);
|
|
--sm-scrollbar-thumb-hover: rgb(55 90 130 / 0.75);
|
|
--sm-scrollbar-thumb-active: rgb(70 110 160 / 0.85);
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--sm-scrollbar-thumb) transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: var(--sm-scrollbar-thumb);
|
|
border-radius: 100px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--sm-scrollbar-thumb-hover);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:active {
|
|
background-color: var(--sm-scrollbar-thumb-active);
|
|
}
|
|
|
|
*::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--sm-scrollbar-thumb) transparent;
|
|
}
|
|
|
|
.scrollbar-none {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-none::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.pb-safe {
|
|
padding-bottom: max(0px, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.pt-safe {
|
|
padding-top: max(0px, env(safe-area-inset-top));
|
|
}
|
|
|
|
.pl-safe {
|
|
padding-left: max(0px, env(safe-area-inset-left));
|
|
}
|
|
|
|
.pr-safe {
|
|
padding-right: max(0px, env(safe-area-inset-right));
|
|
}
|
|
|
|
.bottom-safe-5 {
|
|
bottom: max(1.25rem, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
/* hide scrollbar but keep edge-fade affordance for horizontal nav */
|
|
.scroll-fade-x {
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
transparent 0,
|
|
#000 12px,
|
|
#000 calc(100% - 12px),
|
|
transparent 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
transparent 0,
|
|
#000 12px,
|
|
#000 calc(100% - 12px),
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.sm-tweet-theme .react-tweet-theme {
|
|
--tweet-container-margin: 0px;
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
.sm-tweet-theme .react-tweet-theme * {
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.sm-tweet-theme .tweet-header-module__A9EVQG__authorFollow {
|
|
display: none;
|
|
}
|
|
|
|
.tweet-container-module__CmFQMq__article {
|
|
padding: 0 !important;
|
|
font-family: "DM Sans", sans-serif !important;
|
|
font-size: 10px !important;
|
|
--tweet-header-font-size: 10px !important;
|
|
--tweet-header-line-height: 1.25rem !important;
|
|
}
|
|
|
|
.tweet-body-module__ZNRZja__root > * {
|
|
font-size: 10px !important;
|
|
line-height: 1.35 !important;
|
|
letter-spacing: -0.1px !important;
|
|
white-space: pre-wrap !important;
|
|
}
|
|
|
|
.sm-tweet-theme .tweet-body-module__ZNRZja__root {
|
|
font-family: "DM Sans", sans-serif !important;
|
|
font-weight: 500 !important;
|
|
color: #fafafa !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
}
|
|
|
|
[class*="dmSans"],
|
|
.font-dm-sans {
|
|
letter-spacing: -0.01em;
|
|
line-height: 135%;
|
|
}
|
|
|
|
.mcp-client-button-group:hover .mcp-client-gradient-text {
|
|
background: linear-gradient(
|
|
94deg,
|
|
#369bfd 4.8%,
|
|
#36fdfd 77.04%,
|
|
#36fdb5 143.99%
|
|
);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* css to fix for ordered list numbers being cut off in chat agent messages */
|
|
.chat-markdown-content ol {
|
|
padding-left: 1.5rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.chat-markdown-content ul {
|
|
padding-left: 1.5rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.chat-markdown-content li {
|
|
margin-left: 0;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.shadow-inside-out {
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Disable ProseMirror focus styles */
|
|
.ProseMirror:focus,
|
|
.ProseMirror-focused,
|
|
.ProseMirror:focus-visible {
|
|
outline: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
|
|
/* Override prose paragraph margins for text editor */
|
|
.text-editor-prose.prose
|
|
:where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Style placeholder for text editor */
|
|
.text-editor-prose .ProseMirror p.is-editor-empty:first-child::before {
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
color: #525966;
|
|
pointer-events: none;
|
|
height: 0;
|
|
}
|
|
|
|
.text-editor-prose .ProseMirror .is-empty::before {
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
color: #525966;
|
|
pointer-events: none;
|
|
height: 0;
|
|
}
|
|
|
|
@keyframes file-upload-grow {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 92%;
|
|
}
|
|
}
|