aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-25 19:54:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

ignore: share page polish

Browse Source
This commit is contained in:
Jay V
2025-06-17 20:26:09 -04:00
parent 1c58023df9
commit d1f9311931
8 changed files with 368 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
packages/web/src/components/share.module.css
View File

@@ -5,6 +5,10 @@
gap: 2.5rem;
line-height: 1;
--sm-tool-width: 28rem;
--md-tool-width: 40rem;
--lg-tool-width: 56rem;
--term-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2016'%20preserveAspectRatio%3D'xMidYMid%20meet'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'8'%20r%3D'8'%2F%3E%3C%2Fsvg%3E");
}
@@ -37,7 +41,7 @@
[data-element-label] {
text-transform: uppercase;
letter-spacing: 0.05em;
letter-spacing: -0.5px;
color: var(--sl-color-text-dimmed);
}
@@ -164,30 +168,6 @@
}
}
}
[data-section="system-prompt"] {
display: flex;
gap: 0.3125rem;
[data-section="icon"] {
flex: 0 0 auto;
color: var(--sl-color-text-dimmed);
opacity: 0.85;
svg {
display: block;
}
}
[data-section="content"] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
button {
line-height: 1rem;
font-size: 0.875rem;
}
}
}
.parts {
@@ -227,6 +207,7 @@
}
& > [data-section="content"] {
flex: 1 1 auto;
min-width: 0;
padding: 0 0 0.375rem;
display: flex;
@@ -236,20 +217,28 @@
[data-part-tool-body] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.375rem;
}
span[data-part-title] {
[data-part-title] {
line-height: 18px;
font-size: 0.75rem;
font-size: 0.875rem;
color: var(--sl-color-text-secondary);
max-wdith: var(--sm-tool-width);
b {
word-break: break-all;
font-weight: 500;
display: flex;
align-items: flex-start;
gap: 0.375rem;
span[data-element-label] {
color: var(--sl-color-text-secondary);
}
&[data-size="md"] {
font-size: 0.875rem;
b {
color: var(--sl-color-text);
word-break: break-all;
font-weight: 500;
}
}
@@ -267,7 +256,7 @@
display: inline-grid;
align-items: center;
grid-template-columns: max-content max-content minmax(0, 1fr);
max-width: 100%;
max-width: var(--md-tool-width);
gap: 0.25rem 0.375rem;
& > div:nth-child(3n + 1) {
@@ -279,16 +268,14 @@
& > div:nth-child(3n + 2),
& > div:nth-child(3n + 3) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.75rem;
line-height: 1.5;
}
& > div:nth-child(3n + 3) {
padding-left: 0.125rem;
color: var(--sl-color-text-dimmed);
word-break: break-word;
color: var(--sl-color-text-secondary);
}
}
@@ -302,6 +289,11 @@
font-size: 0.75rem;
}
}
[data-part-tool-edit] {
width: 100%;
max-width: var(--lg-tool-width);
}
}
}
@@ -325,16 +317,6 @@
& > [data-section="content"] > [data-part-tool-body] {
gap: 0.5rem;
}
[data-part-title] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
b {
color: var(--sl-color-text);
word-break: break-all;
}
}
}
[data-part-type="tool-grep"] {
@@ -342,16 +324,6 @@
> [data-section="content"] > [data-part-tool-body] {
gap: 0.5rem;
}
[data-part-title] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
b {
color: var(--sl-color-text);
word-break: break-all;
}
}
}
[data-part-type="tool-write"],
@@ -359,7 +331,9 @@
[data-part-type="tool-fetch"] {
[data-part-tool-result] {
[data-part-tool-code] {
width: var(--md-tool-width);
border: 1px solid var(--sl-color-divider);
background-color: var(--sl-color-bg-surface);
border-radius: 0.25rem;
padding: 0.5rem calc(0.5rem + 3px);
@@ -372,8 +346,6 @@
}
}
}
[data-part-type="tool-edit"] {
}
}
.message-text {
@@ -384,6 +356,8 @@
flex-direction: column;
align-items: flex-start;
gap: 1rem;
align-self: flex-start;
max-width: var(--md-tool-width);
&[data-size="sm"] {
pre {
@@ -411,7 +385,7 @@
font-size: 0.75rem;
}
&[data-highlight="true"] {
&[data-invert="true"] {
background-color: var(--sl-color-blue-high);
pre {
@@ -428,6 +402,10 @@
}
}
&[data-highlight="true"] {
background-color: var(--sl-color-blue-low);
}
&[data-expanded="true"] {
pre {
display: block;
@@ -450,6 +428,7 @@
gap: 0.5rem;
& > [data-section="body"] {
width: var(--sm-tool-width);
border: 1px solid var(--sl-color-divider);
border-radius: 0.25rem;
max-width: 100%;
@@ -460,7 +439,7 @@
width: 100%;
height: 1.625rem;
text-align: center;
padding: 0 0.75rem 0 3.25rem;
padding: 0 3.25rem;
& > span {
max-width: min(100%, 140ch);
@@ -491,12 +470,10 @@
[data-section="content"] {
padding: 0.5rem calc(0.5rem + 3px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
pre {
--shiki-dark-bg: var(--sl-color-bg) !important;
background-color: var(--sl-color-bg) !important;
line-height: 1.6;
font-size: 0.75rem;
white-space: pre-wrap;
@@ -533,6 +510,8 @@
flex-direction: column;
align-items: flex-start;
gap: 1rem;
align-self: flex-start;
max-width: var(--md-tool-width);
button {
flex: 0 0 auto;
@@ -540,6 +519,10 @@
font-size: 0.75rem;
}
&[data-highlight="true"] {
background-color: var(--sl-color-blue-low);
}
&[data-expanded="true"] {
[data-elment-markdown] {
display: block;
@@ -566,6 +549,7 @@
list-style-type: none;
padding: 0;
margin: 0;
width: var(--sm-tool-width);
border: 1px solid var(--sl-color-divider);
border-radius: 0.25rem;
@@ -577,6 +561,7 @@
padding: 0.375rem 0.625rem 0.375rem 1.75rem;
border-bottom: 1px solid var(--sl-color-divider);
line-height: 1.5;
word-break: break-word;
&:last-child {
border-bottom: none;
@@ -614,9 +599,9 @@
}
}
&[data-status="completed"] {
color: var(--sl-color-text-dimmed);
color: var(--sl-color-text-secondary);
& > span { border-color: var(--sl-color-hairline); }
& > span { border-color: var(--sl-color-green-low); }
& > span::before {
content: "";
position: absolute;
@@ -624,7 +609,7 @@
left: 2px;
width: calc(0.75rem - 2px - 4px);
height: calc(0.75rem - 2px - 4px);
box-shadow: inset 1rem 1rem var(--sl-color-divider);
box-shadow: inset 1rem 1rem var(--sl-color-green);
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);