mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
31d416b04a
Consolidate login routes, add animated tool context visualization on the hero panel, and polish loading states across onboarding, settings, and workspace bootstrap.
555 lines
11 KiB
CSS
555 lines
11 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;
|
|
--animate-login-marquee: login-marquee 40s linear infinite;
|
|
}
|
|
|
|
: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%;
|
|
}
|
|
}
|
|
|
|
@keyframes login-marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.login-page-grid {
|
|
display: grid;
|
|
min-height: 100dvh;
|
|
height: 100dvh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.login-page-grid {
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
grid-template-columns: 65% 35%;
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.login-page-mobile-bg {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.login-page-mobile-bg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.login-tools-panel-inner {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.login-panel-orb {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(
|
|
ellipse 130% 100% at 50% 45%,
|
|
rgba(70, 155, 255, 0.24) 0%,
|
|
rgba(35, 100, 210, 0.14) 38%,
|
|
rgba(8, 22, 45, 0.55) 68%,
|
|
#030912 100%
|
|
),
|
|
radial-gradient(
|
|
ellipse 90% 70% at 50% 100%,
|
|
rgba(50, 130, 240, 0.16) 0%,
|
|
transparent 65%
|
|
);
|
|
}
|
|
|
|
.login-panel-orb-image {
|
|
position: absolute;
|
|
inset: -10% -15% -5% -15%;
|
|
background-image: url("/onboarding/bg-gradient-0.png");
|
|
background-size: cover;
|
|
background-position: center 35%;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.22;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.login-panel-orb-image-alt {
|
|
position: absolute;
|
|
inset: -10% -15% -5% -15%;
|
|
background-image: url("/onboarding/bg-gradient-1.png");
|
|
background-size: cover;
|
|
background-position: center 35%;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.11;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.login-tools-section {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
padding: 1.5rem 0 2rem;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.login-tools-section {
|
|
padding: 1.75rem 0 2.5rem;
|
|
}
|
|
}
|
|
|
|
.login-tools-section::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset-inline: 10%;
|
|
top: 0;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
rgb(255 255 255 / 0.12),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.login-tools-marquee {
|
|
position: relative;
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
black 10%,
|
|
black 90%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.login-tools-marquee-track {
|
|
display: flex;
|
|
width: max-content;
|
|
gap: 0.625rem;
|
|
animation: login-marquee var(--marquee-duration, 40s) linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.login-tools-marquee-track-reverse {
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
.login-tools-marquee:hover .login-tools-marquee-track {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.login-tools-chip {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-radius: 9999px;
|
|
background: rgb(255 255 255 / 0.05);
|
|
padding: 0.375rem 0.875rem 0.375rem 0.375rem;
|
|
box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.login-tools-chip-icon {
|
|
display: flex;
|
|
width: 1.625rem;
|
|
height: 1.625rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
background: rgb(255 255 255 / 0.07);
|
|
}
|
|
|
|
.login-tools-chip-icon svg,
|
|
.login-tools-chip-icon img {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.login-tools-chip-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: rgb(255 255 255 / 0.82);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.login-tool-node-wrap {
|
|
position: absolute;
|
|
z-index: 2;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.login-tool-node-label {
|
|
position: absolute;
|
|
top: calc(100% + 0.4rem);
|
|
left: 50%;
|
|
max-width: 5.5rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
transform: translateX(-50%);
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
color: rgb(200 225 255 / 0.95);
|
|
text-shadow: 0 1px 8px rgb(0 0 0 / 0.65);
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.login-tool-node-label-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.login-tool-node {
|
|
display: flex;
|
|
width: 2.625rem;
|
|
height: 2.625rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid rgb(255 255 255 / 0.12);
|
|
background: rgb(12 22 40 / 0.82);
|
|
backdrop-filter: blur(12px);
|
|
box-shadow:
|
|
0 1px 0 0 rgb(255 255 255 / 0.1) inset,
|
|
0 6px 20px rgb(0 0 0 / 0.22);
|
|
transition:
|
|
border-color 0.35s ease,
|
|
background 0.35s ease,
|
|
box-shadow 0.35s ease,
|
|
transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.login-tool-node {
|
|
width: 2.875rem;
|
|
height: 2.875rem;
|
|
border-radius: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
.login-tool-node-icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
opacity: 0.88;
|
|
transition: opacity 0.35s ease;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.login-tool-node-icon {
|
|
width: 1.375rem;
|
|
height: 1.375rem;
|
|
}
|
|
}
|
|
|
|
.login-tool-node-source {
|
|
border-color: rgb(100 180 255 / 0.55);
|
|
background: rgb(14 28 50 / 0.92);
|
|
box-shadow:
|
|
0 0 0 1px rgb(100 180 255 / 0.25),
|
|
0 0 24px rgb(75 160 250 / 0.28),
|
|
0 1px 0 0 rgb(255 255 255 / 0.1) inset;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.login-tool-node-source .login-tool-node-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.login-tool-node-destination {
|
|
border-color: rgb(130 210 255 / 0.65);
|
|
background: rgb(16 32 58 / 0.95);
|
|
box-shadow:
|
|
0 0 0 1px rgb(130 210 255 / 0.3),
|
|
0 0 32px rgb(100 180 255 / 0.35),
|
|
0 1px 0 0 rgb(255 255 255 / 0.12) inset;
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.login-tool-node-destination .login-tool-node-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.login-context-chip {
|
|
display: flex;
|
|
width: 2.75rem;
|
|
height: 1.625rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid rgb(180 220 255 / 0.35);
|
|
background: rgb(12 24 44 / 0.95);
|
|
box-shadow:
|
|
0 0 16px rgb(100 180 255 / 0.4),
|
|
0 1px 0 0 rgb(255 255 255 / 0.12) inset;
|
|
}
|
|
|
|
.login-context-chip-lines {
|
|
display: flex;
|
|
width: 1.5rem;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.login-context-chip-lines span {
|
|
display: block;
|
|
height: 0.125rem;
|
|
border-radius: 9999px;
|
|
background: rgb(180 220 255 / 0.55);
|
|
}
|
|
|
|
.login-context-chip-lines span:nth-child(1) {
|
|
width: 100%;
|
|
}
|
|
|
|
.login-context-chip-lines span:nth-child(2) {
|
|
width: 78%;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.login-context-chip-lines span:nth-child(3) {
|
|
width: 52%;
|
|
opacity: 0.5;
|
|
}
|