supermemory/apps/web/globals.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;
}

.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%;
	}
}