modelcontextprotocol/use-mcp
Watch
1
0
Fork
You've already forked use-mcp
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Doing some manual CSS hax for a change

Browse source
This commit is contained in:
Glen Maddern 2025-06-23 21:50:28 +10:00
commit a3200e09cb
4 changed files with 25 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
examples/chat-ui/src/components/ChatApp.tsx
View file

@ -107,6 +107,7 @@ const ChatApp: React.FC<ChatAppProps> = () => {
className="flex min-h-screen w-screen animated-bg-container" className="flex min-h-screen w-screen animated-bg-container"
style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties} style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties}
> >
<div className="animated-bg"></div>
<div className="flex flex-row flex-grow flex-1 min-h-screen relative"> <div className="flex flex-row flex-grow flex-1 min-h-screen relative">
{/* Sidebar and Navbar components hidden but kept in codebase */} {/* Sidebar and Navbar components hidden but kept in codebase */}
{false && ( {false && (

1
examples/chat-ui/src/components/OAuthCallback.tsx
View file

@ -8,6 +8,7 @@ export function OAuthCallback() {
return ( return (
<div className="min-h-screen animated-bg-container flex items-center justify-center p-4"> <div className="min-h-screen animated-bg-container flex items-center justify-center p-4">
<div className="animated-bg"></div>
<div className="bg-white rounded-lg shadow-xl p-8 text-center max-w-md w-full"> <div className="bg-white rounded-lg shadow-xl p-8 text-center max-w-md w-full">
<h1 className="text-2xl font-bold text-zinc-900 mb-4">Authenticating...</h1> <h1 className="text-2xl font-bold text-zinc-900 mb-4">Authenticating...</h1>
<p className="text-zinc-600 mb-2">Please wait while we complete your authentication.</p> <p className="text-zinc-600 mb-2">Please wait while we complete your authentication.</p>

28
examples/chat-ui/src/index.css
View file

@ -13,19 +13,33 @@
.animated-bg-container { .animated-bg-container {
position: relative; position: relative;
/*overflow: hidden;*/
/*height: 500vh;*/
} }
.animated-bg-container::before { .animated-bg {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0vh;
left: 0; left: 0vw;
right: 0; right: 0vw;
bottom: 0; bottom: 0vh;
background: linear-gradient(135deg, #fdf2f8, #faf5ff, #eef2ff); overflow: hidden;
background-size: 100% 100vh; }
.animated-bg::before {
content: '';
position: absolute;
top: -100vh;
left: -1000vw;
right: -1000vw;
bottom: -100vh;
background: linear-gradient(180deg, #fdf2f8, #faf5ff, #eef2ff, #faf5ff, #fdf2f8);
/*background: linear-gradient(180deg, red, black, blue, black, red);*/
background-size: 100% 200vh;
background-repeat: repeat-y; background-repeat: repeat-y;
animation: hue-rotate 60s linear infinite; animation: hue-rotate 60s linear infinite;
animation-delay: var(--random-delay, 0s); animation-delay: var(--random-delay, 0s);
z-index: -1; z-index: -1;
transform: rotate(-20deg);
} }

2
examples/chat-ui/src/styles/scrollbar.css
View file

@ -2,6 +2,8 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
/* Scrollbars are fuxing with the layout?? */
display: none;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {