MCP Server Tauri
by hypothesi
custom.css•19.3 kB
/**
* Customize default theme styling by overriding CSS variables:
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/
/* ============================================
DESIGN TOKENS
============================================ */
/* Shared brand colors */
:root {
--vp-c-brand-1: #0ea5e9;
--vp-c-brand-2: #0284c7;
--vp-c-brand-3: #8b5cf6;
--vp-c-brand-soft: rgba(14, 165, 233, 0.14);
--vp-code-font-size: 14px;
}
/* Light theme colors (default) */
:root {
--vp-c-bg: #ffffff;
--vp-c-bg-alt: #f6f6f7;
--vp-c-bg-elv: #f3f3f3;
--vp-c-bg-soft: #f3f3f3;
--vp-c-text-1: #1a1a1a;
--vp-c-text-2: #4a4a4a;
--vp-c-text-3: #5c5c5c;
--vp-c-border: #e2e2e2;
--vp-c-divider: #e2e2e2;
--vp-c-gutter: #f6f6f7;
--vp-code-bg: #f6f6f7;
--vp-code-block-bg: #f6f6f7;
--vp-code-color: #1a1a1a;
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
--vp-shadow-2: 0 4px 6px rgba(0, 0, 0, 0.08);
--vp-shadow-3: 0 10px 15px rgba(0, 0, 0, 0.12);
--vp-shadow-4: 0 20px 25px rgba(0, 0, 0, 0.15);
--vp-shadow-5: 0 0 20px rgba(14, 165, 233, 0.2);
}
/* Dark theme colors */
.dark {
--vp-c-bg: #0a0a0a;
--vp-c-bg-alt: #111111;
--vp-c-bg-elv: #1a1a1a;
--vp-c-bg-soft: #1f1f1f;
--vp-c-text-1: #f5f5f5;
--vp-c-text-2: #a3a3a3;
--vp-c-text-3: #737373;
--vp-c-border: #2e2e2e;
--vp-c-divider: #2e2e2e;
--vp-c-gutter: #1f1f1f;
--vp-code-bg: #1a1a1a;
--vp-code-block-bg: #151515;
--vp-code-color: #f8f8f8;
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
--vp-shadow-2: 0 4px 6px rgba(0, 0, 0, 0.5);
--vp-shadow-3: 0 10px 15px rgba(0, 0, 0, 0.5);
--vp-shadow-4: 0 20px 25px rgba(0, 0, 0, 0.5);
--vp-shadow-5: 0 0 20px rgba(14, 165, 233, 0.3);
}
/* Theme support - let VitePress handle it */
/* Align all content sections consistently */
.features-section {
max-width: 80rem;
margin: 0 auto;
padding: 48px 24px !important;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.tool-categories {
max-width: 80rem;
margin: 32px auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.tool-category {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-border);
border-radius: 8px;
transition: all 0.25s ease;
}
.tool-category:hover {
border-color: var(--vp-c-brand-1);
background: var(--vp-c-bg-elv);
transform: translateX(4px);
}
.category-icon {
color: var(--vp-c-brand-1);
flex-shrink: 0;
}
.view-api-link {
max-width: 80rem;
margin: 32px auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 1.125rem;
font-weight: 500;
}
.view-api-link .inline-icon {
color: var(--vp-c-brand-1);
}
.view-api-link a {
color: var(--vp-c-brand-1);
text-decoration: none;
transition: opacity 0.25s ease;
}
.view-api-link a:hover {
opacity: 0.8;
}
.heading-icon {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
color: var(--vp-c-brand-1);
}
/* Configuration details/summary styling */
details {
margin: 16px 0;
padding: 0 8px;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-border);
border-radius: 8px;
transition: all 0.25s ease;
}
details:hover {
border-color: var(--vp-c-brand-1);
background: var(--vp-c-bg-elv);
}
details[open] {
border-color: var(--vp-c-brand-1);
}
summary {
cursor: pointer;
font-weight: 600;
font-size: 1.0625rem;
color: var(--vp-c-text-1);
padding: 16px;
list-style: none;
display: block;
user-select: none;
border-radius: 8px;
}
summary::after {
content: '';
display: table;
clear: both;
}
details[open] > summary {
border-bottom: 1px solid var(--vp-c-border);
border-radius: 8px 8px 0 0;
}
details[open] {
padding-bottom: 16px;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '▶';
display: inline-block;
transition: transform 0.2s ease;
color: var(--vp-c-brand-1);
font-size: 0.75rem;
margin-right: 8px;
vertical-align: middle;
}
details[open] > summary::before {
transform: rotate(90deg);
}
summary:hover {
color: var(--vp-c-brand-1);
}
details > *:not(summary) {
margin-left: 20px;
margin-right: 20px;
}
details > *:not(summary):first-of-type {
margin-top: 16px;
}
details img {
max-width: 200px;
height: auto;
margin: 8px 0;
}
details div[class*='language-'],
details pre {
margin-left: 20px;
margin-right: 20px;
}
/* Modern hero enhancements */
.VPHero .name {
font-size: clamp(2.5rem, 8vw, 4rem) !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
text-shadow: 0 0 40px rgba(14, 165, 233, 0.3);
}
.VPHero .text {
font-weight: 700 !important;
opacity: 0.95 !important;
}
.VPHero .tagline {
font-size: 1.25rem !important;
line-height: 1.6 !important;
max-width: 600px !important;
opacity: 0.85 !important;
}
/* ============================================
TYPOGRAPHY
============================================ */
:root {
--vp-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--vp-font-family-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
}
/* ============================================
CUSTOM COMPONENTS
============================================ */
/* Hero section enhancement */
.VPHero {
background: radial-gradient(ellipse at top, var(--vp-c-bg-elv), var(--vp-c-bg));
position: relative;
}
.VPHero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(14, 165, 233, 0.1), transparent);
filter: blur(100px);
pointer-events: none;
}
/* Gradient text effect */
.gradient-text {
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Enhanced buttons */
.VPButton.brand {
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
border: none;
box-shadow: var(--vp-shadow-3), 0 0 20px rgba(14, 165, 233, 0.3);
transition: all 0.25s ease;
}
.VPButton.brand:hover {
transform: translateY(-2px);
box-shadow: var(--vp-shadow-4), 0 0 30px rgba(14, 165, 233, 0.4);
}
/* Enhanced code blocks */
.vp-code-group {
border: 1px solid var(--vp-c-border);
border-radius: 8px;
overflow: hidden;
box-shadow: var(--vp-shadow-2);
}
div[class*='language-'] {
background: linear-gradient(135deg, var(--vp-code-block-bg) 0%, var(--vp-c-bg-alt) 100%);
border: 1px solid var(--vp-c-border);
border-radius: 12px;
box-shadow: var(--vp-shadow-2);
position: relative;
transition: all 0.3s ease;
}
div[class*='language-']::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
div[class*='language-']:hover::before {
opacity: 1;
}
/* Brighten code block text */
div[class*='language-'] code {
color: var(--vp-code-color);
font-size: 14px;
line-height: 1.7;
}
div[class*='language-'] pre {
color: var(--vp-code-color);
font-size: 14px;
line-height: 1.7;
}
/* Brighten comments in code blocks (dark mode only) */
.dark div[class*='language-'] .token.comment,
.dark div[class*='language-'] .token.prolog,
.dark div[class*='language-'] .token.doctype,
.dark div[class*='language-'] .token.cdata {
color: #a0a0a0 !important;
}
/* Ensure plain text blocks are readable */
.dark .language-text,
.dark .language-bash {
color: #f8f8f8 !important;
}
/* Add subtle background glow for code blocks */
div[class*='language-']:hover {
border-color: rgba(14, 165, 233, 0.3);
box-shadow: var(--vp-shadow-3), 0 0 15px rgba(14, 165, 233, 0.1);
}
/* Enhanced feature cards */
.VPFeature {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-border);
border-radius: 12px;
transition: all 0.25s ease;
box-shadow: var(--vp-shadow-2);
padding: 24px !important;
}
.VPFeature:hover {
transform: translateY(-4px);
box-shadow: var(--vp-shadow-3);
border-color: var(--vp-c-brand-1);
}
/* Feature card icons with gradient background */
.VPFeature .icon {
width: 48px;
height: 48px;
font-size: 24px;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
box-shadow: 0 4px 6px rgba(14, 165, 233, 0.2);
}
.VPFeature .icon::before {
font-size: 24px;
}
/* Feature card title */
.VPFeature .title {
font-size: 1.125rem;
font-weight: 600;
color: var(--vp-c-text-1);
margin-bottom: 8px;
line-height: 1.4;
}
/* Feature card details/description */
.VPFeature .details {
font-size: 0.9375rem;
color: var(--vp-c-text-2);
line-height: 1.6;
margin: 0;
}
/* Custom card component */
.custom-block {
border-radius: 8px;
border: 1px solid var(--vp-c-border);
background: var(--vp-c-bg-soft);
transition: all 0.2s ease;
}
.custom-block:hover {
border-color: var(--vp-c-brand-1);
box-shadow: var(--vp-shadow-2);
}
/* Enhanced sidebar */
.VPSidebar {
background: var(--vp-c-bg-alt);
border-right: 1px solid var(--vp-c-border);
}
/* Enhanced navbar */
.VPNavBar {
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--vp-c-border);
}
.dark .VPNavBar {
background: rgba(10, 10, 10, 0.8);
}
html:not(.dark) .VPNavBar {
background: rgba(255, 255, 255, 0.8);
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Enhanced links */
.vp-doc a {
color: var(--vp-c-brand-1);
transition: all 0.15s ease;
}
.vp-doc a:hover {
color: var(--vp-c-brand-2);
}
/* List styling */
.vp-doc ul,
.vp-doc ol {
padding-left: 1.5rem;
}
.vp-doc li {
margin: 0.5rem 0;
line-height: 1.7;
}
/* Inline code */
.vp-doc :not(pre) > code {
background: var(--vp-c-bg-soft);
color: var(--vp-c-brand-1);
padding: 0.125rem 0.375rem;
border-radius: 4px;
font-size: 0.9em;
font-weight: 500;
}
/* Enhanced heading styles */
.vp-doc h2 {
font-size: 1.75rem;
margin-top: 3rem;
margin-bottom: 1.5rem;
padding-top: 0;
padding-bottom: 0.75rem;
color: var(--vp-c-text-1);
font-weight: 700;
border-top: none !important;
border-bottom: 2px solid;
border-image: linear-gradient(90deg, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.3)) 1;
position: relative;
}
.vp-doc h2::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: linear-gradient(90deg, #0ea5e9, #8b5cf6);
box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
}
.vp-doc h3 {
font-size: 1.25rem;
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--vp-c-text-1);
font-weight: 600;
}
/* Enhanced tip/warning containers */
.vp-doc .tip,
.vp-doc .warning,
.vp-doc .danger {
border-radius: 12px;
border-left-width: 4px;
padding: 1.5rem;
margin: 1.5rem 0;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(139, 92, 246, 0.08));
box-shadow: var(--vp-shadow-2);
}
.vp-doc .tip {
border-left-color: #0ea5e9;
}
.vp-doc .custom-block-title {
font-weight: 700;
font-size: 1.1rem;
}
/* Enhanced table */
.vp-doc table {
border: 1px solid var(--vp-c-border);
border-radius: 8px;
overflow: hidden;
}
.vp-doc tr {
border-top: 1px solid var(--vp-c-border);
transition: background 0.15s ease;
}
.vp-doc tr:hover {
background: var(--vp-c-bg-soft);
}
/* Footer enhancement */
.VPFooter {
background: var(--vp-c-bg-elv);
border-top: 1px solid var(--vp-c-border);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.VPHero::before {
width: 400px;
height: 400px;
}
}
/* ============================================
HOME PAGE REDESIGN
============================================ */
/* Home wrapper */
.home-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 48px 24px;
}
.home-wrapper > h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 24px;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.home-wrapper > h3 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 48px;
margin-bottom: 24px;
color: var(--vp-c-text-1);
}
.home-wrapper > p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--vp-c-text-2);
margin-bottom: 32px;
}
/* Benefits grid */
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
margin: 32px 0 48px 0;
}
.benefit-item {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-border);
border-radius: 12px;
padding: 24px;
text-align: center;
transition: all 0.25s ease;
}
.benefit-item:hover {
transform: translateY(-4px);
border-color: var(--vp-c-brand-1);
box-shadow: var(--vp-shadow-3);
background: var(--vp-c-bg-elv);
}
.benefit-icon {
font-size: 3rem;
display: block;
margin-bottom: 16px;
filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3));
}
.benefit-item strong {
display: block;
font-size: 1.25rem;
color: var(--vp-c-text-1);
margin-bottom: 8px;
}
.benefit-item p {
font-size: 0.9375rem;
color: var(--vp-c-text-3);
line-height: 1.6;
margin: 0;
}
/* Section highlights */
.section-highlight {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-border);
border-radius: 16px;
padding: 48px 32px;
margin-bottom: 32px;
transition: all 0.3s ease;
}
.section-highlight:hover {
border-color: rgba(14, 165, 233, 0.3);
box-shadow: var(--vp-shadow-2), 0 0 20px rgba(14, 165, 233, 0.1);
}
.section-highlight > h2 {
text-align: center;
font-size: 2rem;
font-weight: 700;
margin-bottom: 32px;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Capabilities grid */
.capabilities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
margin: 32px 0 48px 0;
}
.capability-card {
background: var(--vp-c-bg-elv);
border: 1px solid var(--vp-c-border);
border-radius: 12px;
padding: 24px 20px;
text-align: center;
transition: all 0.25s ease;
}
.capability-card:hover {
transform: translateY(-4px);
border-color: var(--vp-c-brand-1);
box-shadow: var(--vp-shadow-3);
background: var(--vp-c-bg-soft);
}
.capability-icon {
font-size: 2.5rem;
margin-bottom: 12px;
filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3));
}
.capability-card h3 {
font-size: 1.125rem;
margin: 0 0 8px 0;
color: var(--vp-c-text-1);
}
.capability-card p {
font-size: 0.875rem;
margin: 0;
color: var(--vp-c-text-3);
line-height: 1.5;
}
.capability-card code {
font-size: 0.75rem;
color: var(--vp-c-brand-1);
background: var(--vp-c-brand-soft);
}
/* Quick start steps */
.quick-start-steps {
display: grid;
gap: 24px;
margin-top: 24px;
}
.step-card {
background: var(--vp-c-bg-elv);
border: 1px solid var(--vp-c-border);
border-radius: 12px;
padding: 24px;
position: relative;
transition: all 0.25s ease;
}
.step-card:hover {
border-color: var(--vp-c-brand-1);
box-shadow: var(--vp-shadow-2);
}
.step-number {
position: absolute;
top: -16px;
left: 24px;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3);
}
.step-card h3 {
margin-top: 12px;
margin-bottom: 16px;
font-size: 1.25rem;
color: var(--vp-c-text-1);
}
.step-card p {
color: var(--vp-c-text-2);
line-height: 1.7;
margin-bottom: 16px;
}
.compact-list {
list-style: none;
padding: 0;
margin: 0;
}
.compact-list li {
padding: 8px 0;
padding-left: 24px;
position: relative;
color: var(--vp-c-text-2);
}
.compact-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--vp-c-brand-1);
font-weight: 700;
}
.step-card code,
.compact-list code {
color: var(--vp-c-brand-1);
background: var(--vp-c-brand-soft);
padding: 0.125rem 0.375rem;
border-radius: 4px;
font-size: 0.875em;
}
/* Architecture components */
.arch-components {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 32px;
}
.arch-card {
background: var(--vp-c-bg-elv);
border: 1px solid var(--vp-c-border);
border-radius: 12px;
padding: 24px;
text-align: center;
transition: all 0.25s ease;
}
.arch-card:hover {
transform: translateY(-4px);
border-color: var(--vp-c-brand-1);
box-shadow: var(--vp-shadow-3);
}
.arch-card strong {
display: block;
font-size: 1.125rem;
margin-bottom: 8px;
color: var(--vp-c-brand-1);
}
.arch-card p {
margin: 0;
font-size: 0.875rem;
color: var(--vp-c-text-3);
line-height: 1.5;
}
/* Tools summary */
.tools-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 32px;
}
.tool-category-compact {
background: var(--vp-c-bg-elv);
border: 1px solid var(--vp-c-border);
border-radius: 12px;
padding: 24px;
transition: all 0.25s ease;
}
.tool-category-compact:hover {
transform: translateY(-4px);
border-color: var(--vp-c-brand-1);
box-shadow: var(--vp-shadow-3);
}
.tool-category-compact h3 {
font-size: 1.125rem;
margin: 0 0 8px 0;
color: var(--vp-c-text-1);
}
.tool-count {
display: inline-block;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 12px;
margin-bottom: 12px;
}
.tool-category-compact p {
margin: 12px 0 0 0;
font-size: 0.875rem;
color: var(--vp-c-text-3);
line-height: 1.5;
}
/* CTA section */
.cta-section {
text-align: center;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--vp-c-border);
}
.cta-section a {
display: inline-block;
font-size: 1.125rem;
font-weight: 600;
padding: 12px 32px;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
color: white;
border-radius: 8px;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3);
}
.cta-section a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(14, 165, 233, 0.4);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.home-wrapper {
padding: 32px 20px;
}
.home-wrapper > h2 {
font-size: 2rem;
}
.home-wrapper > p {
font-size: 1rem;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.benefit-icon {
font-size: 2.5rem;
}
.section-highlight {
padding: 32px 20px;
}
.capabilities-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px;
}
.capability-icon {
font-size: 2rem;
}
.section-highlight > h2 {
font-size: 1.75rem;
}
}
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/hypothesi/mcp-server-tauri'
If you have feedback or need assistance with the MCP directory API, please join our Discord server