summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src/components/markdown.css
diff options
context:
space:
mode:
authoropencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>2026-01-30 17:58:31 +0000
committeropencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>2026-01-30 17:58:31 +0000
commitfe66ca163cbb9d689cf296c4c2f7a63414c1cf45 (patch)
treee330cc07e4ce3b68f64592f7c123cfa1ce77ef23 /packages/ui/src/components/markdown.css
parent20619a6a26ec0cfc2707b7ed13387715e9f9cdaa (diff)
downloadopencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.tar.gz
opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.zip
chore: generate
Diffstat (limited to 'packages/ui/src/components/markdown.css')
-rw-r--r--packages/ui/src/components/markdown.css416
1 files changed, 207 insertions, 209 deletions
diff --git a/packages/ui/src/components/markdown.css b/packages/ui/src/components/markdown.css
index 5d7f26e3d..ef4318733 100644
--- a/packages/ui/src/components/markdown.css
+++ b/packages/ui/src/components/markdown.css
@@ -1,211 +1,209 @@
[data-component="markdown"] {
- /* Reset & Base Typography */
- min-width: 0;
- max-width: 100%;
- overflow-wrap: break-word;
- color: var(--text-base);
- font-family: var(--font-family-sans);
- font-size: var(--font-size-base); /* 14px */
- line-height: var(--line-height-x-large);
-
- /* Spacing for flow */
- > *:first-child {
- margin-top: 0;
- }
- > *:last-child {
- margin-bottom: 0;
- }
-
- /* Headings: Same size, distinguished by color and spacing */
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- font-size: var(--font-size-base);
- color: var(--text-strong);
- font-weight: var(--font-weight-medium);
- margin-top: 2rem;
- margin-bottom: 0.75rem;
- line-height: var(--line-height-large);
- }
-
- /* Emphasis & Strong: Neutral strong color */
- strong,
- b {
- color: var(--text-strong);
- font-weight: var(--font-weight-medium);
- }
-
- /* Paragraphs */
- p {
- margin-bottom: 1rem;
- }
-
- /* Links */
- a {
- color: var(--text-interactive-base);
- text-decoration: none;
- font-weight: inherit;
- }
-
- a:hover {
- text-decoration: underline;
- text-underline-offset: 2px;
- }
-
- /* Lists */
- ul,
- ol {
- margin-top: 0.5rem;
- margin-bottom: 1rem;
- padding-left: 1.5rem;
- list-style-position: outside;
- }
-
- ul {
- list-style-type: disc;
- }
-
- ol {
- list-style-type: decimal;
- }
-
- li {
- margin-bottom: 0.5rem;
- }
-
- li > p:first-child {
- display: inline;
- margin: 0;
- }
-
- li > p + p {
- display: block;
- margin-top: 0.5rem;
- }
-
- li::marker {
- color: var(--text-weak);
- }
-
- /* Nested lists spacing */
- li > ul,
- li > ol {
- margin-top: 0.25rem;
- margin-bottom: 0.25rem;
- padding-left: 1rem; /* Minimal indent for nesting only */
- }
-
- /* Blockquotes */
- blockquote {
- border-left: 2px solid var(--border-weak-base);
- margin: 1.5rem 0;
- padding-left: 0.5rem;
- color: var(--text-weak);
- font-style: normal;
- }
-
- /* Horizontal Rule - Invisible spacing only */
- hr {
- border: none;
- height: 0;
- margin: 2.5rem 0;
- }
-
- .shiki {
- font-size: 13px;
- padding: 8px 12px;
- border-radius: 4px;
- border: 0.5px solid var(--border-weak-base);
- }
-
- [data-component="markdown-code"] {
- position: relative;
- }
-
- [data-slot="markdown-copy-button"] {
- position: absolute;
- top: 8px;
- right: 8px;
- opacity: 0;
- transition: opacity 0.15s ease;
- z-index: 1;
- }
-
- [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
- opacity: 1;
- }
-
- [data-slot="markdown-copy-button"] [data-slot="check-icon"] {
- display: none;
- }
-
- [data-slot="markdown-copy-button"][data-copied="true"]
- [data-slot="copy-icon"] {
- display: none;
- }
-
- [data-slot="markdown-copy-button"][data-copied="true"]
- [data-slot="check-icon"] {
- display: inline-flex;
- }
-
- pre {
- margin-top: 2rem;
- margin-bottom: 2rem;
- overflow: auto;
-
- scrollbar-width: none;
- &::-webkit-scrollbar {
- display: none;
- }
- }
-
- :not(pre) > code {
- font-family: var(--font-family-mono);
- font-feature-settings: var(--font-family-mono--font-feature-settings);
- color: var(--syntax-string);
- font-weight: var(--font-weight-medium);
- /* font-size: 13px; */
-
- /* padding: 2px 2px; */
- /* margin: 0 1.5px; */
- /* border-radius: 2px; */
- /* background: var(--surface-base); */
- /* box-shadow: 0 0 0 0.5px var(--border-weak-base); */
- }
-
- /* Tables */
- table {
- width: 100%;
- border-collapse: collapse;
- margin: 1.5rem 0;
- font-size: var(--font-size-base);
- }
-
- th,
- td {
- /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
- border-bottom: 1px solid var(--border-weaker-base);
- padding: 0.75rem 0.5rem;
- text-align: left;
- vertical-align: top;
- }
-
- th {
- color: var(--text-strong);
- font-weight: var(--font-weight-medium);
- border-bottom: 1px solid var(--border-weak-base);
- }
-
- /* Images */
- img {
- max-width: 100%;
- height: auto;
- border-radius: 4px;
- margin: 1.5rem 0;
- display: block;
- }
+ /* Reset & Base Typography */
+ min-width: 0;
+ max-width: 100%;
+ overflow-wrap: break-word;
+ color: var(--text-base);
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-base); /* 14px */
+ line-height: var(--line-height-x-large);
+
+ /* Spacing for flow */
+ > *:first-child {
+ margin-top: 0;
+ }
+ > *:last-child {
+ margin-bottom: 0;
+ }
+
+ /* Headings: Same size, distinguished by color and spacing */
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-size: var(--font-size-base);
+ color: var(--text-strong);
+ font-weight: var(--font-weight-medium);
+ margin-top: 2rem;
+ margin-bottom: 0.75rem;
+ line-height: var(--line-height-large);
+ }
+
+ /* Emphasis & Strong: Neutral strong color */
+ strong,
+ b {
+ color: var(--text-strong);
+ font-weight: var(--font-weight-medium);
+ }
+
+ /* Paragraphs */
+ p {
+ margin-bottom: 1rem;
+ }
+
+ /* Links */
+ a {
+ color: var(--text-interactive-base);
+ text-decoration: none;
+ font-weight: inherit;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ text-underline-offset: 2px;
+ }
+
+ /* Lists */
+ ul,
+ ol {
+ margin-top: 0.5rem;
+ margin-bottom: 1rem;
+ padding-left: 1.5rem;
+ list-style-position: outside;
+ }
+
+ ul {
+ list-style-type: disc;
+ }
+
+ ol {
+ list-style-type: decimal;
+ }
+
+ li {
+ margin-bottom: 0.5rem;
+ }
+
+ li > p:first-child {
+ display: inline;
+ margin: 0;
+ }
+
+ li > p + p {
+ display: block;
+ margin-top: 0.5rem;
+ }
+
+ li::marker {
+ color: var(--text-weak);
+ }
+
+ /* Nested lists spacing */
+ li > ul,
+ li > ol {
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+ padding-left: 1rem; /* Minimal indent for nesting only */
+ }
+
+ /* Blockquotes */
+ blockquote {
+ border-left: 2px solid var(--border-weak-base);
+ margin: 1.5rem 0;
+ padding-left: 0.5rem;
+ color: var(--text-weak);
+ font-style: normal;
+ }
+
+ /* Horizontal Rule - Invisible spacing only */
+ hr {
+ border: none;
+ height: 0;
+ margin: 2.5rem 0;
+ }
+
+ .shiki {
+ font-size: 13px;
+ padding: 8px 12px;
+ border-radius: 4px;
+ border: 0.5px solid var(--border-weak-base);
+ }
+
+ [data-component="markdown-code"] {
+ position: relative;
+ }
+
+ [data-slot="markdown-copy-button"] {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ opacity: 0;
+ transition: opacity 0.15s ease;
+ z-index: 1;
+ }
+
+ [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
+ opacity: 1;
+ }
+
+ [data-slot="markdown-copy-button"] [data-slot="check-icon"] {
+ display: none;
+ }
+
+ [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="copy-icon"] {
+ display: none;
+ }
+
+ [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="check-icon"] {
+ display: inline-flex;
+ }
+
+ pre {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ overflow: auto;
+
+ scrollbar-width: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ }
+
+ :not(pre) > code {
+ font-family: var(--font-family-mono);
+ font-feature-settings: var(--font-family-mono--font-feature-settings);
+ color: var(--syntax-string);
+ font-weight: var(--font-weight-medium);
+ /* font-size: 13px; */
+
+ /* padding: 2px 2px; */
+ /* margin: 0 1.5px; */
+ /* border-radius: 2px; */
+ /* background: var(--surface-base); */
+ /* box-shadow: 0 0 0 0.5px var(--border-weak-base); */
+ }
+
+ /* Tables */
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1.5rem 0;
+ font-size: var(--font-size-base);
+ }
+
+ th,
+ td {
+ /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
+ border-bottom: 1px solid var(--border-weaker-base);
+ padding: 0.75rem 0.5rem;
+ text-align: left;
+ vertical-align: top;
+ }
+
+ th {
+ color: var(--text-strong);
+ font-weight: var(--font-weight-medium);
+ border-bottom: 1px solid var(--border-weak-base);
+ }
+
+ /* Images */
+ img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 4px;
+ margin: 1.5rem 0;
+ display: block;
+ }
}