mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-12-23 10:11:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(share): styling

Browse source
This commit is contained in:
Adam 2025-11-20 13:11:11 -06:00
parent ad000ca8ed
commit 790c1c15c6
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
8 changed files with 29 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/enterprise/src/routes/share/[sessionID].tsx
View file

@ -74,7 +74,7 @@ export default function () {
<Show when={data()}>
{(data) => (
<DataProvider data={data()}>
<div class="relative bg-background-base size-full overflow-x-hidden flex flex-col">
<div class="relative bg-background-stronger size-full overflow-x-hidden flex flex-col">
<div class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
<div class="w-full flex-1 min-h-0 flex">
<div class="relative shrink-0 px-6 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-xl mx-auto">

26
packages/ui/src/components/accordion.css
View file

@ -5,7 +5,7 @@
gap: 0px;
align-self: stretch;
[data-slot="accordion-accordion-item"] {
[data-slot="accordion-item"] {
width: 100%;
display: flex;
flex-direction: column;
@ -14,14 +14,14 @@
align-self: stretch;
overflow: clip;
[data-slot="accordion-accordion-header"] {
[data-slot="accordion-header"] {
width: 100%;
display: flex;
align-items: center;
margin: 0;
padding: 0;
[data-slot="accordion-accordion-trigger"] {
[data-slot="accordion-trigger"] {
width: 100%;
display: flex;
height: 32px;
@ -62,23 +62,23 @@
margin-top: 8px;
margin-bottom: 8px;
[data-slot="accordion-accordion-trigger"] {
[data-slot="accordion-trigger"] {
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
[data-slot="accordion-accordion-content"] {
[data-slot="accordion-content"] {
border: 1px solid var(--border-weak-base);
border-top: none;
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
[data-slot="accordion-accordion-item"]:has(+ &) {
[data-slot="accordion-item"]:has(+ &) {
&[data-closed] {
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
[data-slot="accordion-accordion-trigger"] {
[data-slot="accordion-trigger"] {
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
@ -86,10 +86,10 @@
margin-bottom: 8px;
}
& + [data-slot="accordion-accordion-item"] {
& + [data-slot="accordion-item"] {
margin-top: 8px;
[data-slot="accordion-accordion-trigger"] {
[data-slot="accordion-trigger"] {
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
@ -97,7 +97,7 @@
}
&[data-closed] + &[data-closed] {
[data-slot="accordion-accordion-trigger"] {
[data-slot="accordion-trigger"] {
border-top: none;
}
}
@ -106,7 +106,7 @@
margin-top: 0px;
&[data-closed] {
[data-slot="accordion-accordion-trigger"] {
[data-slot="accordion-trigger"] {
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
@ -117,14 +117,14 @@
margin-bottom: 0px;
&[data-closed] {
[data-slot="accordion-accordion-trigger"] {
[data-slot="accordion-trigger"] {
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
}
}
[data-slot="accordion-accordion-content"] {
[data-slot="accordion-content"] {
overflow: hidden;
width: 100%;

8
packages/ui/src/components/accordion.tsx
View file

@ -27,7 +27,7 @@ function AccordionItem(props: AccordionItemProps) {
return (
<Kobalte.Item
{...rest}
data-slot="accordion-accordion-item"
data-slot="accordion-item"
classList={{
...(split.classList ?? {}),
[split.class ?? ""]: !!split.class,
@ -41,7 +41,7 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
return (
<Kobalte.Header
{...rest}
data-slot="accordion-accordion-header"
data-slot="accordion-header"
classList={{
...(split.classList ?? {}),
[split.class ?? ""]: !!split.class,
@ -57,7 +57,7 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
return (
<Kobalte.Trigger
{...rest}
data-slot="accordion-accordion-trigger"
data-slot="accordion-trigger"
classList={{
...(split.classList ?? {}),
[split.class ?? ""]: !!split.class,
@ -73,7 +73,7 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
return (
<Kobalte.Content
{...rest}
data-slot="accordion-accordion-content"
data-slot="accordion-content"
classList={{
...(split.classList ?? {}),
[split.class ?? ""]: !!split.class,

5
packages/ui/src/components/file-icon.css Normal file
View file

@ -0,0 +1,5 @@
[data-component="file-icon"] {
flex-shrink: 0;
width: 16px;
height: 16px;
}

2
packages/ui/src/components/file-icon.tsx
View file

@ -13,10 +13,10 @@ export const FileIcon: Component<FileIconProps> = (props) => {
const name = createMemo(() => chooseIconName(local.node.path, local.node.type, local.expanded || false))
return (
<svg
data-component="file-icon"
{...rest}
classList={{
...(local.classList ?? {}),
"shrink-0 size-4": true,
[local.class ?? ""]: !!local.class,
}}
>

10
packages/ui/src/components/session-review.css
View file

@ -46,8 +46,8 @@
}
}
[data-slot="session-review-accordion-trigger"] {
background-color: var(--background-stronger);
[data-slot="accordion-trigger"] {
background-color: var(--background-stronger) !important;
}
[data-slot="session-review-trigger-content"] {
@ -66,12 +66,6 @@
min-width: 0;
}
[data-slot="session-review-file-icon"] {
flex-shrink: 0;
width: 16px;
height: 16px;
}
[data-slot="session-review-file-name-container"] {
display: flex;
flex-grow: 1;

2
packages/ui/src/components/session-review.tsx
View file

@ -68,7 +68,7 @@ export const SessionReview = (props: SessionReviewProps) => {
<Accordion.Trigger>
<div data-slot="session-review-trigger-content">
<div data-slot="session-review-file-info">
<FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
<FileIcon node={{ path: diff.file, type: "file" }} />
<div data-slot="session-review-file-name-container">
<Show when={diff.file.includes("/")}>
<span data-slot="session-review-directory">{getDirectory(diff.file)}&lrm;</span>

3
packages/ui/src/styles/index.css
View file

@ -11,10 +11,11 @@
@import "../components/card.css" layer(components);
@import "../components/checkbox.css" layer(components);
@import "../components/code.css" layer(components);
@import "../components/collapsible.css" layer(components);
@import "../components/diff.css" layer(components);
@import "../components/diff-changes.css" layer(components);
@import "../components/collapsible.css" layer(components);
@import "../components/dialog.css" layer(components);
@import "../components/file-icon.css" layer(components);
@import "../components/icon.css" layer(components);
@import "../components/icon-button.css" layer(components);
@import "../components/input.css" layer(components);