input.css•4.44 kB
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom Prism.js theme for SFCC Development MCP Server docs */
/* Override default Prism styles with a clean, modern theme */
pre[class*="language-"] {
background: transparent !important;
margin: 0 !important;
padding: 1rem !important; /* Force proper padding */
overflow: visible;
}
code[class*="language-"] {
background: transparent !important;
text-shadow: none;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.875rem;
line-height: 1.5;
color: #374151; /* slate-700 */
padding: 0 !important; /* Remove any inherited padding from code element */
}
/* Tokens */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #6b7280; /* slate-500 */
font-style: italic;
}
.token.punctuation {
color: #6b7280; /* slate-500 */
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #dc2626; /* red-600 */
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #059669; /* emerald-600 */
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #7c3aed; /* violet-600 */
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #2563eb; /* blue-600 */
}
.token.function,
.token.class-name {
color: #ea580c; /* orange-600 */
}
.token.regex,
.token.important,
.token.variable {
color: #dc2626; /* red-600 */
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
/* JSON specific */
.token.key {
color: #2563eb; /* blue-600 */
}
/* YAML specific */
.token.title {
color: #2563eb; /* blue-600 */
}
/* Bash/Shell specific */
.token.command {
color: #059669; /* emerald-600 */
}
.token.parameter {
color: #dc2626; /* red-600 */
}
/* JSX/TSX specific */
.token.tag .token.punctuation {
color: #6b7280; /* slate-500 */
}
.token.tag .token.script-punctuation {
color: #6b7280; /* slate-500 */
}
.token.attr-value .token.punctuation {
color: #059669; /* emerald-600 */
}
.token.attr-value .token.punctuation:first-child {
color: #059669; /* emerald-600 */
}
/* Mobile responsiveness and text overflow fixes */
* {
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
width: 100vw;
max-width: 100vw;
}
/* Ensure all text content can break appropriately */
.prose {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
/* Force long words and URLs to break */
.prose p,
.prose li,
.prose td,
.prose th {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Ensure code blocks don't overflow */
.prose pre {
max-width: 100%;
overflow-x: auto;
white-space: pre;
word-break: normal;
}
.prose code {
white-space: pre;
word-break: normal;
}
/* Allow horizontal scroll specifically in code blocks */
.prose pre code {
white-space: pre;
word-break: normal;
overflow-wrap: normal;
}
/* Inline code should break words */
.prose p code,
.prose li code,
.prose td code,
.prose th code,
.prose h1 code,
.prose h2 code,
.prose h3 code,
.prose h4 code,
.prose h5 code,
.prose h6 code {
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
/* Tables should be responsive */
.prose table {
width: 100%;
table-layout: fixed;
word-break: break-word;
}
/* Prevent horizontal scrolling on mobile */
@media (max-width: 768px) {
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
}
* {
max-width: 100% !important;
}
.prose {
max-width: none;
width: 100%;
}
.prose pre {
max-width: calc(100vw - 3rem) !important;
overflow-x: auto;
white-space: pre;
word-break: normal;
}
.prose pre code {
white-space: pre !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.prose table {
max-width: calc(100vw - 3rem) !important;
overflow-x: auto;
display: block;
white-space: nowrap;
}
/* Ensure no element can be wider than viewport */
#root, .min-h-screen, main, .prose {
max-width: 100vw !important;
overflow-x: hidden !important;
}
}