aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-24 03:04:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

ignore: cloud styles

Browse Source
This commit is contained in:
Jay V
2025-08-28 18:13:45 -04:00
parent 8a0e773add
commit f2f4d87cc0
6 changed files with 401 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
cloud/app/src/asset/logo.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg width="289" height="50" viewBox="0 0 289 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="black"/>
<path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="black"/>
<path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z" fill="black"/>
<path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="black"/>
<path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="black"/>
<path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z" fill="black"/>
<path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 981 B

17
cloud/app/src/component/icon.tsx
View File

@@ -1,6 +1,21 @@
import { JSX } from "solid-js"
export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
return (
<svg {...props} viewBox="0 0 289 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="currentColor" />
<path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="currentColor" />
<path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z" fill="currentColor" />
<path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="currentColor" />
<path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="currentColor" />
<path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z" fill="currentColor" />
<path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="currentColor" />
</svg>
);
}
export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
return (

29
cloud/app/src/routes/workspace.tsx
View File

@@ -1,11 +1,34 @@
import { IconLogo } from "../component/icon"
import "./workspace/workspace.css"
import { RouteSectionProps } from "@solidjs/router";
import { RouteSectionProps } from "@solidjs/router"
export default function WorkspaceLayout(props: RouteSectionProps) {
return (
<main data-page="workspace">
<h1>Workspace</h1>
<header data-component="workspace-header">
<div data-slot="header-brand">
<a href="/" data-component="site-title">
<IconLogo />
</a>
</div>
<nav data-slot="header-nav">
<a href="/home">Home</a>
<a href="/docs">Docs</a>
</nav>
<div data-slot="header-actions">
<a href="https://github.com" target="_blank" rel="noopener" title="GitHub">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
<a href="https://discord.gg" target="_blank" rel="noopener" title="Discord">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0019 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z" />
</svg>
</a>
</div>
</header>
{props.children}
</main>
);
)
}

347
cloud/app/src/routes/workspace/workspace.css
View File

@@ -1,10 +1,347 @@
[data-page="workspace"] {
font-family: var(--font-mono);
display: flex;
flex-direction: column;
gap: var(--space-6);
line-height: 1;
padding: var(--space-6);
@media (max-width: 30rem) {
padding: var(--space-4);
gap: var(--space-5);
}
/* Workspace Header */
[data-component="workspace-header"] {
position: sticky;
top: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
height: 3.5rem;
padding: 0 var(--space-6);
margin: calc(-1 * var(--space-6));
margin-bottom: var(--space-6);
border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg);
@media (max-width: 30rem) {
padding: 0 var(--space-4);
margin: calc(-1 * var(--space-4));
margin-bottom: var(--space-5);
}
}
[data-slot="header-brand"] {
flex: 0 0 auto;
svg {
width: 138px;
}
[data-component="site-title"] {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-text);
text-decoration: none;
letter-spacing: -0.02em;
}
}
[data-slot="header-nav"] {
display: flex;
gap: var(--space-4);
align-items: center;
@media (max-width: 50rem) {
display: none;
}
a {
color: var(--color-text-secondary);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.15s ease;
&:hover {
color: var(--color-text);
}
}
}
[data-slot="header-actions"] {
display: flex;
gap: var(--space-4);
align-items: center;
a {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.15s ease;
&:hover {
color: var(--color-text);
}
svg {
display: block;
}
}
}
/* Main content container */
& > div {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Adjust header spacing */
[data-component="workspace-header"] + div {
margin-top: var(--space-2);
}
/* Section headers */
h1 {
font-size: var(--font-size-3xl);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.05em;
margin: 0;
color: var(--color-text);
@media (max-width: 30rem) {
font-size: var(--font-size-2xl);
line-height: 1.25;
}
}
/* Section descriptions */
p {
margin: 0;
color: var(--color-text-secondary);
font-size: var(--font-size-md);
line-height: 1.5;
}
/* API Keys Section */
[data-slot="create-form"] {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--space-2);
max-width: 32rem;
input {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--space-2);
background-color: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-sm);
font-family: var(--font-mono);
&:focus {
outline: none;
border-color: var(--color-accent);
}
&::placeholder {
color: var(--color-text-disabled);
}
}
[data-slot="form-actions"] {
display: flex;
gap: var(--space-2);
justify-content: flex-end;
}
}
[data-slot="key-list"] {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
[data-slot="key-item"] {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: var(--space-4);
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--space-2);
gap: var(--space-4);
@media (max-width: 30rem) {
flex-direction: column;
gap: var(--space-3);
}
}
[data-slot="key-info"] {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1;
}
[data-slot="key-name"] {
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-text);
}
[data-slot="key-value"] {
font-size: var(--font-size-xs);
font-family: var(--font-mono);
color: var(--color-text-secondary);
background-color: var(--color-bg);
padding: var(--space-1) var(--space-2);
border-radius: var(--space-1);
border: 1px solid var(--color-border-muted);
}
[data-slot="key-meta"] {
font-size: var(--font-size-xs);
color: var(--color-text-disabled);
}
[data-slot="key-actions"] {
display: flex;
gap: var(--space-2);
}
[data-slot="empty-state"] {
padding: var(--space-8);
text-align: center;
color: var(--color-text-muted);
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--space-2);
p {
margin: 0;
font-size: var(--font-size-sm);
}
}
/* Balance Section */
[data-slot="balance"] {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--space-2);
max-width: 32rem;
p {
font-size: var(--font-size-2xl);
font-weight: 500;
color: var(--color-text);
margin: 0;
}
}
/* Payment and Usage Items */
[data-slot="payment-item"],
[data-slot="usage-item"] {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3);
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--space-2);
font-size: var(--font-size-sm);
font-family: var(--font-mono);
@media (max-width: 30rem) {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
}
[data-slot="payment-id"],
[data-slot="payment-amount"],
[data-slot="payment-date"],
[data-slot="usage-model"],
[data-slot="usage-tokens"],
[data-slot="usage-cost"],
[data-slot="usage-date"] {
color: var(--color-text-muted);
}
/* Buttons */
button {
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--space-2);
background-color: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-sm);
font-family: var(--font-sans);
cursor: pointer;
transition: all 0.15s ease;
&:hover {
background-color: var(--color-surface-hover);
border-color: var(--color-accent);
}
&:active {
transform: translateY(1px);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
&:hover {
background-color: var(--color-bg);
border-color: var(--color-border);
transform: none;
}
}
&[color="primary"] {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-primary-text);
&:hover {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}
}
&[color="ghost"] {
background-color: transparent;
border-color: transparent;
color: var(--color-text-muted);
&:hover {
background-color: var(--color-surface-hover);
border-color: var(--color-border);
color: var(--color-text);
}
}
}
@media (prefers-color-scheme: dark) {
/* Dark mode specific adjustments if needed */
}
}
[data-page="workspace"] {
font-family: var(--font-mono);
}

2
cloud/app/src/style/token/color.css
View File

@@ -8,6 +8,7 @@
--color-bg-elevated: #ffffff;
--color-text: #1d1d1f;
--color-text-secondary: #424245;
--color-text-muted: #6e6e73;
--color-text-disabled: #86868b;
@@ -52,6 +53,7 @@
--color-bg-elevated: #1c1c1f;
--color-text: #ffffff;
--color-text-secondary: #c7c7cc;
--color-text-muted: #a1a1a6;
--color-text-disabled: #68686f;

5
cloud/app/src/style/token/font.css
View File

@@ -13,6 +13,7 @@ body {
--font-size-7xl: 4.5rem;
--font-size-8xl: 6rem;
--font-size-9xl: 8rem;
--font-mono: IBM Plex Mono;
--font-sans: Inter;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans: var(--font-mono);
}